/* ═══════════════════════════════════════════════════════════════════════
   BURNRATE — design system
   Two themes, one geometry. Colour is the only thing that swaps; spacing,
   type scale and motion are shared so the app never feels like two apps.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* brand — money green + engraver's gold, constant across themes */
  --green-100:#DCF6E8; --green-300:#6FE3A8; --green-400:#3FD98A;
  --green-500:#22B36A; --green-600:#128B52; --green-700:#0C6B45; --green-900:#053223;
  --gold-300:#F2DCA0; --gold-400:#E6C068; --gold-500:#C89A34; --gold-700:#8A661B;
  --ember-lo:#C43C0C; --ember-mid:#FF7A1F; --ember-hi:#FFD79A;
  --red:#E1523D;

  /* type */
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",ui-serif,Georgia,serif;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t1:140ms; --t2:280ms; --t3:520ms; --t4:820ms;

  /* geometry */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --gut:20px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --bar-h:60px;
  --tab-h:calc(62px + var(--safe-b));
}

html[data-theme="dark"]{
  --bg:#07090A; --bg-2:#0A0D0E;
  --surf:#0F1415; --surf-2:#151B1C; --surf-3:#1C2425;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16);
  --ink:#E9EFEB; --ink-2:#9BADA5; --ink-3:#61736C;
  --accent:var(--green-400); --accent-ink:#04170F; --accent-soft:rgba(63,217,138,.14);
  --gold:var(--gold-400); --gold-soft:rgba(230,192,104,.14);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-3:0 28px 60px -18px rgba(0,0,0,.85);
  --glass:rgba(12,17,18,.72);
  --scrim:rgba(3,5,5,.72);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#F3F1EA; --bg-2:#EDEBE2;
  --surf:#FFFFFF; --surf-2:#FAF9F4; --surf-3:#F1EFE6;
  --line:rgba(8,32,22,.10); --line-2:rgba(8,32,22,.20);
  --ink:#0F1F19; --ink-2:#526159; --ink-3:#8A9791;
  --accent:var(--green-600); --accent-ink:#FFFFFF; --accent-soft:rgba(18,139,82,.11);
  --gold:var(--gold-500); --gold-soft:rgba(200,154,52,.14);
  --shadow-1:0 1px 2px rgba(20,40,30,.06);
  --shadow-2:0 10px 26px -10px rgba(20,40,30,.20);
  --shadow-3:0 30px 64px -20px rgba(20,40,30,.28);
  --glass:rgba(255,255,255,.76);
  --scrim:rgba(28,34,31,.44);
  color-scheme:light;
}

/* theme crossfade: paint the whole app through one transition */
html.theming, html.theming *{
  transition:background-color 420ms var(--e-io),border-color 420ms var(--e-io),
             color 420ms var(--e-io),box-shadow 420ms var(--e-io),fill 420ms var(--e-io) !important;
}

/* ── RESET ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
body[data-screen="stage"]{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
/* The browser's own [hidden] rule loses to any author `display`, so every
   element styled `display:flex/grid` ignored the attribute. Rather than keep
   adding one `.thing[hidden]` rule per component, make it global. */
[hidden]{display:none !important}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--accent-soft);color:var(--ink)}

/* ── CANVAS LAYERS ──────────────────────────────────────────────────── */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;opacity:0;pointer-events:none;
    transition:opacity 620ms var(--e-io);touch-action:none;background:transparent}
#gl.live{opacity:1;pointer-events:auto}
/* above the stages and the sheet, below toasts: confetti fired from the
   spree "done" panel has to land in front of the panel that fired it */
#fx2d{position:fixed;inset:0;width:100%;height:100%;z-index:120;pointer-events:none}

/* ambient blobs behind the shell */
#ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.85}
#ambient i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.34;
  animation:drift 26s var(--e-io) infinite alternate}
#ambient i:nth-child(1){width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;
  background:radial-gradient(circle,var(--green-500),transparent 68%)}
#ambient i:nth-child(2){width:38vmax;height:38vmax;right:-12vmax;top:22vmax;
  background:radial-gradient(circle,var(--gold-500),transparent 68%);animation-delay:-9s}
#ambient i:nth-child(3){width:34vmax;height:34vmax;left:14vmax;bottom:-14vmax;
  background:radial-gradient(circle,var(--green-700),transparent 68%);animation-delay:-17s}
html[data-theme="light"] #ambient i{opacity:.20;filter:blur(84px)}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vmax,-3vmax,0) scale(1.12)}
  100%{transform:translate3d(-3vmax,4vmax,0) scale(.94)}
}

/* ── BOOT ───────────────────────────────────────────────────────────── */
#boot{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:22px;
  background:var(--bg);transition:opacity 560ms var(--e-io),visibility 560ms}
body:not([data-screen="boot"]) #boot{opacity:0;visibility:hidden}
.bm-ring{stroke-dasharray:308;stroke-dashoffset:308;animation:draw 1s var(--e-out) .1s forwards}
.bm-glyph{stroke-dasharray:230;stroke-dashoffset:230;animation:draw 1.1s var(--e-out) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.boot-word{font-family:var(--display);font-size:22px;letter-spacing:.42em;font-weight:600;
  opacity:0;animation:fadeUp 700ms var(--e-out) .8s forwards}
.boot-word em{font-style:normal;color:var(--gold)}
.boot-bar{width:120px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;
  opacity:0;animation:fadeUp 500ms var(--e-out) 1s forwards}
.boot-bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--green-600),var(--green-300));
  animation:load 900ms var(--e-io) 1s forwards}
@keyframes load{to{width:100%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── APP BAR ────────────────────────────────────────────────────────── */
#appbar{
  position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--bar-h) + var(--safe-t));
  padding:var(--safe-t) calc(var(--gut) + var(--safe-r)) 0 calc(var(--gut) + var(--safe-l));
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(var(--bg) 55%,transparent);
  transition:transform var(--t3) var(--e-out),opacity var(--t2)}
body[data-screen="stage"] #appbar{transform:translateY(-102%);opacity:0;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--green-400);
  box-shadow:0 0 0 4px var(--accent-soft),0 0 14px var(--green-400);animation:pulseDot 3.4s var(--e-io) infinite}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.65}}
