:root{
  --bg:#05060a;
  --accent:#33e0a1;
  --accent2:#ff3b5c;
  --gold:#ffd23f;
  --ink:#eaf6f2;
  --ui:rgba(8,14,18,.62);
  --ui-line:rgba(120,255,210,.28);
  --font-display:'Anton','Oswald',Impact,system-ui,sans-serif;  /* heavy cinematic display */
  --font-ui:'Oswald',system-ui,-apple-system,Roboto,Arial,sans-serif; /* condensed survival UI */
  font-family: var(--font-ui);
  letter-spacing:.01em;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--ink);}
body{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;}

#stage{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 0%, #0a141c 0%, #05060a 70%);}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto;}

.hidden{display:none !important;}

/* ---------------- HUD ---------------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5;
  font-variant-numeric:tabular-nums;}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:flex-start;padding:10px 12px;gap:10px;}
.hud-left{display:flex;flex-direction:column;gap:7px;min-width:200px;}
.bar-wrap{display:flex;flex-direction:column;gap:2px;}
.bar-label{font-size:10px;letter-spacing:.12em;font-weight:800;opacity:.85;text-shadow:0 1px 3px #000;}
.bar{width:210px;max-width:38vw;height:13px;background:rgba(0,0,0,.5);border:1px solid var(--ui-line);
  border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.5);}
.bar-fill{height:100%;width:100%;border-radius:7px;transition:width .14s linear;}
.bar-fill.hp{background:linear-gradient(90deg,#ff3b5c,#ff7a3b);}
.bar-fill.xp{background:linear-gradient(90deg,#33e0a1,#7af0ff);}
.bar-fill.san{background:linear-gradient(90deg,#ff2a4a,#b06bff,#7af0ff);}
.sanitybar{height:9px;}
.sanitybar.panic{animation:sanPanic .5s ease-in-out infinite;box-shadow:0 0 10px rgba(255,40,60,.7);}
@keyframes sanPanic{0%,100%{box-shadow:0 0 6px rgba(255,40,60,.4);}50%{box-shadow:0 0 14px rgba(255,40,60,.9);}}

.hud-center{text-align:center;flex:1;}
#waveTag{font-family:var(--font-display);font-size:26px;font-weight:400;letter-spacing:.06em;text-shadow:0 2px 10px #000, 0 0 16px rgba(255,210,63,.4);}
#phaseTag{font-size:12px;font-weight:800;letter-spacing:.15em;opacity:.92;margin-top:1px;text-shadow:0 1px 4px #000;}
#modTag{display:none;margin:3px auto 0;font-size:11px;font-weight:800;letter-spacing:.14em;padding:2px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid currentColor;background:rgba(0,0,0,.32);text-shadow:0 1px 3px #000;width:max-content;max-width:60vw;overflow:hidden;text-overflow:ellipsis;}

.hud-right{display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right;}
.stat{display:flex;gap:8px;align-items:baseline;font-weight:800;font-size:15px;text-shadow:0 1px 4px #000;}
.stat-k{font-size:9px;letter-spacing:.14em;opacity:.7;font-weight:700;}
#scoreNum{color:var(--gold);}
#killNum{color:#ff8a8a;}
#allyNum{color:var(--accent);}

#weaponTag{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;
  background:var(--ui);border:1px solid var(--ui-line);border-radius:10px;padding:7px 12px;
  font-weight:800;letter-spacing:.04em;backdrop-filter:blur(4px);text-shadow:0 1px 3px #000;}
#wpnIcon{font-size:18px;}

#pauseBtn{position:absolute;right:12px;bottom:12px;pointer-events:auto;width:46px;height:46px;
  border-radius:12px;background:var(--ui);border:1px solid var(--ui-line);color:var(--ink);
  font-size:20px;cursor:pointer;backdrop-filter:blur(4px);}
#pauseBtn:active{transform:scale(.94);}

/* persistent sound toggles — bottom-right, just left of the pause button; above every screen (z>20) */
#soundCtl{position:absolute;right:66px;bottom:13px;z-index:30;display:flex;gap:8px;}
.snd-btn{width:42px;height:42px;border-radius:11px;background:var(--ui);border:1px solid var(--ui-line);
  color:var(--ink);font-size:19px;line-height:1;cursor:pointer;pointer-events:auto;backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.4);
  transition:transform .06s ease, opacity .12s ease;}
.snd-btn:active{transform:scale(.92);}
/* "off" state: dim + a blood-red strike so it reads as disabled at a glance */
.snd-btn.off{opacity:.5;border-color:rgba(255,59,92,.55);position:relative;}
.snd-btn.off::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:2px;border-radius:2px;
  background:var(--accent2);transform:rotate(-18deg);box-shadow:0 0 6px rgba(255,59,92,.6);}

