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

:root { color-scheme: dark; --green:#39ff74; --ink:#050607; --cream:#e8e0c5; --red:#ff3d39; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; background:var(--ink); overflow-x:hidden; }
body { color:var(--cream); font-family:'VT323', monospace; touch-action:none; user-select:none; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode:screen; }
.cabinet { width:min(100%, 880px); min-height:100vh; margin:auto; display:flex; flex-direction:column; padding:24px 24px 18px; }
.masthead { display:flex; align-items:flex-end; justify-content:space-between; border-bottom:2px solid #262a27; padding:0 2px 14px; }
.eyebrow { font-family:'Press Start 2P', monospace; font-size:9px; letter-spacing:1px; color:#737870; padding-bottom:6px; }
h1 { margin:0; font-family:'Press Start 2P', monospace; font-size:clamp(22px, 5vw, 38px); line-height:.82; text-align:right; letter-spacing:-2px; color:var(--cream); text-shadow:3px 3px 0 #3f443f; }
h1 i { color:var(--red); font-style:normal; font-size:.88em; }
.game-shell { flex:1; display:grid; place-items:center; padding:18px 0 12px; min-height:0; }
.crt { position:relative; aspect-ratio:9/10; height:min(70vh, 700px); max-width:100%; background:#000; overflow:hidden; border:3px solid #343934; box-shadow:0 0 0 8px #0c0e0d, 0 0 0 10px #262b27, inset 0 0 45px #000, 0 12px 60px #000; border-radius:18px / 10px; }
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; }
.scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0,0,0,.22) 4px); mix-blend-mode:multiply; box-shadow:inset 0 0 80px rgba(0,0,0,.85); }
.overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,5,1,.45); transition:opacity .2s; }
.overlay.hidden { opacity:0; pointer-events:none; }
.overlay-card { text-align:center; filter:drop-shadow(0 0 8px rgba(57,255,116,.5)); }
.insert { font:12px 'Press Start 2P'; color:var(--red); animation:blink 1s steps(1) infinite; }
.overlay h2 { font:clamp(26px, 5vw, 46px) 'Press Start 2P'; color:var(--green); margin:25px 0; }
.overlay button { border:2px solid var(--green); color:var(--green); background:#041108; font:14px 'Press Start 2P'; padding:16px 20px; cursor:pointer; box-shadow:0 0 18px rgba(57,255,116,.25); }
.overlay button:hover, .overlay button:focus { color:#051006; background:var(--green); outline:none; }
.hint { margin-top:24px; color:#b9c4bb; font-size:20px; letter-spacing:1px; }
.hint span { color:var(--cream); }
.touch-controls { display:none; justify-content:space-between; align-items:center; padding-top:7px; }
.move-controls { display:flex; gap:12px; }
.control-btn, .fire-btn { height:62px; border:2px solid #545a54; background:#111411; color:var(--cream); font:24px 'Press Start 2P'; border-radius:5px; box-shadow:inset 0 -5px 0 #080908; }
.control-btn { width:72px; }
.fire-btn { width:106px; color:var(--red); border-color:#8b3431; font-size:14px; }
.control-btn.pressed, .fire-btn.pressed { transform:translateY(3px); box-shadow:none; background:#242924; }
footer { display:flex; justify-content:space-between; color:#555b56; font-size:16px; letter-spacing:1px; border-top:1px solid #252825; padding-top:10px; }
@keyframes blink { 50% { opacity:0; } }

@media (pointer:coarse), (max-width:700px) {
  .cabinet { height:100dvh; min-height:560px; padding:12px 12px max(10px, env(safe-area-inset-bottom)); }
  .masthead { padding-bottom:8px; }
  .eyebrow { display:none; }
  h1 { font-size:20px; text-align:left; line-height:.9; }
  .game-shell { padding:10px 0; }
  .crt { height:auto; width:min(100%, calc((100dvh - 190px) * .9)); }
  .touch-controls { display:flex; }
  footer { display:none; }
}
@media (max-height:650px) and (pointer:coarse) {
  .masthead { display:none; }
  .crt { width:min(100%, calc((100dvh - 95px) * .9)); }
  .game-shell { padding:2px 0 7px; }
}