:root, :root[data-theme="dark"], :root[data-theme="light"]{
  --ground:#0B1016; --panel:#12202A; --panel-2:#162A36;
  --ink:#E4EDF1; --muted:#8AA0AC; --line:#22333F;
  --accent:#DE7008; --accent-hi:#FF8F2E; --galaxite:#A855C7;
  --archive:#E9E4DA; --archive-ink:#2A2620;
}
@font-face{font-family:'Quadrangle';src:url(fonts/quadrangle.woff2) format('woff2');font-display:swap}
@font-face{font-family:'WI Euro';src:url(fonts/wi-eurostile.woff2) format('woff2');font-display:swap}

/* Reset. These files are served standalone, so nothing supplies a base reset for
   them — without this, body keeps the browser default 8px margin and shows as a white
   border around the whole page, and html has no background so overscroll flashes white. */
html,body{margin:0;padding:0}
html{background:var(--ground);color-scheme:dark}
body{background:var(--ground)}
*{box-sizing:border-box}
.wi{background:var(--ground);color:var(--ink);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  margin:0 auto;overflow-x:hidden}
.wi img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,92vw);margin-inline:auto}
.eyebrow{font-family:'WI Euro',ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.22em;font-size:11px;color:var(--muted)}
h2.t{font-family:'Quadrangle',ui-sans-serif,system-ui,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,4.2vw,42px);line-height:1.05;margin:.2em 0 .35em;text-wrap:balance;letter-spacing:.01em}
.lede{color:#B9CCD6;font-size:clamp(15px,1.6vw,18px);max-width:62ch}

/* ── hero ── full-bleed key art; the wordmark is the game's own type, so the
   page opens in the subject's actual voice rather than a chosen substitute. */

/* ── footer ── */
.foot{border-top:1px solid var(--line);background:var(--panel)}
.foot .wrap{padding:34px 0;display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{color:#9FB6C2;text-decoration:none;font-size:14px}
.foot a:hover,.foot a:focus-visible{color:var(--accent-hi);text-decoration:underline}
.foot small{color:#8BA2AF;font-size:12.5px}
a:focus-visible,.play:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* the primary action, used by BOTH the index hero and the subpage masthead */
.play{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-family:'WI Euro',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:15px;
  padding:16px 30px;border-radius:2px;box-shadow:0 6px 26px rgba(222,112,8,.32);
  transition:background .16s ease,transform .16s ease}
.play:hover,.play:focus-visible{background:var(--accent-hi);transform:translateY(-1px)}

/* ── shared page shell (subpages) ─────────────────────────────────────────────
   index.html has its own full-bleed hero; every other page uses this compact
   masthead instead so the wordmark still opens the page without a 700px image. */
.top{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0d1a26,var(--panel))}
.top .wrap{padding:20px 0;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.top .lock{display:inline-block;line-height:1;text-decoration:none;font-size:26px}
.top .lock .w{display:block;font-family:'Quadrangle',sans-serif;letter-spacing:-.025em;color:#8FA6E8;
  -webkit-text-stroke:.02em rgba(4,14,34,.9);paint-order:stroke fill}
.top .lock .i{display:block;width:100%;font-family:'WI Euro',sans-serif;color:#C3D4DE;font-size:.278em;
  text-align:justify;text-align-last:justify;margin-top:.28em}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{color:#9FB6C2;text-decoration:none;font-size:14px}
.top nav a:hover,.top nav a:focus-visible{color:var(--accent-hi)}
.top .play{font-size:13px;padding:11px 20px}

/* ── prose ── */
.page{padding:clamp(34px,6vw,64px) 0 clamp(40px,6vw,72px)}
.page h1{font-family:'Quadrangle',ui-sans-serif,system-ui,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,4.6vw,44px);line-height:1.06;margin:.1em 0 .5em;text-wrap:balance}
.page h2{font-family:'WI Euro',ui-sans-serif,system-ui,sans-serif;font-size:21px;color:#fff;
  margin:2.4em 0 .7em;padding-top:1.1em;border-top:1px solid var(--line);letter-spacing:.01em}
.page h2:first-of-type{margin-top:1.8em}
.page p,.page li{color:#B9CCD6;max-width:68ch}
.page a{color:var(--accent-hi)}
.page ul{padding-left:20px}
.page .note{color:var(--muted);font-size:14px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:22px 0;
  padding:0;list-style:none}
.grid img{width:100%;border:1px solid var(--line);border-radius:2px;background:#000}
.grid figure{margin:0}
.grid figcaption{color:var(--muted);font-size:12px;margin-top:6px}
.callout{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);
  padding:18px 20px;border-radius:2px;margin:24px 0;max-width:68ch}
.callout p{margin:0}
.callout p+p{margin-top:.7em}

/* ── awards & testimonials ────────────────────────────────────────────────────
   The legacy markup here was layout tables with align/bgcolor attributes and two
   star-rating images differing only in the background baked into them (white for
   normal rows, pale blue for the alternating ones). It is now a plain list, and the
   ratings are text — scalable, themable, announced properly, and two fewer requests. */
.awards-list{list-style:none;padding:0;margin:20px 0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.awards-list li{display:flex;gap:16px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;padding:14px 16px}
.awards-list img{width:64px;height:auto;flex:0 0 auto;background:#EAEEF6;padding:4px;border-radius:3px}
.awards-list span{color:#C6D7E1}

.quotes{list-style:none;padding:0;margin:20px 0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.quotes li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:3px;padding:18px 20px}
.quotes blockquote{margin:0;color:#C6D7E1}
.quotes blockquote::before{content:'\201C'} .quotes blockquote::after{content:'\201D'}
.quotes .who{margin:.8em 0 0;color:#fff;font-size:14px;display:flex;gap:9px;align-items:baseline}
.quotes .stars{color:var(--accent-hi);letter-spacing:.09em;font-size:13px}

/* ── era screenshots ──────────────────────────────────────────────────────────
   Original-device captures, shown pixel-exact and scaled by whole numbers so they
   stay crisp: these are 160x160 and 240x320 images and interpolating them would
   destroy the very thing worth looking at. */
.page h3{font-family:'WI Euro',ui-sans-serif,system-ui,sans-serif;font-size:15px;color:#fff;
  margin:1.9em 0 .2em;letter-spacing:.02em}
.page h3+.note{margin-top:0}
.era-grid{list-style:none;padding:0;margin:14px 0 6px;display:flex;flex-wrap:wrap;gap:14px}
.era-grid img{display:block;image-rendering:pixelated;border:1px solid var(--line);background:#000}
.era-grid.s2 img{width:320px}
.era-grid.s1 img{width:320px}
@media (max-width:680px){.era-grid img,.era-grid.s2 img,.era-grid.s1 img{width:min(100%,300px)}}

/* ── lightbox ── */
.grid img,.era-grid img{cursor:zoom-in}
.grid img:focus-visible,.era-grid img:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.lb{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:5vmin;
  background:rgba(4,9,14,.92);backdrop-filter:blur(3px)}
.lb[hidden]{display:none}
.lb figure{margin:0;display:grid;justify-items:center;gap:12px;max-width:100%;max-height:100%}
.lb img{max-width:92vw;max-height:84vh;border:1px solid var(--line);background:#000}
.lb figcaption{font:12px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.lb-x{position:absolute;top:14px;right:16px;width:40px;height:40px;font-size:24px;line-height:1;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:3px;cursor:pointer}
.lb-x:hover,.lb-x:focus-visible{color:var(--accent-hi);border-color:var(--accent)}