* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
  html,body { width:100%; height:100%; overflow:hidden; background:#150c2e; font-family:'Fredoka',system-ui,sans-serif; touch-action:none; overscroll-behavior:none; position:fixed; }
  #stage { position:fixed; inset:0; touch-action:none; }
  svg { display:block; width:100%; height:100%; touch-action:none; }

  .hud { position:fixed; left:0; right:0; pointer-events:none; color:#fff; }
  #hudTop { top:0; padding:calc(10px + env(safe-area-inset-top)) 14px 0; }
  #enemyName { font-weight:600; font-size:15px; text-shadow:0 2px 0 rgba(0,0,0,.4); letter-spacing:.5px; display:flex; justify-content:space-between; align-items:baseline; }
  #waveLabel { font-size:12px; color:#b9a7ff; font-weight:500; }
  #enemyHearts { margin-top:6px; display:flex; flex-wrap:wrap; gap:1px 3px; line-height:1; filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
  #enemyHearts span { color:#ff5f6d; transition:opacity .18s, filter .18s, transform .25s cubic-bezier(.34,1.56,.64,1); display:inline-block; }
  #enemyHearts span::before { content:"\2665"; }
  #enemyHearts span.lost { opacity:.18; filter:grayscale(1); transform:scale(.85); }
  #enemyHearts[data-size="lg"] span { font-size:24px; }
  #enemyHearts[data-size="md"] span { font-size:19px; }
  #enemyHearts[data-size="sm"] { gap:0 2px; }
  #enemyHearts[data-size="sm"] span { font-size:15px; }
  #enemyHearts[data-size="xs"] { gap:0 1px; }
  #enemyHearts[data-size="xs"] span { font-size:12px; }
  #hudBottom { bottom:calc(12px + env(safe-area-inset-bottom)); padding:0 16px; display:flex; justify-content:space-between; align-items:center; }
  #hearts { font-size:26px; letter-spacing:2px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
  #hearts .lost { opacity:.22; filter:grayscale(1); }
  #combo { font-weight:700; font-size:24px; color:#ffd34d; text-shadow:0 2px 0 #7a4a00, 0 0 14px rgba(255,211,77,.6); opacity:0; transform:scale(.5); transition:transform .18s cubic-bezier(.34,1.8,.64,1), opacity .18s, color .3s, font-size .25s, text-shadow .3s; }
  #combo.show { opacity:1; transform:scale(1); }
  #combo.tier1 { font-size:28px; color:#ffd34d; text-shadow:0 2px 0 #7a4a00, 0 0 18px rgba(255,211,77,.85); }
  #combo.tier2 { font-size:32px; color:#ff9d3b; text-shadow:0 2px 0 #7a2f00, 0 0 22px rgba(255,157,59,.9); animation:comboPulse 1s ease-in-out infinite; }
  #combo.tier3 { font-size:36px; color:#ff6bd9; text-shadow:0 2px 0 #6b1258, 0 0 26px rgba(255,107,217,.95); animation:comboPulse .82s ease-in-out infinite; }
  #combo.tier4 { font-size:40px; color:#8affff; text-shadow:0 2px 0 #124a58, 0 0 30px rgba(138,255,255,1); animation:comboPulse .66s ease-in-out infinite; }
  #combo.tier5 { font-size:44px; color:#ffffff; text-shadow:0 0 12px #fff, 0 0 34px #ffd34d, 0 0 60px #ff6bd9; animation:comboRainbow .8s linear infinite; }
  @keyframes comboPulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
  @keyframes comboRainbow { 0%{filter:hue-rotate(0deg) drop-shadow(0 0 12px #fff)} 100%{filter:hue-rotate(360deg) drop-shadow(0 0 12px #fff)} }

  #banner { position:fixed; top:38%; left:0; right:0; text-align:center; pointer-events:none; opacity:0; }
  #banner .big { font-size:34px; font-weight:700; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.45), 0 0 24px rgba(150,110,255,.8); }
  #banner .small { font-size:16px; font-weight:500; color:#cdbcff; text-shadow:0 2px 0 rgba(0,0,0,.4); margin-top:2px; }
  #banner.pop { animation:bannerPop 2.2s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes bannerPop {
    0% { opacity:0; transform:scale(.4); }
    14% { opacity:1; transform:scale(1.08); }
    22% { transform:scale(1); }
    78% { opacity:1; transform:scale(1); }
    100% { opacity:0; transform:scale(1.05) translateY(-14px); }
  }

  .overlay { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 30%, rgba(60,35,120,.92), rgba(14,8,34,.96)); color:#fff; text-align:center; padding:24px 24px calc(24px + env(safe-area-inset-bottom)); z-index:10; overflow-y:auto; touch-action:pan-y; }
  .overlay.hidden { display:none; }
  .title { font-size:52px; font-weight:700; letter-spacing:1px; color:#ffd34d; text-shadow:0 4px 0 #8a4d00, 0 0 34px rgba(255,190,60,.55); animation:floaty 3s ease-in-out infinite; }
  @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
  .subtitle { font-size:17px; font-weight:500; color:#d7c9ff; margin-top:6px; max-width:320px; line-height:1.45; }
  .legend { display:grid; grid-template-columns:repeat(4,1fr); gap:8px 14px; margin:18px 0 4px; }
  .legend .cell { display:flex; flex-direction:column; align-items:center; gap:1px; font-size:10.5px; font-weight:500; color:#bfa9ff; }
  .legend .cell .dmg { font-size:11px; font-weight:700; opacity:.9; }
  .legend svg { width:38px; height:38px; }
  .modeLabel { font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#8f7fc4; margin-top:22px; }
  .modes { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; width:100%; max-width:360px; }
  .mode-card { pointer-events:auto; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); border-radius:16px; padding:11px 10px 10px; cursor:pointer; text-align:center; transition:transform .12s, border-color .12s, background .12s; }
  .mode-card:active { transform:scale(.96); }
  .mode-card .mLabel { font-size:17px; font-weight:700; color:#f2ecff; }
  .mode-card .mTag { display:inline-block; margin-top:3px; font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#8f7fc4; }
  .mode-card .mDesc { font-size:11px; font-weight:500; line-height:1.35; color:#a99bd6; margin-top:5px; min-height:28px; }
  .mode-card.sel { background:linear-gradient(rgba(255,190,60,.22),rgba(255,120,60,.12)); border-color:#ffbe2e; box-shadow:0 0 0 1px #ffbe2e, 0 6px 16px rgba(0,0,0,.35); }
  .mode-card.sel .mLabel { color:#ffe084; }
  .mode-card.sel .mTag { color:#ffbe6e; }
  .btn { pointer-events:auto; margin-top:20px; font-family:inherit; font-size:24px; font-weight:700; color:#5a2d00; background:linear-gradient(#ffe084,#ffb62e); border:none; border-radius:20px; padding:14px 54px; box-shadow:0 6px 0 #c97e00, 0 10px 18px rgba(0,0,0,.4); cursor:pointer; transition:transform .1s, box-shadow .1s; }
  .btn:active { transform:translateY(4px); box-shadow:0 2px 0 #c97e00, 0 4px 10px rgba(0,0,0,.4); }
  .stat { font-size:16px; color:#cdbcff; margin-top:4px; font-weight:500; }
  .bigscore { font-size:30px; font-weight:700; color:#fff; margin-top:14px; }

  @media (prefers-reduced-motion: reduce) {
    .title, #banner.pop { animation:none; opacity:1; }
  }

  /* ---- Debug menu ---- */
  .debugBtn { position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px; pointer-events:auto; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:1.5px; color:#cdbcff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:6px 10px; cursor:pointer; opacity:.7; transition:opacity .12s, background .12s; }
  .debugBtn:hover, .debugBtn:active { opacity:1; background:rgba(255,255,255,.16); }

  .debugOptions { width:100%; max-width:360px; margin-top:18px; display:flex; flex-direction:column; gap:10px; }
  .debugRow { pointer-events:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); border-radius:16px; padding:12px 14px; text-align:left; color:#f2ecff; font-family:inherit; cursor:pointer; }
  .debugRow:active { transform:scale(.98); }
  .debugRowBtn { border:none; border:2px solid rgba(255,255,255,.12); }
  .debugLabel { font-size:17px; font-weight:700; color:#f2ecff; }
  .debugDesc  { font-size:11.5px; font-weight:500; color:#a99bd6; margin-top:3px; }
  .chev { font-size:24px; color:#8f7fc4; font-weight:700; }

  /* iOS-style toggle */
  .toggle { position:relative; display:inline-block; width:46px; height:26px; flex:none; }
  .toggle input { opacity:0; width:0; height:0; }
  .toggle .slider { position:absolute; inset:0; background:rgba(255,255,255,.15); border-radius:26px; transition:background .18s; cursor:pointer; }
  .toggle .slider::before { content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#f2ecff; border-radius:50%; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.4); }
  .toggle input:checked + .slider { background:#ffbe2e; }
  .toggle input:checked + .slider::before { transform:translateX(20px); background:#fff; }

  /* ---- Compendium ---- */
  #compendium { justify-content:flex-start; padding-top:calc(20px + env(safe-area-inset-top)); }
  .compSection { width:100%; max-width:520px; margin-top:14px; }
  .compHeading { font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#8f7fc4; margin-bottom:8px; text-align:left; padding-left:2px; }
  .compGrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
  .compGridBg { grid-template-columns:repeat(2, 1fr); }
  .compCell { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:8px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; overflow:hidden; }
  .compCell svg { width:100%; height:auto; display:block; }
  .compCell .compName { font-size:11px; font-weight:600; color:#e6dcff; text-align:center; line-height:1.2; }
  .compCell .compSub { font-size:9.5px; font-weight:500; color:#8f7fc4; text-align:center; letter-spacing:.5px; text-transform:uppercase; }
  .compGridBg .compCell { padding:0; }
  .compGridBg .compCell svg { aspect-ratio: 400 / 720; width:100%; height:auto; }
  .compGridBg .compName { padding:6px 4px 8px; }