.brand-word{font-family:var(--display);font-size:15px;letter-spacing:.3em;font-weight:600}
.brand-word em{font-style:normal;color:var(--gold)}
.bar-actions{display:flex;gap:6px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink-2);transition:color var(--t2),background var(--t2),transform var(--t2) var(--e-spring)}
.icon-btn svg{width:21px;height:21px}
.icon-btn:hover{color:var(--ink);background:var(--surf-2)}
.icon-btn:active{transform:scale(.9)}
/* sound icon states */
.i-sound .w1,.i-sound .w2{opacity:0;transition:opacity var(--t2)}
.i-sound .x{opacity:1;transition:opacity var(--t2)}
#soundBtn[aria-pressed="true"]{color:var(--accent)}
#soundBtn[aria-pressed="true"] .w1{opacity:1;transition-delay:40ms}
#soundBtn[aria-pressed="true"] .w2{opacity:1;transition-delay:110ms}
#soundBtn[aria-pressed="true"] .x{opacity:0}
.i-sound path:first-child{fill:currentColor;stroke-linejoin:round}
/* theme icon: sun (light) morphs into a crescent (dark). The crescent is
   a filled disc with a mask punching a second disc out of its corner —
   cheaper and smoother than swapping two different icons. */
.i-theme{overflow:visible}
.i-theme .orb{fill:none;transition:transform var(--t3) var(--e-spring),fill var(--t2)}
.i-theme .rays{opacity:1;transform-origin:center;
  transition:opacity var(--t2),transform var(--t3) var(--e-out)}
html[data-theme="dark"] .i-theme .rays{opacity:0;transform:scale(.4) rotate(-70deg)}
html[data-theme="dark"] .i-theme .orb{fill:currentColor;stroke:none;transform:translate(2px,-1px) scale(1.06)}
html[data-theme="dark"] #themeBtn svg{
  -webkit-mask:radial-gradient(circle at 76% 24%,transparent 34%,#000 35%);
  mask:radial-gradient(circle at 76% 24%,transparent 34%,#000 35%)}

/* ── MAIN / VIEWS ───────────────────────────────────────────────────── */
#main{position:relative;z-index:10;min-height:100%}
.view{display:none;padding:calc(var(--bar-h) + var(--safe-t) + 8px) 0 calc(var(--tab-h) + 24px)}
.view.is-active{display:block;animation:viewIn 480ms var(--e-out)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wrap{width:min(560px,100%);margin:0 auto;
  padding-inline:calc(var(--gut) + var(--safe-l)) calc(var(--gut) + var(--safe-r))}
body[data-screen="stage"] #main,body[data-screen="stage"] #tabbar{
  opacity:0;pointer-events:none;transition:opacity var(--t2)}

.kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.hero{padding:22px 0 26px}
.hero-title{font-family:var(--display);font-size:clamp(34px,9.5vw,46px);line-height:1.06;
  letter-spacing:-.02em;font-weight:600;margin-top:12px}
.hero-title em{font-style:italic;background:linear-gradient(100deg,var(--green-400),var(--gold-400));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--ink-2);font-size:15px;margin-top:14px;max-width:38ch}
.page-head{padding:16px 0 22px}
.page-title{font-family:var(--display);font-size:clamp(30px,8vw,40px);line-height:1.1;
  letter-spacing:-.02em;font-weight:600;margin-top:10px}
.page-title em{font-style:italic;color:var(--gold)}
.page-sub{color:var(--ink-2);font-size:15px;margin-top:14px}
.page-sub em{font-style:italic;color:var(--ink)}
.sec-title{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin:34px 0 14px;display:flex;align-items:center;gap:10px}
.sec-count{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--ink-3)}
.legal{font-size:11.5px;line-height:1.7;color:var(--ink-3);margin-top:28px}

/* ── LIFETIME STRIP ─────────────────────────────────────────────────── */
.lifetime{display:flex;align-items:center;gap:2px;padding:14px 4px;margin-bottom:22px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lt-item{flex:1;display:grid;gap:4px;text-align:center;min-width:0}
.lt-k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.lt-v{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-sep{width:1px;align-self:stretch;background:var(--line)}

/* ── MODE CARDS ─────────────────────────────────────────────────────── */
.modes{display:grid;gap:14px}
.modecard{position:relative;display:grid;text-align:left;overflow:hidden;
  border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surf);
  box-shadow:var(--shadow-2);isolation:isolate;
  transition:transform 420ms var(--e-out),box-shadow 420ms var(--e-out),border-color 420ms}
.modecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:var(--line-2)}
.modecard:active{transform:scale(.985) translateY(-1px);transition-duration:120ms}
.mc-art{position:relative;height:132px;overflow:hidden;border-bottom:1px solid var(--line)}
.mc-glow{position:absolute;inset:-40% -10%;filter:blur(34px);opacity:.85;
  transition:opacity 500ms var(--e-io),transform 700ms var(--e-out)}
