/* ============================================================
   SIREN - mobile-portrait-first stylesheet
   Dark industrial theme, amber/red siren accents.
   ============================================================ */

:root{
  --bg:#0d0f14;
  --bg2:#141823;
  --panel:#1a1f2e;
  --panel2:#222942;
  --line:#2c3450;
  --ink:#e8ecf5;
  --ink-dim:#95a0bd;
  --ink-faint:#64708f;
  --amber:#ffb02e;
  --amber-deep:#ff7a00;
  --red:#ff3b3b;
  --green:#36d97b;
  --gold:#ffd14a;
  --blue:#49b6ff;
  --radius:16px;
  --nav-h:64px;
  --hud-h:58px;
  --maxw:520px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}

#app{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  /* dvh MUST come last so it wins where supported: 100vh on mobile includes the
     browser toolbar area, which would push the bottom nav off-screen. */
  height:100vh;
  height:100dvh;
  display:flex;flex-direction:column;
  background:radial-gradient(120% 80% at 50% 0%,#1a2236 0%,var(--bg) 55%);
  overflow:hidden;
}

/* ───────── HUD ───────── */
#hud{
  flex:0 0 auto;position:relative;
  height:calc(var(--hud-h) + var(--safe-t));
  padding-top:var(--safe-t);
  display:flex;align-items:center;gap:10px;
  padding-left:14px;padding-right:14px;
  background:linear-gradient(180deg,rgba(20,24,35,.96),rgba(20,24,35,.78));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
  z-index:20;
}
/* progress-to-next-upgrade bar along the bottom of the header */
#upgradeBar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.07);overflow:hidden;}
#upgradeFill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),var(--gold));}
#upgradeFill.ready{background:linear-gradient(90deg,var(--green),#9af5c2);box-shadow:0 0 8px rgba(54,217,123,.7);}
/* "you can afford an upgrade" badge hanging just below the progress bar; opens shop */
#upgradeBadge{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,calc(100% + 3px));
  z-index:21;padding:4px 12px;border:none;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,var(--green),#23b765);color:#04331a;
  font-size:11px;font-weight:800;letter-spacing:.3px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(54,217,123,.45);animation:upBadge 1.4s ease-in-out infinite;
}
#upgradeBadge[hidden]{display:none;}
#upgradeBadge:active{transform:translate(-50%,calc(100% + 3px)) scale(.95);}
@keyframes upBadge{0%,100%{box-shadow:0 3px 10px rgba(54,217,123,.4);}50%{box-shadow:0 3px 16px rgba(54,217,123,.9);}}
.coin-wrap{display:flex;align-items:center;gap:7px;font-weight:800;font-size:20px;letter-spacing:.3px;
  flex:0 1 auto;min-width:0;}
.coin-ico{font-size:22px;filter:drop-shadow(0 0 6px rgba(255,209,74,.5));flex:0 0 auto;}
/* big balances shrink + ellipsize instead of pushing the rate/buttons off-screen */
#coinBalance{color:var(--gold);font-variant-numeric:tabular-nums;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#rateBlock{margin-left:auto;text-align:right;line-height:1.1;min-width:0;max-width:46vw;overflow:hidden;}
#rateLine{color:var(--green);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#rateSub{color:var(--ink-faint);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#menuBtn,#soundBtn{
  margin-left:7px;width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);
  font-size:18px;cursor:pointer;display:grid;place-items:center;
}
#menuBtn:active,#soundBtn:active{transform:scale(.94);}

/* ───────── Views ───────── */
.view{display:none;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.view.active{display:flex;flex-direction:column;}
.view-title{margin:14px 16px 6px;font-size:20px;font-weight:800;}
.blurb{margin:0 16px 10px;color:var(--ink-dim);font-size:13px;line-height:1.45;}
.blurb b{color:var(--ink);}

/* ───────── SIREN stage ───────── */
#stage-view{padding-bottom:calc(var(--nav-h) + var(--safe-b));}
#sirenStage{
  position:relative;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  touch-action:none;
  /* lighter "studio" pool behind the model so dark sirens don't vanish into the
     near-black background; fades back to the app bg at the edges. */
  background:radial-gradient(82% 64% at 50% 42%,
    #424e76 0%, #28324c 40%, #141a28 74%, var(--bg) 100%);
}
#sceneCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* fine-tuning aura: a radial glow behind the siren that grows + shifts hue as
   you buy tuning upgrades. Opacity & hue are driven from JS (syncTuning). */
#tuneAura{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(58% 46% at 50% 44%,
    rgba(73,182,255,.60), rgba(73,182,255,.14) 40%, transparent 72%);
  mix-blend-mode:screen;
  transition:opacity .5s ease, filter .5s ease;
}

