@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Bungee+Shade&family=Bungee&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  button, #bootSplash, .confirm-modal, .nav-pill, .move-btn, #sahurBtn { touch-action: manipulation; }

  :root {
    --neon-green: #39ff14;
    --neon-pink: #ff6ec7;
    --neon-cyan: #00fff7;
    --neon-yellow: #fff700;
    --neon-red: #ff0040;
    --neon-orange: #ff6600;
    --bg-dark: #07070f;
    --slop-purple: #8b00ff;
  }

  html, body {
    width: 100%; height: 100%;
    background: var(--bg-dark);
    overflow: hidden;
    font-family: 'Bangers', 'Impact', cursive;
    color: white;
    user-select: none; -webkit-user-select: none;
    touch-action: none; overscroll-behavior: none;
  }

  /* ===== SCREEN SHAKE ===== */
  .shake { animation: screenShake 0.18s ease-in-out; }
  .shake-heavy { animation: screenShakeHeavy 0.45s ease-in-out; }
  @keyframes screenShake {
    0%,100% { transform: translate(0,0); }
    25% { transform: translate(-5px,4px); } 50% { transform: translate(5px,-4px); } 75% { transform: translate(-3px,-3px); }
  }
  @keyframes screenShakeHeavy {
    0%,100% { transform: translate(0,0) rotate(0); }
    15% { transform: translate(-13px,9px) rotate(-1.5deg); } 30% { transform: translate(11px,-11px) rotate(1.5deg); }
    45% { transform: translate(-9px,-7px) rotate(-1deg); } 60% { transform: translate(9px,11px) rotate(1deg); } 80% { transform: translate(-5px,4px) rotate(-0.5deg); }
  }

  @keyframes rainbowBorder {
    0% { border-color: var(--neon-green); } 16% { border-color: var(--neon-cyan); } 33% { border-color: var(--neon-pink); }
    50% { border-color: var(--neon-yellow); } 66% { border-color: var(--neon-orange); } 83% { border-color: var(--neon-red); } 100% { border-color: var(--neon-green); }
  }
  @keyframes pulseGlow {
    0%,100% { text-shadow: 0 0 10px var(--neon-green), 0 0 20px var(--neon-green); }
    50% { text-shadow: 0 0 22px var(--neon-pink), 0 0 44px var(--neon-pink); }
  }
  @keyframes floatUp {
    0% { transform: translate(-50%,0) scale(0.6); opacity: 0; }
    18% { transform: translate(-50%,-14px) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%,-120px) scale(1.6); opacity: 0; }
  }
  @keyframes sahurFlash {
    0% { background: var(--neon-green); } 25% { background: var(--neon-red); } 50% { background: var(--neon-cyan); } 75% { background: var(--neon-pink); } 100% { background: var(--neon-green); }
  }
  @keyframes titlePulse { 0%,100% { transform: scale(1); filter: hue-rotate(0deg); } 50% { transform: scale(1.04); filter: hue-rotate(35deg); } }
  @keyframes slideInUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
  @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes bannerIn {
    0% { transform: translate(-50%,-50%) scale(0.3); opacity: 0; }
    30% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
    75% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
  }

  /* ===== CONTAINER ===== */
  #gameContainer { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; background: #000; }
  #gameWrapper { position: relative; width: 100%; height: 100%; max-width: 560px; overflow: hidden; box-shadow: 0 0 60px rgba(0,255,247,0.15); }
  canvas { display: block; width: 100%; height: 100%; }

  /* ===== HUD ===== */
  #hud {
    position: absolute; top: 0; left: 0; width: 100%;
    padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
    display: none; flex-direction: column; gap: 6px; z-index: 10; pointer-events: none;
  }
  #hud.active { display: flex; }
  .hud-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  #scoreWrap { display: flex; flex-direction: column; }
  #scoreDisplay { font-size: clamp(20px,5.5vw,30px); color: var(--neon-yellow); text-shadow: 0 0 8px var(--neon-yellow), 2px 2px 0 #000; letter-spacing: 2px; line-height: 1; }
  #hiDisplay { font-size: 12px; color: #8ad; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; }
  /* player health — prominent panel low on screen */
  #healthDock { position:absolute; left:50%; transform:translateX(-50%); bottom: calc(max(10px,env(safe-area-inset-bottom)) + 32px); z-index:10; display:none; padding:5px 15px; background:rgba(10,0,5,0.52); border:1.5px solid rgba(255,40,72,0.6); border-radius:22px; box-shadow:0 0 16px rgba(255,40,72,0.4), inset 0 0 10px rgba(255,40,72,0.18); backdrop-filter:blur(3px); pointer-events:none; }
  #healthDock.active { display:block; }
  #hearts { font-size: clamp(14px,4vw,21px); letter-spacing: 1px; line-height: 1; white-space: nowrap; }
  #hearts .hp-full { color: #ff2138; text-shadow: 0 0 9px #ff3450, 0 0 2px #fff, 0 1px 0 #000; }
  #hearts .hp-empty { color: #4a1620; text-shadow: 0 1px 0 #000; }
  #comboDisplay { align-self: flex-end; font-size: clamp(14px,4vw,20px); color: var(--neon-cyan); text-shadow: 0 0 8px var(--neon-cyan), 1px 1px 0 #000; opacity: 0; transition: opacity .15s, transform .15s; transform: scale(0.8); }
  #comboDisplay.visible { opacity: 1; transform: scale(1); }

  #powerTray { display: flex; gap: 6px; align-self: flex-start; min-height: 4px; flex-wrap: wrap; }
  .pwr-chip { display: flex; align-items: center; gap: 4px; font-size: 13px; background: rgba(0,0,0,0.55); border: 1.5px solid currentColor; border-radius: 20px; padding: 2px 9px 2px 7px; box-shadow: 0 0 10px currentColor; }
  .pwr-chip .ic { font-size: 14px; }
  .pwr-chip .bar { width: 26px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.25); overflow: hidden; }
  .pwr-chip .bar > i { display: block; height: 100%; background: currentColor; }

  .sahur-meter-wrap { width: 100%; height: 18px; border: 2px solid var(--neon-pink); border-radius: 10px; overflow: hidden; background: rgba(0,0,0,0.6); position: relative; animation: rainbowBorder 2s linear infinite; }
  .sahur-meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan), var(--neon-pink)); border-radius: 8px; transition: width .15s ease; position: relative; }
  .sahur-meter-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35) 50%, transparent); animation: shimmer 1.5s infinite; }
  .sahur-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 11px; color: #fff; text-shadow: 1px 1px 0 #000; letter-spacing: 3px; z-index: 2; white-space: nowrap; }
  .sahur-ready { animation: blink .4s infinite; color: var(--neon-yellow) !important; font-size: 12px !important; }

  #topBtns { position: absolute; top: max(10px,env(safe-area-inset-top)); right: 10px; display: none; gap: 8px; z-index: 30; }
  #topBtns.active { display: flex; }
  .mini-btn { width: 40px; height: 40px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.5); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
  .mini-btn:active { transform: scale(0.9); }

  .float-popup { position: absolute; font-family: 'Bungee', 'Bangers', cursive; font-weight: 700; pointer-events: none; z-index: 20; animation: floatUp .8s ease-out forwards; white-space: nowrap; text-shadow: 2px 2px 0 #000; transform: translate(-50%,0); }

  #stageBanner { position: absolute; top: 40%; left: 50%; z-index: 22; display: none; font-family: 'Bungee Shade', cursive; font-size: clamp(22px,6.5vw,46px); color: var(--neon-cyan); text-shadow: 0 0 24px var(--neon-cyan), 3px 3px 0 #000; pointer-events: none; text-align: center; white-space: normal; width: 90%; max-width: 520px; line-height: 1.1; }
  #stageBanner.show { display: block; animation: bannerIn 1.6s ease forwards; }

  #sahurOverlay { position: absolute; inset: 0; z-index: 15; display: none; pointer-events: none; }
  #sahurOverlay.active { display: block; animation: sahurFlash .3s linear infinite; opacity: 0.13; }
  #sahurText { position: absolute; top: 11%; left: 50%; transform: translateX(-50%); font-size: clamp(24px,7.5vw,42px); font-family: 'Bungee Shade', cursive; color: var(--neon-green); text-shadow: 0 0 30px var(--neon-green), 3px 3px 0 #000; z-index: 17; display: none; animation: pulseGlow .3s infinite; white-space: nowrap; letter-spacing: 4px; pointer-events: none; text-align: center; }
  #sahurText.active { display: block; }
  #sahurCountdown { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); font-size: clamp(44px,12vw,78px); font-family: 'Bungee Shade', cursive; color: var(--neon-yellow); text-shadow: 0 0 25px var(--neon-yellow), 0 0 50px var(--neon-orange), 4px 4px 0 #000; z-index: 17; display: none; animation: pulseGlow .5s infinite; pointer-events: none; letter-spacing: 6px; }
  #sahurCountdown.active { display: block; }

  #inputLayer { position: absolute; inset: 0; z-index: 5; touch-action: none; }

  #moveBtns { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 8; display: none; justify-content: space-between; padding: 0 14px; padding-bottom: calc(max(22px,env(safe-area-inset-bottom)) + 46px); pointer-events: none; }
  #moveBtns.active { display: flex; }
  .move-btn { width: 78px; height: 78px; border-radius: 50%; border: 3px solid rgba(0,255,247,0.5); background: rgba(0,255,247,0.10); color: var(--neon-cyan); font-size: 34px; display: flex; align-items: center; justify-content: center; pointer-events: auto; box-shadow: 0 0 16px rgba(0,255,247,0.3); backdrop-filter: blur(2px); }
  .move-btn:active { background: rgba(0,255,247,0.3); transform: scale(0.93); }

  /* sahur meter docked at the bottom */
  #sahurDock { position: absolute; left: 0; right: 0; bottom: max(10px,env(safe-area-inset-bottom)); padding: 0 14px; z-index: 9; display: none; pointer-events: none; }
  #sahurDock.active { display: block; }

  #sahurBtn { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); z-index: 18; display: none; padding: 12px 26px; text-align: center; line-height: 1.1; font-family: 'Bungee Shade','Bangers',cursive; font-size: clamp(15px,4.2vw,21px); background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan)); color: #000; border: 3px solid var(--neon-yellow); border-radius: 14px; cursor: pointer; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; pointer-events: auto; animation: sahurBtnPulse .6s ease-in-out infinite, rainbowBorder 1.5s linear infinite; box-shadow: 0 0 22px var(--neon-green); }
  .sahur-hint { display: block; font-family: 'Outfit', sans-serif; font-size: 10px; letter-spacing: 1px; margin-top: 3px; opacity: 0.8; text-transform: none; }
  #sahurBtn:active { transform: translateX(-50%) scale(0.92); }
  #sahurBtn.visible { display: block; }
  @keyframes sahurBtnPulse { 0%,100% { box-shadow: 0 0 22px var(--neon-green); } 50% { box-shadow: 0 0 38px var(--neon-green), 0 0 60px rgba(57,255,20,0.5); } }

  /* ===== SCREENS ===== */
  .overlay-screen { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; gap: 14px; padding: 22px; overflow: hidden; }
  #startScreen { background: radial-gradient(circle at 50% 28%, #1a0033 0%, #07070f 70%); overflow-y: auto; justify-content: flex-start; gap: 9px; padding-top: max(14px,env(safe-area-inset-top)); padding-bottom: 24px; }
  .start-bg-deco { position: absolute; font-size: 64px; opacity: 0.07; animation: spin 22s linear infinite; }

  .start-title { font-family: 'Bungee Shade','Bangers',cursive; font-size: clamp(30px,8.5vw,58px); text-align: center; line-height: 0.95; background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan), var(--neon-pink), var(--neon-yellow)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: titlePulse 2s ease-in-out infinite; filter: drop-shadow(0 0 22px rgba(57,255,20,0.5)); }
  .start-subtitle { font-size: clamp(13px,3.6vw,19px); color: var(--neon-cyan); text-shadow: 0 0 10px var(--neon-cyan); text-align: center; letter-spacing: 3px; animation: slideInUp .8s ease .2s both; }
  .start-lore { font-family: 'Bungee', sans-serif; font-size: clamp(10px,2.6vw,13px); color: #b9b9d0; text-align: center; max-width: 420px; line-height: 1.6; animation: slideInUp .8s ease .35s both; }

  .hero-row { display: flex; align-items: center; gap: 12px; animation: slideInUp .8s ease .42s both; }
  .hero-box { width: 116px; height: 116px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 14px rgba(57,255,20,0.55)); animation: bob 2.4s ease-in-out infinite; }
  .hero-box img { max-width: 100%; max-height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
  .hero-cap { display: flex; flex-direction: column; gap: 2px; }
  .hero-cap b { font-family:'Bungee Shade',cursive; font-size: 16px; color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green); }
  .hero-cap span { font-family:'Bungee',sans-serif; font-size: 10px; color: #9aa; letter-spacing: 1px; }

  .char-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; max-width: 540px; animation: slideInUp .8s ease .5s both; }
  .char-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px 5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 11px; transition: transform .15s, border-color .15s; min-width: 0; }
  .char-card:hover { transform: translateY(-3px); border-color: var(--neon-pink); }
  .char-card .imgbox { width: 100%; max-width: 72px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 8px rgba(255,255,255,0.22)); animation: bob 2.4s ease-in-out infinite; }
  .char-card .imgbox img { max-width: 100%; max-height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
  .char-card span { font-size: clamp(7px,1.7vw,9px); color: var(--neon-pink); text-shadow: 0 0 5px var(--neon-pink); letter-spacing: .2px; text-align: center; line-height: 1.05; word-break: break-word; }

  .big-btn { padding: 15px 34px; font-family: 'Bungee Shade','Bangers',cursive; font-size: clamp(18px,4.5vw,26px); line-height: 1.45; background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan)); color: #061018; border: 3px solid var(--neon-yellow); border-radius: 14px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; position: relative; overflow: hidden; transition: transform .12s; animation: slideInUp .8s ease .6s both, rainbowBorder 1.5s linear infinite; box-shadow: 0 0 26px rgba(57,255,20,0.4); }
  .big-btn:hover { transform: scale(1.06); }
  .big-btn:active { transform: scale(0.95); }
  /* pause buttons should just appear (no fly-in each time the pause screen opens) */
  #pauseScreen .big-btn { animation: rainbowBorder 1.5s linear infinite; }
  #pauseScreen .pause-title, #pauseScreen .diff-btn { animation: none; }
  .big-btn::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%); animation: shimmer 2.4s infinite; }

  .diff-row { display: flex; gap: 10px; animation: slideInUp .8s ease .55s both; }
  .ramp-hint { font-family:'Outfit',sans-serif; font-size:12px; letter-spacing:1px; color:#9aa; text-transform:uppercase; opacity:0.8; animation: slideInUp .8s ease .55s both; }
  .diff-btn { padding: 8px 16px; font-family: 'Bangers',cursive; font-size: 16px; letter-spacing: 2px; background: rgba(255,255,255,0.06); color: #ccd; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; cursor: pointer; transition: all .12s; }
  .diff-btn.sel { color: #000; background: var(--neon-yellow); border-color: #fff; box-shadow: 0 0 16px var(--neon-yellow); }

  .start-controls { font-family: 'Bungee', sans-serif; font-size: 11px; color: #777; text-align: center; line-height: 1.8; animation: slideInUp .8s ease .8s both; }
  .start-controls kbd { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 2px 7px; font-size: 10px; color: var(--neon-yellow); }

  #gameOverScreen, #pauseScreen { background: rgba(7,7,15,0.95); display: none; }
  #gameOverScreen.active, #pauseScreen.active { display: flex; }
  .go-title { font-family: 'Bungee Shade',cursive; font-size: clamp(30px,8vw,50px); color: var(--neon-red); text-shadow: 0 0 20px var(--neon-red), 3px 3px 0 #000; animation: pulseGlow 1s infinite; text-align: center; }
  .go-subtitle { font-family: 'Bungee', sans-serif; font-size: 14px; color: var(--neon-pink); text-align: center; }
  .go-newhi { font-family:'Bungee Shade',cursive; font-size: 18px; color: var(--neon-yellow); text-shadow: 0 0 14px var(--neon-yellow); display: none; }
  .go-newhi.show { display: block; animation: blink .6s infinite; }
  .go-stats { background: rgba(255,255,255,0.05); border: 2px solid var(--neon-cyan); border-radius: 12px; padding: 14px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 250px; animation: rainbowBorder 2s linear infinite; }
  .go-stat-row { display: flex; justify-content: space-between; font-size: 15px; gap: 20px; }
  .go-stat-label { color: #9aa; } .go-stat-value { color: var(--neon-yellow); text-shadow: 0 0 5px var(--neon-yellow); }
  .go-stat-value.highlight { color: var(--neon-green); font-size: 21px; text-shadow: 0 0 10px var(--neon-green); }
  .go-rank { font-size: 18px; text-align: center; }

  .pause-title { font-family:'Bungee Shade',cursive; font-size: clamp(30px,9vw,54px); color: var(--neon-cyan); text-shadow: 0 0 24px var(--neon-cyan); }
  /* boot splash (first-load audio gate) */
  #bootSplash { position:absolute; inset:0; z-index:300; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; background: radial-gradient(circle at 50% 36%, #1a0033 0%, #06060e 72%); cursor:pointer; transition: opacity .5s ease; }
  #bootSplash.hide { opacity:0; pointer-events:none; }
  #bootSplash .boot-title { font-family:'Bungee Shade','Bangers',cursive; font-size: clamp(34px,11vw,62px); line-height:.95; text-align:center; background: linear-gradient(90deg,var(--neon-green),var(--neon-cyan),var(--neon-pink),var(--neon-yellow)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(0 0 22px rgba(57,255,20,0.5)); animation: titlePulse 2s ease-in-out infinite; }
  #bootSplash .boot-cta { font-family:'Bungee','Bangers',cursive; font-size: clamp(16px,4vw,22px); color:#061018; background:linear-gradient(135deg,var(--neon-green),var(--neon-cyan)); border:3px solid var(--neon-yellow); border-radius:14px; padding:14px 30px; letter-spacing:2px; box-shadow:0 0 26px rgba(57,255,20,0.4); animation: rainbowBorder 1.5s linear infinite, bob 2s ease-in-out infinite; }
  #bootSplash .boot-sub { font-family:'Bungee',sans-serif; font-size:12px; color:#9aa; letter-spacing:2px; }
  /* confirm modal */
  .confirm-modal { position:absolute; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(5,5,12,0.8); padding:20px; }
  .confirm-modal.active { display:flex; }
  .confirm-box { background:#12122a; border:2px solid var(--neon-pink); border-radius:16px; padding:24px 26px; text-align:center; box-shadow:0 0 30px rgba(255,110,199,0.4); max-width:320px; }
  .confirm-text { font-family:'Bungee',sans-serif; font-size:16px; color:#fff; line-height:1.45; margin-bottom:18px; }
  .confirm-text span { display:block; margin-top:8px; font-size:12px; color:#9aa; letter-spacing:.5px; }
  .confirm-btns { display:flex; gap:10px; justify-content:center; }
  #confirmYes { border-color: var(--neon-red); color: var(--neon-red); }

  /* ===== INSANE-EDITION ADDITIONS ===== */

  /* glitch / chromatic hit */
  @keyframes glitchHit {
    0% { filter: none; transform: translate(0,0); }
    20% { filter: hue-rotate(40deg) saturate(2.2); transform: translate(3px,-2px); }
    40% { filter: hue-rotate(-50deg) invert(0.08); transform: translate(-4px,2px); }
    60% { filter: hue-rotate(20deg) saturate(1.8); transform: translate(2px,2px); }
    100% { filter: none; transform: translate(0,0); }
  }
  .glitch { animation: glitchHit .35s steps(2) 1; }

  /* top nav row of pill buttons on start screen */
  .nav-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; animation: slideInUp .8s ease .68s both; }
  .nav-pill { display: flex; align-items: center; gap: 5px; padding: 7px 15px; font-family: 'Bungee', sans-serif; font-size: 12px; letter-spacing: 1px; color: #cfe; background: rgba(255,255,255,0.05); border: 2px solid rgba(0,255,247,0.4); border-radius: 22px; cursor: pointer; transition: transform .12s, background .12s, box-shadow .12s; }
  .nav-pill:hover { transform: translateY(-2px); background: rgba(0,255,247,0.12); box-shadow: 0 0 16px rgba(0,255,247,0.35); }
  .nav-pill:active { transform: scale(0.94); }
  .nav-pill b { color: var(--neon-yellow); }

  .bank-badge { display: inline-flex; align-items: center; gap: 6px; font-family:'Bungee',sans-serif; font-size: 13px; color: var(--neon-yellow); background: rgba(0,0,0,0.4); border: 2px solid var(--neon-yellow); border-radius: 20px; padding: 4px 14px; box-shadow: 0 0 14px rgba(255,247,0,0.3); animation: slideInUp .8s ease .45s both; }

  /* generic sub-screen (shop/skins/settings) */
  .sub-screen { background: radial-gradient(circle at 50% 18%, #170033 0%, #06060e 72%); display: none; overflow-y: auto; justify-content: flex-start; gap: 12px; padding-top: max(26px,env(safe-area-inset-top)); padding-bottom: 30px; }
  .sub-screen.active { display: flex; }
  .sub-head { font-family:'Bungee Shade',cursive; font-size: clamp(24px,7vw,40px); background: linear-gradient(90deg,var(--neon-yellow),var(--neon-orange),var(--neon-pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(0 0 14px rgba(255,200,0,0.4)); text-align:center; }
  .sub-bank { font-family:'Bungee',sans-serif; font-size:14px; color:var(--neon-yellow); text-shadow:0 0 8px var(--neon-yellow); }
  .card-list { display:flex; flex-direction:column; gap:9px; width:100%; max-width:430px; }
  .shop-card { display:flex; align-items:center; gap:11px; background: rgba(255,255,255,0.045); border:2px solid rgba(255,255,255,0.14); border-radius:14px; padding:11px 13px; transition: border-color .15s, background .15s; }
  .shop-card.maxed { border-color: var(--neon-green); box-shadow:0 0 14px rgba(57,255,20,0.25); }
  .shop-ic { font-size:30px; width:42px; text-align:center; flex:0 0 auto; filter: drop-shadow(0 0 8px currentColor); }
  .shop-body { flex:1; min-width:0; }
  .shop-name { font-family:'Bungee',sans-serif; font-size:14px; color:#fff; letter-spacing:.5px; }
  .shop-desc { font-family:'Bungee',sans-serif; font-size:10.5px; color:#9aa; line-height:1.4; margin-top:2px; }
  .shop-pips { display:flex; flex-wrap:wrap; gap:3px; margin-top:5px; }
  .shop-pip { width:11px; height:6px; border-radius:3px; background:rgba(255,255,255,0.15); }
  .shop-pip.on { background: var(--neon-cyan); box-shadow:0 0 6px var(--neon-cyan); }
  .shop-buy { font-family:'Bungee',sans-serif; font-size:12px; letter-spacing:.5px; padding:9px 13px; border-radius:11px; border:2px solid var(--neon-yellow); background:linear-gradient(135deg,var(--neon-yellow),var(--neon-orange)); color:#000; cursor:pointer; white-space:nowrap; flex:0 0 auto; transition: transform .1s; }
  .shop-buy:active { transform:scale(0.92); }
  .shop-buy:disabled { opacity:.4; filter:grayscale(.6); cursor:not-allowed; }
  .shop-buy.owned { background:none; color:var(--neon-green); border-color:var(--neon-green); }

  /* skins grid */
  .skin-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:9px; width:100%; max-width:430px; }
  .skin-cell { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; background:rgba(255,255,255,0.04); border:2px solid rgba(255,255,255,0.14); border-radius:14px; padding:10px 6px; cursor:pointer; transition:transform .12s, border-color .15s; }
  .skin-cell:hover { transform:translateY(-3px); }
  .skin-cell.sel { border-color:var(--neon-green); box-shadow:0 0 16px rgba(57,255,20,0.35); }
  .skin-cell.locked { opacity:.85; }
  .skin-cell .imgbox { width:58px; height:58px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 8px rgba(255,255,255,0.25)); }
  .skin-cell .imgbox img { max-width:100%; max-height:100%; image-rendering: pixelated; image-rendering: crisp-edges; }
  .skin-cell .nm { font-family:'Bungee',sans-serif; font-size:9px; color:var(--neon-pink); text-align:center; letter-spacing:.3px; line-height:1.1; }
  .skin-cell .perk { font-family:'Bungee',sans-serif; font-size:8px; color:#8ad; text-align:center; }
  .skin-cell .lock { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:rgba(0,0,0,0.55); border-radius:12px; font-family:'Bungee',sans-serif; }
  .skin-cell .lock .px { font-size:20px; } .skin-cell .lock .cost { font-size:10px; color:var(--neon-yellow); }
  .skin-cell.sel .badge { position:absolute; top:5px; right:6px; font-size:11px; }

  /* settings rows */
  .set-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; max-width:430px; background:rgba(255,255,255,0.045); border:2px solid rgba(255,255,255,0.14); border-radius:14px; padding:13px 15px; }
  .set-label { font-family:'Bungee',sans-serif; font-size:13px; color:#dde; }
  .set-sub { font-family:'Bungee',sans-serif; font-size:9.5px; color:#89a; margin-top:2px; }
  .seg { display:flex; gap:4px; }
  .seg button { font-family:'Bungee',sans-serif; font-size:11px; padding:7px 11px; border-radius:9px; border:2px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); color:#bcd; cursor:pointer; }
  .seg button.on { background:var(--neon-cyan); color:#000; border-color:#fff; box-shadow:0 0 12px var(--neon-cyan); }
  .toggle { width:54px; height:30px; border-radius:16px; border:2px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.08); position:relative; cursor:pointer; transition: background .15s; flex:0 0 auto; }
  .toggle.on { background:var(--neon-green); border-color:#fff; box-shadow:0 0 12px var(--neon-green); }
  .toggle::after { content:''; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; transition: transform .15s; }
  .toggle.on::after { transform: translateX(24px); }

  .back-btn { margin-top:6px; padding:11px 30px; font-family:'Bungee Shade',cursive; font-size:18px; letter-spacing:2px; background:rgba(255,255,255,0.08); border:2px solid rgba(255,255,255,0.3); color:#fff; border-radius:12px; cursor:pointer; }
  .back-btn:active { transform:scale(0.95); }
  .wipe-btn { font-family:'Bungee',sans-serif; font-size:10px; color:#a55; background:none; border:none; cursor:pointer; text-decoration:underline; opacity:.7; }

  /* leaderboard */
  /* ===== leaderboard list ===== */
  .score-list { width:100%; max-width:400px; display:flex; flex-direction:column; gap:7px; overflow-y:auto; padding:2px 6px 2px 2px;
    scrollbar-width:thin; scrollbar-color:var(--neon-cyan) rgba(255,255,255,0.06); }
  .score-list::-webkit-scrollbar { width:8px; }
  .score-list::-webkit-scrollbar-track { background:rgba(255,255,255,0.05); border-radius:10px; }
  .score-list::-webkit-scrollbar-thumb { background:linear-gradient(var(--neon-cyan),var(--neon-pink)); border-radius:10px; border:2px solid rgba(0,0,0,0.25); }
  .score-row { display:flex; align-items:center; gap:11px; padding:9px 13px; border:1.5px solid rgba(255,255,255,0.12); border-radius:13px;
    background:linear-gradient(100deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)); transition:transform .12s ease, box-shadow .12s ease; }
  .score-row:hover { transform:translateY(-1px); }
  .score-rank { font-family:'Bungee Shade',cursive; font-size:15px; min-width:38px; height:30px; display:flex; align-items:center; justify-content:center; text-align:center; color:#cfe; flex-shrink:0; }
  .score-name { flex:1; min-width:0; font-family:'Bungee',sans-serif; font-size:15px; letter-spacing:1px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .score-pts { font-family:'Outfit','Bungee',sans-serif; font-weight:800; font-size:16px; color:var(--neon-yellow); text-shadow:0 0 8px rgba(255,247,0,0.4); flex-shrink:0; font-variant-numeric:tabular-nums; }
  /* podium: gold / silver / bronze */
  .score-row:nth-child(1) { border-color:#ffd84d; background:linear-gradient(100deg, rgba(255,216,77,0.22), rgba(255,216,77,0.04)); box-shadow:0 0 18px rgba(255,216,77,0.4); }
  .score-row:nth-child(1) .score-pts { color:#ffe785; text-shadow:0 0 10px rgba(255,216,77,0.6); }
  .score-row:nth-child(2) { border-color:#d6deea; background:linear-gradient(100deg, rgba(214,222,234,0.18), rgba(214,222,234,0.03)); box-shadow:0 0 13px rgba(214,222,234,0.3); }
  .score-row:nth-child(3) { border-color:#e8964e; background:linear-gradient(100deg, rgba(232,150,78,0.18), rgba(232,150,78,0.03)); box-shadow:0 0 13px rgba(232,150,78,0.3); }
  .score-empty { color:#99a; font-family:'Bungee',sans-serif; font-size:13px; padding:18px; text-align:center; letter-spacing:1px; }
  /* achievements / lifetime stats */
  .stat-grid { width:100%; max-width:430px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:4px; }
  .stat-cell { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:8px 6px; text-align:center; }
  .stat-cell .v { font-family:'Outfit',sans-serif; font-weight:800; font-size:16px; color:var(--neon-cyan); }
  .stat-cell .l { font-size:9px; letter-spacing:1px; color:#99a; text-transform:uppercase; margin-top:2px; }
  .goals-list { width:100%; max-width:430px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .goal-card { display:flex; align-items:center; gap:9px; padding:8px 10px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:11px; }
  .goal-card.locked { opacity:0.45; filter:grayscale(0.7); }
  .goal-card.unlocked { border-color:var(--neon-green); box-shadow:0 0 10px rgba(57,255,20,0.25); }
  .goal-ic { font-size:22px; width:28px; text-align:center; }
  .goal-name { font-family:'Bungee',sans-serif; font-size:11px; letter-spacing:0.5px; color:#fff; line-height:1.15; }
  /* game-over name entry */
  .go-name-row { display:none; flex-direction:column; align-items:center; gap:8px; margin:4px 0; }
  .go-name-label { font-size:13px; color:var(--neon-yellow); letter-spacing:1px; }
  .go-name-input { display:flex; gap:8px; }
  #goName { width:150px; padding:9px 12px; font-family:'Bungee',sans-serif; font-size:16px; letter-spacing:2px; text-align:center; text-transform:uppercase; background:rgba(0,0,0,0.5); border:2px solid var(--neon-cyan); border-radius:10px; color:#fff; outline:none; }
  .lb-tabs { display:flex; gap:6px; justify-content:center; margin-bottom:8px; flex-wrap:wrap; }
  .lb-tab { font-family:'Bungee',sans-serif; font-size:11px; letter-spacing:1px; padding:6px 12px; border-radius:9px; border:2px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.06); color:#cfe; cursor:pointer; }
  .lb-tab.on { border-color:var(--neon-yellow); color:var(--neon-yellow); box-shadow:0 0 10px rgba(255,247,0,0.35); }
  .score-row.me { border-color:var(--neon-green) !important; background:linear-gradient(100deg, rgba(57,255,20,0.20), rgba(57,255,20,0.04)) !important; box-shadow:0 0 16px rgba(57,255,20,0.55) !important; }
  .score-row.me .score-name { color:var(--neon-green); }
  .score-row.me .score-rank, .score-row.me .score-pts { color:var(--neon-green); text-shadow:0 0 8px rgba(57,255,20,0.5); }
  #goSave { padding:9px 18px; font-family:'Bungee Shade',cursive; font-size:15px; letter-spacing:1px; background:linear-gradient(135deg,var(--neon-green),var(--neon-cyan)); color:#000; border:2px solid var(--neon-yellow); border-radius:10px; cursor:pointer; }
  #goSave:active { transform:scale(0.94); }

  /* prominent main-menu leaderboard button */
  .lb-btn { padding:12px 26px; font-family:'Bungee Shade','Bangers',cursive; font-size:clamp(15px,4vw,20px); letter-spacing:2px; color:#1a0a00; background:linear-gradient(135deg,var(--neon-yellow),var(--neon-orange)); border:3px solid #fff; border-radius:13px; cursor:pointer; text-transform:uppercase; position:relative; overflow:hidden; box-shadow:0 0 22px rgba(255,247,0,0.45); animation:slideInUp .8s ease .64s both, rainbowBorder 2s linear infinite; transition:transform .12s; }
  .lb-btn:hover { transform:scale(1.05); }
  .lb-btn:active { transform:scale(0.95); }
  .lb-btn::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%); animation:shimmer 2.6s infinite; }

  /* "playing as" indicator on the menu */
  .who-row { display:flex; align-items:center; gap:8px; font-family:'Bungee',sans-serif; font-size:12px; letter-spacing:1px; color:#9aa; margin:2px 0; animation:slideInUp .8s ease .5s both; }
  .who-row b { color:var(--neon-yellow); text-shadow:0 0 8px var(--neon-yellow); font-size:14px; text-transform:uppercase; }
  .who-row button { background:none; border:none; color:var(--neon-cyan); font-family:'Bungee',sans-serif; font-size:11px; letter-spacing:1px; text-decoration:underline; cursor:pointer; padding:2px 4px; }

  /* name gate (shown before the main menu) */
  #nameGate { display:none; z-index:210; background:radial-gradient(circle at 50% 32%, #1a0033 0%, #06060e 72%); }
  #nameGate.show { display:flex; }
  .gate-title { font-family:'Bungee Shade','Bangers',cursive; font-size:clamp(28px,8vw,50px); text-align:center; line-height:.96; background:linear-gradient(90deg,var(--neon-green),var(--neon-cyan),var(--neon-pink),var(--neon-yellow)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 20px rgba(57,255,20,0.5)); animation:titlePulse 2s ease-in-out infinite; }
  .gate-sub { font-family:'Bungee',sans-serif; font-size:clamp(11px,3vw,14px); color:var(--neon-cyan); letter-spacing:1px; text-align:center; text-shadow:0 0 8px var(--neon-cyan); max-width:340px; }
  #gateNameInput { font-family:'Bungee',sans-serif; font-size:clamp(18px,5vw,26px); text-align:center; text-transform:uppercase; letter-spacing:3px; color:#fff; background:rgba(255,255,255,0.06); border:3px solid var(--neon-pink); border-radius:14px; padding:14px 18px; width:min(86%,340px); outline:none; box-shadow:0 0 22px rgba(255,110,199,0.35); animation:rainbowBorder 2.4s linear infinite; }
  #gateNameInput::placeholder { color:#7a7a92; }
  .gate-hint { font-family:'Bungee',sans-serif; font-size:10px; color:#778; letter-spacing:1px; }

  /* game-over leaderboard */
  .go-lb-title { font-family:'Bungee Shade','Bungee',sans-serif; font-size:14px; letter-spacing:2px; color:var(--neon-cyan); text-shadow:0 0 10px var(--neon-cyan); margin-top:4px; }
  .go-board { max-height:34vh; }

  /* toast notifications */
  #toastWrap { position:absolute; top:max(50px,calc(env(safe-area-inset-top) + 44px)); left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:7px; align-items:center; pointer-events:none; width:max-content; max-width:90%; }
  .toast { display:flex; align-items:center; gap:9px; background:rgba(10,10,20,0.92); border:2px solid var(--neon-yellow); border-radius:14px; padding:9px 15px; box-shadow:0 0 22px rgba(255,247,0,0.4); animation: toastIn .4s cubic-bezier(.2,1.4,.4,1) both; }
  .toast .tic { font-size:24px; filter:drop-shadow(0 0 6px currentColor); }
  .toast .tt { font-family:'Bungee',sans-serif; font-size:9px; letter-spacing:1px; color:var(--neon-yellow); }
  .toast .tn { font-family:'Bangers',cursive; font-size:16px; color:#fff; letter-spacing:1px; }
  @keyframes toastIn { 0% { transform:translateY(-26px) scale(0.8); opacity:0; } 100% { transform:translateY(0) scale(1); opacity:1; } }
  @keyframes toastOut { to { transform:translateY(-26px) scale(0.8); opacity:0; } }
  .toast.out { animation: toastOut .35s ease forwards; }

  /* boss HP bar */
  #bossBar { position:absolute; right:max(8px,env(safe-area-inset-right)); top:15%; height:60%; z-index:12; display:none; flex-direction:row; align-items:center; gap:6px; pointer-events:none; }
  #bossBar.active { display:flex; }
  .boss-name { writing-mode:vertical-rl; text-orientation:mixed; font-family:'Bungee Shade',cursive; font-size:12px; color:var(--neon-red); text-shadow:0 0 12px var(--neon-red),1px 1px 0 #000; letter-spacing:1px; max-height:100%; overflow:hidden; text-align:center; }
  .boss-name .boss-attack { writing-mode:vertical-rl; margin:6px 0 0; font-size:8px; }
  .boss-hp-track { position:relative; width:18px; height:100%; border:2px solid var(--neon-red); border-radius:11px; background:rgba(0,0,0,0.62); overflow:hidden; box-shadow:0 0 16px rgba(255,0,64,0.5); }
  .boss-hp-fill { position:absolute; left:0; bottom:0; width:100%; height:100%; background:linear-gradient(0deg,var(--neon-red),var(--neon-orange),var(--neon-yellow)); border-radius:9px; transition:height .2s ease; }
  .boss-attack { display:block; font-family:'Outfit',sans-serif; font-size:9px; letter-spacing:1px; color:#fff; opacity:0.85; -webkit-text-stroke:0; text-shadow:none; }

  /* stage progress strip */
  #stageStrip { display:flex; align-items:center; gap:8px; margin:0 0 6px; padding:3px 9px; background:rgba(0,0,0,0.42); border:1px solid rgba(255,255,255,0.16); border-radius:20px; backdrop-filter:blur(3px); align-self:flex-start; }
  #stageLabel { font-family:'Bungee Shade',cursive; font-size:11px; letter-spacing:1.5px; color:var(--neon-cyan); text-shadow:0 0 8px var(--neon-cyan); white-space:nowrap; }
  #stageProg { width:96px; height:7px; border-radius:6px; background:rgba(255,255,255,0.14); overflow:hidden; }
  #stageProg i { display:block; height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink)); transition:width .25s ease; box-shadow:0 0 8px var(--neon-cyan); }
  #stageStrip.boss { border-color:var(--neon-red); }
  #stageStrip.boss #stageLabel { color:var(--neon-red); text-shadow:0 0 8px var(--neon-red); }
  #stageStrip.boss #stageProg i { background:linear-gradient(90deg,var(--neon-red),var(--neon-orange)); animation:bossPulse .6s ease-in-out infinite alternate; }
  @keyframes bossPulse { from { opacity:0.6; } to { opacity:1; } }

  /* combo fever flair */
  #feverTag { position:absolute; top:36%; left:50%; transform:translate(-50%,-50%) scale(0); z-index:14; font-family:'Bungee Shade',cursive; font-size:clamp(20px,6vw,34px); color:var(--neon-orange); text-shadow:0 0 20px var(--neon-orange),2px 2px 0 #000; pointer-events:none; opacity:0; letter-spacing:3px; white-space:nowrap; }
  #feverTag.show { animation: feverPop 1.1s ease forwards; }
  @keyframes feverPop { 0% { transform:translate(-50%,-50%) scale(0.2) rotate(-8deg); opacity:0; } 25% { transform:translate(-50%,-50%) scale(1.15) rotate(3deg); opacity:1; } 70% { transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1; } 100% { transform:translate(-50%,-50%) scale(1.5); opacity:0; } }

  /* big juicy start button label tweak already present */

  /* ===================== MAIN-MENU BUTTON SCALING & POLISH =====================
     Give the primary menu buttons one consistent, responsive width + a solid
     min tap-height so they never look cramped, line up, and never overflow.
     Flavour elements are progressively dropped as the viewport gets shorter so
     the buttons always keep their breathing room. */
  #startScreen .big-btn,
  #startScreen .lb-btn {
    width: min(90%, 340px);
    min-height: 54px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    padding: 12px 16px;                         /* width + min-height drive size */
    text-align: center; white-space: normal; word-break: break-word; line-height: 1.15;
  }
  #startScreen .big-btn { font-size: clamp(18px, 5vw, 25px); }
  #startScreen .lb-btn  { min-height: 48px; font-size: clamp(14px, 4.2vw, 19px); }
  .nav-row { width: min(94%, 360px); }

  /* device-aware control hints: show only what applies to this input type */
  .ctrl-desktop, .ctrl-touch { display: none; }
  body.is-desktop .ctrl-desktop { display: block; }
  body.is-touch   .ctrl-touch   { display: block; }

  /* Progressive shedding of flavour as height shrinks, so the action buttons
     stay roomy on small phones (which is what looked cramped before). */
  @media (max-height: 820px) { .start-lore { display: none; } }
  @media (max-height: 740px) {
    #startScreen { gap: 9px; }
    .start-subtitle, .ramp-hint, .char-strip { display: none; }
    .start-title { font-size: clamp(28px, 7.5vw, 46px); }
  }
  @media (max-height: 680px) {
    #startScreen { gap: 10px; }
    .hero-row { display: none; }
    .start-title { font-size: clamp(26px, 7vw, 40px); }
  }
  @media (max-height: 560px) {
    .start-controls { display: none; }
    #startScreen { gap: 9px; padding-top: 10px; }
    .start-title { font-size: clamp(22px, 6vw, 34px); }
  }