:root{
  --volt:#3DF5FF;
  --volt2:#1B3894;   /* deep navy: shared shadow/structure tone */
  --frame:#6E9BFF;   /* panel border used across all screens */
  --danger:#FF3D5A;
  --gold:#FFD028;
  --ink:#0B0E1A;
  --paper:#F4F8FF;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:'Nunito',sans-serif}
#stage{position:fixed;inset:0}
video{display:none}
.px{font-family:'Press Start 2P',monospace}

/* ---------- start screen ---------- */
#overlay{
  position:fixed;inset:0;z-index:30;
  background:
    radial-gradient(circle at 50% 30%, #1B2340 0%, var(--ink) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--paper);
  overflow-y:auto;justify-content:safe center;   /* scrolls instead of clipping on short screens */
}
#overlay h1{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(22px,5.5vw,46px);
  color:var(--volt);
  text-shadow:0 0 18px rgba(61,245,255,.8), 4px 4px 0 #0A1740;
  line-height:1.4;margin-bottom:14px;
}
#overlay .sub{font-weight:700;max-width:480px;font-size:clamp(14px,2.4vw,17px);
  color:#C6D2F0;margin-bottom:30px;line-height:1.5}
#startBtn{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(14px,2.6vw,20px);
  color:var(--ink);
  background:linear-gradient(180deg,#FFD65C,#F2A50E);
  border:3px solid #FFE9A8;border-radius:10px;
  padding:18px 36px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  line-height:1;
  box-shadow:0 0 24px rgba(255,180,40,.55), 0 6px 0 #8A5A00;
  transition:transform .08s, box-shadow .08s;
}
#startBtn .arrow{font-family:'Nunito',sans-serif;font-size:1.15em;
  line-height:1;display:block;transform:translateY(-1px)}
#startBtn:active{transform:translateY(5px);box-shadow:0 0 24px rgba(255,180,40,.55),0 1px 0 #8A5A00}
#startBtn:focus-visible{outline:3px dashed var(--gold);outline-offset:5px}
#credit{margin-top:22px;font-family:'Press Start 2P',monospace;
  font-size:clamp(9px,1.6vw,12px);color:#5D6A8C;letter-spacing:1px;line-height:2.1}
#credit b{color:var(--volt);font-weight:400}
#credit .build{font-size:clamp(7px,1.2vw,9px);color:#414C6B;letter-spacing:0.5px}

/* mode select */
#modes{display:flex;gap:clamp(10px,2.4vw,20px);margin-bottom:28px;
  flex-wrap:wrap;justify-content:center}
