:root{--pg:#14131f;--bg:#ebe5e8;--l:#b7b4d8;--m:#7b78a6;--d:#3f3d5c}
*{box-sizing:border-box;image-rendering:pixelated}
body{margin:0;min-height:100vh;background:var(--pg);color:var(--bg);font-family:"Press Start 2P",monospace;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px}

/* ---------- title: occasional corrupted-signal glitch ---------- */
h1{font-size:12px;margin:2px 0;letter-spacing:1px;text-align:center;animation:titleGlitch 5s steps(1) infinite}
@keyframes titleGlitch{
  0%,86%,100%{text-shadow:none;transform:none}
  87%{text-shadow:-2px 0 var(--l),2px 0 var(--m);transform:translateX(-2px)}
  89%{text-shadow:2px 0 var(--l),-2px 0 var(--m);transform:translateX(3px) skewX(-6deg)}
  91%{text-shadow:-1px 0 var(--m);transform:translateX(-1px)}
  93%{text-shadow:none;transform:none}
}

.row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:min(92vw,520px)}

/* ---------- buttons: chunky press, stepped hover ---------- */
button,label.btn{font:inherit;font-size:7px;padding:6px 9px;background:var(--bg);color:var(--d);border:2px solid var(--d);cursor:pointer;box-shadow:2px 2px 0 var(--m);user-select:none;transition:transform .08s steps(2),box-shadow .08s steps(2),background .08s steps(2),color .08s steps(2)}
button:hover,label.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--m);background:var(--l)}
button.act,label.btn:active,button:active{background:var(--m);color:var(--bg);box-shadow:none;transform:translate(2px,2px)}
button:focus-visible,label.btn:focus-within{outline:2px dashed var(--l);outline-offset:3px}
button.act{animation:actBlink .5s steps(2) 1}
@keyframes actBlink{0%{background:var(--bg);color:var(--d)}50%{background:var(--l)}100%{background:var(--m);color:var(--bg)}}

/* ---------- memory bar: marching stripes + live edge ---------- */
#hud{width:min(92vw,520px);display:flex;gap:8px;align-items:center;font-size:8px}
#bar{flex:1;height:14px;border:3px solid var(--d);background:var(--bg);position:relative;overflow:hidden}
#fill{position:absolute;inset:0 auto 0 0;width:100%;transition:width .1s linear;
  background:repeating-linear-gradient(135deg,var(--m) 0 6px,var(--l) 6px 12px);
  background-size:17px 17px;animation:barMarch .6s linear infinite}
#fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--d);animation:edgeBlink .8s steps(2) infinite}
@keyframes barMarch{to{background-position:17px 0}}
@keyframes edgeBlink{50%{opacity:0}}
#pc{min-width:4ch;text-align:right}
#tm{animation:tick 1s steps(1) infinite}
@keyframes tick{0%{opacity:1}92%{opacity:.35}}

/* ---------- frame + stage: idle hover, CRT shimmer ---------- */
#frame{padding:14px;background:var(--bg);border-radius:12px;border:4px solid var(--d);box-shadow:0 8px 24px rgba(0,0,0,.5);animation:frameBob 4s steps(4) infinite}
@keyframes frameBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
#stage{position:relative;width:min(84vw,460px);aspect-ratio:1;border:4px solid var(--d);background:var(--bg);overflow:hidden;user-select:none;touch-action:manipulation}
#c{width:100%;height:100%;display:block;animation:crtFlicker 6s steps(1) infinite}
@keyframes crtFlicker{0%,94%,100%{opacity:1}95%{opacity:.93}96%{opacity:1}97%{opacity:.9}}
/* scanlines that drift down the stage; never block clicks */
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:20;
  background:repeating-linear-gradient(0deg,rgba(63,61,92,.07) 0 2px,transparent 2px 4px);
  animation:scan 1.2s linear infinite}
@keyframes scan{to{background-position:0 4px}}

