/* ============================================================================
   Tower Yeeters — styles. Tokens are authoritative (from the mockup #settings).
   DOM screens (home/shop/fusion/end/unlocks/leaderboard/settings) + gameplay HUD
   overlay the Three.js canvas (#gl).
   ============================================================================ */
:root{
  --ink:#2B1D12; --wood-dk:#4a3420; --wood:#86603a; --wood-lt:#a87b46;
  --parch:#FBEFCB; --parch-2:#F3DEAC; --parch-edge:#D8BE7E; --cream:#FFF6E2;
  --gold:#F6BA3E; --gold-dk:#D6991F;
  --fire:#FF6A3D; --water:#37A6E6; --earth:#4FD6A0; --air:#A9EAF3;
  --shadow:#986BD6; --light:#FFE45C; --berry:#FF5E8A;
  --rot:#C13AC1; --toxic:#B6E000; --void:#3A1F63;
  --disp:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --body:system-ui,"Segoe UI",Roboto,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%; overflow:hidden; overscroll-behavior:none}
body{font-family:var(--body); color:var(--ink); background:#0f0d1d; user-select:none; -webkit-user-select:none; touch-action:none}
button{font-family:var(--disp)}
.hidden{display:none !important}

/* ===== 3D canvas ===== */
#gl{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:1; touch-action:none}

/* ===== BOOT =====
   Mirror the home screen's candy gradient so boot → home is a smooth handoff
   rather than a flat-purple-to-sunset jump cut. */
.boot{position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(180deg,#3A1F63 0%,#986BD6 46%,#FF6A3D 82%,#F6BA3E 100%)}
.boot-sparkles{position:absolute; inset:0; pointer-events:none}
.boot-sparkles span{position:absolute; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff9; opacity:.5}
.boot-sparkles span:nth-child(1){left:16%; top:22%} .boot-sparkles span:nth-child(2){left:80%; top:30%}
.boot-sparkles span:nth-child(3){left:24%; top:64%} .boot-sparkles span:nth-child(4){left:72%; top:70%}
.boot-sparkles span:nth-child(5){left:50%; top:14%}
@media (prefers-reduced-motion:no-preference){ .boot-sparkles span{animation:tw 2.6s ease-in-out infinite} .boot-sparkles span:nth-child(even){animation-delay:1.1s} }
.boot-logo{font-family:var(--disp); text-transform:uppercase; text-align:center; line-height:.9; position:relative}
.boot-logo .t1{display:block; font-size:44px; color:#fff; text-shadow:0 4px 0 #0006}
.boot-logo .t2{display:block; font-size:44px; color:var(--gold); text-shadow:0 4px 0 #0007}
.boot-sub{font-style:italic; color:#ffe7d4; font-size:13px}
/* Character moment so the first frame has personality, not just text on a void. */
.boot-char{font-size:72px; filter:drop-shadow(0 8px 14px #0006); margin:2px 0 4px}
@media (prefers-reduced-motion:no-preference){ .boot-char{animation:bob 2.1s ease-in-out infinite} }
.boot-bar{width:220px; height:12px; border-radius:99px; background:#00000038; overflow:hidden; border:1.5px solid #ffffff55; box-shadow:inset 0 1px 3px #0005}
.boot-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--toxic),var(--gold)); transition:width .25s}
.boot-msg{font-size:11px; color:#fff; opacity:.85; text-shadow:0 1px 3px #0006}

/* ===== HUD (gameplay overlay) ===== */
.hud{position:fixed; inset:0; z-index:5; pointer-events:none}
.hud > *{pointer-events:auto}
.hud-top{position:absolute; top:calc(8px + var(--safe-t)); left:0; right:0; display:flex; align-items:center; gap:8px; padding:0 12px; pointer-events:none}
.hud-top > *{pointer-events:auto}
.iconbtn{width:40px; height:40px; border-radius:50%; background:#1b1b1fcc; color:#fff; border:0; font-size:20px; cursor:pointer; box-shadow:0 3px 8px #0006; display:grid; place-items:center}
.coinbal{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:15px; color:#fff; background:#00000033; border:1.5px solid #ffffff44; padding:5px 11px 5px 7px; border-radius:999px}
.gc{width:17px; height:17px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe39a,var(--gold) 55%,var(--gold-dk)); box-shadow:inset 0 0 0 1.5px var(--gold-dk); flex:none}
.lifebal,.wavebal{font-weight:800; font-size:13px; color:#fff; background:#00000033; border:1.5px solid #ffffff44; padding:5px 10px; border-radius:999px}
.wavebal{margin-left:auto}
.goal-banner{position:absolute; top:calc(56px + var(--safe-t)); left:50%; transform:translateX(-50%); font-family:var(--disp); font-weight:bold; text-transform:uppercase; letter-spacing:.06em; font-size:14px; color:var(--gold); text-shadow:0 2px 8px #000; background:#00000040; padding:5px 16px; border-radius:999px; white-space:nowrap}
@media (prefers-reduced-motion:no-preference){ .goal-banner{animation:goalpulse 2.4s ease-in-out infinite} @keyframes goalpulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.92}50%{transform:translateX(-50%) scale(1.05);opacity:1}} }
/* During a wave the dedicated wave banner owns the top slot; hide the persistent
   goal banner so the two don't stack on top of each other (they share top:56px). */
#waveHud:not(.hidden) ~ .goal-banner{display:none}

.phase-hud{position:absolute; inset:0; pointer-events:none}
.phase-hud > *{pointer-events:auto}

/* hopper */
.hopper{position:absolute; left:10px; bottom:calc(14px + var(--safe-b)); width:74px; display:flex; flex-direction:column; align-items:center; gap:5px}
.hoptitle{font-family:var(--disp); font-size:8.5px; font-weight:bold; letter-spacing:.08em; text-transform:uppercase; color:#3a2a18; background:#ffffffb8; padding:1px 8px; border-radius:6px}
.chute{display:flex; flex-direction:column; gap:7px; padding:9px 8px; border-radius:18px; background:linear-gradient(180deg,#3e2a18b0,#261a0eb8); border:2px solid #6b4a2b; box-shadow:inset 0 2px 6px #0006}
.hopcoin{position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:20px; box-shadow:inset 0 -4px 8px #0005, inset 0 3px 6px #ffffff66, 0 2px 5px #0006; cursor:pointer}
.hopcoin.next{outline:3px solid var(--gold); outline-offset:2px}
.hopcoin.wavestart{outline:3px solid var(--fire); outline-offset:2px}
.hopcoin .tag{position:absolute; left:50px; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--disp); font-size:8px; font-weight:bold; text-transform:uppercase; color:var(--ink); background:var(--gold); padding:2px 7px; border-radius:6px; box-shadow:0 2px 0 var(--gold-dk)}
.hopcoin.wavestart .tag{color:#fff; background:linear-gradient(180deg,#ff6a3d,#c0271b)}

/* Shop toggle sits at the TOP of the hopper column, above "NEXT SHOTS" (it's the
   first child of .hopper). align-self:stretch makes it span the column width. */
.shopbtn{align-self:stretch; display:flex; align-items:center; justify-content:center; gap:4px; background:linear-gradient(180deg,var(--gold),var(--gold-dk)); color:var(--ink); border:0; font-family:var(--disp); font-weight:bold; text-transform:uppercase; letter-spacing:.02em; font-size:11px; padding:8px 4px; border-radius:11px; box-shadow:0 3px 0 #946012; cursor:pointer}
.shopbtn:active{transform:translateY(2px); box-shadow:0 1px 0 #946012}
/* Sit the hint in a soft pill so it stays legible over the bright road/catapult
   instead of getting lost as bare white text at the canvas edge. */
.draghint{position:absolute; left:50%; transform:translateX(-50%); bottom:calc(20px + var(--safe-b)); white-space:nowrap; text-align:center; font-family:var(--disp); font-weight:bold; text-transform:uppercase; letter-spacing:.04em; font-size:11px; color:#fff; text-shadow:0 1px 4px #000; background:#00000055; padding:6px 15px; border-radius:999px; pointer-events:none}
.power-meter{position:absolute; left:50%; bottom:calc(72px + var(--safe-b)); transform:translateX(-50%); width:120px; height:12px; background:#0006; border:1.5px solid #fff8; border-radius:99px; overflow:hidden}
.power-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--toxic),var(--gold),var(--fire))}
/* first-time onboarding: animated finger miming drag-back-and-release */
.drag-finger{position:absolute; left:50%; bottom:calc(70px + var(--safe-b)); transform:translateX(-50%); font-size:46px; pointer-events:none; filter:drop-shadow(0 4px 6px #0007); z-index:6}
@media (prefers-reduced-motion:no-preference){ .drag-finger{animation:dragmime 1.8s ease-in-out infinite} @keyframes dragmime{0%{transform:translateX(-50%) translateY(0);opacity:.4}25%{opacity:1}55%{transform:translateX(-50%) translateY(44px);opacity:1}70%{transform:translateX(-50%) translateY(44px);opacity:.6}100%{transform:translateX(-50%) translateY(0);opacity:.4}} }

/* flight steer */
.fly-eyebrow{position:absolute; left:0; right:0; top:120px; text-align:center; font-family:var(--disp); font-weight:bold; text-transform:uppercase; letter-spacing:.08em; font-size:14px; color:#fff; text-shadow:0 2px 7px #000; pointer-events:none}
.steer{position:absolute; left:0; right:0; bottom:calc(20px + var(--safe-b)); display:flex; align-items:flex-end; justify-content:space-between; padding:0 16px}
.sbtn{border:0; cursor:pointer; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-shadow:0 5px 0 #0006; transition:transform .1s; font-family:var(--disp); font-weight:bold}
.sbtn.dir{width:84px; height:84px; border-radius:20px; font-size:38px}
.sbtn.dir[data-lane="L"]{background:linear-gradient(180deg,#ff7a3a,#dd4e16)}
.sbtn.dir[data-lane="R"]{background:linear-gradient(180deg,#46c69c,#1c8a64)}
.sbtn.dir[aria-pressed="true"]{outline:3px solid #fff; outline-offset:2px; transform:translateY(-3px)}
.centercol{display:flex; flex-direction:column; align-items:center; gap:8px}
.sbtn.boost{position:relative; width:96px; height:62px; border-radius:18px; background:linear-gradient(180deg,#b6e000,var(--gold) 55%,var(--gold-dk)); color:var(--ink); text-transform:uppercase; font-size:13px}
.sbtn.boost .charge{position:absolute; top:-8px; right:-8px; min-width:24px; height:24px; padding:0 5px; background:#141414; color:#fff; border:2px solid #fff; border-radius:8px; font-size:13px; font-weight:900; display:grid; place-items:center}
.sbtn.boost.empty{filter:grayscale(.6); opacity:.55; cursor:default}
.sbtn.land{width:96px; height:50px; border-radius:16px; background:linear-gradient(180deg,#6b7bff,#3a48c4); color:#fff; text-transform:uppercase; font-size:13px}

/* wave */
.wbanner{position:absolute; top:calc(56px + var(--safe-t)); left:0; right:0; text-align:center}
.wbanner b{font-family:var(--disp); text-transform:uppercase; letter-spacing:.06em; font-size:16px; color:#fff; background:linear-gradient(180deg,#ff6a3d,#c0271b); padding:6px 18px; border-radius:999px; box-shadow:0 3px 0 #8c1a12; display:inline-block}
/* This line carries live state ("N enemies left", "wave clear!"). At #ffd0c8 with
   no backing it washed out to near-invisible over the bright sky — give it a
   readable pill + brighter ink so the player can actually track the wave. */
.wbanner small{display:inline-block; margin-top:6px; font-size:10px; font-weight:700; color:#fff; letter-spacing:.05em; text-transform:uppercase; background:#00000055; padding:3px 12px; border-radius:999px; box-shadow:0 1px 4px #0004}
.wctrls{position:absolute; left:0; right:0; bottom:calc(22px + var(--safe-b)); display:flex; justify-content:center; gap:14px}
.wbtn{border:0; cursor:pointer; font-family:var(--disp); font-weight:bold; text-transform:uppercase; letter-spacing:.04em; font-size:15px; padding:13px 24px; border-radius:14px; box-shadow:0 4px 0 #0006; color:#fff}
.wbtn.ff{background:linear-gradient(180deg,#5b6cff,#3340c9)}
.wbtn.skip{background:linear-gradient(180deg,#fff0b0,var(--gold) 55%,var(--gold-dk)); color:var(--ink)}

/* boss health bar */
.bossbar{position:absolute; top:calc(96px + var(--safe-t)); left:24px; right:24px; display:flex; flex-direction:column; align-items:center; gap:4px}
/* The wave banner pill already names "THE BRAIN ROT" right above the bar, so the
   label here is redundant — hide it and let the bar speak for itself. */
.bosslbl{display:none}
.bosstrack{width:100%; height:16px; border-radius:99px; background:#00000055; border:2px solid #ffffff66; overflow:hidden}
.bossfill{height:100%; width:100%; background:linear-gradient(90deg,#C13AC1,#FF5E8A); transition:width .2s}

/* screen shake */
@keyframes shakeKf{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}50%{transform:translate(3px,-3px)}75%{transform:translate(-2px,-1px)}}
body.shaking #gl{animation:shakeKf .25s}

/* toasts + combo fx */
.toast-wrap{position:absolute; left:0; right:0; top:calc(94px + var(--safe-t)); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none}
.toast{font-family:var(--disp); font-weight:bold; font-size:13px; color:#fff; background:#000000a8; padding:7px 15px; border-radius:999px; animation:toastin .3s ease both}
.toast.good{background:linear-gradient(180deg,#46c69c,#1c8a64)}
.toast.coin{background:linear-gradient(180deg,var(--gold),var(--gold-dk)); color:var(--ink)}
@keyframes toastin{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.combo-fx{position:absolute; inset:0; pointer-events:none; display:grid; place-items:center}
.combo-fx .big{font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:46px; color:var(--berry); text-shadow:0 4px 0 #0006, 0 0 26px var(--fire); transform:rotate(-8deg)}

/* ===================== DOM SCREENS ===================== */
.screens{position:fixed; inset:0; z-index:10; pointer-events:none}
.screen{position:absolute; inset:0; display:none; overflow:hidden; pointer-events:auto}
.screen.on{display:block}
.screen{max-width:520px; margin:0 auto; box-shadow:0 0 60px #0008}

/* shared chunky button */
.mbtn{border:0; cursor:pointer; font-family:var(--disp); font-weight:bold; text-transform:uppercase; letter-spacing:.03em; font-size:16px; color:var(--ink); padding:14px; border-radius:14px; box-shadow:0 4px 0 #0006; display:flex; align-items:center; justify-content:center; gap:8px; width:100%}
.mbtn.primary{background:linear-gradient(180deg,#b6e000,var(--gold) 55%,var(--gold-dk)); box-shadow:0 4px 0 #946012; font-size:18px}
.mbtn.ghost{background:linear-gradient(180deg,#fff7e0,#e7d2a2); box-shadow:0 4px 0 #b89a5e}
.mbtn.small{font-size:13px; padding:10px}
.mbtn.danger{background:linear-gradient(180deg,#ff7a7a,#c0271b); color:#fff; box-shadow:0 4px 0 #7a1810}
.mbtn:active{transform:translateY(2px); box-shadow:0 2px 0 #0006}

/* HOME */
#home{background:linear-gradient(180deg,#3A1F63 0%,#986BD6 42%,#FF6A3D 80%,#F6BA3E 100%)}
.home-wrap{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; padding:calc(40px + var(--safe-t)) 22px calc(18px + var(--safe-b)); gap:6px}
.logo{font-family:var(--disp); text-transform:uppercase; text-align:center; line-height:.9}
/* Bigger, punchier wordmark to match the mockup hero and own the top third. */
.logo .t1{display:block; font-size:46px; color:#fff; text-shadow:0 4px 0 #0006}
.logo .t2{display:block; font-size:46px; color:var(--gold); text-shadow:0 4px 0 #0007}
.logo .sub{display:block; margin-top:7px; font-family:var(--body); font-style:italic; font-size:12.5px; color:#ffe7d4; text-transform:none}
.sparkles{position:absolute; inset:0; pointer-events:none}
.sp{position:absolute; font-size:14px; color:#fff; text-shadow:0 0 6px #fff9}
@media (prefers-reduced-motion:no-preference){ .sp{animation:tw 2.6s ease-in-out infinite} @keyframes tw{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}} }
/* Pull the character moment toward the top so it reads as a hero scene under
   the wordmark, not a lone emoji floating in dead-center space. */
.home-art{flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; position:relative; padding-bottom:8px}
.brainrot-mini{font-size:118px; filter:drop-shadow(0 10px 16px #0007)}
@media (prefers-reduced-motion:no-preference){ .brainrot-mini{animation:bob 2.1s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} }
.speech{background:#fff; color:var(--ink); font-weight:700; font-size:13.5px; padding:9px 15px; border-radius:14px; position:relative; box-shadow:0 4px 10px #0004}
/* tail points down toward the devil below it */
.speech::after{content:""; position:absolute; bottom:-7px; left:50%; margin-left:-7px; border:7px solid transparent; border-top-color:#fff}
.menu{width:100%; max-width:320px; display:flex; flex-direction:column; gap:10px}
.newrow{display:flex; gap:10px}
.newrow .mbtn{flex:1}
.gearbtn{flex:0 0 auto; width:54px; border:0; cursor:pointer; border-radius:14px; background:linear-gradient(180deg,#7a6cff,#3a48c4); color:#fff; font-size:24px; box-shadow:0 4px 0 #28206e}
.lbcard{width:100%; max-width:320px; margin-top:14px; background:#140e1e80; border:1.5px solid #ffffff33; border-radius:14px; padding:10px 12px; color:#fff}
.lbcard h4{margin:0 0 7px; font-family:var(--disp); font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:#ffd98f}
.lb-rows{display:flex; flex-direction:column; gap:3px}
.lb-rows .row{display:flex; align-items:center; gap:9px; font-size:13px}
.lb-rows .rk{width:20px; text-align:center}
.lb-rows .nm{flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-rows .sc{font-weight:800; color:#ffd98f}
/* Short phones (e.g. 360x640): the full-size hero + menu + leaderboard overruns
   the fold and clips the board. Compress the wordmark, character and gaps so the
   whole menu fits without scrolling. */
@media (max-height:700px){
  .home-wrap{padding-top:calc(22px + var(--safe-t)); gap:4px}
  .logo .t1,.logo .t2{font-size:38px}
  .home-art{gap:8px; padding-bottom:0}
  .brainrot-mini{font-size:84px}
  .lbcard{margin-top:8px; padding:8px 12px}
  .boot-logo .t1,.boot-logo .t2{font-size:34px}
}

/* SHOP */
#shop{background:linear-gradient(180deg,#37A6E6 0%,#7e7be6 45%,#986BD6 72%,#FF6A3D 100%)}
.canopy{height:34px; background:repeating-linear-gradient(90deg,#FF5E8A 0 26px,#FFF6E2 26px 52px); border-bottom:3px solid var(--wood-dk)}
.shop-top{position:absolute; top:calc(40px + var(--safe-t)); left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:0 14px; z-index:2}
.shop-top .coinbal{color:var(--cream)}
.hd{color:var(--cream); text-align:center; padding:46px 12px 2px}
.hd h2{font-family:var(--disp); margin:0; font-size:21px; letter-spacing:.03em; text-transform:uppercase; text-shadow:0 2px 0 #0005}
.hd .tag{font-size:11.5px; font-style:italic; opacity:.85; margin-top:2px}
.board{position:absolute; left:14px; right:14px; top:120px; bottom:14px; background:linear-gradient(180deg,#FFF6E2,#FBEFCB); border:3px solid #E0A93A; border-radius:18px; padding:14px 14px 12px; box-shadow:inset 0 2px 0 #fff7e0, 0 6px 20px #3a1f6350; display:flex; flex-direction:column; max-width:492px; margin:0 auto}
.cta{display:flex; align-items:center; justify-content:space-between; width:100%; border:0; cursor:pointer; text-align:left; padding:11px 14px; border-radius:13px; margin-bottom:9px; color:var(--ink); background:linear-gradient(180deg,var(--gold),var(--gold-dk)); box-shadow:0 3px 0 #946012}
.cta.ghost{background:linear-gradient(180deg,#fff7e0,#ecd9aa); box-shadow:0 3px 0 var(--parch-edge)}
.cta b{font-size:15px; text-transform:uppercase; display:block; line-height:1.1}
.cta small{font-size:10.5px; font-weight:600; opacity:.7; font-family:var(--body)}
.cta .price{font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:4px}
/* Designed empty state for a sold-out shelf — centered, padded, on-theme,
   so it reads as intentional rather than a cramped orphaned line. */
.empty-note{grid-column:1/-1; text-align:center; padding:14px 10px; color:var(--wood); font-family:var(--disp); text-transform:uppercase; letter-spacing:.04em; font-size:12px; background:#fff7e0; border:2px dashed var(--parch-edge); border-radius:13px}
.shelflbl{font-family:var(--disp); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; color:var(--shadow); margin:12px 2px 8px; display:flex; align-items:center; gap:8px}
.shelflbl:first-child{margin-top:4px}
.shelflbl::after{content:""; flex:1; height:2px; background:repeating-linear-gradient(90deg,var(--parch-edge) 0 6px,transparent 6px 10px)}
.scrollmid{flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px}
.stock{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.coin{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; background:#fff7e0; border:2px solid var(--parch-edge); border-radius:14px; padding:10px 6px 8px; cursor:pointer}
.coin:active{transform:translateY(1px)}
.disc{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:26px; box-shadow:inset 0 -6px 10px #0004, inset 0 4px 8px #ffffff70, 0 2px 0 #0003}
.coin .nm{font-family:var(--disp); font-weight:bold; font-size:11.5px; text-transform:uppercase; color:var(--ink); text-align:center}
/* price tag reads as a tap-to-buy button (gold pill) so buying is obvious */
.coin .pr{font-size:11px; font-weight:800; color:var(--ink); display:inline-flex; align-items:center; gap:3px;
  background:linear-gradient(180deg,var(--gold),var(--gold-dk)); padding:4px 11px; border-radius:999px; box-shadow:0 2px 0 #946012}
.coin:hover .pr,.coin:focus-visible .pr{filter:brightness(1.06)}
.coin.locked{filter:grayscale(.55); opacity:.92}
/* can't afford → clearly greyed + a lock + a muted, non-buttony price */
.coin.cant{filter:grayscale(.7); opacity:.62; cursor:not-allowed}
.coin.cant .pr{background:#0000; color:var(--wood); box-shadow:none; padding:2px 0}
.coin.cant::after{content:"🔒"; position:absolute; top:7px; right:8px; font-size:13px; opacity:.8}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.coin.shake{animation:shakeX .36s}
@media (prefers-reduced-motion:reduce){ .coin.shake{animation:none} }
.coin .tierbadge{position:absolute; top:6px; left:7px; font-size:8.5px; font-weight:800; background:var(--ink); color:var(--cream); padding:2px 5px; border-radius:6px}
.upsec{display:flex; flex-direction:column; gap:8px; padding-bottom:6px}
.uprow{display:flex; align-items:center; gap:10px; background:#fff7e0; border:2px solid var(--parch-edge); border-radius:13px; padding:8px 9px}
.upic{flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; font-size:20px; box-shadow:inset 0 -3px 6px #0004, inset 0 2px 5px #ffffff66}
.upinfo{flex:1; min-width:0}
.upinfo b{display:block; font-family:var(--disp); font-size:12px; text-transform:uppercase; color:var(--ink); line-height:1.1}
.upinfo small{font-size:9.5px; color:#8a6f3e}
.uplvl{flex:none; display:flex; gap:3px}
.pip-dot{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:inset 0 0 0 1px var(--gold-dk)}
.pip-dot.off{background:#d8c8a0; box-shadow:none}
.upbuy{flex:none; border:0; cursor:pointer; font-weight:800; font-size:11px; color:var(--ink); background:linear-gradient(180deg,var(--gold),var(--gold-dk)); padding:7px 10px; border-radius:9px; box-shadow:0 2px 0 #946012; display:inline-flex; align-items:center; gap:3px}
.upbuy:disabled{opacity:.45; cursor:default}
.deckwrap{margin-top:8px; border-top:2px dashed var(--parch-edge); padding-top:8px}
.deckhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.deckhead .t{font-family:var(--disp); text-transform:uppercase; letter-spacing:.05em; font-size:11px; color:var(--wood)}
.deckhead .hint{font-size:9px; font-style:italic; color:#9a7c45}
.deckscroll{display:flex; gap:9px; overflow-x:auto; padding:2px 2px 8px}
.deckcoin{position:relative; flex:none; display:flex; flex-direction:column; align-items:center; gap:3px}
.deckcoin .disc{width:44px; height:44px; font-size:20px}
.deckcoin .qty{position:absolute; top:-4px; right:-4px; background:var(--ink); color:var(--cream); font-size:9.5px; font-weight:800; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--cream)}
.deckcoin .ln{font-size:9px; font-weight:700; color:var(--wood); text-transform:uppercase}
.deckcoin{cursor:pointer; transition:transform .12s ease}
.deckcoin .sellnudge{font-size:7.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#fff;
  background:var(--berry); padding:1px 5px; border-radius:999px; opacity:0; transition:opacity .15s ease; box-shadow:0 1px 3px #0004}
.deckcoin:hover .sellnudge,.deckcoin.holding .sellnudge{opacity:1}
.deckcoin.holding{transform:translateY(-6px) scale(1.06)}      /* lift while pressed */
.deckcoin.pop .disc{animation:deckpop .46s cubic-bezier(.2,1.7,.3,1)}
@keyframes deckpop{0%{transform:scale(.4); filter:brightness(2.2)}55%{transform:scale(1.28)}100%{transform:scale(1)}}
.backtoroad{margin-top:8px}

/* a flashing coin that flies from the shelf into the deck on purchase */
.fly-coin{position:fixed; z-index:120; pointer-events:none;
  box-shadow:0 0 0 5px #ffffff99, 0 0 22px 8px var(--gold);
  transition:transform .46s cubic-bezier(.3,.9,.25,1), opacity .46s ease}
@media (prefers-reduced-motion:reduce){ .fly-coin{transition:opacity .2s} .deckcoin.pop .disc{animation:none} }

/* hold-to-sell: dim/grey the store and float the card with a "Sell for X" CTA */
#shop.selling .board{filter:grayscale(.65) brightness(.72); transition:filter .18s ease}
.sell-overlay{position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:rgba(12,7,26,.62); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.sell-overlay.hidden{display:none}
.sell-card{display:flex; flex-direction:column; align-items:center; gap:12px; width:min(76%,300px);
  padding:22px 20px; border-radius:20px; background:linear-gradient(180deg,#2b1c43,#1d1230);
  border:2px solid #6b49b0; box-shadow:0 18px 40px -10px #000a, inset 0 2px 0 #ffffff14;
  animation:sellrise .2s cubic-bezier(.2,1.5,.3,1)}
@keyframes sellrise{0%{transform:translateY(10px) scale(.92); opacity:0}100%{transform:none; opacity:1}}
.sell-card .disc{width:74px; height:74px; font-size:36px; transform:scale(1.06)}
.sell-card .sell-name{font-family:var(--disp); font-weight:bold; text-transform:uppercase; font-size:15px; color:var(--cream)}
.sell-card .sell-confirm{width:100%; background:linear-gradient(180deg,var(--gold),var(--gold-dk)); box-shadow:0 4px 0 #946012}
.sell-card .mbtn.small{font-size:12px; padding:9px; box-shadow:0 3px 0 #0006; background:#ffffff14; color:var(--cream)}

/* element disc colors */
.el-fire{background:radial-gradient(circle at 35% 28%,#ffb27a,var(--fire) 60%,#d2401d)}
.el-water{background:radial-gradient(circle at 35% 28%,#9fd6f6,var(--water) 60%,#1c79b8)}
.el-earth{background:radial-gradient(circle at 35% 28%,#aee08a,var(--earth) 60%,#477f30)}
.el-air{background:radial-gradient(circle at 35% 28%,#e8fafd,var(--air) 60%,#6fb6c0); color:var(--ink)}
.el-shadow{background:radial-gradient(circle at 35% 28%,#c0a0ee,var(--shadow) 60%,#5d33a0)}
.el-light{background:radial-gradient(circle at 35% 28%,#fff0b0,var(--light) 60%,#e0a800); color:var(--ink)}
.el-arrow{background:radial-gradient(circle at 35% 28%,#d9c39a,#9c7a4c 60%,#6b4a2b)}
.el-bomb{background:radial-gradient(circle at 35% 28%,#7c8794,#3d4654 60%,#222932)}
.el-physical{background:radial-gradient(circle at 35% 28%,#d9c39a,#9c7a4c 60%,#6b4a2b)}
.el-none{background:radial-gradient(circle at 35% 28%,#cfcfcf,#8a8a8a 60%,#555)}

/* SUBHEAD screens (unlocks/leaderboard/settings) */
#unlocks,#leaderboard,#settings{background:linear-gradient(180deg,#3A1F63,#1f1030)}
.subhead{position:relative; padding:calc(18px + var(--safe-t)) 16px 8px 60px; color:#fff}
.subhead .iconbtn{position:absolute; left:12px; top:calc(14px + var(--safe-t))}
.subhead h3{margin:0; font-family:var(--disp); text-transform:uppercase; font-size:18px}
.subhead p{margin:3px 0 0; font-size:10.5px; color:#cdbff0}
.ulgrid{position:absolute; top:80px; left:14px; right:14px; bottom:14px; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; max-width:492px; margin:0 auto}
.ulcard{background:#ffffff10; border:2px solid #ffffff20; border-radius:14px; padding:11px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.ulcard .un{font-family:var(--disp); font-size:12.5px; text-transform:uppercase; color:#fff}
.ulcard .cond{font-size:9px; color:#b9aee0; line-height:1.2}
.ulcard .got{font-size:9px; color:#7ce0a0; font-weight:800; text-transform:uppercase}
.lockdisc{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:#4a4658; font-size:24px}
.lbtabs{display:flex; gap:8px; justify-content:center; padding:6px 14px}
.lbtab{border:0; cursor:pointer; background:#ffffff14; color:#cfc6dd; font-weight:bold; text-transform:uppercase; font-size:12px; padding:8px 18px; border-radius:999px}
.lbtab.active{background:var(--gold); color:var(--ink)}
.lblist{position:absolute; top:120px; left:14px; right:14px; bottom:14px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; max-width:492px; margin:0 auto}
.lbig{display:flex; align-items:center; gap:10px; background:#ffffff10; border:1.5px solid #ffffff20; border-radius:11px; padding:9px 11px; color:#fff}
.lbig .rk{width:24px; font-family:var(--disp); font-weight:bold; text-align:center; color:#ffd98f}
.lbig .nm{flex:1; font-weight:700; font-size:13px}
.lbig .sc{font-weight:800; color:#ffd98f}
.lbig.me{border-color:var(--gold); background:#f6ba3e20}

/* SETTINGS */
.setwrap{position:absolute; top:80px; left:14px; right:14px; bottom:14px; overflow-y:auto; color:#fff; max-width:492px; margin:0 auto}
.setwrap h4{font-family:var(--disp); text-transform:uppercase; letter-spacing:.04em; font-size:12px; color:#ffd98f; margin:16px 2px 8px}
.setwrap h4:first-child{margin-top:0}
.setrow{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#ffffff10; border:1.5px solid #ffffff20; border-radius:11px; padding:11px 13px; margin-bottom:8px; font-size:13px; font-weight:600}
/* Gold accent so toggles read as part of the candy palette, not the browser default purple. */
.setrow input[type=checkbox]{width:22px; height:22px; accent-color:var(--gold-dk)}
.setrow input[type=text]{background:#0004; border:1.5px solid #ffffff33; color:#fff; border-radius:8px; padding:7px 9px; font-size:13px; width:130px}
.admin-pass{width:100%; background:#0004; border:1.5px solid #ffffff33; color:#fff; border-radius:8px; padding:10px; font-size:13px; margin-bottom:8px}
.admin-panel{display:flex; flex-direction:column; gap:8px}

/* FUSION */
#fusion{background:radial-gradient(circle at 50% 38%, #6a4a1c, #3c2a10 58%, #211608); overflow:hidden}
.rays{position:absolute; inset:0; overflow:hidden}
.rays::before{content:""; position:absolute; left:50%; top:38%; width:840px; height:840px; margin:-420px 0 0 -420px; background:repeating-conic-gradient(from 0deg, #ffe08c2e 0 9deg, transparent 9deg 21deg)}
.glow{position:absolute; left:50%; top:42%; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; background:radial-gradient(circle, #ffd25a80, #ffa03c20 55%, transparent 70%)}
.particles{position:absolute; inset:0; pointer-events:none}
.pcl{position:absolute; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe39a,var(--gold) 60%,var(--gold-dk)); box-shadow:0 0 6px #ffc850b3}
.fuwrap{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; padding:calc(52px + var(--safe-t)) 22px calc(18px + var(--safe-b)); max-width:492px; margin:0 auto}
.fuhead{font-family:var(--disp); font-style:italic; font-weight:bold; text-transform:uppercase; font-size:30px; color:var(--gold); text-shadow:0 3px 0 #0005, 0 0 18px #ffc850b3; text-align:center}
.inputs{position:relative; margin-top:12px; height:92px; display:flex; align-items:center; justify-content:center; gap:36px}
.inputs .ring{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:188px; height:80px; border:3px dashed #fff0c8bf; border-radius:50%}
.ingredient{position:relative; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:24px; box-shadow:inset 0 -4px 8px #0005, inset 0 3px 6px #ffffff66, 0 2px 6px #0006}
.becomes{color:#ffe7c4; font-size:26px; margin-top:2px}
.rescoin{position:relative; margin-top:4px; width:118px; height:118px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:56px; box-shadow:0 0 0 5px #ffffffe6, 0 0 30px 8px #ffaa46cc, inset 0 -8px 16px #0005}
.respill{margin-top:14px; font-family:var(--disp); font-weight:bold; text-transform:uppercase; font-size:15px; color:var(--ink); background:linear-gradient(180deg,#fff0b0,var(--gold) 60%,var(--gold-dk)); padding:8px 18px; border-radius:999px; box-shadow:0 3px 0 var(--gold-dk); text-align:center}
.codex{margin-top:9px; font-size:10.5px; color:#ffe7c4; text-align:center}
.flavor{margin-top:6px; font-size:11px; font-style:italic; color:#d8c2a0; text-align:center; min-height:14px}
.sweet{margin-top:auto; min-width:180px}
@media (prefers-reduced-motion:no-preference){
  .rays::before{animation:spin 26s linear infinite}
  .glow,.rescoin{animation:pulse 2.1s ease-in-out infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
}

/* END */
#end.victory{background:radial-gradient(120% 90% at 50% 10%, #ffe08a, #F6BA3E 50%, #b07f1e)}
#end.defeat{background:radial-gradient(120% 90% at 50% 10%, #C13AC1, #7a2480 58%, #3A1F63)}
/* Center the result+stats+actions as one cohesive cluster instead of pinning
   the title to the top and the buttons to the bottom — that left a big dead
   void in the middle of the screen and weakened the celebratory moment. */
.endwrap{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:calc(40px + var(--safe-t)) 22px calc(20px + var(--safe-b)); max-width:492px; margin:0 auto}
.result{text-align:center; line-height:1}
.result .word{display:none; font-family:var(--disp); text-transform:uppercase; font-size:54px; letter-spacing:.01em; text-shadow:0 4px 0 #0007, 0 6px 18px #0005}
.result .sub{display:none; margin-top:9px; font-size:14px; font-weight:600}
#end.victory .word.win{display:block; color:#fff; text-shadow:0 4px 0 #b07f1e, 0 6px 18px #0005} #end.victory .sub.win{display:block; color:#6a4300}
#end.defeat .word.lose{display:block; color:#ff7a6a} #end.defeat .sub.lose{display:block; color:#f3d6ec}
.endstat{background:#00000040; border:1.5px solid #ffffff30; border-radius:14px; padding:11px 18px; color:#fff; font-weight:700; font-size:13px; text-align:center}
.endstat .big{font-family:var(--disp); font-size:26px; color:var(--gold); margin-right:4px}
/* margin-top:auto removed — the wrap now centers everything, so the actions
   sit just under the leaderboard rather than being shoved to the bottom edge. */
.endbottom{width:100%; max-width:320px; display:flex; flex-direction:column; gap:10px}

/* version tag + error banner */
.version-tag{position:fixed; right:6px; bottom:calc(4px + var(--safe-b)); z-index:50; font-size:9px; font-family:ui-monospace,monospace; color:#fff; opacity:.32; pointer-events:none}
.err-banner{position:fixed; top:0; left:0; right:0; z-index:200; background:#c0271b; color:#fff; font-size:12px; font-weight:700; padding:10px 14px; text-align:center}