/* =====================================================================
   Opfi Space — HUD stylesheet (Track F)
   Glass-morphism, airy, collapsible. v0.2-beta.
   ===================================================================== */

:root {
  --hud-bg:         rgba(20, 22, 40, 0.60);
  --hud-bg-solid:   #15162b;
  --hud-border:     rgba(255, 255, 255, 0.08);
  --hud-border-hi:  rgba(255, 255, 255, 0.16);
  --hud-text:       #ffffff;
  --hud-dim:        #b9b7d9;
  --hud-cyan:       #6affd2;
  --hud-cyan-soft:  rgba(106, 255, 210, 0.18);
  --hud-pink:       #ff5faa;
  --hud-pink-soft:  rgba(255, 95, 170, 0.18);
  --hud-gold:       #ffcc66;
  --hud-red:        #ff6488;
  --hud-radius:     14px;
  --hud-radius-sm:  8px;
  --hud-shadow:     0 12px 40px rgba(0, 0, 0, 0.45),
                    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --hud-glow-cyan:  0 0 24px rgba(106, 255, 210, 0.10);
  --hud-glow-pink:  0 0 24px rgba(255, 95, 170, 0.12);
  --mono:           'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:           system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Root grid ---------- */
.hud-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  font-family: var(--sans);
  color: var(--hud-text);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 18px;
  box-sizing: border-box;
}

.hud-slot { pointer-events: none; display: flex; flex-direction: column; gap: 12px; }
.hud-slot > * { pointer-events: auto; }

.hud-slot--tl { grid-column: 1; grid-row: 1; align-items: flex-start; }
.hud-slot--tr { grid-column: 2; grid-row: 1 / span 2; align-items: flex-end; }
.hud-slot--bl { grid-column: 1; grid-row: 3; align-items: flex-start; }
.hud-slot--br { grid-column: 2; grid-row: 3; align-items: flex-end; }

/* ---------- Brand (top-left) ---------- */
.hud-brand {
  background: var(--hud-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hud-border);
  border-radius: var(--hud-radius);
  padding: 10px 14px;
  box-shadow: var(--hud-shadow), var(--hud-glow-pink);
  min-width: 240px;
}

.hud-brand__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-brand__logo {
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 13px;
  color: var(--hud-text);
  text-shadow: 0 0 18px rgba(255, 95, 170, 0.4);
}

.hud-brand__ver {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--hud-pink);
  padding: 2px 6px;
  border: 1px solid rgba(255, 95, 170, 0.35);
  border-radius: 999px;
  background: rgba(255, 95, 170, 0.08);
}

.hud-brand__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--hud-dim);
}

.hud-brand__name {
  font-family: var(--mono);
  color: var(--hud-cyan);
}

.hud-pill {
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(106, 255, 210, 0.1);
  color: var(--hud-cyan);
  border: 1px solid rgba(106, 255, 210, 0.3);
  text-transform: uppercase;
}

.hud-pill--stage { /* tinted by stage if needed */ }

/* ---------- Online/offline dot ---------- */
.hud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: auto;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(106, 255, 210, 0.55);
}

.hud-dot--online {
  background: var(--hud-cyan);
  animation: hud-pulse 2s ease-out infinite;
}

.hud-dot--offline {
  background: var(--hud-red);
  animation: none;
  box-shadow: 0 0 10px rgba(255, 100, 136, 0.6);
}

@keyframes hud-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(106, 255, 210, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(106, 255, 210, 0);    }
  100% { box-shadow: 0 0 0 0    rgba(106, 255, 210, 0);    }
}

/* ---------- Generic panel ---------- */
.hud-panel {
  background: var(--hud-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hud-border);
  border-radius: var(--hud-radius);
  box-shadow: var(--hud-shadow);
  overflow: hidden;
  min-width: 260px;
  max-width: 340px;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.hud-panel--cyan { box-shadow: var(--hud-shadow), var(--hud-glow-cyan); border-top: 1px solid rgba(106, 255, 210, 0.25); }
.hud-panel--pink { box-shadow: var(--hud-shadow), var(--hud-glow-pink); border-top: 1px solid rgba(255, 95, 170, 0.3); }

.hud-panel__hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hud-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.hud-panel__title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hud-dim);
}

.hud-panel--cyan .hud-panel__title { color: var(--hud-cyan); }
.hud-panel--pink .hud-panel__title { color: var(--hud-pink); }

.hud-panel__chev {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--hud-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 150ms ease, transform 200ms ease, color 150ms ease;
}
.hud-panel__chev:hover { background: rgba(255, 255, 255, 0.06); color: var(--hud-text); }

