/* 3D first-person game base (kit-spec-1): layout and HUD on the house tokens only. */
.top,main.wrap{max-width:1040px}
.top{padding-block:var(--s-6) var(--s-4)}
.top h1{margin-top:var(--s-2)}
.lede{color:var(--ink-2);margin:var(--s-2) 0 0}
main.wrap{padding-block:var(--s-2) var(--s-8)}
.screen{position:relative;width:100%;aspect-ratio:16/9;min-height:360px;max-height:calc(100vh - 120px);border-radius:var(--r);overflow:hidden;outline:1px solid var(--line);background:var(--sunk)}
canvas{display:block;width:100%;height:100%;touch-action:none}
.hud{position:absolute;inset:var(--s-2) var(--s-2) auto;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;pointer-events:none}
.hud div{padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);background:var(--surface);min-width:0}
.hud dt,.keys dt{font:650 var(--t-xs)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.hud dd{margin:0;font:700 var(--t-lg)/1.1 var(--serif)}
.cross{position:absolute;left:50%;top:50%;translate:-50% -50%;font:300 32px/1 var(--sans);color:var(--ink);pointer-events:none;display:none}
.playing .cross{display:block}
.hurt{outline:3px solid var(--bad)}
.panel{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--s-3);padding:var(--s-5);text-align:center;background:color-mix(in oklab,var(--surface) 90%,transparent)}
.panel h2{font-size:var(--t-2xl)}
.panel p{margin:0;color:var(--ink-2)}
.panel .note{font-size:var(--t-sm)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3)}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);min-height:44px;margin-top:var(--s-4)}
.status{margin:0;color:var(--ink-2)}
.help{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.help h2{font-size:var(--t-xl)}
.keys{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);align-items:baseline;gap:var(--s-2) var(--s-5);margin:var(--s-4) 0 0}
.keys dd{margin:0}
@media (max-width:480px){.screen{aspect-ratio:auto;height:440px}.hud dd{font-size:var(--t-md)}.keys{grid-template-columns:minmax(0,1fr)}.keys dd{margin-bottom:var(--s-2)}}

.cross{color:#fff!important;text-shadow:0 0 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.7);font-weight:700}