:root {
  --pink: #ff2e88;
  --cyan: #23e5ff;
  --gold: #ffd23f;
  --purple: #7b2fbf;
  --acid: #a6ff2e;
  --dark: #07040f;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
html,body { height:100%; overflow:hidden; background:var(--dark); touch-action:none; overscroll-behavior:none; }
body { font-family:'Press Start 2P', monospace; color:#fff; }
#stage { position:fixed; inset:0; }
canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* CRT scanlines + vignette */
#crt { position:fixed; inset:0; pointer-events:none; z-index:40;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 1px, transparent 1px 3px); }
#crt::after { content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%); }

/* ===== HUD ===== */
#hud { position:fixed; top:0; left:0; right:0; z-index:30; display:none;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
  justify-content:space-between; align-items:flex-start;
  font-size:11px; text-shadow:0 0 6px rgba(0,0,0,.9), 2px 2px 0 #000;
  pointer-events:none; }
#hud.on { display:flex; }
#hud .col { display:flex; flex-direction:column; gap:5px; }
#hud .mid { text-align:center; }
#hearts { color:var(--pink); letter-spacing:2px; font-size:12px; }
#lvlName { color:var(--cyan); font-size:9px; }
#timer { color:#fff; font-size:11px; margin-top:2px; }
#watchCnt { color:var(--gold); }
#score { color:#889; font-size:8px; }
#muteBtn { pointer-events:auto; background:none; border:none; color:#fff; font-size:16px; cursor:pointer;
  filter:drop-shadow(0 0 4px var(--cyan)); padding:2px 4px; font-family:inherit; }

/* ===== touch controls ===== */
#controls { position:fixed; left:0; right:0; bottom:0; z-index:30; display:none;
  justify-content:space-between; align-items:flex-end;
  padding: 0 max(14px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  pointer-events:none; }
#controls.on { display:flex; }
.padBtn { pointer-events:auto; width:74px; height:74px; border-radius:18px;
  border:3px solid rgba(35,229,255,.7); background:rgba(10,6,20,.55);
  color:var(--cyan); font-family:inherit; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 14px rgba(35,229,255,.25), inset 0 0 10px rgba(35,229,255,.12);
  touch-action:none; }
.padBtn:active,.padBtn.held { background:rgba(35,229,255,.25); }
#btnJump { width:96px; height:96px; border-radius:50%;
  border-color:rgba(255,46,136,.75); color:var(--pink);
  box-shadow:0 0 18px rgba(255,46,136,.3), inset 0 0 12px rgba(255,46,136,.15);
  font-size:15px; }
#btnJump:active,#btnJump.held { background:rgba(255,46,136,.28); }
.dpad { display:flex; gap:14px; }

/* ===== screens ===== */
.screen { position:fixed; inset:0; z-index:50; display:none; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:20px;
  background:rgba(5,2,12,.93); overflow-y:auto; }
.screen.on { display:flex; }

.logo { font-size:clamp(20px,6vw,38px); line-height:1.5; margin-bottom:4px;
  color:var(--gold);
  text-shadow:0 0 12px rgba(255,210,63,.8), 0 0 40px rgba(255,46,136,.5), 3px 3px 0 var(--purple); }
