@import url("/fonts/fonts.css");

/* ===== Tokens (contrast ratios measured against --bg) ===== */
:root{
  --bg:#07101f; --bg2:#0c1b38; --panel:#0f1d36; --panel2:#10314a;
  --txt:#f5f8fc;   /* 17.9:1 */
  --mut:#c3d0e2;   /* 12.2:1 */
  --cy:#5cf2e0;    /* 13.8:1 */
  --or:#ff9f40;    /* 9.3:1, dark text on it 9.6:1 */
  --focus:#ffd27a;
  --line:#2a4468; --frame:rgba(92,242,224,.6);
  --sel:#0d5c56;
  --radius:10px;
  --maxw:1180px;
  --display:"Tektur",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,monospace;
  color-scheme:dark;
}
html[data-contrast="high"]{
  --bg:#000; --bg2:#000; --panel:#000; --panel2:#000;
  --txt:#fff; --mut:#fff; --cy:#7ffff0; --or:#ffb366;
  --line:#fff; --frame:#fff; --sel:#003d38;
}
@media (prefers-contrast:more){
  html:not([data-contrast="normal"]){--bg:#000;--bg2:#000;--panel:#000;--panel2:#000;--txt:#fff;--mut:#fff;--line:#fff;--frame:#fff}
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:linear-gradient(120deg,var(--bg),var(--bg2)) fixed;color:var(--txt);font:400 1.125rem/1.6 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:var(--txt)}
p a,.ul{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--cy)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-weight:600;letter-spacing:.02em}
.skip{position:absolute;left:16px;top:10px;z-index:50;background:var(--focus);color:#07101f;padding:10px 16px;font-weight:700;border-radius:8px;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ===== Header ===== */
.site-head{border-bottom:2px solid var(--line);background:rgba(7,16,31,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
html[data-contrast="high"] .site-head{background:#000}
.head-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;padding-bottom:10px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brand img{height:32px;width:auto}
.wordmark{font:800 1.4rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tools{display:flex;gap:8px}
.tool{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:8px;background:var(--panel);color:var(--txt);font:600 .9rem var(--mono);border:1px solid var(--line);text-decoration:none;cursor:pointer}
.tool[aria-pressed="true"]{background:var(--sel);border-color:var(--cy)}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:0}
.tab{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;text-decoration:none;font-weight:700;color:var(--mut);border-radius:10px 10px 0 0;white-space:nowrap}
.tab b{font:600 .85rem var(--mono);color:var(--cy)}
.tab:hover{color:var(--txt);background:rgba(92,242,224,.06)}
.tab[aria-current="page"]{background:#123158;color:var(--txt);box-shadow:inset 0 3px 0 var(--cy)}
html[data-contrast="high"] .tab[aria-current="page"]{background:#000;outline:2px solid #fff}

/* ===== HUD frame ===== */
.hud{position:relative;border:2px solid var(--frame);background:rgba(10,24,44,.85);padding:clamp(20px,3vw,34px)}
html[data-contrast="high"] .hud{background:#000}
.hud::before,.hud::after{content:"";position:absolute;width:42px;height:42px;border:5px solid var(--cy);pointer-events:none}
.hud::before{top:-5px;left:-5px;border-right:0;border-bottom:0}
.hud::after{bottom:-5px;right:-5px;border-left:0;border-top:0}
.ptitle{color:var(--cy);font-size:1rem;margin:0 0 14px}

/* ===== Type ===== */
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,4.6vw,3.3rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
h3{font-size:1.4rem;line-height:1.2}
.hl{color:var(--or)}
.lead{color:var(--mut);font-size:1.2rem;max-width:62ch}
.kick{color:var(--cy);font-size:1rem;margin:0 0 10px}
section{padding:56px 0}
.sec-title{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.sec-title .mono{color:var(--cy);font-size:1rem}

/* ===== Console hero ===== */
.console{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center}
.opts{display:grid;gap:10px;margin-top:24px;max-width:460px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:0 20px;border-radius:var(--radius);font:700 1.2rem var(--body);text-decoration:none;background:var(--panel2);color:var(--txt);border:1px solid transparent}
.opt small{font:600 .85rem var(--mono);color:var(--mut);text-align:right}
.opt:hover{border-color:var(--cy)}
.opt.primary{background:var(--sel);box-shadow:inset 4px 0 0 var(--cy)}
.opt.wish{background:var(--or);color:#140a00}
.opt.wish small{color:#3a1d00}
html[data-contrast="high"] .opt{border:2px solid #fff}
html[data-contrast="high"] .opt.wish{background:#ffb366}
.alt-link{margin:12px 0 0;font-size:1rem;color:var(--mut)}
.keys{margin-top:12px;color:var(--mut);font-size:.95rem}
figure{margin:0}
figcaption{margin-top:10px;color:var(--mut);font-size:1rem}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--radius);font:700 1.1rem var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.p{background:var(--or);color:#140a00}
.btn.s{background:transparent;color:var(--txt);border-color:var(--cy)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ===== Cards & grids ===== */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
.card .mono{color:var(--cy);font-size:.95rem}
.card p{margin:.3em 0 0;color:var(--mut)}
a.card{text-decoration:none;display:block}
a.card:hover{border-color:var(--cy)}
.game{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.game .capsule{border-radius:8px;border:1px solid var(--line)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.tags li{font:600 .85rem var(--mono);padding:6px 10px;border-radius:6px;background:#123158;color:var(--txt)}
html[data-contrast="high"] .tags li{background:#000;border:1px solid #fff}
.status{display:inline-flex;align-items:center;gap:8px;font:600 .95rem var(--mono);color:var(--cy)}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:#3fe07a;box-shadow:0 0 8px #3fe07a}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.facts div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.facts dt{font:600 .85rem var(--mono);color:var(--mut);text-transform:uppercase}
.facts dd{margin:4px 0 0;font:800 1.35rem var(--display)}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0;list-style:none}
.features li{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--cy);border-radius:8px;padding:14px 16px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gallery a{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.gallery a:hover{border-color:var(--cy)}
.dl{display:flex;flex-direction:column;gap:6px}
.dl a{font-weight:700}

/* ===== Trailer facade ===== */
.video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000}
.video button{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
.video button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.video button span{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--or);color:#140a00;font:700 1.15rem var(--body);padding:14px 22px;border-radius:10px}
.video button:focus-visible span{outline:3px solid var(--focus);outline-offset:4px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.note{font-size:.95rem;color:var(--mut);margin-top:8px}

/* ===== Copy box ===== */
.copybox{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.copybox code{font:600 1.05rem var(--mono);background:var(--panel);border:1px solid var(--line);padding:10px 14px;border-radius:8px}
.copied{color:var(--cy);font-weight:700}

/* ===== Footer ===== */
.site-foot{border-top:2px solid var(--line);padding:28px 0;margin-top:40px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.soc{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.soc a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;text-decoration:none;font-weight:700;border:1px solid var(--line)}
.soc a:hover{border-color:var(--cy)}
.foot-links{color:var(--mut);font-size:1rem}
.foot-links a{color:var(--mut)}

.prose{max-width:70ch}
.prose h2{margin-top:1.4em}
.prose h2:first-child,.prose h1:first-child{margin-top:0}

/* ===== Responsive ===== */
@media (max-width:900px){
  .console,.grid2,.game{grid-template-columns:1fr}
  .grid3,.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features{grid-template-columns:1fr}
  .game .capsule{max-width:260px}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .wordmark{font-size:1.1rem}
  .brand img{height:26px}
  .grid3,.gallery{grid-template-columns:1fr}
  .tool{padding:0 10px}
  .tabs{flex-wrap:wrap;overflow:visible;gap:4px;padding-bottom:6px}
  .tab{min-height:44px;padding:0 12px;border-radius:8px}
  .tab[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--cy)}
  .opt{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:10px 16px}
  .opt small{text-align:left;font-size:.8rem}
  .tool .tlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tool{min-width:44px;justify-content:center}
  section{padding:40px 0}
}

/* ===== Fact table ===== */
.ftable{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ftable th,.ftable td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--line)}
.ftable tr:last-child th,.ftable tr:last-child td{border-bottom:0}
.ftable th{font:600 .9rem var(--mono);color:var(--cy);width:38%}