.modecard:hover .mc-glow{transform:scale(1.1)}
.mc-body{padding:18px 20px 20px;display:grid;gap:7px}
.mc-top{display:flex;align-items:center;gap:10px}
.mc-num{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.mc-tag{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:3px 8px;border-radius:100px;border:1px solid var(--line-2);color:var(--ink-3)}
.mc-title{font-family:var(--display);font-size:31px;letter-spacing:-.01em;font-weight:600;line-height:1}
.mc-desc{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:36ch}
.mc-cta{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.mc-cta svg{width:17px;height:17px;transition:transform 380ms var(--e-out)}
.modecard:hover .mc-cta svg{transform:translateX(5px)}

/* no WebGL 2 on this device — the card stays visible but reads as inert */
.modecard.mc-off{opacity:.42;filter:saturate(.4)}
.modecard.mc-off:hover{transform:none;box-shadow:var(--shadow-2)}
.modecard.mc-off .mc-cta{color:var(--ink-3)}
.modecard.mc-off .mc-cta svg{display:none}
.modecard.mc-off .mc-tag::after{content:" · unavailable"}

/* burn card art */
.mc-burn .mc-glow{background:radial-gradient(60% 80% at 50% 100%,var(--ember-mid),transparent 70%)}
.mc-burn .mc-cta{color:var(--ember-mid)}
.mc-burn .mc-note{position:absolute;left:50%;top:52%;width:150px;height:66px;
  transform:translate(-50%,-50%) rotate(-6deg);border-radius:4px;
  background:linear-gradient(150deg,#E8E4D3,#CFD6C4);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.6),inset 0 0 0 3px rgba(20,90,60,.35),inset 0 0 0 5px rgba(20,90,60,.14);
  animation:noteFloat 6s var(--e-io) infinite alternate}
.mc-burn .mc-note::after{content:"";position:absolute;inset:0;border-radius:4px;
  background:radial-gradient(ellipse at 50% 118%,#20120A 8%,rgba(196,60,12,.9) 24%,transparent 52%);
  mix-blend-mode:multiply;animation:charPulse 3.2s var(--e-io) infinite alternate}
@keyframes noteFloat{from{transform:translate(-50%,-48%) rotate(-6deg)}to{transform:translate(-50%,-56%) rotate(-3deg)}}
@keyframes charPulse{from{opacity:.75}to{opacity:1}}
.mc-ember{position:absolute;bottom:16px;width:3px;height:3px;border-radius:50%;
  background:var(--ember-hi);box-shadow:0 0 8px 2px var(--ember-mid);opacity:0;
  animation:emberRise 3.4s linear infinite}
.mc-ember.e1{left:30%;animation-delay:0s}   .mc-ember.e2{left:44%;animation-delay:.7s}
.mc-ember.e3{left:56%;animation-delay:1.4s} .mc-ember.e4{left:66%;animation-delay:2.1s}
.mc-ember.e5{left:38%;animation-delay:2.8s}
@keyframes emberRise{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(14px,-118px) scale(.2)}
}

@keyframes sheen{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}
@keyframes chipBob{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-11px) rotate(5deg)}}

/* havana card art — a cigar with a live ember and drifting smoke */
.mc-havana .mc-glow{background:radial-gradient(55% 80% at 76% 60%,var(--ember-mid),transparent 68%)}
.mc-havana .mc-cta{color:var(--ember-mid)}
.mc-cigar{position:absolute;left:8%;top:52%;width:74%;height:19px;
  transform:translateY(-50%) rotate(-7deg);border-radius:10px;
  background:linear-gradient(180deg,#8A6A44,#5E4426 42%,#3E2C18);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.20)}
.mc-cigar::after{content:"";position:absolute;left:14%;top:0;bottom:0;width:16%;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.22));
  border-left:1px solid rgba(0,0,0,.35);border-right:1px solid rgba(0,0,0,.35)}
.cg-ash{position:absolute;right:0;top:0;bottom:0;width:22%;border-radius:0 10px 10px 0;
  background:linear-gradient(180deg,#9A9790,#4A4843 60%,#2C2B28)}
.cg-ember{position:absolute;right:21%;top:-1px;bottom:-1px;width:5px;border-radius:2px;
  background:linear-gradient(180deg,#FFD79A,#FF7A1F 55%,#C43C0C);
  box-shadow:0 0 12px 3px rgba(255,122,31,.85);
  animation:emberGlow 1.9s var(--e-io) infinite alternate}
@keyframes emberGlow{from{opacity:.72;box-shadow:0 0 8px 2px rgba(255,122,31,.6)}
                     to{opacity:1;box-shadow:0 0 18px 5px rgba(255,140,50,.95)}}
.mc-puff{position:absolute;right:16%;top:44%;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle,rgba(210,205,198,.42),transparent 68%);
  opacity:0;animation:puffRise 4.2s var(--e-io) infinite}
.mc-puff.p1{animation-delay:0s} .mc-puff.p2{animation-delay:1.4s} .mc-puff.p3{animation-delay:2.8s}
@keyframes puffRise{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  18%{opacity:.9}
  100%{opacity:0;transform:translate(34px,-92px) scale(3.4)}
}

/* shred card art — a slot spitting fragments of a note */
.mc-shred .mc-glow{background:radial-gradient(60% 80% at 50% 28%,var(--green-600),transparent 70%)}
.mc-shred .mc-cta{color:var(--green-400)}
html[data-theme="light"] .mc-shred .mc-cta{color:var(--green-600)}
.mc-machine{position:absolute;left:10%;right:10%;top:34%;height:22px;border-radius:5px;
  background:linear-gradient(180deg,#2B2E33,#15171A 60%,#0C0D0F);
  box-shadow:0 8px 18px -6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14)}
.mc-machine i{position:absolute;left:12%;right:12%;top:7px;height:7px;border-radius:2px;
  background:#05060700;box-shadow:inset 0 0 0 1px rgba(0,0,0,.9);
  background-image:repeating-linear-gradient(90deg,#3A3F46 0 3px,#0A0B0C 3px 6px);
  animation:teeth .5s linear infinite}
@keyframes teeth{to{background-position:6px 0}}
.mc-chip2{position:absolute;top:52%;width:11px;height:15px;border-radius:1px;
  background:linear-gradient(140deg,#CFE0CB,#7FAE8B 45%,#3F7355);
  box-shadow:0 2px 5px -1px rgba(0,0,0,.5);opacity:0;
  animation:chipFall 2.8s linear infinite}
.mc-chip2.k1{left:20%;animation-delay:0s}   .mc-chip2.k2{left:32%;animation-delay:.35s}
.mc-chip2.k3{left:45%;animation-delay:.75s} .mc-chip2.k4{left:57%;animation-delay:1.2s}
.mc-chip2.k5{left:69%;animation-delay:1.7s} .mc-chip2.k6{left:79%;animation-delay:2.2s}
@keyframes chipFall{
  0%{opacity:0;transform:translateY(0) rotate(0) scaleY(1)}
  10%{opacity:1}
  50%{transform:translateY(28px) rotate(150deg) scaleY(.3)}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(62px) rotate(320deg) scaleY(1)}
}

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:100px;border:1px solid transparent;overflow:hidden;
  font-size:14px;font-weight:650;letter-spacing:.01em;
  transition:transform 260ms var(--e-spring),box-shadow 260ms,background 260ms,border-color 260ms,color 260ms}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.96)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 60%);
  transition:opacity 400ms}
.btn:hover::after{opacity:1}
.btn-lg{width:100%;padding:16px 24px;font-size:15px}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 22px -10px var(--accent)}
.btn-primary:hover{box-shadow:0 12px 30px -10px var(--accent)}
.btn-gold{background:linear-gradient(120deg,var(--gold-400),var(--gold-500));color:#241A05;
  box-shadow:0 8px 24px -10px var(--gold-500)}
.btn-gold .i-heart{fill:currentColor;stroke:none}
.btn-ember{background:linear-gradient(120deg,var(--ember-mid),var(--ember-lo));color:#2A1004;
  box-shadow:0 8px 24px -10px var(--ember-mid)}
.btn-ember .i-flame{fill:currentColor;stroke:none}
.btn-ghost{background:var(--surf-2);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--surf-3);border-color:var(--line-2)}
.btn-danger{color:var(--red);margin-top:34px;width:100%}
.btn-danger:hover{background:rgba(225,82,61,.1);border-color:rgba(225,82,61,.4)}
.link-btn{font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:4px;
  transition:color var(--t2)}
.link-btn:hover{color:var(--ink)}

/* ── TAB BAR ────────────────────────────────────────────────────────── */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--tab-h);
  padding:0 max(10px,var(--safe-l)) var(--safe-b) max(10px,var(--safe-r));
  display:flex;align-items:center;
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-top:1px solid var(--line);
  transition:transform var(--t3) var(--e-out)}