#crankHint{
  position:absolute;bottom:12px;left:0;right:0;text-align:center;
  color:var(--ink-faint);font-size:13px;pointer-events:none;
  animation:pulseHint 2.4s ease-in-out infinite;
}
@keyframes pulseHint{0%,100%{opacity:.35}50%{opacity:.85}}
#crankHint.hidden{display:none;}

/* dB meter - vertical bar, right edge */
#dbMeter{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:30px;height:60%;max-height:340px;
  background:linear-gradient(180deg,#10141f,#0a0d14);
  border:1px solid var(--line);border-radius:16px;
  overflow:visible;pointer-events:none;
  box-shadow:inset 0 0 14px rgba(0,0,0,.6);
}
/* marker where earnings begin (50 dB) */
#dbThresh{position:absolute;left:-3px;right:-3px;bottom:10.5%;height:0;
  border-top:2px dashed var(--green);}
#dbThresh span{position:absolute;right:100%;margin-right:6px;top:-8px;
  font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--green);
  text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 2px #000;}
#dbBand{position:absolute;left:0;right:0;background:rgba(54,217,123,.18);
  border-top:1px solid rgba(54,217,123,.5);border-bottom:1px solid rgba(54,217,123,.5);}
#dbFill{position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(180deg,var(--amber),var(--amber-deep));
  transition:height .08s linear,background .2s;}
#dbNeedle{position:absolute;left:-3px;right:-3px;height:3px;background:#fff;
  box-shadow:0 0 8px #fff;transition:bottom .08s linear;bottom:0;}
#dbReadout{
  position:absolute;right:52px;top:50%;transform:translateY(-50%);
  text-align:right;pointer-events:none;
}
#dbReadout #dbValue{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(255,176,46,.4);}
#dbReadout small{display:block;color:var(--ink-faint);font-size:12px;margin-top:-4px;}

/* pause-automation button (top-right of the stage) */
#pauseBtn{position:absolute;top:14px;right:14px;z-index:6;padding:8px 12px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:800;cursor:pointer;}
#pauseBtn.on{background:var(--amber);color:#1a1200;border-color:var(--amber);}
#pauseBtn:active{transform:scale(.95);}
#pauseBtn[hidden]{display:none;}
/* boost button (top-left of the stage, where the earn badge used to be) with a charge-fill bar */
#boostBtn{position:absolute;left:14px;top:14px;z-index:6;min-width:128px;
  padding:10px 14px;border-radius:999px;overflow:hidden;text-align:center;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:13px;font-weight:800;cursor:pointer;}
#boostFill{position:absolute;left:0;top:0;bottom:0;width:0%;z-index:0;background:rgba(120,140,200,.22);}
#boostLabel{position:relative;z-index:1;}
#boostBtn.charging{color:var(--ink-faint);cursor:default;}
#boostBtn.ready{border-color:var(--amber);color:var(--amber);animation:boostGlow 1.2s ease-in-out infinite;}
#boostBtn.ready #boostFill{background:linear-gradient(90deg,rgba(255,176,46,.4),rgba(255,209,74,.4));}
#boostBtn.active{border-color:var(--green);color:#cffce0;box-shadow:0 0 18px rgba(54,217,123,.7);}
#boostBtn.active #boostFill{background:linear-gradient(90deg,rgba(54,217,123,.45),rgba(154,245,194,.45));}
#boostBtn:active{transform:scale(.96);}
#boostBtn[hidden]{display:none;}
@keyframes boostGlow{0%,100%{box-shadow:0 0 8px rgba(255,176,46,.4)}50%{box-shadow:0 0 20px rgba(255,176,46,.85)}}