#dashBtn{position:absolute;right:18px;bottom:74px;z-index:7;pointer-events:auto;
  width:70px;height:70px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 40% 34%, rgba(122,240,255,.34), rgba(43,191,142,.26));
  border:1.5px solid rgba(160,255,225,.34);color:rgba(225,255,248,.82);font-weight:800;font-size:13px;
  letter-spacing:.08em;box-shadow:0 3px 12px rgba(0,0,0,.32);transition:transform .06s, opacity .12s;}
#dashBtn:active{transform:scale(.9);background:radial-gradient(circle at 40% 34%, rgba(122,240,255,.6), rgba(43,191,142,.5));}
#dashBtn.cooling{background:rgba(18,28,34,.28);color:rgba(120,160,150,.6);border-color:rgba(120,255,210,.14);box-shadow:none;}

/* PULSE active ability button (bottom-right) */
#abilityBtn{position:absolute;right:20px;bottom:88px;z-index:7;pointer-events:auto;cursor:pointer;
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 34%, rgba(122,240,255,.42), rgba(60,120,200,.3));
  border:1.5px solid rgba(160,225,255,.5);box-shadow:0 0 16px rgba(122,240,255,.35);transition:transform .06s;}
#abilityBtn .ab-ic{font-size:26px;color:#eaffff;text-shadow:0 0 8px rgba(122,240,255,.8);line-height:1;}
#abilityBtn .ab-cd{position:absolute;font-size:18px;font-weight:800;color:#eaf6ff;display:none;}
#abilityBtn:active{transform:scale(.9);}
#abilityBtn.ready{animation:abReady 1.3s ease-in-out infinite;}
#abilityBtn.cooling{background:rgba(18,28,34,.3);border-color:rgba(120,180,220,.18);box-shadow:none;}
#abilityBtn.cooling .ab-ic{opacity:.25;} #abilityBtn.cooling .ab-cd{display:block;color:rgba(200,225,245,.8);}
@keyframes abReady{0%,100%{box-shadow:0 0 12px rgba(122,240,255,.35);}50%{box-shadow:0 0 22px rgba(122,240,255,.7);}}

/* banner sits in a clear band BELOW the wave/phase/mutator stack so it never collides with them */
#bannerWrap{position:absolute;top:99px;left:0;right:0;text-align:center;pointer-events:none;z-index:8;}
#banner{display:inline-block;font-family:var(--font-display);font-size:clamp(22px,4.4vw,34px);font-weight:400;letter-spacing:.06em;
  max-width:74vw;opacity:0;transform:translateY(-10px) scale(.9);transition:none;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 3px 18px #000, 0 0 28px currentColor;}
#banner.show{animation:bannerPop 2.1s ease forwards;}
@keyframes bannerPop{
  0%{opacity:0;transform:translateY(-14px) scale(.85);}
  14%{opacity:1;transform:translateY(0) scale(1.04);}
  78%{opacity:1;transform:translateY(0) scale(1);}
  100%{opacity:0;transform:translateY(-8px) scale(1);}
}

/* ---------------- Touch ---------------- */
#touch{position:absolute;inset:0;z-index:6;pointer-events:none;}
#stickBase{position:absolute;width:140px;height:140px;border-radius:50%;
  border:1.5px solid rgba(120,255,210,.20);background:rgba(0,0,0,.10);
  display:none;transform:translate(-50%,-50%);backdrop-filter:blur(1px);}
#stickKnob{position:absolute;top:50%;left:50%;width:58px;height:58px;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%, rgba(122,240,255,.5), rgba(43,191,142,.38));
  border:1px solid rgba(160,255,225,.3);box-shadow:0 0 12px rgba(120,255,210,.28);}
/* right stick — aim & fire (warm, to read distinct from the cool move stick) */
#aimBase{position:absolute;width:140px;height:140px;border-radius:50%;
  border:1.5px solid rgba(255,150,120,.22);background:rgba(0,0,0,.10);
  display:none;transform:translate(-50%,-50%);backdrop-filter:blur(1px);}
#aimKnob{position:absolute;top:50%;left:50%;width:58px;height:58px;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%, rgba(255,180,150,.5), rgba(255,90,90,.4));
  border:1px solid rgba(255,185,165,.32);box-shadow:0 0 12px rgba(255,120,90,.3);}

#hint{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);z-index:7;
  pointer-events:none;text-align:center;font-weight:800;letter-spacing:.08em;
  color:#eaf6f2;text-shadow:0 2px 8px #000;opacity:0;}
#hint.show{animation:hintPulse 3.4s ease forwards;}
#hint .big{font-size:20px;color:var(--accent);}
#hint .sm{font-size:13px;opacity:.85;margin-top:4px;}
#hint .ring{width:84px;height:84px;border-radius:50%;border:2px dashed rgba(120,255,210,.5);
  margin:0 auto 10px;position:relative;}
