/* Chubby Premium: futuristic Thanksgiving. Obsidian, champagne gold, copper and neon cranberry; frosted glass panels and a glowing grid */
:root{
  --bg:#0b0807; --panel:#17110e; --panel2:#221a14; --line:#f3d08a24; --hair:#f3d08a45; --text:#f6ecdf; --muted:#b8a690;
  --gold:#f3c06a; --champ:#ffe3a3; --copper:#e0873e; --cran:#ff5c7a; --pumpkin:#f39a4f; --leaf:#8fd16a; --field:#8c7660; --ink:#050302;
  --glass:linear-gradient(160deg,rgba(34,25,19,.86),rgba(14,10,8,.9));
  --gold-grad:linear-gradient(135deg,#fff0c8 0%,#f3c06a 42%,#e0873e 100%);
  --holo:linear-gradient(90deg,#ffe3a3,#f3a35b,#ff5c7a,#f3a35b,#ffe3a3);
  --leaf-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 4L35 17 44 12 42 24 54 25 46 33 52 40 40 40 32 42 32 56 28 56 28 42 20 40 8 40 14 33 6 25 18 24 16 12 25 17Z' fill='%23f3c06a'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--text);font:500 15px/1.6 Manrope,system-ui,sans-serif;background:radial-gradient(#ffffff0c 1px,transparent 1.3px) 0 0/24px 24px,var(--bg)}
/* slow aurora of harvest colours behind everything */
body::before{content:'';position:fixed;inset:-25%;z-index:-1;pointer-events:none;animation:aurora 26s ease-in-out infinite alternate;
  background:radial-gradient(38% 32% at 18% 12%,#e0873e2e,transparent 70%),radial-gradient(34% 30% at 86% 18%,#ff5c7a22,transparent 70%),radial-gradient(46% 40% at 50% 96%,#f3c06a1c,transparent 70%)}
@keyframes aurora{to{transform:translate(4%,3%) rotate(6deg)}}
h1,h2,h3,.big,.otitle b,.fbrand,.brand>span,.tier-head strong,.rword,.spin-title,.scoop{font-family:Unbounded,Manrope,system-ui,sans-serif}
.demo-ribbon{position:sticky;top:0;z-index:15;text-align:center;font-size:12px;font-weight:800;letter-spacing:.4px;padding:6px 16px;color:#1a0f08;background:linear-gradient(90deg,#f3c06a,#ffe3a3 50%,#f3c06a)}
a{color:var(--gold)}
button{font:inherit;cursor:pointer}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
header{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;font-size:16px}
.brand img{filter:drop-shadow(0 0 8px #f3c06a55)}
.brand small{display:block;font:800 10px Manrope,sans-serif;color:var(--muted);letter-spacing:3px}
.brand b{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pill{background:#ffffff0a;border:1px solid var(--hair);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;backdrop-filter:blur(8px)}
.pill i{font-style:normal;color:var(--champ)}
/* latest prizes: an LED news strip */
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);background:#07050480;font-size:13px;color:var(--muted);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:inline-block;padding:8px 0;animation:tick 40s linear infinite}
.ticker-track>span{margin-right:40px}
.ticker-track>span b{color:var(--champ)}
.ticker .badge{font-size:11px;margin-left:4px;padding:1px 8px 1px 5px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* rarity badge: tier name + a 5-bar meter, more bars lit = rarer */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:999px;font-weight:800;font-size:12px;white-space:nowrap;color:var(--c);
  background:color-mix(in srgb,var(--c) 13%,#0b0807);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--c) 22%,transparent)}
.pips{display:inline-flex;align-items:flex-end;gap:2px;height:12px;color:var(--c)}
.pips i{width:3px;border-radius:2px;background:currentColor;opacity:.25}
.pips i:nth-child(1){height:4px}.pips i:nth-child(2){height:6px}.pips i:nth-child(3){height:8px}.pips i:nth-child(4){height:10px}.pips i:nth-child(5){height:12px}
.pips i.on{opacity:1;box-shadow:0 0 4px currentColor}

/* hero: a dark showroom with a glowing grid floor */
.hero{margin:22px 0;display:grid;grid-template-columns:1fr 1.1fr;gap:16px;align-items:center;position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 72% 45%,#e0873e2e 0,transparent 55%),linear-gradient(160deg,#1d1511,#0c0807);
  border:1px solid var(--hair);border-radius:28px;padding:32px;box-shadow:0 30px 80px #000c,inset 0 1px 0 #ffffff14}
.hero::before{content:'';position:absolute;z-index:-1;left:-30%;right:-30%;bottom:-6%;height:52%;transform:perspective(360px) rotateX(64deg);transform-origin:50% 100%;
  background:linear-gradient(#f3c06a30 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,#f3c06a30 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:linear-gradient(transparent,#000 75%);mask-image:linear-gradient(transparent,#000 75%);animation:floor 3s linear infinite}
@keyframes floor{to{background-position:0 44px,0 0}}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:0 0 14px;
  padding:5px 12px 5px 9px;border:1px solid var(--hair);border-radius:999px;background:#f3c06a0d}
.kicker::before{content:'';width:14px;height:14px;background:var(--leaf-icon) center/contain no-repeat;filter:drop-shadow(0 0 4px #f3c06a)}
.hero h1{font-size:52px;line-height:1.02;margin:0 0 14px;font-weight:800;letter-spacing:-1.5px}
.hero h1 span{background:var(--holo) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo 6s linear infinite;filter:drop-shadow(0 0 18px #f3a35b55)}
@keyframes holo{to{background-position:200% 0}}
.hero p{color:var(--muted);margin:0 0 20px;max-width:430px}
/* primary button: polished gold with a sweeping sheen */
.scoop{position:relative;overflow:hidden;background:var(--gold-grad);color:#1a0f08;border:0;border-radius:999px;padding:15px 30px;font-weight:700;font-size:15px;letter-spacing:.3px;
  box-shadow:0 0 0 1px #fff3d066 inset,0 10px 30px #e0873e55,0 0 0 4px #f3c06a14;transition:transform .15s,box-shadow .2s}
.scoop::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffffa0 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.scoop:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 0 1px #fff3d099 inset,0 14px 40px #e0873e88,0 0 0 5px #f3c06a26}
.scoop:disabled{filter:grayscale(.8);opacity:.45;cursor:not-allowed}
.scoop:disabled::after{display:none}
.scoop:active:not(:disabled){transform:translateY(1px)}
.fine{font-size:12px;color:var(--muted);margin-top:14px}
/* the pot sits on a glowing induction plinth */
.stage{position:relative;min-height:300px;align-self:end}
.stage::before{content:'';position:absolute;left:12%;right:8%;bottom:4%;height:16%;border-radius:50%;border:1px solid #ffd28a66;
  background:radial-gradient(ellipse,#ffb54740 0,#e0873e14 50%,transparent 72%);box-shadow:0 0 40px #e0873e55,inset 0 0 24px #ffb54733;animation:plinth 3.2s ease-in-out infinite}
.stage::after{content:'';position:absolute;left:4%;right:0;bottom:0;height:24%;border-radius:50%;border:1px dashed #f3c06a40}
@keyframes plinth{50%{box-shadow:0 0 70px #e0873e88,inset 0 0 30px #ffb5474d}}
.stage>svg{position:relative;width:100%;height:auto;display:block;filter:drop-shadow(0 14px 24px #000a)}
.steam path{fill:none;stroke:#fff1dc;stroke-width:7;stroke-linecap:round;opacity:.4;animation:rise 2.6s ease-in-out infinite;filter:drop-shadow(0 0 6px #ffe3a3)}
.steam path:nth-child(2){animation-delay:.6s}.steam path:nth-child(3){animation-delay:1.2s}
@keyframes rise{0%{transform:translateY(14px);opacity:0}40%{opacity:.45}100%{transform:translateY(-26px);opacity:0}}
.ladle,.ladle-wake{transform-origin:300px 40px}
/* stir: the ladle sinks deeper and sweeps through the broth; the bowl stays hidden under the surface */
.stirring .ladle{animation:stir .9s ease-in-out}
@keyframes stir{30%{transform:translate(-95px,12px) rotate(-5deg)}65%{transform:translate(-45px,16px) rotate(3deg)}}
/* the ripple slides along the surface to wherever the handle meets the broth (measured from the stir keyframes) */
.stirring .ladle-wake{animation:wakestir .9s ease-in-out}
@keyframes wakestir{30%{transform:translate(-79px,-3px)}65%{transform:translate(-42px,-3px)}}
.ladle-wake ellipse{transform-box:fill-box;transform-origin:center;animation:wake 1.6s ease-out infinite}
.stirring .ladle-wake ellipse{animation-duration:.45s}
@keyframes wake{0%{transform:scale(.5);opacity:.75}100%{transform:scale(1.7);opacity:0}}
.bob{animation:bob 3s ease-in-out infinite}
.bob:nth-of-type(2n){animation-delay:-1.4s}
@keyframes bob{50%{transform:translateY(-4px)}}
.guide{position:absolute;left:0;bottom:2%;width:24%;z-index:2}
.guide .mascot{display:block;animation:bob 3s ease-in-out infinite}
.guide img{width:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
/* Thanksgiving costume layered over the Halloween sprites: tail fan behind, scarf and prop in front */
.mascot{position:relative;display:inline-block}
.mascot img{position:relative;z-index:1;display:block}
.mascot .tail{position:absolute;z-index:0;top:-14%;left:50%;height:90%;aspect-ratio:200/120;transform:translateX(-50%);overflow:visible}
.mascot .scarf,.mascot .prop{position:absolute;z-index:2;transform:translate(-50%,-50%);overflow:visible}
.mascot .scarf{aspect-ratio:100/40}
.mascot .prop{aspect-ratio:1;filter:drop-shadow(0 0 0 #fff2d6) drop-shadow(1px 1px 0 #fff2d6) drop-shadow(-1px -1px 0 #fff2d6)}
.bubble,.quip{background:rgba(20,15,12,.92);border:1px solid var(--hair);border-radius:12px;box-shadow:0 8px 24px #000a,0 0 16px #f3c06a1f;font-weight:700;color:var(--text);backdrop-filter:blur(8px)}
.bubble{position:absolute;z-index:3;left:0;bottom:112%;margin-bottom:6px;padding:6px 10px;font-size:12px;width:max-content;max-width:190px}
.bubble b{color:var(--gold)}
.seat{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);margin:0;text-align:center;font-size:12px;font-weight:700;width:max-content}
.seat img{height:84px;display:block;margin:0 auto 2px}
.seat.on .mascot{filter:drop-shadow(0 0 12px #f3c06a40)}
.seat.off .mascot{filter:grayscale(1) brightness(.45);opacity:.55}
.seat figcaption{min-height:18px}
/* poke a mascot or stir the pot: just for fun, never awards anything. Uses translate/rotate/scale so it stacks on the layout transforms */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.poke{display:block;width:100%;margin:0 auto;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.seat .poke{width:auto}
.poke>.mascot{transition:translate .15s}
.poke:hover>.mascot{translate:0 -4px}
.do-flip .prop{animation:pieflip .9s cubic-bezier(.3,.6,.4,1)}
@keyframes pieflip{45%{translate:0 -130%;rotate:200deg}80%{translate:0 0;rotate:360deg}90%{translate:0 8%;rotate:360deg}100%{rotate:360deg}}
.do-slash img{animation:lunge .45s ease-out}
@keyframes lunge{30%{translate:9% -3%;rotate:5deg}}
.mascot.do-slash::after{content:'';position:absolute;z-index:3;left:-15%;top:42%;width:130%;height:6px;border-radius:6px;background:linear-gradient(90deg,transparent,#fff,#ffd9a0,transparent);box-shadow:0 0 12px #ffd9a0;rotate:-30deg;animation:slash .5s ease-out forwards}
@keyframes slash{0%{scale:0 1;opacity:1}55%{scale:1 1;opacity:1}100%{scale:1.1 .1;opacity:0}}
.do-slash .prop,.do-twirl .prop{animation:wobble .5s .25s}
@keyframes wobble{25%{rotate:-16deg}75%{rotate:14deg}}
.do-poof>*{animation:vanish 1s}
@keyframes vanish{15%,65%{opacity:0;translate:0 12%}}
.mascot.do-poof::after{content:'';position:absolute;z-index:3;inset:5% -20%;pointer-events:none;animation:puff 1s ease-out forwards;
  background:radial-gradient(circle at 28% 55%,#ece4f6 0 17%,transparent 18%),radial-gradient(circle at 55% 38%,#d8cce9 0 21%,transparent 22%),radial-gradient(circle at 72% 60%,#f4eee6 0 16%,transparent 17%),radial-gradient(circle at 48% 70%,#e2d8ef 0 19%,transparent 20%)}
@keyframes puff{0%{scale:.3;opacity:0}25%{scale:1;opacity:1}100%{scale:1.5;opacity:0}}
.mascot.do-twirl{animation:twirl .9s cubic-bezier(.3,.7,.4,1)}
@keyframes twirl{45%{transform:translateY(-24%) rotateY(180deg)}100%{transform:rotateY(360deg)}}
.do-flex img{animation:flex 1s;transform-origin:50% 100%}
@keyframes flex{15%,48%,81%{scale:1.1 .93}30%,63%,96%{scale:.96 1.05}}
.do-flex .prop{animation:curl 1s}
@keyframes curl{25%,58%,91%{rotate:-55deg}}
.quip{position:absolute;z-index:4;left:50%;bottom:calc(100% + 6px);translate:-50% 6px;width:max-content;max-width:150px;padding:5px 9px;font-size:12px;line-height:1.3;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s}
.quip.show{opacity:1;translate:-50% 0}
.mile:last-child .quip{left:auto;right:0;translate:0 6px}
.mile:last-child .quip.show{translate:0 0}
.pot-hit{position:absolute;z-index:1;left:10%;top:36%;width:80%;height:52%;padding:0;border:0;border-radius:40%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.blub{position:absolute;z-index:1;width:var(--s);height:var(--s);margin:calc(var(--s) / -2);border-radius:50%;border:2px solid #fff8;background:radial-gradient(circle at 35% 30%,#fffd 0 18%,transparent 25%),var(--c);box-shadow:0 0 10px var(--c);pointer-events:none;animation:blub 1.1s var(--d) ease-out both}
@keyframes blub{0%{translate:0 0;scale:.3;opacity:0}15%{opacity:1}80%{translate:0 -64px;scale:1;opacity:1}100%{translate:0 -72px;scale:1.8;opacity:0}}
.bob.hop{animation:hop .6s cubic-bezier(.3,.7,.4,1);transform-box:fill-box;transform-origin:center}
@keyframes hop{45%{transform:translateY(-40px) rotate(-25deg)}}
.boil>svg{animation:shake .5s}
.boil .steam path{animation-duration:.8s;stroke-width:11}

h2{font-size:26px;margin:52px 0 8px;font-weight:700;letter-spacing:-.6px;display:flex;align-items:center;gap:12px;line-height:1.2}
h2::before{content:'';width:22px;height:22px;flex:none;background:var(--leaf-icon) center/contain no-repeat;filter:drop-shadow(0 0 6px #f3c06a99)}
.sub{color:var(--muted);margin:0 0 18px}
/* frosted glass panel with a gold light catching the top edge */
.card{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 20px 50px #0009,inset 0 1px 0 #ffffff10;backdrop-filter:blur(14px)}
.card::before,.odds::before{content:'';position:absolute;left:24px;right:24px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8;pointer-events:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card h3{margin:0 0 6px;font-size:17px;font-weight:700;letter-spacing:-.3px}
.card h3 em{font-style:normal;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card p{margin:0 0 12px;color:var(--muted);font-size:14px}
.btn{background:#ffffff0a;color:var(--text);border:1px solid var(--hair);border-radius:999px;padding:8px 16px;font-weight:700;transition:border-color .15s,box-shadow .15s,background .15s}
.btn:hover{border-color:var(--gold);box-shadow:0 0 18px #f3c06a33;background:#f3c06a12}
.btn.sm{padding:4px 11px;font-size:12px}
input{font:inherit;background:#0b0807cc;color:var(--text);border:1px solid var(--field);border-radius:12px;padding:8px 11px;width:100%}
input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #f3c06a26}
label{font-size:11px;color:var(--muted);font-weight:800;display:block;margin-bottom:5px;letter-spacing:1px;text-transform:uppercase}
.row{display:flex;gap:8px;align-items:end;margin-bottom:10px}
.row>div{flex:1}
.bar{height:12px;background:#ffffff0d;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--cran),var(--copper),var(--champ));box-shadow:0 0 14px #f3a35b88;transition:width .4s}
.meta{font-size:12px;color:var(--muted);margin-top:6px}
/* spend bar: a plate waits at the end, a striped ghost previews the typed check, and every fill bursts */
.spend{position:relative;margin-top:14px;padding-right:38px}
.spend .bar{position:relative;height:14px}
.spend .bar>i{position:relative;overflow:hidden;transition:width .45s cubic-bezier(.3,.9,.3,1)}
.spend .bar>i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#fffa 50%,transparent 65%);translate:-100% 0;animation:barsheen 2.6s ease-in-out infinite}
@keyframes barsheen{60%,100%{translate:100% 0}}
.spend .bar>b{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(-45deg,#ffe3a366 0 5px,#ffe3a31a 5px 10px);animation:march .8s linear infinite;transition:left .3s,width .3s}
@keyframes march{to{background-position:14.14px 0}}
.spend-goal{position:absolute;right:0;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:radial-gradient(circle,#fff6e6 0 30%,#e2d3b8 32% 52%,#fff6e6 54%);border:2px solid var(--gold);box-shadow:0 0 0 3px #f3c06a1a;transition:box-shadow .3s}
.spend-goal::after{content:"";position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fff 0,#f1e6d0 45%,#c9b38c 100%)}
.spend.near .spend-goal{animation:wobble 1s ease-in-out infinite}
.spend.near .bar>i{animation:hot 1s ease-in-out infinite}
@keyframes hot{50%{box-shadow:0 0 24px #ffb547}}
.spend.preview .spend-goal{box-shadow:0 0 0 3px #f3c06a66,0 0 18px #f3c06a}
.spend.got .spend-goal{animation:plategot .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes plategot{35%{scale:1.5;rotate:-15deg;box-shadow:0 0 0 4px #ffe3a3,0 0 30px #ffe3a3}}
.spend.got .bar{animation:barflash .8s ease-out}
@keyframes barflash{20%{border-color:var(--champ);box-shadow:0 0 0 2px #ffe3a388,0 0 26px #ffe3a3}}
.spend-pop{position:absolute;right:-4px;bottom:calc(100% + 6px);font:800 13px/1 Unbounded,sans-serif;color:var(--champ);text-shadow:0 0 12px #f3c06a;white-space:nowrap;pointer-events:none}
.spend .spark{position:absolute;right:13px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;box-shadow:0 0 6px currentColor;pointer-events:none}
.spend-next{display:block;min-height:1.5em;margin-top:2px;color:var(--gold);font-weight:800}
.pill.bump{animation:bump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{35%{scale:1.25;box-shadow:0 0 18px #f3c06a}}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}

.harvest .track{position:relative;margin:190px 50px 70px} /* side margin keeps the end milestone labels inside the card */
.harvest .bar{height:16px}
.mile{position:absolute;top:-8px;transform:translateX(-50%);text-align:center;width:120px}
.mile .dot{width:30px;height:30px;margin:0 auto;border-radius:50%;background:#0b0807;border:1px solid var(--hair);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--muted)}
.mile.on .dot{background:var(--gold-grad);border-color:var(--champ);color:#1a0f08;box-shadow:0 0 16px #f3c06a99}
.mile div+div{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.3}
.mile.on div+div{color:var(--text)}
.big{font-size:38px;font-weight:800;letter-spacing:-1px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.big span{-webkit-text-fill-color:var(--muted);font-family:Manrope,sans-serif;letter-spacing:0}

.odds{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px #0009;backdrop-filter:blur(14px)}
.odds summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:18px 20px}
.odds summary::-webkit-details-marker{display:none}
.odds summary:hover .chev{border-color:var(--gold);box-shadow:0 0 14px #f3c06a55}
.chev{flex:none;width:32px;height:32px;border-radius:50%;background:#ffffff0a;border:1px solid var(--hair);display:grid;place-items:center;color:var(--gold);transition:transform .2s,box-shadow .2s}
.odds[open] .chev{transform:rotate(90deg)}
.otitle b{display:block;font-size:16px;font-weight:700}
.otitle small{color:var(--muted);font-size:12px}
.peek{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.peek i{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.odds-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;padding:4px 20px 8px}
.waffle{display:grid;grid-template-columns:repeat(25,1fr);gap:3px;padding:12px;background:#060403;border:1px solid var(--line);border-radius:14px}
.waffle i{aspect-ratio:1;border-radius:50%;background:var(--c);opacity:.18;transition:opacity .25s,transform .25s}
.waffle i.hit{opacity:1;transform:scale(1.12);box-shadow:0 0 7px var(--c)}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:12px;font-weight:700}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
.tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tiers button{background:#ffffff08;border:1px solid var(--line);border-radius:12px;padding:8px 4px;color:var(--text);text-align:center;transition:.15s;display:grid;justify-items:center;gap:3px}
.tiers button:hover{border-color:var(--c)}
.tiers button[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,#0b0807);box-shadow:inset 0 -3px 0 var(--c),0 0 18px color-mix(in srgb,var(--c) 30%,transparent)}
.tiers b{font-size:12px;color:var(--c);line-height:1.15}
.tiers small{font-size:11px;color:var(--muted);font-weight:700}
.tier-head{display:flex;align-items:baseline;gap:8px;margin:16px 0 4px}
.tier-head strong{font-size:28px;font-weight:800;color:var(--c);line-height:1;text-shadow:0 0 18px color-mix(in srgb,var(--c) 55%,transparent)}
.tier-head span{color:var(--muted);font-weight:600}
.plist{list-style:none;padding:0;margin:0}
.plist li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-weight:700;font-size:14px}
.plist li:first-child{border-top:0}
.plist small{display:block;color:var(--muted);font-weight:600;font-size:12px}
.coin{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9b0,#e9a52a);color:#5a3a06;font-size:10px;font-weight:900;display:grid;place-items:center;box-shadow:inset 0 -3px 0 #b8781a,0 0 10px #f3c06a55;flex:none}
.picon{width:34px;height:34px;border-radius:10px;background:#060403;border:1px solid var(--c,var(--line));display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:0 0 10px color-mix(in srgb,var(--c,#000) 30%,transparent)}
.picon svg,.picon img{width:82%;height:82%;object-fit:contain;display:block}
.coin.big{width:96px;height:96px;font-size:24px;box-shadow:inset 0 -6px 0 #b8781a,0 0 30px #f3c06a88}
.picon.big{width:110px;height:110px;border-radius:24px;border-width:2px}
.stock{height:5px;background:#ffffff12;border-radius:9px;margin:5px 0 3px;overflow:hidden;max-width:160px}
.stock i{display:block;height:100%;background:var(--c);box-shadow:0 0 6px var(--c)}
.chance{text-align:right;font-weight:800;white-space:nowrap}
.odds-note{margin:0;padding:12px 20px 18px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:rgba(20,15,12,.94);border:1px solid var(--gold);border-radius:14px;padding:10px 18px;font-weight:700;opacity:0;transition:.3s;pointer-events:none;z-index:30;box-shadow:0 0 30px #f3c06a33;backdrop-filter:blur(8px)}
.toast.show{opacity:1}

/* ---------- the scoop: zoom into the pot, fishballs sink and simmer, catch one, it cracks open ---------- */
.spin{position:fixed;inset:0;z-index:20;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:hidden;color:var(--text)}
.spin[hidden]{display:none}
.spin-bg{position:absolute;inset:0;transition:background .5s;
  background:radial-gradient(#f3c06a12 1px,transparent 1.3px) 0 0/22px 22px,radial-gradient(circle at 50% 45%,#2a1a10 0,#070403 70%)}
.spin-box{position:relative;display:grid;justify-items:center;gap:12px;padding:16px;max-width:100%;transition:opacity .5s,filter .5s}
.spin-title{font-weight:700;font-size:clamp(18px,3.4vw,26px);text-align:center;line-height:1.1;letter-spacing:-.5px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.spin-hint{text-align:center;color:var(--muted);font-size:14px;font-weight:600;min-height:2.8em;max-width:420px;padding:0 16px;margin:0}
.spin-tools{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:6}
.bigpot{position:relative;width:min(80vw,56vh,500px);aspect-ratio:1;border-radius:50%;transition:opacity .4s,filter .4s}
/* HUD rings around the pot: a slow dashed orbit and a glowing halo */
.bigpot::before,.bigpot::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.bigpot::before{inset:-6%;border:1px dashed #f3c06a66;animation:turn 40s linear infinite}
.bigpot::after{inset:-11%;border:1px solid #f3c06a22;box-shadow:0 0 60px #e0873e33,inset 0 0 40px #e0873e22}
.bigpot>svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 26px #e0873e55) drop-shadow(0 18px 30px #000c)}
.bigpot.lifted{opacity:.3;filter:blur(2px)}
.fb{position:absolute;left:50%;top:50%;width:11%;aspect-ratio:1;margin:-5.5% 0 0 -5.5%;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(circle at 34% 30%,#fff 0 10%,#f7efe2 24%,#e3d3ba 62%,#c3a988 100%);box-shadow:inset -3px -4px 6px #8a6a4a55,0 3px 6px #0005}
.fb::after,.half::after{content:'';position:absolute;inset:0;border-radius:50%;opacity:.55;
  background:radial-gradient(circle at 62% 66%,#9d8463 0 3%,transparent 4%),radial-gradient(circle at 30% 70%,#9d8463 0 2%,transparent 3%),radial-gradient(circle at 72% 34%,#9d8463 0 2%,transparent 3%)}
/* garnish floating on the broth: it drifts with the current, so you can see your stir */
.fl{position:absolute;left:50%;top:50%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;will-change:transform}
.fl.scallion{border:2px solid #7cb446;background:radial-gradient(circle,#e3f3c3aa 0 42%,#a9d36e55 46%)}
.fl.chili{background:radial-gradient(circle,#ffe0a8 0 16%,#c7261b 19% 60%,#86120c 63%)}
.fl.goji{border-radius:45% 55% 50% 50%;background:radial-gradient(circle at 35% 30%,#ffb08a,#e0461f 62%)}
.fl.oil{background:radial-gradient(circle at 40% 35%,#fff9 0 16%,#fff3d455 40%,transparent 70%)}
.fl.oil.spicy{background:radial-gradient(circle at 40% 35%,#fff6 0 16%,#ffb26b77 40%,transparent 70%)}
.ripple{position:absolute;left:50%;top:50%;width:16%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid #ffffff4d;pointer-events:none;animation:ripple .9s ease-out forwards}
@keyframes ripple{from{scale:.45;opacity:.9}to{scale:1.5;opacity:0}}
.ladle-top{position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;margin:-12% 0 0 -12%;pointer-events:none;z-index:3;will-change:transform}
.ladle-top{--broth:#f0bd5c}
.ladle-top::before{content:'';position:absolute;inset:0;border-radius:50%;border:5px solid #f1e6d0;background:radial-gradient(circle at 40% 35%,#ffffff38,#00000014 70%);box-shadow:0 8px 14px #0007,inset 0 0 0 2px #c9a46a,0 0 18px #ffe3a366;transition:background .3s,border-color .3s}
/* dunked: broth floods the bowl and the rim sinks below the surface tint; it comes back up still holding broth */
.ladle-top.dunk::before{background:radial-gradient(circle at 42% 38%,color-mix(in srgb,var(--broth) 70%,#fff) 0,var(--broth) 55%,color-mix(in srgb,var(--broth) 80%,#000) 100%);border-color:color-mix(in srgb,#f1e6d0 55%,var(--broth))}
.ladle-top::after{content:'';position:absolute;left:80%;top:80%;width:120%;height:13%;border-radius:9px;background:linear-gradient(#fff3d6,#d0a560);border:1px solid #a9844a;transform-origin:0 50%;rotate:42deg;box-shadow:0 8px 12px #0007}
.splash,.pb{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none}
.splash{width:18%;aspect-ratio:1;margin:-9% 0 0 -9%;border:3px solid #fffb;box-shadow:0 0 14px #fff8;animation:splash .6s ease-out forwards}
@keyframes splash{from{scale:.3;opacity:1}to{scale:1.7;opacity:0}}
.pb{width:3.4%;aspect-ratio:1;margin:-1.7% 0 0 -1.7%;border:2px solid #fff9;background:radial-gradient(circle at 35% 30%,#fffc 0 20%,transparent 30%);animation:pbub 1.3s ease-out forwards}
@keyframes pbub{0%{scale:.2;opacity:0}30%{opacity:1}85%{scale:1;opacity:1}100%{scale:1.6;opacity:0}}
.pot-tap{position:absolute;inset:0;z-index:4;border-radius:50%;background:none;border:0;padding:0;cursor:none;touch-action:none;-webkit-tap-highlight-color:transparent}
/* the caught fishball, lifted toward you; two halves split along a zigzag seam that glows in the tier colour */
.held{position:absolute;left:50%;top:44%;width:min(46vw,32vh,250px);aspect-ratio:1;translate:-50% -50%;z-index:5;pointer-events:none;display:none;--gc:#e8dcc6;--crack:0}
.held.on{display:block}
/* the ball covers the inner 53% of this aura, so the colour sits just outside its edge */
.glowcore{position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(circle,var(--gc) 0 50%,color-mix(in srgb,var(--gc) 55%,transparent) 58%,transparent 74%);opacity:0;transition:opacity .35s}
.held.glowing .glowcore{opacity:.85;animation:aura 1.1s ease-in-out infinite}
@keyframes aura{50%{scale:1.07}}
.half{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 10%,#f7efe2 24%,#e3d3ba 62%,#c3a988 100%);box-shadow:inset -12px -16px 26px #8a6a4a66}
.half.top{clip-path:polygon(0 0,100% 0,100% 50%,82% 44%,66% 56%,50% 46%,34% 57%,18% 45%,0 52%)}
.half.bot{clip-path:polygon(0 52%,18% 45%,34% 57%,50% 46%,66% 56%,82% 44%,100% 50%,100% 100%,0 100%)}
.seam{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seam path{fill:none;stroke:var(--gc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--crack));transition:stroke-dashoffset .45s,stroke .35s;filter:drop-shadow(0 0 3px var(--gc))}
.inside{position:absolute;inset:18%;display:grid;place-items:center;opacity:0}
.spin.lightsout .spin-bg{background:#000}
.spin.lightsout .bigpot,.spin.lightsout .spin-title,.spin.lightsout .spin-hint{opacity:.08}
.spin.revealed .spin-box{opacity:.12;filter:blur(3px)}

.reveal{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;z-index:3}
.reveal.show{opacity:1;pointer-events:auto}
/* reveal backdrop: turkey-feather fan that opens behind the card + a turning autumn wreath, both in the tier colour */
.bloom{position:absolute;left:50%;top:50%;width:min(1100px,170vmin);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.bloom svg{width:100%;height:100%;overflow:visible}
.bglow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 45%,transparent) 0,transparent 65%);opacity:0}
.reveal.show .bglow{opacity:1;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}
.fan,.wreath{opacity:0;transition:opacity .5s}
.fth{transform:rotate(var(--a))}
.fth .body{stroke:#1a0f08;stroke-width:3;stroke-linejoin:round}
.fth.f0 .body{fill:var(--tc)}
.fth.f1 .body{fill:color-mix(in srgb,var(--tc) 55%,#8a5a3b)}
.fth.f2 .body{fill:color-mix(in srgb,var(--tc) 55%,#fff2d6)}
.fth .band{fill:none;stroke:#fff2d6;stroke-width:5;stroke-linecap:round;opacity:.85}
.fth .quill{stroke:#1a0f08;stroke-opacity:.45;stroke-width:2.5}
.reveal.show .fth{animation:fanopen .9s cubic-bezier(.2,1.35,.4,1) var(--d) both}
@keyframes fanopen{from{transform:rotate(0deg) scale(.25);opacity:0}to{transform:rotate(var(--a)) scale(1);opacity:1}}
.reveal.show .fan-sway{animation:sway 6s ease-in-out 1s infinite}
@keyframes sway{50%{transform:rotate(3deg)}}
.leafy{fill:color-mix(in srgb,var(--tc) 70%,#f08a3c);stroke:#1a0f08;stroke-width:2}
.leafy.alt{fill:color-mix(in srgb,var(--tc) 45%,#8a5a3b)}
.berry{fill:#ff5c7a;stroke:#1a0f08;stroke-width:1.5}
.reveal.show .wreath{animation:wreathin .8s ease-out both,turn 50s linear .8s infinite}
@keyframes wreathin{from{transform:scale(.7) rotate(-30deg)}}
@keyframes turn{to{transform:rotate(1turn)}}
.spin[data-tier=rare] .reveal.show .wreath{opacity:.45}
.spin[data-tier=epic] .reveal.show .wreath{opacity:.6}.spin[data-tier=epic] .reveal.show .fan{opacity:.4}
.spin[data-tier=secret] .reveal.show .wreath{opacity:.75}.spin[data-tier=secret] .reveal.show .fan{opacity:.55}
.spin[data-tier=legendary] .reveal.show .wreath{opacity:.9}.spin[data-tier=legendary] .reveal.show .fan{opacity:.75}
.spin[data-tier=legendary] .reveal.show .fth .body{animation:glint 2.4s ease-in-out calc(var(--d) + 1s) infinite}
@keyframes glint{0%,70%,100%{filter:none}35%{filter:brightness(1.6) drop-shadow(0 0 10px #fff2d6)}}
.flash{position:absolute;inset:0;background:var(--tc);opacity:0;pointer-events:none}
.spin[data-tier=secret] .reveal.show .flash,.spin[data-tier=legendary] .reveal.show .flash{animation:flash .8s ease-out}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}
.ring{position:absolute;left:50%;top:50%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;border:4px solid var(--tc);opacity:0;pointer-events:none}
.spin:not([data-tier=common]) .reveal.show .ring{animation:ring 1s ease-out}
@keyframes ring{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.6);opacity:0}}
.rwrap{position:relative;display:grid;justify-items:center;padding:16px;max-width:100%}
.rword{font-size:clamp(30px,7vw,68px);font-weight:800;line-height:1;letter-spacing:-1.5px;color:var(--tc);-webkit-text-stroke:7px #120a05;paint-order:stroke fill;text-shadow:0 6px 0 #120a05,0 0 40px var(--tc);margin-bottom:14px;text-align:center}
.rword:empty{display:none}
/* the prize arrives on a glass card lit in the tier colour */
.rcard{width:min(380px,92vw);background:linear-gradient(160deg,#241a13f5,#0f0a08f5);color:var(--text);border:1px solid color-mix(in srgb,var(--tc) 70%,#fff);border-radius:24px;padding:26px 22px 20px;text-align:center;display:grid;justify-items:center;gap:10px;
  box-shadow:0 0 0 1px #000,0 0 var(--glow,0px) var(--tc),0 20px 60px #000c,inset 0 1px 0 #ffffff18}
.rcard h3{margin:0;font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.4px}
.rcard p{margin:0;color:var(--muted);font-size:14px}
.ractions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.ractions .scoop{font-size:13px;padding:11px 20px}
.spin[data-tier=common]{--glow:0px}.spin[data-tier=rare]{--glow:30px}.spin[data-tier=epic]{--glow:50px}.spin[data-tier=secret]{--glow:70px}.spin[data-tier=legendary]{--glow:110px}
.spin[data-tier=common] .reveal.show .rcard{animation:pop .35s ease-out}
.spin[data-tier=rare] .reveal.show .rcard{animation:pop .5s cubic-bezier(.2,1.5,.4,1)}
.spin[data-tier=epic] .reveal.show .rcard{animation:flipin .7s cubic-bezier(.2,1.2,.4,1)}
.spin[data-tier=secret] .reveal.show .rcard,.reveal.show .rword{animation:slam .55s cubic-bezier(.2,1.2,.4,1)}
.spin[data-tier=legendary] .reveal.show .rcard{animation:risein 1.1s cubic-bezier(.2,1.1,.3,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes flipin{0%{transform:perspective(800px) rotateY(100deg) scale(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes slam{0%{transform:scale(2.4);opacity:0}60%{transform:scale(.94);opacity:1}100%{transform:none}}
@keyframes risein{0%{transform:translateY(80px) scale(.25);opacity:0;filter:brightness(3)}60%{transform:translateY(-12px) scale(1.08);opacity:1;filter:brightness(1.7)}100%{transform:none;filter:none}}
.spin.shake .reveal{animation:shake .5s}
@keyframes shake{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,5px)}}
.cutin{position:absolute;left:2%;bottom:0;width:min(140px,22vw);transform:translateX(-150%);transition:transform .5s cubic-bezier(.2,1.4,.4,1);z-index:4}
.cutin.show{transform:none}
.cutin .mascot{display:block}
.cutin img{width:100%}
.cbubble{position:absolute;z-index:5;left:88%;top:-4%;background:rgba(20,15,12,.95);color:var(--text);border:1px solid var(--tc);box-shadow:0 0 18px color-mix(in srgb,var(--tc) 45%,transparent);border-radius:12px;padding:6px 10px;font-weight:800;font-size:13px;width:max-content;max-width:180px}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

@media (max-width:760px){.hero{grid-template-columns:1fr;padding:22px}.hero h1{font-size:36px}.mile{width:60px}.seat img{height:46px}.seat{font-size:10px}.odds-body{grid-template-columns:1fr}.peek{display:none}.tiers{gap:4px}.tiers b{font-size:11px}.tiers small{font-size:11px}.guide{width:30%}.pill[title]{display:none}.harvest .track{margin:140px 24px 50px}.quip{max-width:120px;font-size:11px}.mile div>span{display:none}.harvest #mileList{display:block}
  .cbubble{display:none}h2{font-size:21px}.big{font-size:30px}}
#mileList{display:none;margin:0;padding-left:20px;font-size:13px;color:var(--muted)}
#mileList .on{color:var(--text)}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}
.reduce-motion *,.reduce-motion ::before,.reduce-motion ::after,.reduce-motion::before{animation:none!important;transition:none!important}
.ticker-paused .ticker-track{animation-play-state:paused}

/* ---------- shared chrome: skip link, focus, header, settings, footer ---------- */
[hidden]{display:none!important} /* author display rules (a.scoop, .pill...) would otherwise override the hidden attribute */
:focus-visible{outline:2px solid var(--champ);outline-offset:3px;border-radius:8px}
.pot-tap:focus-visible,.pot-hit:focus-visible{border-radius:50%}
.skip{position:absolute;left:12px;top:-60px;z-index:40;background:var(--gold-grad);color:#1a0f08;font-weight:800;padding:8px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:8px}
a.btn,a.scoop{display:inline-block;text-decoration:none;text-align:center}
.brand{color:var(--text);text-decoration:none}
.hdr-right{display:flex;gap:8px;align-items:center}
.pill .ico{width:14px;height:14px;vertical-align:-2px;margin-right:4px;color:var(--gold)}
.menu{position:relative}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.icon-btn{width:38px;height:38px;border-radius:12px;background:#ffffff0a;border:1px solid var(--hair);display:grid;place-items:center;cursor:pointer;color:var(--text)}
.icon-btn:hover{border-color:var(--gold);box-shadow:0 0 14px #f3c06a33}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:16;width:250px;background:rgba(20,15,12,.95);border:1px solid var(--hair);border-radius:16px;padding:8px;box-shadow:0 20px 50px #000c;backdrop-filter:blur(14px)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer}
.switch:hover{background:#ffffff0a}
.switch input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:99px;background:#ffffff10;border:1px solid var(--field);position:relative;cursor:pointer;flex:none;padding:0;margin:0}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switch input:checked{background:var(--gold-grad);border-color:var(--champ);box-shadow:0 0 12px #f3c06a55}
.switch input:checked::after{transform:translateX(18px);background:#1a0f08}
.account{display:flex;gap:8px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--gold-grad);color:#1a0f08;font-weight:800;display:grid;place-items:center;box-shadow:0 0 14px #f3c06a55}
.site-footer{margin-top:70px;border-top:1px solid var(--hair);color:var(--muted);font-size:13px;background:linear-gradient(#0b0807cc,#050302)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding-top:32px;padding-bottom:20px}
.site-footer h2{display:block;font:800 11px Manrope,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.site-footer h2::before{display:none}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.site-footer a{color:var(--text);text-decoration:none;font-weight:600}
.site-footer a:hover{color:var(--gold);text-decoration:underline}
.site-footer p{margin:0 0 8px}
.fbrand{font-weight:700;color:var(--text);font-size:18px}
.fbrand b{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fbottom{border-top:1px solid var(--line);padding-top:14px;padding-bottom:24px;font-size:12px}

/* ---------- document pages: rules, terms, privacy, accessibility ---------- */
.doc{max-width:820px}
.doc h1{font-size:36px;font-weight:800;margin:30px 0 6px;line-height:1.1;letter-spacing:-1px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.doc h2{font-size:20px;margin:34px 0 8px;scroll-margin-top:50px}
.doc h2::before{width:18px;height:18px}
.doc h3{font-size:15px;margin:18px 0 6px;color:var(--champ)}
.doc p,.doc li{color:#e2d6c6;font-size:15px}
.doc .updated{color:var(--muted);font-size:13px;margin:0 0 18px}
.callout{background:linear-gradient(135deg,#f3c06a1c,#f3c06a08);border:1px solid var(--hair);border-left:3px solid var(--gold);border-radius:14px;padding:12px 16px;margin:16px 0;font-weight:600}
.toc{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:14px 16px 14px 36px;columns:2;gap:24px;font-size:14px}
.toc a{color:var(--text)}
.toc a:hover{color:var(--gold)}
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0 18px;background:#ffffff05;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.doc th,.doc td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{color:var(--gold);font-size:11px;letter-spacing:2px;text-transform:uppercase;background:#f3c06a0d}
.table-wrap{overflow-x:auto}

/* ---------- sign-in ---------- */
.auth-wrap{min-height:calc(100vh - 260px);display:grid;place-items:center;padding:30px 0}
.auth-card{position:relative;width:min(460px,100%);background:var(--glass);border:1px solid var(--hair);border-radius:24px;padding:30px;box-shadow:0 30px 80px #000c,inset 0 1px 0 #ffffff14;backdrop-filter:blur(16px)}
.auth-card::before{content:'';position:absolute;left:30px;right:30px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.auth-card h1{font-size:24px;margin:12px 0 6px;font-weight:700;letter-spacing:-.6px}
.auth-card .lede{color:var(--muted);margin:0 0 18px}
.auth-card .fine a{color:var(--gold)}
.phone{display:flex;border:1px solid var(--field);border-radius:14px;overflow:hidden;background:#0b0807cc}
.phone:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px #f3c06a26}
.phone .cc{padding:8px 12px;border-right:1px solid var(--line);display:grid;align-content:center;font-weight:800;line-height:1.1}
.phone .cc small{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.5px;white-space:nowrap}
.phone input{border:0;border-radius:0;background:transparent;font-size:20px;padding:12px 14px;outline:none;box-shadow:none}
.otp{font-size:28px;letter-spacing:.45em;text-align:center;font-weight:800;padding:12px 10px 12px calc(10px + .45em);border-radius:14px;font-family:Unbounded,Manrope,sans-serif}
.auth-card .scoop{width:100%;margin-top:14px}
.linkish{background:none;border:0;color:var(--gold);font-weight:700;padding:4px 0;text-decoration:underline}
.linkish:disabled{color:var(--muted);text-decoration:none;cursor:default}
.err{color:#ff8a7a;font-weight:700;font-size:13px;min-height:20px;margin:8px 0 0}
.demo-note{background:#f3c06a0f;border:1px dashed var(--gold);border-radius:12px;padding:10px 12px;font-size:13px;color:#e2d6c6;margin:0 0 16px}
.choice{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:11px 12px;margin-bottom:8px;cursor:pointer;font-weight:700;background:#ffffff05}
.choice:has(input:checked){border-color:var(--gold);background:#f3c06a12;box-shadow:0 0 18px #f3c06a26}
.choice small{display:block;color:var(--muted);font-weight:600}
.choice input{width:auto;accent-color:var(--gold)}
/* fake SMS banner: looks like a phone notification, clearly labelled as a demo */
.sms{position:fixed;left:50%;top:14px;z-index:50;width:min(380px,calc(100% - 24px));transform:translate(-50%,-140%);transition:transform .45s cubic-bezier(.2,1.3,.4,1);
  background:rgba(245,240,232,.97);color:#1d1826;border-radius:18px;padding:10px 12px;box-shadow:0 14px 40px #000a;display:grid;grid-template-columns:38px 1fr;gap:4px 10px;text-align:left;border:0;font:inherit;cursor:pointer}
.sms:not(.show){visibility:hidden;transition:transform .45s,visibility 0s .45s}
.sms.show{transform:translate(-50%,0)}
.sms img{grid-row:span 2;width:38px;height:38px;border-radius:10px;background:#1a120d;padding:4px}
.sms .top{display:flex;justify-content:space-between;font-size:12px;color:#5a5262;font-weight:800}
.sms .body{font-size:14px;line-height:1.35}
.sms .tagdemo{grid-column:1/-1;font-size:11px;font-weight:900;color:#a9541b;letter-spacing:.3px}
.brand>span,.pill,.btn,.account{white-space:nowrap}
@media (max-width:760px){header{flex-wrap:wrap;row-gap:10px}.hdr-right{margin-left:auto}.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}.toc{columns:1}#ptsPill{display:none}.doc h1{font-size:28px}}