/* active siren bar */
#activeBar{
  flex:0 0 auto;margin:0 12px 14px;padding:11px 14px;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:14px;
}
.ab-label{font-size:10px;letter-spacing:1.5px;color:var(--ink-faint);font-weight:700;}
#activeName{font-size:17px;font-weight:800;}
.ab-right{margin-left:auto;text-align:right;}
#activeRate{color:var(--green);font-weight:800;font-variant-numeric:tabular-nums;}
.ab-sub{color:var(--ink-faint);font-size:11px;}
#activeBar.auto #activeRate{color:var(--amber);}

#activeSwitcher{
  flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:10px 12px 4px;
  scrollbar-width:none;
}
#activeSwitcher::-webkit-scrollbar{display:none;}
.switch-chip{
  flex:0 0 auto;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;
  white-space:nowrap;
}
.switch-chip .em{margin-right:5px;}
.switch-chip.sel{background:var(--amber);color:#1a1200;border-color:var(--amber);}
.switch-chip.auto{border-color:rgba(54,217,123,.5);}

/* ───────── cards (shop + garage) ───────── */
.cardlist{padding:6px 12px calc(var(--nav-h) + var(--safe-b) + 14px);display:flex;flex-direction:column;gap:10px;}
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;display:flex;gap:12px;align-items:flex-start;
  position:relative;overflow:hidden;
}
.card .ico{font-size:30px;flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  background:var(--panel2);border-radius:12px;border:1px solid var(--line);}
.card .body{flex:1 1 auto;min-width:0;}
.card .name{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.card .desc{color:var(--ink-dim);font-size:12.5px;line-height:1.4;margin-top:3px;}
.card .meta{color:var(--ink-faint);font-size:11.5px;margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;}
.card .meta b{color:var(--blue);font-weight:700;}
.card .meta .good{color:var(--green);}
.tag{font-size:10px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);}
.tag.owned{color:var(--green);border-color:rgba(54,217,123,.4);}
.tag.auto{color:#062;background:var(--green);}
.tag.active{color:#1a1200;background:var(--amber);}

.btn{
  flex:0 0 auto;align-self:center;border:none;border-radius:12px;
  padding:11px 14px;font-weight:800;font-size:14px;cursor:pointer;min-width:96px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--amber),var(--amber-deep));color:#1a1200;
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.25);}
.btn.buy{background:linear-gradient(180deg,var(--amber),var(--amber-deep));}
.btn.cant{background:var(--panel2);color:var(--ink-faint);box-shadow:none;}
.btn.locked{background:var(--panel2);color:var(--ink-faint);box-shadow:none;}
.btn.ghost{background:var(--panel2);color:var(--ink);box-shadow:none;border:1px solid var(--line);min-width:0;padding:9px 12px;}
.btn.small{padding:8px 11px;min-width:0;font-size:13px;}
.card.locked{opacity:.62;}
/* teaser = the tier AFTER next: a locked preview of what's coming, buy the one above it first */
.card.teaser{opacity:.42;border-style:dashed;}
/* owned/mountable tiers (revealed by the "Owned & mountable" toggle) */
.owned-toggle{display:block;width:100%;margin:14px 0 4px;padding:10px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);
  font-size:12.5px;font-weight:800;letter-spacing:.4px;cursor:pointer;text-align:center;}
