/* ROTOR — NIGHT CIRCUIT · boot shell + the ONE layout/z-order owner.
   Bible palette only: court blue #043cff, silver #e9eef2, ball green #9aff00, UI lime #c7fc68, yellow #ffcf00, black void.
   No red, no off-palette neon. Every overlay's position + z is set HERE so nothing covers the court, boards or LEDs. */
:root{
  --rt-blue:#043cff; --rt-silver:#e9eef2; --rt-ball:#9aff00; --rt-lime:#c7fc68;
  --rt-yellow:#ffcf00; --rt-ink:#05070c; --rt-void:#000;
  --z-court:0; --z-stamp:12; --z-tag:14; --z-tele:16; --z-radio:30; --z-bar:34; --z-gate:95; --z-boot:100; --z-modal:120;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--rt-silver);overflow:hidden;
  font-family:Inter,system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased}
#arena{position:fixed;inset:0;z-index:var(--z-court)}
#arena canvas{display:block;width:100%!important;height:100%!important}

/* Branded black boot cover — fades once the first frame has rendered (no raw black/white load frame). */
#boot{position:fixed;inset:0;z-index:var(--z-boot);display:grid;place-content:center;gap:14px;text-align:center;
  background:radial-gradient(130% 90% at 50% 40%,#061024 0%,#01030a 60%,#000 100%);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1);pointer-events:none}
#boot.gone{opacity:0}
.boot-mark{font:800 clamp(44px,9vw,120px)/.9 "Barlow Condensed",Impact,sans-serif;letter-spacing:.04em;color:var(--rt-silver)}
.boot-mark span{color:var(--rt-yellow)}
.boot-sub{font:700 14px/1.2 Inter,sans-serif;letter-spacing:.3em;color:#a6b4ce}

/* Build stamp — proves the exact build + git sha + that the bar mounted (bar:OK). */
#buildStamp{position:fixed;right:12px;bottom:10px;z-index:var(--z-stamp);padding:6px 10px;border-radius:7px;
  border:1px solid #9aff0033;background:#04061ac4;color:#9fb4d8;
  font:600 10px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.06em;pointer-events:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#buildStamp b{color:var(--rt-ball)}

/* ================= ONE MENU OWNER: the moments bar (bottom-center) ================= */
#momentsBar{position:fixed;left:50%;bottom:clamp(14px,3vh,28px);transform:translateX(-50%);z-index:var(--z-bar);
  display:flex;align-items:center;gap:10px;width:max-content;max-width:min(1060px,96vw);padding:9px 11px;
  border-radius:999px;background:#05070cd6;border:1px solid #ffffff1c;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 64px #000b,inset 0 1px 0 #ffffff12}
#momentsBar .mb-mark{display:flex;flex-direction:column;line-height:1;padding:0 10px 0 6px;white-space:nowrap}
#momentsBar .mb-mark b{font:800 17px/1 "Barlow Condensed",Impact,sans-serif;letter-spacing:.08em;color:var(--rt-silver)}
#momentsBar .mb-mark b i{font-style:normal;color:var(--rt-yellow)}
#momentsBar .mb-mark small{font:700 12px/1 Inter,sans-serif;letter-spacing:.18em;color:#a6b4ce;margin-top:4px}
#momentsBar .mb-moments{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
#momentsBar .mb-moments::-webkit-scrollbar{display:none}
#momentsBar .mb-pill{position:relative;overflow:hidden;flex:0 0 auto;border:1px solid #ffffff14;border-radius:999px;
  background:#ffffff08;padding:8px 13px;cursor:pointer;transition:border-color .3s,background .3s}
#momentsBar .mb-pill:hover{border-color:#ffffff33}
#momentsBar .mb-fill{position:absolute;inset:0;width:0;border-right:2px solid var(--rt-ball);
  background:linear-gradient(90deg,rgba(154,255,0,.30),rgba(154,255,0,.12));transition:width .12s linear;pointer-events:none}
#momentsBar .mb-txt{position:relative;display:flex;align-items:center;gap:7px;white-space:nowrap}
#momentsBar .mb-txt em{font:700 12px/1 ui-monospace,Menlo,monospace;font-style:normal;letter-spacing:.1em;color:#83a2ff}
#momentsBar .mb-pill[aria-current="true"] .mb-txt em{color:var(--rt-ball)}
#momentsBar .mb-txt b{font:700 14px/1 Inter,sans-serif;letter-spacing:.08em;color:#dce5f4}
#momentsBar .mb-pill[aria-current="true"]{border-color:#9aff0066;background:#9aff0010}
#momentsBar .mb-pill[aria-current="true"] .mb-txt b{color:#fff}
#momentsBar .mb-auto{display:flex;align-items:center;gap:8px;flex:0 0 auto;font:800 14px/1 Inter,sans-serif;letter-spacing:.12em;
  color:#000;background:var(--rt-lime);border:1px solid var(--rt-lime);border-radius:999px;padding:11px 16px;cursor:pointer;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),filter .25s}
#momentsBar .mb-auto[aria-pressed="false"]{color:var(--rt-lime);background:transparent}
#momentsBar .mb-auto:hover{filter:brightness(1.08);transform:translateY(-1px)}
#momentsBar .mb-auto .ic{font-size:14px}

/* a11y focus ring (lime = interaction) */
#momentsBar button:focus-visible,#pfRadio button:focus-visible{outline:2px solid var(--rt-lime);outline-offset:2px}

/* =========================================================================================
   LAYOUT OWNER — force every overlay into a non-overlapping region, overriding each module's
   own CSS. Regions: radio TOP-LEFT · telemetry TOP-RIGHT · GTA taglines MID-LEFT ·
   moments bar BOTTOM-CENTER · build stamp BOTTOM-RIGHT · sound gate CENTER (until tapped).
   Nothing sits over the centre court, the boards, the LEDs or the OLED screen.
   ========================================================================================= */
/* ODESZA courtside radio -> top-left */
#pfRadio{position:fixed!important;left:clamp(14px,2.4vw,28px)!important;top:clamp(14px,2.4vh,24px)!important;bottom:auto!important;
  right:auto!important;display:flex!important;z-index:var(--z-radio)!important}
