/* pages.css — shared theme for the crawlable info pages (distro/desktop guides +
   indexes). Matches the GAME's palette and type: same background, panel, accent
   colours, VT323 body text and Press Start 2P headers/buttons. Deliberately NOT
   the full retro treatment — no CRT vignette/flicker; only the subtle scanline
   texture on the background so the colour reads identical to the game screens. */

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

:root {
  --bg:#0a0a12; --panel:#10101c; --ink:#d7e0e6; --dim:#8796ab; --line:#23233a;
  --cyan:#34d6e6; --mag:#e056c8; --grn:#46d36a; --ylw:#ffd23f; --red:#ff4d56;
  --acc:var(--cyan);   /* per-fighter accent overrides this inline */
  --pixel:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --mono:"VT323", ui-monospace, "Courier New", monospace;
}
* { box-sizing:border-box }
html { background:var(--bg); scroll-behavior:smooth }
body {
  margin:0; color:var(--ink);
  background:radial-gradient(120% 90% at 50% -10%, #161630 0%, var(--bg) 60%);
  background-attachment:fixed;
  font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:16.5px; line-height:1.65;
}
/* the game's subtle scanline texture — colour-matches the play screens, no CRT extras */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.12) 2px 4px);
}
a { color:var(--cyan); text-decoration:none }
a:hover { text-decoration:underline }
.wrap { position:relative; z-index:1; max-width:860px; margin:0 auto; padding:0 20px 72px }
.wrap.wide { max-width:1000px }

/* top bar */
.top { display:flex; align-items:center; justify-content:space-between; gap:12px;
       padding:16px 0; border-bottom:1px solid var(--line); }
.top .brand { font-family:var(--pixel); font-size:11px; color:var(--cyan);
              text-shadow:0 0 8px rgba(52,214,230,.45); letter-spacing:.02em }
.play { display:inline-block; font-family:var(--pixel); font-size:11px;
        color:var(--bg); background:var(--ylw); border:0; border-radius:8px;
        border-bottom:4px solid #b8930a; padding:11px 18px 9px; }
.play:hover { text-decoration:none; filter:brightness(1.07); transform:translateY(-1px) }

/* hero */
header.hero { padding:38px 0 8px }
.crumbs { font-size:13.5px; color:var(--dim); margin-bottom:16px }
.crumbs a { color:var(--dim) }
h1 { font-family:var(--pixel); font-size:26px; line-height:1.35; margin:0 0 12px;
     display:flex; align-items:center; gap:14px; color:var(--ink);
     text-shadow:0 0 12px rgba(52,214,230,.18) }
.dot { width:18px; height:18px; border-radius:50%; background:var(--acc);
       box-shadow:0 0 16px var(--acc); flex:none }
.lede { font-size:19px; color:var(--ink); margin:6px 0 18px }
.facts { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px }
.chip { font-family:var(--mono); font-size:17px; background:var(--panel); border:1px solid var(--line);
        border-radius:999px; padding:4px 13px; color:var(--dim) }
.chip b { color:var(--ink); font-weight:400 }

/* screenshot frame */
.shot { margin:24px 0; border:2px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel) }
.shot img { display:block; width:100%; height:auto }
.shot .ph { aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  color:var(--dim); font-size:14px;
  background:repeating-linear-gradient(45deg,#0d0d18,#0d0d18 12px,#10101c 12px,#10101c 24px) }

/* sections */
h2 { font-family:var(--pixel); font-size:15px; color:var(--ylw); margin:40px 0 14px;
     padding-top:16px; border-top:1px solid var(--line); line-height:1.5;
     text-shadow:0 0 10px rgba(255,210,63,.25) }
ul.ticks { list-style:none; padding:0; margin:0 }
ul.ticks li { padding:5px 0 5px 26px; position:relative }
ul.ticks li::before { content:""; position:absolute; left:2px; top:13px; width:8px; height:8px;
  background:var(--grn); box-shadow:0 0 8px rgba(70,211,106,.5) }
ul.warn li::before { background:var(--ylw); box-shadow:0 0 8px rgba(255,210,63,.5) }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:18px }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 18px }
.card h3 { margin:0 0 8px; font-family:var(--pixel); font-size:10px; letter-spacing:.05em;
           text-transform:uppercase; color:var(--mag) }