.owned-toggle:active{transform:scale(.99);}
.card.owned{background:linear-gradient(180deg,#161b28,#11141d);opacity:.94;}
.card.owned.active{opacity:1;border-color:var(--green);
  box-shadow:inset 0 0 0 1px rgba(54,217,123,.5), 0 0 12px rgba(54,217,123,.22);}
.card.owned.active .btn{background:var(--green);color:#04331a;box-shadow:none;}
.btn.mount{color:var(--amber);}
.cost{display:inline-flex;align-items:center;gap:4px;}
.cost.cant{color:var(--red);}

/* garage station */
.station .slots{display:flex;flex-direction:column;gap:7px;margin-top:10px;width:100%;}
.station{flex-direction:column;align-items:stretch;}
.station .head{display:flex;gap:12px;align-items:center;}
.station .head .body{flex:1;}
.slot{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:var(--bg2);border:1px dashed var(--line);cursor:pointer;
}
.slot.filled{border-style:solid;border-color:var(--line);background:var(--panel2);}
.slot .slot-ico{font-size:20px;width:26px;text-align:center;}
.slot .slot-main{flex:1;min-width:0;}
.slot .slot-kind{font-size:10px;letter-spacing:1px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;}
.slot .slot-name{font-size:13.5px;font-weight:700;}
.slot .slot-name.empty{color:var(--ink-faint);font-weight:600;}
.slot .slot-act{font-size:12px;color:var(--amber);font-weight:800;}
.station .stationFoot{display:flex;align-items:center;gap:10px;margin-top:11px;}
.station .autoLine{font-size:12px;color:var(--ink-dim);}
.station .autoLine b{color:var(--green);}

/* ───────── tabs (2, full-width, sticky & always visible) ───────── */
.tabs{display:flex;gap:8px;padding:12px;position:sticky;top:0;z-index:6;
  background:linear-gradient(180deg,#10131c 78%,rgba(16,19,28,0));}
.tab{flex:1;min-width:0;text-align:center;padding:12px 6px;border-radius:12px;font-weight:800;font-size:13px;position:relative;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tab.active{background:var(--amber);color:#1a1200;border-color:var(--amber);box-shadow:0 0 14px rgba(255,176,46,.35);}
/* green dot = this track has an upgrade you can afford */
.tab.afford::after{content:'';position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 6px var(--green);animation:badgePulse 1.1s ease-in-out infinite;}
#shopTabs{padding-right:64px;}  /* room for the close X */
/* close button: same height as the tab buttons, red so it reads as "close" */
#shopClose{position:absolute;top:calc(var(--hud-h) + var(--safe-t) + 12px);right:14px;z-index:9;
  width:44px;height:43px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,59,59,.14);border:1px solid rgba(255,59,59,.55);color:var(--red);
  font-size:17px;font-weight:800;cursor:pointer;}
#shopClose:active{transform:scale(.94);background:rgba(255,59,59,.28);}

/* ───────── bottom nav ───────── */
#bottomNav{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  height:calc(var(--nav-h) + var(--safe-b));padding-bottom:max(var(--safe-b),4px);
  display:flex;background:linear-gradient(0deg,rgba(16,19,28,.98),rgba(16,19,28,.86));
  border-top:1px solid var(--line);backdrop-filter:blur(8px);
}
#bottomNav button{
  flex:1;background:none;border:none;color:var(--ink-faint);position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:11px;font-weight:700;cursor:pointer;
}
#bottomNav .nav-ico{font-size:21px;line-height:1;}
#bottomNav button.active{color:var(--amber);}
#bottomNav button:active{transform:scale(.93);}
/* "you can afford an upgrade" indicator on the Upgrade button */
#bottomNav button.has-upgrade{color:var(--gold);}
#bottomNav button.has-upgrade::after{
  content:'';position:absolute;top:7px;left:50%;margin-left:11px;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold);animation:badgePulse 1.1s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.4);opacity:1}}

/* busy veil: blocks ALL input while a purchase's model is loading/rendering */
#busyVeil{position:fixed;inset:0;z-index:150;cursor:progress;background:rgba(10,12,18,.18);}
#busyVeil[hidden]{display:none;}
/* spinner shown inside a buy button while its purchase is in flight */
.btn.loading{color:transparent !important;pointer-events:none;position:relative;}
.btn.loading::after{
  content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(0,0,0,.3);border-top-color:#1a1200;border-radius:50%;
  animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ───────── coins flying ───────── */
#coinLayer{position:fixed;inset:0;pointer-events:none;z-index:40;max-width:var(--maxw);margin:0 auto;}
/* real-money drops: copper/silver/gold COINS → green & tan BANKNOTES → banded
   CASH STACKS. Tier value picks the denomination; --s scales the whole thing. */
.flycoin{position:absolute;will-change:transform,opacity;
  --s:21px;--glow:rgba(0,0,0,0);line-height:1;font-weight:900;}
.fc-sm{--s:15px;}
.fc-md{--s:21px;}
.fc-lg{--s:29px;}

/* ── round coins (penny / cent / gold) ── */
.fc-penny,.fc-cent,.fc-gold{
  width:var(--s);height:var(--s);border-radius:50%;
  display:grid;place-items:center;font-size:calc(var(--s)*.52);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42), inset 0 -2px 3px rgba(0,0,0,.42),
             0 1px 2px rgba(0,0,0,.5), 0 0 6px var(--glow);}
