/* ============================================================
   RESONANCE MERGE DEFENSE — game styles (from design bundle)
   ============================================================ */
/* fonts are self-hosted — see css/fonts.css + fonts/ */

:root{
  --fire:#ff6a3d;  --fire-lite:#ffc7a3;  --fire-dark:#9c2c12;  --fire-glow:#ff5a25;
  --ice:#5fd0ff;   --ice-lite:#cdeeff;   --ice-dark:#1b5e87;   --ice-glow:#3fc0ff;
  --lit:#ffd23e;   --lit-lite:#fff0b8;   --lit-dark:#9c7410;   --lit-glow:#ffce2e;
  --earth:#5fe08a; --earth-lite:#c4f5d4; --earth-dark:#1f7a44; --earth-glow:#3fd277;
  --arc:#c06bff;   --arc-lite:#e7cdff;   --arc-dark:#5e2a99;   --arc-glow:#b14dff;
  --void:#9b4dff;  --void-lite:#d9b8ff;  --void-glow:#8a2fff;

  --panel-1:rgba(22,30,62,.92);
  --panel-2:rgba(11,16,38,.94);
  --panel-line:rgba(150,196,255,.18);

  --gold:#e7c66b; --gold-dim:#b78f3e;
  --cyan:#6fd6ff;
  --tx:#eaf1ff; --tx-dim:#9fb0d4; --tx-faint:#65769c;
  --green-1:#8ee84d; --green-2:#3f9b22;
  --blue-1:#5fb4ee; --blue-2:#2b6fb0;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#000;color:var(--tx);font-family:'Rajdhani',system-ui,sans-serif;overflow:hidden;
  -webkit-font-smoothing:antialiased;touch-action:none;-webkit-user-select:none;user-select:none;
  /* mobile: no pull-to-refresh / rubber-band, no long-press menu or tap flash */
  position:fixed;inset:0;width:100%;height:100%;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}

/* portrait nudge — only shows on real touch devices held upright (the
   manifest locks landscape once installed; this covers the browser tab) */
#rotate-note{position:fixed;inset:0;z-index:900;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;text-align:center;padding:30px;
  background:radial-gradient(120% 100% at 50% 40%,#1b1640,#0a0a1e);color:var(--tx)}
#rotate-note .ph{font-size:64px;animation:rotnudge 2s ease-in-out infinite;line-height:1}
#rotate-note b{font-family:'Cinzel',serif;font-size:22px;letter-spacing:.06em;color:#fff}
#rotate-note span{font-size:14px;color:var(--tx-dim);max-width:300px}
@keyframes rotnudge{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(78deg)}}
@media (hover:none) and (orientation:portrait){ #rotate-note{display:flex} }
.cinzel{font-family:'Cinzel',serif}

#app{position:fixed;inset:0;background:#05060c}
.stage-wrap{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 0%,#0c1330 0%,#05060c 70%)}
.stage{position:absolute;width:1280px;height:800px;transform-origin:center center;
  border-radius:6px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(120,160,255,.08)}
.stage.shake{animation:shake .28s linear}
@keyframes shake{
  0%,100%{margin-left:0;margin-top:0}
  20%{margin-left:-9px;margin-top:5px}40%{margin-left:8px;margin-top:-6px}
  60%{margin-left:-6px;margin-top:-4px}80%{margin-left:4px;margin-top:3px}}

.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}

/* ---------- panels / buttons / pills (design system) ---------- */
.panel{position:relative;background:linear-gradient(160deg,var(--panel-1),var(--panel-2));
  border:1px solid var(--panel-line);
  box-shadow:inset 0 1px 0 rgba(160,200,255,.1),inset 0 0 24px rgba(40,90,170,.12),0 10px 30px rgba(0,0,0,.5)}
.panel.notch{clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),
  calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}
.panel.gold{border:1px solid rgba(231,198,107,.45);
  box-shadow:inset 0 0 0 1px rgba(231,198,107,.12),inset 0 0 30px rgba(120,90,30,.18),0 10px 34px rgba(0,0,0,.55)}

.pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 8px;border-radius:21px;
  background:linear-gradient(180deg,rgba(20,28,56,.95),rgba(10,15,34,.96));
  border:1px solid rgba(140,180,255,.22);
  box-shadow:inset 0 1px 0 rgba(160,200,255,.14),0 4px 14px rgba(0,0,0,.45);
  font-weight:700;font-size:17px;letter-spacing:.02em}
.pill .ico{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto}

.iconbtn{width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(22,30,60,.95),rgba(10,15,34,.96));
  border:1px solid rgba(231,198,107,.45);
  box-shadow:inset 0 1px 0 rgba(160,200,255,.14),0 4px 12px rgba(0,0,0,.4);
  color:var(--tx-dim);transition:.15s;font-size:18px}
.iconbtn:hover{color:var(--tx);border-color:rgba(231,198,107,.8);transform:translateY(-1px)}
.iconbtn svg{width:20px;height:20px}

