/* ============================================================
   BOBA CLICKER — styles
   A deliberately single-theme arcade look: deep plum stage,
   warm cream panels, pink + gold accents. Every colour is painted
   explicitly so the page holds on any host background.
   ============================================================ */

:root{
  /* ground */
  --plum-1:#241031;
  --plum-2:#3d1a48;
  --plum-3:#5a2560;
  /* panels */
  --cream:#fff7ec;
  --cream-2:#ffeed8;
  --ink:#2e1c28;
  --ink-soft:#7a5c6c;
  --line:rgba(46,28,40,.13);
  /* accents */
  --pink:#ff5d8f;
  --pink-dark:#d63d6e;
  --gold:#ffc23c;
  --gold-dark:#dd9509;
  --mint:#31c795;
  --mint-dark:#1f9d6a;
  --star:#8f7bff;
  --star-dark:#6a52e0;
  --tea:#b9743e;
  --aqua:#39d6e0;
  --aqua-dark:#0e97a6;

  /* one shadow scale, used everywhere */
  --lift-1:0 2px 0 var(--ink);
  --lift-2:0 4px 0 var(--ink);
  --lift-3:0 6px 0 var(--ink);
  --soft:0 10px 30px rgba(0,0,0,.35);

  --r-sm:10px;
  --r:14px;
  --r-lg:20px;

  /* sized from the device box, set by layout() in game.js */
  --dw:430px; --dh:900px;
  --cup-w:min(calc(var(--dh) * .27), calc(var(--dw) * .5), 210px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%}

/* ============================================================
   THE DEVICE
   This is a phone game, so it is always laid out as a phone. On a
   desktop it sits in a phone-sized frame with the branding beside it,
   rather than stretching into a layout nobody will ever play on.
   ============================================================ */
#shell{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,72px);
  padding:0;
}
#device{
  position:relative;overflow:hidden;flex:0 0 auto;
  width:min(100vw, 430px);
  height:min(100dvh, 920px);
  background:var(--plum-1);
}
#brand{display:none}

/* desktop: give the frame an edge and put the name next to it */
@media (min-width:760px){
  /* let the frame float clear of the window edges */
  #shell{padding:26px}
  #device{height:min(calc(100dvh - 52px), 900px)}
  body{background:
    radial-gradient(900px 620px at 22% 12%, #4b2352 0%, transparent 60%),
    radial-gradient(760px 560px at 84% 92%, #5a2244 0%, transparent 62%),
    linear-gradient(158deg,#1b0f22 0%, #2a1430 60%, #1a0d20 100%);}
  #device{
    border-radius:34px;
    border:3px solid rgba(255,255,255,.14);
    box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 10px rgba(0,0,0,.35);
  }
  #brand{
    display:block;max-width:340px;color:var(--cream);
  }
  .brand-mark{font-size:64px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));
    animation:bobble 3.4s ease-in-out infinite}
  #brand h1{font-size:44px;font-weight:800;letter-spacing:.5px;margin:10px 0 14px;line-height:1}
  #brand h1 em{font-style:normal;color:var(--gold)}
  #brand p{font-size:15.5px;font-weight:600;line-height:1.6;color:rgba(255,247,236,.72)}
  #brand .brand-note{
    margin-top:16px;font-size:13px;color:rgba(255,247,236,.45);
    border-left:3px solid var(--pink);padding-left:12px;
  }
}
@media (max-width:1000px){ #brand{max-width:260px} }

body{
  font-family:"Baloo 2","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--plum-1);
  overflow:hidden;
  overscroll-behavior:none;
  user-select:none;
  -webkit-user-select:none;
}

.hidden{display:none !important}
.center{text-align:center}
.boba-art{
  display:inline-block;width:1em;height:1em;object-fit:contain;vertical-align:-.12em;
  pointer-events:none;-webkit-user-drag:none;
}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:absolute;inset:0;z-index:300;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:var(--plum-1);color:var(--cream);font-size:17px;font-weight:700;
}
.loader-cup{
  width:52px;height:66px;border-radius:6px 6px 16px 16px;
  border:4px solid rgba(255,255,255,.3);overflow:hidden;position:relative;
}
.loader-fill{
  position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(180deg,#d9a066,#7a4321);
  animation:fillUp 1.5s ease-in-out infinite;
}
@keyframes fillUp{0%{height:0}60%{height:100%}100%{height:100%;opacity:.25}}

/* ============================================================
   LAYOUT
   ============================================================ */
#game{
  height:100%;display:flex;flex-direction:column;position:relative;
  background:
    radial-gradient(1200px 780px at 10% -12%, #7a3480 0%, transparent 58%),
    radial-gradient(950px 640px at 98% 112%, #8a3364 0%, transparent 60%),
    linear-gradient(158deg, var(--plum-1) 0%, var(--plum-2) 55%, #2f1438 100%);
}

/* slow hue drift keeps the ground alive without drawing attention */
#game::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(760px 520px at 50% 40%, rgba(255,194,60,.07), transparent 70%);
  animation:groundDrift 18s ease-in-out infinite;
}
@keyframes groundDrift{
  0%,100%{transform:translate3d(-4%,-2%,0) scale(1)}
  50%    {transform:translate3d(4%,3%,0) scale(1.12)}
}

/* ============================================================
   TOP BAR
   ============================================================ */
#topbar{
  position:relative;z-index:8;
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:10px 16px;padding-top:max(10px, env(safe-area-inset-top));
  /* No backdrop-filter here: the atmosphere canvas animates behind this bar,
     which forces the blur to recompute every frame (measured at 9fps). A
     gradient over a dark ground reads the same. */
  background:linear-gradient(180deg, rgba(14,5,18,.92), rgba(20,8,26,.72));
  border-bottom:1px solid rgba(255,255,255,.09);
}
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo-mark{font-size:30px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));animation:bobble 3.4s ease-in-out infinite}
@keyframes bobble{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(5deg)}}
.logo-text{font-size:21px;font-weight:800;color:var(--cream);letter-spacing:.3px;line-height:1}
.logo-text em{font-style:normal;color:var(--gold)}

.counter{flex:1 1 auto;text-align:center;line-height:1.06;min-width:0}
#pearl-count{
  font-size:clamp(26px,4.3vw,44px);font-weight:800;color:var(--cream);
  text-shadow:0 3px 0 rgba(0,0,0,.3);
  font-variant-numeric:tabular-nums;
  transition:transform .09s cubic-bezier(.3,1.7,.5,1);
}
#pearl-count.pop{transform:scale(1.06)}
#pearl-label{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,247,236,.5);font-weight:800}
#cps-line{margin-top:4px;font-size:14px;font-weight:800;color:var(--gold)}
#cps-line.boosted{color:#fff;animation:cpsThrob .55s ease-in-out infinite}
@keyframes cpsThrob{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

.topbar-btns{display:flex;gap:8px;flex:0 0 auto}
.icon-btn{
  width:42px;height:42px;border-radius:12px;border:none;cursor:pointer;
  background:rgba(255,255,255,.1);color:var(--cream);font-size:18px;
  transition:transform .12s cubic-bezier(.3,1.6,.5,1), background .15s;
}
.icon-btn:hover{background:rgba(255,255,255,.2)}
.icon-btn:active{transform:scale(.88)}

/* ============================================================
   MAIN SPLIT
   ============================================================ */
#main{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;position:relative;z-index:1}


/* ============================================================
   STAGE + CUP
   ============================================================ */
#stage{
  flex:0 0 auto;min-width:0;position:relative;min-height:46%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:16px 10px 12px;
}


#buff-bar{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);pointer-events:none;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;z-index:6;width:92%;
}
.buff{
  display:flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:linear-gradient(180deg,var(--gold),var(--gold-dark));
  color:#4a2b00;font-weight:800;font-size:13px;
  box-shadow:0 3px 0 rgba(0,0,0,.32), 0 0 24px rgba(255,194,60,.5);
  animation:buffIn .35s cubic-bezier(.2,1.6,.5,1);
}
.buff.frenzy{background:linear-gradient(180deg,#ff8ab0,var(--pink-dark));color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.32), 0 0 24px rgba(255,93,143,.55)}
.buff .t{font-variant-numeric:tabular-nums;opacity:.8}
.buff.ending{animation:buffPulse .5s ease-in-out infinite}
@keyframes buffIn{from{transform:scale(.4) translateY(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes buffPulse{0%,100%{opacity:1}50%{opacity:.45}}

#cup-wrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;
}

/* the cup floats, so its contact shadow breathes in counterpoint */
#cup-shadow{
  position:absolute;bottom:2%;left:50%;transform:translateX(-50%);
  width:62%;height:7%;border-radius:50%;z-index:0;
  /* tinted by the current flavour, like the aura above it */
  background:radial-gradient(ellipse at center,
    color-mix(in srgb, var(--tea-4) 60%, rgba(8,2,12,.72)), rgba(8,2,12,0) 70%);
  filter:blur(7px);
  animation:shadowBreathe 4.5s ease-in-out infinite;
}
@keyframes shadowBreathe{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.85}
  50%    {transform:translateX(-50%) scale(.82);opacity:.55}
}

#fx{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);pointer-events:none;z-index:3}
#heat-fx{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);pointer-events:none;z-index:1}

#cup{
  position:relative;z-index:2;background:none;border:none;cursor:pointer;padding:0;
  touch-action:manipulation;
  /* The bundled Microsoft artwork determines the cup's size on every device. */
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  transition:transform .1s cubic-bezier(.3,1.7,.5,1);
  animation:idleFloat 4.5s ease-in-out infinite;
}
/* the glyph carries its own drop-shadow, so nothing filters #cup-body */
#cup-body{display:block}
#cup-emoji{
  display:block;
  /* Leave room above for the idle float and below for the hint pill. */
  font-size:calc(var(--cup-w) * .88);line-height:1;text-align:center;
  /* a flavour rotates the glyph towards its own hue, since it cannot repaint
     the drink the way the SVG's gradient stops could */
  filter:hue-rotate(var(--cup-hue)) saturate(var(--cup-sat))
         drop-shadow(0 8px 10px rgba(0,0,0,.45));
  transition:filter .6s ease;
}
#cup-emoji .boba-art{display:block}
@keyframes idleFloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-10px) rotate(.6deg)}}
#cup:hover{transform:scale(1.035)}
#stage[data-heat-active="true"] #cup{animation:none}
#cup.squish{animation:none;transform:scale(calc(.92 - var(--heat,0) * .05)) translateY(5px)}
#cup:focus-visible{outline:4px solid var(--gold);outline-offset:12px;border-radius:20px}

/* the cup shakes on each click */
#cup-emoji.jiggle{animation:cupJiggle .34s cubic-bezier(.3,1.5,.5,1)}
@keyframes cupJiggle{
  0%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-6px) rotate(-4deg) scale(1.04)}
  62%{transform:translateY(2px) rotate(3deg) scale(.98)}
  100%{transform:translateY(0) rotate(0)}
}

/* glow ring behind the cup */
#cup-wrap{--fill:0}
#cup-wrap::before{
  content:"";position:absolute;width:118%;aspect-ratio:1;border-radius:50%;
  /* the drink's colour, and it grows with the empire: the four steps used to
     be four rows of pearls inside the cup */
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--tea-2) 55%, transparent) 0%,
      color-mix(in srgb, var(--tea-3) 26%, transparent) 38%,
      transparent 68%);
  filter:blur(20px);z-index:1;animation:pulseGlow 3.6s ease-in-out infinite;
  transition:background .5s ease;
}
@keyframes pulseGlow{
  0%,100%{transform:scale(calc(.80 + var(--fill) * .16));opacity:calc(.45 + var(--fill) * .30)}
  50%    {transform:scale(calc(.96 + var(--fill) * .20));opacity:calc(.70 + var(--fill) * .30)}
}

/* expanding ring on every click */
.ripple{
  position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;border:3px solid rgba(255,220,150,.85);
  pointer-events:none;z-index:4;
  animation:rippleOut .62s cubic-bezier(.15,.7,.35,1) forwards;
}
.ripple.crit{border-color:rgba(255,194,60,1);border-width:4px}
@keyframes rippleOut{
  0%{transform:scale(.25);opacity:.95}
  100%{transform:scale(3.4);opacity:0}
}

#click-hint{
  position:absolute;bottom:6%;left:50%;
  color:var(--cream);font-weight:800;font-size:15px;letter-spacing:.6px;
  background:rgba(0,0,0,.38);padding:7px 17px;border-radius:999px;
  animation:hintPulse 1.7s ease-in-out infinite;z-index:5;white-space:nowrap;
}
@keyframes hintPulse{
  0%,100%{opacity:.5;transform:translateX(-50%) translateY(0)}
  50%{opacity:1;transform:translateX(-50%) translateY(-5px)}
}

#stage-stats{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;z-index:5}
.chip{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);
  border-radius:12px;padding:7px 14px;text-align:center;line-height:1.15;min-width:88px;
  transition:transform .2s cubic-bezier(.3,1.6,.5,1), background .2s;
}
.chip.bump{transform:scale(1.09);background:rgba(255,255,255,.16)}
.chip b{display:block;color:var(--cream);font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.chip span{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:rgba(255,247,236,.5);font-weight:800}
#chip-crystal b{color:#9be8ff}
#chip-star b{color:#c9bcff}

/* ============================================================
   BUFF SCREEN GLOW + PRESTIGE FLASH
   ============================================================ */
#buff-glow{
  position:absolute;inset:0;pointer-events:none;z-index:7;opacity:0;
  transition:opacity .5s ease;
}
#buff-glow.on{opacity:1;animation:glowBreathe 2.1s ease-in-out infinite}
#buff-glow.rush{box-shadow:inset 0 0 130px rgba(255,194,60,.55)}
#buff-glow.frenzy{box-shadow:inset 0 0 130px rgba(255,93,143,.6)}
#buff-glow.blessing{box-shadow:inset 0 0 170px rgba(255,238,160,.75)}
@keyframes glowBreathe{0%,100%{opacity:.55}50%{opacity:1}}

#flash{
  position:absolute;inset:0;pointer-events:none;z-index:250;opacity:0;
  background:radial-gradient(circle at 50% 50%, #fff 0%, var(--gold) 42%, transparent 72%);
}
#flash.go{animation:flashOut 1.05s cubic-bezier(.2,.7,.3,1)}
#flash.star{background:radial-gradient(circle at 50% 50%, #fff 0%, var(--star) 45%, transparent 74%)}
@keyframes flashOut{
  0%{opacity:0;transform:scale(.2)}
  18%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(2.1)}
}

/* ============================================================
   PANEL + TABS
   ============================================================ */
#panel{
  flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) 64px;
  grid-template-rows:minmax(0,1fr);min-height:0;min-width:0;
  background:linear-gradient(180deg,var(--cream) 0%, var(--cream-2) 100%);
  border-top:3px solid var(--ink);border-radius:20px 20px 0 0;
  box-shadow:0 -8px 26px rgba(0,0,0,.4);
}