.fc-penny::after,.fc-cent::after,.fc-gold::after{          /* gloss */
  content:'';position:absolute;left:16%;top:9%;width:48%;height:30%;border-radius:50%;
  background:radial-gradient(ellipse at 42% 40%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);}
.fc-penny{--glow:rgba(184,115,51,.5); background:radial-gradient(circle at 38% 30%,#edb487,#b87333 52%,#6e3f18 100%);}
.fc-penny::before{content:'¢';color:#fbe4cd;text-shadow:0 1px 1px rgba(0,0,0,.4);}
.fc-cent{--glow:rgba(200,208,220,.55); background:radial-gradient(circle at 38% 30%,#ffffff,#c4c8d4 52%,#777e8c 100%);}
.fc-cent::before{content:'¢';color:#3a3f49;text-shadow:0 1px 0 rgba(255,255,255,.5);}
.fc-gold{--glow:rgba(255,200,70,.7); background:radial-gradient(circle at 38% 30%,#fff2bf,#ffce3a 52%,#a9751a 100%);}
.fc-gold::before{content:'$';color:#6e4a05;text-shadow:0 1px 0 rgba(255,255,255,.45);}

/* ── banknotes (single bills) ── */
.fc-bill,.fc-billbig{
  width:calc(var(--s)*1.8);height:calc(var(--s)*.95);border-radius:2px;
  display:grid;place-items:center;font-size:calc(var(--s)*.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5), 0 0 6px var(--glow);}
.fc-bill::after,.fc-billbig::after{                        /* engraved inner frame */
  content:'';position:absolute;inset:2px;border:1px solid rgba(255,255,255,.4);border-radius:1px;}
.fc-bill{--glow:rgba(70,160,95,.5); background:linear-gradient(135deg,#62ab79,#3c7d52 48%,#2a6440);}
.fc-bill::before{content:'$';color:#ecfff2;text-shadow:0 1px 1px rgba(0,0,0,.35);}
.fc-billbig{--glow:rgba(214,176,96,.55); background:linear-gradient(135deg,#e0d0a3,#c2a866 48%,#94762f);}
.fc-billbig::before{content:'$';color:#4a3a12;text-shadow:0 1px 0 rgba(255,255,255,.4);}

/* ── banded cash stacks (sheet edges via stacked shadows + paper strap) ── */
.fc-stack,.fc-stackbig,.fc-cash{
  width:calc(var(--s)*1.8);height:calc(var(--s)*.95);border-radius:2px;
  display:grid;place-items:center;font-size:calc(var(--s)*.5);
  background:linear-gradient(135deg,#62ab79,#3c7d52 48%,#2a6440);--glow:rgba(70,175,100,.55);}
.fc-stack::before,.fc-stackbig::before,.fc-cash::before{   /* denomination on the strap */
  content:'$';position:relative;z-index:2;color:#3a2f12;text-shadow:0 1px 0 rgba(255,255,255,.5);}
.fc-stack::after,.fc-stackbig::after,.fc-cash::after{      /* currency strap */
  content:'';position:absolute;left:0;right:0;top:34%;height:30%;z-index:1;
  background:linear-gradient(180deg,#fff7e6,#e3d8bd);
  border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid rgba(0,0,0,.3);}
.fc-stack{box-shadow:0 2px 0 #2f6b41,0 4px 0 #265737,0 5px 3px rgba(0,0,0,.5),0 0 7px var(--glow);}
.fc-stackbig{box-shadow:0 2px 0 #2f6b41,0 4px 0 #265737,0 6px 0 #1f4a2d,0 8px 0 #18401f,0 9px 4px rgba(0,0,0,.55),0 0 8px var(--glow);}
.fc-cash{box-shadow:0 2px 0 #2f6b41,0 4px 0 #265737,0 6px 0 #1f4a2d,0 8px 0 #18401f,0 10px 0 #123417,0 12px 0 #0d280f,0 13px 4px rgba(0,0,0,.6),0 0 9px var(--glow);}
.floater{position:absolute;font-weight:800;color:var(--gold);font-size:15px;
  text-shadow:0 1px 3px #000;will-change:transform,opacity;}

/* ───────── toast ───────── */
#toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 16px);
  transform:translateX(-50%) translateY(20px);
  max-width:88%;padding:11px 16px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  font-size:13.5px;font-weight:600;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.err{border-color:var(--red);color:#ffd5d5;}
#toast.good{border-color:var(--green);color:#cffce0;}

/* ───────── modal ───────── */
#modalWrap{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;max-width:var(--maxw);margin:0 auto;}
/* `display:flex` above would otherwise override the [hidden] attribute, leaving
   the backdrop permanently on top of everything. id+attr specificity wins here. */
#modalWrap[hidden]{display:none;}
#modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);}
#modal{position:relative;width:100%;max-height:80vh;overflow-y:auto;
  background:var(--panel2);border:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:18px 16px calc(20px + var(--safe-b));
  animation:slideUp .22s ease;}
@keyframes slideUp{from{transform:translateY(40px);opacity:.5}to{transform:translateY(0);opacity:1}}
#modalClose{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);font-size:15px;cursor:pointer;}
#modal h3{margin:2px 0 4px;font-size:19px;}
#modal .modal-sub{color:var(--ink-dim);font-size:13px;margin-bottom:14px;}
.pick{display:flex;align-items:center;gap:11px;padding:11px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--line);margin-bottom:8px;cursor:pointer;}
.pick.dim{opacity:.5;}
.pick .ico{font-size:24px;width:38px;text-align:center;}
.pick .body{flex:1;min-width:0;}
.pick .name{font-weight:800;font-size:14px;}
.pick .sub{color:var(--ink-dim);font-size:12px;margin-top:2px;}
.pick .pill{font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);}

/* fine-tuning panel (footer "Upgrade") */
.tune-total{color:var(--amber);}
.tunelist{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.tune{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--line);}
.tune .ico{font-size:12px;text-align:center;flex:0 0 auto;}
.tune .body{flex:1;min-width:0;}
.tune .name{font-weight:800;font-size:13.5px;}
.tune .name .lv{color:var(--ink-faint);font-weight:700;font-size:11px;margin-left:5px;}
.tune .sub{color:var(--ink-dim);font-size:11.5px;margin-top:1px;}
.tune .pips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;}
.tune .pips i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s,box-shadow .2s;}
.tune .pips i.on{background:radial-gradient(circle at 35% 30%,#ffe27a,var(--amber-deep));box-shadow:0 0 5px rgba(255,176,46,.6);}
.btn.small.tune-buy{min-width:86px;}

/* welcome-back */
.welcome{text-align:center;}
.welcome .big{font-size:30px;}
.welcome .amount{font-size:30px;font-weight:900;color:var(--gold);margin:8px 0;}
.welcome .sub{color:var(--ink-dim);font-size:13px;}

/* stat grid */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 14px;}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px;}
.stat .k{color:var(--ink-faint);font-size:11px;}
.stat .v{font-weight:800;font-size:16px;margin-top:2px;font-variant-numeric:tabular-nums;}
.danger{background:linear-gradient(180deg,#3a1620,#241019)!important;border-color:#5a2230!important;color:#ffb4b4!important;}
.cheatgrid{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;}
.cheatgrid .btn{flex:1 1 28%;min-width:0;}

/* ───────── boot screen ───────── */
#bootScreen{position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity .5s;max-width:var(--maxw);margin:0 auto;}
#bootScreen.gone{opacity:0;pointer-events:none;}
#bootLogo{width:min(74%,300px);height:auto;animation:bootPulse 2.2s ease-in-out infinite;}
@keyframes bootPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.045);opacity:1}}
.boot-sub{color:var(--ink-faint);font-size:13px;}
.boot-start{margin-top:8px;padding:11px 28px;border:1px solid var(--amber);border-radius:999px;
  color:var(--amber);background:rgba(255,176,46,.08);font-size:14px;font-weight:700;letter-spacing:2px;
  animation:bootStartPulse 1.4s ease-in-out infinite;}
@keyframes bootStartPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
#bootScreen.ready{cursor:pointer;}

@media (min-height:760px){ :root{--hud-h:62px;} #dbReadout #dbValue{font-size:40px;} }