body[data-screen="stage"] #tabbar{transform:translateY(110%)}
.tab{flex:1;display:grid;justify-items:center;gap:4px;padding:8px 0;color:var(--ink-3);
  position:relative;z-index:1;transition:color var(--t2)}
.tab svg{width:22px;height:22px;transition:transform 380ms var(--e-spring)}
.tab span{font-size:10px;font-weight:650;letter-spacing:.02em}
.tab.is-active{color:var(--accent)}
.tab.is-active svg{transform:translateY(-2px) scale(1.06)}
.tab:active svg{transform:scale(.86)}
.tab-pill{position:absolute;top:6px;height:calc(100% - 12px - var(--safe-b));border-radius:16px;
  background:var(--accent-soft);transition:transform 520ms var(--e-out),width 520ms var(--e-out);pointer-events:none}

/* ── CARD LIST / ROWS / SWITCH / SEG ────────────────────────────────── */
.card-list{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surf);overflow:hidden}
.row{display:flex;align-items:center;gap:16px;padding:15px 17px;border-bottom:1px solid var(--line);cursor:pointer}
.row:last-child{border-bottom:0}
.row-txt{flex:1;display:grid;gap:3px;min-width:0}
.row-txt b{font-size:14.5px;font-weight:600}
.row-txt i{font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.45}
.row-seg{flex-wrap:wrap}
.switch{position:relative;flex:none;width:48px;height:29px}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch i{position:absolute;inset:0;border-radius:100px;background:var(--surf-3);
  border:1px solid var(--line);transition:background var(--t2),border-color var(--t2)}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:var(--ink-3);box-shadow:var(--shadow-1);
  transition:transform 340ms var(--e-spring),background var(--t2),width 200ms}
.switch input:checked + i{background:var(--accent);border-color:transparent}
.switch input:checked + i::after{transform:translateX(19px);background:#fff}
.switch input:active + i::after{width:26px}
.seg{display:flex;gap:2px;padding:3px;border-radius:100px;background:var(--surf-3);border:1px solid var(--line)}
.seg button{padding:7px 13px;border-radius:100px;font-size:12.5px;font-weight:600;color:var(--ink-3);
  transition:background var(--t2),color var(--t2)}
.seg button.on{background:var(--surf);color:var(--ink);box-shadow:var(--shadow-1)}

/* ── VAULT ──────────────────────────────────────────────────────────── */
.bigtotal{display:grid;gap:8px;justify-items:center;text-align:center;padding:30px 18px;
  border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surf);
  box-shadow:var(--shadow-2);position:relative;overflow:hidden}
.bigtotal::before{content:"";position:absolute;inset:-50% -20% auto;height:180%;
  background:radial-gradient(60% 60% at 50% 0%,var(--accent-soft),transparent 70%)}
.bt-k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:650;position:relative}
.bt-v{font-family:var(--mono);font-size:clamp(28px,8vw,40px);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;position:relative}
.bt-note{font-family:var(--display);font-style:italic;font-size:14px;color:var(--gold);position:relative}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.stat{padding:15px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surf);display:grid;gap:5px}
.stat b{font-family:var(--mono);font-size:17px;font-weight:650;font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.ach{aspect-ratio:1;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;padding:10px;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surf);position:relative;overflow:hidden;
  transition:transform var(--t2) var(--e-spring),border-color var(--t2)}
.ach:hover{transform:translateY(-2px)}
.ach-ico{font-size:26px;filter:grayscale(1);opacity:.28;transition:filter var(--t3),opacity var(--t3),transform var(--t3) var(--e-spring)}
.ach-n{font-size:10px;font-weight:650;line-height:1.25;color:var(--ink-3)}
.ach.got{border-color:var(--gold-soft);background:linear-gradient(160deg,var(--gold-soft),var(--surf) 60%)}
.ach.got .ach-ico{filter:none;opacity:1;transform:scale(1.06)}
.ach.got .ach-n{color:var(--ink)}

/* the real donation block, always visible now */
.real-give{opacity:0;transform:translateY(18px);
  transition:opacity 700ms var(--e-out),transform 700ms var(--e-out)}
.real-give.in{opacity:1;transform:none}

/* ── SUPPORT ────────────────────────────────────────────────────────── */
.donate-status{margin-top:12px;text-align:center;font-size:12.5px;color:var(--ink-3)}
.alt-give{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surf);overflow:hidden}
.ag-head{padding:13px 17px 4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.ag-row{width:100%;display:flex;align-items:center;gap:14px;padding:14px 17px;text-align:left;
  border-top:1px solid var(--line);transition:background var(--t2)}
.ag-row:hover{background:var(--surf-2)}
.ag-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-size:15px}
.ag-txt{display:grid;gap:2px}
.ag-txt b{font-size:14px;font-weight:600}
.ag-txt i{font-style:normal;font-size:12px;color:var(--ink-3)}

/* ── GIVE FORM / WIDGET ─────────────────────────────────────────────── */
.give-form{display:grid;gap:16px;margin-bottom:16px}
.field-note{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.field label .opt{font-size:9px;letter-spacing:.1em;color:var(--ink-3);opacity:.75;
  text-transform:none;font-weight:600;margin-left:6px}
#giveAmount{font-size:26px}
.widget-wrap{margin:6px 0 18px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--surf-2);box-shadow:var(--shadow-2)}
.widget-wrap iframe{display:block;width:100%;height:462px;border:0}