#tabs{
  grid-column:2;grid-row:1;display:flex;flex-direction:column;min-height:0;
  align-self:start;max-height:100%;overflow-y:auto;scrollbar-width:none;
  background:linear-gradient(180deg,var(--cream),var(--cream-2));
  padding:7px 5px max(7px,env(safe-area-inset-bottom));gap:5px;
  border-left:1px solid var(--line);border-radius:0 17px 0 0;
}
#tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 1 60px;height:60px;max-height:60px;min-width:0;min-height:44px;padding:7px 2px;border:none;cursor:pointer;
  background:rgba(255,255,255,.72);color:var(--ink-soft);
  border:1px solid rgba(46,28,40,.12);
  font-family:inherit;font-size:10px;font-weight:800;
  border-radius:10px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:background .18s, color .18s, transform .12s;
}
.tab i{font-style:normal;font-size:16px;line-height:1;transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
.tab em{font-style:normal;letter-spacing:.1px}
/* "Achievements" is too long for one line in a 64px rail, so it breaks
   at the soft hyphen in the markup instead of being clipped. */
.tab[data-tab="awards"] em{font-size:9px;letter-spacing:-.1px;white-space:normal;overflow:visible;hyphens:manual;line-height:1.02;text-align:center}
.tab:hover{background:#fff;color:var(--ink)}
.tab:hover i{transform:translateY(-2px) scale(1.12)}
.tab.active{background:var(--cream-2);color:var(--ink);border-color:var(--ink)}
.tab.active i{transform:scale(1.1)}
.badge{
  position:absolute;top:1px;right:4px;background:var(--pink);color:#fff;
  border-radius:999px;padding:0 6px;font-size:10.5px;line-height:16px;min-width:16px;
  box-shadow:0 0 0 2px var(--cream-2);
  animation:badgePop .3s cubic-bezier(.2,1.7,.5,1);
}
/* .badge is pinned to the tab buttons, which are position:relative. Inside a
   heading there is no positioned ancestor, so it needs to sit in the flow. */
.badge.inline{position:static;display:inline-block;vertical-align:2px;margin-left:2px}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}

.tab-body{
  grid-column:1;grid-row:1;overflow-y:auto;overflow-x:hidden;padding:13px;
  padding-bottom:max(13px,env(safe-area-inset-bottom));min-width:0;min-height:0;
  border-radius:17px 0 0 0;scroll-padding-top:64px;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.22) transparent;
  animation:tabIn .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tab-body::-webkit-scrollbar{width:9px}
.tab-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:9px}

.hint{font-size:13px;color:var(--ink-soft);font-weight:600;line-height:1.5;margin:2px 2px 11px}
.section-title{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:1.6px;color:var(--ink-soft);
  margin:18px 2px 9px;border-top:2px dashed var(--line);padding-top:13px;
}
.pill{
  margin-left:auto;background:var(--ink);color:var(--cream);
  border-radius:999px;padding:2px 9px;font-size:11px;letter-spacing:.4px;
}

/* ============================================================
   BUY AMOUNT
   ============================================================ */
#buy-amounts{
  position:relative;top:auto;z-index:10;display:flex;align-items:center;gap:6px;
  flex:0 0 auto;
  margin:0 -13px 12px;padding:10px 12px 12px;
  background:var(--cream);border-bottom:1px solid var(--line);
  box-shadow:0 6px 12px rgba(46,28,40,.12);
  isolation:isolate;
}
#tab-shop{display:flex;flex-direction:column;overflow:hidden}
#shop-list{
  position:relative;z-index:0;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  margin:0 -13px;padding:0 13px 13px;scrollbar-width:none;
}
#shop-list::-webkit-scrollbar{display:none}
.buy-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-soft)}
.amt{
  flex:1;min-height:40px;padding:7px 0;border:2px solid var(--ink);border-radius:var(--r-sm);cursor:pointer;
  background:#fff;color:var(--ink);font-family:inherit;font-weight:800;font-size:13px;
  box-shadow:var(--lift-1);transition:transform .1s, box-shadow .1s, background .15s;
}
.amt:active{transform:translateY(2px);box-shadow:none}
.amt.active{background:var(--ink);color:var(--cream)}

/* ============================================================
   SHOP ROWS
   ============================================================ */