.mode{
  background:rgba(20,28,54,.85);
  border:3px solid #33406B;border-radius:16px;
  padding:clamp(18px,3vh,26px) clamp(20px,3.4vw,36px);
  cursor:pointer;text-align:center;
  width:clamp(220px,34vw,320px);
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.mode:hover{border-color:#5A6DA8;transform:translateY(-2px)}
.mode.sel{border-color:var(--volt);
  box-shadow:0 0 28px rgba(61,245,255,.35), inset 0 0 26px rgba(61,245,255,.08)}
.mode .mIcon{font-size:clamp(30px,4vw,40px);line-height:1}
.mode .mName{font-family:'Press Start 2P',monospace;
  font-size:clamp(13px,2.4vw,18px);color:var(--paper);margin-top:12px}
.mode.sel .mName{color:var(--volt)}
.mode .mDesc{font-size:clamp(15px,2vw,18px);font-weight:700;color:#AAB6D8;
  margin:10px auto 0;line-height:1.55;max-width:250px}
.mode .mBest{font-family:'Press Start 2P',monospace;
  font-size:clamp(10px,1.4vw,13px);
  color:var(--gold);margin-top:12px;min-height:1em;letter-spacing:.5px}
#err{margin-top:16px;display:none;background:#2A1020;border:2px solid var(--danger);
  color:#FFB3C0;border-radius:10px;padding:10px 16px;font-weight:700;max-width:420px}
#zapIcon{font-size:clamp(40px,8vw,72px);margin-bottom:10px;filter:drop-shadow(0 0 14px var(--volt))}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;display:none;pointer-events:none}
#topBar{position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:center;padding:16px 12px}
.hudCard{
  background:rgba(11,14,26,.86);
  border:3px solid var(--frame);
  border-radius:18px;
  padding:16px clamp(20px,4vw,44px);
  backdrop-filter:blur(4px);
  box-shadow:0 0 26px rgba(80,140,255,.35), inset 0 0 22px rgba(80,140,255,.10);
  display:flex;align-items:center;gap:clamp(18px,4vw,44px);
  max-width:min(94vw,860px);
}
.stat{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.lbl{font-size:clamp(9px,1.5vw,13px);color:#7FE9F2;letter-spacing:2px}
#scoreVal{font-size:clamp(18px,3.6vw,34px);color:var(--gold);
  text-shadow:0 0 16px rgba(255,208,40,.85), 2px 2px 0 #8A3B00;
  line-height:1;white-space:nowrap}
#levelVal{font-size:clamp(18px,3.6vw,34px);color:var(--gold);
  text-shadow:0 0 16px rgba(255,208,40,.9), 2px 2px 0 #8A3B00;
  line-height:1;white-space:nowrap}
#timeVal{font-size:clamp(18px,3.6vw,34px);color:var(--gold);
  text-shadow:0 0 16px rgba(255,208,40,.85), 2px 2px 0 #8A3B00;
  line-height:1;white-space:nowrap}
/* final countdown: strobe like a warning light */
#timeVal.urgent{
  color:var(--danger);
  text-shadow:0 0 22px rgba(255,61,90,1), 2px 2px 0 #5A0010;
  animation:tick 1s steps(1,end) infinite;
}
@keyframes tick{
  0%,44%  {opacity:1;   filter:brightness(1.7)}
  45%,100%{opacity:.18; filter:brightness(1)}
}
@media (prefers-reduced-motion: reduce){
  #timeVal.urgent{animation:none;opacity:1}
}
.divider{width:3px;align-self:stretch;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--frame),transparent)}
#killPips{display:flex;gap:clamp(4px,1vw,8px)}
.pip{width:clamp(14px,2.6vw,26px);height:clamp(14px,2.6vw,26px);
  border-radius:5px;border:3px solid rgba(61,245,255,.55);
  background:transparent;transition:background .15s, box-shadow .15s, transform .15s}
.pip.on{background:var(--volt);box-shadow:0 0 14px var(--volt);transform:scale(1.08)}
#handHint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Press Start 2P',monospace;font-size:clamp(11px,2.4vw,16px);
  color:var(--paper);background:rgba(11,14,26,.75);
  border:2px solid var(--volt);border-radius:12px;
  padding:16px 22px;text-align:center;line-height:1.8;display:none;
  text-shadow:0 0 8px rgba(61,245,255,.7);
}

/* ---------- level up announcement ---------- */
#levelUp{
  position:fixed;inset:0;z-index:20;display:none;
  align-items:center;justify-content:center;flex-direction:column;
  pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #1B2340 0%, var(--ink) 70%);
}
#levelUp.show{display:flex;animation:lvIn .35s ease-out both}
@keyframes lvIn{from{opacity:0}to{opacity:1}}

/* dotted arcade backdrop */
#lvDots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(61,245,255,.16) 1.5px, transparent 1.6px);
  background-size:16px 16px;}
#rays{position:absolute;width:200vmax;height:200vmax;
  background:repeating-conic-gradient(from 0deg,
    rgba(61,245,255,.06) 0deg 10deg, transparent 10deg 20deg);
  animation:spin 9s linear infinite;border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
#lvConfetti{position:absolute;inset:0;pointer-events:none}

#lvPanel{position:relative;display:flex;flex-direction:column;
  align-items:center;pointer-events:auto;padding:20px}