/* ── LEADERBOARD ────────────────────────────────────────────────────── */
.board-sum{display:flex;align-items:center;gap:2px;padding:16px 4px;margin-bottom:16px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bs-item{flex:1;display:grid;gap:5px;text-align:center;min-width:0}
.bs-k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.bs-v{font-family:var(--mono);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}

.you{display:flex;align-items:center;gap:13px;padding:14px 16px;margin-bottom:16px;
  border-radius:var(--r-lg);border:1.5px solid var(--gold);
  background:linear-gradient(120deg,var(--gold-soft),var(--surf) 70%);
  box-shadow:var(--shadow-2);animation:panelIn 520ms var(--e-out)}
.you-rank{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;flex:none}
.you-txt{flex:1;display:grid;gap:2px;min-width:0}
.you-txt b{font-size:14.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-txt i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.you-tag{flex:none;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border-radius:100px;background:var(--gold);color:#241A05}

.board{list-style:none;display:grid;gap:5px;counter-reset:b}
.row-b{display:flex;align-items:center;gap:13px;padding:12px 15px;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surf);
  transition:transform var(--t2) var(--e-out),border-color var(--t2)}
.row-b:hover{transform:translateX(3px);border-color:var(--line-2)}
.b-rank{flex:none;min-width:34px;font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.b-name{flex:1;font-size:14px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-amt{flex:none;font-family:var(--mono);font-size:13.5px;font-weight:650;
  font-variant-numeric:tabular-nums}
.row-b.is-top .b-rank{font-size:17px}
.row-b.is-top:nth-child(1){border-color:var(--gold);
  background:linear-gradient(120deg,var(--gold-soft),var(--surf) 62%)}
.row-b.is-top:nth-child(1) .b-amt{color:var(--gold)}
.row-b.is-top:nth-child(2),.row-b.is-top:nth-child(3){border-color:var(--line-2)}
.row-b.is-me{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.row-b.is-me .b-amt{color:var(--accent)}

.board-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:44px 20px;
  border-radius:var(--r-lg);border:1px dashed var(--line-2);background:var(--surf)}
.be-ico{font-size:34px;opacity:.5}
.board-empty b{font-size:15px}
.board-empty p{font-size:13px;color:var(--ink-3);max-width:34ch;line-height:1.6}

/* ── LEADERBOARD · COMING SOON ──────────────────────────────────────────
   Shown only while no backend is configured. The ghost rows are the point:
   an empty promise reads as nothing, but a blurred podium reads as a table
   that exists and is about to be filled in. */
.board-soon{position:relative;overflow:hidden;
  display:grid;justify-items:center;gap:11px;text-align:center;
  padding:32px 22px 28px;
  border-radius:var(--r-xl);border:1.5px dashed var(--line-2);
  background:linear-gradient(160deg,var(--gold-soft),var(--surf) 62%)}
.board-soon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  transform:translateX(-110%);animation:sheen 7s var(--e-io) 1.5s infinite}
.bsoon-badge{font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;
  background:var(--gold);color:#241A05;position:relative}
.bsoon-teaser{font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(21px,5.6vw,27px);line-height:1.22;letter-spacing:-.01em;
  color:var(--ink);position:relative;margin-top:2px}
.bsoon-sub{font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:36ch;position:relative}

.bsoon-ghost{list-style:none;width:100%;max-width:308px;display:grid;gap:7px;
  margin-top:8px;position:relative}
.bsoon-ghost li{display:flex;align-items:center;gap:11px;padding:10px 13px;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surf);
  opacity:.62}
.bsoon-rank{flex:none;font-size:15px;line-height:1;filter:grayscale(1);opacity:.7}
.bsoon-bar{flex:1;height:8px;border-radius:8px;background:var(--line-2);
  animation:bsoonPulse 2.8s var(--e-io) infinite}
.bsoon-amt{flex:none;width:44px;height:8px;border-radius:8px;background:var(--line-2);
  animation:bsoonPulse 2.8s var(--e-io) .5s infinite}
/* uneven bar lengths so it reads as data, not as three identical placeholders */
.bsoon-ghost li:nth-child(2) .bsoon-bar{margin-right:26px}
.bsoon-ghost li:nth-child(3) .bsoon-bar{margin-right:52px}
@keyframes bsoonPulse{0%,100%{opacity:.5}50%{opacity:1}}
html[data-motion="reduced"] .board-soon::after,
html[data-motion="reduced"] .bsoon-bar,
html[data-motion="reduced"] .bsoon-amt{animation:none}

.about{margin-top:34px;text-align:center;display:grid;gap:8px;justify-items:center}
.about-mark{font-family:var(--display);font-size:13px;letter-spacing:.42em;color:var(--ink-3)}
.about-mark em{font-style:normal;color:var(--gold)}
.about p{font-size:12px;color:var(--ink-3)}

/* ═══════════════════════════════════════════════════════════════════════
   STAGES — fullscreen mode surfaces
   ═══════════════════════════════════════════════════════════════════════ */
.stage{position:fixed;inset:0;z-index:70;pointer-events:none}
.stage[hidden]{display:none}
.stage > *{pointer-events:auto}

.stage-panel{position:fixed;inset:0;z-index:2;display:grid;place-items:center;overflow-y:auto;
  padding:calc(20px + var(--safe-t)) calc(var(--gut) + var(--safe-r)) calc(24px + var(--safe-b)) calc(var(--gut) + var(--safe-l));
  background:var(--scrim);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  transition:opacity 460ms var(--e-io)}
.stage-panel[hidden]{display:none}
.stage-panel.out{opacity:0;pointer-events:none}
.panel-card{position:relative;width:min(480px,100%);margin:auto;display:grid;gap:16px;
  padding:26px 24px 24px;border-radius:var(--r-xl);border:1px solid var(--line);
  background:var(--surf);box-shadow:var(--shadow-3);
  animation:panelIn 620ms var(--e-out)}
.panel-card.center{justify-items:center;text-align:center;gap:14px}
@keyframes panelIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.panel-title{font-family:var(--display);font-size:clamp(25px,6.6vw,31px);line-height:1.14;
  letter-spacing:-.015em;font-weight:600}
.panel-title em{font-style:italic;color:var(--ember-mid)}
#spreeSetup .panel-title em{color:var(--gold)}
.panel-sub{font-size:14px;color:var(--ink-2);line-height:1.6}
.close-btn{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;color:var(--ink-3);background:var(--surf-2);transition:color var(--t2),transform var(--t2)}
.close-btn svg{width:17px;height:17px}
.close-btn:hover{color:var(--ink);transform:rotate(90deg)}

/* fields */
.field{display:grid;gap:9px}
.field label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
.field input{width:100%;background:var(--surf-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 15px;font-size:15px;transition:border-color var(--t2),background var(--t2)}
.field input:focus{border-color:var(--accent);background:var(--surf-3)}
.field input::placeholder{color:var(--ink-3);opacity:.7}
.amount-line{display:flex;align-items:center;gap:2px;background:var(--surf-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:6px 15px;transition:border-color var(--t2)}
.amount-line:focus-within{border-color:var(--ember-mid)}
.amount-line .cur{font-family:var(--mono);font-size:24px;color:var(--ink-3);font-weight:600}
.amount-line input{background:none;border:0;padding:8px 0 8px 4px;font-family:var(--mono);
  font-size:30px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#burnReason{font-family:var(--display);font-style:italic;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:7px 12px;border-radius:100px;border:1px solid var(--line);background:var(--surf-2);
  font-family:var(--mono);font-size:12px;color:var(--ink-2);
  transition:color var(--t2),border-color var(--t2),background var(--t2),transform 200ms var(--e-spring)}
.chip:hover{color:var(--ink);border-color:var(--line-2)}
.chip:active{transform:scale(.93)}
.chip.word{font-family:var(--display);font-style:italic;font-size:12.5px}

.preview-wrap{position:relative;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-2);
  border:1px solid var(--line);background:#0a0c0b}
.preview-wrap canvas{width:100%;height:auto;display:block}
.preview-shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 40%,rgba(255,255,255,.26) 50%,transparent 60%);
  transform:translateX(-110%);animation:sheen 5.5s var(--e-io) 1s infinite}

/* HUD */
.stage-hud{position:fixed;inset:0;z-index:3;pointer-events:none}
.stage-hud[hidden]{display:none}
.stage-hud > *{pointer-events:auto}
/* the bar is only a layout box — letting it swallow taps would create a
   dead strip across the top of RAIN where the cannon does not fire */
.hud-top{position:absolute;top:var(--safe-t);left:0;right:0;padding:12px calc(var(--gut) + var(--safe-r)) 0 calc(var(--gut) + var(--safe-l));
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;pointer-events:none}
.hud-btn{pointer-events:auto;display:inline-flex;align-items:center;gap:5px;padding:9px 15px 9px 11px;border-radius:100px;
  font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);transition:color var(--t2),transform var(--t2) var(--e-spring)}
.hud-btn svg{width:16px;height:16px}
.hud-btn:hover{color:var(--ink)}
.hud-btn:active{transform:scale(.94)}
.hud-btn-r{padding:9px 13px}
.hud-meta{text-align:right;display:grid;gap:3px;pointer-events:none}
.hud-amt{font-family:var(--mono);font-size:14px;font-weight:650;color:var(--ink)}
.hud-why{font-family:var(--display);font-style:italic;font-size:13px;color:var(--ink-3);max-width:34ch}
.hud-hint{position:absolute;left:50%;bottom:calc(150px + var(--safe-b));transform:translateX(-50%);
  padding:9px 16px;border-radius:100px;white-space:nowrap;pointer-events:none;
  font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);transition:opacity 480ms var(--e-io),transform 480ms var(--e-out)}
.hud-hint.dim{opacity:0;transform:translateX(-50%) translateY(6px)}
.hud-bottom{position:absolute;left:0;right:0;bottom:0;
  padding:0 calc(var(--gut) + var(--safe-r)) calc(18px + var(--safe-b)) calc(var(--gut) + var(--safe-l));
  display:grid;gap:12px;justify-items:end}
.hud-chip{padding:10px 16px;border-radius:100px;font-size:11px;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 460ms var(--e-out),transform 460ms var(--e-out),color var(--t2),border-color var(--t2)}
.hud-chip.show{opacity:1;transform:none;pointer-events:auto}
.hud-chip.on{color:#7FB8AE;border-color:rgba(127,184,174,.55);background:rgba(127,184,174,.12)}
.burn-meter{width:100%;display:grid;gap:6px}
.bm-track{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.bm-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform;
  background:linear-gradient(90deg,var(--ember-lo),var(--ember-mid) 60%,var(--ember-hi));
  box-shadow:0 0 16px rgba(255,122,31,.65)}
.bm-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);text-align:right}