body.playing #pfRadio,body.in-power-court #pfRadio{display:none!important}
/* the big Spotify deck card is redundant with the pill -> hide it (keeps the court clear) */
#pfDeck{display:none!important}
/* ODESZA modal stays a true overlay */
#pfOdesza{z-index:var(--z-modal)!important}
/* AVQOR telemetry HUD -> top-right, never mid-screen over the court/OLED */
#pfTelemetry{position:fixed!important;right:clamp(14px,2.2vw,26px)!important;top:clamp(14px,2.2vh,22px)!important;bottom:auto!important;
  left:auto!important;transform:none!important;z-index:var(--z-tele)!important}
/* GTA poster taglines -> mid/lower-left, clear above the moments bar */
#pfTag{position:fixed!important;left:clamp(22px,4vw,64px)!important;bottom:clamp(128px,22vh,240px)!important;z-index:var(--z-tag)!important;max-width:min(680px,80vw)!important}
/* sound gate -> centre, lifted clear of the moments bar; it removes itself on first gesture */
#pfSoundGate{bottom:clamp(108px,18vh,180px)!important;z-index:var(--z-gate)!important}

/* ---------------- Responsive: 1280-wide and phones ---------------- */
@media (max-width:1320px){
  #pfTag{bottom:clamp(120px,20vh,210px)!important;max-width:min(560px,74vw)!important}
}
@media (max-width:900px){
  /* telemetry hides itself <900 in its own CSS; keep the stamp out of the bar on phones */
  #buildStamp{top:clamp(10px,2vh,16px);right:auto;left:clamp(14px,3vw,20px);bottom:auto}
  #pfRadio{top:auto!important;bottom:clamp(76px,12vh,110px)!important}      /* above the full-width bar */
  #pfTag{bottom:clamp(150px,24vh,230px)!important;left:clamp(16px,4vw,28px)!important;max-width:86vw!important}
  #momentsBar{left:10px;right:10px;transform:none;width:auto;max-width:none}
  #momentsBar .mb-mark small{display:none}
  #momentsBar .mb-mark{padding-left:2px}
  #momentsBar .mb-auto .lbl{display:none}
}
@media (prefers-reduced-motion: reduce){
  #boot,#momentsBar .mb-pill,#momentsBar .mb-auto,#momentsBar .mb-fill{transition:none}
}