#lvCongrats{font-family:'Press Start 2P',monospace;
  font-size:clamp(13px,2.6vw,22px);color:var(--gold);
  letter-spacing:2px;margin-bottom:clamp(14px,3vh,26px);
  text-shadow:0 0 16px rgba(255,168,40,.8);
  animation:punch .5s cubic-bezier(.2,2.2,.4,1) both}

/* star row with the rising arrow in the middle */
#lvStars{display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,1.6vw,16px);margin-bottom:clamp(10px,2vh,18px)}
.lvStar{width:clamp(28px,5.5vw,54px);height:clamp(28px,5.5vw,54px);
  animation:pop .45s cubic-bezier(.2,2.4,.4,1) both}
.lvStar:nth-child(1){animation-delay:.10s}
.lvStar:nth-child(2){animation-delay:.18s}
.lvStar:nth-child(3){animation-delay:.26s}
.lvStar:nth-child(4){animation-delay:.34s}
.lvStar:nth-child(5){animation-delay:.42s}
#lvArrow{width:clamp(34px,7vw,70px);height:clamp(46px,9vw,90px);
  animation:riseUp 1.1s ease-in-out infinite}
@keyframes riseUp{0%,100%{transform:translateY(4px)}50%{transform:translateY(-8px)}}
@keyframes pop{0%{transform:scale(0) rotate(-30deg);opacity:0}
  70%{transform:scale(1.3) rotate(6deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}}

/* the LEVEL UP plaque */
#lvPlaque{position:relative;
  background:rgba(20,28,54,.85);
  border:3px solid var(--volt);border-radius:16px;
  box-shadow:0 0 28px rgba(61,245,255,.35), inset 0 0 26px rgba(61,245,255,.08);
  padding:clamp(12px,2.4vh,20px) clamp(20px,5vw,52px);
  animation:punch .5s .2s cubic-bezier(.2,2.2,.4,1) both}
#lvPlaque .txt{font-family:'Press Start 2P',monospace;
  font-size:clamp(20px,5.6vw,50px);color:var(--gold);
  text-shadow:3px 3px 0 #8A3B00, 0 0 22px rgba(255,168,40,.85);
  letter-spacing:2px;white-space:nowrap}
#lvNum{font-family:'Press Start 2P',monospace;
  margin-top:clamp(12px,2.4vh,20px);
  font-size:clamp(14px,3vw,26px);color:var(--paper);
  text-shadow:0 0 16px rgba(61,245,255,.8);
  animation:punch .5s .3s cubic-bezier(.2,2.2,.4,1) both}
#lvBonus{font-family:'Press Start 2P',monospace;
  margin-top:clamp(8px,1.6vh,14px);
  font-size:clamp(8px,1.6vw,13px);color:#7FE9F2;line-height:1.9;
  text-align:center;animation:punch .5s .38s cubic-bezier(.2,2.2,.4,1) both}

/* BACK / NEXT */
#lvBtns{display:flex;gap:clamp(12px,3vw,28px);
  margin-top:clamp(18px,3.4vh,32px);
  animation:punch .5s .46s cubic-bezier(.2,2.2,.4,1) both}
.lvBtn{font-family:'Press Start 2P',monospace;
  font-size:clamp(11px,2.2vw,18px);
  padding:clamp(11px,2vh,16px) clamp(20px,4.5vw,40px);
  background:rgba(20,28,54,.85);
  color:var(--volt);border:3px solid #33406B;border-radius:10px;
  cursor:pointer;letter-spacing:1px;
  box-shadow:0 5px 0 #0A1028;
  transition:transform .07s, box-shadow .07s, border-color .15s}