.shop-item{
  touch-action:manipulation;
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 11px;margin-bottom:8px;cursor:pointer;position:relative;overflow:hidden;
  background:#fff;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--lift-2);
  font-family:inherit;color:var(--ink);
  transition:transform .1s, box-shadow .1s, filter .2s, opacity .2s;
}
.shop-item:hover:not(.cant):not(.locked){transform:translateY(-2px);box-shadow:var(--lift-3)}
.shop-item:active:not(.cant):not(.locked){transform:translateY(4px);box-shadow:none}
.shop-item.cant{filter:grayscale(.7);opacity:.6;cursor:not-allowed}
.shop-item.locked{background:#e9dfd1;cursor:not-allowed;color:#8f8072;box-shadow:var(--lift-1)}
.shop-item.locked .si-icon{filter:grayscale(1) brightness(.8)}

/* sheen sweep the moment a row becomes affordable */
.shop-item.justAfford::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);
  animation:sweep .75s ease-out;
}
@keyframes sweep{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
/* green pulse on purchase */
.shop-item.bought{animation:boughtPulse .45s ease-out}
@keyframes boughtPulse{
  0%{background:#fff}
  25%{background:#d6f7e8;transform:scale(1.015)}
  100%{background:#fff}
}

.si-icon{
  flex:0 0 48px;height:48px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(180deg,#fff1da,#ffdcae);
  border:2px solid var(--ink);border-radius:12px;
  transition:transform .25s cubic-bezier(.3,1.7,.5,1);
}
.shop-item:hover:not(.cant):not(.locked) .si-icon{transform:rotate(-7deg) scale(1.07)}
.si-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.si-top,.si-bot{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.si-name{font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-count{
  font-size:20px;font-weight:800;color:rgba(46,28,40,.22);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
  transition:transform .2s cubic-bezier(.3,1.7,.5,1), color .2s;
}
.si-count.has{color:rgba(46,28,40,.5)}
.si-count.bump{transform:scale(1.28);color:var(--mint-dark)}
.si-sub{font-size:11.5px;color:var(--ink-soft);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-cost{
  flex:0 0 auto;font-size:13px;font-weight:800;color:var(--gold-dark);
  background:rgba(255,194,60,.15);border-radius:999px;padding:2px 9px;
  font-variant-numeric:tabular-nums;
}
.si-cost.ok{color:var(--mint-dark);background:rgba(49,199,149,.16)}

/* ============================================================
   UPGRADE TILES
   ============================================================ */
/* Small icon tiles; names and effects stay in the tooltip. */
/* Clicker Upgrades — its own tray, same tile language as the main
   Upgrades list below it, so per-click / combo-cap purchases don't
   get buried under the building-tier upgrades. */
#click-upgrade-tray{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.click-upgrade-empty{margin-bottom:14px}
#click-upgrade-tray:not(.hidden) + .click-upgrade-empty{display:none}
.click-upgrade-heading span:first-child{color:#c23d68}
.brewer-upgrade-heading span:first-child{color:#a5701c}
#click-upgrade-ready{
  font-size:9px;letter-spacing:.2px;text-transform:none;color:var(--ink-soft);
  padding:4px 7px;border-radius:999px;background:rgba(46,28,40,.05);
}
#click-upgrade-ready.ready{color:#267658;background:#dff2e5}
#click-upgrade-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px;
  align-content:start;overflow-anchor:none;scrollbar-gutter:stable;
  padding:4px 3px 7px;margin:-4px -3px 0;max-height:176px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#f0c3d3 transparent;
}
#click-upgrade-list::-webkit-scrollbar{width:5px}
#click-upgrade-list::-webkit-scrollbar-thumb{background:#f0c3d3;border-radius:8px}

#upgrade-tray{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.upgrade-empty{margin-top:26px}
#upgrade-tray:not(.hidden) + .upgrade-empty{display:none}
.upgrade-heading{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;
}
#upgrade-ready{
  font-size:9px;letter-spacing:.2px;text-transform:none;color:var(--ink-soft);
  padding:4px 7px;border-radius:999px;background:rgba(46,28,40,.05);
}
#upgrade-ready.ready{color:#267658;background:#dff2e5}
#upgrade-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px;
  align-content:start;overflow-anchor:none;scrollbar-gutter:stable;
  padding:4px 3px 7px;margin:-4px -3px 0;max-height:218px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#d7c4b4 transparent;
}
#upgrade-list::-webkit-scrollbar{width:5px}
#upgrade-list::-webkit-scrollbar-thumb{background:#d7c4b4;border-radius:8px}
.upg{
  --u-accent:#d99a37;--u-wash:#fff0ce;
  touch-action:manipulation;position:relative;overflow:hidden;min-width:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;text-align:center;padding:6px 3px;aspect-ratio:1;
  border:1px solid #e4c18c;border-radius:12px;
  background:linear-gradient(145deg,#fffefa,#fff3df);
  box-shadow:0 3px 0 #dcc5a7,0 4px 10px rgba(60,30,30,.04);
  color:var(--ink);font-family:inherit;
  transition:transform .16s,box-shadow .16s,border-color .16s,background .16s;
}
.upg[data-kind="click"]{--u-accent:#dd638b;--u-wash:#ffe4ed}
.upg[data-kind="global"]{--u-accent:#8d72c8;--u-wash:#eee6ff}
.upg:focus-visible{outline:3px solid var(--star);outline-offset:2px}
.upg:hover:not(.buying):not(.cant){border-color:var(--u-accent);box-shadow:0 4px 0 #d3b895,0 6px 16px rgba(94,49,38,.1)}
.upg:active:not(.cant):not(.buying){transform:translateY(2px);box-shadow:0 1px 0 #dcc5a7}
.upg.cant{
  background:linear-gradient(145deg,#f1eeec,#e3dfdc);border-color:#c8c1bd;
  box-shadow:0 3px 0 #c4bdb8;filter:grayscale(1);opacity:.68;cursor:help;
}
.upg.cant .u-cost{color:#77716e}
.upg .u-icon{
  display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;
  font-size:26px;line-height:1;transition:transform .2s;
}
.upg:hover .u-icon{transform:rotate(-6deg) scale(1.06)}
.upg .u-cost{max-width:100%;font-size:10px;line-height:1.2;font-weight:900;color:#805017;font-variant-numeric:tabular-nums;white-space:nowrap}
.upg.cant .u-cost{color:#786270}
.upg.new:not(.buying){border-color:#d9b06d}
.upg.buying{pointer-events:none;animation:tileBuy .18s ease-out forwards}
@keyframes tileBuy{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(.96);opacity:0}
}

#owned-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.owned-chip{
  aspect-ratio:1;display:grid;place-items:center;font-size:19px;
  background:rgba(46,28,40,.06);border-radius:var(--r-sm);cursor:help;
  transition:transform .18s cubic-bezier(.3,1.7,.5,1), background .18s;
}
.owned-chip:hover{transform:scale(1.13);background:rgba(46,28,40,.12)}

/* ============================================================
   TOOLTIP
   ============================================================ */
#tooltip{
  position:absolute;z-index:200;max-width:min(290px, calc(var(--dw) - 24px));pointer-events:none;
  background:var(--ink);color:var(--cream);
  border-radius:var(--r);padding:12px 14px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  font-size:13px;line-height:1.5;font-weight:600;
  opacity:0;visibility:hidden;transform:translateY(7px) scale(.97);
  transition:opacity .13s ease, transform .13s cubic-bezier(.2,1.4,.5,1), visibility .13s;
}
#tooltip.show{opacity:1;visibility:visible;transform:none}
#tooltip h4{font-size:15.5px;margin-bottom:5px;color:var(--gold)}
#tooltip .tt-flavor{margin-top:9px;font-style:italic;opacity:.6;font-size:12px;line-height:1.45}
#tooltip .tt-stat{margin-top:6px;color:var(--mint);font-weight:800}
#tooltip .tt-cost{margin-top:6px;color:var(--gold)}
#tooltip .tt-locked{margin-top:6px;color:var(--pink);font-weight:800}
#tooltip b{color:#fff}

/* ============================================================
   AWARDS
   ============================================================ */
#award-progress{
  position:relative;height:24px;border-radius:999px;background:rgba(46,28,40,.11);
  overflow:hidden;margin-bottom:13px;border:2px solid var(--ink);
}
#award-bar{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--pink));
  transition:width .55s cubic-bezier(.2,.8,.3,1);position:relative;overflow:hidden;
}
#award-bar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  animation:sweep 2.6s ease-in-out infinite;
}
#award-count{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.75), 0 0 5px rgba(255,255,255,.6);
}
#award-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px}
.award{
  aspect-ratio:1;display:grid;place-items:center;font-size:24px;cursor:help;
  background:linear-gradient(180deg,#fff7e6,#ffdca6);
  border:2px solid var(--ink);border-radius:12px;box-shadow:var(--lift-1);
  transition:transform .18s cubic-bezier(.3,1.7,.5,1);
}
.award:hover{transform:translateY(-3px) scale(1.06)}
.award.lock{
  background:rgba(46,28,40,.06);border-color:var(--line);box-shadow:none;
  filter:grayscale(1);opacity:.38;
}
.award.justWon{animation:awardFlip .7s cubic-bezier(.2,1.3,.4,1)}
@keyframes awardFlip{
  0%{transform:rotateY(180deg) scale(.5);filter:brightness(2.4)}
  60%{transform:rotateY(0) scale(1.22);filter:brightness(1.5)}
  100%{transform:none;filter:none}
}

#stats-list{font-size:13.5px;font-weight:600}
.stat-row{
  display:flex;justify-content:space-between;gap:10px;padding:6px 2px;
  border-bottom:1px dashed var(--line);
}
.stat-row b{font-weight:800;font-variant-numeric:tabular-nums}

/* ============================================================
   PRESTIGE CARDS (rebrew + ascend)
   ============================================================ */
.prestige-card{
  text-align:center;padding:18px 16px 16px;
  background:#fff;border:2px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--lift-2);
}
.prestige-card.compact{padding:15px 14px 14px}
.prestige-icon{font-size:48px;line-height:1;margin-bottom:6px;animation:bobble 3.4s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(155,232,255,.6))}
.prestige-icon.star{color:var(--star);filter:drop-shadow(0 0 16px rgba(143,123,255,.8))}
.prestige-card h2{font-size:23px;margin-bottom:8px}
.prestige-card p{font-size:13.5px;color:var(--ink-soft);font-weight:600;line-height:1.55;margin-bottom:12px}
.prestige-stat{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 10px}
.prestige-stat > div{min-width:82px}
.prestige-stat span{display:block;font-size:29px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.prestige-stat .gain span{color:var(--mint-dark)}
.prestige-stat small{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:var(--ink-soft);font-weight:800}
.prestige-stat .plus{font-size:22px;font-weight:800;color:var(--ink-soft);min-width:auto}
.prestige-boost{font-size:13.5px !important;margin-bottom:10px !important}
.prestige-boost b{color:var(--pink-dark)}
.prestige-meter{
  height:9px;border-radius:999px;background:rgba(46,28,40,.1);
  overflow:hidden;margin:0 0 14px;border:1px solid var(--line);
}
.prestige-meter > div{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--pink));
  transition:width .5s cubic-bezier(.2,.8,.3,1);
}
#asc-meter{background:linear-gradient(90deg,var(--star),#b9a6ff)}
.keeps{
  margin-top:12px;font-size:11.5px !important;line-height:1.75 !important;
  color:var(--ink-soft);background:rgba(46,28,40,.05);border-radius:var(--r-sm);padding:9px;
}
.keeps b{color:var(--ink)}

.big-btn{
  width:100%;padding:14px;cursor:pointer;
  background:linear-gradient(180deg,var(--pink),var(--pink-dark));
  color:#fff;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--lift-3);
  font-family:inherit;font-size:17px;font-weight:800;letter-spacing:.4px;
  transition:transform .1s, box-shadow .1s, filter .2s;
}
.big-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.big-btn:active:not(:disabled){transform:translateY(5px);box-shadow:none}
.big-btn:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed;box-shadow:var(--lift-1)}
.big-btn:not(:disabled){animation:btnReady 2.4s ease-in-out infinite}
@keyframes btnReady{
  0%,100%{box-shadow:var(--lift-3), 0 0 0 rgba(255,93,143,0)}
  50%{box-shadow:var(--lift-3), 0 0 22px rgba(255,93,143,.55)}
}
.star-btn{background:linear-gradient(180deg,#a693ff,var(--star-dark))}

/* Rebrew gets a compact cup header and a single, readable action card. */
#device[data-view="rebrew"] #stage{
  --cup-w:90px;min-height:0;flex-direction:row;gap:16px;padding:12px 16px;
}
#device[data-view="rebrew"] #heat-wrap{flex:1;min-width:0;max-width:220px;width:auto}
#device.short[data-view="rebrew"] #stage{min-height:0}
#device[data-view="rebrew"] #stage-stats,
#device[data-view="rebrew"] #click-hint,
#device[data-view="rebrew"] #heat-callout{display:none}
#device[data-view="rebrew"] #buff-bar{top:0;width:auto;max-width:100%;z-index:8}
#tab-rebrew{
  height:auto;display:block;padding:0;
}
#tab-rebrew .rebrew-card{
  flex:0 0 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;
  gap:12px;padding:14px 12px 16px;border-radius:16px;
}
#tab-rebrew .rebrew-heading{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left}
#tab-rebrew .prestige-icon{font-size:30px;margin:0;animation:none}
#tab-rebrew h2{font-size:22px;line-height:1.1;margin:0 0 3px}
#tab-rebrew .rebrew-heading p{font-size:10px;line-height:1.3;margin:0}
#tab-rebrew .prestige-stat{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;margin:0}
#tab-rebrew .prestige-stat > div{min-width:0}
#tab-rebrew .prestige-stat span{font-size:26px;line-height:1.2;overflow-wrap:anywhere}
#tab-rebrew .prestige-stat small{font-size:9px;letter-spacing:.4px}
#tab-rebrew .prestige-boost{font-size:12px !important;line-height:1.4;margin:0 !important;overflow-wrap:anywhere}
#tab-rebrew .prestige-meter{height:6px;margin:0 0 7px}
#tab-rebrew #rebrew-hint{font-size:11px;line-height:1.35;margin:0}
#tab-rebrew .keeps{font-size:10px !important;line-height:1.5 !important;padding:8px;margin:0}
#tab-rebrew .big-btn{min-height:44px;padding:10px;font-size:16px;flex-shrink:0}
#device.short #tab-rebrew .rebrew-card{gap:8px;padding:10px 10px 12px}

/* ============================================================
   REBREW WORLD — a warm, drifting crystal-brew command deck.
   Mirrors the Ascend world's depth (ambient backdrop + status
   card) but themed to rising boba pearls instead of starlight.
   ============================================================ */
#rebrew-world{position:relative;min-height:100%;overflow:hidden;padding:12px 12px max(14px,env(safe-area-inset-bottom));background:
  radial-gradient(620px 300px at 50% -8%,rgba(255,151,196,.24),transparent 65%),
  radial-gradient(460px 380px at 100% 100%,rgba(143,123,255,.2),transparent 70%),
  linear-gradient(165deg,#1c0f29,#33193f 55%,#1a0e24)}
#rebrew-world::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:
  radial-gradient(circle at 14% 92%,#ffd9ec 0 1.6px,transparent 2.2px),
  radial-gradient(circle at 82% 96%,#ffe9c8 0 1.6px,transparent 2.2px),
  radial-gradient(circle at 48% 104%,#d9c8ff 0 1.6px,transparent 2.2px),
  radial-gradient(circle at 66% 86%,#fff 0 1.6px,transparent 2.2px),
  radial-gradient(circle at 30% 74%,#ffb9db 0 1.3px,transparent 1.9px);
  background-size:127px 161px,181px 199px,211px 179px,157px 193px,143px 171px;
  animation:rebrewDrift 15s linear infinite}
@keyframes rebrewDrift{to{background-position:-19px -240px,26px -280px,-33px -260px,21px -265px,-14px -250px}}
#rebrew-world::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.045) 52%,transparent 62%);mix-blend-mode:screen}
#tab-rebrew .rebrew-card{position:relative;z-index:1;margin:0}

/* Rebrew redesign: a compact, high-contrast crystal prestige panel. */
#tab-rebrew .rebrew-card{
  position:relative;overflow:hidden;gap:8px;padding:12px 12px 13px;
  color:var(--cream);background:
    radial-gradient(180px 150px at 12% 0%,rgba(143,123,255,.32),transparent 72%),
    radial-gradient(220px 180px at 100% 100%,rgba(255,93,143,.2),transparent 70%),
    linear-gradient(145deg,#21122f 0%,#3a1745 52%,#261233 100%);
  border:1px solid rgba(210,190,255,.32);border-radius:18px;
  box-shadow:0 8px 0 #160b20,0 16px 32px rgba(36,16,49,.28),inset 0 1px 0 rgba(255,255,255,.14);
}
#tab-rebrew .rebrew-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(135deg,transparent 0 24px,rgba(255,255,255,.025) 24px 25px);
}
#tab-rebrew .rebrew-hero,
#tab-rebrew .rebrew-reward,
#tab-rebrew .rebrew-power,
#tab-rebrew .rebrew-charge,
#tab-rebrew .rebrew-hint,
#tab-rebrew .keeps,
#tab-rebrew .rebrew-btn{position:relative;z-index:1}
#tab-rebrew .rebrew-hero{display:flex;align-items:center;gap:13px;text-align:left}
#tab-rebrew .rebrew-orbit{
  position:relative;flex:0 0 58px;width:58px;height:58px;display:grid;place-items:center;
  border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff7ff 0 5%,#b9a6ff 15%,#765ce7 42%,#33205c 72%);
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 26px rgba(143,123,255,.62),inset 0 -10px 18px rgba(18,8,36,.46);
}
#tab-rebrew .rebrew-orbit::before,
#tab-rebrew .rebrew-orbit::after{
  content:"";position:absolute;border:1px solid rgba(255,255,255,.42);border-radius:50%;transform:rotate(-25deg);
}
#tab-rebrew .rebrew-orbit::before{inset:-6px 6px;animation:rebrewOrbit 5s linear infinite}
#tab-rebrew .rebrew-orbit::after{inset:5px -7px;opacity:.45;transform:rotate(55deg);animation:rebrewOrbit 7s linear reverse infinite}
#tab-rebrew .rebrew-orbit .prestige-icon{font-size:31px;margin:0;animation:rebrewCrystal 2.8s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,255,255,.72))}
#tab-rebrew .orbit-pearl{position:absolute;inset:-11px;border-radius:50%;pointer-events:none}
#tab-rebrew .orbit-pearl::before{content:"";position:absolute;top:-1px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffd9ec 40%,#ff8fc0 100%);box-shadow:0 0 8px rgba(255,143,192,.9)}
#tab-rebrew .orbit-pearl.p1{animation:rebrewOrbit 3.2s linear infinite}
#tab-rebrew .orbit-pearl.p2{inset:-3px;animation:rebrewOrbit 4.6s linear infinite reverse}
#tab-rebrew .orbit-pearl.p2::before{width:4px;height:4px;margin-left:-2px;background:radial-gradient(circle at 35% 30%,#fff,#d9e8ff 40%,#8fb3ff 100%);box-shadow:0 0 6px rgba(143,180,255,.9)}
@keyframes rebrewCrystal{0%,100%{transform:translateY(2px) rotate(-6deg) scale(.94)}50%{transform:translateY(-4px) rotate(6deg) scale(1.04)}}
@keyframes rebrewOrbit{to{transform:rotate(335deg)}}
#tab-rebrew .rebrew-heading{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
#tab-rebrew .rebrew-kicker{font-size:9px;letter-spacing:2px;font-weight:900;color:#d7caff}
#tab-rebrew .rebrew-heading h2{font-size:20px;line-height:1.05;margin:0;color:var(--cream)}
#tab-rebrew .rebrew-heading p{font-size:11px;line-height:1.3;margin:0;color:rgba(255,247,236,.66)}
#tab-rebrew .rebrew-reward{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:8px}
#tab-rebrew .rebrew-reward-box{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:6px 5px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(10,4,18,.25)}
#tab-rebrew .rebrew-reward-box.next{background:linear-gradient(145deg,rgba(255,93,143,.22),rgba(143,123,255,.2));border-color:rgba(255,176,213,.38)}
#tab-rebrew .rebrew-reward-box small{font-size:8px;letter-spacing:1.2px;font-weight:900;color:rgba(255,247,236,.6);white-space:nowrap}
#tab-rebrew .rebrew-reward-box strong{font-size:24px;line-height:1.1;color:var(--cream);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#tab-rebrew .rebrew-reward-box.next strong{color:#ffd1e4;text-shadow:0 0 12px rgba(255,93,143,.5)}
#tab-rebrew .rebrew-reward-box span{font-size:9px;font-weight:800;color:rgba(255,247,236,.55)}
#tab-rebrew .rebrew-arrow{display:grid;place-items:center;padding:0 1px;font-size:23px;color:#d7caff}
#tab-rebrew .rebrew-power,
#tab-rebrew .rebrew-charge{padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(10,4,18,.24)}
#tab-rebrew .rebrew-power-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
#tab-rebrew .rebrew-power-row > span{font-size:9px;letter-spacing:1.1px;font-weight:900;color:rgba(255,247,236,.62)}
#tab-rebrew .rebrew-power-row b{display:flex;align-items:center;gap:5px;white-space:nowrap}
#tab-rebrew .rebrew-power-row strong{font-size:16px;color:#aef3d6;font-variant-numeric:tabular-nums}
#tab-rebrew .rebrew-power-row strong:last-child{color:#ffd1e4}
#tab-rebrew .rebrew-power-row i{font-style:normal;color:rgba(255,247,236,.5);font-size:12px}
#tab-rebrew .rebrew-meter-head{display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:1px;font-weight:900;color:rgba(255,247,236,.6);margin-bottom:6px}
#tab-rebrew .rebrew-meter-head b{color:#ffd27b;font-size:8px}
#tab-rebrew .rebrew-meter{margin:0}
#tab-rebrew .rebrew-meter .prestige-meter{height:7px;margin:0;background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.12)}
#tab-rebrew .rebrew-meter .prestige-meter > div{background:linear-gradient(90deg,#a693ff,#ff75ad,#ffd07b);box-shadow:0 0 12px rgba(255,117,173,.7)}
#tab-rebrew .rebrew-charge .rebrew-hint{margin-top:6px}
#tab-rebrew .rebrew-hint{font-size:10px;line-height:1.25;margin:0;color:rgba(255,247,236,.68)}
#tab-rebrew .keeps{font-size:9px !important;line-height:1.35 !important;padding:6px 8px;margin:0;color:rgba(255,247,236,.6);background:rgba(10,4,18,.25);border:1px solid rgba(255,255,255,.1)}
#tab-rebrew .keeps b{color:#ffd27b;letter-spacing:1px}
#tab-rebrew .rebrew-btn{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:46px;padding:7px 12px;border-color:#170a22;background:linear-gradient(135deg,#ff6d9d,#b956db 52%,#795fe9);box-shadow:0 4px 0 #170a22,0 0 24px rgba(255,93,143,.25)}
#tab-rebrew .rebrew-btn::after{content:"";position:absolute;top:0;bottom:0;width:44%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-160%)}
#tab-rebrew .rebrew-btn:not(:disabled)::after{animation:sweep 2.8s ease-in-out infinite}
#tab-rebrew .rebrew-btn span{font-size:16px;line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:1px}
#tab-rebrew .rebrew-btn small{font-size:9px;line-height:1.2;font-weight:800;opacity:.78;letter-spacing:.4px}
#tab-rebrew .rebrew-btn:not(:disabled){animation:rebrewReady 2.5s ease-in-out infinite}
#tab-rebrew .rebrew-btn:disabled{background:linear-gradient(135deg,#61566b,#51465e);border-color:#281d32;box-shadow:0 4px 0 #21162a;color:rgba(255,247,236,.58)}
@keyframes rebrewReady{0%,100%{filter:saturate(1);box-shadow:0 4px 0 #170a22,0 0 10px rgba(255,93,143,.16)}50%{filter:saturate(1.2);box-shadow:0 4px 0 #170a22,0 0 28px rgba(255,93,143,.52)}}
#device.short #tab-rebrew .rebrew-card{gap:8px;padding:11px 10px 12px}
#device.short #tab-rebrew .rebrew-orbit{flex-basis:56px;width:56px;height:56px}
#device.short #tab-rebrew .rebrew-orbit .prestige-icon{font-size:30px}
#device.short #tab-rebrew .rebrew-heading h2{font-size:20px}

/* Rebrew uses the same stage geometry as every other tab. */
#device[data-view="rebrew"] #stage{
  --cup-w:min(calc(var(--dh) * .27),calc(var(--dw) * .5),210px);
  min-height:46%;flex-direction:column;gap:10px;padding:16px 10px 12px;
}
#device[data-view="rebrew"] #heat-wrap{
  flex:none;min-width:0;max-width:none;width:calc(100% - 24px);
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
}
#device.short[data-view="rebrew"] #stage{min-height:40%}
#device[data-view="rebrew"] #buff-bar{top:12px;width:92%;max-width:none}
@media (max-height:480px){
  #device[data-view="rebrew"] #stage{display:none}
}
.star-btn:not(:disabled){animation:starReady 2.4s ease-in-out infinite}
@keyframes starReady{
  0%,100%{box-shadow:var(--lift-3), 0 0 0 rgba(143,123,255,0)}
  50%{box-shadow:var(--lift-3), 0 0 24px rgba(143,123,255,.7)}
}

/* ============================================================
   THE CONSTELLATION TREE
   ============================================================ */
/* ============================================================
   THE CONSTELLATION
   ============================================================ */
#tree-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.br-chip{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 3px 6px;cursor:pointer;font-family:inherit;
  background:#fff;border:2px solid var(--ink);border-radius:12px;
  box-shadow:var(--lift-1);color:var(--ink);
  transition:transform .12s, box-shadow .12s, background .2s;
}
.br-chip i{font-size:17px;line-height:1;font-style:normal}
.br-chip b{font-size:10.5px;font-weight:800;letter-spacing:.2px}
.br-count{font-size:10px;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.br-chip:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.br-chip.on{transform:translateY(2px);box-shadow:none}
.br-chip.b-harvest.on{background:linear-gradient(180deg,#9deccd,var(--mint))}
.br-chip.b-touch.on  {background:linear-gradient(180deg,#ffc0d4,var(--pink))}
.br-chip.b-fortune.on{background:linear-gradient(180deg,#ffe6ab,var(--gold))}
.br-chip.b-depths.on {background:linear-gradient(180deg,#b6f0f6,var(--aqua))}
.br-chip.on .br-count{color:var(--ink)}
.br-chip.full .br-count{color:var(--mint-dark)}

#tree-view{
  position:relative;overflow:hidden;touch-action:none;cursor:grab;
  height:min(58vh, 460px);
  border-radius:var(--r-lg);border:2px solid var(--ink);
  background:
    radial-gradient(700px 460px at 50% 4%, rgba(143,123,255,.26), transparent 62%),
    radial-gradient(520px 380px at 12% 88%, rgba(49,199,149,.13), transparent 60%),
    radial-gradient(520px 380px at 88% 88%, rgba(255,194,60,.12), transparent 60%),
    linear-gradient(170deg,#2b1638,#150a1e);
  box-shadow:inset 0 3px 18px rgba(0,0,0,.55);
}
#tree-view.grabbing{cursor:grabbing}
#tree-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#tree-pan{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;z-index:1}
#tree{position:relative}
#tree-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* ---- connectors ---- */
.tree-line{
  stroke:rgba(255,255,255,.12);stroke-width:2.5;stroke-linecap:round;fill:none;
  transition:stroke .5s ease, opacity .3s ease;
}
.tree-line.live{stroke:rgba(255,255,255,.34)}
.tree-line.planned{stroke:var(--gold);stroke-width:3.5;stroke-dasharray:7 7;animation:planCrawl 1s linear infinite}
@keyframes planCrawl{to{stroke-dashoffset:-14}}
.tree-line.done{
  stroke-width:4;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:drawLine .7s ease-out forwards;
}
.tree-line.done.b-root   {stroke:var(--star); filter:drop-shadow(0 0 6px rgba(143,123,255,.9))}
.tree-line.done.b-harvest{stroke:var(--mint); filter:drop-shadow(0 0 6px rgba(49,199,149,.85))}
.tree-line.done.b-touch  {stroke:var(--pink); filter:drop-shadow(0 0 6px rgba(255,93,143,.85))}
.tree-line.done.b-fortune{stroke:var(--gold); filter:drop-shadow(0 0 6px rgba(255,194,60,.85))}
.tree-line.done.b-depths {stroke:var(--aqua); filter:drop-shadow(0 0 6px rgba(57,214,224,.85))}
.tree-line.dim{opacity:.14;filter:none}
@keyframes drawLine{to{stroke-dashoffset:0}}

/* ---- nodes ---- */
.node{
  position:absolute;padding:0;cursor:pointer;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.2);border-radius:50%;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.4);font-family:inherit;
  display:grid;place-items:center;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1), background .25s, border-color .25s,
             box-shadow .25s, color .25s, filter .25s, opacity .25s;
}
/* keystones are the branch's landmarks, so they are squarer and bigger */
.node.s-key{border-radius:24px;border-width:3px}
.node.s-minor{border-radius:50%}
.n-glyph{font-size:22px;line-height:1;font-style:normal;filter:saturate(.35) opacity(.65);transition:filter .3s}
.node.s-key   .n-glyph{font-size:32px}
.node.s-minor .n-glyph{font-size:18px}
.node.own .n-glyph,.node.can .n-glyph{filter:none}
.node.avail .n-glyph{filter:saturate(.7) opacity(.9)}
.n-cost{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--cream);border:1.5px solid rgba(255,255,255,.25);
  border-radius:999px;padding:0 6px;font-size:10px;font-weight:800;line-height:15px;
  font-variant-numeric:tabular-nums;
}
/* the fork mark says "this closes something else off" before you commit */
.n-fork{
  position:absolute;top:-7px;right:-7px;width:17px;height:17px;line-height:15px;
  background:var(--gold);color:#3d2400;border:1.5px solid var(--ink);border-radius:50%;
  font-size:11px;font-weight:800;
}
.node.own .n-fork,.node.shut .n-fork{display:none}

/* each branch keeps its colour even before it is bought, so the map reads
   as four territories rather than one grey mass */
.node.b-root   {--bc:var(--star); --bg:143,123,255}
.node.b-harvest{--bc:var(--mint); --bg:49,199,149}
.node.b-touch  {--bc:var(--pink); --bg:255,93,143}
.node.b-fortune{--bc:var(--gold); --bg:255,194,60}
.node.b-depths {--bc:var(--aqua); --bg:57,214,224}

.node.locked{border-color:rgba(var(--bg),.22);background:rgba(var(--bg),.05);cursor:not-allowed}
.node.locked .n-cost{opacity:.5}
.node.shut{
  border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  filter:grayscale(1);opacity:.4;cursor:not-allowed;
}
.node.avail{border-color:rgba(var(--bg),.6);color:#fff;background:rgba(var(--bg),.16)}
.node.can{
  border-color:var(--bc);color:#fff;background:rgba(var(--bg),.34);
  animation:nodeReady 1.9s ease-in-out infinite;
}
@keyframes nodeReady{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--bg),.55), 0 0 14px rgba(var(--bg),.5)}
  50%    {box-shadow:0 0 0 10px rgba(var(--bg),0), 0 0 24px rgba(var(--bg),.9)}
}
.node.can:hover,.node.avail:hover{transform:translate(-50%,-50%) scale(1.14)}
.node.can:active{transform:translate(-50%,-50%) scale(.94)}
.node.own{
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), var(--bc) 62%);
  border-color:#fff;color:#fff;
  box-shadow:0 0 20px rgba(var(--bg),.8), inset 0 -3px 0 rgba(0,0,0,.22);
  cursor:default;
}
.node.own .n-cost{background:var(--bc);color:#241031;border-color:#fff}
/* the route you are planning */
.node.planned{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,194,60,.35)}
.node.goal{animation:goalPulse 1.3s ease-in-out infinite}
@keyframes goalPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(255,194,60,.4), 0 0 16px rgba(255,194,60,.5)}
  50%    {box-shadow:0 0 0 9px rgba(255,194,60,0), 0 0 28px rgba(255,194,60,.95)}
}
.node.dim{opacity:.22;filter:grayscale(.7)}
.node.justBought{animation:nodeBuy .75s cubic-bezier(.2,1.5,.4,1)}
@keyframes nodeBuy{
  0%{transform:translate(-50%,-50%) scale(1)}
  30%{transform:translate(-50%,-50%) scale(1.6);filter:brightness(2.2)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
.node.ping{animation:nodePing 1.1s ease-out 2}
@keyframes nodePing{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}
  100%{box-shadow:0 0 0 26px rgba(255,255,255,0)}
}
.node:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* ---- overlaid controls ---- */
#tree-tools{position:absolute;right:9px;bottom:9px;z-index:3;display:flex;flex-direction:column;gap:5px}
.tool{
  width:34px;height:34px;cursor:pointer;font-family:inherit;font-size:17px;font-weight:800;
  background:rgba(20,8,28,.72);color:var(--cream);
  border:2px solid rgba(255,255,255,.28);border-radius:11px;
  display:grid;place-items:center;line-height:1;
  backdrop-filter:blur(3px);
}
.tool:hover{background:rgba(60,30,80,.85);border-color:#fff}
.tool:active{transform:translateY(2px)}

.tree-cta{
  position:absolute;left:9px;bottom:9px;z-index:3;max-width:calc(100% - 96px);
  display:flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  padding:7px 13px;border-radius:999px;
  background:linear-gradient(180deg,#b9a6ff,var(--star-dark));color:#fff;
  border:2px solid var(--ink);box-shadow:var(--lift-1);
  font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:ctaBob 2.4s ease-in-out infinite;
}
.tree-cta i{font-size:15px;font-style:normal}
.tree-cta b{color:var(--gold)}
.tree-cta:active{transform:translateY(2px);box-shadow:none}
@keyframes ctaBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

#tree-plan{
  position:absolute;left:9px;right:9px;top:9px;z-index:3;
  display:flex;flex-direction:column;gap:1px;pointer-events:none;
  padding:8px 12px;border-radius:var(--r);
  background:rgba(20,8,28,.82);border:2px solid var(--gold);
  color:var(--cream);backdrop-filter:blur(4px);
  animation:planIn .25s cubic-bezier(.2,1.5,.5,1);
}
#tree-plan b{font-size:13px;font-weight:800}
#tree-plan span{font-size:11.5px;font-weight:700;color:rgba(255,247,236,.72)}
#tree-plan span b{color:var(--gold);font-size:11.5px}
@keyframes planIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}

#tree-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
#tree-foot .hint{flex:1 1 auto;margin:0}
.mini-btn{
  flex:0 0 auto;cursor:pointer;font-family:inherit;
  padding:7px 14px;border-radius:999px;
  background:#fff;border:2px solid var(--ink);box-shadow:var(--lift-1);
  font-size:12px;font-weight:800;color:var(--ink);
  transition:transform .1s, box-shadow .1s, opacity .2s;
}
.mini-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--lift-2)}
.mini-btn:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.mini-btn:disabled{opacity:.45;cursor:not-allowed}

.tt-excl{
  margin-top:6px;font-size:11.5px;font-weight:800;color:var(--gold-dark);
  background:rgba(255,194,60,.16);border-radius:8px;padding:4px 8px;
}

/* ============================================================
   FLOATING NUMBERS / GOLDEN / TOASTS
   ============================================================ */
#float-layer{position:absolute;inset:0;pointer-events:none;z-index:60}
.float-num{
  position:absolute;font-size:21px;font-weight:800;color:var(--cream);
  text-shadow:0 2px 6px rgba(0,0,0,.75);
  animation:floatUp 1.1s cubic-bezier(.2,.7,.4,1) forwards;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.float-num.crit{font-size:30px;color:#fff7bf;text-shadow:0 2px 0 #7a2c18,0 0 10px #ffcf58,0 0 24px #ff6b37;animation:critNumber .72s cubic-bezier(.12,.9,.25,1) forwards;z-index:3}
.float-num.star{color:#c9bcff;font-size:26px}
.float-num.heated{font-size:25px;color:#ffe3a2;text-shadow:0 2px 0 #713121,0 0 15px rgba(255,114,45,.75)}
.float-num.inferno{font-size:29px;color:#fff3cc;text-shadow:0 2px 0 #9f322b,0 0 20px #ff6547}
@keyframes floatUp{
  0%{transform:translate(-50%,0) scale(.55);opacity:0}
  16%{transform:translate(-50%,-14px) scale(1.14);opacity:1}
  100%{transform:translate(-50%,-100px) scale(.9);opacity:0}
}

#golden-layer{position:absolute;inset:0;pointer-events:none;z-index:70}
.golden{
  position:absolute;width:76px;height:76px;pointer-events:auto;cursor:pointer;
  border:none;background:none;padding:0;
  animation:goldSpin 2.6s ease-in-out infinite, goldIn .45s cubic-bezier(.2,1.7,.5,1);
  filter:drop-shadow(0 0 20px rgba(255,194,60,.95));
}
.golden::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff6c8, var(--gold) 42%, #b57300 100%);
  box-shadow:inset -6px -8px 14px rgba(0,0,0,.35);
}
.golden::after{
  content:"";position:absolute;top:14%;left:20%;width:24%;height:18%;
  border-radius:50%;background:rgba(255,255,255,.9);filter:blur(1px);
}
@keyframes goldSpin{0%,100%{transform:scale(1) rotate(-7deg)}50%{transform:scale(1.14) rotate(7deg)}}
/* never starts at scale(0): a zero-size hit box would be unclickable on arrival */
@keyframes goldIn{from{transform:scale(.4) rotate(-70deg);opacity:0}to{opacity:1}}

#toast-layer{
  position:absolute;z-index:90;
  left:50%;top:calc(env(safe-area-inset-top) + 62px);transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:calc(100% - 20px);
}
.toast{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:var(--r);
  background:var(--ink);color:var(--cream);
  border:2px solid rgba(255,255,255,.15);
  box-shadow:var(--soft);
  font-size:14px;font-weight:700;
  animation:toastIn .36s cubic-bezier(.2,1.6,.5,1), toastOut .4s 3.3s forwards;
}
.toast .t-icon{font-size:23px}
.toast b{color:var(--gold)}
.toast.gold{background:linear-gradient(180deg,var(--gold),var(--gold-dark));color:#3d2400;border-color:rgba(0,0,0,.2)}
.toast.gold b{color:#5c3600}
.toast.star{background:linear-gradient(180deg,#a693ff,var(--star-dark));color:#fff;border-color:rgba(255,255,255,.3)}
.toast.star b{color:#fff}
@keyframes toastIn{from{transform:translateY(26px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(-8px);opacity:0}}

/* ============================================================
   MODALS
   ============================================================ */
/* #daily was missing from this rule, so it rendered as a block in the
   layout flow instead of a centred overlay. */
#modal,#offline,#daily,#boon{
  position:absolute;inset:0;z-index:240;display:grid;place-items:center;padding:16px;
  background:rgba(12,4,16,.78);backdrop-filter:blur(6px);
  animation:fadeIn .2s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  position:relative;width:min(100%,430px);max-height:88%;overflow-y:auto;
  background:var(--cream);border:3px solid var(--ink);border-radius:22px;
  box-shadow:0 16px 0 rgba(0,0,0,.32);padding:24px;
  animation:cardIn .34s cubic-bezier(.2,1.4,.5,1);
}
.modal-card.small{text-align:center;width:min(100%,380px)}
@keyframes cardIn{from{transform:scale(.86) translateY(22px);opacity:0}to{transform:none;opacity:1}}
.modal-card h2{font-size:25px;margin-bottom:14px}
.modal-card h3{font-size:16px;margin:18px 0 8px}
.modal-x{position:absolute;top:14px;right:14px;background:rgba(46,28,40,.08);color:var(--ink)}
.modal-x:hover{background:rgba(46,28,40,.16)}
.modal-row{display:flex;gap:9px;margin-bottom:9px}
.menu-btn{
  flex:1;padding:12px 8px;cursor:pointer;
  background:#fff;border:2px solid var(--ink);border-radius:12px;
  box-shadow:var(--lift-2);
  font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);
  transition:transform .1s, box-shadow .1s;
}
.menu-btn:hover{transform:translateY(-2px);box-shadow:var(--lift-3)}
.menu-btn:active{transform:translateY(4px);box-shadow:none}
.menu-btn.danger{background:#ffe0e6;color:var(--pink-dark)}
#save-box{
  width:100%;height:110px;margin:8px 0;padding:10px;resize:none;
  border:2px solid var(--ink);border-radius:12px;background:#fff;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--ink);
}
.howto{list-style:none;font-size:13.5px;line-height:1.85;font-weight:600;color:var(--ink-soft)}
.howto b{color:var(--ink)}
.version{margin-top:14px;font-size:11.5px;color:var(--ink-soft);text-align:center;font-weight:700}

.offline-icon{font-size:54px;margin-bottom:6px;animation:bobble 3.4s ease-in-out infinite}
.offline-amount{
  font-size:37px;font-weight:800;color:var(--mint-dark);margin:14px 0;
  text-shadow:0 3px 0 rgba(0,0,0,.1);
  animation:countIn .6s cubic-bezier(.2,1.5,.4,1);
}
@keyframes countIn{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
#offline p{font-size:14px;font-weight:600;color:var(--ink-soft);line-height:1.5}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Only two variations now, both keyed off the device box rather than the
   window, so a phone frame on a desktop behaves like the phone it is. */
.logo-text{display:none}
#topbar{padding:8px 12px;gap:10px;padding-top:max(8px, env(safe-area-inset-top))}
#pearl-count{font-size:31px}
#cps-line{font-size:12.5px}
#pearl-label{font-size:9.5px}
#stage-stats .chip{padding:5px 11px;min-width:74px}
.chip b{font-size:14px}
.chip span{font-size:8.5px}
#click-hint{font-size:13px;bottom:-18px}
.toast{font-size:13px;padding:9px 14px}
.toast .t-icon{font-size:20px}
#heat-wrap{width:min(220px,72%)}
.streak-next{display:none}

#device.narrow .tab em{display:block}
#device.narrow .tab i{font-size:19px}
#device.narrow .tab{padding:7px 2px}
#device.short .tab{padding:3px 2px;gap:2px}

#device.short #stage{min-height:40%}
#device.short #stage-stats{display:none}
#device.short #click-hint{bottom:6%}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important;
    transition-duration:.001s !important}
}

/* ============================================================
   RETENTION UI — heat combo, daily goals, streak, eternal sink
   ============================================================ */

/* ---- heat: the active-play combo meter ---- */
#stage{--heat:0}
#stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,109,38,.25),rgba(255,49,75,.09) 45%,transparent 72%);
  opacity:var(--heat);transition:opacity .15s;
}
#heat-wrap{
  --heat-color:#d8abc1;
  position:relative;z-index:5;width:min(300px,100%);padding:6px 11px 5px;
  border:1px solid rgba(255,227,196,.18);border-radius:15px;
  background:linear-gradient(125deg,rgba(32,12,33,.92),rgba(52,19,46,.92));
  box-shadow:0 3px 0 rgba(12,4,17,.28),inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .2s,box-shadow .2s;
  pointer-events:none;
}
@keyframes critNumber{
  0%{transform:translate(-50%,12px) scale(.25) rotate(-12deg);opacity:0;filter:blur(5px)}
  18%{transform:translate(-50%,-18px) scale(1.45) rotate(5deg);opacity:1;filter:blur(0)}
  42%{transform:translate(-50%,-30px) scale(.94) rotate(-2deg);opacity:1}
  100%{transform:translate(-50%,-110px) scale(1.08) rotate(8deg);opacity:0;filter:blur(1px)}
}

/* Critical clicks use a punchy impact frame instead of the normal ripple. */
.crit-impact{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;z-index:7;pointer-events:none;animation:critImpact .7s cubic-bezier(.1,.85,.25,1) forwards}
.crit-impact::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:#fff9cc;box-shadow:0 0 16px 7px #ffb548,0 0 42px 14px #ff5e46;animation:critFlash .24s steps(2,end) forwards}
.crit-impact::after{content:"";position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px;border:3px solid #ffe08b;border-radius:50%;box-shadow:0 0 0 8px rgba(255,105,53,.25),0 0 30px rgba(255,205,84,.75);animation:critRing .62s cubic-bezier(.1,.8,.2,1) forwards}
.crit-impact span{position:absolute;left:50%;top:50%;z-index:2;white-space:nowrap;color:#fff8d0;font-size:11px;font-weight:950;letter-spacing:2px;text-shadow:0 2px 0 #7e2919,0 0 12px #ff9a42;transform:translate(-50%,-50%);animation:critStamp .56s cubic-bezier(.15,1.4,.35,1) forwards}
.crit-impact i,.crit-impact b{position:absolute;left:50%;top:50%;width:4px;height:70px;background:linear-gradient(#fffbd5,#ff7a3d 55%,transparent);transform-origin:50% 0;filter:drop-shadow(0 0 5px #ffc05c);animation:critShard .6s ease-out forwards}
.crit-impact i{transform:rotate(38deg) scaleY(.1)}
.crit-impact b{transform:rotate(-142deg) scaleY(.1)}
@keyframes critImpact{0%{opacity:0;transform:scale(.2)}12%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.2)}}
@keyframes critFlash{0%,35%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(2.8)}}
@keyframes critRing{0%{opacity:0;transform:scale(.12) rotate(-20deg)}18%{opacity:1}100%{opacity:0;transform:scale(1.45) rotate(24deg)}}
@keyframes critStamp{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-15deg)}24%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(5deg)}100%{opacity:0;transform:translate(-50%,-105px) scale(.8) rotate(12deg)}}
@keyframes critShard{0%{opacity:0;transform:rotate(38deg) scaleY(.1)}18%{opacity:1}100%{opacity:0;transform:rotate(38deg) translateY(-70px) scaleY(1)}}
@media (prefers-reduced-motion:reduce){.crit-impact,.crit-impact::before,.crit-impact::after,.crit-impact span,.crit-impact i,.crit-impact b,.float-num.crit{animation:none!important}}
#device:not([data-view="rebrew"]) #heat-wrap{
  position:absolute;left:50%;bottom:10px;width:calc(100% - 24px);max-width:none;
  transform:translateX(-50%);
}
.heat-main{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.heat-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.heat-eyebrow{font-size:8px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:#cfb3c8}
#heat-status{font-size:13px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:var(--heat-color)}
#heat-label{
  font-size:31px;line-height:1;font-weight:900;letter-spacing:-1.2px;color:var(--heat-color);
  font-variant-numeric:tabular-nums;transform-origin:75% 65%;
  text-shadow:0 2px 0 rgba(0,0,0,.25);white-space:nowrap;
}
#heat-bar{
  position:relative;height:6px;border-radius:999px;
  background:#160b20;border:1px solid rgba(255,255,255,.12);overflow:hidden;
}
#heat-bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 2px),#301526 calc(25% - 2px),#301526 25%);
}
#heat-fill{
  height:100%;width:100%;border-radius:999px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#ffdc75,#ffa13e 40%,#ff6546 72%,#ff477a);
  box-shadow:0 0 12px rgba(255,132,48,.6);transition:transform .08s linear;
}
.heat-footer{display:flex;justify-content:space-between;gap:8px;margin-top:3px;font-size:9px;line-height:1.1;color:#c5a9bc}
#heat-caption{display:none}
#heat-streak{color:#efd6c4;font-variant-numeric:tabular-nums;white-space:nowrap;text-transform:uppercase;letter-spacing:.5px}
#heat-wrap[data-tier="1"]{--heat-color:#ffd785;border-color:rgba(255,198,95,.35)}
#heat-wrap[data-tier="2"]{--heat-color:#ffbe69;border-color:rgba(255,151,56,.6);box-shadow:0 3px 0 #36121c,0 0 22px rgba(255,133,45,.12)}
#heat-wrap[data-tier="3"]{--heat-color:#ffad78;border-color:#ff8a52;box-shadow:0 3px 0 #36121c,0 0 28px rgba(255,107,57,.22)}
#heat-wrap[data-tier="4"]{
  --heat-color:#fff0b8;border-color:#ffd28a;
  background:linear-gradient(120deg,#56251e,#45172d);
  box-shadow:0 3px 0 #36121c,0 0 24px rgba(255,104,57,.32),inset 0 0 18px rgba(255,172,62,.1);
}
#heat-wrap[data-tier="4"] #heat-label{text-shadow:0 2px 0 #7d3629,0 0 18px rgba(255,180,64,.65)}
#heat-callout{
  position:absolute;left:50%;top:4%;z-index:6;pointer-events:none;
  transform:translateX(-50%);opacity:0;white-space:nowrap;
  font-size:24px;font-weight:950;font-style:italic;letter-spacing:1px;color:#fff1b6;
  text-shadow:0 3px 0 #b1442c,0 0 24px #ff853d;
}
/* Reserve the combo's space; tapping never pushes the store away. */
#stage-stats{display:none}
#stage-stats .chip{min-width:0;flex:1;padding:6px 3px}
#stage-stats .chip b{font-size:15px}
#stage-stats .chip span{font-size:8px;letter-spacing:.4px}
#device.short #heat-wrap{padding:6px 11px}
#device.short .heat-footer{display:none}
#device.short #heat-label{font-size:25px}
#device.no-motion #heat-fx{visibility:hidden}
@media (prefers-reduced-motion:reduce){#heat-fx{visibility:hidden}}

#bank-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:65}
#bank-label{
  position:absolute;left:50%;transform:translate(-50%,-50%);z-index:66;
  color:#fff0b8;font-size:28px;font-weight:900;line-height:1;
  text-shadow:0 3px 0 #66283b,0 0 5px #481329,0 0 calc(22px + var(--bank-charge,0) * 22px) #ff9c45;
  white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;
}
#pearl-count.cash-in{animation:pearlCashIn .7s cubic-bezier(.2,.9,.3,1)}
@keyframes pearlCashIn{
  0%{transform:scale(.88,1.08);color:#fff7ec}
  20%{transform:scale(1.38,1.2);color:#fff9d2;text-shadow:0 0 28px #ffb442}
  45%{transform:scale(.96,1.04);color:#ffe7a0;text-shadow:0 0 14px #ffb442}
  65%{transform:scale(1.08);color:#fff0b8}
  100%{transform:scale(1);color:#fff7ec}
}
#device.bank-impact{animation:bankImpact .32s ease-out}
@keyframes bankImpact{
  0%{transform:translateY(0)}
  18%{transform:translateY(var(--bank-impact,3px))}
  40%{transform:translateY(calc(var(--bank-impact,3px) * -.65))}
  65%{transform:translateY(calc(var(--bank-impact,3px) * .3))}
  100%{transform:translateY(0)}
}
#device.no-motion.bank-impact{animation:none}

/* ---- daily goals ---- */
.section-title.first{margin-top:2px;border-top:none;padding-top:0}
#daily-panel{margin-bottom:4px}
.quest{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;margin-bottom:7px;
  background:#fff;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--lift-1);font-family:inherit;color:var(--ink);
}
.quest.ready{
  cursor:pointer;box-shadow:var(--lift-2);
  background:linear-gradient(180deg,#fff8e2,#ffe9b8);
  animation:btnReady 1.8s ease-in-out infinite;
}
.quest.ready:active{transform:translateY(3px);box-shadow:none}
.quest.claimed{opacity:.5;box-shadow:none}
.q-icon{font-size:22px;flex:0 0 auto}
.q-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.q-text{font-size:13.5px;font-weight:800;line-height:1.2}
.q-meter{height:6px;border-radius:999px;background:rgba(46,28,40,.12);overflow:hidden}
.q-meter > i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--mint),var(--mint-dark));
  transition:width .35s cubic-bezier(.2,.8,.3,1);
}
.quest.ready .q-meter > i{background:linear-gradient(90deg,var(--gold),var(--pink))}
.q-count{
  flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

#streak-strip{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:var(--r);
  background:linear-gradient(180deg,#3a2030,#2b1724);color:var(--cream);
  font-size:13px;font-weight:700;
}
#streak-strip b{color:var(--gold);font-size:16px}
.streak-flame{font-size:20px;animation:bobble 2.6s ease-in-out infinite}
.streak-next{margin-left:auto;font-size:11.5px;opacity:.7;text-align:right}

/* ---- daily reward modal ---- */
.daily-flame{font-size:54px;margin-bottom:4px;animation:bobble 2.4s ease-in-out infinite}
#daily-track{display:flex;gap:5px;justify-content:center;margin:14px 0 4px}
.day-cell{
  flex:1;max-width:44px;padding:7px 2px;border-radius:10px;
  background:rgba(46,28,40,.07);border:2px solid transparent;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.day-cell span{font-size:17px;filter:grayscale(1);opacity:.45}
.day-cell small{font-size:9.5px;font-weight:800;color:var(--ink-soft)}
.day-cell.past span{filter:none;opacity:1}
.day-cell.past{background:rgba(49,199,149,.18)}
.day-cell.now{
  background:linear-gradient(180deg,var(--gold),var(--gold-dark));
  border-color:var(--ink);transform:scale(1.12);
}
.day-cell.now span{filter:none;opacity:1}
.day-cell.now small{color:#4a2b00}

/* ---- eternal upgrades ---- */
#eternal-list{display:flex;flex-direction:column;gap:8px}
.eternal{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:9px 11px;font-family:inherit;color:var(--ink);
  background:linear-gradient(180deg,#f3edff,#e2d7ff);
  border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--lift-2);
  transition:transform .1s, box-shadow .1s, filter .2s, opacity .2s;
}
.eternal:hover:not(.cant){transform:translateY(-2px);box-shadow:var(--lift-3)}
.eternal:active:not(.cant){transform:translateY(4px);box-shadow:none}
.eternal.cant{filter:grayscale(.7);opacity:.55;cursor:not-allowed}
.e-icon{
  flex:0 0 44px;height:44px;display:grid;place-items:center;font-size:23px;
  background:linear-gradient(180deg,#c9bcff,var(--star));
  border:2px solid var(--ink);border-radius:12px;
}
.e-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.e-name{font-size:14.5px;font-weight:800;display:flex;align-items:center;gap:7px}
.e-lvl{
  font-size:11px;background:var(--star-dark);color:#fff;
  border-radius:999px;padding:1px 8px;font-weight:800;
}
.e-desc{font-size:11.5px;color:var(--ink-soft);font-weight:600}
.e-cost{
  flex:0 0 auto;font-size:14px;font-weight:800;color:var(--star-dark);
  background:rgba(143,123,255,.18);border-radius:999px;padding:3px 10px;
  font-variant-numeric:tabular-nums;
}


#daily-tomorrow{margin-top:16px}
#daily-extra:empty{display:none}

/* ============================================================
   FLAVOURS — the cup's palette, swapped by the flavour picker
   ============================================================ */
#device{
  --tea-1:#e6b787; --tea-2:#cd8b4c; --tea-3:#a4632e; --tea-4:#78401a;
  --pearl-1:#3d2617; --pearl-2:#170c04; --pearl-3:#0a0402;
  --straw-mid:#ff5d8f;
}
/* The cup is an emoji, so a flavour cannot repaint the drink itself. It
   colours the light around it instead: the aura behind the cup, the glow the
   glyph casts, and the contact shadow. */
#device{--cup-hue:0deg; --cup-sat:1}

/* ============================================================
   SETTINGS, FLAVOURS, COACH MARKS, MILESTONES, GRAPH, SHARE
   ============================================================ */
.setting{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 2px;border-bottom:1px dashed var(--line);
  font-size:13.5px;font-weight:700;color:var(--ink);
}
.setting input[type=range]{flex:0 0 150px;accent-color:var(--pink)}
.music-setting{flex-wrap:wrap;gap:8px}
.music-setting label{margin-right:auto}
.music-setting input[type=range]{flex:0 1 125px;min-width:75px}
#btn-music-play{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--cream-2);color:var(--ink);font:inherit;font-size:11px;cursor:pointer;min-width:67px}
#btn-music-play:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.setting input[type=checkbox]{width:22px;height:22px;accent-color:var(--pink)}
.setting select{
  font-family:inherit;font-weight:800;font-size:13px;padding:6px 8px;
  border:2px solid var(--ink);border-radius:9px;background:#fff;color:var(--ink);
}

#flavour-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.flav{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:9px;cursor:pointer;text-align:left;font-family:inherit;
  background:#fff;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--lift-1);color:var(--ink);
  transition:transform .1s, box-shadow .1s;
}
.flav:active{transform:translateY(2px);box-shadow:none}
.flav.on{background:linear-gradient(180deg,#fff6e3,#ffe3ba);box-shadow:var(--lift-2)}
.flav.locked{opacity:.55;filter:grayscale(.6)}
.f-swatch{
  width:100%;height:30px;border-radius:8px;border:2px solid var(--ink);
  position:relative;overflow:hidden;
}
.f-swatch i{
  position:absolute;bottom:3px;left:6px;width:9px;height:9px;border-radius:50%;
  box-shadow:12px 0 0 currentColor, 24px 0 0 currentColor;
}
.f-name{font-size:12.5px;font-weight:800}
.f-hint{font-size:10.5px;color:var(--ink-soft);font-weight:600;line-height:1.3}

/* ---- coach marks ---- */
#coach{position:absolute;inset:0;z-index:210;pointer-events:none}
#coach-ring{
  position:absolute;border-radius:16px;
  border:3px solid var(--gold);
  box-shadow:0 0 0 4000px rgba(8,3,12,.62), 0 0 22px rgba(255,194,60,.8);
  animation:coachPulse 1.5s ease-in-out infinite;
  transition:left .3s, top .3s, width .3s, height .3s;
}
@keyframes coachPulse{
  0%,100%{box-shadow:0 0 0 4000px rgba(8,3,12,.62), 0 0 14px rgba(255,194,60,.6)}
  50%    {box-shadow:0 0 0 4000px rgba(8,3,12,.62), 0 0 30px rgba(255,194,60,1)}
}
#coach-bubble{
  position:absolute;left:50%;transform:translateX(-50%);
  width:min(310px, calc(var(--dw) - 32px));
  background:var(--cream);color:var(--ink);
  border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--lift-2);padding:12px 14px;
  font-size:14px;font-weight:800;line-height:1.4;
  pointer-events:auto;
  display:flex;align-items:center;gap:10px;
}
#coach-skip{
  margin-left:auto;flex:0 0 auto;cursor:pointer;
  background:rgba(46,28,40,.09);border:none;border-radius:999px;
  padding:5px 11px;font-family:inherit;font-size:11.5px;font-weight:800;color:var(--ink-soft);
}

/* ---- milestone flourish ---- */
#milestone{position:absolute;inset:0;z-index:230;display:grid;place-items:center;pointer-events:none}
#milestone.go .ms-inner{animation:msPop 2.1s cubic-bezier(.2,1.2,.4,1)}
.ms-inner{text-align:center}
.ms-num{
  font-size:clamp(44px,15vw,72px);font-weight:800;color:var(--gold);
  text-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 40px rgba(255,194,60,.9);
}
.ms-sub{
  font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--cream);text-shadow:0 2px 6px rgba(0,0,0,.7);
}
@keyframes msPop{
  0%{transform:scale(.4);opacity:0}
  18%{transform:scale(1.12);opacity:1}
  32%{transform:scale(1)}
  78%{transform:scale(1);opacity:1}
  100%{transform:scale(1.3);opacity:0}
}

/* ---- production graph ---- */
#graph-wrap{
  position:relative;height:96px;border-radius:var(--r);
  background:rgba(46,28,40,.06);border:2px solid var(--ink);overflow:hidden;
}
#graph{width:100%;height:100%;display:block}
#graph-label{
  position:absolute;top:6px;right:10px;font-size:10.5px;font-weight:800;
  color:var(--ink-soft);letter-spacing:.4px;
}

/* ---- run summary ---- */
#share{position:absolute;inset:0;z-index:240;display:grid;place-items:center;padding:16px;
  background:rgba(12,4,16,.78)}
#share-canvas{
  width:100%;height:auto;border-radius:var(--r);border:2px solid var(--ink);
  margin-bottom:12px;display:block;
}

/* ---- reduce motion, from settings rather than the OS ---- */
#device.no-motion *{
  animation-duration:.001s !important;animation-iteration-count:1 !important;
  transition-duration:.001s !important;
}


/* ============================================================
   TRIALS — the challenges page
   ============================================================ */
#challenge-list{display:flex;flex-direction:column;gap:9px}
#chal-foot{margin-top:12px}

/* the headline: what you are running, or what to try next */
.chal-head{
  display:flex;align-items:center;gap:11px;
  padding:12px;margin-bottom:12px;
  border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift-2);
  background:#fff;color:var(--ink);
}
.chal-head:empty{display:none}
.chal-head.suggest{background:linear-gradient(180deg,#f3edff,#e2d7ff)}
.chal-head.running{background:linear-gradient(180deg,#fff3d6,#ffe6ad)}
.chal-head.all-done{background:linear-gradient(180deg,#c6f5e2,#9deccd)}
.chh-icon{flex:0 0 auto;font-size:30px;line-height:1}
.chh-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.chh-body > b{font-size:15px;font-weight:800}
.chh-body > span{font-size:11.5px;font-weight:600;color:var(--ink-soft);line-height:1.45}
.chh-num{font-variant-numeric:tabular-nums;font-weight:800 !important;color:var(--ink) !important}
.chh-clock{color:var(--pink-dark)}
.chh-go{
  flex:0 0 auto;cursor:pointer;font-family:inherit;
  padding:9px 15px;border-radius:999px;
  background:linear-gradient(180deg,#b9a6ff,var(--star-dark));color:#fff;
  border:2px solid var(--ink);box-shadow:var(--lift-1);
  font-size:12.5px;font-weight:800;
}
.chh-go:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.chh-go:active{transform:translateY(2px);box-shadow:none}

/* one challenge */
.chal{
  display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:11px;font-family:inherit;color:var(--ink);
  background:#fff;border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--lift-2);
  transition:transform .1s, box-shadow .1s, filter .2s, opacity .2s;
}
.chal:hover:not(.done){transform:translateY(-2px);box-shadow:var(--lift-3)}
.chal:active:not(.done){transform:translateY(4px);box-shadow:none}
.chal.active{background:linear-gradient(180deg,#fff3d6,#ffe6ad)}
.chal.done{cursor:default;filter:grayscale(.35);opacity:.7}
/* the one the page is pointing you at */
.chal.pick{border-color:var(--star-dark);box-shadow:var(--lift-2), 0 0 0 3px rgba(143,123,255,.28)}
.chal.v-early{opacity:.72}

.ch-icon{
  flex:0 0 42px;height:42px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(180deg,var(--cream),var(--cream-2));
  border:2px solid var(--ink);border-radius:12px;
}
.chal.active .ch-icon{background:linear-gradient(180deg,var(--gold),var(--gold-dark))}
.chal.done   .ch-icon{background:linear-gradient(180deg,#9de9c8,var(--mint))}
.ch-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ch-name{font-size:14.5px;font-weight:800;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ch-tag{
  font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  background:var(--pink);color:#fff;border-radius:999px;padding:2px 8px;font-weight:800;
  animation:tagPulse 1.6s ease-in-out infinite;
}
@keyframes tagPulse{0%,100%{opacity:1}50%{opacity:.55}}
/* how hard this one is for you right now */
.ch-verdict{
  font-size:10px;text-transform:uppercase;letter-spacing:.6px;
  border-radius:999px;padding:2px 8px;font-weight:800;border:1.5px solid transparent;
}
.ch-verdict.v-easy {background:rgba(49,199,149,.22); color:var(--mint-dark)}
.ch-verdict.v-ready{background:var(--gold); color:#3d2400}
.ch-verdict.v-steep{background:rgba(255,93,143,.18); color:var(--pink-dark)}
.ch-verdict.v-early{background:rgba(46,28,40,.1);   color:var(--ink-soft)}
.ch-rule{font-size:11.5px;font-weight:700;color:var(--pink-dark)}
.ch-goal{font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.ch-gauge{font-size:11px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ch-gauge b{color:var(--ink);font-weight:800}
.ch-meter{
  display:block;height:7px;border-radius:999px;margin:3px 0 1px;
  background:rgba(46,28,40,.12);border:1px solid var(--line);overflow:hidden;
}
.ch-meter > i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--pink));
  transition:width .4s cubic-bezier(.2,.8,.3,1);
}
.ch-reward{font-size:11.5px;font-weight:800;color:var(--mint-dark)}
.ch-go{
  flex:0 0 auto;align-self:center;
  padding:6px 12px;border-radius:999px;
  background:rgba(46,28,40,.08);color:var(--ink);
  font-size:11.5px;font-weight:800;
}
.chal.pick .ch-go{background:linear-gradient(180deg,#b9a6ff,var(--star-dark));color:#fff}
.ch-go.quit{background:rgba(255,93,143,.18);color:var(--pink-dark)}

/* ============================================================
   BARISTA'S CHOICE
   ============================================================ */
#boon-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.boon{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:100%;cursor:pointer;padding:14px 12px;font-family:inherit;color:var(--ink);
  background:linear-gradient(180deg,#fff,var(--cream-2));
  border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--lift-2);
  transition:transform .1s, box-shadow .1s;
}
.boon:hover{transform:translateY(-2px);box-shadow:var(--lift-3)}
.boon:active{transform:translateY(4px);box-shadow:none}
.bo-icon{font-size:31px;line-height:1}
.bo-name{font-size:15.5px;font-weight:800;text-align:center}
.bo-desc{font-size:12px;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.45}

/* ============================================================
   EVENT PICKUPS — a golden that is not a Golden Boba
   ============================================================ */
.golden.evt::before{
  background:radial-gradient(circle at 32% 28%, #ffffff, #b8f4ff 40%, var(--aqua-dark) 100%);
}
.evt-icon{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:33px;line-height:1;
  /* above the ::before disc, and never intercepting the button's own taps */
  z-index:1;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
}

/* ============================================================
   WEEKLY GOALS
   ============================================================ */
#weekly-panel{margin-top:18px}
.quest.weekly{background:linear-gradient(180deg,#fff,#f1ecff)}
.quest.weekly .q-meter > i{background:linear-gradient(90deg,var(--star),var(--star-dark))}
.quest.weekly.ready{background:linear-gradient(180deg,#fff8e2,#ffe9b8)}
.quest.weekly.ready .q-meter > i{background:linear-gradient(90deg,var(--gold),var(--pink))}
.quest.weekly.claimed .q-count{color:var(--mint-dark);opacity:1}
#weekly-bonus{margin-top:8px}
#weekly-bonus b{color:var(--star-dark)}

/* ============================================================
   IDLE BANK METER — the offline cap, made visible
   ============================================================ */
#offline-meter{
  position:relative;height:20px;border-radius:999px;margin:2px 0 10px;
  background:rgba(46,28,40,.12);border:2px solid var(--ink);overflow:hidden;
}
#offline-fill{
  height:100%;width:0;border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,var(--mint),var(--mint-dark));
  transition:width .6s cubic-bezier(.2,.8,.3,1);
}
#offline-fill.full{background:linear-gradient(90deg,var(--gold),var(--gold-dark))}
#offline-cap-label{
  /* the label sits over the fill, so it stays legible at any width */
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--ink);
  letter-spacing:.3px;text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.hint.warn{color:var(--pink-dark);font-weight:700}
.hint.warn b{color:var(--pink-dark)}

/* ============================================================
   ASCEND WORLD — a full-screen constellation command deck
   ============================================================ */
#tab-ascend{padding:0;overflow-y:auto;scrollbar-width:none;background:#10071a;color:var(--cream)}
#tab-ascend::-webkit-scrollbar{display:none}
#device[data-view="ascend"] #stage{display:none}
#device[data-view="ascend"] #panel{border-top:0;border-radius:0;background:#10071a}
#device[data-view="ascend"] #tabs{border-radius:0}
#device[data-view="ascend"] .tab-body{border-radius:0}
#ascend-world{position:relative;min-height:100%;overflow:hidden;padding:14px 14px 24px;background:
  radial-gradient(700px 360px at 55% 0%,rgba(143,123,255,.28),transparent 66%),
  radial-gradient(520px 420px at 0% 90%,rgba(255,93,143,.14),transparent 70%),
  linear-gradient(165deg,#160b24,#241032 52%,#12081c)}
#ascend-world::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;background-image:radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 76% 15%,#ffd9f0 0 1px,transparent 1.5px),radial-gradient(circle at 46% 68%,#cfc4ff 0 1px,transparent 1.5px),radial-gradient(circle at 90% 82%,#fff 0 1px,transparent 1.5px);background-size:137px 151px,191px 179px,223px 211px,167px 193px;animation:ascendDrift 18s linear infinite}
@keyframes ascendDrift{to{background-position:24px -38px,-32px 28px,41px -22px,-18px 34px}}
#ascend-world::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 40%,rgba(255,255,255,.035) 50%,transparent 60%);mix-blend-mode:screen}
#ascend-command,#constellation-deck,#eternal-deck{position:relative;z-index:1}
.ascend-command{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(135px,.75fr);gap:10px;padding:13px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:linear-gradient(145deg,rgba(56,27,74,.94),rgba(25,12,39,.92));box-shadow:0 8px 0 rgba(7,3,12,.7),inset 0 1px rgba(255,255,255,.16);overflow:hidden}
.ascend-command-title{grid-column:1 / -1;display:flex;align-items:center;gap:11px;min-width:0}.ascend-orb{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;font-size:27px;color:#fff;background:radial-gradient(circle at 34% 27%,#fff,#b5a8ff 18%,#735ee5 48%,#241341 76%);box-shadow:0 0 0 1px rgba(255,255,255,.36),0 0 24px rgba(143,123,255,.68);animation:ascendOrb 3s ease-in-out infinite}
@keyframes ascendOrb{50%{transform:translateY(-3px) scale(1.06);filter:brightness(1.2)}}
.ascend-kicker{display:block;font-size:8px;letter-spacing:1.7px;font-weight:900;color:#cfc3ff}.ascend-command h2{font-size:23px;line-height:1;margin:2px 0 3px;color:var(--cream)}.ascend-command p{font-size:10px;line-height:1.25;color:rgba(255,247,236,.68)}
.ascend-reward{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;grid-column:1 / -1}.ascend-reward>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:7px 4px;border:1px solid rgba(255,255,255,.15);border-radius:11px;background:rgba(8,3,15,.24)}.ascend-reward>div.next{background:linear-gradient(145deg,rgba(255,93,143,.2),rgba(143,123,255,.2));border-color:rgba(255,170,215,.42)}.ascend-reward small{font-size:8px;letter-spacing:1.1px;font-weight:900;color:rgba(255,247,236,.58);white-space:nowrap}.ascend-reward strong{font-size:24px;line-height:1.05;color:var(--cream);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.ascend-reward .next strong{color:#ffd0e5;text-shadow:0 0 12px rgba(255,93,143,.55)}.ascend-arrow{font-size:22px;color:#d9ceff}.ascend-power{grid-column:1 / -1;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(8,3,15,.24)}.ascend-meter-head{display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:1px;font-weight:900;color:rgba(255,247,236,.6)}.ascend-meter-head b{color:#ffd27b;font-size:8px}.ascend-power .prestige-meter{height:7px;margin:6px 0 5px;background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.12)}.ascend-power .prestige-meter>div{background:linear-gradient(90deg,#9b8cff,#ff75ad,#ffd27b);box-shadow:0 0 13px rgba(255,117,173,.7)}.ascend-power .hint{margin:0;font-size:9px;line-height:1.25;color:rgba(255,247,236,.62)}.ascend-btn{grid-column:1 / -1;min-height:46px!important;padding:8px 12px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.ascend-btn span{font-size:16px;line-height:1;text-transform:uppercase;letter-spacing:1px}.ascend-btn small{font-size:9px;opacity:.78}
.constellation-deck,.eternal-deck{margin-top:12px;padding:11px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(19,8,29,.58);box-shadow:inset 0 1px rgba(255,255,255,.08)}.constellation-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:8px}.constellation-head h3{font-size:19px;line-height:1;color:var(--cream);margin-top:2px}.constellation-head .pill{margin:0;background:rgba(143,123,255,.25);border:1px solid rgba(205,195,255,.25);color:#e3dcff;font-size:10px}
#tab-ascend #tree-legend{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:8px}.br-chip{background:rgba(255,255,255,.92)}
#tab-ascend #tree-view{height:min(46vh,420px);min-height:290px;border:1px solid rgba(217,204,255,.28);border-radius:15px;box-shadow:inset 0 3px 22px rgba(0,0,0,.6),0 8px 0 rgba(6,2,12,.52)}
#tab-ascend #tree-foot{display:flex;align-items:center;gap:8px;margin-top:7px}#tab-ascend #tree-foot .hint{flex:1;margin:0;color:rgba(255,247,236,.55);font-size:9px}#tab-ascend #tree-foot .mini-btn{color:var(--cream);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);box-shadow:none}
.eternal-deck .hint{margin:0 0 8px;color:rgba(255,247,236,.6);font-size:10px}.eternal-deck #eternal-list{display:grid;gap:7px}.eternal-deck .eternal{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:var(--cream)}
.ascend-cutscene{position:absolute;inset:0;z-index:30;display:grid;place-items:center;align-content:center;gap:13px;pointer-events:none;background:radial-gradient(circle at 50% 47%,rgba(255,255,255,.96),rgba(173,153,255,.62) 13%,rgba(58,28,85,.92) 43%,#09040f 78%);opacity:0}.ascend-cutscene.play{animation:ascendScene 1.9s cubic-bezier(.2,.7,.2,1) forwards}.ascend-rift{width:92px;height:92px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:0 0 0 10px rgba(143,123,255,.13),0 0 70px rgba(143,123,255,.95),inset 0 0 32px rgba(255,255,255,.8);animation:riftPulse 1.7s ease-out}.ascend-rift span{font-size:42px;color:#fff;text-shadow:0 0 22px #fff,0 0 40px #9f8cff}.ascend-cutscene-copy{text-align:center;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.5)}.ascend-cutscene-copy span{display:block;font-size:9px;letter-spacing:3px;font-weight:900;color:#d8ceff}.ascend-cutscene-copy strong{display:block;font-size:19px;letter-spacing:1px;margin-top:4px}@keyframes ascendScene{0%{opacity:0;transform:scale(1.12)}18%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.94)}}@keyframes riftPulse{0%{transform:scale(.3) rotate(-20deg);opacity:0}35%{opacity:1}100%{transform:scale(1.25) rotate(20deg);opacity:.2}}
@media (max-width:360px){.ascend-command{grid-template-columns:1fr}.ascend-command-title{grid-column:1}.ascend-reward,.ascend-power,.ascend-btn{grid-column:1}.ascend-command h2{font-size:21px}#tab-ascend #tree-view{min-height:260px}}
@media (prefers-reduced-motion:reduce){#ascend-world::before,.ascend-orb,.ascend-cutscene.play,.ascend-rift{animation:none}.ascend-cutscene.play{opacity:0}}

/* High-combo overdrive: the heat moves from gold to electric blue, then
   blows the stage out to white at the cap. */
#stage{--heat-aura:#ff5b42}
#stage::after{background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--heat-aura) 48%,transparent),color-mix(in srgb,var(--heat-aura) 16%,transparent) 45%,transparent 74%);transition:opacity .15s,background .3s}
#stage::before{content:"";position:absolute;inset:-18%;z-index:0;pointer-events:none;border:2px solid color-mix(in srgb,var(--heat-aura) 60%,transparent);border-radius:50%;opacity:calc(var(--heat) * .4);transform:scale(.7);filter:blur(1px)}
#heat-wrap{--heat-color:var(--heat-aura);transition:border-color .3s,box-shadow .3s,background .3s}
#heat-fill{background:linear-gradient(90deg,#ffcf68,var(--heat-aura),#fff);box-shadow:0 0 15px color-mix(in srgb,var(--heat-aura) 72%,transparent);transition:transform .08s linear,background .3s,box-shadow .3s}
#heat-wrap[data-tier="2"]{border-color:color-mix(in srgb,var(--heat-aura) 70%,#fff 20%);box-shadow:0 3px 0 #172642,0 0 24px color-mix(in srgb,var(--heat-aura) 45%,transparent)}
#heat-wrap[data-tier="3"]{--heat-color:#b9d8ff;border-color:#579cff;background:linear-gradient(125deg,rgba(10,30,67,.96),rgba(20,48,93,.96));box-shadow:0 3px 0 #07162f,0 0 32px rgba(51,137,255,.62),inset 0 0 20px rgba(91,164,255,.16)}
#heat-wrap[data-tier="3"] #heat-label{text-shadow:0 2px 0 #113265,0 0 22px rgba(96,174,255,.9)}
#heat-wrap[data-tier="4"]{--heat-color:#fff;background:linear-gradient(135deg,#274b82,#101c3f 70%);border-color:#fff;box-shadow:0 3px 0 #070d22,0 0 48px rgba(255,255,255,.95),0 0 100px rgba(85,164,255,.7),inset 0 0 24px rgba(255,255,255,.2)}
#heat-wrap[data-tier="4"] #heat-label{text-shadow:0 0 8px #fff,0 0 25px #8ac5ff}
#heat-wrap[data-tier="4"] #heat-streak{color:#dff1ff}
#stage.heat-blast::before{animation:heatShock .34s cubic-bezier(.2,.8,.3,1)}
#device.heat-rush{animation:heatShake .22s linear infinite}
#device.heat-overdrive{animation:heatShakeHard .095s linear infinite}
#device.heat-rush #cup{animation:infernoCup .28s ease-in-out infinite alternate}
#device.heat-overdrive #cup{animation:infernoCupOverdrive .12s ease-in-out infinite alternate}
@keyframes heatShake{0%,100%{transform:translate3d(0,0,0) rotate(0)}20%{transform:translate3d(-1px,1px,0) rotate(-.25deg)}40%{transform:translate3d(2px,-1px,0) rotate(.25deg)}60%{transform:translate3d(-2px,0,0) rotate(-.2deg)}80%{transform:translate3d(1px,1px,0) rotate(.2deg)}}
@keyframes heatShakeHard{0%,100%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(-3px,2px,0) rotate(-.7deg)}50%{transform:translate3d(3px,-2px,0) rotate(.7deg)}75%{transform:translate3d(-2px,-1px,0) rotate(-.5deg)}}
@keyframes heatShock{0%{opacity:.05;transform:scale(.68)}45%{opacity:.85;transform:scale(1.08)}100%{opacity:0;transform:scale(1.45)}}
@keyframes infernoCup{from{transform:translateY(-3px) rotate(-1.8deg) scale(1.015)}to{transform:translateY(3px) rotate(1.8deg) scale(1.04)}}
@keyframes infernoCupOverdrive{from{transform:translate(-2px,-2px) rotate(-3deg) scale(1.04)}to{transform:translate(2px,2px) rotate(3deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){#device.heat-rush,#device.heat-overdrive,#device.heat-rush #cup,#device.heat-overdrive #cup,#stage.heat-blast::before{animation:none}}

/* The first runway is a redline up to 6x. The bar opens into four marked
   overdrive levels only after the 200-hit gate is cleared. */
#heat-wrap[data-phase="locked"]{--heat-color:#ff4b58;background:linear-gradient(125deg,rgba(63,10,27,.97),rgba(44,10,35,.97));border-color:#ff4259;box-shadow:0 3px 0 #260718,0 0 28px rgba(255,47,87,.42),inset 0 0 18px rgba(255,66,93,.14)}
#heat-wrap[data-phase="locked"] #heat-label{text-shadow:0 2px 0 #6b1228,0 0 22px rgba(255,76,93,.8)}
#heat-wrap[data-phase="locked"] #heat-bar::after{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 2px),rgba(255,117,131,.22) calc(16.666% - 2px),rgba(255,117,131,.22) 16.666%)}
#heat-levels{display:none}
#heat-bar{transition:height .35s ease,border-color .25s,box-shadow .25s}
#heat-wrap[data-phase="overdrive"] #heat-bar{height:6px;border-color:rgba(183,218,255,.5);box-shadow:0 0 18px rgba(58,141,255,.35)}
#heat-wrap[data-phase="overdrive"] #heat-bar::after{background:linear-gradient(90deg,transparent 0 66.2%,rgba(205,231,255,.3) 66.2% 66.8%,transparent 66.8% 77.2%,rgba(205,231,255,.3) 77.2% 77.8%,transparent 77.8% 88.3%,rgba(205,231,255,.3) 88.3% 88.9%,transparent 88.9%)}
#heat-wrap[data-phase="overdrive"] #heat-levels{position:absolute;left:11px;right:11px;top:39px;display:block;height:8px;margin:0;color:rgba(218,237,255,.62);font-size:7px;font-weight:900;letter-spacing:.5px;pointer-events:none}
#heat-wrap[data-phase="overdrive"] #heat-levels span{position:absolute;top:0;transform:translateX(-50%)}
#heat-wrap[data-phase="overdrive"] #heat-levels span:nth-child(1){left:66.666%}
#heat-wrap[data-phase="overdrive"] #heat-levels span:nth-child(2){left:77.777%}
#heat-wrap[data-phase="overdrive"] #heat-levels span:nth-child(3){left:88.888%}
#heat-wrap[data-phase="overdrive"] #heat-levels span:nth-child(4){left:100%;transform:translateX(-100%)}
#heat-wrap[data-phase="overdrive"]{--heat-color:#c5ddff;background:linear-gradient(125deg,rgba(10,30,67,.97),rgba(20,48,93,.97));border-color:#579cff;box-shadow:0 3px 0 #07162f,0 0 34px rgba(51,137,255,.65),inset 0 0 20px rgba(91,164,255,.16)}
#heat-wrap[data-phase="overdrive"] #heat-label{text-shadow:0 2px 0 #113265,0 0 22px rgba(96,174,255,.9)}
#heat-wrap[data-phase="overdrive"][data-level="9"]{--heat-color:#fff;border-color:#fff;box-shadow:0 3px 0 #070d22,0 0 52px rgba(255,255,255,.95),0 0 110px rgba(85,164,255,.75),inset 0 0 24px rgba(255,255,255,.2)}
#heat-wrap[data-phase="overdrive"][data-level="9"] #heat-label{text-shadow:0 0 8px #fff,0 0 28px #8ac5ff}
#heat-wrap[data-phase="overdrive"][data-level="9"] #heat-levels{color:#fff;text-shadow:0 0 10px #9ed4ff}

/* 200-hit breakthrough: impact frames, a glass punch-through, and shards
   sliding past the player before the overdrive bar is revealed. */
#breakthrough-scene{position:absolute;inset:0;z-index:260;overflow:hidden;pointer-events:none;background:#030308;opacity:0}
#breakthrough-scene.go{animation:breakthroughFade 1.9s cubic-bezier(.2,.7,.2,1) forwards}
.breakthrough-frame{position:absolute;inset:0;opacity:0}.frame-white{background:#fff}.frame-black{background:#030308}
#breakthrough-scene.go .frame-white{animation:impactWhite 1.9s steps(1,end) forwards}
#breakthrough-scene.go .frame-black{animation:impactBlack 1.9s steps(1,end) forwards}
.breakthrough-beam{position:absolute;top:-38%;left:-28%;width:42%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.98) 45%,rgba(151,210,255,.75) 55%,transparent);filter:blur(3px);opacity:0;transform:rotate(-18deg)}
#breakthrough-scene.go .breakthrough-beam{animation:beamPunch 1.28s cubic-bezier(.12,.8,.2,1) .12s forwards}
.glass-crack{position:absolute;left:50%;top:50%;width:150%;height:3px;transform-origin:0 50%;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(173,224,255,.82) 45%,transparent 78%);box-shadow:0 0 12px rgba(184,232,255,.85)}
.glass-crack::before,.glass-crack::after{content:"";position:absolute;left:30%;width:42%;height:2px;background:inherit;box-shadow:inherit;transform-origin:0 50%}
.glass-crack::before{top:-2px;transform:rotate(27deg)}.glass-crack::after{top:3px;transform:rotate(-31deg)}
.crack-a{transform:rotate(-21deg) translateX(-8%)}.crack-b{transform:rotate(32deg) translateX(-4%)}
#breakthrough-scene.go .glass-crack{animation:crackSnap .9s cubic-bezier(.15,.9,.3,1) .34s forwards}
#breakthrough-scene.go .crack-b{animation-name:crackSnapB}
.glass-shard{position:absolute;left:50%;top:50%;width:24%;height:42%;opacity:0;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(132,202,255,.35) 44%,rgba(255,255,255,0) 70%);border:1px solid rgba(255,255,255,.8);filter:drop-shadow(0 0 12px rgba(170,225,255,.7));clip-path:polygon(50% 0,100% 26%,67% 100%,14% 66%)}
.shard-a{transform:translate(-50%,-50%) rotate(14deg)}.shard-b{transform:translate(-50%,-50%) rotate(-48deg)}.shard-c{transform:translate(-50%,-50%) rotate(86deg)}.shard-d{transform:translate(-50%,-50%) rotate(-112deg)}
#breakthrough-scene.go .shard-a{animation:shardA 1.35s cubic-bezier(.1,.8,.2,1) .25s forwards}#breakthrough-scene.go .shard-b{animation:shardB 1.42s cubic-bezier(.1,.8,.2,1) .28s forwards}#breakthrough-scene.go .shard-c{animation:shardC 1.3s cubic-bezier(.1,.8,.2,1) .32s forwards}#breakthrough-scene.go .shard-d{animation:shardD 1.48s cubic-bezier(.1,.8,.2,1) .2s forwards}
.breakthrough-copy{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff;opacity:0;text-shadow:0 3px 0 #090817,0 0 26px rgba(116,193,255,.95);transform:scale(.2);letter-spacing:1px}.breakthrough-copy span{font-size:10px;letter-spacing:4px;font-weight:950}.breakthrough-copy strong{font-size:clamp(26px,8vw,42px);line-height:.95;margin-top:7px}.breakthrough-copy b{font-size:12px;letter-spacing:3px;color:#9fd7ff;margin-top:10px}
#breakthrough-scene.go .breakthrough-copy{animation:breakthroughTitle 1.45s cubic-bezier(.15,1.4,.35,1) .34s forwards}
@keyframes breakthroughFade{0%,78%{opacity:1}100%{opacity:0}}
@keyframes impactWhite{0%,7%{opacity:1}8%,24%{opacity:0}25%,28%{opacity:1}29%,100%{opacity:0}}
@keyframes impactBlack{0%,9%{opacity:0}10%,15%{opacity:1}16%,100%{opacity:0}}
@keyframes beamPunch{0%{opacity:0;transform:translateX(-145%) rotate(-18deg)}18%{opacity:1}72%{opacity:.85}100%{opacity:0;transform:translateX(390%) rotate(-18deg)}}
@keyframes crackSnap{0%{opacity:0;transform:scaleX(0) rotate(-21deg)}28%{opacity:1;transform:scaleX(1.02) rotate(-21deg)}100%{opacity:.25;transform:scaleX(1.18) rotate(-21deg)}}
@keyframes crackSnapB{0%{opacity:0;transform:scaleX(0) rotate(32deg)}28%{opacity:1;transform:scaleX(1.02) rotate(32deg)}100%{opacity:.25;transform:scaleX(1.18) rotate(32deg)}}
@keyframes breakthroughTitle{0%{opacity:0;transform:scale(.2) translateY(22px)}18%{opacity:1;transform:scale(1.15) translateY(0)}32%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08) translateY(-12px)}}
@keyframes shardA{0%{opacity:0;transform:translate(-50%,-50%) rotate(14deg) scale(.1)}20%{opacity:1}100%{opacity:0;transform:translate(135%,-155%) rotate(48deg) scale(1.1)}}
@keyframes shardB{0%{opacity:0;transform:translate(-50%,-50%) rotate(-48deg) scale(.1)}20%{opacity:1}100%{opacity:0;transform:translate(-160%,-115%) rotate(-88deg) scale(1.15)}}
@keyframes shardC{0%{opacity:0;transform:translate(-50%,-50%) rotate(86deg) scale(.1)}20%{opacity:1}100%{opacity:0;transform:translate(115%,120%) rotate(142deg) scale(.9)}}
@keyframes shardD{0%{opacity:0;transform:translate(-50%,-50%) rotate(-112deg) scale(.1)}20%{opacity:1}100%{opacity:0;transform:translate(-160%,130%) rotate(-164deg) scale(1)}}
@media (prefers-reduced-motion:reduce){#breakthrough-scene{display:none!important}}

/* Keep the expanded track aligned with the multiplier and readable on phones. */
#heat-wrap[data-phase="locked"] #heat-fill{background:linear-gradient(90deg,#c91d47,var(--heat-aura));box-shadow:0 0 14px #ff245c}
#heat-wrap[data-phase="overdrive"]{--heat-color:var(--heat-aura);border-color:var(--heat-aura)}
#heat-wrap[data-phase="overdrive"] #heat-fill{background:linear-gradient(90deg,#ff245c 0 66.666%,#3e8dff 79%,#fff 100%);transform:scaleX(1)!important;clip-path:inset(0 calc(100% - var(--heat-progress,0%)) 0 0)}
#heat-wrap[data-phase="overdrive"] #heat-levels{animation:heatLevelsReveal .35s ease-out}
#heat-wrap[data-tier="0"]{--heat-color:#d8abc1;background:linear-gradient(125deg,rgba(32,12,33,.92),rgba(52,19,46,.92));border-color:rgba(255,227,196,.18);box-shadow:0 3px 0 rgba(12,4,17,.28)}
.breakthrough-copy{padding:18px}
.breakthrough-copy strong{font-size:clamp(24px,calc(var(--dw) * .076),32px)}
.eternal-deck .e-desc{color:#c7b7d9}
#heat-callout{color:var(--heat-aura);text-shadow:0 3px 0 #241031,0 0 24px var(--heat-aura)}
.eternal-deck .e-cost{color:#ded5ff}
.eternal-deck .eternal.cant{opacity:.75}
.ascend-command-title>div:last-child{min-width:0}
.ascend-command .ascend-btn small{white-space:normal;line-height:1.35}
#device.no-motion #stage.heat-blast::before{animation:none}
@keyframes heatLevelsReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* The café grows behind the cup without changing the stage's layout. */
#stage{overflow:hidden;isolation:isolate}
#cafe-scene{position:absolute;inset:-5px;z-index:0;pointer-events:none;opacity:.55}
#cafe-scene svg{display:block;width:100%;height:100%}

/* Each brewer gets a small station on the café shelf once it is owned. */
#brew-stations{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.brew-station{position:absolute;left:var(--station-x);top:var(--station-y);width:42px;height:42px;
  display:grid;place-items:center;opacity:0;transform:translate(-50%,-50%) scale(.55);
  border-radius:12px;background:linear-gradient(145deg,#fff0d2dd,#d7a67acc);
  border:2px solid #3a2130;box-shadow:0 4px 0 #281522,0 0 0 2px #ffe5c533;
  transition:opacity .35s,transform .45s cubic-bezier(.2,1.5,.4,1)}
.brew-station::before{content:"";position:absolute;left:5px;right:5px;bottom:4px;height:5px;border-radius:8px;
  background:#7b4050;box-shadow:0 1px 0 #fff7}
.brew-station::after{content:"";position:absolute;inset:-7px;border-radius:16px;
  background:radial-gradient(circle,#ffd77a66,transparent 68%);opacity:0;transition:opacity .2s}
.brew-station.active{opacity:1;transform:translate(-50%,-50%) scale(1)}
.brew-station.producing{animation:stationPop .42s cubic-bezier(.2,1.6,.4,1)}
.brew-station.producing::after{opacity:1}
.brew-station-icon{position:relative;z-index:1;font-size:22px;line-height:1;filter:drop-shadow(0 2px 0 #3b2430)}
@keyframes stationPop{0%,100%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-58%) scale(1.14)}}

/* Lightweight production pearls travel across the game into the counter. */
#brew-flight-layer{position:absolute;inset:0;z-index:55;pointer-events:none;overflow:hidden}
.brew-pearl-flight{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff9e9 0 12%,#d9a56b 28%,#713e49 70%,#2a1726 100%);
  box-shadow:0 0 0 2px #fff0,0 0 12px #ffca73cc;transform:translate(-50%,-50%);
  animation:brewPearlFlight .86s cubic-bezier(.18,.84,.3,1) forwards}
.brew-pearl-flight::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #ffe7a677;opacity:.7}
@keyframes brewPearlFlight{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}
  12%{opacity:1;transform:translate(calc(-50% + var(--pop-x)),calc(-50% + var(--pop-y))) scale(1.15) rotate(35deg)}
  78%{opacity:1;transform:translate(calc(-50% + calc(var(--dx) * .72)),calc(-50% + calc(var(--dy) * .72))) scale(.85) rotate(250deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2) rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){.brew-station.producing{animation:none}.brew-pearl-flight{display:none}}
#cafe-scene g{opacity:0;transition:opacity 1.2s ease}
#cafe-scene .cafe-lighting{opacity:1}
#cafe-scene .cafe-light-spill{animation:cafeLightBreathe 8s ease-in-out infinite}
@keyframes cafeLightBreathe{0%,100%{opacity:.78}50%{opacity:1}}
#device.no-motion #cafe-scene .cafe-light-spill{animation:none}
@media (prefers-reduced-motion:reduce){#cafe-scene .cafe-light-spill{animation:none}}
#cafe-scene:not([data-level="0"]) .cafe-shelves,
#cafe-scene:is([data-level="2"],[data-level="3"],[data-level="4"],[data-level="5"]) .cafe-machines,
#cafe-scene:is([data-level="3"],[data-level="4"],[data-level="5"]) .cafe-neon,
#cafe-scene:is([data-level="4"],[data-level="5"]) .cafe-guests,
#cafe-scene[data-level="5"] .cafe-stars{opacity:1}
.cafe-neon{filter:drop-shadow(0 0 7px #ff80bc)}
.cafe-stars{filter:drop-shadow(0 0 4px #d7b3ff)}

/* One short description for the selected style; upgrades stay small icons. */
.combo-style-panel{padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid #e4d4c8}
.combo-style-panel h3{font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:0 0 9px;color:#785968}
#combo-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.combo-style{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:66px;min-width:0;padding:8px 2px;border:1px solid #ddc7b7;border-radius:12px;background:#fffaf2;color:#624456;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
.combo-style>span{font-size:22px;line-height:1.1}
.combo-style b{font-size:9px}
.combo-style small{font-size:8px;color:#786b73}
.combo-style[aria-pressed="true"]{background:#332037;color:#fff2d8;border-color:#332037;box-shadow:0 3px 0 #dbc1b1}
.combo-style:disabled{filter:grayscale(1);opacity:.55;cursor:default}
.combo-style:focus-visible,.cosmetic:focus-visible{outline:3px solid #a884f3;outline-offset:2px}
#combo-style-hint{font-size:10px;color:#816372;line-height:1.5;min-height:30px;margin:10px 1px 0}

#cosmetic-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 0 18px}
.cosmetic{display:grid;grid-template-columns:30px 1fr;gap:2px 6px;align-items:center;text-align:left;border:1px solid #ddc9b8;border-radius:12px;padding:10px;background:#fff9ee;color:#4c3549;cursor:pointer;min-width:0}
.cosmetic>span{grid-row:span 2;font-size:24px;text-align:center}
.cosmetic b{font-size:11px}
.cosmetic small{font-size:9px;line-height:1.4;color:#806675}
.cosmetic[aria-pressed="true"]{border-color:#a584d6;background:#eee5fa;box-shadow:inset 0 0 0 1px #a584d6}
.cosmetic:disabled{filter:grayscale(1);opacity:.58;cursor:default}
#cup-body{position:relative}
#cup-body::before,#cup-body::after{position:absolute;pointer-events:none;z-index:2}
#device[data-cup-skin="gilded"] #cup-body::after,
#device[data-cup-skin="starforged"] #cup-body::after{content:"";left:24%;top:34%;width:52%;height:56%;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%)}
#device[data-cup-skin="gilded"] #cup-body::after{content:"♛";display:grid;place-items:center;padding-bottom:20%;color:#fff3ac;font-size:calc(var(--cup-w) * .13);text-shadow:0 2px 2px #936016;background:linear-gradient(112deg,transparent 12%,#ffefa570 18%,transparent 24% 55%,#fff4bd70 60%,transparent 70%),linear-gradient(0deg,#d5914370,transparent 70%);box-shadow:inset 0 0 0 3px #ffe4a3}
#device[data-cup-skin="starforged"] #cup-body::after{background:radial-gradient(circle at 22% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 65% 20%,#fff 0 2px,transparent 3px),radial-gradient(circle at 72% 53%,#d2faff 0 1px,transparent 2px),radial-gradient(circle at 40% 60%,#e3b9ff 0 2px,transparent 3px),linear-gradient(145deg,#353091bb,#9354ad66 50%,#44c4df88);box-shadow:inset 0 0 20px #8de3ff}
#device[data-straw-skin="neon"] #cup-body::before{content:"";left:46.875%;top:6.25%;width:6.25%;height:19%;border-radius:1px;background:linear-gradient(90deg,#86f4ff,#fff0ff 45%,#ff67cd);box-shadow:0 0 10px #eb7fff,0 0 18px #82eaff}

.upg.unlock-glint::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 20%,#fff5bde0 48%,transparent 75%);pointer-events:none;animation:upgradeGlint 1.1s ease-out both}
.upgrade-spark{position:absolute;color:#ffe3a0;font-size:23px;text-shadow:0 0 10px #ffb868;pointer-events:none}
@keyframes upgradeGlint{from{transform:translateX(-110%);opacity:0}25%{opacity:1}to{transform:translateX(110%);opacity:0}}
#bank-label.whiteout-ready{color:#fff;text-shadow:0 3px 0 #16345f,0 0 15px #a7e2ff,0 0 35px #5eacff}

/* Shake the artwork, keeping touch targets and the shop in place. */
#device.heat-rush,#device.heat-overdrive,#device.bank-impact{animation:none}
#device #cup,#device #cup:hover,#device #cup.squish{animation:none;transform:none;transition:none}
#cup-body{animation:idleFloat 4.5s ease-in-out infinite}
#stage[data-heat-active="true"] #cup-body{animation:none}
#device.heat-rush #cup-body{animation:infernoCup .28s ease-in-out infinite alternate}
#device.heat-overdrive #cup-body{animation:infernoCupOverdrive .12s ease-in-out infinite alternate}
#device.heat-rush #cafe-scene,#device.heat-rush #heat-fx{animation:heatShake .22s linear infinite}
#device.heat-overdrive #cafe-scene,#device.heat-overdrive #heat-fx{animation:heatShakeHard .095s linear infinite}
#device.bank-impact #cafe-scene{animation:bankImpact .32s ease-out}
#stage.whiteout-impact::after{animation:whiteoutBloom .65s ease-out}
@keyframes whiteoutBloom{0%{opacity:.9;background:radial-gradient(ellipse at 50% 0%,#eaf8ff,#70baff80 50%,transparent 80%)}100%{opacity:0;background:radial-gradient(ellipse at 50% 0%,#eaf8ff,#70baff00 50%,transparent 80%)}}
#toast-layer{top:auto;left:10px;bottom:calc(env(safe-area-inset-bottom) + 12px);transform:none;width:calc(100% - 88px);align-items:flex-start;gap:5px}
.toast{font-size:11px;padding:8px 10px;border-radius:11px;gap:7px;line-height:1.4}
.toast .t-icon{font-size:18px}
#device.no-motion #cup-body,#device.no-motion #cafe-scene,#device.no-motion #stage.whiteout-impact::after{animation:none}
@media (prefers-reduced-motion:reduce){#device #cup-body,#device #cafe-scene,#device #heat-fx,#stage.whiteout-impact::after,.upg.unlock-glint::after{animation:none}}