.hud-panel.is-collapsed .hud-panel__chev { transform: rotate(-90deg); }
.hud-panel.is-collapsed .hud-panel__body { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

.hud-panel__body {
  padding: 10px 12px 12px;
  max-height: 420px;
  overflow: hidden;
  transition: max-height 240ms ease, opacity 200ms ease, padding 200ms ease;
}

/* ---------- Brain Stats rows ---------- */
.hud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
}

.hud-row__label {
  color: var(--hud-dim);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.hud-row__val {
  color: var(--hud-text);
  font-size: 13px;
}

.hud-row__val.mono {
  font-family: var(--mono);
  color: var(--hud-cyan);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.hud-row--mood { align-items: center; }

.hud-spark {
  margin-left: auto;
  margin-right: 8px;
  display: block;
  image-rendering: crisp-edges;
  background: rgba(106, 255, 210, 0.04);
  border-radius: 4px;
}

/* ---------- Budget ---------- */
.hud-budget { margin-top: 6px; }

.hud-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
  position: relative;
}

.hud-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--hud-cyan);
  border-radius: 999px;
  transition: width 300ms ease, background-color 200ms ease;
  box-shadow: 0 0 8px rgba(106, 255, 210, 0.5);
}
.hud-bar__fill.is-ok   { background: var(--hud-cyan); box-shadow: 0 0 8px rgba(106,255,210,.5); }
.hud-bar__fill.is-warn { background: var(--hud-gold); box-shadow: 0 0 8px rgba(255,204,102,.55); }
.hud-bar__fill.is-crit { background: var(--hud-red);  box-shadow: 0 0 10px rgba(255,100,136,.6); }

/* ---------- Activity Log ---------- */
.hud-log { max-width: 380px; }

.hud-log__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  overflow: hidden;
}

.hud-log__entry {
  display: flex;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--hud-radius-sm);
  font-size: 12px;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.02);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
}

.hud-log__entry.is-in { opacity: 1; transform: translateY(0); }
.hud-log__entry:hover { background: rgba(255, 95, 170, 0.06); }

.hud-log__ts {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--hud-dim);
  opacity: 0.7;
  flex-shrink: 0;
  padding-top: 1px;
}

.hud-log__body { color: var(--hud-text); }
.hud-log__body em { color: var(--hud-cyan); font-style: normal; }
.hud-log__body strong { color: var(--hud-pink); font-weight: 600; }

/* ---------- Current Activity card ---------- */
.hud-activity { max-width: 340px; }

.hud-activity__room {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--hud-pink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.hud-activity__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hud-text);
  line-height: 1.3;
  margin-bottom: 2px;
}

.hud-activity__status {
  font-size: 11px;
  color: var(--hud-dim);
  font-family: var(--mono);
}

.hud-activity__bar { margin-top: 8px; }
.hud-activity__bar .hud-bar__fill { background: var(--hud-pink); box-shadow: 0 0 8px rgba(255,95,170,.55); }

/* ---------- Slide-in Info Panels ---------- */
.hud-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  width: 100%;
  max-width: 340px;
}

.hud-info {
  width: 100%;
  max-width: 320px;
  transform: translateX(110%);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}
.hud-info.is-in  { transform: translateX(0); opacity: 1; }
.hud-info.is-out { transform: translateX(110%); opacity: 0; }

.hud-info .hud-panel__body {
  max-height: 260px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hud-dim);
}

.hud-info .hud-panel__body h4 { color: var(--hud-pink); margin: 0 0 6px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.hud-info .hud-panel__body p  { margin: 0 0 8px; }

.hud-info__close {
  margin-left: 6px;
  background: transparent;
  border: none;
  color: var(--hud-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: color 120ms ease, background 120ms ease;
}
.hud-info__close:hover { color: var(--hud-pink); background: rgba(255, 95, 170, 0.1); }

/* ---------- Scrollbars (subtle) ---------- */
.hud-info .hud-panel__body::-webkit-scrollbar { width: 4px; }
.hud-info .hud-panel__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hud-root {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    gap: 10px;
    padding: 10px;
  }
  .hud-slot--tl { grid-column: 1; grid-row: 1; }
  .hud-slot--tr { grid-column: 1; grid-row: 2; align-items: stretch; }
  .hud-slot--bl { grid-column: 1; grid-row: 3; }
  .hud-slot--br { grid-column: 1; grid-row: 4; align-items: stretch; }
  .hud-panel, .hud-brand, .hud-info, .hud-stack { max-width: 100%; width: 100%; }
  .hud-info { transform: translateY(-10px); }
  .hud-info.is-in  { transform: translateY(0); }
  .hud-info.is-out { transform: translateY(-10px); }
}

@media (max-width: 600px) {
  .hud-panel__body { max-height: 220px; }
  .hud-log__list   { max-height: 160px; }
  .hud-brand__logo { font-size: 11px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hud-dot--online { animation: none; }
  .hud-info, .hud-log__entry, .hud-panel__body, .hud-bar__fill { transition: none; }
}