.lvBtn:hover{border-color:var(--volt);box-shadow:0 5px 0 #0A1028,0 0 20px rgba(61,245,255,.3)}
.lvBtn:active{transform:translateY(5px);box-shadow:0 0 0 #0A1028}
.lvBtn:focus-visible{outline:3px dashed var(--volt);outline-offset:4px}
#lvNext,.lvBtn.primary{color:#0B0E1A;
  background:linear-gradient(180deg,#FFD65C,#F2A50E);
  border-color:#FFE9A8;box-shadow:0 5px 0 #8A5A00,0 0 24px rgba(255,180,40,.5)}
#lvNext:hover,.lvBtn.primary:hover{background:linear-gradient(180deg,#FFE281,#FFB726);
  border-color:#FFF3C4}
#lvNext:active,.lvBtn.primary:active{box-shadow:0 0 0 #8A5A00}

/* chevron columns flanking the panel */
.lvChev{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px);
  pointer-events:none}
#lvChevL{left:clamp(10px,5vw,90px)}
#lvChevR{right:clamp(10px,5vw,90px)}
.lvChev svg{width:clamp(22px,4vw,46px);height:clamp(14px,2.6vw,30px);
  animation:chevPulse 1.2s ease-in-out infinite}
.lvChev svg:nth-child(2){animation-delay:.15s}
.lvChev svg:nth-child(3){animation-delay:.3s}
@keyframes chevPulse{0%,100%{opacity:.25;transform:translateY(4px)}
  50%{opacity:1;transform:translateY(-4px)}}
@media (max-width:640px){.lvChev{display:none}}

@keyframes punch{0%{transform:scale(0) rotate(-8deg);opacity:0}
  60%{transform:scale(1.2) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}}
@media (prefers-reduced-motion: reduce){
  #rays,.lvChev svg,#lvArrow{animation:none}
  #lvCongrats,.lvStar,#lvPlaque,#lvNum,#lvBonus,#lvBtns{animation:none;opacity:1;transform:none}
}
/* ---------- time up results ---------- */
#timeUp{position:fixed;inset:0;z-index:21;display:none;
  align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #1B2340 0%, var(--ink) 70%)}
#timeUp.show{display:flex;animation:lvIn .35s ease-out both}
.lvDotsBg{position:absolute;inset:0;
  background-image:radial-gradient(rgba(61,245,255,.16) 1.5px, transparent 1.6px);
  background-size:16px 16px}
#tuConfetti{position:absolute;inset:0;pointer-events:none}
#tuPanel{position:relative;display:flex;flex-direction:column;
  align-items:center;padding:20px;text-align:center}
#tuTitle{font-family:'Press Start 2P',monospace;
  font-size:clamp(20px,5vw,44px);color:var(--danger);
  text-shadow:3px 3px 0 #5A0010, 0 0 26px rgba(255,61,90,.85);
  margin-bottom:clamp(16px,3vh,28px);
  animation:punch .5s cubic-bezier(.2,2.2,.4,1) both}
#tuPlaque{background:rgba(20,28,54,.85);
  border:3px solid var(--volt);border-radius:16px;
  box-shadow:0 0 28px rgba(61,245,255,.35), inset 0 0 26px rgba(61,245,255,.08);
  padding:clamp(14px,2.6vh,22px) clamp(24px,6vw,60px);
  animation:punch .5s .15s cubic-bezier(.2,2.2,.4,1) both}
#tuPlaque .txt{font-family:'Press Start 2P',monospace;
  font-size:clamp(26px,7vw,60px);color:var(--gold);
  text-shadow:3px 3px 0 #8A3B00, 0 0 22px rgba(255,168,40,.85);white-space:nowrap}
#tuLbl{font-family:'Press Start 2P',monospace;
  font-size:clamp(9px,1.5vw,13px);color:#7FE9F2;letter-spacing:2px;
  margin-bottom:10px}
#tuKills{font-family:'Press Start 2P',monospace;
  margin-top:clamp(14px,2.6vh,22px);font-size:clamp(10px,2.2vw,17px);
  color:var(--paper);text-shadow:0 0 14px rgba(61,245,255,.7);
  animation:punch .5s .26s cubic-bezier(.2,2.2,.4,1) both}
