/* base.css — v2 shell: fonts, palette, the CRT cabinet, shared bits, boot skeleton.
   Arcade/campaign/stats specifics live in their own sheets; this is what every
   page needs to look like a Distro Fighter screen. */

@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/PressStart2P.woff2") format("woff2"),
       url("../../PressStart2P.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("../fonts/VT323.woff2") format("woff2"),
       url("../../VT323.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg:#0a0a12; --panel:#10101c; --ink:#d7e0e6;
  --cyan:#34d6e6; --mag:#e056c8; --grn:#46d36a; --blu:#5a8cff;
  --ylw:#ffd23f; --red:#ff4d56; --dim:#8796ab;
  --pixel:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --mono: "VT323", ui-monospace, "Courier New", monospace;
}

* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
html { background:#0a0a12; }
body {
  background: radial-gradient(120% 90% at 50% -10%, #161630 0%, var(--bg) 60%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--mono); font-size:17px;
  -webkit-font-smoothing:none;
  display:flex; align-items:flex-start; justify-content:center;
  min-height:100%; padding:0 18px;        /* no top/bottom pad: the cabinet's open ends meet the browser edges */
  overflow-x:hidden;
}

/* page-level CRT: scanlines + edge vignette (DOM screens keep this even when the
   WebGL pass handles the canvas stage) */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 4px);
  mix-blend-mode:multiply;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:49;
  background:radial-gradient(140% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55));
}

/* the cabinet */
#app {
  width:min(960px, 100%);
  min-height:100vh;
  background:var(--panel);
  /* open-ended cabinet: two neon rails ‖ run the full height of the page — the top
     AND bottom edges meet the browser/page ends with no closing line (owner design) */
  border:3px solid var(--cyan);
  border-top:0;
  border-bottom:0;
  border-radius:0;
  box-shadow:
    0 0 0 7px #06121a,
    0 0 0 9px #02080c,
    0 0 50px rgba(52,214,230,.4),
    inset 0 0 100px rgba(0,0,0,.72);
  padding:60px clamp(14px,4vw,34px) 80px;   /* top 34→60: more breathing room above the logo */
  position:relative;
}
#app::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  border-radius:inherit;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.12) 2px 3px);
  animation:crtflicker 4s steps(40) infinite;
}
#app::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  border-radius:inherit;
  background:
    radial-gradient(125% 125% at 50% 50%, transparent 58%, rgba(0,0,0,.55) 100%),
    linear-gradient(rgba(255,255,255,.045), transparent 26%);
}
@keyframes crtflicker { 0%,100%{opacity:.55} 47%{opacity:.5} 50%{opacity:.72} 53%{opacity:.5} }
body.fx-reduced #app::before{ animation:none }

/* CRT OFF (df/crt/crt.js sets body.crt-off): suppress the page-level scanline
   overlays — the plain pixelated presenter handles the stage */
body.crt-off::after { display:none; }

/* mobile: drop the neon cabinet frame (border + outer glow) and tighten side padding — it
   was eating the horizontal room the fighter names need (e.g. "ELEMENTARY OS" clipping). */
@media (max-width:600px) {
  #app {
    border:0; border-radius:0;
    box-shadow:inset 0 0 90px rgba(0,0,0,.7);
    padding-left:10px; padding-right:10px;
  }
}
body.crt-off #app::before { display:none; }

/* shared bits */
.pixel { font-family:var(--pixel); line-height:1.6; }
.center { text-align:center; }
.dim { color:var(--dim); }
.cyan{color:var(--cyan)} .mag{color:var(--mag)} .grn{color:var(--grn)}
.blu{color:var(--blu)} .ylw{color:var(--ylw)} .red{color:var(--red)}
.spacer { height:14px; }
.hr { border-top:1px dashed #2a3340; margin:16px 0; }

/* screen-reader-only live region (core/dom.js announce()) */
.sr-live {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* focus ring: visible, arcade-flavored, keyboard-only */
:focus-visible { outline:2px solid var(--ylw); outline-offset:2px; border-radius:3px; }

/* ── boot skeleton + failure card ─────────────────────────────────────── */
.boot-screen {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(min(900px, 100vh - 120px) - 96px); gap:22px; text-align:center;
}
.boot-logo { font-family:var(--pixel); font-size:clamp(16px,4vw,30px); line-height:1.4; }
.boot-logo .l1 { color:var(--blu); text-shadow:0 0 7px rgba(90,140,255,.95),0 0 16px rgba(90,140,255,.55); }
.boot-logo .l2 { color:var(--red); text-shadow:0 0 7px rgba(255,77,86,.95),0 0 16px rgba(255,77,86,.55); }
.boot-coin {
  font-family:var(--pixel); font-size:clamp(9px,2vw,13px); color:var(--ylw);
  animation:cointhrob 1.1s steps(2) infinite;
}
@keyframes cointhrob { 0%,100%{opacity:1} 50%{opacity:.25} }
body.fx-reduced .boot-coin{ animation:none }
.boot-fail { max-width:420px; }
.boot-fail p { color:var(--dim); margin:8px 0 18px; }
.btn {
  font-family:var(--pixel); font-size:13px; cursor:pointer;
  color:var(--ink); background:#141425; border:2px solid var(--cyan); border-radius:8px;
  padding:12px 22px; text-shadow:0 0 6px rgba(52,214,230,.5);
}
.btn:hover { background:#1a1a30; }
.test-badge {
  position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:60;
  font-family:var(--pixel); font-size:9px; color:#0a0a12; background:var(--ylw);
  padding:4px 10px; border-radius:6px;
}