.logo .neon { color:var(--pink); text-shadow:0 0 12px var(--pink), 0 0 44px var(--pink), 3px 3px 0 #4a0d33; }
.subtitle { font-size:9px; color:var(--cyan); text-shadow:0 0 8px var(--cyan); margin-bottom:22px; letter-spacing:2px; }

.storybox { max-width:430px; border:3px solid var(--purple); border-radius:6px;
  background:rgba(20,8,40,.75); box-shadow:0 0 20px rgba(123,47,191,.4), inset 0 0 30px rgba(123,47,191,.15);
  padding:18px 16px; font-size:10px; line-height:2; text-align:left; margin-bottom:22px; }
.storybox .g { color:var(--gold); } .storybox .p { color:var(--pink); }
.storybox .c { color:var(--cyan); } .storybox .a { color:var(--acid); }
.storybox p+p { margin-top:10px; }
.storybox .dim { font-size:8px; color:#8a7fb0; }

.btnNeon { font-family:inherit; font-size:14px; padding:16px 30px; cursor:pointer;
  background:linear-gradient(180deg,#ff4d9d,#c4126a); color:#fff; border:3px solid #ffb3d4;
  border-radius:8px; letter-spacing:2px;
  box-shadow:0 0 18px rgba(255,46,136,.7), 0 5px 0 #7a0a41;
  text-shadow:2px 2px 0 rgba(0,0,0,.4); animation:btnPulse 1.6s infinite; }
.btnNeon:active { transform:translateY(4px); box-shadow:0 0 18px rgba(255,46,136,.7), 0 1px 0 #7a0a41; }
@keyframes btnPulse { 50% { box-shadow:0 0 34px rgba(255,46,136,1), 0 5px 0 #7a0a41; } }
.btnGhost { font-family:inherit; font-size:10px; margin-top:18px; padding:12px 18px; cursor:pointer;
  background:none; color:var(--cyan); border:2px solid var(--cyan); border-radius:6px;
  box-shadow:0 0 10px rgba(35,229,255,.3); }
.hintTxt { font-size:8px; color:#8a7fb0; margin-top:16px; line-height:1.8; }

/* level card */
#levelCard h2 { font-size:12px; color:var(--cyan); text-shadow:0 0 10px var(--cyan); margin-bottom:10px; }
#levelCard .big { font-size:clamp(18px,5.5vw,30px); color:var(--gold); text-shadow:0 0 14px var(--gold); margin-bottom:16px; }
#levelCard .tip { font-size:9px; color:#cbb8ff; line-height:2; max-width:380px; margin-bottom:26px; }

/* end screen */
#endTitle { font-size:clamp(16px,5vw,26px); color:var(--gold); text-shadow:0 0 14px var(--gold); line-height:1.6; margin-bottom:12px; }
#storyOutro { max-width:410px; font-size:9px; line-height:2.1; color:#ddd; margin-bottom:14px; }
#storyOutro .g { color:var(--gold); } #storyOutro .p { color:var(--pink); }

.watchBig { font-size:clamp(16px,5vw,24px); color:var(--gold); text-shadow:0 0 12px var(--gold);
  margin-bottom:12px; letter-spacing:1px; }

/* prize ladder */
.ladder { width:100%; max-width:410px; border:3px solid var(--cyan); border-radius:6px;
  background:rgba(6,20,30,.7); box-shadow:0 0 18px rgba(35,229,255,.3);
  padding:12px; font-size:9px; margin-bottom:14px; }
.ladder .lrow { display:flex; justify-content:space-between; align-items:center;
  padding:7px 8px; border-radius:4px; line-height:1.6; color:#7d8aa5; }
.ladder .lrow.hit { background:rgba(255,210,63,.14); color:#fff;
  border:2px solid var(--gold); box-shadow:0 0 12px rgba(255,210,63,.35); }
.ladder .lrow.hit .req { color:var(--gold); }
.ladder .req { font-size:8px; }
.ladder .arrow { color:var(--gold); font-size:8px; margin-left:6px; }

.statsLine { font-size:8px; color:#8a7fb0; line-height:2; margin-bottom:14px; }

.prizeBox { max-width:410px; width:100%; border:3px dashed var(--gold); border-radius:8px;
  background:rgba(40,28,4,.55); box-shadow:0 0 24px rgba(255,210,63,.35);
  padding:16px 14px; margin-bottom:8px; }
.prizeBox .lbl { font-size:8px; color:#cbb8ff; margin-bottom:8px; }
#prizeEmoji, #lockPrizeEmoji { font-size:44px; line-height:1.3; }
#prizeName, #lockPrizeName { font-size:13px; color:var(--gold); text-shadow:0 0 10px var(--gold); margin:8px 0; line-height:1.8; }
#prizeDesc { font-size:9px; line-height:2; color:#eee; }
.voucher { font-size:8px; line-height:2; color:var(--pink); margin-top:10px;
  border-top:1px dashed rgba(255,210,63,.5); padding-top:10px; }

/* game over */
#goTitle { font-size:clamp(16px,5vw,26px); color:var(--pink);
  text-shadow:0 0 14px var(--pink), 0 0 40px rgba(255,46,136,.5);
  line-height:1.6; margin-bottom:14px; }

/* locked screen */
#lockedScreen .storybox { text-align:center; }
#lockTitle { font-size:clamp(14px,4.5vw,22px); color:var(--cyan); text-shadow:0 0 12px var(--cyan);
  line-height:1.7; margin-bottom:16px; }

/* rotate-your-phone hint */
#rotateHint { position:fixed; inset:0; z-index:70; display:none; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:14px;
  background:rgba(4,2,10,.94); padding:30px; }
#rotateHint.on { display:flex; }
#rotateHint .phoneIcon { font-size:54px; animation:rotPhone 1.8s ease-in-out infinite; }
@keyframes rotPhone { 0%,25% { transform:rotate(0deg); } 55%,80% { transform:rotate(90deg); } 100% { transform:rotate(90deg); } }
#rotateHint .rotTitle { font-size:14px; color:var(--gold); text-shadow:0 0 12px var(--gold); line-height:1.7; }
#rotateHint .rotSub { font-size:9px; color:#cbb8ff; line-height:2; max-width:300px; }

/* debug banner */
#debugBanner { position:fixed; bottom:4px; left:50%; transform:translateX(-50%); z-index:60;
  font-size:8px; color:var(--acid); text-shadow:0 0 6px var(--acid); display:none; }
#debugBanner.on { display:block; }

.blink { animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }
@keyframes confFall { to { transform:translateY(108vh) rotate(660deg); opacity:.3; } }