.profile { display:flex; flex-wrap:wrap; gap:8px }
.profile .p { font-family:var(--mono); font-size:18px; background:var(--panel); border:1px solid var(--line);
              border-radius:8px; padding:5px 12px; color:var(--ink) }
.moves { columns:2; gap:20px; color:var(--dim); font-family:var(--mono); font-size:18px }
.rel { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.rel a { display:block; background:var(--panel); border:1px solid var(--line);
         border-radius:10px; padding:13px 15px; color:var(--ink) }
.rel a:hover { border-color:var(--cyan); text-decoration:none;
               box-shadow:0 0 12px rgba(52,214,230,.18) }
.rel .rn { font-family:var(--pixel); font-size:11px; margin-bottom:7px; color:var(--cyan) }
.rel .rw { font-size:14px; color:var(--dim); line-height:1.4 }
.ships { display:flex; flex-wrap:wrap; gap:8px }
.ships a { font-size:14.5px; background:var(--panel); border:1px solid var(--line);
           border-radius:999px; padding:5px 14px; color:var(--ink) }
.ships a:hover { border-color:var(--cyan); text-decoration:none }

/* CTA */
.cta { margin:36px 0; background:linear-gradient(180deg,#121222,#0d0d18);
       border:2px solid var(--cyan); border-radius:12px; padding:22px;
       box-shadow:0 0 22px rgba(52,214,230,.12) }
.cta h2 { border:0; margin:0 0 10px; padding:0; color:var(--cyan);
          text-shadow:0 0 10px rgba(52,214,230,.35) }
.cta p { margin:0 0 16px }

/* prev/next + footer */
.nav { display:flex; justify-content:space-between; gap:12px; margin-top:42px;
       padding-top:18px; border-top:1px solid var(--line); font-size:14.5px }
footer { color:var(--dim); font-size:13.5px; margin-top:32px; text-align:center; line-height:2 }
footer .cr { font-family:var(--mono); font-size:16px }

/* index pages */
.pagehead h1 { display:block }
.tabs { margin:18px 0 26px }
.tabs a { font-family:var(--pixel); font-size:10px; margin-right:16px; color:var(--dim) }
.tabs a.on { color:var(--ylw); text-shadow:0 0 8px rgba(255,210,63,.35) }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px }
.cell { display:block; background:var(--panel); border:1px solid var(--line);
        border-radius:10px; padding:13px 16px; color:var(--ink) }
.cell:hover { border-color:var(--cyan); text-decoration:none; transform:translateY(-1px);
              transition:.12s; box-shadow:0 0 12px rgba(52,214,230,.15) }
.cell .n { font-family:var(--pixel); font-size:11px; display:flex; align-items:center;
           gap:9px; margin-bottom:7px; color:var(--ink) }
.cell .d { width:10px; height:10px; border-radius:50%; flex:none; box-shadow:0 0 7px currentColor }
.cell .k { font-family:var(--mono); font-size:15px; color:var(--dim);
           border:1px solid var(--line); border-radius:4px; padding:0 6px; margin-left:auto }
.cell .w { font-size:14px; color:var(--dim); line-height:1.4 }

@media (max-width:640px) {
  .cols, .rel { grid-template-columns:1fr }
  .moves { columns:1 }
  h1 { font-size:19px }
  .lede { font-size:17.5px }
}

/* fighter sprite card (player-profile section) */
.pp { display:flex; gap:22px; align-items:flex-start }
.pp .sprite { flex:none; width:132px; text-align:center }
.pp .sprite img { width:120px; height:120px; image-rendering:pixelated;
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--acc) 55%, transparent)) }
.pp .sprite .sn { font-family:var(--pixel); font-size:8px; color:var(--dim); margin-top:8px; line-height:1.6 }
@media (max-width:640px){ .pp { flex-direction:column; align-items:center } }

/* "see if you match" link under the player profile */
.match-cta { margin:14px 0 0 }
.match-cta a { font-family:var(--pixel); font-size:10px; color:var(--ylw);
  text-shadow:0 0 8px rgba(255,210,63,.3) }
/* chips as links (official site) keep chip styling, cyan payload */
a.chip:hover { border-color:var(--cyan); text-decoration:none }
a.chip b, .chip b a { color:var(--cyan) }

/* compact prev/next at the top of detail pages (between crumbs and title) */
.nav.nav-top { margin:0; padding:18px 0 0; border-top:0; font-size:13.5px; color:var(--dim) }