/* UNINTENDED 2 — FIRST BLOOD big-screen display (standalone). Full black, theme tokens. */
:root {
  color-scheme: dark;
  --bg-primary:#000; --bg-card:#0B0D0C; --bg-dark-green:#071A0D;
  --green-primary:#00FF41; --green-muted:#4CAF70; --green-border:#0B3D1C;
  --border-medium:#1f2e22; --border-subtle:#141c16;
  --text-light:#D5DAD6; --text-gray:#7C827E; --text-dim:#444b46;
  --font-mono:'JetBrains Mono','IBM Plex Mono',monospace;
  --font-sans:'Space Grotesk','Inter',sans-serif;
  --fb-blood:#a50f1e; --fb-blood-deep:#4a070e; --fb-blood-bright:#e01b2e; --fb-blood-gloss:#ff6b74;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #000; color: var(--text-light); font-family: var(--font-sans);
  overflow: hidden; -webkit-font-smoothing: antialiased;
}

/* ambient scanlines on the whole screen */
.screen-crt { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .3;
  background: repeating-linear-gradient(to bottom, transparent, transparent 3px, rgba(0,255,65,.03) 3px, rgba(0,255,65,.03) 6px); }
.screen-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.85) 100%); }

/* ===================== idle / listening screen ===================== */
.idle { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 1.4rem; padding: 2rem; }
.idle-badge { font-family: var(--font-mono); font-size: clamp(.7rem,1.6vw,.95rem); letter-spacing: 4px;
  color: var(--green-muted); text-transform: uppercase; }
.idle-badge .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green-primary); box-shadow: 0 0 10px var(--green-primary); margin-right: 10px; vertical-align: middle;
  animation: idlePulse 2.4s ease-in-out infinite; }
@keyframes idlePulse { 0%,100% { opacity:.6; transform:scale(1) } 50% { opacity:1; transform:scale(1.25) } }
.idle-title { font-family: var(--font-mono); font-size: clamp(2rem,7vw,5rem); font-weight: 700;
  letter-spacing: 8px; text-transform: uppercase; color: var(--text-light); margin: 0; }
.idle-title b { color: var(--green-primary); text-shadow: 0 0 22px rgba(0,255,65,.4); }
.idle-line { font-family: var(--font-mono); font-size: clamp(.85rem,2vw,1.2rem); color: var(--text-gray); letter-spacing: 2px; }
.idle-line .ok { color: var(--green-primary); }
.idle-cursor { display: inline-block; width: 11px; height: 1.1em; background: var(--green-primary);
  margin-left: 6px; vertical-align: text-bottom; animation: curBlink 1.1s steps(2,start) infinite; }
@keyframes curBlink { 0%,100% { opacity:1 } 50% { opacity:0 } }
.idle.disconnected .idle-line .ok { color: var(--fb-blood-bright); }