/* release */
.rel-amount{font-family:var(--mono);font-size:clamp(30px,9vw,50px);font-weight:700;letter-spacing:-.02em;
  color:var(--ink-3);position:relative;display:inline-block}
.rel-amount::after{content:"";position:absolute;left:-5%;top:52%;height:2px;width:0;border-radius:2px;
  background:var(--ember-mid);box-shadow:0 0 12px var(--ember-lo)}
.rel-amount.struck::after{width:110%;transition:width 900ms var(--e-out) .3s}
.rel-reason{font-family:var(--display);font-style:italic;font-size:19px;line-height:1.5}
.rel-note{font-size:13px;line-height:1.75;color:var(--ink-2);max-width:34ch}
.rel-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.rise{opacity:0;transform:translateY(14px)}
.rise.in{opacity:1;transform:none;transition:opacity 760ms var(--e-out),transform 760ms var(--e-out)}

/* ── HAVANA / SHRED HUD ─────────────────────────────────────────────── */
.bm-fill-cigar{background:linear-gradient(90deg,#5E4426,var(--ember-mid) 72%,var(--ember-hi))}
#s-shred .hud-top{align-items:center}
.shred-readout{text-align:right;pointer-events:none}
.sr-total{font-family:var(--mono);font-size:clamp(23px,6.6vw,32px);font-weight:700;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.sr-sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:5px;letter-spacing:.04em}
#shredHint{transition:opacity 620ms var(--e-io),transform 480ms var(--e-out)}
#shredHint.gone{opacity:0}

/* ── SPREE ──────────────────────────────────────────────────────────── */
.fortunes{display:grid;gap:9px;margin-top:6px}
.fortune{display:flex;align-items:center;gap:14px;padding:15px 17px;text-align:left;
  border-radius:var(--r-lg);border:1.5px solid var(--line);background:var(--surf-2);
  transition:transform 260ms var(--e-spring),border-color var(--t2),background var(--t2)}
.fortune:hover{transform:translateX(4px);border-color:var(--gold);background:var(--surf-3)}
.fortune:active{transform:scale(.98)}
.f-emoji{font-size:26px;flex:none}
.f-txt{flex:1;display:grid;gap:2px}
.f-name{font-size:14px;font-weight:650}
.f-desc{font-size:11.5px;color:var(--ink-3)}
.f-amt{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--gold)}

.spree-main{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;
  background:var(--bg);overflow:hidden}
.spree-main[hidden]{display:none}
.spree-bar{position:relative;flex:none;display:flex;align-items:center;gap:12px;
  padding:calc(12px + var(--safe-t)) calc(var(--gut) + var(--safe-r)) 14px calc(var(--gut) + var(--safe-l));
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);z-index:2}
.sb-balance{flex:1;display:grid;gap:2px;text-align:center;min-width:0}
.sb-k{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.sb-v{font-family:var(--mono);font-size:clamp(19px,5.6vw,25px);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;transition:color 300ms}
.sb-v.flash{color:var(--gold)}
#spreeReceiptBtn{position:relative;font-family:var(--mono);font-size:12px;gap:6px}
.spree-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--line)}
.sp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
  box-shadow:0 0 12px var(--gold-400);transition:width 620ms var(--e-out)}

.spree-cats{flex:none;min-width:0;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  padding:13px calc(var(--gut) + var(--safe-r)) 4px calc(var(--gut) + var(--safe-l))}
.spree-cats::-webkit-scrollbar{display:none}
.cat{flex:none;padding:8px 15px;border-radius:100px;border:1px solid var(--line);background:var(--surf);
  font-size:12.5px;font-weight:600;color:var(--ink-3);transition:all var(--t2)}
.cat.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.spree-grid{flex:1;min-height:0;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(132px,100%),1fr));
  grid-auto-rows:max-content;gap:10px;align-content:start;
  padding:13px calc(var(--gut) + var(--safe-r)) calc(30px + var(--safe-b)) calc(var(--gut) + var(--safe-l))}