#hint .ring::after{content:"";position:absolute;inset:0;margin:auto;width:30px;height:30px;
  border-radius:50%;background:radial-gradient(circle at 40% 35%,#7af0ff,#2bbf8e);
  animation:hintDrag 1.4s ease-in-out infinite;}
@keyframes hintDrag{0%,100%{transform:translate(-14px,8px);}50%{transform:translate(14px,-8px);}}
@keyframes hintPulse{0%{opacity:0;}12%{opacity:1;}80%{opacity:1;}100%{opacity:0;}}

/* First-run TWIN-STICK coach (mobile) — ghost joysticks at the thumb positions */
#stickHelp{position:absolute;inset:0;z-index:8;pointer-events:none;animation:shFade .45s ease both;}
#stickHelp.hidden{display:none;}
.sh-stick{position:absolute;bottom:22%;text-align:center;}
.sh-left{left:16%;}
.sh-right{right:16%;}
.sh-ring{width:90px;height:90px;border-radius:50%;border:3px dashed rgba(255,255,255,.55);position:relative;margin:0 auto;
  box-shadow:0 0 22px rgba(255,40,48,.35),inset 0 0 18px rgba(0,0,0,.45);animation:shPulse 1.8s ease-in-out infinite;}
.sh-knob{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:25px;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.95),rgba(255,205,205,.5));
  box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 14px rgba(255,60,68,.55);
  transform:translate(-50%,-50%);animation:shCircle 2.4s ease-in-out infinite;}
.sh-label{margin-top:16px;font-weight:800;letter-spacing:.14em;font-size:14px;color:#fff;
  text-shadow:0 2px 8px #000,0 0 10px rgba(255,40,48,.6);}
.sh-tip{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);font-weight:700;font-size:13px;
  letter-spacing:.05em;color:#ffe2e2;text-shadow:0 2px 8px #000;white-space:nowrap;max-width:92vw;}
@keyframes shPulse{0%,100%{border-color:rgba(255,255,255,.42);box-shadow:0 0 16px rgba(255,40,48,.25),inset 0 0 18px rgba(0,0,0,.45);}
  50%{border-color:rgba(255,255,255,.88);box-shadow:0 0 30px rgba(255,52,60,.6),inset 0 0 18px rgba(0,0,0,.45);}}
@keyframes shCircle{0%{transform:translate(-50%,-50%) translate(0,-17px);}25%{transform:translate(-50%,-50%) translate(17px,0);}
  50%{transform:translate(-50%,-50%) translate(0,17px);}75%{transform:translate(-50%,-50%) translate(-17px,0);}100%{transform:translate(-50%,-50%) translate(0,-17px);}}
@keyframes shFade{from{opacity:0;}to{opacity:1;}}
@media(max-height:430px){ .sh-ring{width:74px;height:74px;} .sh-knob{width:40px;height:40px;font-size:22px;} .sh-stick{bottom:24%;} }

/* Scroll cue — shows ONLY when a menu / grid has more content below the fold */
.scroll-cue{position:fixed;pointer-events:none;z-index:21;display:none;align-items:flex-end;justify-content:center;}
.scroll-cue .sc-fade{position:absolute;left:0;right:0;bottom:0;height:100%;
  background:linear-gradient(to bottom,rgba(8,2,4,0),rgba(8,2,4,.9));}
.scroll-cue .sc-chev{position:relative;margin-bottom:5px;font:800 12px/1 'Oswald',sans-serif;letter-spacing:.16em;
  color:#ffe2e2;background:rgba(150,8,20,.66);border:1px solid rgba(255,60,68,.6);border-radius:999px;padding:4px 13px;
  text-shadow:0 1px 3px #000;box-shadow:0 0 14px rgba(228,20,30,.45);animation:scBob 1.25s ease-in-out infinite;}
@keyframes scBob{0%,100%{transform:translateY(0);opacity:.92;}50%{transform:translateY(4px);opacity:1;}}

/* ---------------- Screens ---------------- */
.screen{position:absolute;inset:0;z-index:20;display:flex;align-items:safe center;justify-content:center;
  padding:24px;text-align:center;overflow-y:auto;
  background:radial-gradient(120% 100% at 50% 30%, rgba(8,20,26,.55) 0%, rgba(3,5,9,.86) 75%);
  backdrop-filter:blur(3px);}
.menu-inner{max-width:560px;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:fadeUp .5s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.title-kicker{font-family:var(--font-ui);font-size:13px;letter-spacing:.5em;color:var(--accent);
  font-weight:600;opacity:.9;text-transform:uppercase;}
.title{font-family:var(--font-display);font-weight:400;line-height:.84;letter-spacing:.012em;
  font-size:clamp(58px,15.5vw,132px);text-transform:uppercase;color:#f4efe6;
  text-shadow:0 4px 0 #1a0509, 0 0 40px rgba(255,59,92,.35),
    3px 0 0 rgba(255,59,92,.55), -3px 0 0 rgba(51,224,161,.3);}
.title span{display:block;color:var(--accent2);
  text-shadow:0 5px 0 #260006, 0 0 50px rgba(255,59,92,.7),
    3px 0 0 rgba(120,16,28,.7), -2px 0 0 rgba(255,150,160,.25);
  -webkit-text-stroke:1.5px rgba(0,0,0,.3);}

/* ---- GORY MENU LOGO: bone-white NIGHTMARE blushed with blood; wet-blood ISLAND; splatter + drips add the gore ---- */
#menu .title{position:relative;isolation:isolate;color:#f6efe7;
  /* dark blood drop + red glow + a fresh-blood smear bleeding up the bottom of the letters */
  text-shadow:0 4px 0 #1a0509, 0 0 42px rgba(255,40,60,.45),
    0 7px 5px rgba(150,8,20,.6), 3px 0 0 rgba(229,18,48,.6), -3px 0 0 rgba(51,224,161,.28);}
#menu .title span{color:#e01230;        /* ISLAND = fresh arterial blood, with a wet sheen up top */
  text-shadow:0 5px 0 #2a0006, 0 0 48px rgba(255,40,60,.7),
    0 8px 6px rgba(120,4,14,.7), 0 -2px 3px rgba(255,150,160,.45),
    3px 0 0 rgba(120,16,28,.6), -2px 0 0 rgba(255,150,160,.22);
  -webkit-text-stroke:1.4px rgba(30,0,4,.4);}
/* spatter smeared behind the wordmark */
#menu .title::before{content:"";position:absolute;inset:-14% -8% -34% -8%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38px 30px at 16% 30%, rgba(125,6,16,.55), rgba(125,6,16,0) 70%),
    radial-gradient(58px 44px at 72% 22%, rgba(150,8,20,.5), rgba(150,8,20,0) 72%),
    radial-gradient(30px 24px at 45% 58%, rgba(110,4,14,.5), rgba(110,4,14,0) 70%),
    radial-gradient(46px 70px at 30% 86%, rgba(140,6,18,.45), rgba(140,6,18,0) 72%),
    radial-gradient(40px 56px at 84% 80%, rgba(120,6,16,.42), rgba(120,6,16,0) 72%),
    radial-gradient(12px 12px at 58% 96%, rgba(150,8,20,.55), rgba(150,8,20,0) 70%),
    radial-gradient(9px 9px at 9% 70%, rgba(150,8,20,.5), rgba(150,8,20,0) 70%);
  filter:blur(.4px);}
