:root{--bg-paper: #f7e9c9;--bg-paper-2: #f0dcb0;--bg-dot: rgba(120, 78, 38, .1);--frame-wood-1: #8a4a1f;--frame-wood-2: #6b3614;--frame-wood-3: #4a230b;--frame-wood-hi: #c08651;--hud-navy: #16204a;--hud-yellow: #ffd21d;--hud-cream: #fff6d8;--accent-green: #4ec24a}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}html,body{overflow:hidden;font-family:VT323,ui-monospace,monospace;color:#2a1a08;background:var(--bg-paper);image-rendering:pixelated;image-rendering:-moz-crisp-edges}body{background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.55),transparent 55%),radial-gradient(circle at 80% 82%,rgba(255,180,90,.18),transparent 60%),repeating-radial-gradient(circle at 50% 50%,var(--bg-dot) 0 1.5px,transparent 1.5px 18px),linear-gradient(180deg,var(--bg-paper) 0%,var(--bg-paper-2) 100%)}#app{position:relative;display:grid;place-items:center}.stage{position:relative;width:min(1100px,96vw);height:min(820px,96vh);display:flex;align-items:center;justify-content:center}.title-plate{position:absolute;top:12px;left:50%;transform:translate(-50%) rotate(-1.5deg);background:repeating-linear-gradient(45deg,#c63a3a 0 8px,#b22f2f 8px 16px),#c63a3a;color:#fff8d6;padding:8px 22px 10px;border:3px solid #2a0a0a;box-shadow:0 0 0 2px #ff8a8a inset,0 4px #5a1010,0 8px 18px #500a0a59;font-family:"Press Start 2P",monospace;font-size:13px;letter-spacing:3px;text-shadow:2px 2px 0 #000;z-index:2;white-space:nowrap}.title-plate .star{color:var(--hud-yellow)}.cabinet{position:relative;padding:26px;background:repeating-linear-gradient(90deg,var(--frame-wood-2) 0 6px,var(--frame-wood-1) 6px 14px,var(--frame-wood-3) 14px 18px,var(--frame-wood-1) 18px 28px),var(--frame-wood-2);border:4px solid var(--frame-wood-3);border-radius:10px;box-shadow:0 0 0 4px var(--frame-wood-hi) inset,0 0 0 8px var(--frame-wood-3) inset,0 14px #4a230b59,0 20px 50px #3c190573;width:min(900px,92vw);aspect-ratio:1 / 1;max-height:86vh}.cabinet:before,.cabinet:after,.cabinet>.stud-tr,.cabinet>.stud-br{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd98a 0 25%,var(--frame-wood-hi) 30% 60%,var(--frame-wood-3) 70%);box-shadow:0 1px #0006}.cabinet:before{top:8px;left:8px}.cabinet:after{bottom:8px;left:8px}.stud-tr{top:8px;right:8px}.stud-br{bottom:8px;right:8px}.screen{position:relative;width:100%;height:100%;background:#0a0e1f;border-radius:4px;overflow:hidden;box-shadow:0 0 0 3px #000 inset,0 0 0 6px var(--frame-wood-hi) inset}#game-canvas,#fx-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges}#game-canvas{outline:none}#fx-canvas{pointer-events:none}.hud{position:absolute;inset:0;pointer-events:none;z-index:3}.hud>*{pointer-events:auto}.player-select{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px}.player-label{font-family:"Press Start 2P",monospace;font-size:11px;letter-spacing:1px;color:var(--hud-yellow);text-shadow:2px 2px 0 #000;padding:8px 12px 7px;background:var(--hud-navy);border:3px solid #000;box-shadow:0 0 0 2px #5c6bb3 inset,0 4px #00000080;align-self:flex-start}.character-row{display:flex;gap:10px}.char-btn{position:relative;width:76px;height:76px;padding:0;border:4px solid #000;background:var(--hud-navy);box-shadow:0 0 0 2px #5c6bb3 inset,0 4px #00000080;cursor:pointer;image-rendering:pixelated;transition:transform .08s steps(2,end);overflow:hidden}.char-btn:hover{transform:translateY(-2px)}.char-btn:active{transform:translateY(2px);box-shadow:0 0 0 2px #5c6bb3 inset,0 0 #00000080}.char-btn .portrait{position:absolute;inset:0;background-color:#f7e9c9;background-repeat:no-repeat;image-rendering:pixelated}.char-btn.selected{border-color:var(--hud-yellow);box-shadow:0 0 0 2px var(--hud-yellow) inset,0 0 0 6px #000 inset,0 0 0 8px var(--hud-yellow) inset,0 4px #00000080}.char-btn .name{position:absolute;bottom:0;left:0;right:0;background:#000000c7;color:var(--hud-cream);font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:1px;text-align:center;padding:3px 0 4px}.char-btn.selected .name{background:var(--hud-yellow);color:#000}.timer-panel{position:absolute;top:18px;right:18px;background:var(--hud-navy);border:4px solid #000;box-shadow:0 0 0 2px #5c6bb3 inset,0 4px #00000080;padding:6px 14px 8px;text-align:center;min-width:168px}.timer-panel .lbl{font-family:"Press Start 2P",monospace;font-size:10px;color:#c8e94f;letter-spacing:2px;text-shadow:1px 1px 0 #000}.timer-panel .digits{margin-top:4px;background:#07101f;border:2px solid #000;padding:4px 0 5px;font-family:"Press Start 2P",monospace;font-size:26px;color:var(--hud-yellow);text-shadow:2px 2px 0 #000,0 0 8px rgba(255,210,29,.35);letter-spacing:4px}.timer-panel.running .digits{color:#fff5b3}.timer-panel.stopped .digits{color:#4ec24a}.hint-bar{position:absolute;left:50%;bottom:14px;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#16204aeb;color:var(--hud-cream);border:3px solid #000;box-shadow:0 0 0 2px #5c6bb3 inset;padding:6px 12px;font-family:"Press Start 2P",monospace;font-size:9px;letter-spacing:1px;white-space:nowrap}.hint-bar kbd{display:inline-block;background:#0a1228;border:2px solid #000;box-shadow:0 0 0 1px #5c6bb3 inset;color:var(--hud-yellow);padding:3px 6px;font-family:"Press Start 2P",monospace;font-size:8px;min-width:18px;text-align:center}.win-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#00000073;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:5}.win-overlay[hidden]{display:none}.win-banner{text-align:center;padding:22px 36px 26px;background:var(--hud-navy);border:5px solid #000;box-shadow:0 0 0 3px var(--hud-yellow) inset,0 0 0 8px #000 inset,0 0 0 11px #5c6bb3 inset,0 8px #00000080;animation:pop .45s cubic-bezier(.2,1.4,.5,1) both}@keyframes pop{0%{transform:scale(.4) rotate(-6deg);opacity:0}70%{transform:scale(1.08) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}.win-banner .title{font-family:"Press Start 2P",monospace;font-size:38px;color:var(--hud-yellow);letter-spacing:3px;text-shadow:3px 0 0 #000,-3px 0 0 #000,0 3px 0 #000,0 -3px 0 #000,4px 4px 0 #b16a00;margin-bottom:6px}.win-banner .subtitle{font-family:"Press Start 2P",monospace;font-size:11px;color:var(--hud-cream);letter-spacing:2px;text-shadow:2px 2px 0 #000}.win-banner .time-line{margin-top:12px;font-family:"Press Start 2P",monospace;font-size:13px;color:#c8e94f;letter-spacing:2px;text-shadow:2px 2px 0 #000}.win-banner .time-line span{color:var(--hud-yellow)}.play-again{cursor:pointer;pointer-events:auto;background:var(--accent-green);color:#fff;border:4px solid #000;box-shadow:0 0 0 2px #b6f29c inset,0 6px #1f5a1d,0 8px #00000073;padding:12px 22px 14px;font-family:"Press Start 2P",monospace;font-size:14px;letter-spacing:2px;text-shadow:2px 2px 0 rgba(0,0,0,.55);transition:transform .06s steps(2,end),box-shadow .06s steps(2,end)}.play-again:hover{filter:brightness(1.06)}.play-again:active{transform:translateY(4px);box-shadow:0 0 0 2px #b6f29c inset,0 2px #1f5a1d,0 3px #00000073}.key-hint{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--hud-cream);text-shadow:2px 2px 0 #000;letter-spacing:1px;margin-top:-4px}@media(max-height:720px){.title-plate{font-size:11px;padding:6px 16px 8px}.timer-panel .digits{font-size:22px}.char-btn{width:64px;height:64px}}@media(max-width:700px){.player-label{font-size:9px;padding:6px 10px}.char-btn{width:56px;height:56px}.timer-panel{min-width:140px;padding:5px 10px 6px}.timer-panel .digits{font-size:20px}.title-plate{font-size:10px}}