:root{color-scheme:dark;--ink:#c5c9af;--muted:#7f8f7b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0d1411;color:var(--ink)}
body{min-height:100vh;display:grid;place-items:center;font-family:'Courier New',monospace;background:radial-gradient(ellipse at 50% 45%,#25332a 0,#0d1411 65%)}
.shell{width:min(96vw,1500px);padding:22px 0 18px}
.masthead,.panel{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.12em;color:var(--muted)}
.masthead{padding:0 3px 15px}.masthead strong{color:#c5c9af;font-weight:400}.masthead .tag{border:1px solid #55634f;padding:5px 9px;font-size:9px}
canvas{display:block;width:100%;aspect-ratio:16/10;outline:none;background:#18251d;border:1px solid #58614e;box-shadow:0 22px 90px #0008}
.panel{padding:15px 3px 0;gap:16px}.brand{color:#c5c9af;white-space:nowrap}.status{flex:1;text-align:center;font-size:10px;letter-spacing:0}.keys{display:flex;gap:8px;font-size:9px;letter-spacing:.04em}.keys b{color:#c1c7a8;font-weight:400}
@media(min-aspect-ratio:16/10){.shell{width:min(96vw,calc((100vh - 110px)*1.6),1500px)}}
@media(max-width:700px){.shell{width:98vw;padding:12px 0}.masthead{font-size:8px}.masthead .tag{font-size:7px}.panel{flex-wrap:wrap;font-size:8px}.status{order:3;flex-basis:100%}.keys{font-size:8px}}

.keys a{color:#c5c9af;text-decoration:none;border-bottom:1px solid #65725e;padding-bottom:2px}.keys a:hover,.keys a:focus{color:#fff0bd;border-color:#fff0bd}
.sound-panel{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 3px 0;color:var(--muted);font-size:9px;letter-spacing:.08em}
.sound-panel button{font:inherit;color:#c5c9af;background:#17201a;border:1px solid #55634f;padding:5px 8px;cursor:pointer}.sound-panel button:focus-visible{outline:2px solid #e7c88b}
.sound-panel input{width:100px;accent-color:#afbc8f}.sound-panel span{font-size:8px}
@media(max-width:700px){.sound-panel{flex-wrap:wrap}.sound-panel span{display:none}}

.storage-note{font-size:11px;color:#b7baa7;line-height:1.5}.sound-panel{flex-wrap:wrap}
.game-frame{position:relative}
.score-entry[hidden]{display:none}
.score-entry{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:min(520px,92%);padding:18px 22px;background:#111e18f5;border:1px solid #7b8e70;box-shadow:0 8px 35px #0008;color:#d9ddc4;font-size:12px}
.score-entry h2{margin:0 0 10px;font-size:15px;letter-spacing:.15em}.score-entry p{margin:8px 0;line-height:1.5}.score-entry small{font-size:10px;color:#a2ad96}
.score-fields{display:flex;gap:10px;margin-top:8px}.score-fields input{min-width:0;flex:1;text-transform:uppercase}.score-fields input,.score-fields button{font:inherit;padding:10px;border:1px solid #7b8e70;background:#1b2b21;color:#e2ddc4}.score-fields button{cursor:pointer}.score-fields :focus-visible{outline:2px solid #e7c88b;outline-offset:2px}.score-fields :disabled{opacity:.65}
#score-feedback{font-size:10px;color:#b2bba3}
@media(max-width:700px){.score-entry{bottom:4%;padding:10px 12px;font-size:10px}.score-entry h2{font-size:12px}.score-fields{gap:6px}.score-fields input,.score-fields button{padding:7px}}