:root{
  --bg:#0b0221; --panel:#150a3a; --pink:#ff2e97; --cyan:#00f0ff;
  --yellow:#ffe14d; --green:#39ff88; --red:#ff3860; --text:#e9e4ff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255,46,151,.35), transparent 60%),
    linear-gradient(180deg,#0b0221 0%,#1a0638 100%);
  color:var(--text); font-family:'VT323',monospace; font-size:1.5rem;
  display:flex; justify-content:center; align-items:center; min-height:100vh; padding:16px;
}
body::before{ /* siatka retro */
  content:""; position:fixed; left:0; right:0; bottom:0; height:40vh;
  background-image:linear-gradient(var(--pink) 1px,transparent 1px),linear-gradient(90deg,var(--pink) 1px,transparent 1px);
  background-size:50px 50px; opacity:.18; transform:perspective(300px) rotateX(60deg); transform-origin:bottom; pointer-events:none;
}
.crt{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:10;width:100%;height:100%}

.cabinet{position:relative;z-index:2;width:min(640px,100%);background:var(--panel);
  border:4px solid var(--cyan);border-radius:14px;padding:28px 24px;
  box-shadow:0 0 0 4px #000,0 0 30px var(--cyan),inset 0 0 40px rgba(0,240,255,.12);text-align:center}
.logo{font-family:'Press Start 2P',monospace;font-size:clamp(1.1rem,4.5vw,1.8rem);margin:0 0 20px;
  color:var(--yellow);text-shadow:3px 3px 0 var(--pink);line-height:1.5}
.logo span{display:block;color:var(--cyan);text-shadow:3px 3px 0 var(--pink)}
h2{font-family:'Press Start 2P',monospace;font-size:1rem;color:var(--green);margin:12px 0 18px}
.screen{display:none}.screen.active{display:block;animation:pop .3s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}

.btn{font-family:'Press Start 2P',monospace;font-size:.85rem;color:#000;background:var(--yellow);
  border:none;border-radius:6px;padding:14px 18px;cursor:pointer;box-shadow:0 5px 0 #b38f00;
  transition:transform .08s,box-shadow .08s,filter .15s}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b38f00}
.btn.alt{background:var(--cyan);box-shadow:0 5px 0 #007c85}
.btn small{display:block;font-family:'VT323',monospace;font-size:1.2rem;margin-top:6px}
.levels{display:grid;gap:14px;margin-bottom:20px}
.level:nth-child(1){background:var(--green);box-shadow:0 5px 0 #138a4a}
.level:nth-child(3){background:var(--pink);box-shadow:0 5px 0 #a0125f}
.hi{color:var(--yellow)} .hi b{font-size:1.8rem}
.toggle{cursor:pointer;user-select:none} .help{opacity:.7}

.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-size:1.1rem;color:var(--cyan)}
.hud b{display:block;color:#fff;font-size:1.8rem}
#lives{color:var(--red);letter-spacing:2px}
.timer{height:12px;background:#000;border:2px solid var(--cyan);border-radius:8px;margin:14px 0;overflow:hidden}
#timer-bar{height:100%;width:100%;background:var(--green);transform-origin:left}
.question{font-family:'Press Start 2P',monospace;font-size:clamp(2rem,10vw,3.4rem);color:var(--yellow);
  text-shadow:4px 4px 0 var(--pink);margin:28px 0}
#answer-form{display:flex;gap:12px;justify-content:center}
#answer{width:150px;font-family:'Press Start 2P',monospace;font-size:1.4rem;text-align:center;padding:12px;
  background:#000;color:var(--green);border:3px solid var(--cyan);border-radius:6px;outline:none;-moz-appearance:textfield}
#answer::-webkit-outer-spin-button,#answer::-webkit-inner-spin-button{-webkit-appearance:none}
#answer:focus{box-shadow:0 0 14px var(--cyan)}
.feedback{min-height:2rem;font-size:1.7rem;margin:18px 0 0}
.feedback.ok{color:var(--green)}.feedback.bad{color:var(--red)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
.big{font-size:2rem}.big b{color:var(--yellow);font-size:2.6rem}
.record{color:var(--pink);font-size:1.7rem;min-height:1.7rem}
.mistakes{max-height:170px;overflow:auto;margin:12px 0;text-align:left;border:2px dashed var(--pink);border-radius:8px;padding:8px 14px}
.mistakes:empty{display:none}
.mistakes div{display:flex;justify-content:space-between}
.mistakes .w{color:var(--red)}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:14px}
[hidden]{display:none!important}
@media(max-width:480px){.hud{font-size:.9rem}.hud b{font-size:1.3rem}.btn{font-size:.7rem}}