/* ===================== ARM overlay (unlock audio) ===================== */
.arm { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem; background: #000; text-align: center; padding: 2rem; }
.arm h1 { font-family: var(--font-mono); font-size: clamp(1.6rem,5vw,3rem); letter-spacing: 6px;
  text-transform: uppercase; color: var(--green-primary); margin: 0; text-shadow: 0 0 22px rgba(0,255,65,.4); }
.arm p { font-family: var(--font-mono); color: var(--text-gray); max-width: 46ch; letter-spacing: 1px; margin: 0; }
.arm button { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; cursor: pointer; padding: 1rem 2.4rem; border-radius: 0;
  background: var(--bg-dark-green); color: var(--green-primary); border: 1px solid var(--green-border);
  transition: all .18s ease; }
.arm button:hover { background: var(--green-primary); color: #000; box-shadow: 0 0 22px rgba(0,255,65,.4); }
[hidden] { display: none !important; }

/* ===================== the takeover (v6: smoke + blood + green/black glitch) ===================== */
.fb-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 1.5rem; overflow: hidden; pointer-events: none; opacity: 0;
  font-family: var(--font-mono); background: #000; }
.fb-overlay.is-active { pointer-events: auto; opacity: 1; animation: fbIn .12s ease-out both; }
.fb-overlay.is-leaving { animation: fbOut .55s ease-in both; }
@keyframes fbIn { from { opacity:0 } to { opacity:1 } } @keyframes fbOut { from { opacity:1 } to { opacity:0 } }
.fb-overlay::before { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.4;
  background: repeating-linear-gradient(to bottom, transparent, transparent 3px, rgba(0,255,65,.03) 3px, rgba(0,255,65,.03) 6px); }
.fb-overlay::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(0,0,0,.8) 100%); }
.fb-smoke { position:absolute; inset:0; z-index:0; pointer-events:none; filter: blur(8px); }
.fb-fx { position:absolute; inset:0; z-index:1; pointer-events:none; }
.fb-splats { position:absolute; inset:0; z-index:2; pointer-events:none; }
.fb-runs { position:absolute; inset:0 0 auto 0; z-index:4; pointer-events:none; height:0; }
.fb-stage { position:relative; z-index:5; max-width:94vw; }
.fb-headline { position:relative; display:inline-block; font-size:clamp(2.6rem,11vw,7rem); font-weight:700;
  letter-spacing:7px; line-height:1; text-transform:uppercase; color:var(--green-primary);
  text-shadow:0 0 22px rgba(0,255,65,.45),0 0 46px rgba(0,255,65,.18); margin:0; opacity:0; }