.item{position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:7px;padding:32px 11px 12px;min-height:184px;
  text-align:center;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf);
  transition:transform 300ms var(--e-out),border-color var(--t2),box-shadow 300ms,opacity var(--t2)}
.item:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.item.poor{opacity:.78}
.item.poor .it-buy{background:var(--surf-3);color:var(--ink-3);box-shadow:none}
.item.shake{animation:shakeX 400ms}
@keyframes shakeX{
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-7px)} 30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)} 60%{transform:translateX(3px)} 80%{transform:translateX(-1px)}
}
.item.bought{animation:boughtPop 520ms var(--e-out)}
@keyframes boughtPop{
  0%{transform:scale(1)} 26%{transform:scale(1.055);box-shadow:0 0 0 2px var(--gold)}
  100%{transform:scale(1)}
}
.it-medal{flex:none;width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;border-radius:16px;
  background:radial-gradient(120% 120% at 30% 20%,var(--surf-3),var(--surf-2));
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.it-name{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  width:100%;font-size:12.5px;font-weight:650;line-height:1.32;
  overflow-wrap:anywhere;hyphens:auto}
.it-price{flex:none;display:block;width:100%;
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.it-buy{flex:none;display:block;width:100%;padding:9px 6px;
  border-radius:100px;background:var(--accent);color:var(--accent-ink);
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  transition:transform 200ms var(--e-spring),background var(--t2)}
.it-buy:active{transform:scale(.94)}
.it-count{position:absolute;top:8px;right:8px;min-width:23px;height:23px;padding:0 6px;
  display:grid;place-items:center;border-radius:100px;z-index:2;
  background:var(--gold);color:#241A05;font-family:var(--mono);font-size:11px;font-weight:700;
  transform:scale(0);transition:transform 320ms var(--e-spring)}
.item.owned .it-count{transform:scale(1)}
.it-sell{position:absolute;top:8px;left:8px;width:23px;height:23px;
  display:grid;place-items:center;z-index:2;
  border-radius:50%;background:var(--surf-3);color:var(--ink-3);font-size:15px;line-height:1;
  opacity:0;transform:scale(.6);transition:all 260ms var(--e-spring)}
.item.owned .it-sell{opacity:1;transform:scale(1)}
.it-sell:hover{background:var(--red);color:#fff}
.spree-foot{flex:none;padding:0 var(--gut) calc(10px + var(--safe-b));text-align:center;
  font-size:11px;color:var(--ink-3)}

/* receipt sheet */
.sheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);animation:fadeIn 320ms}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet-body{position:relative;width:min(480px,100%);max-height:88vh;display:flex;flex-direction:column;
  gap:14px;padding:10px 18px calc(18px + var(--safe-b));
  background:var(--surf);border-radius:var(--r-xl) var(--r-xl) 0 0;border:1px solid var(--line);
  box-shadow:var(--shadow-3);animation:sheetUp 460ms var(--e-out)}
@keyframes sheetUp{from{transform:translateY(102%)}to{transform:none}}
.sheet-grab{width:38px;height:4px;border-radius:4px;background:var(--line-2);margin:2px auto 6px;flex:none}
.sheet-actions{display:flex;gap:9px;flex:none}
.sheet-actions .btn{flex:1}
.receipt{flex:1;min-height:0;overflow-y:auto;padding:20px 18px;border-radius:var(--r-md);
  background:var(--surf-2);border:1px dashed var(--line-2);font-family:var(--mono);font-size:12px}
.rc-head{text-align:center;display:grid;gap:4px}
.rc-logo{font-family:var(--display);font-size:20px;letter-spacing:.3em;font-weight:700}
.rc-sub{font-size:9px;letter-spacing:.18em;color:var(--ink-3)}
.rc-meta{font-size:10px;color:var(--ink-3);margin-top:6px;line-height:1.6}
.rc-rule{height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px);margin:14px 0}
.rc-list{display:grid;gap:7px}
.rc-line{display:flex;gap:8px;align-items:baseline}
.rc-line .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-line .q{color:var(--ink-3)}
.rc-line .p{font-variant-numeric:tabular-nums}
.rc-totals{display:grid;gap:6px}
.rc-totals .rc-line.big{font-size:15px;font-weight:700}
.rc-barcode{height:44px;margin:16px 0 8px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,
    transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px);opacity:.8}
.rc-thanks{text-align:center;font-size:9px;letter-spacing:.2em;color:var(--ink-3)}
.done-emoji{font-size:52px;animation:chipBob 2.4s var(--e-io) infinite alternate}

/* ── ODOMETER ───────────────────────────────────────────────────────── */
.odo{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums}
.od-c{display:inline-block;white-space:pre}
.od-d{min-width:.62em;text-align:center}
.od-roll{animation:odRoll 340ms var(--e-out)}
@keyframes odRoll{
  0%{transform:translateY(52%) scale(.86);opacity:0;filter:blur(2px)}
  55%{filter:blur(0)}
  100%{transform:none;opacity:1}
}

/* ── TOASTS ─────────────────────────────────────────────────────────── */
#toasts{position:fixed;left:0;right:0;top:calc(var(--safe-t) + 8px);z-index:150;
  display:grid;gap:8px;justify-items:center;pointer-events:none;padding:0 12px}
.toast{display:flex;align-items:center;gap:11px;max-width:min(420px,94vw);
  padding:11px 17px 11px 13px;border-radius:100px;
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--line);box-shadow:var(--shadow-2);
  animation:toastIn 520ms var(--e-out)}
.toast.out{animation:toastOut 380ms var(--e-io) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-12px) scale(.96)}}
.toast-ico{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--gold-soft);font-size:15px}
.toast-txt{display:grid;gap:1px;min-width:0}
.toast-txt b{font-size:13px;font-weight:650}
.toast-txt i{font-style:normal;font-size:11.5px;color:var(--ink-3)}

/* ── ROTATE / NOSCRIPT ──────────────────────────────────────────────── */
#rotate{position:fixed;inset:0;z-index:300;display:none;place-items:center;text-align:center;
  background:var(--bg);padding:30px}
