:root { color-scheme: dark; --ink:#f7f0d5; --red:#ff4d61; --cyan:#31d7c7; --yellow:#ffd34e; --navy:#101629; }
* { box-sizing: border-box; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; overflow-x: hidden;
  background: radial-gradient(circle at 50% 15%, #29345c 0, #11172b 44%, #090d19 100%);
  color: var(--ink); font-family: "Courier New", monospace;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); }
.cabinet { width:min(100%, 1030px); padding:18px 24px 12px; }
header { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:10px; }
.toolbar { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.eyebrow { margin:0; color:var(--cyan); font-size:clamp(.65rem, 1.5vw, .85rem); letter-spacing:.18em; }
h1 { margin:2px 0 0; color:var(--yellow); font-size:clamp(1.7rem, 5vw, 3rem); letter-spacing:.08em; text-shadow:4px 4px 0 #b52746; }
.small-button { border:2px solid #657198; background:#151d36; color:var(--ink); padding:8px 12px; font:700 .72rem "Courier New"; cursor:pointer; box-shadow:3px 3px 0 #050812; }
.screen { position:relative; width:100%; margin-inline:auto; border:8px solid #303b61; outline:3px solid #090c17; box-shadow:0 16px 45px #000a, inset 0 0 30px #000; background:#070b17; }
.hud { height:34px; display:flex; justify-content:space-around; align-items:center; background:#111930; color:#8d99be; font-size:clamp(.68rem, 2vw, .9rem); letter-spacing:.06em; }
.hud b { color:var(--ink); }
#lives { color:var(--red); }
canvas { display:block; width:100%; height:auto; image-rendering:pixelated; background:#0b1021; outline:3px solid transparent; outline-offset:-3px; }
canvas:focus-visible { outline-color:var(--cyan); }
.overlay { position:absolute; inset:34px 0 0; display:grid; place-items:safe center; overflow:auto; padding:20px; background:#050916b8; backdrop-filter:blur(2px); }
.overlay.hidden { display:none; }
.panel { width:min(100%,570px); min-width:0; padding:clamp(16px,3vw,30px); text-align:center; background:#111a31; border:4px solid var(--ink); box-shadow:8px 8px 0 #b52e48; }
.panel h2 { margin:8px 0 14px; font-size:clamp(1.35rem,4vw,2.2rem); color:var(--yellow); }
.panel p { line-height:1.45; }
.stamp { display:inline-block; margin:0; padding:4px 8px; color:var(--cyan); border:2px solid var(--cyan); transform:rotate(-2deg); font-weight:bold; font-size:.8rem; }
[hidden] { display:none !important; }
#start { margin:10px 0 8px; padding:13px 30px; border:0; background:var(--red); color:white; font:900 1rem "Courier New"; cursor:pointer; box-shadow:5px 5px 0 #74192e; }
#start:active,.small-button:active,.touch button:active { transform:translate(2px,2px); box-shadow:none; }
.keys { color:#aab4d5; font-size:.75rem; }
.touch { display:none; grid-template-columns:repeat(4,1fr) 1.5fr; gap:8px; margin-top:13px; }
.touch button { min-height:52px; border:2px solid #69749b; border-radius:4px; background:#18213e; color:white; font:bold 1.2rem monospace; touch-action:none; box-shadow:0 4px 0 #080b16; }
.touch .jump { background:#bd304a; border-color:#ff6579; font-size:.85rem; }
footer { margin-top:12px; text-align:center; color:#7782a7; font-size:.68rem; }
@media (hover:none), (max-width:760px) { body { place-items:start center; } .touch { display:grid; } .cabinet { padding:10px; } .screen { border-width:4px; } }
@media (max-width:760px) { header { flex-direction:column; align-items:center; gap:8px; } .overlay { position:fixed; inset:0; z-index:2; padding:16px; } }
@media (max-width:520px) { .hud { font-size:.6rem; letter-spacing:0; } .small-button { padding:6px; } .panel h2 { font-size:1.35rem; } }
@media (max-height:520px) { .cabinet { padding:6px 10px; } header { flex-direction:row; align-items:center; margin-bottom:6px; } .eyebrow,footer { display:none; } h1 { font-size:1.25rem; } .touch { margin-top:8px; } .touch button { min-height:40px; } .hud { font-size:.55rem; letter-spacing:0; } .overlay { position:fixed; inset:0; z-index:2; padding:12px; } .panel { padding:14px; } .panel p { margin:8px 0; } }