.btn{cursor:pointer;font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.06em;
  border:none;border-radius:12px;color:#fff;position:relative;transition:.12s;text-transform:uppercase}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default;filter:saturate(.4)}
.btn-green{background:linear-gradient(180deg,#9ff05a 0%,var(--green-1) 38%,var(--green-2) 100%);
  color:#10300a;text-shadow:0 1px 0 rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.25),
    0 0 22px rgba(110,220,70,.5),0 6px 16px rgba(0,0,0,.4);
  border:1px solid #cdf59a}
.btn-green:hover:not(:disabled){filter:brightness(1.06)}
.btn-blue{background:linear-gradient(180deg,#7cc6f5 0%,var(--blue-1) 40%,var(--blue-2) 100%);
  color:#04203b;text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.25),
    0 0 22px rgba(80,170,240,.5),0 6px 16px rgba(0,0,0,.4);
  border:1px solid rgba(231,198,107,.7)}
.btn-ghost{background:linear-gradient(180deg,rgba(24,32,64,.9),rgba(12,18,40,.95));
  color:var(--tx);border:1px solid rgba(231,198,107,.4);
  box-shadow:inset 0 1px 0 rgba(160,200,255,.12),0 4px 12px rgba(0,0,0,.4)}
.btn-ghost:hover{border-color:rgba(231,198,107,.7);color:#fff}
/* destructive secondary action (e.g. Leave Run) — reads as "careful" without dominating its panel */
.btn-danger{background:linear-gradient(180deg,rgba(48,20,24,.92),rgba(30,12,16,.95));
  color:#ff8a8a;border:1px solid rgba(240,90,90,.55);
  box-shadow:inset 0 1px 0 rgba(255,140,140,.12),0 4px 12px rgba(0,0,0,.4)}
.btn-danger:hover:not(:disabled){background:linear-gradient(180deg,#e8484c,#c22a2f);color:#fff;border-color:#ff9a9a}

.coinico{width:22px;height:22px;border-radius:50%;display:block;
  background:radial-gradient(circle at 35% 30%,#ffe9a0,#e7c66b 55%,#a87d22);
  box-shadow:0 0 8px rgba(231,198,107,.6),inset 0 -2px 3px rgba(120,80,10,.6)}
.gemico{width:18px;height:20px;display:block;clip-path:polygon(50% 0,100% 35%,80% 100%,20% 100%,0 35%);
  background:linear-gradient(160deg,#c4f5d4,var(--earth) 55%,var(--earth-dark));
  box-shadow:0 0 8px var(--earth-glow)}
.shardico{width:14px;height:22px;display:block;
  clip-path:polygon(50% 0,72% 26%,60% 100%,40% 100%,28% 26%);
  background:linear-gradient(160deg,#e7cdff,var(--arc) 55%,var(--arc-dark));
  box-shadow:0 0 8px var(--arc-glow)}

.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 55%,rgba(3,5,14,.65) 100%)}

/* ---------- battlefield ---------- */
.bf{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(115% 100% at 50% 44%,#424a72 0%,#333a60 32%,#262c4e 58%,#1a2040 80%,#11152c 100%)}
.bf::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,rgba(140,165,230,.05) 0 1px,transparent 1px 86px),
    repeating-linear-gradient(90deg,rgba(140,165,230,.05) 0 1px,transparent 1px 86px),
    radial-gradient(circle at 30% 40%,rgba(120,150,255,.05),transparent 45%),
    radial-gradient(circle at 72% 66%,rgba(150,120,255,.05),transparent 45%)}
.bf-floor{position:absolute;inset:0}
.bf-floor svg{width:100%;height:100%;display:block}
#cv{position:absolute;inset:0;width:100%;height:100%;z-index:5;touch-action:none}

.hud-tl{position:absolute;left:16px;top:14px;display:flex;flex-direction:column;gap:8px;z-index:40;pointer-events:none}
.hud-tl .row{display:flex;gap:8px}
.hud-tr{position:absolute;right:16px;top:14px;display:flex;gap:10px;z-index:40}

.wavebar{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:330px;z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.wavebar .wlabel{font-weight:700;font-size:26px;line-height:1;letter-spacing:.04em;color:#fff;
  text-shadow:0 0 16px rgba(120,170,255,.5),0 2px 4px rgba(0,0,0,.6)}
.wavebar .wleft{font-size:15px;font-weight:700;color:var(--void-lite);margin-left:12px;
  letter-spacing:.04em;text-shadow:0 0 10px rgba(155,77,255,.5)}
.nexus-bar{width:100%;height:13px;border-radius:7px;position:relative;
  background:linear-gradient(180deg,rgba(10,14,32,.92),rgba(6,9,22,.95));
  border:1px solid rgba(231,198,107,.4);overflow:hidden;box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
.nexus-bar i{position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(180deg,#ff8b6b,#e23b3b 55%,#9c1d1d);
  box-shadow:0 0 14px rgba(255,80,80,.6);border-radius:7px 0 0 7px;transition:width .3s}
.nexus-bar .nx-tx{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* nexus HP bar + Last Stand pips share one row — pips sit to the LEFT of the bar */
.nexus-row{display:flex;align-items:center;gap:8px;width:100%}
.nexus-row .nexus-bar{flex:1;width:auto}
/* Last Stand rescue pips — teach the mechanic: filled = saves left this run, dim = spent. */
.ls-pips{display:flex;align-items:center;gap:4px;cursor:help;flex:0 0 auto}
.ls-pips .ls-ic{font-size:10px;line-height:1;color:#ff8a6a;text-shadow:0 0 8px rgba(255,90,60,.6);margin-right:1px}
.ls-pips i{width:8px;height:8px;border-radius:50%;background:rgba(255,90,90,.16);box-shadow:inset 0 0 0 1px rgba(255,120,90,.45)}
.ls-pips i.on{background:radial-gradient(circle at 35% 30%,#ffd9c0,#ff5a4a);box-shadow:0 0 7px rgba(255,80,60,.9)}
.callbtn{position:absolute;right:18px;bottom:20px;width:196px;height:64px;z-index:45;
  transition-property:transform,filter,box-shadow,opacity,background;   /* NOT position — placeSurge() re-docks right/bottom/width inline, and the generic .btn all-prop transition made the button visibly FLY across the corner at boot */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.callbtn.hidden{visibility:hidden}
.callbtn .cb-t{font-size:20px;letter-spacing:.05em;line-height:1}
.callbtn .cb-s{font-size:12px;font-weight:700;text-transform:none;letter-spacing:.02em;opacity:.85}
.callbtn .cb-s b{color:#0a3a10}
.callbtn .cb-s{display:inline-flex;align-items:center;gap:3px}
.cb-coin{width:11px;height:11px;border-radius:50%;display:inline-block;
  background:radial-gradient(circle at 35% 30%,#fff3c0,#e7c66b 55%,#9c7420);
  box-shadow:0 0 4px rgba(120,80,10,.5),inset 0 -1px 1px rgba(120,80,10,.55)}
.wave-prev{position:absolute;left:16px;top:110px;z-index:40;pointer-events:none;
  padding:6px 14px;border-radius:11px;text-align:left;max-width:220px;   /* narrow single column — long "X + Y" lines wrap DOWN, never toward the arena */
  background:linear-gradient(180deg,rgba(16,22,48,.92),rgba(9,13,30,.94));
  border:1px solid rgba(140,180,255,.25);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.wave-prev .wp-name{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.wave-prev .wp-comp{font-size:11.5px;color:var(--tx-dim);font-weight:600;margin-top:1px}
.wave-prev .wp-row{display:flex;align-items:center;gap:7px;margin:3px 0}
.wave-prev .wp-row b{min-width:26px;text-align:right;color:#fff;font-size:12.5px}
.wave-prev .wp-row canvas{width:26px;height:26px;flex:0 0 auto}
.wave-prev .wp-row span{font-size:12px;letter-spacing:.02em}
.wave-prev .wp-hint{font-size:11px;color:var(--cyan);font-weight:600;margin-top:2px;line-height:1.3}
/* dissolve the panel like smoke when there's nothing to list mid-wave */
.wave-prev{transition:opacity .5s ease, transform .5s ease, filter .5s ease}
.wave-prev.faded{opacity:0;transform:translateY(-10px) scale(.96);filter:blur(4px)}
/* server-set title-screen announcement (RMD_NOTICE env via /api/config) */
.notice-bar{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;max-width:min(680px,90vw);
  padding:9px 14px;border-radius:10px;
  background:linear-gradient(180deg,rgba(42,32,12,.96),rgba(28,20,8,.97));
  border:1px solid rgba(255,210,90,.42);box-shadow:0 6px 22px rgba(0,0,0,.5);
  color:#ffe6a4;font-size:13px;font-weight:600;letter-spacing:.02em}
.notice-bar .notice-ico{font-size:15px;flex:0 0 auto}
.notice-bar .notice-text{flex:1 1 auto;line-height:1.3}
.notice-bar .notice-x{flex:0 0 auto;background:none;border:none;color:#ffe6a4;
  cursor:pointer;font-size:13px;opacity:.65;padding:2px 4px;line-height:1}
.notice-bar .notice-x:hover{opacity:1}
.wave-call b{color:var(--lit)}
.wave-call.hidden{visibility:hidden}

/* ---- first-run onboarding hints ---- */
.onboard{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);
  max-width:440px;padding:11px 20px;border-radius:12px;z-index:60;text-align:center;
  background:linear-gradient(180deg,rgba(14,20,46,.96),rgba(8,12,30,.97));
  border:1px solid rgba(95,208,255,.55);box-shadow:0 0 24px rgba(95,208,255,.25),0 8px 24px rgba(0,0,0,.5);
  font-size:14.5px;font-weight:600;color:#dfeaff;letter-spacing:.02em;
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.onboard b{color:var(--cyan)}
/* PERF: the box-shadow pulse runs only while the pill is actually SHOWN — on the base class it
   ticked style+paint 60×/s for the whole session on an invisible element (veterans never see it) */
.onboard.show{opacity:1;transform:translateX(-50%) translateY(0);animation:obglow 2.2s ease-in-out infinite}
.onboard.at-shop{left:auto;right:170px;top:80px;bottom:auto;transform:translateY(8px)}
.onboard.at-shop.show{transform:translateY(0)}
.onboard.bye{border-color:rgba(140,232,77,.6);box-shadow:0 0 24px rgba(140,232,77,.3)}
@keyframes obglow{0%,100%{box-shadow:0 0 18px rgba(95,208,255,.18),0 8px 24px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 30px rgba(95,208,255,.4),0 8px 24px rgba(0,0,0,.5)}}

/* ---- guided tour: spotlight coach-marks (first-run walkthrough + "How to Play" replay) ---- */
/* the whole layer ignores pointer events so the board underneath stays interactive for [do] steps;
   only the card re-enables them. The spotlight is a transparent rounded rect whose enormous
   box-shadow dims everything EXCEPT the hole over the highlighted element. */
/* absolute (not fixed): #coach lives inside .stage — a 1280×800 box the game SCALES to fit the viewport.
   fixed would escape to the viewport and de-sync from the scaled HUD; absolute rides the same transform. */
.coach{position:absolute;inset:0;z-index:120;pointer-events:none;display:none}
.coach.on{display:block}
/* NO dim overlay — the board stays fully visible the whole tour (players need to see the arena they build
   on). The highlight is a pulsing cyan ring around the target element; the card carries the explanation. */
.coach-spot{position:absolute;left:0;top:0;width:0;height:0;border-radius:16px;
  border:2px solid rgba(140,228,255,.92);
  transition:left .28s ease,top .28s ease,width .28s ease,height .28s ease}
.coach-spot::after{content:"";position:absolute;inset:-5px;border-radius:20px;pointer-events:none;
  animation:coachpulse 1.5s ease-in-out infinite}
.coach-spot.nohole{display:none}
@keyframes coachpulse{0%,100%{box-shadow:0 0 20px 3px rgba(95,208,255,.4)}
  50%{box-shadow:0 0 34px 8px rgba(95,208,255,.7)}}
.coach-card{position:absolute;left:50%;top:50%;width:312px;padding:18px 18px 15px;border-radius:16px;
  pointer-events:auto;background:linear-gradient(160deg,#16203a 0%,#0d1424 100%);
  border:1px solid rgba(130,214,255,.38);
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4) inset,0 0 22px rgba(95,208,255,.1);
  transition:left .28s ease,top .28s ease}
.coach-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.14em;
  color:#7fd4ff;text-transform:uppercase;margin-bottom:9px}
.coach-num{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;
  background:rgba(95,208,255,.16);border:1px solid rgba(95,208,255,.5);color:#bfecff;font-size:12px;flex:0 0 auto}
.coach-prog{display:flex;gap:4px;margin-left:auto}
.coach-prog i{width:12px;height:3px;border-radius:2px;background:rgba(150,200,255,.22)}
.coach-prog i.on{background:#5fd0ff;box-shadow:0 0 6px #5fd0ff}
.coach-title{font-size:18px;font-weight:800;color:#eaf5ff;margin-bottom:6px;line-height:1.25}
.coach-body{font-size:13.5px;line-height:1.5;color:#c3d2ea;margin-bottom:14px}
.coach-body b{color:#9fe8ff;font-weight:700}
.coach-do{display:inline-block;margin-top:2px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:#8fe3a0;text-transform:uppercase}
.coach-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.coach-skip{font-size:12.5px;color:#8093ad;cursor:pointer;background:none;border:none;padding:6px 2px}
.coach-skip:hover{color:#c3d2ea}
.coach-next{font-size:13.5px;font-weight:800;color:#052033;padding:9px 18px;border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#8fe3ff,#4bb6ea);box-shadow:0 3px 12px rgba(75,182,234,.5),0 1px 0 rgba(255,255,255,.4) inset}
.coach-next:hover{filter:brightness(1.08)}
/* tutorial: the Nexus-powers step lights Mend/Ward/Empower so they read as usable while explained
   (they're greyed pre-charge). Overrides the per-tick .poor/.soon dimming; reverted when the step ends. */
#nexus-hub.coach-lit .nx-ab{opacity:1 !important;filter:none !important;cursor:pointer}
/* Mobile/tablet: the stage is scaled down to fit the viewport, shrinking this card's text with it. Bump the
   card's REAL size (~1.5×) — NOT transform:scale (placeCard() reads offsetWidth to anchor + clamp, so a
   transform would desync placement). Bigger real size → placeCard re-anchors it precisely, positions unchanged. */
.touch-ui .coach-card{width:580px;padding:34px 34px 28px;border-radius:22px}
.touch-ui .coach-head{font-size:21px;gap:13px;margin-bottom:17px}
.touch-ui .coach-num{width:42px;height:42px;font-size:23px}
.touch-ui .coach-prog{gap:7px}
.touch-ui .coach-prog i{width:22px;height:5px}
.touch-ui .coach-title{font-size:34px;margin-bottom:11px}
.touch-ui .coach-body{font-size:26px;margin-bottom:26px}
.touch-ui .coach-do{font-size:22px}
.touch-ui .coach-skip{font-size:24px;padding:11px 4px}
.touch-ui .coach-next{font-size:26px;padding:17px 34px;border-radius:15px}

/* ---- wave milestone recap ---- */
.ov-box.mile-box{width:min(620px,92vw);padding:22px 26px}
.ov-box.mile-box.nosnap{width:min(400px,92vw)}
.mile-box.nosnap .mile-right{display:none}
.mile-title{font-size:30px;text-align:center;color:#fff;margin-bottom:14px;
  text-shadow:0 0 18px rgba(120,170,255,.55)}
.mile-flex{display:flex;gap:22px;align-items:stretch}
.mile-left{flex:1;display:flex;flex-direction:column;gap:12px}
.mile-left{align-items:center}
.mile-stats{display:flex;flex-direction:column;gap:7px;align-items:center}
.mile-stats .ms{background:rgba(10,14,32,.55);border:1px solid rgba(140,180,255,.18);
  border-radius:8px;padding:5px 14px;display:inline-flex;align-items:baseline;gap:8px}
.mile-stats .ms b{font-size:17px;color:#fff;min-width:42px;text-align:right}
.mile-stats .ms span{font-size:10.5px;color:var(--tx-dim);text-transform:uppercase;letter-spacing:.05em}
.mile-pct{min-height:18px;font-size:14px;color:var(--cyan);font-weight:600;text-align:center}
.mile-pct b{color:#fff}
.mile-cont{height:42px;font-size:15px;width:auto;align-self:center;padding:0 26px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px}
.mile-end{align-self:center;font-size:12px;color:var(--tx-dim);text-decoration:underline}
.mile-end:hover{color:#fff}
.mile-right{width:280px;display:flex;flex-direction:column;gap:6px}
.mile-right canvas{width:100%;border-radius:10px;border:1px solid rgba(140,180,255,.3);
  cursor:zoom-in;box-shadow:0 6px 18px rgba(0,0,0,.45);background:#262a4a}
.mile-snapcap,.mp-snapcap{font-size:10.5px;color:var(--tx-faint);text-align:center;
  text-transform:uppercase;letter-spacing:.08em}

/* death-screen summary extras */
.mp-pct{font-size:16px;color:var(--cyan);font-weight:600;margin:4px 0 2px;min-height:20px}
.mp-pct b{color:#fff}
.mp-recap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.mp-recap canvas{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.mpr-syn{font-size:11.5px;font-weight:700;color:var(--sc,#fff);border:1px solid;
  border-radius:999px;padding:2px 9px;opacity:.9}
.mp-snapwrap{position:absolute;right:20px;top:84px;width:150px}
.mp-zoom{position:absolute;top:5px;right:6px;font-size:11px;font-weight:700;background:rgba(8,10,22,.74);
  color:#fff;border-radius:6px;padding:1px 6px;pointer-events:none;letter-spacing:.02em}
.mp-snapwrap canvas{width:100%;border-radius:9px;border:1px solid rgba(231,198,107,.35);
  cursor:zoom-in;box-shadow:0 6px 18px rgba(0,0,0,.5);background:#262a4a}
@media (max-width:1180px){ .mp-snapwrap{display:none !important} }

/* dev-only snapshot button (preview builds only) */
#dev-snap{position:fixed;top:10px;left:10px;z-index:500;width:42px;height:42px;
  align-items:center;justify-content:center;font-size:20px;cursor:pointer;
  border-radius:9px;background:rgba(20,26,56,.92);border:1px solid rgba(140,180,255,.55);
  box-shadow:0 3px 10px rgba(0,0,0,.5)}
#dev-snap:hover{background:rgba(50,60,110,.95)}

/* music mute/unmute toggle on the title screen */
.menu-mute{position:absolute;top:16px;right:16px;z-index:50;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;font-size:21px;cursor:pointer;
  border-radius:11px;background:rgba(20,26,56,.85);border:1px solid rgba(140,180,255,.4);
  color:#dfeaff;transition:.15s}
.menu-mute:hover{background:rgba(50,60,110,.95);border-color:rgba(231,198,107,.6)}
.menu-mute.muted{color:#8c9cd0;border-color:rgba(140,180,255,.2)}
#btn-menu-settings{right:68px}   /* sits just left of the mute speaker */
.iconbtn.muted{opacity:.55}

/* snapshot lightbox */
.snaplight{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;
  align-items:center;justify-content:center;background:rgba(4,6,16,.9)}
.snaplight.open{display:flex}
.snaplight canvas{max-width:92vw;max-height:76vh;width:auto;height:auto;border-radius:12px;
  border:1px solid rgba(140,180,255,.4);box-shadow:0 20px 60px rgba(0,0,0,.7)}
.sl-x{position:fixed;top:16px;right:22px;width:46px;height:46px;z-index:310;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:22px;color:#fff;border-radius:50%;
  background:rgba(20,26,56,.92);border:1px solid rgba(140,180,255,.5);
  box-shadow:0 4px 14px rgba(0,0,0,.6)}
.sl-x:hover{background:rgba(50,60,110,.95)}
.sl-dl{right:82px;color:#9fd8ff;border-color:rgba(95,208,255,.55)}

/* shop */
.shop{position:absolute;right:14px;top:64px;bottom:96px;width:158px;z-index:40;
  display:flex;flex-direction:column;padding:10px 10px 12px;gap:9px;border-radius:18px}
.shop .shop-t{display:flex;align-items:center;justify-content:center;gap:7px;
  font-weight:700;font-size:18px;letter-spacing:.04em;color:#fff;margin-bottom:2px;
  text-shadow:0 0 10px rgba(150,200,255,.4)}
.shop .shop-t .shop-cap{font-size:12px;font-weight:700;color:var(--tx-dim);letter-spacing:.03em}
.shop .shop-t .shop-cap.full{color:#ff9a9a;text-shadow:0 0 8px rgba(255,90,90,.5)}
.shop-load{display:flex;align-items:center;gap:6px;margin:-2px 0 1px;font-size:8.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--tx-faint)}
.shop-load .sl-l{flex:none}
.shop-load .sl-bar{flex:1;height:5px;border-radius:3px;background:rgba(140,180,255,.14);overflow:hidden}
.shop-load .sl-bar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),#3a9fd8);transition:width .18s}
.shop-load.full .sl-bar i{background:linear-gradient(90deg,#ffb37a,#ff5a5a)}
.shop-load.full .sl-l{color:#ff9a7a}
.shop .shop-t::before{content:'';width:13px;height:20px;
  clip-path:polygon(50% 0,84% 16%,84% 86%,50% 100%,16% 86%,16% 15%);
  background:linear-gradient(176deg,#fff,#c06bff 55%,#5e2a99);box-shadow:0 0 8px #b14dff}
.shop .seeds{display:flex;flex-direction:column;gap:9px;overflow:hidden;flex:1;
  margin-left:-10px;padding-left:10px}   /* in-bounds gutter: the hover translateX(-3px) + glow stay INSIDE the clip (left edge/glow was cut off) */
/* #78: seed cap reached → hide the unbuyable seed cards and let the panel hug its remaining content
   (title + capacity bar + Link/Repair). Re-expands the instant capacity frees up (sell / merge). */
.shop.capped .seeds{display:none}
.shop.capped{bottom:auto}
/* Link Mode toggle — tap a tower then another to forge a resonance link without opening the tower panel */
.shop .shop-link{flex:0 0 auto;margin-top:8px;height:34px;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,rgba(120,200,255,.16),rgba(60,120,200,.10));
  border:1px solid rgba(120,200,255,.35);color:#cfe8ff;font:700 13px/1 'Rajdhani',sans-serif;letter-spacing:.04em;transition:.14s}
.shop .shop-link:hover:not(:disabled){border-color:rgba(120,200,255,.6);color:#fff}
.shop .shop-link.on{background:linear-gradient(180deg,rgba(120,200,255,.42),rgba(60,120,200,.26));
  border-color:rgba(170,225,255,.95);color:#fff;box-shadow:0 0 16px -3px rgba(120,200,255,.75)}
.shop .shop-link.poor{opacity:.72;border-color:rgba(255,130,130,.5);color:#ffb3a8}   /* armed source, but can't afford the cheapest link */
.shop .shop-link:disabled{opacity:.4;cursor:default}
/* Repair Mode toggle — same chip as Link, tinted GREEN so the two armed modes never read alike */
.shop .shop-repair{margin-top:0;
  background:linear-gradient(180deg,rgba(124,255,176,.14),rgba(50,160,110,.09));
  border-color:rgba(124,255,176,.32);color:#d2f5df}
.shop .shop-repair:hover:not(:disabled){border-color:rgba(124,255,176,.6);color:#fff}
.shop .shop-repair.on{background:linear-gradient(180deg,rgba(124,255,176,.38),rgba(50,180,120,.24));
  border-color:rgba(170,255,205,.95);color:#fff;box-shadow:0 0 16px -3px rgba(124,255,176,.75)}
/* pre-run heads-up on the Wheel screen: a resumable run is about to be ended (its shards are kept) */
.sp-savewarn{margin:6px auto 2px;max-width:430px;font-size:15px;font-weight:700;line-height:1.4;text-align:center;
  color:#ff8f8f;background:rgba(255,90,90,.10);border:1px solid rgba(255,90,90,.4);border-radius:9px;padding:7px 12px}
.sp-savewarn b{color:#ff5a6a}
.sp-savewarn .shardico{display:inline-block;vertical-align:-3px;width:11px;height:17px;margin:0 1px}   /* base .shardico is display:block — inline it inside the sentence */
/* ===== Pre-title splash / prewarm curtain (design ported from the resonanse `Splash` tab) ===== */
#rmd-splash{position:fixed;inset:0;z-index:600;overflow:hidden;display:none;place-items:center;  /* HIDDEN by default — the head-script adds html.show-splash ONLY on first-ever load, so reloads never flash it. above #dev-snap(500), below #rotate-note(900) */
  background:radial-gradient(120% 90% at 50% 0%,#0c1330 0%,#05060c 72%);opacity:1;transition:opacity .7s ease}
html.show-splash #rmd-splash{display:grid}
#rmd-splash.hide{opacity:0;pointer-events:none}
#rmd-splash .sp-fx{position:absolute;inset:0;pointer-events:none}
#rmd-splash .swirl{position:absolute;border-radius:50%;filter:blur(6px)}
#rmd-splash .sp-vignette{background:radial-gradient(120% 100% at 50% 45%,transparent 52%,rgba(3,5,14,.72) 100%)}
#rmd-splash .sp-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  animation:spRise .9s cubic-bezier(.2,.7,.2,1) both}
#rmd-splash .sp-emblem{position:relative;width:210px;height:210px;margin-bottom:6px}
#rmd-splash .sp-logo{font-family:'Cinzel',serif;font-weight:900;line-height:1;font-size:62px;letter-spacing:.15em;
  color:#f3ead0;text-shadow:0 0 30px rgba(231,198,107,.45),0 0 70px rgba(150,120,255,.32)}
#rmd-splash .sp-sub{font-family:'Cinzel',serif;font-weight:600;font-size:17px;letter-spacing:.52em;color:var(--cyan);
  margin-top:12px;text-shadow:0 0 18px rgba(95,208,255,.5)}
#rmd-splash .sp-rule{width:280px;height:1px;margin:24px 0 28px;background:linear-gradient(90deg,transparent,rgba(231,198,107,.7),transparent)}
#rmd-splash .sp-tag{font-family:'Cinzel',serif;font-weight:600;font-size:13px;letter-spacing:.28em;color:rgba(207,224,255,.6);margin-top:8px;text-shadow:0 0 16px rgba(120,160,255,.35)}
#rmd-splash .sp-attune{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:12px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--tx-faint)}
#rmd-splash .sp-shimmer{position:relative;width:210px;height:2px;margin-top:15px;border-radius:2px;overflow:hidden;background:rgba(120,160,255,.12)}
#rmd-splash .sp-shimmer::after{content:'';position:absolute;top:0;left:-42%;width:42%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan);animation:spShimmer 1.5s ease-in-out infinite}
@keyframes spShimmer{0%{left:-42%}100%{left:100%}}
@keyframes spRise{0%{opacity:0;transform:translateY(14px) scale(.985)}100%{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){#rmd-splash .sp-center{animation:none}
  #rmd-splash .sp-shimmer::after{animation:none;left:0;width:100%;opacity:.5}}
.seed{display:flex;align-items:center;gap:8px;padding:5px 9px 5px 5px;
  position:relative;height:1px;flex:1;border-radius:13px;cursor:grab;
  background:linear-gradient(180deg,rgba(20,26,52,.92),rgba(10,14,32,.96));
  border:1px solid rgba(140,180,255,.16);transition:.15s;
  box-shadow:inset 0 1px 0 rgba(160,200,255,.1),inset 0 0 16px rgba(0,0,0,.4)}
.seed:hover{border-color:var(--cc);box-shadow:0 0 16px var(--cg),inset 0 1px 0 rgba(160,200,255,.12);transform:translateX(-3px)}
.seed.poor{opacity:.45;filter:saturate(.3);cursor:not-allowed}
.seed canvas{flex:0 0 auto;width:40px;height:52px;filter:drop-shadow(0 0 6px var(--cg))}
.seed-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.seed-name{font-weight:700;font-size:12.5px;color:#fff;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seed-desc{font-size:9px;color:var(--tx-dim);line-height:1.2;letter-spacing:.02em}
.seed-cost{font-size:11.5px;font-weight:700;color:var(--lit-lite);display:flex;align-items:center;gap:3px;margin-top:2px}
.seed-cost::before{content:'';width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a0,#d8a52a);box-shadow:0 0 5px #e7c66b}
/* teaser: Nexus-heal item, not buyable yet */
.seed.soon{cursor:default;border-color:rgba(255,120,170,.28)}
.seed.soon:hover{transform:none;border-color:rgba(255,120,170,.45);
  box-shadow:inset 0 1px 0 rgba(160,200,255,.1),inset 0 0 16px rgba(0,0,0,.4)}
.seed-heart{flex:0 0 auto;width:40px;text-align:center;font-size:25px;line-height:1;
  color:#ff6aa0;text-shadow:0 0 12px rgba(255,90,150,.7)}
.seed-soon{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffa6cb;margin-top:2px}
/* info-panel buy-charge button */
.ab-charge{margin-top:6px;background:linear-gradient(180deg,rgba(255,212,90,.16),rgba(255,180,40,.07));
  border:1px solid rgba(255,212,100,.42);color:#ffe6a4}
.ab-charge:hover:not(:disabled){background:linear-gradient(180deg,rgba(255,212,90,.26),rgba(255,180,40,.12))}
.ab-charge:disabled{opacity:.5;cursor:default}
/* ── Nexus ability hub: Mend / Ward / Empower docked to the Nexus HP bar (top-center) as compact
   pills — grouped as "Nexus actions" with the Nexus HP readout. Each pill keeps its #id +
   data-*-cost child so the HUD loop (cost / soon / active / poor) is unchanged. Only the pills
   capture clicks (container is pass-through) so the arena behind the gaps stays placeable. */
.wavebar .nexus-hub{display:flex;justify-content:center;flex-wrap:nowrap;gap:7px;margin-top:2px;pointer-events:none}
.nx-ab{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:9px;
  cursor:pointer;transition:.14s;background:rgba(10,14,32,.72);border:1px solid rgba(150,190,255,.2);
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
.nx-ab:hover{transform:translateY(-1px)}
.nx-ab .nx-ico{font-size:15px;line-height:1}
.nx-ab .nx-name{font-size:10.5px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1;white-space:nowrap}
.nx-ab .nx-cost{font-size:11px;font-weight:700;display:flex;align-items:center;gap:3px;line-height:1;white-space:nowrap}
.nx-ab .nx-cost::before{content:'';width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a0,#d8a52a);box-shadow:0 0 5px #e7c66b}
.nx-ab.soon .nx-cost::before,.nx-ab.active .nx-cost::before{display:none}
.nx-ab.poor{opacity:.45;filter:saturate(.4);cursor:not-allowed}
.nx-ab.soon{opacity:.5;cursor:default}
.nx-ab.active{cursor:default}
.nx-ab.ab-heal{border-color:rgba(255,120,170,.34)}
.nx-ab.ab-heal .nx-ico{color:#ff6aa0;text-shadow:0 0 10px rgba(255,90,150,.7)}
.nx-ab.ab-heal .nx-cost{color:#ffd9e6;gap:5px}
/* Mend is EARNED, not gold-priced: show banked clean-wave charges as discrete pips (filled=available),
   not a coin cost. Pips stay visible during the trickle + while greyed, so the count never looks "all spent". */
.nx-ab.ab-heal .nx-cost::before{display:none}
.mend-pips{display:inline-flex;gap:3px;align-items:center}
.mend-pips i{width:7px;height:7px;border-radius:50%;background:rgba(255,120,170,.18);
  box-shadow:inset 0 0 0 1px rgba(255,120,170,.42)}
.mend-pips i.on{background:radial-gradient(circle at 35% 30%,#ffd9e6,#ff6aa0);box-shadow:0 0 6px rgba(255,90,150,.85)}
.mend-num{font-size:11px;font-weight:700;letter-spacing:.02em;color:#ffd9e6}
/* Mend heal progress: a pink bar that sweeps left→right under the "+N HP" label as the heal trickles in */
.nx-ab.ab-heal .nx-cost{position:relative}
.mend-fill{position:absolute;left:0;bottom:-3px;height:2.5px;width:0;border-radius:2px;background:#ff6aa0;
  box-shadow:0 0 6px rgba(255,90,150,.85);opacity:0;transition:width .12s linear,opacity .2s}
.mend-trickle{font-size:10px;line-height:1;color:#ff8ab8;animation:mendTrickle 1s ease-in-out infinite}
@keyframes mendTrickle{0%,100%{opacity:.3}50%{opacity:1}}
/* CLEAN-WAVE EARN CUE: breathing glow while the live wave is still damage-free (a Mend charge is on track to
   bank at wave-clear). Specificity (3 classes) lifts opacity back over .soon/.poor dimming so the cue reads. */
.nx-ab.ab-heal.clean{opacity:1;border-color:rgba(255,120,170,.8);animation:mendClean 1.8s ease-in-out infinite}
@keyframes mendClean{0%,100%{box-shadow:0 0 10px -4px rgba(255,90,150,.5)}50%{box-shadow:0 0 15px -2px rgba(255,90,150,.85)}}
/* …and a one-shot shatter (red flash + shake) the moment a leak forfeits that pending charge */
.nx-ab.ab-heal.mend-shatter{animation:mendShatter .4s ease-out}
@keyframes mendShatter{
  0%{transform:translateX(0);border-color:rgba(255,90,90,.95);box-shadow:0 0 12px -2px rgba(255,70,70,.7)}
  20%{transform:translateX(-2px)}55%{transform:translateX(2px)}80%{transform:translateX(-1px)}
  100%{transform:translateX(0);border-color:rgba(255,120,170,.34);box-shadow:none}}
/* FORFEIT MARKER (Option A): once the Nexus is hit this wave, the heart stays cracked + muted until wave-clear —
   "this wave won't bank a Mend charge". A dark crack is overlaid on the ♥ glyph; castability is unaffected. */
.nx-ab.ab-heal .nx-ico{position:relative}
.nx-ab.ab-heal.mend-broke .nx-ico{color:#b8607f;text-shadow:none}
.nx-ab.ab-heal.mend-broke .nx-ico::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:center/84% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='12,4 9.5,11 13,13.5 10,17.5 12,22' fill='none' stroke='%232a0a16' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")}
.nx-ab.ab-ward{border-color:rgba(95,180,255,.34)}
.nx-ab.ab-ward .nx-ico{color:#8fd0ff;text-shadow:0 0 10px rgba(95,180,255,.7)}
.nx-ab.ab-ward .nx-cost{color:#cfe8ff}
.nx-ab.ab-ward.active{border-color:rgba(143,208,255,.8);box-shadow:0 0 13px -3px rgba(143,208,255,.7)}
.nx-ab.ab-empower{border-color:rgba(255,200,90,.34)}
.nx-ab.ab-empower .nx-ico{color:#ffd06a;text-shadow:0 0 10px rgba(255,200,90,.7)}
.nx-ab.ab-empower .nx-cost{color:#ffe7b0}
.nx-ab.ab-empower.active{border-color:rgba(255,210,110,.8);box-shadow:0 0 13px -3px rgba(255,210,110,.7)}
/* Ward/Empower are EARNED now: a conic fill-ring (accrual toward the next charge), not a gold coin */
.nx-ab.ab-ward .nx-cost::before, .nx-ab.ab-empower .nx-cost::before{display:none}
.nx-ab.ab-ward.ready{border-color:rgba(143,208,255,.85);box-shadow:0 0 13px -3px rgba(143,208,255,.75)}
.nx-ab.ab-empower.ready{border-color:rgba(255,210,110,.85);box-shadow:0 0 13px -3px rgba(255,210,110,.75)}
.nx-acc{display:inline-block;width:13px;height:13px;border-radius:50%;background:rgba(150,170,210,.22);
  box-shadow:inset 0 0 0 1px rgba(150,170,210,.4)}
.nx-acc.on{box-shadow:0 0 7px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.6)}   /* charge ready */


.bf-bl{position:absolute;left:8px;bottom:18px;display:flex;gap:10px;z-index:40;align-items:center}
.spd{display:flex;border-radius:11px;overflow:hidden;border:1px solid rgba(140,180,255,.22)}
.spd button{appearance:none;border:none;cursor:pointer;font-family:'Rajdhani';font-weight:700;
  font-size:13px;color:var(--tx-dim);padding:9px 10px;background:rgba(14,20,44,.92);transition:.12s}
.spd button.on{color:#0a1020;background:linear-gradient(180deg,var(--cyan),#3a9fd8)}
.spd button:hover:not(.on){color:#fff;background:rgba(40,60,110,.7)}
.spd .spd-dev{display:none}                 /* 10×/100× are dev-only — revealed by ?fast */
.spd.fast .spd-dev{display:inline-block}
.pausebtn{height:36px;padding:0 14px;font-size:13px}
.rangebtn{height:36px;padding:0 13px;font-size:17px;line-height:1}
.rangebtn.on{color:#0a1020;background:linear-gradient(180deg,var(--cyan),#3a9fd8);border-color:transparent}
.rangebtn.off{opacity:.32;pointer-events:none}   /* rotate disabled mid-wave (foes only at default orientation) */
/* HUD folding (ALL viewports): collapse the bottom-left cluster from 9 controls to 4. Speed shows just its
   active option (tap to expand the segment); the 3 region overlays (ranges/regions/ability areas) fold behind
   one ⌖ target button; Top View + Pause stay standalone. Tap the group to expand in place; picking an option
   (or tapping elsewhere) folds it back. */
.foldbtn{display:block}
.spd:not(.open) button:not(.on){display:none}
.bf-bl:not(.vopen) .rb-fold{display:none}
.bf-bl.vopen .foldbtn{color:#0a1020;background:linear-gradient(180deg,var(--cyan),#3a9fd8);border-color:transparent}
/* touch: counter-scale the floating button clusters (the whole stage renders at ~0.46× on a phone, so a
   36px button is ~17 real px — far under the ~44px touch guideline). Corner-anchored transforms grow the
   clusters INTO the board without moving anything else; desktop (no .touch-ui) is untouched. */
.touch-ui .bf-bl{transform:scale(1.6);transform-origin:left bottom}

/* ---------- surge rail: mobile ability controls (touch only) — Style A "Rune Tile" ----------
   One button per castable T3–T5 tower, stacked upward from just above the speed control (JS sets the
   display + a count-based scale so five fit under the 9-o'clock line and extras spill above it). */
.surge-rail{position:absolute;left:40px;bottom:104px;z-index:41;display:none;flex-direction:column-reverse;
  gap:14px;align-items:flex-start;transform-origin:left bottom;pointer-events:auto}
.sr-btn{position:relative;width:52px;height:52px;border-radius:14px;padding:0;cursor:pointer;
  display:grid;place-items:center;border:1.5px solid var(--c,#fff);
  background:linear-gradient(158deg,var(--lite,#fff),var(--dark,#333));
  box-shadow:0 0 16px -5px var(--glow,#fff),inset 0 1px 0 rgba(255,255,255,.28),0 5px 12px -7px #000;
  -webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:transform .07s ease,filter .15s ease}   /* touch-action:none = own the press-hold gesture; without it real phones fire pointercancel mid-hold and the spatial fan never opened */
.sr-btn:active{transform:scale(.9)}
.sr-btn .sr-g{font-size:25px;line-height:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.sr-btn .sr-ch{position:absolute;right:-5px;bottom:-5px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;
  background:#080b1c;border:1.5px solid var(--c,#fff);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}
.sr-btn.dim{filter:saturate(.5) brightness(.6)}
.sr-btn.supp{filter:saturate(.45) brightness(.6)}
.sr-btn.stun{filter:grayscale(.55) brightness(.72)}
.sr-btn.el-fire{--c:var(--fire);--lite:var(--fire-lite);--dark:var(--fire-dark);--glow:var(--fire-glow)}
.sr-btn.el-ice{--c:var(--ice);--lite:var(--ice-lite);--dark:var(--ice-dark);--glow:var(--ice-glow)}
.sr-btn.el-lit{--c:var(--lit);--lite:var(--lit-lite);--dark:var(--lit-dark);--glow:var(--lit-glow)}
.sr-btn.el-earth{--c:var(--earth);--lite:var(--earth-lite);--dark:var(--earth-dark);--glow:var(--earth-glow)}
.sr-btn.el-arc{--c:var(--arc);--lite:var(--arc-lite);--dark:var(--arc-dark);--glow:var(--arc-glow)}
/* surge SPATIAL FAN — hold a positional color to pick WHICH tower casts (= where it lands). Touch-only popup,
   viewport-fixed (real px, DPI-independent); a mini-arena places each tower where it really is + previews its
   ability footprint. Chips reuse .sr-btn styling/coloring, repositioned absolutely on the map. */
.surge-fan{position:fixed;z-index:200;padding:8px;border-radius:50%;
  background:rgba(9,12,28,.9);border:1px solid rgba(150,196,255,.28);
  box-shadow:0 14px 34px -12px #000,0 0 0 3px rgba(5,6,14,.5);touch-action:none;-webkit-tap-highlight-color:transparent}
.surge-fan .sf-map{position:relative;overflow:visible}
.surge-fan .sf-map canvas{position:absolute;inset:0;width:100%;height:100%}
.sf-chip{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:13px;z-index:2}
.sf-chip:active{transform:translate(-50%,-50%) scale(.92)}
.sf-chip.active{box-shadow:0 0 0 2px #fff,0 0 18px -3px var(--c),inset 0 1px 0 rgba(255,255,255,.28)}
.sf-chip.dim{filter:saturate(.5) brightness(.62)}
.touch-ui .hud-tr{transform:scale(1.45);transform-origin:right top;right:186px}   /* shifted left of the shop column — scaled 1.45 it grew past the shop's top edge */
/* tower info panel on touch: 2-COLUMN, bottom-right, expands LEFT over the shop (you don't need the shop
   while inspecting a tower). Full text size; head + action row span both columns, the rest auto-flows. */
.touch-ui .info-panel{top:auto;bottom:14px;right:14px;width:395px;transform:scale(1.35);transform-origin:right bottom;
  display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:2px}   /* narrower (was 430 — visually touched the arena); taller instead: sections carry more vertical air */
.touch-ui .info-panel .ip-head,
.touch-ui .info-panel .ip-actions{grid-column:1/-1}
.touch-ui .shop-tip{transform:scale(2.2);transform-origin:right top}   /* seed info card readable on phone; TOP origin so the JS viewport clamp maps 1:1 to what's visible */
/* synergy Preview popup: description 2×, wider box to carry it */
.touch-ui .ov-prevbox{width:960px;max-height:760px}
.touch-ui .pv-desc{font-size:28px;line-height:1.4}
/* (surge/charge bar + Next Wave positions are set INLINE by surge.js placeSurge() — inline styles win there) */
.touch-ui .callbtn .cb-t{font-size:28px;font-weight:800}
.touch-ui .callbtn .cb-s{font-size:16px;font-weight:700}
/* tower info grid flow: stats top-left, ability top-right, LINKS box (synergy names live in its rows)
   bottom-left; the button row + actions span the full width at the bottom */
.touch-ui .info-panel .ip-res{align-self:start}   /* "No link yet" box hugs its text instead of stretching */
.touch-ui .info-panel .ip-head{text-align:center}                    /* head rows (element · name · tier) centered */
.touch-ui .info-panel .ip-head .ip-el{justify-content:center}
.touch-ui .info-panel .ip-res{text-align:center;grid-column:1/-1;justify-self:center;min-width:62%}   /* Links section spans the panel, centered */
/* single-column case: when the ability box is hidden (T1/T2 towers) the stats block is alone in its row —
   span + centre it like the Links box; a second visible box restores the 2-column flow automatically */
.touch-ui .info-panel:has(.ip-ability[style*="none"]) .ip-stats{grid-column:1/-1;justify-self:center;min-width:62%}
.touch-ui .info-panel .ip-res .rl{justify-content:center}
.touch-ui .info-panel .ip-stats{order:1}
.touch-ui .info-panel .ip-ability{order:2}
.touch-ui .info-panel .ip-res{order:3}
.touch-ui .info-panel .ip-btnrow{order:8;grid-column:1/-1;display:flex;gap:8px;margin:18px 16px 22px}   /* air above (after the Links section) and below (before Sell/Close) */
.touch-ui .info-panel .ip-btnrow .ip-upgrade{flex:1;margin:0}
.touch-ui .info-panel .ip-actions{order:9;grid-column:1/-1}
/* Codex + Bestiary windows sized TO THEIR CONTENT (not full screen): codex = 2 card-rows ≈ 640px tall,
   bestiary = 1 tall card-row ≈ 575px. Text/art scaled so the cards FILL their rows with no dead space. */
.touch-ui #ov-codex .ov-box{width:80%;height:88%;max-height:none}   /* narrower: full-width cards read too wide */
.touch-ui #ov-foes .ov-box{width:92%;height:88%;max-height:none}   /* maxed (PAUSED pill still clears the top) — long foe descriptions need the room */
/* Bestiary title: larger (×~1.35) and CENTERED (the ✕ keeps its corner) */
/* Codex title (mock): docked LEFT, subtitle inline beside it, element pills fill the right */
.touch-ui #ov-codex .ov-head h1{flex:0 0 auto;text-align:left;font-size:28px;display:flex;align-items:center;gap:14px}
.touch-ui #ov-codex .ov-head h1 small{font-size:15px;display:inline-block;margin:0;padding-left:14px;border-left:1px solid rgba(150,190,255,.2)}
.touch-ui #ov-codex .elc{font-size:21px;padding:9px 16px;gap:9px}   /* 1.5× pills */
/* drop the page headers below the PAUSED pill (it hovers over the window's top edge); center-align the
   row so the back button and title sit on one line even when the pill legend wraps */
.touch-ui #ov-codex .ov-head,.touch-ui #ov-foes .ov-head{margin-top:36px;align-items:center}
/* Bestiary header: docked LEFT with the subtitle inline — consistent with the Codex */
.touch-ui #ov-foes .ov-head{margin-bottom:10px}
.touch-ui #ov-foes .ov-head h1{flex:1;text-align:left;font-size:28px;display:flex;align-items:center;gap:14px}
.touch-ui #ov-foes .ov-head h1 small{font-size:15px;display:inline-block;margin:0;padding-left:14px;border-left:1px solid rgba(150,190,255,.2)}
/* Resonance Codex: VERTICAL thumb-scroll, 2 columns (2026-07-12 — replaced the horizontal card-snap
   carousel: up/down beats left/right for thumbs) */
.touch-ui .syn-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;
  grid-auto-rows:max-content;   /* content-sized rows (the 30px type keeps ~1.5 rows in view). NOT auto (collapses
     in this definite-height scroller) and NOT minmax(%,max-content) (Chrome pins the row to the % min and clips) */
  overflow-y:auto;overflow-x:hidden;touch-action:pan-y;align-content:start;
  scrollbar-width:none;-ms-overflow-style:none}
.touch-ui .syn-grid::-webkit-scrollbar{display:none}
.touch-ui .syn-grid .syn-card{padding:22px 24px 18px;gap:12px}
.touch-ui .syn-card .syn-name{font-size:29px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;flex:0 1 auto}   /* 29px: "Conflagration" (one unbreakable word) must fit the narrower card */
.touch-ui .syn-card .syn-desc{font-size:30px;line-height:1.45;margin:auto 0;padding:10px 0;
  display:block;overflow:visible;-webkit-line-clamp:none}   /* UNCLAMPED; margin:auto 0 centers it in the tall card so the fixed 1.5-row height reads deliberate, not empty */
.touch-ui .syn-card .syn-orb{width:54px;height:54px;font-size:26px}
.touch-ui .syn-card .syn-plus,.touch-ui .syn-card .syn-arrow{font-size:24px}
.touch-ui .syn-card .syn-tag{font-size:19px;padding:6px 16px}
.touch-ui .syn-card .syn-prev{height:60px;font-size:22px;padding:0 28px;border-radius:14px;margin-left:auto}
/* Bestiary: VERTICAL thumb-scroll, 2 columns (2026-07-12 — replaced the horizontal carousel) */
.touch-ui .foe-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;
  grid-auto-rows:max-content;   /* DYNAMIC rows: every card gets its natural height (foe cards vary a lot — a
     percent min-height clipped the tall ones); the big type below keeps ~1.5 rows in view */
  grid-template-rows:none;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;align-content:start;
  scroll-snap-type:none;scrollbar-width:none;-ms-overflow-style:none}
.touch-ui .foe-grid .foe-card{padding:22px 26px 18px;gap:12px;text-align:center;overflow:visible;scrollbar-width:none}
.touch-ui .foe-grid .foe-card::-webkit-scrollbar{display:none}
.touch-ui .foe-card>*{flex-shrink:0}   /* stop the flexbox squishing the description below its text (that spilled it onto the stats row) */
.touch-ui .foe-card .fc-top{justify-content:center}
.touch-ui .foe-card canvas{width:150px;height:150px}
.touch-ui .foe-card .fc-name{font-size:34px}
.touch-ui .foe-card .fc-role{font-size:19px}
.touch-ui .foe-card .fc-desc{font-size:23px;line-height:1.38;min-height:0}
.touch-ui .foe-card .fc-stats{font-size:22px;justify-content:center}
.touch-ui .foe-card .fc-stats span b{font-size:16px}
.touch-ui .foe-card .fc-weak{font-size:22px}
.touch-ui .foe-card .fc-weak .wl{font-size:16px}
.touch-ui .foe-card .fc-trait{font-size:22px}
.touch-ui .foe-card .fc-from{font-size:16px}
/* incoming-wave telegraph box 1.5× (fade keeps the scale so it doesn't snap small mid-dissolve).
   NARROW single-column: long titles/hints ("X + Y" combo waves) wrap onto extra rows instead of
   stretching wide — 200px ×1.5 = 300 visual, which stays clear of the arena's left rim (~320). */
.touch-ui .wave-prev{transform:scale(1.5);transform-origin:left top;max-width:180px}   /* 180×1.5+16 = 286 — clear of the arena rim (~320) incl. border/glow */
/* synergy-formed toast (same top-left column): same narrow 1.5× treatment, moved below the telegraph's scaled
   extent. Its toastIn animation drives `transform`, so the scale must live INSIDE the keyframes (toastInT). */
.touch-ui .syn-toast{transform-origin:left top;max-width:180px;top:92px;animation-name:toastInT;
  flex-direction:column;align-items:flex-start;gap:8px;text-align:left}   /* icon on top, text stacked UNDER it, left-aligned */
@keyframes toastInT{0%{opacity:0;transform:translateX(-24px) scale(1.5)}4%{opacity:1;transform:translateX(0) scale(1.5)}
  92%{opacity:1}100%{opacity:0;transform:translateX(-10px) scale(1.5)}}
.touch-ui .wave-prev.faded{transform:translateY(-10px) scale(1.44)}
/* Run Summary / milestone window bigger on phone */
.touch-ui .mile-box{transform:scale(1.3)}
/* Run Summary: the Resume Game button centered at the bottom-middle of the WINDOW (all platforms) */
.mile-box.summary{position:relative;padding-bottom:80px}
.mile-box.summary .mile-cont{position:absolute;left:50%;bottom:22px;transform:translateX(-50%)}
/* Sanctum / Run-Complete meta panel: 94vh is REAL-viewport units (≈367 stage-px on a phone — it clipped
   the panel's bottom); size in stage units instead, near-fullscreen, with the upgrade tree zoomed and
   each element group flattened to ONE row (Fire = all its cells as columns) scrolling horizontally. */
.touch-ui .meta-panel{width:97%;max-height:790px;padding:18px 26px 16px}
.touch-ui .mp-title{font-size:34px;text-align:left}   /* left-docked titles across the mobile screens */
.touch-ui .mp-shards-l{font-size:28px;display:inline-flex;vertical-align:middle}   /* label + number share ONE row (saves ~50px for the footer buttons) */
.touch-ui .mp-shard-row{display:inline-flex;vertical-align:middle;margin-left:16px}
.touch-ui .mp-amount{font-size:56px}
.touch-ui .mp-earn-cap{font-size:26px}                      /* "shards bank every wave" ~2.5× */
.touch-ui .mp-earn .ep{font-size:23px;padding:6px 16px;gap:9px}
.touch-ui .mp-earn .ep::before{width:12px;height:12px}
.touch-ui .mp-tree-l{font-size:24px}
/* Upgrades tree: VERTICAL thumb-scroll (2026-07-12 — replaced the horizontal element-strip): element
   groups stack full-width, each group's cells wrap at ≤6 columns so the cards get wider + taller-tap. */
.touch-ui .mp-tree{zoom:2;flex-flow:column nowrap;align-items:stretch;overflow:visible;
  touch-action:pan-y;gap:10px}   /* no inner scrollbar — .meta-panel is already the vertical scroller */
.touch-ui .ugrp{width:100%}
.touch-ui .ugrp-cells{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:unset;gap:8px}
.touch-ui .ucell{padding:10px 5px 9px}
/* mobile ± controls 2× the base (18→36px design; ×the tree's zoom:2 on top) — bigger tap targets;
   the taller ± row grows each card, so element groups below (Ice, …) simply push further down */
.touch-ui .ucell .uc-row{gap:8px;margin:5px 0 3px}
.touch-ui .ucell .uc-mn,.touch-ui .ucell .uc-pl{width:36px;height:36px;border-radius:12px;font-size:26px}
.touch-ui .ucell .uc-cost{font-size:12px}    /* cost + level nudged up a touch for readability (they sit inside the tree's zoom:2) */
.touch-ui .ucell .uc-lv{font-size:10px}
.touch-ui .mp-arrow{display:none}   /* ‹ › strip arrows drove the horizontal scroll — gone with it */
.touch-ui .meta-foot{margin-top:14px}
.touch-ui .meta-foot .btn{height:72px;font-size:25px;padding:0 34px}
/* respec disclaimer ("Finish or abandon your current run to reallocate…") sits OUTSIDE the tree's zoom:2,
   so its 11px was ~2px physical on a phone — unreadable. ~5× it and stack the row so the long line wraps
   cleanly; the extra height just extends the .meta-panel scroller so it's reachable. */
.touch-ui .mp-respec{flex-direction:column;gap:16px;margin-top:22px}
.touch-ui .mp-respec-hint{font-size:52px;line-height:1.25;text-align:center;max-width:94%}
.touch-ui #btn-respec-all{height:auto;font-size:40px;padding:14px 36px;border-radius:16px}
/* gold / shard pills 2.5× in the top-left (readability); tablets have real screen area — 1.6× is plenty */
.touch-ui .hud-tl{transform:scale(1.9);transform-origin:left top}
.tablet-ui .hud-tl{transform:scale(1.6)}
.touch-ui .ov-box.ov-sm{transform:scale(1.5)}   /* small windows (settings / covenants / feedback) — centered, so scaling is symmetric */

/* tower info panel */
.info-panel{position:absolute;width:200px;right:172px;top:70px;z-index:60;padding:0;overflow:hidden;border-radius:16px}
.ip-head{padding:13px 16px 11px;background:linear-gradient(180deg,var(--cc-a,rgba(255,106,61,.22)),transparent)}
.ip-head .ip-el{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cc,#fff)}
.ip-head .ip-name{font-family:'Cinzel',serif;font-weight:700;font-size:22px;color:#fff;margin-top:3px;
  text-shadow:0 0 16px var(--cg,rgba(255,255,255,.4))}
.ip-head .ip-tier{font-size:13px;color:var(--tx-dim);font-weight:600;letter-spacing:.06em;margin-top:1px}
.ip-elico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;
  background:rgba(255,255,255,.06);border:1px solid var(--cc,#fff);color:var(--cc,#fff);box-shadow:0 0 12px var(--cg,transparent)}
.ip-stats{padding:6px 16px 4px;display:flex;flex-direction:column;gap:8px}
.stat{display:flex;flex-direction:column;gap:4px}
.stat .sr{display:flex;justify-content:space-between;font-size:13px}
.stat .sr .sl{color:var(--tx-dim);letter-spacing:.05em;text-transform:uppercase;font-size:11px;font-weight:600}
.stat .sr .sv{color:#fff;font-weight:700}
.stat .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.stat .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--cd,#555),var(--cc,#fff));
  box-shadow:0 0 10px var(--cg,transparent)}
.ip-res{margin:8px 16px;padding:10px 12px;border-radius:11px;
  background:rgba(120,200,255,.07);border:1px solid rgba(120,200,255,.18)}
.ip-res .rt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin-bottom:4px}
.ip-res .rl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx);font-weight:600;margin-top:4px}
.ip-res .rl .rd{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ip-res .none{font-size:12px;color:var(--tx-faint)}
.ip-ability{margin:0 16px 10px;padding:10px 11px;border-radius:11px;
  background:linear-gradient(180deg,rgba(192,107,255,.14),rgba(192,107,255,.04));
  border:1px solid rgba(192,107,255,.3)}
.ip-ability .ab-hd{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.ip-ability .ab-ico{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  font-size:18px;border:1px solid var(--cc,#fff);color:#fff;box-shadow:0 0 14px var(--cg,transparent);
  background:radial-gradient(circle,var(--cc-a,rgba(192,107,255,.4)),rgba(0,0,0,.15))}
.ip-ability .ab-t{font-weight:700;font-size:14px;color:#fff;line-height:1.1}
.ip-ability .ab-ch{margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:700;color:var(--cl,#fff);
  background:rgba(255,255,255,.08);border:1px solid var(--cc-a,#5557);border-radius:7px;padding:2px 7px;white-space:nowrap}
.ip-ability .ab-d{font-size:11.5px;color:var(--tx-dim);line-height:1.35}
.ip-ability .ab-btn{margin-top:7px;height:32px;font-size:13px;padding:0 16px;border-radius:8px}
.ip-upgrade{margin:0 16px 10px}
.ip-upgrade .btn{width:100%;height:38px;font-size:14px;border-radius:10px}
.ip-actions{display:flex;gap:8px;padding:0 14px 13px}
.ip-actions .btn{flex:1;height:38px;font-size:14px;border-radius:10px}
.ip-actions .sell{color:#ffb0a0;border-color:rgba(255,120,120,.45)}

/* ---------- arena-bg screens (title / meta) ---------- */
.arena-bg{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(140% 120% at 50% 30%,#2a2f50 0%,#1a1e38 34%,#10142a 64%,#080b18 100%)}

.title-screen{position:absolute;inset:0;display:grid;grid-template-columns:300px 1fr 320px;
  align-items:center;padding:60px 30px 58px;gap:22px;z-index:5}
.title-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.title-side{align-self:center}
.title-emblem{position:relative;width:190px;height:190px;margin-bottom:2px}
.title-emblem canvas{position:absolute;inset:0;width:100%;height:100%}
.logo-main{font-weight:900;font-size:84px;line-height:.92;letter-spacing:.04em;color:#fff;
  text-shadow:0 0 30px rgba(150,200,255,.55),0 0 60px rgba(150,120,255,.35);margin-top:8px}
.logo-sub{font-weight:700;font-size:22px;letter-spacing:.62em;color:var(--gold);
  margin:6px 0 4px 18px;text-shadow:0 0 18px rgba(231,198,107,.45)}
.logo-rule{width:280px;height:1px;margin:14px 0 30px;
  background:linear-gradient(90deg,transparent,rgba(231,198,107,.7),transparent)}
.logo-tag{font-weight:600;font-size:15px;letter-spacing:.28em;color:rgba(207,224,255,.66);
  margin:3px 0 2px 20px;text-shadow:0 0 16px rgba(120,160,255,.35)}
.title-menu{display:flex;flex-direction:column;gap:11px;width:330px}
.title-menu .btn{height:50px;font-size:19px;display:flex;align-items:center;justify-content:center;gap:10px}
.title-menu .btn.hero{height:60px;font-size:23px}
.title-menu .btn.small{height:44px;font-size:14px;letter-spacing:.04em;padding:0 8px}
.title-row{display:flex;gap:13px}
.title-row .btn{flex:1}
/* top-right icon cluster (title) */
.title-icons{position:absolute;top:18px;right:20px;display:flex;gap:10px;z-index:50}
.title-icons .iconbtn{width:46px;height:46px;border-radius:13px}

/* left: player profile card + daily challenge */
.pcard{padding:16px 16px 15px;border-radius:16px;display:flex;flex-direction:column;gap:13px}
.pcard .pc-id{display:flex;align-items:center;gap:12px}
.pcard .pc-av{width:52px;height:52px;border-radius:13px;flex:0 0 auto;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 120%,rgba(192,107,255,.5),rgba(20,16,40,.6));
  border:1px solid rgba(192,107,255,.5);box-shadow:0 0 16px -3px var(--arc-glow)}
.pcard .pc-nm{font-family:'Cinzel',serif;font-weight:700;font-size:18px;color:#fff;line-height:1}
.pcard .pc-rk{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-top:4px}
.pc-stats{display:flex;flex-direction:column;border-top:1px solid rgba(150,190,255,.12)}
.pc-stats .ps{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;
  border-bottom:1px solid rgba(150,190,255,.08);font-size:13px}
.pc-stats .ps .k{color:var(--tx-dim);letter-spacing:.04em;text-transform:uppercase;font-size:11px;font-weight:600}
.pc-stats .ps .v{color:#fff;font-weight:700;font-size:15px}
/* Daily Rift title card — matches the resonanse mockup (d-head/timer · name · modifier · foot CTA) */
.daily{margin-top:14px;padding:15px 16px 14px;border-radius:15px;position:relative;overflow:hidden}
.daily .d-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.daily .dl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:700;
  display:flex;align-items:center;gap:7px}
.daily .d-timer{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--gold);
  display:flex;align-items:center;gap:4px;white-space:nowrap}
.daily .dn{font-family:'Cinzel',serif;font-weight:700;font-size:20px;color:#fff;margin:10px 0 3px;line-height:1.04}
.daily .d-mod{font-size:12.5px;font-weight:600;color:var(--arc-lite);letter-spacing:.01em}
.daily .dd{font-size:11.5px;color:var(--tx-dim);line-height:1.35;margin-top:5px}
.daily .d-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px}
.daily .d-cta{display:inline-flex;align-items:center;gap:7px;font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:13.5px;letter-spacing:.04em;color:#10300a;
  background:linear-gradient(180deg,#9ff05a,#8ee84d 40%,#3f9b22);padding:9px 16px;border-radius:10px;
  border:1px solid #cdf59a;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px -4px rgba(110,220,70,.6)}
.daily.tr-cta:hover .d-cta{filter:brightness(1.06)}
.daily .d-cta.ghost{background:none;color:var(--cyan);border:1px solid rgba(95,208,255,.5);box-shadow:none}
.daily .d-streak{font-size:11.5px;font-weight:700;color:var(--gold);letter-spacing:.02em;white-space:nowrap}
.daily .d-result{font-size:12.5px;font-weight:700;color:var(--lit);display:flex;align-items:center;gap:5px}

/* shared leaderboard rows (standing card + full page) */
.lb-rows{display:flex;flex-direction:column}
.lb-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:9px;
  padding:8px;border-radius:9px;font-size:14px;border:1px solid transparent}
.lb-row+.lb-row{margin-top:2px}
.lb-row .rk{font-weight:700;color:var(--tx-faint);font-size:13px;text-align:center}
.lb-row .nm{font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:7px}
.lb-row .rt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.lb-row .kl{color:var(--tx-faint);font-size:10.5px;font-weight:600;white-space:nowrap}
.lb-row .wv{color:var(--cyan);font-weight:700;font-size:13.5px;white-space:nowrap}
.lb-row.r1 .rk{color:#ffd86b}.lb-row.r2 .rk{color:#cdd6e8}.lb-row.r3 .rk{color:#e0a36a}
.lb-row.r1 .rk,.lb-row.r2 .rk,.lb-row.r3 .rk{text-shadow:0 0 8px currentColor}
.lb-row.you{background:linear-gradient(90deg,rgba(95,208,255,.16),rgba(95,208,255,.03));
  border-color:rgba(95,208,255,.4);box-shadow:0 0 16px -6px var(--cyan)}
.lb-row.you .nm{color:#fff}
.lb-row.you .nm::after{content:'YOU';font-size:8.5px;font-weight:800;letter-spacing:.1em;color:#04203b;
  background:var(--cyan);padding:2px 5px;border-radius:5px;line-height:1}
.lb-rows .rc-sep{text-align:center;color:var(--tx-faint);font-weight:700;letter-spacing:.3em;line-height:.6;padding:3px 0 1px}   /* the "···" gap between the top 3 and your pinned rank */

/* right: compact "your standing" rank card */
.rank-card{padding:15px;border-radius:16px;display:flex;flex-direction:column}
.rank-card .rc-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid rgba(231,198,107,.2)}
.rank-card .rc-l{font-family:'Cinzel',serif;font-weight:700;font-size:14px;letter-spacing:.06em;
  color:var(--gold);text-transform:uppercase}
.rank-card .rc-rank{font-family:'Rajdhani';font-weight:700;font-size:34px;line-height:.8;color:#fff;
  display:flex;align-items:baseline;gap:6px;text-shadow:0 0 16px rgba(95,208,255,.5)}
.rank-card .rc-rank small{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.rank-card .rc-chase{font-size:12px;color:var(--tx-dim);font-weight:600;margin-bottom:10px;letter-spacing:.02em}
.rank-card .rc-chase b{color:var(--tx)}
.rank-card .rc-rows{margin-bottom:12px}
.rank-card .lb-cta{height:42px;font-size:14px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;gap:6px}

/* ===== full leaderboard page ===== */
.lb{position:absolute;inset:0;margin:0 auto;max-width:1200px;display:flex;flex-direction:column;padding:20px 34px 22px;overflow:hidden}   /* squeezed like the Daily Rift — full-stage width read as a barren sheet on wide screens */
.lb-top{display:flex;flex-direction:column;align-items:center;gap:11px;margin-bottom:14px;text-align:center}   /* centred title+tabs — the left-docked title sat under the back arrow */
.lb-top h1{font-weight:700;font-size:32px;color:#fff;letter-spacing:.04em;
  display:flex;align-items:center;gap:13px;text-shadow:0 0 18px rgba(231,198,107,.4)}
.lb-top h1 .fl{color:var(--gold);font-size:26px}
.lb-top h1 small{display:block;font-family:'Rajdhani';font-weight:600;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);margin-top:3px}
.lb-tabs{display:flex;gap:8px}
.lb-tab{padding:9px 18px;border-radius:11px;cursor:pointer;font-weight:700;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tx-dim);background:rgba(255,255,255,.04);
  border:1px solid rgba(150,190,255,.15);transition:.15s}
.lb-tab:hover{color:#fff}
.lb-tab.on{color:#0a1020;background:linear-gradient(180deg,var(--cyan),#3a9fd8);
  border-color:rgba(180,230,255,.6);box-shadow:0 0 14px rgba(95,208,255,.4)}
.podium{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:16px;align-items:end;margin-bottom:14px;padding-top:8px}
.pod{border-radius:16px;position:relative;display:flex;flex-direction:column;align-items:center;padding:14px;overflow:visible}
.pod .pod-medal{margin:0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#0a0d18;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.pod.p1 .pod-medal{background:radial-gradient(circle at 40% 30%,#ffe9a0,#e7c66b 60%,#a87d22)}
.pod.p2 .pod-medal{background:radial-gradient(circle at 40% 30%,#fff,#cdd6e8 60%,#8a93a8)}
.pod.p3 .pod-medal{background:radial-gradient(circle at 40% 30%,#ffd6b0,#e0a36a 60%,#9c6432)}
.pod .pod-av{width:56px;height:56px;border-radius:15px;margin-top:8px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 120%,rgba(192,107,255,.5),rgba(20,16,40,.6));
  border:1px solid rgba(192,107,255,.5);box-shadow:0 0 18px -3px var(--arc-glow)}
.pod.p1 .pod-av{width:66px;height:66px;border-color:var(--gold);box-shadow:0 0 22px -3px var(--gold)}
.pod .pod-nm{font-family:'Cinzel',serif;font-weight:700;font-size:17px;color:#fff;margin-top:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pod .pod-wave{font-family:'Rajdhani';font-weight:700;font-size:23px;color:var(--cyan);margin-top:4px;
  line-height:1;white-space:nowrap;text-shadow:0 0 12px rgba(95,208,255,.5)}
.pod .pod-kills{font-size:12px;color:var(--tx-dim);font-weight:600;margin-top:4px;letter-spacing:.04em;white-space:nowrap}
.pod.p1{border:1px solid rgba(231,198,107,.5);box-shadow:inset 0 0 30px rgba(231,198,107,.12),0 12px 30px rgba(0,0,0,.5)}
.pod .pod-bar{margin-top:12px;width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,rgba(95,208,255,.22),transparent)}
.pod.p1 .pod-bar{height:24px;background:linear-gradient(180deg,rgba(231,198,107,.3),transparent)}
.pod.p2 .pod-bar{height:15px}.pod.p3 .pod-bar{height:9px}
.lb-list{flex:1;overflow:auto;border-radius:14px;padding:6px 10px;display:flex;flex-direction:column;gap:1px;
  scrollbar-width:none;-ms-overflow-style:none}   /* OS scrollbar read as out of place on the styled panel; wheel/touch still scroll */
.lb-list::-webkit-scrollbar{display:none}
.lb-list .lhead{display:grid;grid-template-columns:46px 1fr 110px 100px;gap:10px;padding:4px 12px 7px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-faint);font-weight:700;
  border-bottom:1px solid rgba(150,190,255,.12)}
.lb-list .lrow{display:grid;grid-template-columns:46px 1fr 110px 100px;gap:10px;align-items:center;
  padding:8px 12px;border-radius:10px;font-size:15px;border:1px solid transparent}
.lb-list .lrow .lr-rk{font-weight:700;color:var(--tx-faint);text-align:center}
.lb-list .lrow .lr-nm{font-weight:700;color:var(--tx);display:flex;align-items:center;gap:10px}
.lb-list .lrow .lr-av{width:28px;height:28px;border-radius:8px;flex:0 0 auto;
  background:radial-gradient(circle at 50% 120%,rgba(192,107,255,.5),rgba(20,16,40,.6));border:1px solid rgba(192,107,255,.4)}
.lb-list .lrow .lr-kl{color:var(--tx-dim);font-weight:600;font-size:13.5px;justify-self:end}
.lb-list .lrow .lr-wv{color:var(--cyan);font-weight:700;justify-self:end;white-space:nowrap;text-shadow:0 0 10px rgba(95,208,255,.4)}
.lb-list .lrow:nth-child(even){background:rgba(255,255,255,.02)}
.lb-list .lrow.r1 .lr-rk{color:#ffd86b;text-shadow:0 0 8px currentColor}
.lb-list .lrow.r2 .lr-rk{color:#cdd6e8;text-shadow:0 0 8px currentColor}
.lb-list .lrow.r3 .lr-rk{color:#e0a36a;text-shadow:0 0 8px currentColor}
.lb-list .lrow.you{background:linear-gradient(90deg,rgba(95,208,255,.16),rgba(95,208,255,.04));
  border-color:rgba(95,208,255,.45);box-shadow:0 0 18px -6px var(--cyan)}
.lb-list .lrow.you .lr-nm{color:#fff}
.lb-list .lrow.you .lr-nm::after{content:'YOU';font-size:9px;font-weight:800;letter-spacing:.1em;color:#04203b;
  background:var(--cyan);padding:2px 6px;border-radius:5px}
.lb-back{position:absolute;left:24px;top:22px;z-index:20}

/* score submit (run complete) */
.lb-submit{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:10px}
.lb-submit input{width:170px;height:36px;padding:0 12px;border-radius:9px;
  font-family:'Rajdhani';font-weight:700;font-size:15px;color:#fff;
  background:rgba(10,15,34,.9);border:1px solid rgba(140,180,255,.3);outline:none}
.lb-submit input:focus{border-color:var(--cyan)}
.lb-submit .btn{height:36px;font-size:13px;padding:0 16px;border-radius:9px}
.lb-status{font-size:13px;font-weight:700;color:var(--earth)}
/* meta / run complete */
.meta{display:grid;place-items:center}
.meta-panel{position:relative;width:780px;max-height:min(740px,94vh);overflow-y:auto;border-radius:18px;padding:24px 34px 20px;text-align:center;z-index:10}
.mp-title{font-weight:700;font-size:27px;color:#fff;letter-spacing:.03em;text-shadow:0 0 18px rgba(150,200,255,.4)}
.mp-rule{height:1px;margin:12px 0 14px;background:linear-gradient(90deg,transparent,rgba(231,198,107,.55),transparent)}
.mp-shards-l{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim);font-weight:600}
.mp-info{cursor:pointer;color:var(--cyan);font-size:13px;opacity:.75;vertical-align:middle;user-select:none}
.mp-info:hover{opacity:1}
.mp-shard-row{display:flex;align-items:center;justify-content:center;gap:11px;margin:8px 0 4px}
.mp-shard-ico{width:24px;height:38px;flex:0 0 auto}
.mp-shard-cluster{display:none}
.mp-shard-cluster .s{width:18px;height:42px;clip-path:polygon(50% 0,72% 26%,60% 100%,40% 100%,28% 26%);
  box-shadow:0 0 16px currentColor}
.mp-shard-cluster.blue .s{background:linear-gradient(160deg,#dcefff,#5fa8ff 55%,#2b5fb0);color:#5fa8ff}
.mp-shard-cluster.warm .s{background:linear-gradient(160deg,#ffd9c4,#ff8a5a 55%,#b04a22);color:#ff8a5a}
.mp-amount{font-family:'Rajdhani';font-weight:700;font-size:42px;line-height:1;
  color:var(--gold);text-shadow:0 0 26px rgba(231,198,107,.6)}
.mp-statline{font-size:13.5px;color:var(--tx-dim);font-weight:600;letter-spacing:.06em;margin-top:4px}
.mp-statline b{color:var(--tx)}
.mp-tree-l{font-weight:700;font-size:16px;color:#fff;margin:12px 0 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.mp-tree-l.centered{justify-content:center}
.mp-tree-l.centered .mp-tree-title{display:none}
/* shard-balance pill = the SHARD CURRENCY colour (gold), matching the shard
   amount above it — deliberately NOT the upgrades' palette, so it reads as your
   balance, not as one of the upgrade cards */
.mp-balance{display:inline-flex;align-items:center;gap:7px;font-family:'Rajdhani';
  font-size:15px;font-weight:700;color:var(--gold);
  background:rgba(231,198,107,.14);border:1px solid rgba(231,198,107,.5);
  border-radius:999px;padding:5px 13px;box-shadow:0 0 16px -4px rgba(231,198,107,.6)}
.mp-balance .shardico{filter:hue-rotate(-20deg) saturate(1.4)}
.mp-balance b{color:#fff;font-size:16px}
/* earn-breakdown pills (replaces the old plain-text note) */
#mp-earn-wrap{margin:8px 0 14px}
.mp-earn-cap{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-faint);margin:6px 0 7px}
.mp-earn{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:4px}
.mp-earn .ep{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--tx);
  background:rgba(255,255,255,.04);border:1px solid rgba(150,190,255,.2);border-radius:999px;padding:4px 11px}
.mp-earn .ep::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--epc,#9fb4e8);box-shadow:0 0 7px var(--epc,#9fb4e8)}
.ep-wave{--epc:#8ee84d}.ep-merge{--epc:#5fd0ff}.ep-kill{--epc:#c06bff}.ep-t3{--epc:#e7c66b}.ep-t5{--epc:#ff8a5a}
.mp-earn-note{font-size:12.5px;color:var(--tx-dim);margin:-4px 0 12px;line-height:1.5}
.mp-earn-note b{color:var(--cyan)}
.mp-earn-note em{color:var(--gold);font-style:normal;font-weight:600}
/* upgrade tree: 3 rows in a CAROUSEL — the ‹ › arrows scroll it horizontally (extra upgrades add
   COLUMNS, not rows, so the tree height stays capped at 3). Native scrollbar hidden; arrows drive it. */
.mp-tree-wrap{display:flex;align-items:stretch;gap:6px;margin-top:2px;min-width:0;max-width:100%}
/* flex:1 1 0 (NOT 1 1 auto): size the scroll area from the CONTAINER, not its content — with `auto`
   the flex-basis becomes the full content width (~all blocks), so it mis-sized to content and the inner
   overflow-x never engaged until a reflow (opening DevTools). 0-basis keeps it constrained always. */
.mp-tree{flex:1 1 0;min-width:0;max-width:100%;display:flex;flex-flow:row nowrap;align-items:flex-start;gap:8px;
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}   /* clean look: scrollbar hidden; scroll via ‹ › arrows + mouse-wheel. No snap (it was trapping travel). */
.mp-tree::-webkit-scrollbar{display:none}
/* ---- compact, self-labeling upgrade grid (one block per element / Core / Nexus device) ---- */
.ugrp{flex:0 0 auto;border:1px solid color-mix(in srgb,var(--gc) 45%,transparent);border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 16%,#10131f),#10131f);padding:7px 7px 8px}
.ugrp-h{display:flex;align-items:center;gap:6px;font-weight:800;font-size:12px;color:#fff;letter-spacing:.02em;
  margin:0 2px 7px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ugrp-h .ugrp-g{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:13px;
  background:color-mix(in srgb,var(--gc) 55%,#000);color:#fff}
.ugrp-cells{display:grid;grid-template-columns:repeat(3,68px);gap:6px}
.ucell{position:relative;border:1px solid rgba(150,170,210,.16);border-radius:9px;background:rgba(255,255,255,.03);
  padding:5px 3px 4px;text-align:center;cursor:pointer;transition:.12s}
.ucell.ok:hover{border-color:rgba(231,198,107,.55);background:rgba(255,255,255,.06)}
.ucell.maxed{border-color:rgba(231,198,107,.4)}
.ucell.cant{opacity:.6}
.ucell .uc-gly{width:24px;height:24px;margin:1px auto 3px;border-radius:7px;display:grid;place-items:center;
  font-size:14px;color:#fff;background:color-mix(in srgb,var(--uc) 80%,#000);box-shadow:0 0 8px -3px var(--uc)}
.ucell .uc-lbl{font-size:9px;font-weight:700;color:#aebbd0;letter-spacing:.01em;line-height:1.05;min-height:21px;
  display:flex;align-items:center;justify-content:center;text-transform:uppercase}
.ucell .uc-val{font-size:11px;font-weight:800;color:#fff;line-height:1.1;min-height:14px}
.ucell .uc-row{display:flex;align-items:center;justify-content:center;gap:4px;margin:3px 0 2px}
.ucell .uc-mn,.ucell .uc-pl{width:18px;height:18px;border-radius:6px;border:1px solid rgba(150,190,255,.3);
  background:rgba(150,190,255,.1);color:#cfe0ff;font-size:13px;font-weight:800;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0}
.ucell .uc-pl:hover:not(:disabled){background:rgba(120,220,150,.25);border-color:rgba(120,220,150,.6)}
.ucell .uc-pl:disabled{opacity:.3;cursor:default}
.ucell .uc-mn{border-color:rgba(255,140,170,.35);background:rgba(255,140,170,.12);color:#ffc2d4}
.ucell .uc-mn:hover{background:rgba(255,140,170,.28)}
.ucell .uc-mn.off{opacity:.18;pointer-events:none}
/* tap feedback: the ± depress on press, and a successful buy/refund pops + flashes the whole card gold —
   so on mobile (no hover) it's obvious the action registered. */
.ucell .uc-pl:active:not(:disabled),.ucell button.uc-mn:active{transform:scale(.85)}
@keyframes ucBought{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(231,198,107,0)}
  32%{transform:scale(1.13);box-shadow:0 0 22px 2px rgba(231,198,107,.75)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(231,198,107,0)}}
.ucell.uc-bought{animation:ucBought .4s ease-out; border-color:rgba(231,198,107,.65)}
.ucell .uc-cost{font-size:10px;font-weight:700;color:#e7c66b}
.ucell.cant .uc-cost{color:#ff9a9a}
.ucell.maxed .uc-cost{color:#cfe0ff}
.ucell .uc-lv{font-size:8.5px;color:#6f7e96;margin-top:1px}
/* tap-to-open detail popover (replaces hover — touch-friendly) */
.upg-pop{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:rgba(6,8,16,.55);backdrop-filter:blur(2px)}
.upg-pop.open{display:grid}
.upg-pop .up-card{position:relative;width:min(340px,86vw);border:1px solid color-mix(in srgb,var(--uc) 55%,transparent);
  border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--uc) 18%,#0e1220),#0e1220);
  padding:16px 16px 14px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.upg-pop .up-x{position:absolute;top:8px;right:10px;background:none;border:0;color:#9fb0c8;font-size:20px;cursor:pointer;line-height:1}
.upg-pop .up-h{display:flex;align-items:center;gap:9px;font-size:15px;color:#fff;margin-bottom:7px}
.upg-pop .up-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;font-size:16px;
  background:color-mix(in srgb,var(--uc) 75%,#000);color:#fff}
.upg-pop .up-d{font-size:12.5px;color:#bcc8dc;line-height:1.4;margin-bottom:9px}
.upg-pop .up-meta{font-size:12px;color:#9fb0c8;margin-bottom:12px}
.upg-pop .up-act{display:flex;justify-content:flex-end}
.upg-pop .up-buy{background:linear-gradient(180deg,#2a6a3e,#1f4f30);border:1px solid #3f8a5a;color:#eafff0;
  font-weight:700;font-size:13px;border-radius:9px;padding:8px 16px;cursor:pointer}
.upg-pop .up-buy:disabled{opacity:.45;cursor:default;filter:grayscale(.4)}
.upg-pop .up-max{color:#e7c66b;font-weight:800;letter-spacing:.05em}
/* upgrades page — quick description on hover (DESKTOP). Touch/tablet get the same text via the tap → .upg-pop
   popover instead (no hover), so this tip is only wired on non-touch. Appended to <body> so position:fixed
   maps to the viewport (not the scaled .stage). */
.upg-tip{position:fixed;z-index:190;max-width:300px;padding:13px 16px;border-radius:12px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--uc,#5fd0ff) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--uc,#5fd0ff) 16%,#0e1220),#0b0f1c);
  box-shadow:0 12px 30px rgba(0,0,0,.55);opacity:0;transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease}
.upg-tip.show{opacity:1;transform:translateY(0)}
.upg-tip .ut-n{display:block;font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:color-mix(in srgb,var(--uc,#9fe8ff) 55%,#ffffff);margin-bottom:5px}
.upg-tip .ut-d{font-size:15px;line-height:1.46;color:#d3ddee}
.upg-tip .ut-d b{color:#fff}
/* title Menu overlay (#ov-menu) — holds everything beyond Play/Resume; Sound+Settings icons sit in the header */
#ov-menu{z-index:190}                                    /* below the other overlays (200) so Settings/Feedback/etc. stack ON TOP and reveal the Menu again on close */
.ov-box.mm-box{width:min(500px,94vw)}                    /* .ov-box.mm-box beats .ov-box's 1100px default */
.touch-ui .ov-box.mm-box{transform:scale(1.4);width:min(420px,88vw)}   /* narrower on mobile → the window reads vertical, not squat/landscape */
.mm-hicons{display:flex;gap:8px;align-items:center}
.mm-body{display:flex;flex-direction:column;min-width:0}
.mm-body .title-row{margin:0}
/* the Menu overlay isn't inside .title-menu, so its buttons need their own sizing (were collapsing to bare text) */
.mm-body .btn{height:52px;font-size:18px;display:flex;align-items:center;justify-content:center;gap:10px}
.mm-body .btn.small{height:48px;font-size:15px;letter-spacing:.03em;padding:0 6px}
.mm-body .btn.mm-hero{height:58px;font-size:21px}
/* ONE node serves the title + the battle HUD — hide pre-run-only Progression and reveal the
   run-only action (Leave Run) when a run is live */
#ov-menu .mm-leave{display:none}
#ov-menu.in-run .mm-leave{display:flex}
#ov-menu.in-run .mm-prog{display:none}
#ov-menu.hide-howto .mm-howto{display:none}   /* fresh-run tutorial hidden only when a run PAST wave 1 exists (playing or resumable) — restarting would cost progress; wave 1 = nothing to lose */
/* Profile · How to Play · Leave Run share ONE centered action row; the visible count flexes by state —
   Leave Run shows only in-run, How to Play hides past wave 1 — so NO grid / per-state placement is needed.
   (title: [Profile · How to Play] · in-run w1: [Profile · How to Play · Leave Run] · past w1: [Profile · Leave Run]) */
.mm-actions{display:flex;gap:13px;justify-content:center;margin-top:15px}
.mm-actions>.btn{flex:1 1 0;max-width:230px}   /* mobile sizing lives in trials.css (.touch-ui #ov-menu .mm-actions) */
.mm-hero{font-weight:800!important;margin-bottom:2px}
.mm-sec{font:800 11px/1 'Rajdhani',sans-serif;letter-spacing:.16em;color:#6f80a6;text-transform:uppercase;
  margin:15px 0 9px;display:flex;align-items:center;gap:10px}
.mm-sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(140,180,255,.22),transparent)}
.mm-foot{margin-top:15px;font-size:12.5px;font-weight:600;color:#7385a6;text-align:center;
  background:none;border:none;cursor:pointer;padding:4px}
.mm-foot:hover{color:#aeb9d0}
.touch-ui .mm-foot{font-size:25px;padding:10px;margin-top:20px}   /* 2× the Send Feedback button on mobile (was ~8 real px) */
.mm-foot-row{display:flex;justify-content:center;gap:22px}
.pv-body{display:flex;flex-direction:column;gap:10px}
.pv-body p{margin:0;font-size:13.5px;line-height:1.55;color:#c6d2ea}
.pv-body b{color:#e9eefb}
.mp-arrow{flex:0 0 30px;border:1px solid rgba(150,190,255,.22);background:rgba(255,255,255,.04);color:#cfe0ff;
  border-radius:10px;font:700 23px/1 'Rajdhani';cursor:pointer;display:grid;place-items:center;transition:.12s;user-select:none;padding:0}
.mp-arrow:hover{background:rgba(150,190,255,.16);border-color:rgba(231,198,107,.5);color:#fff}
.mp-arrow.off{opacity:.28;cursor:default}   /* dimmed at the ends, but NOT pointer-events:none — a stale/early measure must never make the only scroll affordance unclickable; go() no-ops at the true ends */
.upg{position:relative;border-radius:11px;padding:8px 5px 9px;cursor:pointer;transition:.15s;
  background:rgba(255,255,255,.03);border:1px solid rgba(150,190,255,.15)}
.upg:hover{border-color:rgba(231,198,107,.5);transform:translateY(-2px)}
.upg.maxed{cursor:default;border-color:rgba(231,198,107,.35)}
.upg.cant{opacity:.55;cursor:not-allowed}
.upg.soon{cursor:default;opacity:.72;border-color:rgba(255,120,170,.3)}
.upg.soon:hover{transform:none;border-color:rgba(255,120,170,.4)}
.upg.soon .u-cost{color:#ffa6cb;font-size:10.5px}
.upg.soon .u-cost::before{display:none}
.upg .u-ico{width:34px;height:34px;margin:7px auto 5px;border-radius:10px;display:grid;place-items:center;
  font-size:18px;color:#fff;background:radial-gradient(circle,var(--uc,#3a4d8a),rgba(0,0,0,.25));
  border:1px solid var(--ub,rgba(150,190,255,.4));box-shadow:0 0 16px -3px var(--ub,rgba(150,190,255,.5))}
.upg .u-name{font-weight:700;font-size:11px;color:#fff;line-height:1.12;min-height:26px;
  display:flex;align-items:center;justify-content:center;text-align:center}
.upg .u-val{position:absolute;top:5px;right:6px;font-size:10px;font-weight:700;color:var(--gold);line-height:1;text-shadow:0 0 6px rgba(231,198,107,.45)}
.upg .u-lv{position:absolute;top:5px;left:6px;font-size:8.5px;color:var(--tx-dim);font-weight:700;letter-spacing:.02em}
.upg .u-cost{font-size:12.5px;font-weight:700;color:var(--lit);display:flex;align-items:center;justify-content:center;gap:5px}
.upg .u-cost::before{content:'';width:10px;height:13px;
  clip-path:polygon(50% 0,72% 26%,60% 100%,40% 100%,28% 26%);
  background:linear-gradient(160deg,#e7cdff,var(--arc));box-shadow:0 0 6px var(--arc-glow)}
.upg .u-pips{display:flex;gap:2px;justify-content:center;margin-top:6px}
.upg .u-pips i{width:8px;height:5px;border-radius:2px;background:rgba(255,255,255,.12)}
.upg .u-pips i.on{background:var(--gold);box-shadow:0 0 6px var(--gold)}
/* per-level refund button (respec) — sits in the cost row; pink to read as "give back", distinct
   from the purple buy cost. Stops propagation so a tap refunds without also triggering a buy. */
.upg .u-refund{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  border:1px solid rgba(255,140,170,.55);background:rgba(255,120,170,.16);color:#ffbcd2;
  font:700 14px/1 'Rajdhani';display:grid;place-items:center;cursor:pointer;padding:0;transition:.12s}
.upg .u-refund:hover{background:rgba(255,120,170,.36);border-color:rgba(255,140,170,.95);color:#fff;transform:scale(1.14)}
.mp-respec{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:12px;flex-wrap:wrap}
.mp-respec-hint{font-size:11px;color:var(--tx-faint);letter-spacing:.02em}
#btn-respec-all{height:30px;font-size:12px;padding:0 14px;color:#ffbcd2;border-color:rgba(255,120,170,.42)}
#btn-respec-all:hover{border-color:rgba(255,120,170,.78);color:#fff}
/* Sanctum (Upgrades opened from the Menu) exits via an X back to the Menu — no Main Menu/New Run buttons there.
   Run Complete keeps its two-button footer and hides the X (its flow is "start again" or "go home"). */
.meta-x{position:absolute;top:14px;right:16px;z-index:12}
#screen-meta.from-run .meta-x{display:none}
#screen-meta:not(.from-run) .meta-foot{display:none}
.meta-foot{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:14px}
.meta-foot .btn{height:46px;font-size:15px;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:8px}
.meta-foot .btn.prestige{font-size:17px;padding:0 30px;height:50px}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(4,6,16,.72);backdrop-filter:blur(3px)}
.overlay.open{display:grid}
.ov-box{width:1100px;max-height:730px;border-radius:18px;padding:22px 28px 24px;display:flex;flex-direction:column;overflow:hidden}
.ov-box.ov-sm{width:420px}
.ov-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.ov-head h1{font-weight:700;font-size:28px;color:#fff;letter-spacing:.04em;
  text-shadow:0 0 18px rgba(150,200,255,.4)}
.ov-head h1 small{display:block;font-family:'Rajdhani';font-weight:600;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin-top:2px}
.ov-x{flex:0 0 auto}

/* codex header element pills (mock legend): one chip per element, tinted by --cc */
.el-legend{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;align-self:center}
.elc{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#fff;padding:4px 9px;border-radius:999px;
  background:color-mix(in oklab,var(--cc) 14%,transparent);border:1px solid color-mix(in oklab,var(--cc) 45%,transparent)}
.elc .eg{color:var(--cc)}
.syn-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(92px,1fr);gap:10px;overflow:hidden}
.syn-card{border-radius:13px;padding:10px 13px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.syn-card .glowbg{position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  filter:blur(8px);opacity:.5}
.syn-combo{display:flex;align-items:center;gap:8px;z-index:1}
.syn-orb{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex:0 0 auto;
  border:1px solid var(--c);color:var(--c);background:rgba(255,255,255,.05);box-shadow:0 0 12px -3px var(--g)}
.syn-plus{color:var(--tx-faint);font-size:14px;font-weight:700}
.syn-arrow{color:var(--tx-faint);margin:0 2px}
.syn-name{font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:#fff;z-index:1;
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.syn-desc{font-size:11px;color:var(--tx-dim);line-height:1.3;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.syn-tag{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;align-self:flex-start;z-index:1;border:1px solid currentColor}

/* bestiary — a 2-ROW CAROUSEL: extra foes add COLUMNS (the ‹ › arrows scroll horizontally), so the
   grid stays exactly 2 rows tall and never needs vertical scrolling. Mirrors the upgrade tree. */
.foe-grid-wrap{flex:1;display:flex;align-items:stretch;gap:6px;min-height:0}
.foe-grid{flex:1 1 auto;min-width:0;display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;
  grid-auto-columns:248px;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.foe-grid::-webkit-scrollbar{display:none}
.foe-card{border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:6px;
  position:relative;overflow:hidden}
.foe-card .fc-top{display:flex;gap:10px;align-items:center}
.foe-card canvas{width:64px;height:64px;flex:0 0 auto;border-radius:10px;
  background:radial-gradient(circle at 50% 40%,rgba(155,77,255,.16),rgba(8,10,24,.5));
  border:1px solid rgba(155,77,255,.25)}
.foe-card .fc-name{font-family:'Cinzel',serif;font-weight:700;font-size:14.5px;color:#fff;line-height:1.15}
.foe-card .fc-role{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--void-lite);margin-top:2px}
.foe-card .fc-desc{font-size:11.5px;color:var(--tx-dim);line-height:1.35;min-height:44px}
.foe-card .fc-stats{display:flex;gap:9px;font-size:11px;font-weight:700;color:var(--tx);
  padding:5px 0;border-top:1px solid rgba(140,180,255,.10)}
.foe-card .fc-stats span b{display:block;font-size:9px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx-faint)}
.foe-card .fc-weak{font-size:11px;font-weight:700}
.foe-card .fc-weak .wl{color:var(--tx-faint);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:9.5px;margin-right:5px}
.foe-card .fc-trait{font-size:11px;color:var(--cyan);font-weight:600;line-height:1.3}
.foe-card .fc-from{position:absolute;right:10px;top:9px;font-size:9.5px;font-weight:700;
  letter-spacing:.08em;color:var(--tx-faint);text-transform:uppercase}

.el-tabs{display:flex;gap:8px;flex:1;justify-content:center}
.el-tab{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(150,190,255,.15);color:var(--tx-dim);
  font-weight:700;font-size:14px;letter-spacing:.04em;transition:.15s}
.el-tab:hover{color:#fff}
.el-tab.on{color:#fff;border-color:var(--cc);box-shadow:0 0 16px -3px var(--cg);
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent)}
.tier-row{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:11px;min-height:380px}
.tier-card{border-radius:14px;position:relative;display:flex;flex-direction:column;align-items:center;
  padding:14px 12px;overflow:hidden}
.tier-card canvas{flex:1;width:100%;min-height:230px}
.tier-card .tc-num{position:absolute;left:12px;top:10px;font-family:'Cinzel',serif;font-weight:700;
  font-size:14px;color:var(--tx-faint);letter-spacing:.1em}
.tier-card .tc-name{font-family:'Cinzel',serif;font-weight:700;font-size:17px;color:#fff;margin-top:4px}
.tier-card .tc-mult{font-weight:700;font-size:26px;margin-top:2px;color:var(--cc);text-shadow:0 0 14px var(--cg)}
.tier-card .tc-mult small{font-size:13px;color:var(--tx-dim);font-weight:600}
.tier-card .tc-note{font-size:12px;color:var(--tx-dim);text-align:center;margin-top:5px;line-height:1.35;min-height:32px}
.comp-foot{margin-top:13px;display:flex;gap:13px}
.ability-card{flex:1;border-radius:13px;padding:13px 15px;display:flex;gap:13px;align-items:center}
.ability-card .ac-ico{width:50px;height:50px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  font-size:24px;color:#fff;border:1px solid var(--cc);box-shadow:0 0 18px -2px var(--cg);
  background:radial-gradient(circle,var(--cd),rgba(0,0,0,.2))}
.ability-card .ac-t{font-weight:700;font-size:15px;color:#fff}
.ability-card .ac-d{font-size:12.5px;color:var(--tx-dim);line-height:1.4;margin-top:3px}

/* synergy live preview popup */
.overlay.ov-top{z-index:230}
/* feedback modal */
.fb-body{display:flex;flex-direction:column;gap:10px}
#fb-msg{width:100%;resize:vertical;min-height:130px;padding:10px 12px;border-radius:9px;box-sizing:border-box;
  font-family:'Rajdhani';font-weight:600;font-size:15px;line-height:1.45;color:#fff;
  background:rgba(10,15,34,.9);border:1px solid rgba(140,180,255,.3);outline:none}
#fb-msg:focus{border-color:var(--cyan)}
.fb-build-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--tx-faint)}
.fb-build-row input{flex:1;height:28px;padding:0 10px;border-radius:7px;font-family:'Rajdhani';font-weight:600;
  font-size:13px;color:var(--tx-dim);background:rgba(10,15,34,.6);border:1px solid rgba(140,180,255,.18);outline:none}
.fb-foot{display:flex;align-items:center;gap:10px}
.fb-count{font-size:12px;color:var(--tx-faint)}
.fb-status{flex:1;text-align:right;font-size:13px;font-weight:700;color:var(--earth)}
.fb-foot .btn{height:36px;font-size:13px;padding:0 18px;border-radius:9px}
.ov-prevbox{width:720px;max-height:640px}
#pv-cv{width:100%;border-radius:12px;display:block;
  background:radial-gradient(120% 110% at 50% 42%,#3b4268 0%,#2a3052 40%,#1a2040 75%,#11152c 100%);
  border:1px solid rgba(140,180,255,.18)}
.pv-desc{font-size:14px;color:var(--tx-dim);font-weight:600;line-height:1.45;margin-top:12px;text-align:center}
.syn-prev{margin-top:auto;align-self:flex-start;height:24px;font-size:10.5px;padding:0 10px;
  border-radius:8px;letter-spacing:.08em;z-index:1}

.set-rows{display:flex;flex-direction:column;gap:22px;padding:10px 4px 6px}   /* roomier / taller window */
.set-row{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:600}
.set-row input[type=range]{width:200px;accent-color:var(--cyan)}
.set-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--cyan)}
/* Graphics quality — in-app segmented toggle (a native <select> hands off to the OS picker, which
   looks foreign on mobile). Two options → two pills, tap to switch. */
.seg{display:inline-flex;border-radius:10px;overflow:hidden;flex:0 0 auto;
  border:1px solid rgba(150,190,255,.28);background:linear-gradient(180deg,rgba(20,27,50,.9),rgba(12,18,38,.95))}
.seg-opt{appearance:none;-webkit-appearance:none;border:none;background:transparent;cursor:pointer;
  font:700 14px/1 'Rajdhani',sans-serif;color:#9fb0c8;padding:11px 16px;letter-spacing:.03em;transition:.12s}
.seg-opt+.seg-opt{border-left:1px solid rgba(150,190,255,.18)}
.seg-opt:hover{color:#eaf2ff}
.seg-opt.on{color:#0a1020;background:linear-gradient(180deg,var(--cyan),#3a9fd8)}

/* ---------- ascension covenants ---------- */
.cov-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;overflow-y:auto;padding:2px 4px 4px;max-height:min(60vh,460px)}
#ov-cov .ov-box{width:min(680px,94vw)}        /* wider than ov-sm so two columns fit */
.cov-foot #btn-cov-clear{white-space:nowrap;padding:7px 16px;font-size:12.5px}
.cov-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(150,190,255,.15);transition:.15s}
.cov-card:hover{border-color:rgba(231,198,107,.5);transform:translateY(-1px)}
.cov-card.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(231,198,107,.16),rgba(231,198,107,.05));
  box-shadow:0 0 18px -4px rgba(231,198,107,.55)}
.cov-ico{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:21px;color:#fff;
  background:radial-gradient(circle,rgba(120,80,160,.55),rgba(0,0,0,.25));border:1px solid rgba(180,140,255,.4)}
.cov-card.on .cov-ico{background:radial-gradient(circle,rgba(231,198,107,.4),rgba(0,0,0,.25));
  border-color:rgba(231,198,107,.7);box-shadow:0 0 14px -2px rgba(231,198,107,.6)}
.cov-body{flex:1;min-width:0}
.cov-name{font-weight:700;font-size:14px;color:#fff;font-family:'Cinzel',serif}
.cov-desc{font-size:11.5px;color:var(--tx-dim);font-weight:600;line-height:1.3;margin-top:2px}
.cov-mult-tag{flex:none;font-weight:700;font-size:13px;color:var(--lit);
  background:rgba(255,210,62,.12);border:1px solid rgba(255,210,62,.3);border-radius:999px;padding:3px 10px}
.cov-card.on .cov-mult-tag{color:var(--gold);border-color:rgba(231,198,107,.5)}
.cov-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(140,180,255,.14)}
.cov-mult-box{font-size:15px;font-weight:700;color:var(--tx-dim);font-family:'Rajdhani'}
.cov-mult-box b{font-size:20px;color:var(--gold);margin-left:4px;text-shadow:0 0 12px rgba(231,198,107,.5)}
#btn-menu-cov.active{border-color:rgba(231,198,107,.6);color:var(--gold)}
#btn-menu-cov b{color:var(--gold);margin-left:2px}

/* ---------- banners ---------- */
.merge-banner{position:absolute;left:50%;top:16%;transform:translateX(-50%);text-align:center;z-index:120;
  pointer-events:none;animation:bannerPop 1.5s ease-out forwards}
.merge-banner .mb1{font-weight:900;font-size:54px;letter-spacing:.06em;color:#fff;
  text-shadow:0 0 26px var(--bc,#ff5a25),0 0 60px var(--bc,#ff5a25)}
.merge-banner .mb2{font-weight:700;font-size:17px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
  margin-top:2px;text-shadow:0 0 16px rgba(231,198,107,.6)}
@keyframes bannerPop{0%{opacity:0;transform:translateX(-50%) scale(.7)}
  12%{opacity:1;transform:translateX(-50%) scale(1.06)}22%{transform:translateX(-50%) scale(1)}
  80%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.02)}}
/* WAVE announcement — broadcast lower-third (ported from the Wave Announcement Lower-Third UX): big wave
   numeral + "WAVE" tag · gold divider · wave name + "N hostiles incoming" subtitle, with a staggered
   entrance and a bottom scrim. #wave-banner is the full-area host; ui.banner adds .play to (re)run it.
   Sits near the bottom, clear of the corner controls; scales with the 1280×800 stage on mobile. */
.wave-ann{position:absolute;inset:0;z-index:120;pointer-events:none}
/* the scrim used to be a full-width (left:0;right:0) sibling spanning the whole stage bottom — it darkened
   the shop/corner controls even when the announcement text covered a fraction of that width. Now it's the
   FIRST CHILD of .lower3 (index.html), absolutely positioned within it via negative inset, so it auto-hugs
   whatever size .lower3 actually is (short numeral-only waves get a small backdrop, named waves a bigger
   one) instead of a fixed box. The horizontal mask fades its edges so it still reads as a graphic, not a
   hard-edged rectangle, and max-width on .lower3 (below) caps how far even a long name can push it out. */
.lower3 .lt-scrim{position:absolute;z-index:-1;inset:-34px -48px -28px -48px;border-radius:20px;pointer-events:none;opacity:0;
  /* --panel-2's RGB (11,16,38) — the same deep indigo every panel in the game uses — instead of near-black,
     which read as a jarring dark smudge against the arena's own blue-purple tone, especially on mobile. */
  /* symmetric: 0deg="to top" put 0% at the BOTTOM and held it fully dark all the way down, only fading
     near the top — the bottom edge read as a hard dark band. Now it fades to transparent at both ends,
     same as the top always did. */
  background:linear-gradient(0deg,transparent 0%,rgba(11,16,38,.14) 16%,rgba(11,16,38,.5) 32%,
    rgba(11,16,38,.86) 50%,rgba(11,16,38,.5) 68%,rgba(11,16,38,.14) 84%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.lower3{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);display:flex;align-items:center;gap:28px;padding:0 8px;
  max-width:62%}   /* safe-zone cap: keeps the backdrop clear of the shop tray (right:14px/158px) and corner
                       controls (left:8-40px) at every stage width — long names wrap (.nm below) instead of
                       pushing the box out toward them */
.lower3 .wnum{position:relative;font-family:'Cinzel',serif;font-weight:900;font-size:80px;line-height:.85;color:#fff;
  text-shadow:0 0 30px rgba(150,200,255,.55),0 2px 16px rgba(0,0,0,.9);opacity:0;transform:translateX(-24px);filter:blur(6px)}
.lower3 .wnum small{display:block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;letter-spacing:.34em;
  color:var(--gold);text-shadow:0 1px 4px #000;margin-top:4px}
.lower3 .divide{width:1px;align-self:stretch;margin:6px 0;opacity:0;transform:scaleY(0);transform-origin:center;
  background:linear-gradient(180deg,transparent,rgba(231,198,107,.55),transparent)}
.lower3 .txt{display:flex;flex-direction:column;gap:9px;position:relative;min-width:0}   /* min-width:0 lets this
  flex item shrink below its text's natural width, so .nm (below) actually wraps once .lower3's max-width caps it */
.lower3 .rule{position:absolute;left:-2px;right:-52px;height:1px;transform:scaleX(0);transform-origin:left;opacity:0;
  background:linear-gradient(90deg,rgba(231,198,107,.7),transparent)}
.lower3 .rule.t{top:-16px} .lower3 .rule.b{bottom:-16px}
.lower3 .nm{font-family:'Cinzel',serif;font-weight:700;font-size:42px;color:#fff;letter-spacing:.03em;line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.9);opacity:0;transform:translateX(18px);filter:blur(5px);
  white-space:normal;overflow-wrap:break-word}   /* was nowrap — long compound/Act names now wrap under the
  max-width cap instead of growing the backdrop out toward the shop/corner controls */
.lower3 .sub{font-size:20px;font-weight:600;color:var(--tx-dim);letter-spacing:.08em;text-shadow:0 1px 6px #000;
  display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(6px);text-transform:uppercase}
.lower3 .sub .cnt{color:var(--tx-dim);font-weight:700}
.lower3 .sub .cnt b{color:var(--cyan)}
.lower3 .wnum .sweep{position:absolute;inset:-6px -10px;overflow:hidden;pointer-events:none}
.lower3 .wnum .sweep::before{content:'';position:absolute;top:0;bottom:0;width:72px;left:-100px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);filter:blur(3px)}
/* plain (unnamed) waves: just the numeral + subtitle, no name/rules */
#wave-banner:not(.named) .nm, #wave-banner:not(.named) .rule{display:none}
/* MOBILE: the stage is downscaled ~0.3–0.47× (vs ~1–1.34× desktop), so the announcement needs a much larger
   stage-coordinate size to read at all — sized well above desktop so it's the prominent moment it should be. */
.touch-ui .lower3 .lt-scrim{inset:-50px -64px -40px -64px;border-radius:26px}
.touch-ui .lower3{bottom:150px;gap:36px}
.touch-ui .lower3 .wnum{font-size:132px}
.touch-ui .lower3 .wnum small{font-size:21px;margin-top:6px}
.touch-ui .lower3 .txt{gap:13px}
.touch-ui .lower3 .rule{right:-70px}
.touch-ui .lower3 .rule.t{top:-22px} .touch-ui .lower3 .rule.b{bottom:-22px}
.touch-ui .lower3 .nm{font-size:70px}
.touch-ui .lower3 .sub{font-size:33px;gap:16px}
.touch-ui .lower3 .wnum .sweep::before{width:120px;left:-160px}
/* .play → run the sequence */
#wave-banner.play .lt-scrim{opacity:1;animation:scrimOut .6s ease 3.6s forwards}
#wave-banner.play .wnum{animation:inNum .6s cubic-bezier(.2,.8,.2,1) .15s forwards}
#wave-banner.play .wnum .sweep::before{animation:sweep 1s ease-in-out .55s}
#wave-banner.play .divide{animation:inDiv .5s ease .4s forwards}
#wave-banner.play .rule.t{animation:inRule .6s ease .45s forwards}
#wave-banner.play .rule.b{animation:inRule .6s ease .55s forwards}
#wave-banner.play .nm{animation:inNm .6s cubic-bezier(.2,.8,.2,1) .4s forwards}
#wave-banner.play .sub{animation:inSub .5s ease .62s forwards}
#wave-banner.play .lower3{animation:holdOut .6s ease 3.6s forwards}
@keyframes inNum{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes inNm{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes inSub{to{opacity:1;transform:none}}
@keyframes inDiv{to{opacity:1;transform:scaleY(1)}}
@keyframes inRule{to{opacity:1;transform:scaleX(1)}}
@keyframes sweep{0%{left:-80px}100%{left:110%}}
@keyframes holdOut{to{opacity:0;transform:translateX(-50%) translateY(14px)}}
@keyframes scrimOut{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  #wave-banner.play .lower3 *{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  #wave-banner.play .lt-scrim{animation:none!important;opacity:1!important}
  #wave-banner.play .lower3{animation:none!important}}
/* settings — "now playing" track row + skip */
.set-rows .set-track{display:flex;align-items:center;justify-content:space-between;gap:10px}
.set-rows .set-track #set-trackname{color:var(--cyan);font-weight:700;max-width:168px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-rows .set-track #btn-skip-track{height:42px;font-size:14px;font-weight:700;padding:0 20px;flex:0 0 auto}
#ov-settings .ov-box{padding-top:26px;padding-bottom:28px}   /* a bit more top/bottom room in the settings window */

/* shop element tooltip */
/* (tower hover-tip styles removed — feature cut; stats remain on tap → info panel) */
/* narrow-tall card (slots into the arena↔shop gutter): stacked stats + 1-col synergies (name + effect) */
.shop-tip{position:absolute;right:178px;width:140px;z-index:140;border-radius:11px;
  padding:8px 10px;pointer-events:none}
.shop-tip .tt-h{display:flex;align-items:baseline;gap:6px}
.shop-tip .tt-h .g{font-size:15px;line-height:1}
.shop-tip .tt-h b{font-family:'Cinzel',serif;font-size:14px;color:#fff;line-height:1}
.shop-tip .tt-role{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#cba24e;margin:2px 0 6px}
.shop-tip .tt-s{margin:0 0 2px}
.shop-tip .tt-s .st{font-size:12px;font-weight:700;color:var(--tx);line-height:1.5}
.shop-tip .tt-s .st i{color:var(--tx-dim);font-style:normal;font-weight:600;font-size:9.5px}
.shop-tip .tt-p{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#c8a85a;margin:7px 0 4px}
.shop-tip .tt-syn{margin-bottom:4px}
.shop-tip .tt-syn .sn{display:flex;align-items:baseline;gap:5px;font-size:11px;font-weight:700;
  line-height:1.35;white-space:nowrap}
.shop-tip .tt-syn .sn .g2{width:12px;text-align:center;flex:0 0 auto}
.shop-tip .tt-syn .ss{font-size:9px;color:var(--tx-faint);font-weight:600;margin-left:17px;line-height:1.2}

/* synergy discovery toast */
.syn-toast{position:absolute;left:16px;top:64px;z-index:130;max-width:230px;   /* top-left HUD band, ABOVE the (left-shifted) arena rim — at mid-height the arena's left edge is ~x181, so it must sit high (below the gold/kills HUD, above wave-prev) to never cover the playfield */
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:11px 15px 11px 12px;border-radius:13px;   /* icon on top, text stacked under it */
  background:linear-gradient(160deg,rgba(24,32,66,.96),rgba(11,16,38,.97));
  border:1px solid rgba(192,107,255,.45);
  box-shadow:0 0 24px -6px rgba(177,77,255,.6),0 8px 24px rgba(0,0,0,.5);
  animation:toastIn 7.5s ease forwards;pointer-events:none}
.syn-toast .st-ico{width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  font-size:19px;color:#fff;border:1px solid var(--stc,#c06bff);
  background:radial-gradient(circle,rgba(192,107,255,.35),rgba(0,0,0,.15));
  box-shadow:0 0 14px -2px var(--stc,#b14dff)}
.syn-toast .st-t{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim)}
.syn-toast .st-t b{color:#fff;font-family:'Cinzel',serif;font-size:14px;letter-spacing:.03em}
.syn-toast .st-d{font-size:12.5px;color:var(--tx);font-weight:600;line-height:1.35;margin-top:3px}
@keyframes toastIn{0%{opacity:0;transform:translateX(-24px)}4%{opacity:1;transform:translateX(0)}
  92%{opacity:1}100%{opacity:0;transform:translateX(-10px)}}

/* ---------- paused state (design: resonanse/Pause UX Components.html) ----------
   Scrim is pointer-events:none so HUD reference icons stay clickable while paused;
   only the card captures clicks. Card carries the SINGLE Resume. */
.paused-tint{position:absolute;inset:0;z-index:150;display:grid;place-items:center;
  pointer-events:none;background:rgba(4,6,16,.5);backdrop-filter:blur(2px);
  animation:ptFade .18s ease-out}
@keyframes ptFade{from{opacity:0}to{opacity:1}}
.pt-card{pointer-events:auto;width:340px;padding:26px 26px 22px;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  animation:ptRise .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes ptRise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.pt-ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  font-size:22px;letter-spacing:.12em;color:var(--gold);
  border:1px solid rgba(231,198,107,.5);background:radial-gradient(circle,rgba(231,198,107,.16),rgba(0,0,0,.2));
  box-shadow:0 0 22px -4px rgba(231,198,107,.5);margin-bottom:12px}
.pt-title{font-size:26px;font-weight:700;letter-spacing:.24em;color:#fff;
  text-shadow:0 0 24px rgba(150,200,255,.5)}
.pt-sub{font-size:12.5px;color:var(--tx-dim);line-height:1.45;margin:8px 4px 16px;max-width:270px}
.pt-refs{display:flex;gap:8px;width:100%;margin-bottom:16px}
.pt-ref{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  padding:10px 4px;border-radius:11px;font-family:'Rajdhani';font-weight:600;font-size:11px;
  letter-spacing:.06em;color:var(--tx-dim);
  background:rgba(12,18,42,.7);border:1px solid rgba(150,190,255,.18);transition:.14s}
.pt-ref span{font-size:17px;color:var(--cyan)}
.pt-ref:hover{color:#fff;border-color:rgba(95,208,255,.55);background:rgba(18,26,58,.9);
  box-shadow:0 0 16px -4px rgba(95,208,255,.5);transform:translateY(-1px)}
.pt-resume{width:100%;height:46px;font-size:16px}
/* paused status pill — pure indicator, docked to the clear top strip ABOVE reference windows */
.pause-badge{position:absolute;left:50%;top:7px;transform:translateX(-50%);z-index:260;
  display:flex;align-items:center;gap:9px;padding:5px 14px;border-radius:999px;
  background:linear-gradient(180deg,rgba(24,30,62,.96),rgba(12,16,38,.97));
  border:1px solid rgba(231,198,107,.5);box-shadow:0 0 22px -6px rgba(231,198,107,.55),0 6px 18px rgba(0,0,0,.5);
  animation:pbIn .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes pbIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
.pb-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(231,198,107,.6);animation:pbPulse 1.6s ease-in-out infinite}
@keyframes pbPulse{0%{box-shadow:0 0 0 0 rgba(231,198,107,.55)}70%{box-shadow:0 0 0 7px rgba(231,198,107,0)}100%{box-shadow:0 0 0 0 rgba(231,198,107,0)}}
.pb-tx{font-family:'Rajdhani';font-weight:700;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:#fff}
/* subtle desaturation of the play canvas while paused (HUD stays vivid) */
.bf.is-paused #cv{filter:saturate(.65) brightness(.82);transition:filter .2s ease}
/* MOBILE: the pause card + status pill carry NO stage counter-scale, so at ~0.46× stage they render tiny.
   Scale the whole card up (title/text/refs/Resume grow together) to ~0.75 of the screen height; enlarge the
   status pill ~2.3× and drop it lower toward the reference windows' top edge. */
.touch-ui .pt-card{transform:scale(1.75);animation:ptRiseTouch .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes ptRiseTouch{from{opacity:0;transform:translateY(10px) scale(1.62)}to{opacity:1;transform:scale(1.75)}}
.touch-ui .pause-badge{top:24px;padding:12px 32px;gap:18px}
.touch-ui .pb-tx{font-size:28px}
.touch-ui .pb-dot{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){
  .paused-tint,.pt-card,.pause-badge{animation:none}
  .pb-dot{animation:none}
  .touch-ui .pt-card{animation:none}   /* keep the enlarged scale, just drop the entry motion */
}

/* ---- Tower Compendium: comparative 5-column layout (tabs retired) ---- */
#ov-comp .ov-box{width:min(1560px,96%)}   /* wider window — 1100 made 5 columns unreadably narrow */
#ov-comp .tier-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;flex:1;min-height:0;align-content:start}
.cc-col{border:1px solid color-mix(in srgb,var(--cc) 45%,transparent);border-radius:13px;padding:8px 10px;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 13%,#10131f),#10131f);display:flex;flex-direction:column}
.cc-col canvas{width:112px;height:96px;margin:0 auto;filter:drop-shadow(0 0 12px var(--cg))}
.cc-name{font-weight:700;font-size:24px;color:#fff}
.cc-role{font-size:13.5px;color:var(--cc);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
.cc-stat{margin:3px 4px}
.cc-stat .r{display:flex;justify-content:space-between;font-size:13.5px;color:var(--tx-dim);text-transform:uppercase}
.cc-stat .r b{color:#fff;font-size:15px}
.cc-stat .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:2px}
.cc-stat .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 45%,#000),var(--cc))}
.cc-ab{margin:7px 2px 2px;padding:7px 9px;border-radius:9px;border:1px solid color-mix(in srgb,var(--cc) 50%,transparent);
  background:rgba(255,255,255,.03);text-align:left;flex:1}
.cc-ab b{font-size:17px;color:#fff}
.cc-ab span{display:block;font-size:16px;color:var(--tx-dim);line-height:1.35;margin-top:3px}
.cc-syn{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:7px}
.cc-schip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:8px;font-size:12.5px;font-weight:700;
  border:1px solid var(--pc);color:var(--pc);background:rgba(255,255,255,.04)}
.cc-schip i{font-style:normal;font-size:12px}
#ov-comp .comp-foot{display:block}   /* the legacy flex-ROW comp-foot squeezed the ladder + note side-by-side */
.cc-ladder{margin-top:10px;border:1px solid rgba(140,180,255,.22);border-radius:13px;padding:8px 22px;
  display:flex;align-items:center;gap:22px;background:#0e1224}
.cc-lt{font-size:18px;color:#fff;white-space:nowrap}
.cc-lt small{display:block;font-family:'Rajdhani';font-size:12px;color:var(--tx-dim)}
.cc-steps{display:flex;flex:1;align-items:flex-end;justify-content:space-between}
.cc-step{text-align:center;flex:1}
.cc-step small{margin-right:6px}
.cc-step canvas{display:block;margin:0 auto}
.cc-step small{display:inline;font-size:13px;color:var(--tx-faint);text-transform:uppercase}
.cc-step b{display:block;font-size:15px;color:#fff;margin-top:2px}
.cc-arr{color:var(--tx-faint);font-size:16px;align-self:center;padding:0 2px}
.cc-note{font-size:14px;color:var(--tx-faint);text-align:center;margin-top:7px}
.cc-tiers{margin-top:10px;border:1px solid rgba(140,180,255,.22);border-radius:12px;padding:11px 20px;
  background:#0e1224;font-size:15px;color:var(--tx-dim);line-height:1.55;text-align:center}
.cc-tiers b{color:#fff}
.cc-tiers b.cinzel{color:var(--gold);font-size:16px}
.cc-note b{color:var(--tx-dim)}

/* ---- Compendium on handhelds: cards swipe left (1 full + a partial peek); the tier ladder docks as a
   fixed VERTICAL rail on the right, freeing the bottom strip for taller cards ---- */
.touch-ui #ov-comp .ov-box{width:94%;height:92%;max-height:none;padding:16px 24px}
.touch-ui #ov-comp .tier-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:29%;   /* 3 full cards + a partial fourth peeking */
  overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.touch-ui #ov-comp .tier-row::-webkit-scrollbar{display:none}
.touch-ui #ov-comp .comp-foot{margin-top:8px}
.touch-ui .cc-tiers{font-size:19px;line-height:1.45;padding:10px 16px}
.touch-ui .cc-tiers b.cinzel{font-size:22px}
.touch-ui .cc-col{scroll-snap-align:start;padding:8px 14px}
.touch-ui .cc-col canvas{width:92px;height:78px;margin-top:-9px}
.touch-ui .cc-name{font-size:26px;line-height:1.05}
.touch-ui .cc-role{font-size:16px;margin:0 0 4px}
.touch-ui .cc-stat .r{font-size:16px}
.touch-ui .cc-stat .r b{font-size:18px}
.touch-ui .cc-stat .bar{height:7px}
.touch-ui .cc-ab b{font-size:23px}
.touch-ui .cc-ab span{font-size:22px;line-height:1.35}
.touch-ui .cc-syn{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:8px;margin-top:10px;justify-content:center}   /* max 2 per row, GRID CENTERED — a lone last pill sits centered, not left-orphaned */
.touch-ui .cc-schip{font-size:18px;padding:6px 10px;border-radius:9px;justify-content:center}
.touch-ui .cc-syn .cc-schip:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;min-width:220px}
.touch-ui .cc-schip i{font-size:17px}
.touch-ui .cc-lt{font-size:22px}
.touch-ui .cc-lt small{font-size:17px}
.touch-ui .cc-step small{font-size:15px}
.touch-ui .cc-step b{font-size:17px}
.touch-ui .cc-note{font-size:17px}