/* ---------- 404 popup windows ---------- */
.win{position:absolute;width:min(210px,68%);background:var(--bg);border:3px solid var(--d);box-shadow:4px 4px 0 var(--m);font-size:8px;color:var(--d);z-index:5;
  animation:pop .28s steps(5) both,winShake 2.4s steps(1) .4s infinite}
@keyframes pop{0%{transform:scale(.2) rotate(-6deg);opacity:0}40%{transform:scale(1.18) rotate(2deg);opacity:1}70%{transform:scale(.94) rotate(-1deg)}100%{transform:scale(1) rotate(0)}}
@keyframes winShake{0%,90%,100%{translate:0 0}92%{translate:-2px 1px}94%{translate:2px -1px}96%{translate:-1px 0}}
.win:hover{box-shadow:6px 6px 0 var(--m)}
.tb{background:var(--m);color:var(--bg);display:flex;gap:3px;padding:3px 5px;align-items:center;border-bottom:2px solid var(--d);background-image:linear-gradient(90deg,transparent 0 40%,rgba(235,229,232,.25) 50%,transparent 60% 100%);background-size:300% 100%;animation:tbSweep 3s linear infinite}
@keyframes tbSweep{from{background-position:100% 0}to{background-position:-100% 0}}
.tb span{flex:1}
.tb i{font-style:normal;background:var(--bg);color:var(--d);border:1px solid var(--d);width:11px;height:11px;line-height:9px;text-align:center;font-size:7px;cursor:pointer;transition:background .08s steps(2),color .08s steps(2)}
.tb i:hover{background:var(--d);color:var(--bg)}
.bd{display:flex;gap:8px;align-items:center;padding:10px 8px 6px}
.ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--m);color:var(--bg);display:grid;place-items:center;font-size:12px;animation:icPulse 1s steps(2) infinite}
@keyframes icPulse{50%{transform:scale(1.15);background:var(--d)}}
.bd p{margin:0;line-height:1.5}
.win button{display:block;margin:4px auto 8px;padding:4px 16px}

/* ---------- sparkle: bob + twinkle ---------- */
#spark{position:absolute;font-size:30px;color:var(--bg);text-shadow:2px 2px 0 var(--d),-2px -2px 0 var(--d);cursor:pointer;display:none;padding:6px;z-index:10;
  animation:sparkIn .25s steps(4) both,sparkFloat 1.1s steps(4) .25s infinite,sparkTwinkle .5s steps(2) infinite}
@keyframes sparkIn{from{scale:0;rotate:-90deg}to{scale:1;rotate:0deg}}
@keyframes sparkFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes sparkTwinkle{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(15deg);color:var(--l)}100%{transform:scale(1) rotate(0)}}

/* ---------- overlay: reappears each time display flips to flex ---------- */
#ov{position:absolute;inset:0;background:rgba(235,229,232,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:18px;color:var(--d);z-index:50;animation:ovIn .35s steps(4) both}
@keyframes ovIn{from{opacity:0;clip-path:inset(48% 0 48% 0)}to{opacity:1;clip-path:inset(0)}}
#ov h2{font-size:13px;margin:0;line-height:1.5;animation:ovFlicker 3.5s steps(1) infinite}
@keyframes ovFlicker{0%,88%,100%{opacity:1;transform:none}90%{opacity:.4;transform:translateX(-2px)}92%{opacity:1;transform:translateX(2px)}94%{opacity:.6;transform:none}}
#ov p{font-size:7.5px;line-height:1.9;margin:0;max-width:340px}
#go{animation:goPulse 1s steps(2) infinite}
@keyframes goPulse{50%{box-shadow:2px 2px 0 var(--m),0 0 0 4px var(--l)}}

/* ---------- best / cleared footer ---------- */
small #best,small #cl{display:inline-block;animation:numPop .4s steps(3) 1}
@keyframes numPop{50%{transform:scale(1.4)}}

/* ---------- respect reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}