/* drips hanging off the bottom of ISLAND, oozing down */
#menu .title .logo-drips{position:absolute;left:3%;right:3%;width:94%;bottom:-0.40em;height:0.52em;
  overflow:visible;pointer-events:none;z-index:1;filter:drop-shadow(0 3px 4px rgba(60,0,6,.55));}
.title.sm{font-size:clamp(40px,9vw,74px);}
.title.dead{color:var(--accent2);text-shadow:0 4px 0 #200,0 0 55px rgba(255,59,92,.75);}
.tagline{font-family:var(--font-ui);max-width:470px;font-size:16px;line-height:1.5;opacity:.92;
  color:#cfe9e1;letter-spacing:.02em;}

.btn-main{margin-top:6px;pointer-events:auto;cursor:pointer;border:none;
  font-size:19px;font-weight:900;letter-spacing:.06em;color:#04130d;
  padding:15px 30px;border-radius:14px;
  background:linear-gradient(180deg,#5cf2bb,#1fc78c);
  box-shadow:0 8px 0 #0c5a40, 0 14px 30px rgba(0,0,0,.5);
  transition:transform .08s ease, box-shadow .08s ease;}
.btn-main:hover{transform:translateY(-1px);}
.btn-main:active{transform:translateY(6px);box-shadow:0 2px 0 #0c5a40,0 6px 16px rgba(0,0,0,.5);}
.btn-ghost{pointer-events:auto;cursor:pointer;margin-top:4px;background:transparent;
  border:1px solid var(--ui-line);color:#cfe9e1;font-weight:700;letter-spacing:.05em;
  padding:11px 20px;border-radius:12px;}
.btn-ghost:active{transform:scale(.96);}

/* subtle "reset all progress" link at the foot of the menu + its red danger-confirm button */
.reset-link{margin-top:10px;background:none;border:none;cursor:pointer;pointer-events:auto;
  font-family:var(--font-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(207,233,225,.4);transition:color .15s;}
.reset-link:hover{color:var(--accent2);}
.btn-main.danger{background:linear-gradient(180deg,#ff5c6e,#c4122b);box-shadow:0 8px 0 #6e0a18, 0 14px 30px rgba(0,0,0,.5);color:#fff;}
.btn-main.danger:active{box-shadow:0 2px 0 #6e0a18,0 6px 16px rgba(0,0,0,.5);}

/* DAILY NIGHTMARE — one seeded island a day, the same for everyone (purple "event" accent) */
.daily-btn{margin-top:8px;pointer-events:auto;cursor:pointer;border:2px solid #b06bff;
  background:linear-gradient(180deg,rgba(176,107,255,.22),rgba(120,40,200,.28));color:#e9d6ff;
  font-family:var(--font-ui);font-weight:800;letter-spacing:.06em;font-size:15px;padding:11px 22px;border-radius:13px;
  box-shadow:0 0 16px rgba(176,107,255,.4);transition:transform .08s ease, box-shadow .12s;}
.daily-btn:hover{box-shadow:0 0 22px rgba(176,107,255,.6);}
.daily-btn:active{transform:scale(.97);}
.daily-btn.done{border-color:rgba(176,107,255,.45);background:rgba(120,40,200,.15);color:#bfa6e0;box-shadow:none;}

/* ---- DIFFICULTY selector (menu, before play): NORMAL = green, HARD = blood-red ---- */
.diff-row{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:8px;}
.diff-label{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.32em;color:#9fb6c2;opacity:.85;}
.diff-seg{display:flex;gap:8px;}
.seg-btn{pointer-events:auto;cursor:pointer;background:transparent;border:1.5px solid var(--ui-line);
  color:#cfe9e1;font-family:var(--font-ui);font-weight:800;letter-spacing:.08em;font-size:14px;
  padding:8px 22px;border-radius:11px;transition:transform .08s ease, border-color .12s, color .12s, background .12s, box-shadow .12s;}
.seg-btn:active{transform:scale(.95);}
.seg-btn.active{border-color:var(--accent);color:#04130d;background:linear-gradient(180deg,#5cf2bb,#1fc78c);
  box-shadow:0 0 14px rgba(51,224,161,.4);}
/* HARD selected — red overrides the green active treatment */
#diffHard.active{border-color:var(--accent2);color:#fff;background:linear-gradient(180deg,#ff5c6e,#c4122b);
  box-shadow:0 0 16px rgba(255,59,92,.5);}
#diffHard{color:#ff9aa8;border-color:rgba(255,59,92,.4);}   /* idle HARD hints red even when not selected */

/* "Share my score" — ghost button tuned toward the cyan share-action language */
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-color:rgba(122,240,255,.5);color:#bff0ff;font-weight:800;}
.share-btn:active{transform:scale(.96);}

/* "Buy me a coffee" — the recognisable BMC yellow, on the menu + game-over screens */
.coffee-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;cursor:pointer;
  pointer-events:auto;text-decoration:none;font-family:var(--font-ui);font-weight:800;font-size:14px;letter-spacing:.02em;
  color:#14110a;background:#ffc439;border:2px solid #14110a;padding:11px 22px;border-radius:13px;
  box-shadow:0 5px 0 #b07d12, 0 10px 22px rgba(0,0,0,.45);transition:transform .08s ease, box-shadow .08s ease;}
.coffee-btn:hover{transform:translateY(-1px);}
.coffee-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b07d12, 0 4px 12px rgba(0,0,0,.4);}

.how{margin-top:10px;display:grid;gap:6px;text-align:left;width:100%;max-width:420px;
  background:var(--ui);border:1px solid var(--ui-line);border-radius:14px;padding:14px 16px;}
.how-row{font-size:13px;opacity:.92;}
.how-row b{color:var(--gold);letter-spacing:.08em;display:inline-block;min-width:58px;}

.best-line{margin-top:8px;font-size:14px;font-weight:800;letter-spacing:.06em;color:var(--gold);
  text-shadow:0 1px 4px #000;min-height:18px;}

/* level up cards */
.lvl-inner{width:100%;max-width:820px;animation:fadeUp .35s ease;}
.lvl-title{font-family:var(--font-display);font-size:clamp(34px,7.5vw,58px);font-weight:400;color:var(--accent);
  text-shadow:0 0 34px rgba(51,224,161,.5);letter-spacing:.04em;text-transform:uppercase;}
.lvl-sub{opacity:.85;margin:4px 0 18px;letter-spacing:.16em;font-size:12px;}
.cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.card{pointer-events:auto;cursor:pointer;width:200px;min-height:200px;
  background:linear-gradient(180deg, rgba(14,26,30,.95), rgba(6,12,16,.95));
  border:1px solid var(--ui-line);border-radius:16px;padding:18px 16px;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.5);transition:transform .1s ease, border-color .1s ease, box-shadow .1s ease;}
.card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 30px rgba(51,224,161,.25);}
.card .ic{font-size:42px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.card .nm{font-weight:900;font-size:17px;letter-spacing:.03em;}
.card .ds{font-size:12.5px;opacity:.82;line-height:1.45;}
.card .rar{font-size:10px;letter-spacing:.18em;font-weight:800;opacity:.85;margin-top:auto;}
.card.r-common .rar{color:#a7c4bd;} .card.r-common{border-color:rgba(150,180,170,.4);}
.card.r-rare .rar{color:#7af0ff;} .card.r-rare{border-color:rgba(120,240,255,.5);}
.card.r-epic .rar{color:#d08bff;} .card.r-epic{border-color:rgba(208,139,255,.6);}
.card.r-legend .rar{color:var(--gold);} .card.r-legend{border-color:rgba(255,210,63,.7);
  box-shadow:0 0 26px rgba(255,210,63,.22),0 12px 30px rgba(0,0,0,.5);}

/* non-blocking slow-mo level-up pick (bottom-centre, game keeps running) */
#levelpick{position:absolute;left:0;right:0;bottom:84px;z-index:8;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:lpIn .18s ease;}
@keyframes lpIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.lp-title{font-size:13px;font-weight:900;letter-spacing:.12em;color:var(--accent);
  text-shadow:0 2px 8px #000;}
.lp-title span{color:#cfe9e1;opacity:.7;font-weight:700;}
.lp-cards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 8px;}
.lp-card{pointer-events:auto;cursor:pointer;width:150px;
  background:linear-gradient(180deg,rgba(14,26,30,.96),rgba(6,12,16,.96));
  border:1px solid var(--ui-line);border-radius:12px;padding:9px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  box-shadow:0 10px 26px rgba(0,0,0,.6);transition:transform .08s,border-color .08s;}
.lp-card:hover{transform:translateY(-4px);border-color:var(--accent);}
.lp-card .ic{font-size:26px;line-height:1;}
.lp-card .nm{font-weight:900;font-size:13px;}
.lp-card .ds{font-size:11px;opacity:.82;line-height:1.3;}
.lp-card .rar{font-size:9px;letter-spacing:.16em;font-weight:800;}
.lp-card.r-common .rar{color:#a7c4bd;} .lp-card.r-rare{border-color:rgba(120,240,255,.5);} .lp-card.r-rare .rar{color:#7af0ff;}
.lp-card.r-epic{border-color:rgba(208,139,255,.6);} .lp-card.r-epic .rar{color:#d08bff;}
.lp-card.r-legend{border-color:rgba(255,210,63,.7);box-shadow:0 0 22px rgba(255,210,63,.25),0 10px 26px rgba(0,0,0,.6);}
.lp-card.r-legend .rar{color:var(--gold);}
@media (max-width:520px){
  #levelpick{bottom:96px;}
  .lp-card{width:43%;min-width:128px;}
}

.go-stats{display:flex;flex-direction:column;align-items:center;gap:6px;margin:8px 0 4px;
  font-size:16px;background:var(--ui);border:1px solid var(--ui-line);border-radius:14px;padding:14px 24px;}
.go-stats .k{opacity:.7;font-size:11px;letter-spacing:.12em;}
.go-stats .v{font-weight:900;font-size:22px;}
.go-stats .row{display:flex;flex-direction:column;align-items:center;gap:1px;}
.go-rows{display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;}
.go-grade{font-family:var(--font-display);font-size:58px;line-height:.78;text-align:center;text-shadow:0 3px 0 #1a0509,0 0 26px currentColor;}
.go-grade-sub{display:block;font-family:var(--font-ui);font-size:9px;letter-spacing:.34em;color:#cfe9e1;opacity:.55;margin-top:1px;}
.go-cause{font-family:var(--font-ui);font-size:12.5px;color:#ff8a8a;letter-spacing:.03em;margin-top:2px;}
.go-build{font-family:var(--font-ui);font-weight:800;font-size:13px;color:#b6ff6e;letter-spacing:.08em;}
.go-newbest{font-family:var(--font-display);font-size:19px;color:#ffd23f;text-shadow:0 0 16px rgba(255,210,63,.7);animation:nbpulse .55s ease-in-out infinite alternate;}
.go-rankup{font-family:var(--font-ui);font-weight:800;font-size:13px;color:#ffd23f;letter-spacing:.06em;}
@keyframes nbpulse{from{transform:scale(1);}to{transform:scale(1.09);}}

/* meta: gold, menu buttons, shop, heroes */
#goldBar{font-size:18px;font-weight:900;color:var(--gold);letter-spacing:.04em;
  text-shadow:0 2px 8px #000;margin-top:-2px;}
#goldBar span{font-variant-numeric:tabular-nums;}
.menu-btns{display:flex;gap:12px;}
.char-line{font-size:13px;opacity:.85;color:#cfe9e1;}
.char-line b{color:var(--accent);}

.shop-inner{width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:12px;
  animation:fadeUp .35s ease;max-height:92vh;}
.shop-gold{font-size:17px;font-weight:900;color:var(--gold);letter-spacing:.05em;text-shadow:0 1px 4px #000;}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;
  overflow-y:auto;padding:4px;}
.shop-card{pointer-events:auto;cursor:pointer;background:linear-gradient(180deg,rgba(14,26,30,.95),rgba(6,12,16,.95));
  border:1px solid var(--ui-line);border-radius:14px;padding:12px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:transform .1s,border-color .1s;}
.shop-card:hover{transform:translateY(-3px);border-color:var(--accent);}
.shop-card.maxed{opacity:.7;cursor:default;border-color:rgba(255,210,63,.5);}
.shop-card.cant{opacity:.55;}
.shop-card .ic{font-size:26px;line-height:1;}
.shop-card .nm{font-weight:900;font-size:14px;}
.shop-card .ds{font-size:11.5px;opacity:.82;line-height:1.3;min-height:30px;}
.shop-card .pips{display:flex;gap:3px;justify-content:center;margin:2px 0;}
.shop-card .pip{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15);}
.shop-card .pip.on{background:var(--accent);box-shadow:0 0 6px var(--accent);}
.shop-card .cost{font-weight:900;font-size:13px;color:var(--gold);}
.shop-card .cost.maxed{color:var(--accent);}

.hero-card{position:relative;}
.hero-card.locked{filter:grayscale(.7);opacity:.7;}
.hero-card.selected{border-color:var(--gold)!important;box-shadow:0 0 24px rgba(255,210,63,.3),0 12px 30px rgba(0,0,0,.5);}
.hero-card .tag{font-size:11px;font-weight:800;letter-spacing:.1em;margin-top:auto;}
.hero-card .tag.sel{color:var(--gold);} .hero-card .tag.lock{color:#ff8a8a;} .hero-card .tag.own{color:var(--accent);}

/* ---------- Nightmare Island horror skin over the BADMAN GAMES studio intro ---------- */
.studio-intro{ background:#0a0205 !important; }
/* blood vignette + sickly pulse layered on top of the studio sting */
.studio-intro::before{ content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(125% 100% at 50% 47%, rgba(0,0,0,0) 46%, rgba(72,0,12,.78) 100%);
  animation:niIntroDread 3.2s ease-in-out infinite; }
@keyframes niIntroDread{0%,100%{opacity:.82;}50%{opacity:1;}}
.studio-intro .si-corner{ border-color:#ff3b5c !important; }
.studio-intro .si-presents{ color:#ff3b5c !important; }
.studio-intro .si-enter{ border-color:#ff3b5c !important; color:#ffd7de !important;
  box-shadow:0 0 18px rgba(255,59,92,.4),inset 0 0 18px rgba(255,59,92,.14) !important; }

/* mobile landscape gate */
#rotate{position:fixed;inset:0;z-index:300;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:28px;
  background:radial-gradient(120% 100% at 50% 30%, #0c1620 0%, #05060a 78%);color:var(--ink);}
#rotate.show{display:flex;}
#rotate .phone{font-size:72px;line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
  animation:rotateHint 2s ease-in-out infinite;transform-origin:50% 50%;}
@keyframes rotateHint{0%,28%{transform:rotate(0);}58%,100%{transform:rotate(-90deg);}}
#rotate .rt{font-size:24px;font-weight:900;letter-spacing:.08em;color:var(--accent2);
  text-shadow:0 0 26px rgba(255,59,92,.45);}
#rotate .rs{font-size:14px;line-height:1.55;opacity:.85;max-width:340px;color:#cfe9e1;}

.supply-hint{font-size:12px;opacity:.7;color:#cfe9e1;max-width:420px;text-align:center;}
#supply .shop-grid{grid-template-columns:repeat(4,1fr);}

@media (max-width:520px){
  .shop-grid{grid-template-columns:repeat(2,1fr)!important;}
}

@media (max-width:520px){
  .card{width:46%;min-width:140px;min-height:auto;padding:14px 10px;}
  .card .ic{font-size:34px;}
  .bar{width:160px;}
  .hud-left{min-width:150px;}
  .stat{font-size:13px;}
}

/* Short / landscape-phone viewports: keep menu, pause & the loading intro from clipping */
@media (max-height:500px){
  #banner{font-size:22px;}              /* landscape phone — keep the banner clear of the side HUD (position stays below the HUD stack) */
  .diff-row{margin-top:2px;gap:2px;}    /* keep the difficulty selector compact on landscape phones */
  .diff-label{font-size:10px;letter-spacing:.26em;}
  .seg-btn{padding:5px 15px;font-size:12px;}
  #soundCtl{right:64px;bottom:11px;}    /* tuck the sound toggles in tighter, keeping clearance from the 46px pause button */
  .snd-btn{width:38px;height:38px;font-size:17px;}
  .coffee-btn{font-size:13px;padding:7px 18px;margin-top:3px;}
  .go-stats{padding:7px 14px!important;} /* keep the taller game-over column inside a landscape-phone viewport */
  .share-btn{padding:7px 18px;}
  .screen{padding:6px 18px;}
  .menu-inner{gap:3px;}
  .title{font-size:clamp(30px,8.5vh,58px);line-height:.88;}
  .title.sm{font-size:clamp(26px,9vh,46px);}
  .title.dead{font-size:clamp(20px,6vh,34px);}
  .title-kicker{font-size:11px;letter-spacing:.3em;}
  .tagline{font-size:12px;line-height:1.35;max-width:600px;}
  .btn-main{font-size:15px;padding:9px 22px;margin-top:2px;box-shadow:0 5px 0 #0c5a40,0 8px 18px rgba(0,0,0,.5);}
  .btn-ghost{font-size:13px;padding:7px 16px;margin-top:2px;}
  .menu-btns{gap:8px;}
  #goldBar{font-size:13px;}
  .best-line,.char-line{font-size:12px;margin-top:3px;}
  .lvl-title{font-size:clamp(24px,7vh,42px);}
  .lvl-sub{margin:2px 0 8px;}
  .go-stats{gap:8px;margin:4px 0;}
  /* BADMAN GAMES "loading" studio intro — scale to height so it never clips */
  .si-mask{width:clamp(54px,16vh,96px)!important;}
  .si-word span{font-size:clamp(20px,8vh,40px)!important;}
  .si-word{gap:4px!important;}
  .si-presents{margin-top:10px!important;}
  .si-enter{bottom:16px!important;padding:8px 20px!important;}
  .si-hint{bottom:10px!important;}
  .si-corner{width:30px!important;height:30px!important;top:14px!important;}
  .si-corner.tl{left:14px!important;} .si-corner.tr{right:14px!important;}
  .si-corner.bl{bottom:14px!important;top:auto!important;left:14px!important;}
  .si-corner.br{bottom:14px!important;top:auto!important;right:14px!important;}
}

/* ── Settings / accessibility panel ── */
.opt-list{display:flex;flex-direction:column;gap:10px;width:min(420px,84vw);margin:8px 0 2px;}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;border-radius:12px;background:var(--ui);border:1px solid var(--ui-line);
  color:#e9deff;font-weight:800;font-size:15px;letter-spacing:.02em;cursor:pointer;
  transition:transform .08s ease,border-color .15s,opacity .15s;}
.opt-row:active{transform:scale(.97);}
.opt-row .opt-val{font-size:13px;font-weight:800;letter-spacing:.1em;color:#33e0a1;
  padding:4px 13px;border-radius:999px;background:rgba(51,224,161,.12);border:1px solid rgba(51,224,161,.42);}
.opt-row.off{opacity:.6;}
.opt-row.off .opt-val{color:#ff6a7d;background:rgba(255,92,110,.12);border-color:rgba(255,92,110,.45);}
.opt-note{font-size:12px;opacity:.6;max-width:380px;margin:4px 0 12px;line-height:1.5;text-align:center;}

/* ── How to play ── */
.howto-inner{max-width:none;}
.howto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(760px,92vw);margin:8px 0 4px;}
.howto-card{background:var(--ui);border:1px solid var(--ui-line);border-radius:12px;padding:12px 14px;text-align:left;}
.howto-card .hc-ic{font-size:22px;line-height:1;margin-bottom:5px;}
.howto-card b{display:block;font-size:13px;letter-spacing:.04em;color:#ffd23f;margin-bottom:3px;}
.howto-card p{font-size:12px;line-height:1.42;opacity:.85;margin:0;}
@media(max-width:680px){ .howto-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-height:460px){ .howto-card p{font-size:11px;line-height:1.34;} .howto-card{padding:9px 11px;} }

/* ── Large HUD text (accessibility) ── */
body.big-hud .bar-label{font-size:14px;}
body.big-hud #waveTag{font-size:34px;}
body.big-hud #phaseTag,body.big-hud #modTag{font-size:14px;}
body.big-hud .stat{font-size:21px;}
body.big-hud .stat-k{font-size:12px;}
body.big-hud #weaponTag{font-size:17px;}
body.big-hud #wpnName{font-size:19px;}