#tuBest{font-family:'Press Start 2P',monospace;
  margin-top:clamp(8px,1.6vh,14px);font-size:clamp(9px,1.7vw,13px);
  color:var(--gold);min-height:1em;
  animation:punch .5s .34s cubic-bezier(.2,2.2,.4,1) both}
#tuBtns{display:flex;gap:clamp(12px,3vw,28px);
  margin-top:clamp(20px,3.6vh,34px);
  animation:punch .5s .42s cubic-bezier(.2,2.2,.4,1) both}
@media (prefers-reduced-motion: reduce){
  #tuTitle,#tuPlaque,#tuKills,#tuBest,#tuBtns{animation:none}
}

/* ---------- pause menu ---------- */
#pauseBtn{position:absolute;right:16px;bottom:16px;width:clamp(44px,6vw,56px);height:clamp(44px,6vw,56px);
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(11,14,26,.86);border:3px solid var(--frame);border-radius:14px;
  box-shadow:0 0 18px rgba(80,140,255,.3);cursor:pointer;pointer-events:auto;
  transition:border-color .15s, transform .07s}
#pauseBtn i{display:block;width:6px;height:40%;background:var(--volt);border-radius:2px}
#pauseBtn:hover{border-color:var(--volt)}
#pauseBtn:active{transform:translateY(2px)}
#pauseBtn:focus-visible{outline:3px dashed var(--volt);outline-offset:4px}
#pauseMenu{position:fixed;inset:0;z-index:22;display:none;
  align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #1B2340 0%, var(--ink) 70%)}
#pauseMenu.show{display:flex;animation:lvIn .25s ease-out both}
#pmPanel{position:relative;display:flex;flex-direction:column;
  align-items:center;padding:20px;text-align:center}
#pmTitle{font-family:'Press Start 2P',monospace;
  font-size:clamp(20px,5vw,44px);color:var(--volt);
  text-shadow:3px 3px 0 #0A1740, 0 0 26px rgba(61,245,255,.85);
  margin-bottom:clamp(16px,3vh,28px);
  animation:punch .4s cubic-bezier(.2,2.2,.4,1) both}
#pmPlaque{background:rgba(20,28,54,.85);
  border:3px solid var(--volt);border-radius:16px;
  box-shadow:0 0 28px rgba(61,245,255,.35), inset 0 0 26px rgba(61,245,255,.08);
  padding:clamp(14px,2.6vh,22px) clamp(24px,6vw,60px);
  animation:punch .4s .08s cubic-bezier(.2,2.2,.4,1) both}
#pmPlaque .txt{font-family:'Press Start 2P',monospace;
  font-size:clamp(24px,6vw,48px);color:var(--gold);
  text-shadow:3px 3px 0 #8A3B00, 0 0 22px rgba(255,168,40,.85);white-space:nowrap}
#pmLbl{font-family:'Press Start 2P',monospace;
  font-size:clamp(9px,1.5vw,13px);color:#7FE9F2;letter-spacing:2px;margin-bottom:10px}
#pmInfo{font-family:'Press Start 2P',monospace;
  margin-top:clamp(14px,2.6vh,22px);font-size:clamp(10px,2.2vw,17px);
  color:var(--paper);text-shadow:0 0 14px rgba(61,245,255,.7);
  animation:punch .4s .16s cubic-bezier(.2,2.2,.4,1) both}
#pmBtns{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,3vw,24px);
  margin-top:clamp(20px,3.6vh,34px);
  animation:punch .4s .24s cubic-bezier(.2,2.2,.4,1) both}
#pmHint{font-family:'Press Start 2P',monospace;margin-top:clamp(14px,2.6vh,22px);
  font-size:clamp(8px,1.3vw,11px);color:#5D6A8C;letter-spacing:1px}
@media (prefers-reduced-motion: reduce){
  #pmTitle,#pmPlaque,#pmInfo,#pmBtns{animation:none}
}

/* result and menu panels stay inside short screens and scroll if they must */
#lvPanel,#tuPanel,#pmPanel{max-height:100vh;max-height:100dvh;overflow-y:auto}