:root { --fr-canvas:#0C0C18; --fr-surface:#151526; --fr-raised:#202035; --fr-text:#F7F7FC; --fr-body:#D8D8E8; --fr-muted:#B4B4CC; --fr-rule:#3A3A52; --fr-violet:#8B7CFF; --fr-green:#52D6B0; --fr-blue:#79A8FF; --fr-amber:#FFB52E; --fr-danger:#FF7A7A; --sans:Inter,Arial,sans-serif; --mono:"IBM Plex Mono",Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; scroll-padding-top:88px; }
body { margin:0; color:var(--fr-text); background:var(--fr-canvas); font:15px/1.55 var(--sans); }
a { color:inherit; }
button { font:inherit; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:9px 12px; color:#000; background:#fff; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.topbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; padding:10px max(4vw,calc((100vw - 1320px)/2)); color:#fff; background:#151528; border-bottom:2px solid var(--fr-rule); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; color:#09111F; background:var(--fr-green); border:2px solid #fff; font:800 15px var(--mono); }
.brand span { display:grid; }
.brand small { color:#AEB4C8; font-size:10px; }
.topbar nav { display:flex; gap:20px; align-items:center; }
.topbar nav a { color:#D8D8E8; font-size:12px; text-decoration:none; }
.topbar nav a:hover { color:#fff; text-decoration:underline; text-underline-offset:5px; }
.hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr); gap:clamp(40px,8vw,120px); align-items:end; padding:clamp(60px,8vw,110px) max(5vw,calc((100vw - 1320px)/2)); background:#111123; border-bottom:2px solid var(--fr-rule); }
.eyebrow,.section-label { margin:0 0 14px; color:var(--fr-green); font:700 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; }
h1 { max-width:850px; margin:0; font-size:clamp(52px,8vw,118px); line-height:.88; letter-spacing:-.07em; }
h1 span { color:var(--fr-green); }
.lede { max-width:780px; margin:24px 0 0; color:var(--fr-body); font-size:clamp(17px,2vw,23px); }
.release-register { margin:0; border-top:2px solid var(--fr-green); }
.release-register div { display:grid; grid-template-columns:1fr auto; gap:18px; padding:12px 0; border-bottom:1px solid var(--fr-rule); }
.release-register dt { color:var(--fr-muted); }
.release-register dd { margin:0; font:700 11px var(--mono); }
.play-lab { display:grid; grid-template-columns:minmax(260px,.32fr) minmax(0,.68fr); gap:clamp(30px,5vw,72px); padding:clamp(50px,7vw,90px) max(4vw,calc((100vw - 1320px)/2)); }
.game-copy { align-self:start; position:sticky; top:104px; }
.game-copy h2,.evidence h2 { margin:0; font-size:clamp(36px,4.8vw,68px); line-height:.98; letter-spacing:-.055em; }
.game-copy>p:not(.section-label),.evidence header p:last-child { color:var(--fr-body); }
.control-ledger { margin:28px 0 0; border-top:2px solid var(--fr-text); }
.control-ledger div { display:grid; grid-template-columns:1fr auto; gap:18px; padding:11px 0; border-bottom:1px solid var(--fr-rule); }
.control-ledger dt,.control-ledger dd { margin:0; }
.control-ledger dd { color:var(--fr-muted); }
kbd { display:inline-grid; min-width:30px; min-height:30px; place-items:center; padding:0 7px; color:var(--fr-text); background:var(--fr-raised); border:2px solid var(--fr-rule); font:700 11px var(--mono); }
.boundary-note { padding:16px 0; border-bottom:2px solid var(--fr-amber); }
.game-stage { min-width:0; padding:12px; background:#101827; border-left:6px solid var(--fr-green); }
.stage-register { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; margin-bottom:8px; background:var(--fr-rule); }
.stage-register div { min-width:0; padding:8px 9px; background:#151F31; }
.stage-register span { display:block; color:#9EABC0; font:600 8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.stage-register strong { display:block; margin-top:3px; overflow-wrap:anywhere; font-size:15px; }
.canvas-shell { position:relative; max-width:800px; margin:0 auto; }
#game-canvas { display:block; width:100%; height:auto; background:#09111F; border:2px solid rgba(255,255,255,.55); }
.state-overlay { position:absolute; right:12px; bottom:12px; display:grid; max-width:min(360px,calc(100% - 24px)); padding:12px 14px; color:#09111F; background:var(--fr-green); border-left:4px solid #fff; pointer-events:none; }
.state-overlay[hidden] { display:none; }
.state-overlay strong { font-size:18px; }
.state-overlay span { font-size:12px; }
.game-controls { display:grid; grid-template-columns:minmax(150px,1fr) minmax(120px,.72fr); gap:10px 24px; align-items:center; max-width:800px; margin:8px auto 0; padding:10px 14px; background:#0C1422; border:2px solid var(--fr-rule); }
.game-controls button { min-width:44px; min-height:44px; padding:8px; color:var(--fr-text); background:#151F31; border:2px solid #53627A; cursor:pointer; touch-action:none; font:700 10px var(--mono); }
.canvas-shell,.game-controls,.stage-register { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.game-controls button:hover,.game-controls button:focus-visible { color:#09111F; background:var(--fr-green); }
.d-pad { position:relative; display:grid; grid-template:repeat(3,44px)/repeat(3,44px); justify-self:center; }
.d-pad::before,.d-pad::after { content:""; position:absolute; z-index:0; background:#151F31; border:2px solid #53627A; }
.d-pad::before { inset:0 44px; }
.d-pad::after { inset:44px 0; }
.d-pad button,.d-pad-center { position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; padding:0; }
.d-pad-up { grid-area:1/2; }
.d-pad-left { grid-area:2/1; }
.d-pad-center { grid-area:2/2; background:#202C40; }
.d-pad-center::after { content:""; width:10px; height:10px; background:#53627A; }
.d-pad-right { grid-area:2/3; }
.d-pad button span { font-size:18px; line-height:1; }
.action-pad { display:grid; place-items:center; }
.action-pad button { display:grid; width:96px; height:96px; place-content:center; color:#09111F; background:var(--fr-amber); border:4px solid #FFD98A; border-radius:50%; box-shadow:0 5px 0 #A96400; }
.action-pad strong { font:800 30px/1 var(--sans); }
.action-pad span { margin-top:4px; font:700 9px var(--mono); text-transform:uppercase; }
.system-controls { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--fr-rule); }
.system-controls button { border:0; }
.game-controls button[data-action="start"] { color:#09111F; background:var(--fr-green); }
.game-controls button:disabled { color:#727D90; background:#101827; cursor:not-allowed; }
.controller-hint { max-width:800px; margin:8px auto 0; padding:8px 10px; color:var(--fr-body); background:#151F31; border-left:4px solid var(--fr-blue); font:10px/1.45 var(--mono); }
.controller-hint[hidden],.run-receipt[hidden] { display:none!important; }
.run-receipt { max-width:800px; margin:10px auto 0; padding:12px; background:#151F31; border:2px solid var(--fr-green); }
.run-receipt header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.run-receipt header div { display:grid; }
.run-receipt header span { color:var(--fr-green); font:700 8px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.run-receipt header strong { font-size:18px; }
.run-receipt button { min-height:44px; padding:8px 12px; color:var(--fr-text); background:transparent; border:2px solid var(--fr-rule); font:700 9px var(--mono); cursor:pointer; }
.run-receipt button:hover,.run-receipt button:focus-visible { color:#09111F; background:var(--fr-green); }
.run-receipt dl { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:10px 0 0; border-top:1px solid var(--fr-rule); }
.run-receipt dl div { min-width:0; padding:8px; border-right:1px solid var(--fr-rule); }
.run-receipt dl div:last-child { border-right:0; }
.run-receipt dt { color:var(--fr-muted); font:600 8px var(--mono); text-transform:uppercase; }
.run-receipt dd { margin:4px 0 0; overflow-wrap:anywhere; font:700 10px var(--mono); }
.evidence { padding:clamp(55px,7vw,90px) max(4vw,calc((100vw - 1320px)/2)); background:#151526; border-top:2px solid var(--fr-rule); }
.evidence header { display:grid; grid-template-columns:minmax(0,.58fr) minmax(260px,.42fr); gap:50px; }
.evidence-ledger { display:grid; grid-template-columns:repeat(4,1fr); margin-top:42px; border:2px solid var(--fr-rule); }
.evidence-ledger article { min-width:0; padding:22px; border-right:1px solid var(--fr-rule); }
.evidence-ledger article:last-child { border:0; }
.evidence-ledger span { color:var(--fr-green); font:700 9px var(--mono); }
.evidence-ledger h3 { margin:18px 0 10px; font-size:19px; }
.evidence-ledger p { margin:0; color:var(--fr-muted); font-size:12px; }
footer { display:flex; justify-content:space-between; gap:20px; padding:24px max(4vw,calc((100vw - 1320px)/2)); color:var(--fr-muted); background:#090912; border-top:2px solid var(--fr-rule); font:10px var(--mono); }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
:focus-visible { outline:4px solid var(--fr-amber); outline-offset:3px; }
@media(pointer:fine) and (min-width:901px){.game-controls{display:block;padding:0;border:0}.d-pad,.action-pad,.controller-hint{display:none}.system-controls{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.topbar nav>a{display:none}.hero,.play-lab,.evidence header{grid-template-columns:1fr}.game-copy{position:static}.release-register{max-width:560px}.evidence-ledger{grid-template-columns:1fr 1fr}.evidence-ledger article:nth-child(2){border-right:0}.evidence-ledger article:nth-child(-n+2){border-bottom:1px solid var(--fr-rule)}}
@media(max-width:560px){.hero{padding-top:44px}.hero h1{font-size:clamp(48px,18vw,74px)}.play-lab,.evidence{padding-inline:14px}.game-stage{padding:8px}.stage-register{grid-template-columns:repeat(6,1fr)}.stage-register div:nth-child(-n+3){grid-column:span 2}.stage-register div:nth-child(n+4){grid-column:span 3}.game-controls{grid-template-columns:minmax(132px,1fr) minmax(108px,.72fr);padding:8px 10px}.d-pad{grid-template:repeat(3,40px)/repeat(3,40px)}.d-pad::before{inset:0 40px}.d-pad::after{inset:40px 0}.d-pad button,.d-pad-center{width:40px;height:40px}.action-pad button{width:88px;height:88px}.system-controls{grid-template-columns:repeat(3,1fr)}.controller-hint{margin-top:6px}.run-receipt header{align-items:flex-start}.run-receipt dl{grid-template-columns:1fr 1fr}.run-receipt dl div{border-bottom:1px solid var(--fr-rule)}.run-receipt dl div:nth-child(even){border-right:0}.run-receipt dl div:last-child{grid-column:1/-1;border-bottom:0}.control-ledger div{grid-template-columns:1fr}.control-ledger dd{text-align:left}.evidence-ledger{grid-template-columns:1fr}.evidence-ledger article{border-right:0;border-bottom:1px solid var(--fr-rule)}footer{display:grid}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.topbar,.game-controls{display:none}.hero{background:#fff;color:#000}.hero span,.eyebrow{color:#000}.play-lab{grid-template-columns:1fr 1fr}.game-copy{position:static}.game-stage{break-inside:avoid}}