@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap');

:root{--ink:#eee1c4;--gold:#c8903e;--rust:#9d3f25;--night:#120f0b;--wood:#25150f}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0;background:#090806;color:var(--ink)}
body{font-family:"Share Tech Mono",monospace;background:radial-gradient(circle at 50% 15%,#352418 0,#120f0b 45%,#070605 100%);padding:24px;display:grid;place-items:center}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
.cabinet{width:min(1100px,100%);border:4px solid #4a291b;background:linear-gradient(90deg,#1a0e0a,#321b11 5%,#1e100b 50%,#321b11 95%,#1a0e0a);box-shadow:0 20px 80px #000, inset 0 0 0 3px #120906;padding:18px 26px 14px}
.marquee{text-align:center;padding:8px 0 17px;text-shadow:3px 3px #3c180e}
.eyebrow,.subtitle{font:10px "Press Start 2P";letter-spacing:4px;margin:5px;color:#a88760}
h1{font:clamp(28px,5vw,56px) "Press Start 2P";letter-spacing:3px;margin:8px;color:#e8d7b4}h1 span{color:var(--rust)}
.screen-wrap{position:relative;border:10px solid #160e0a;outline:3px solid #6b3a21;background:#000;box-shadow:inset 0 0 30px #000,0 0 20px #000}
canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;background:#0b1110;outline:none}
#scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0,rgba(0,0,0,.20) 2px,transparent 2px,transparent 4px);mix-blend-mode:multiply}
.screen-buttons{position:absolute;right:10px;top:10px;display:flex;gap:7px;z-index:2}.screen-button{border:2px solid #9f7b47;background:#17120d;color:#e8d7b4;font:bold 18px monospace;min-width:38px;height:34px;padding:0 9px;cursor:pointer}.screen-button.help{font:8px "Press Start 2P"}.screen-button:hover,.screen-button:focus-visible{background:#3b291b;outline:2px solid #e8d7b4;outline-offset:2px}.sound[aria-pressed=false]{color:#6d6252}
dialog{max-width:min(620px,calc(100% - 32px));padding:0;border:3px solid #9f7b47;background:#120f0b;color:#eee1c4;box-shadow:0 16px 70px #000;font-family:"Share Tech Mono",monospace}dialog::backdrop{background:rgba(3,3,2,.82)}.help-panel{padding:28px 32px}.help-panel h2{margin:0 0 20px;color:#c8903e;font:18px "Press Start 2P";text-align:center}.help-panel p,.help-panel li{font-size:17px;line-height:1.45}.help-panel li{margin:10px 0}.help-panel strong{color:#c8903e}.help-panel button{display:block;margin:24px auto 0;border:2px solid #9f7b47;border-bottom-width:5px;background:#25150f;color:#eee1c4;padding:12px 18px;font:9px "Press Start 2P";cursor:pointer}.help-panel button:hover,.help-panel button:focus-visible{background:#4a291b;outline:2px solid #eee1c4;outline-offset:2px}
.controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 5% 4px;color:#bb9a6a;font:13px "Press Start 2P"}.control-copy p{margin:9px 0}kbd{border:1px solid #8a5934;border-bottom-width:3px;padding:4px;background:#170e09;color:#e6d5b3}
.dpad{display:none;grid-template:repeat(2,44px)/repeat(3,44px);gap:3px}.dpad button,.action{touch-action:none;border:2px solid #755039;border-bottom-width:5px;background:#21140e;color:#d5bb8c;font:bold 17px monospace}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.dpad button:active,.action:active{transform:translateY(3px);border-bottom-width:2px}
.actions{display:none;gap:12px}.action{width:54px;height:54px;border-radius:50%;background:#7c2b1e;color:#fff}.action.secondary{background:#3a2920}
footer{text-align:center;color:#71553c;font:8px "Press Start 2P";letter-spacing:1px;margin-top:15px;line-height:1.7}footer p{margin:5px}.build{color:#a88760;font-family:"Share Tech Mono",monospace;font-size:12px;letter-spacing:1px}
@media(max-width:760px),(pointer:coarse){body{padding:4px}.cabinet{padding:10px 8px}.marquee{padding:4px 0 10px}.eyebrow,.subtitle{font-size:7px;letter-spacing:2px}h1{font-size:25px}.controls{padding:12px 5px 2px}.control-copy{display:none}.dpad,.actions{display:grid}.actions{display:flex}footer{font-size:6px}.screen-button{width:32px;height:29px;font-size:15px}.screen-buttons{right:6px;top:6px;gap:4px}}