#rotate div{display:grid;gap:8px}
#rotate b{font-family:var(--display);font-size:22px}
#rotate span{font-size:13px;color:var(--ink-3)}
.noscript{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);
  color:var(--ink);font-family:var(--sans);padding:30px;text-align:center;z-index:400}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (min-width:640px){
  :root{--gut:28px}
  .wrap{width:min(720px,100%)}
  .modes{grid-template-columns:1fr 1fr}
  .modecard:first-child{grid-column:1/-1}
  .mc-art{height:150px}
  .tiers{grid-template-columns:repeat(4,1fr)}
  .statgrid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:900px){
  .wrap{width:min(880px,100%)}
  #tabbar{left:50%;right:auto;bottom:20px;transform:translateX(-50%);width:auto;height:64px;
    padding:0 8px;border-radius:100px;border:1px solid var(--line);box-shadow:var(--shadow-3)}
  body[data-screen="stage"] #tabbar{transform:translateX(-50%) translateY(180%)}
  .tab{padding:8px 22px}
  :root{--tab-h:104px}
  .modes{grid-template-columns:repeat(3,1fr)}
  .modecard:first-child{grid-column:auto}
  .spree-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
}
@media (max-height:460px) and (orientation:landscape) and (pointer:coarse){
  #rotate{display:grid}
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html[data-motion="reduced"] #ambient,
html[data-motion="reduced"] .mc-ember,
html[data-motion="reduced"] .mc-bill,
html[data-motion="reduced"] .mc-sheen,
html[data-motion="reduced"] .preview-shine{animation:none;opacity:.001}
html[data-motion="reduced"] .mc-chip{animation:none}


/* ═══════════════════════════════════════════════════════════════════════
   ADDITIONS — spree card art, purchase ticker, tappable toasts
   ═══════════════════════════════════════════════════════════════════════ */

/* spree card art */
.mc-spree .mc-glow{background:radial-gradient(70% 90% at 50% 40%,var(--gold-500),transparent 68%)}
.mc-spree .mc-cta{color:var(--gold)}
.mc-sheen{position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  transform:translateX(-100%);animation:sheen 4.6s var(--e-io) infinite}
.mc-chip{position:absolute;width:44px;height:44px;display:grid;place-items:center;font-size:20px;
  border-radius:50%;background:var(--surf-2);border:1px solid var(--line-2);
  box-shadow:var(--shadow-2);animation:chipBob 5s var(--e-io) infinite alternate}
.mc-chip.c1{left:16%;top:22%}
.mc-chip.c2{left:38%;top:52%;animation-delay:-1.2s}
.mc-chip.c3{left:60%;top:20%;animation-delay:-2.4s}
.mc-chip.c4{left:80%;top:50%;animation-delay:-3.6s}

/* spree grid entrance — staggered, capped in spree.js so the last row
   never arrives after the user has started reading */
.spree-grid .item{animation:itemIn 420ms var(--e-out) both;animation-delay:var(--d,0ms)}
@keyframes itemIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.item{transition:transform 300ms var(--e-out),border-color var(--t2),box-shadow 300ms,opacity 340ms}

/* "just bought" ticker in the spree footer */
.spree-foot{transition:opacity var(--t2)}
.spree-foot.tk-in{animation:tkIn 320ms var(--e-out)}
@keyframes tkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tk-e{font-size:15px;margin-right:7px}
.tk-n{font-weight:650;color:var(--ink)}
.tk-p{font-family:var(--mono);font-weight:700;color:var(--gold);margin-left:8px}

/* a toast that can be acted on */
.toast.is-tappable{cursor:pointer;pointer-events:auto;
  transition:transform 220ms var(--e-spring),border-color var(--t2)}
.toast.is-tappable:hover{transform:translateY(2px) scale(1.02);border-color:var(--gold)}
.toast.is-tappable:active{transform:scale(.97)}
.toast.is-tappable .toast-ico{background:var(--gold-soft)}

/* leaderboard heading inside the donate page */
#boardHead{margin-top:42px}

/* ── "TRY IT FOR REAL" ──────────────────────────────────────────────────
   The joke only works if it is offered, never demanded: no scrim, no timer,
   nothing to dismiss. It sits in the flow like any other card and is very
   easy to scroll straight past. */
.cta-real{width:100%;display:flex;align-items:center;gap:13px;text-align:left;
  margin-top:26px;padding:15px 16px;position:relative;overflow:hidden;
  border-radius:var(--r-lg);border:1.5px solid var(--gold-soft);
  background:linear-gradient(120deg,var(--gold-soft),var(--surf) 62%);
  transition:transform 280ms var(--e-spring),border-color var(--t2),box-shadow 280ms}
.cta-real:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow-2)}
.cta-real:active{transform:scale(.985)}
.cta-real::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  transform:translateX(-110%);animation:sheen 6.5s var(--e-io) 2s infinite}
.cr-ico{flex:none;width:40px;height:40px;display:grid;place-items:center;font-size:21px;
  border-radius:12px;background:var(--surf-2);border:1px solid var(--line)}
.cr-txt{flex:1;display:grid;gap:2px;min-width:0}
.cr-txt b{font-size:14.5px;font-weight:700}
.cr-txt i{font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.45}
.cr-go{flex:none;font-size:17px;color:var(--gold);transition:transform 320ms var(--e-out)}
.cta-real:hover .cr-go{transform:translateX(4px)}

/* the compact version used on the finish panels */
.cta-slim{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  padding:9px 16px;border-radius:100px;
  border:1px solid var(--gold-soft);background:var(--gold-soft);
  font-size:12.5px;font-weight:650;color:var(--gold);
  transition:transform 240ms var(--e-spring),background var(--t2),border-color var(--t2)}
.cta-slim:hover{background:var(--gold);color:#241A05;border-color:var(--gold)}
.cta-slim:active{transform:scale(.95)}
html[data-motion="reduced"] .cta-real::after{animation:none;opacity:0}

/* ── DONATE FORM ────────────────────────────────────────────────────── */
.give-form{display:grid;gap:14px;margin:18px 0}
.field-note{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.chips-amount{justify-content:center}
.chips-amount .chip{min-width:62px;justify-content:center;font-size:13px;padding:9px 14px}
.chip.on{background:var(--gold);border-color:var(--gold);color:#241A05;font-weight:700}
.donate-as{margin-top:10px;text-align:center;font-size:12.5px;color:var(--ink-2)}
.i-coin{stroke-width:1.6}

/* the leaderboard heading, now living on the donate page */
#boardHead{margin-top:44px}

/* an unaffordable card says so through its price and button, not by fading
   the whole thing until the text is unreadable */
.item.poor .it-price{color:var(--red);opacity:.85}
.item.poor .it-medal{filter:saturate(.55)}
.spree-grid .item{animation:itemIn 360ms var(--e-out) both;animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .spree-grid .item{animation-delay:.01ms!important}
}
html[data-motion="reduced"] .spree-grid .item{animation:none}

/* spree columns step up with room, floors guarded by min() so a narrow
   viewport can never produce a column wider than the screen */
@media (min-width:600px){
  .spree-grid{grid-template-columns:repeat(auto-fill,minmax(min(158px,100%),1fr))}
}
@media (min-width:900px){
  .spree-grid{grid-template-columns:repeat(auto-fill,minmax(min(178px,100%),1fr))}
}