.fb-overlay.is-active .fb-headline { animation: fbHeadIn .45s ease-out .2s both; }
@keyframes fbHeadIn { from { opacity:0; transform:scale(.92) } to { opacity:1; transform:scale(1) } }
.fb-headline.fb-css-glitch { animation: fbHeadIn .45s ease-out .2s both, fbMicro .09s steps(2) .6s infinite; }
@keyframes fbMicro { 0% { transform:translate(.6px,0) } 100% { transform:translate(-.6px,.5px) } }
.fb-headline.fb-css-glitch[data-text]::before, .fb-headline.fb-css-glitch[data-text]::after { content:attr(data-text); position:absolute; inset:0; pointer-events:none; }
.fb-headline.fb-css-glitch[data-text]::before { color:var(--green-primary); text-shadow:0 0 10px rgba(0,255,65,.6); left:3px; opacity:.8; animation:fbGhost 2.6s steps(2,end) infinite; }
.fb-headline.fb-css-glitch[data-text]::after { color:#000; left:-2px; text-shadow:2px 0 #000; animation:fbTear 3.1s steps(2,end) infinite; }
@keyframes fbGhost { 0%,70%,100% { clip-path:inset(0 0 100% 0); opacity:0 } 72% { clip-path:inset(20% 0 55% 0); opacity:.85 } 80% { clip-path:inset(62% 0 22% 0); opacity:.85 } 88% { clip-path:inset(38% 0 40% 0); opacity:.85 } }
@keyframes fbTear { 0%,60%,100% { clip-path:inset(100% 0 0 0) } 64% { clip-path:inset(44% 0 48% 0) } 74% { clip-path:inset(10% 0 82% 0) } 84% { clip-path:inset(70% 0 12% 0) } }
.fb-sub { font-size:clamp(1rem,3.2vw,1.9rem); margin:1.5rem 0 1.1rem; color:var(--text-gray); opacity:0; }
.fb-sub .fb-chal { color:var(--text-light); font-weight:600; } .fb-sub .fb-by { color:var(--green-muted); }
.fb-overlay.is-active .fb-sub { animation: fbFade .9s ease .9s both; }
@keyframes fbFade { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
.fb-team { font-size:clamp(2.2rem,8vw,5.6rem); font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--green-primary); text-shadow:0 0 20px rgba(0,255,65,.5),0 0 40px rgba(0,255,65,.22); margin:0; opacity:0; position:relative; display:inline-block; }
.fb-overlay.is-active .fb-team { animation: fbTeamIn .8s cubic-bezier(.22,1,.36,1) 1.2s both; }
@keyframes fbTeamIn { from { opacity:0; transform:scale(1.08) } to { opacity:1; transform:scale(1) } }
.fb-team::after { content:""; position:absolute; left:8%; right:8%; bottom:-.35em; height:4px;
  background:linear-gradient(90deg,transparent,var(--fb-blood),var(--fb-blood-bright),var(--fb-blood),transparent);
  filter:blur(.5px); box-shadow:0 0 10px rgba(165,15,30,.6); opacity:0; }
.fb-overlay.is-active .fb-team::after { animation: fbFade .6s ease 1.7s both; }
.fb-meta { margin-top:1.6rem; display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; opacity:0; }
.fb-overlay.is-active .fb-meta { animation: fbFade .7s ease 2s both; }
.fb-chip { font-size:1rem; letter-spacing:1.5px; text-transform:uppercase; padding:.35rem .9rem;
  border:1px solid var(--green-border); background:var(--bg-dark-green); color:var(--green-primary); }
.fb-chip.fb-chip-blood { border-color:var(--fb-blood-deep); color:var(--fb-blood-bright); background:rgba(165,15,30,.12); }
.fb-run { position:absolute; top:-4px; width:var(--rw,5px); height:0; border-radius:0 0 40% 40%;
  background:linear-gradient(to bottom,var(--fb-blood-deep),#74101c 35%,var(--fb-blood) 75%,var(--fb-blood-bright));
  box-shadow:inset 1.5px 0 0 rgba(255,150,150,.22),inset -1px 0 0 rgba(0,0,0,.35),0 0 7px rgba(0,0,0,.55);
  animation:fbRun var(--rt,2.6s) cubic-bezier(.45,0,.9,.35) forwards; }
.fb-run::after { content:""; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  width:calc(var(--rw,5px) + 5px); height:calc(var(--rw,5px) + 7px); border-radius:50% 50% 48% 48%;
  background:radial-gradient(circle at 38% 30%,var(--fb-blood-gloss),var(--fb-blood) 42%,var(--fb-blood-deep)); box-shadow:0 0 7px rgba(0,0,0,.5); }
@keyframes fbRun { from { height:0 } to { height:var(--rh,30vh) } }
.fb-splat { position:absolute; opacity:0; transform:scale(.6) rotate(var(--sr,0deg)); filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.fb-overlay.is-active .fb-splat { animation: fbSplat .5s cubic-bezier(.16,1,.3,1) var(--sd,.1s) both; }
@keyframes fbSplat { from { opacity:0; transform:scale(.4) rotate(var(--sr,0deg)) } to { opacity:var(--so,.7); transform:scale(1) rotate(var(--sr,0deg)) } }
.fb-timer { position:absolute; left:0; bottom:0; height:4px; width:100%; background:var(--fb-blood); transform-origin:left; z-index:7; box-shadow:0 0 10px rgba(165,15,30,.7); }
.fb-overlay.is-active .fb-timer { animation: fbTimer var(--fb-duration,9s) linear both; }
@keyframes fbTimer { from { transform:scaleX(1) } to { transform:scaleX(0) } }
@media (prefers-reduced-motion: reduce) {
  .fb-overlay, .fb-overlay * { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .fb-headline.fb-css-glitch::before, .fb-headline.fb-css-glitch::after { display:none !important; }
  .fb-headline, .fb-sub, .fb-team, .fb-meta, .fb-team::after, .fb-splat { opacity:1 !important; }
  .fb-run { height:var(--rh,30vh) !important; }
}
@media (max-width:600px) { .fb-headline { letter-spacing:3px } .fb-team { letter-spacing:1px } }