/* Hobbi layers (docs/LAYERS.md): the bet panel (hobbi-bet.js) and Reward FX (hobbi-reward.js). One file, linked by the
   page (game pages' CSP blocks injected <style>). Styled from the brand tokens (reels/hobbi-brand/hobbi-brand.css,
   --hb-*; founder pick 2026-10-26: direction A, blue overall), with fallbacks so a page without the brand file still
   renders. The bet panel is a solid brand surface: Liquid Glass belongs to the nav bar and the rail only.
   Money stays green: the win glow and the count-up use --hb-win. GPU-light: only transform and opacity move. */
:root{
 --hl-font:var(--hb-font-ui,"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);
 --hl-display:var(--hb-font-display,"Baloo 2",ui-rounded,"SF Pro Rounded",-apple-system,sans-serif);
 --hl-mono:var(--hb-font-mono,"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace);
 --hl-accent:var(--hb-accent,#3faff3);--hl-accent-gloss:var(--hb-accent-gloss,#c9e9fc);--hl-accent-shade:var(--hb-accent-shade,#296b95);
 --hl-on-accent:var(--hb-on-accent,#0a0c12);
 --hl-surface:var(--hb-surface-1,#0d1924);--hl-raised:var(--hb-surface-2,#10202f);--hl-well:var(--hb-night,#0a0c12);
 --hl-line:var(--hb-line,rgba(63,175,243,.22));--hl-line-strong:var(--hb-line-strong,rgba(63,175,243,.45));
 --hl-text:var(--hb-text,#eef1f7);--hl-label:var(--hb-text-3,#8d95a7);
 --hl-win:var(--hb-win,#4fd57f);--hl-win-glow:rgba(79,213,127,.9);
 --hl-gold-1:#fff3c4;--hl-gold-2:#f6c945;--hl-gold-3:#c8901c;--hl-coin-ink:#5a3a00;
 --hl-ease:var(--hb-ease,cubic-bezier(.2,.8,.2,1));--hl-spring:var(--hb-spring,cubic-bezier(.32,1.25,.5,1));
 --hl-safe-bottom:env(safe-area-inset-bottom,0px);
 /* Stacking policy (4.44.0): game < big multiplier < bet panel < page sheets (Rules, menus) < Reward FX. A page's sheet
    uses z-index: var(--hobbi-z-sheet) and emits ui.sheet {open}, which makes the panel inert while it is open. */
 --hobbi-z-mult:35;--hobbi-z-panel:40;--hobbi-z-sheet:50;--hobbi-z-fx:60
}

/* ---------- Bet UI v2 (brand screen 7: brand surface, ½ / stake / 2×, one big accent button) ---------- */
.hbet-panel{position:fixed;left:10px;right:10px;bottom:calc(10px + var(--hl-safe-bottom));z-index:var(--hobbi-z-panel,40);display:grid;gap:8px;padding:10px;border-radius:var(--hb-radius-l,24px);
 border:1px solid var(--hl-line);background:var(--hl-surface);
 font:600 13px/1 var(--hl-font);color:var(--hl-text);font-variant-numeric:tabular-nums;transition:transform .22s var(--hl-ease),opacity .18s linear}
.hbet-panel button{border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hbet-label{display:flex;justify-content:space-between;align-items:center;padding:0 4px;height:14px;font:500 11px/1 var(--hl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hl-label)}
.hbet-towin b{color:var(--hl-text)}
.hbet-row{display:grid;grid-template-columns:1fr 1.15fr;gap:8px}
.hbet-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hbet-preset,.hbet-btn{height:44px;border-radius:var(--hb-radius-m,14px);background:var(--hl-raised);color:var(--hl-text);box-shadow:inset 0 0 0 1px var(--hl-line);font:700 16px/1 var(--hl-font);transition:transform .12s var(--hl-ease)}
.hbet-preset[aria-pressed=true]{background:color-mix(in srgb,var(--hl-accent) 22%,var(--hl-surface));box-shadow:inset 0 0 0 1.5px var(--hl-accent)}
.hbet-custom{display:grid;grid-template-columns:1fr 40px 40px;gap:6px}
/* 16 px or more: a smaller input makes iOS zoom the page, and then taps stop reaching the game. */
.hbet-field{min-width:0;height:44px;padding:0 6px;border:0;border-radius:var(--hb-radius-m,14px);background:var(--hl-well);box-shadow:inset 0 0 0 1px var(--hl-line);color:var(--hl-text);font:500 16px/1 var(--hl-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;outline:none}
.hbet-field:focus{box-shadow:inset 0 0 0 1.5px var(--hl-accent)}
/* Leaving for a refund is calm: the brand surface, no glow (only a real CASH OUT glows). */
.hbet-panel .hbet-primary[data-kind=leave]{background:var(--hl-raised);color:var(--hl-text);box-shadow:inset 0 0 0 1.5px var(--hl-line-strong);font:700 17px/1 var(--hl-font)}
.hbet-primary[data-kind=leave]::before{display:none}
/* The game's one-line hint: just above the panel, or above the bottom edge while the panel steps aside. */
.hbet-hint{position:fixed;left:16px;right:16px;bottom:calc(var(--hobbi-bet-h,170px) + 10px + var(--hl-safe-bottom));z-index:var(--hobbi-z-panel,40);pointer-events:none;
 text-align:center;font:600 15px/1.25 var(--hl-font);color:var(--hl-text);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hbet-hint[hidden]{display:none}
.hbet-hint:is([data-over=hidden],[data-over=cashout],[data-over=cashing],[data-over=leave]){bottom:calc(96px + var(--hl-safe-bottom))}
.hbet-panel[inert]{pointer-events:none}
/* PvP mode: the line under the amounts ("5 HC each, winner gets 9.80 HC", drawn with the coin glyph), the Bid war chip, no amount field, searching. */
.hbet-note{margin:0;padding:0 4px;font:500 13px/1.2 var(--hl-font);color:var(--hl-text-2,#c3c9d6)}
.hbet-note[hidden]{display:none}
.hbet-panel[data-custom=false] .hbet-row{grid-template-columns:1fr}
.hbet-panel[data-custom=false] .hbet-custom{display:none}
.hbet-bid{font-size:14px}
.hbet-panel .hbet-primary[data-kind=searching]{background:var(--hl-raised);color:var(--hl-text);box-shadow:inset 0 0 0 1.5px var(--hl-accent);font:700 17px/1 var(--hl-font)}
.hbet-primary[data-kind=searching]::before{display:none}
/* Locked search (4.70.0, arcade:nudge): a refused swipe or tab shakes Cancel search once, like a wrong passcode, with an
   accent ring; with reduced motion only the ring shows. */
.hbet-primary[data-kind=searching].nudge{animation:hbet-nudge .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes hbet-nudge{0%,100%{translate:0;box-shadow:inset 0 0 0 1.5px var(--hl-accent)}15%{translate:-7px 0}30%{translate:6px 0;box-shadow:inset 0 0 0 1.5px var(--hl-accent),0 0 0 5px color-mix(in srgb,var(--hl-accent) 40%,transparent)}45%{translate:-5px 0}60%{translate:4px 0}75%{translate:-2px 0}}
@media(prefers-reduced-motion:reduce){.hbet-primary[data-kind=searching].nudge{animation:hbet-nudge-ring .42s ease-out both}@keyframes hbet-nudge-ring{40%{box-shadow:inset 0 0 0 1.5px var(--hl-accent),0 0 0 5px color-mix(in srgb,var(--hl-accent) 40%,transparent)}}}
/* The game-settings slot: one row per setting (Mines count, Plinko rows, Dice over/under), locked in a round. */
.hbet-settings{display:grid;gap:6px}
.hbet-extra:empty{display:none}
.hbet-setting{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:0 0 0 4px}
.hbet-setting:has(.hbet-dec){grid-template-columns:1fr 44px 64px 44px}
.hbet-setting-label{font:500 11px/1 var(--hl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hl-label)}
.hbet-setting-value{text-align:center;font:500 17px/1 var(--hl-mono);font-variant-numeric:tabular-nums}
.hbet-choice{display:flex;gap:6px}
.hbet-option{height:40px;min-width:64px;padding:0 12px;border-radius:var(--hb-radius-m,14px);background:var(--hl-raised);color:var(--hl-text);box-shadow:inset 0 0 0 1px var(--hl-line);font:700 15px/1 var(--hl-font)}
.hbet-option[aria-pressed=true]{background:color-mix(in srgb,var(--hl-accent) 22%,var(--hl-surface));box-shadow:inset 0 0 0 1.5px var(--hl-accent)}
.hbet-setting .hbet-btn{height:40px}
/* The one big button: accent fill, a dithered gloss along the top edge (the brand's Bayer mask when it's loaded). */
.hbet-primary{position:relative;overflow:hidden;height:56px;border-radius:var(--hb-radius-m,16px);background:var(--hl-accent);color:var(--hl-on-accent);font:800 19px/1 var(--hl-display);letter-spacing:-.01em;transition:transform .12s var(--hl-ease),background .12s}
.hbet-primary::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--hl-accent-gloss);opacity:.55;-webkit-mask:var(--hb-bayer-6,linear-gradient(#000,transparent)) 0 0/var(--hb-cell,4px) var(--hb-cell,4px);mask:var(--hb-bayer-6,linear-gradient(#000,transparent)) 0 0/var(--hb-cell,4px) var(--hb-cell,4px);pointer-events:none}
.hbet-preset:active,.hbet-btn:active,.hbet-primary:active{transform:scale(.95)}
.hbet-panel button:disabled,.hbet-field:disabled{opacity:.4}
.hbet-primary:disabled{opacity:.55}
/* CASH OUT glows and pulses (founder ask), owned here so pages don't add their own. A pre-drawn glow behind the button
   animates opacity and scale only. */
.hbet-panel[data-state=cashout]::before{content:"";position:absolute;left:14px;right:14px;bottom:12px;height:52px;border-radius:var(--hb-radius-m,16px);
 box-shadow:0 0 22px 6px color-mix(in srgb,var(--hl-accent) 70%,transparent);animation:hbet-glow 1.1s ease-in-out infinite alternate;pointer-events:none;will-change:opacity,transform}
@keyframes hbet-glow{from{opacity:.35;transform:scale(.98)}to{opacity:1;transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){.hbet-panel[data-state=cashout]::before{animation:none;opacity:.7}}
/* Refused, with the reason on the button (Paused, Connecting…, Settling…, Insufficient balance). */
.hbet-panel .hbet-primary:is([data-kind=blocked],[data-kind=short],[data-kind=wait]):disabled{opacity:1;background:var(--hl-raised);color:var(--hl-text-2,#c3c9d6);box-shadow:inset 0 0 0 1px var(--hl-line);font:600 16px/1 var(--hl-font)}
.hbet-primary:is([data-kind=blocked],[data-kind=short],[data-kind=wait])::before{display:none}
.hbet-panel .hbet-primary[data-kind=cashing]:disabled{opacity:1;background:var(--hl-accent-gloss)}
.hbet-primary[data-kind=cashing]::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:hbet-spin .7s linear infinite}
@keyframes hbet-spin{to{transform:rotate(360deg)}}
/* In a round: only CASH OUT (or "Cashing out…"); nothing while the round plays out. */
.hbet-panel:is([data-state=cashout],[data-state=cashing],[data-state=leave]){background:transparent;border-color:transparent}
.hbet-panel:is([data-state=cashout],[data-state=cashing],[data-state=leave]) :is(.hbet-label,.hbet-row,.hbet-settings,.hbet-extra){visibility:hidden;height:0;margin:-4px 0}
.hbet-panel[data-state=hidden]{transform:translate3d(0,140%,0);opacity:0;pointer-events:none}

/* ---------- The BIG live multiplier (hobbi-multiplier.js) ---------- */
.hm-mult{position:fixed;z-index:var(--hobbi-z-mult,35);pointer-events:none;display:flex;align-items:baseline;justify-content:center;font:800 72px/1 var(--hl-display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.hm-mult[hidden]{display:none}
.hm-mult[data-align=left]{justify-content:flex-start}
.hm-mult[data-align=right]{justify-content:flex-end}
.hm-num{display:inline-block;will-change:transform}
.hm-x{font-size:.55em;margin-left:.04em;color:var(--hl-accent)}
.hm-caption{align-self:center;margin-right:.3em;font:500 .18em/1 var(--hl-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hl-label)}
.hm-caption:empty{display:none}
.hm-mult[data-idle=true]{opacity:.7}
.hm-mult[data-band=under]{color:var(--hl-text-2,#c3c9d6)}
.hm-mult[data-band=high] .hm-x{color:var(--hl-win)}
/* Heat (4.59.0, mountMultiplier({heat: true}), Crash): a colour ramp by tier and a scale that grows with the climb.
   Transform, colour and a text-shadow glow only; the punch flash is an opacity pulse on a pseudo-element. */
.hm-mult[data-heat]{transform:scale(var(--hm-s,1));transform-origin:50% 60%;transition:color .25s,transform .3s cubic-bezier(.2,.8,.3,1);--hm-heat:#3faff3}
.hm-mult[data-heat] .hm-x{color:inherit;opacity:.8}
.hm-mult[data-heat="0"]{--hm-heat:#3faff3;color:#eaf6ff;text-shadow:0 0 18px rgba(63,175,243,.45)}
.hm-mult[data-heat="1"]{--hm-heat:#35d6c8;color:#c9fbf5;text-shadow:0 0 22px rgba(53,214,200,.55)}
.hm-mult[data-heat="2"]{--hm-heat:#4fd57f;color:#5ff094;text-shadow:0 0 26px rgba(79,213,127,.6)}
.hm-mult[data-heat="3"]{--hm-heat:#f2c14e;color:#ffd35c;text-shadow:0 0 30px rgba(242,193,78,.65)}
.hm-mult[data-heat="4"]{--hm-heat:#fa78b2;color:#ff7fbf;text-shadow:0 0 34px rgba(250,120,178,.7)}
.hm-mult[data-heat="5"]{--hm-heat:#fc5855;color:#ff6a5c;text-shadow:0 0 40px rgba(252,88,85,.8),0 0 4px #fff}
.hm-mult[data-heat]::after{content:"";position:absolute;inset:-30% -12%;border-radius:50%;background:radial-gradient(closest-side,var(--hm-heat),transparent);opacity:0;pointer-events:none;z-index:-1}
.hm-mult.hm-hit::after{animation:hm-hit .45s ease-out}
@keyframes hm-hit{0%{opacity:.75}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hm-mult[data-heat]{transform:none;transition:color .25s}.hm-mult.hm-hit::after{animation:none}}

/* ---------- Reward FX ---------- */
.hr-layer,.hr-win{position:fixed;inset:0;pointer-events:none;z-index:var(--hobbi-z-fx,60);contain:strict}
.hr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Coins: flat gold, the value in bold shiny gold-on-gold ink. */
.hr-coin{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:999px;
 background:radial-gradient(circle at 35% 30%,var(--hl-gold-1) 0 18%,var(--hl-gold-2) 46%,var(--hl-gold-3) 100%);box-shadow:inset 0 0 0 2px rgba(255,236,170,.9),inset 0 -3px 0 rgba(150,95,10,.45);will-change:transform,opacity}
.hr-coin.plain{min-width:30px;width:30px;height:30px;padding:0}
/* A coin with no value on it shows the Hobbi coin glyph (D1: never "$"). */
.hr-coin.plain::after{content:"";width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216.6%22%20r%3D%2215%22%20fill%3D%22%23c8901c%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2215.4%22%20r%3D%2214.4%22%20fill%3D%22%23f6c945%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2215.4%22%20r%3D%2210.6%22%20fill%3D%22none%22%20stroke%3D%22%23fff3c4%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M11.4%209.6h3.2v4.2h2.8V9.6h3.2v11.6h-3.2v-4.4h-2.8v4.4h-3.2z%22%20fill%3D%22%235a3a00%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.hr-coin-value{font:900 18px/1 var(--hl-display);letter-spacing:-.01em;background:linear-gradient(180deg,#7a4e00 0%,#4b2f00 55%,#8a5a06 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* The fun bet pop (presets, ½, 2×): a smaller coin with the amount, squashing from its base. */
.hr-coin.pop{min-width:40px;height:40px;padding:0 10px;transform-origin:50% 100%}
.hr-coin.pop .hr-coin-value{font-size:16px}
/* At risk (round.earn {atRisk}): hollow and dimmed until banked. */
.hr-coin.pending{background:rgba(10,12,18,.55);box-shadow:inset 0 0 0 2px var(--hl-gold-2);opacity:.9}
.hr-coin.pending .hr-coin-value{background:none;color:var(--hl-gold-2);-webkit-background-clip:border-box;background-clip:border-box}
.hr-confetti{position:absolute;inset:0;width:100%;height:100%}
/* The win: the edges of the screen glow green (four pre-drawn gradients, faded with opacity only). */
.hr-glow{position:absolute;inset:0;opacity:0;transition:opacity .22s ease-out;
 background:linear-gradient(90deg,var(--hl-win-glow),transparent 9%),linear-gradient(270deg,var(--hl-win-glow),transparent 9%),linear-gradient(180deg,var(--hl-win-glow),transparent 6%),linear-gradient(0deg,var(--hl-win-glow),transparent 6%)}
.hr-win.on .hr-glow{opacity:1}
/* A dimmed band behind the count-up, so it never sits on top of a game's own numbers (opacity only, no blur). */
.hr-dim{position:absolute;left:0;right:0;top:calc(var(--hr-y,330px) - 110px);height:220px;opacity:0;transition:opacity .2s linear;
 background:linear-gradient(180deg,transparent,rgba(6,7,10,.72) 28%,rgba(6,7,10,.72) 72%,transparent)}
.hr-win.on .hr-dim{opacity:1}
.hr-win.mega .hr-glow{background:linear-gradient(90deg,var(--hl-win-glow),transparent 14%),linear-gradient(270deg,var(--hl-win-glow),transparent 14%),linear-gradient(180deg,var(--hl-win-glow),transparent 9%),linear-gradient(0deg,var(--hl-win-glow),transparent 9%)}
.hr-win .hr-confetti{z-index:0}
/* A win's coins fly inside the win, under its number (4.62.0). */
.hr-win > .hr-coin{z-index:0}
.hr-main{position:absolute;left:0;right:0;top:var(--hr-y,330px);transform:translate3d(0,-50%,0) scale(.9);opacity:0;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .28s cubic-bezier(.2,1.4,.4,1),opacity .18s linear}
.hr-win.on .hr-main{transform:translate3d(0,-50%,0) scale(1);opacity:1}
@keyframes hr-land{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
.hr-title{font:500 13px/1 var(--hl-mono);letter-spacing:.16em;color:#fff}
.hr-count{display:flex;font:800 clamp(56px,17vw,84px)/1 var(--hl-display);letter-spacing:-.03em;color:var(--hl-win);font-variant-numeric:tabular-nums}
.hr-win.landed .hr-count{animation:hr-land .32s cubic-bezier(.2,1.6,.4,1)}
.hr-digit,.hr-glyph{display:inline-block}
.hr-digit{will-change:transform,opacity;transform-origin:50% 0}
.hr-mult{font:500 15px/1 var(--hl-mono);color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.hr-win.out{opacity:0;transition:opacity .26s linear}
/* At or below the stake: calm, no glow, no confetti. */
.hr-back{position:absolute;left:50%;white-space:nowrap;top:var(--hr-y,330px);transform:translate3d(-50%,-50%,0) scale(.96);opacity:0;padding:12px 22px;border-radius:999px;background:var(--hl-surface);box-shadow:inset 0 0 0 1px var(--hl-line);
 font:700 26px/1 var(--hl-mono);color:#fff;font-variant-numeric:tabular-nums;transition:transform .2s ease-out,opacity .2s linear}
.hr-win.back.on .hr-back{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
/* Held prizes (4.54.0): round.prize puts a small box in the tray (top left); round.prizeReveal opens it centre stage. */
.hr-box{position:relative;width:var(--hr-box,120px);height:var(--hr-box,120px)}
.hr-box.mini{--hr-box:34px}
.hr-box.big{--hr-box:clamp(118px,34vw,150px)}
.hr-box-img{width:100%;height:100%;object-fit:contain}
.hr-box-body{position:absolute;left:8%;right:8%;bottom:0;height:68%;border-radius:12% 12% 16% 16%;
 background:linear-gradient(90deg,transparent 41%,var(--hl-gold-2) 41% 59%,transparent 59%),linear-gradient(180deg,#c99bff 0%,var(--hb-purple,#b77df8) 45%,var(--hb-purple-shade,#6e4e97) 100%);
 box-shadow:inset 0 -6px 0 rgba(40,20,80,.35),inset 0 3px 0 rgba(255,255,255,.35)}
.hr-box-lid{position:absolute;left:0;right:0;top:10%;height:28%;border-radius:14%/40%;transform-origin:20% 100%;
 background:linear-gradient(90deg,transparent 39%,var(--hl-gold-1) 39%,var(--hl-gold-2) 50%,var(--hl-gold-3) 61%,transparent 61%),linear-gradient(180deg,#e3c8ff 0%,#c99bff 55%,var(--hb-purple,#b77df8) 100%);
 box-shadow:inset 0 -4px 0 rgba(40,20,80,.3)}
.hr-box-lid::before,.hr-box-lid::after{content:"";position:absolute;bottom:92%;width:30%;height:52%;border:max(3px,.06em) solid var(--hl-gold-2);border-radius:50% 50% 10% 50%;left:20%;transform:rotate(-18deg)}
.hr-box-lid::after{left:auto;right:20%;border-radius:50% 50% 50% 10%;transform:rotate(18deg)}
.hr-box-mark{position:absolute;left:0;right:0;bottom:12%;text-align:center;font:800 calc(var(--hr-box) * .38)/1 var(--hl-display);color:#fff;text-shadow:0 2px 0 rgba(60,30,110,.55)}
.hr-box.mini .hr-box-lid::before,.hr-box.mini .hr-box-lid::after{border-width:2px}
.hr-prize-tray,.hr-prize-fly{position:absolute;left:0;top:0;will-change:transform}
.hr-prize-tray{padding:6px;border-radius:14px;background:rgba(10,12,18,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hr-prize-count{position:absolute;right:-8px;top:-8px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--hl-gold-2);color:var(--hl-coin-ink);font:800 13px/22px var(--hl-display);text-align:center}
.hr-prize-count[hidden]{display:none}
.hr-prize-stage{position:absolute;inset:0;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity .2s linear}
.hr-prize-stage.on{opacity:1}
.hr-prize-stage.out{opacity:0;transition:opacity .26s linear}
.hr-prize-dim{position:absolute;inset:0;background:rgba(6,7,10,.58)}
.hr-prize-rays{position:absolute;left:50%;top:var(--hr-py,390px);width:min(150vw,640px);height:min(150vw,640px);margin:calc(min(150vw,640px) / -2) 0 0 calc(min(150vw,640px) / -2);border-radius:50%;opacity:0;
 background:radial-gradient(closest-side,rgba(255,236,170,.55),rgba(255,236,170,.12) 45%,transparent 70%),repeating-conic-gradient(rgba(255,226,140,.22) 0 9deg,transparent 9deg 22.5deg);
 -webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent);transform:scale(.6) rotate(0);transition:opacity .25s linear,transform .5s cubic-bezier(.2,1.4,.4,1)}
.hr-prize-stage.on .hr-prize-rays{opacity:.45;transform:scale(.85);animation:hr-spin 9s linear infinite}
.hr-prize-stage.open .hr-prize-rays{opacity:1;transform:scale(1.05)}
@keyframes hr-spin{to{rotate:360deg}}
.hr-prize-title{position:absolute;left:0;right:0;top:calc(var(--hr-py,390px) - 132px);text-align:center;font:500 13px/1 var(--hl-mono);letter-spacing:.16em;color:#fff}
.hr-prize-stage .hr-box.big{position:absolute;left:50%;top:var(--hr-py,390px);margin:calc(var(--hr-box) / -2) 0 0 calc(var(--hr-box) / -2);animation:hr-bob 1.6s ease-in-out infinite}
@keyframes hr-bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hr-prize-stage.opening .hr-box.big{animation:hr-shake .75s cubic-bezier(.36,.07,.19,.97) both}
@keyframes hr-shake{0%{rotate:0deg;scale:1}15%{rotate:-6deg}30%{rotate:7deg;scale:1.04}45%{rotate:-9deg}60%{rotate:10deg;scale:1.09}75%{rotate:-12deg}90%{rotate:12deg;scale:1.15}100%{rotate:0deg;scale:1.2}}
.hr-prize-stage.open .hr-box.big{animation:hr-burst .42s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes hr-burst{0%{scale:1.2;opacity:1}100%{scale:1.6;opacity:0}}
.hr-prize-stage.open .hr-box-lid{animation:hr-lid .42s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes hr-lid{to{transform:translate3d(10%,-120%,0) rotate(-35deg)}}
.hr-prize-amount{position:absolute;left:0;right:0;top:var(--hr-py,390px);transform:translate3d(0,-50%,0) scale(.3);opacity:0;text-align:center;
 font:800 clamp(56px,17vw,84px)/1 var(--hl-display);letter-spacing:-.03em;color:var(--hl-win);font-variant-numeric:tabular-nums;text-shadow:0 3px 0 rgba(10,40,20,.45)}
.hr-prize-stage.open .hr-prize-amount{animation:hr-amount .5s cubic-bezier(.2,1.5,.4,1) .08s forwards}
@keyframes hr-amount{0%{transform:translate3d(0,-50%,0) scale(.3);opacity:0}60%{transform:translate3d(0,-50%,0) scale(1.15);opacity:1}100%{transform:translate3d(0,-50%,0) scale(1);opacity:1}}
.hr-prize-hint{position:absolute;left:50%;top:calc(var(--hr-py,390px) + 104px);transform:translate3d(-50%,0,0);white-space:nowrap;padding:12px 22px;border-radius:999px;background:var(--hl-gold-2);color:var(--hl-coin-ink);
 font:800 18px/1 var(--hl-display);box-shadow:inset 0 -3px 0 rgba(150,95,10,.45);animation:hr-pulse 1.1s ease-in-out infinite;transition:opacity .15s linear}
@keyframes hr-pulse{0%,100%{scale:1}50%{scale:1.06}}
.hr-prize-stage.opening .hr-prize-hint{opacity:0}
.hr-prize-stage .hr-confetti{z-index:0}
@media(prefers-reduced-motion:reduce){.hr-main,.hr-back,.hbet-panel{transition:none}.hr-win.landed .hr-count{animation:none}.hr-prize-stage .hr-box.big,.hr-prize-stage.opening .hr-box.big,.hr-prize-stage.open .hr-box.big,.hr-prize-stage.open .hr-box-lid,.hr-prize-stage .hr-prize-hint,.hr-prize-stage.on .hr-prize-rays,.hr-prize-stage.open .hr-prize-amount{animation:none}.hr-prize-stage.open .hr-box.big{opacity:0}.hr-prize-stage.open .hr-prize-amount{transform:translate3d(0,-50%,0);opacity:1}}
@media(prefers-reduced-motion:reduce){.hr-main,.hr-back,.hbet-panel{transition:none}.hr-win.landed .hr-count{animation:none}}

/* ---------- Motion (4.56.0): the founder's motion lab, in the shared layers ----------
   Timings and curves from orchestrator/brand/hobbi-design-package-2026-10-27/hobbi-motion-lab. Transform and opacity
   only (plus a short brightness pulse on the win's edge). Under prefers-reduced-motion nothing loops or shakes. */
:root{--hl-ease-out:cubic-bezier(.23,1,.32,1);--hl-ease-spring:cubic-bezier(.34,1.56,.64,1);--hl-lip:#07080d;--hl-face:var(--hl-raised);--hobbi-z-under:38}
/* Keycaps: chips sink 5 px (scale .96), buttons 6 px (scale .98), the lip collapses; 70 ms ease-out. The release
   overshoot (−3 px, 260 ms) and the primary's sparkle ring are hobbi-motion.js keycap(). */
.hbet-panel :is(.hbet-preset,.hbet-btn,.hbet-option){--hl-key-depth:5px;box-shadow:inset 0 0 0 1px var(--hl-line),0 5px 0 var(--hl-lip);transition:transform 70ms ease-out,box-shadow 70ms ease-out,background .15s;margin-bottom:5px}
.hbet-preset[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--hl-accent),0 5px 0 var(--hl-accent-shade)}
.hbet-preset[data-down],.hbet-btn[data-down],.hbet-option[data-down]{transform:translateY(5px) scale(.96);box-shadow:inset 0 0 0 1px var(--hl-line),0 0 0 var(--hl-lip)}
.hbet-primary{--hl-key-depth:6px;box-shadow:0 6px 0 var(--hl-accent-shade),inset 0 1px 0 var(--hl-accent-gloss);margin-bottom:6px;overflow:visible}
.hbet-primary[data-down]{transform:translateY(6px) scale(.98);box-shadow:0 0 0 transparent,inset 0 1px 0 var(--hl-accent-gloss)}
.hbet-preset:active,.hbet-btn:active,.hbet-primary:active{transform:none}
.hbet-preset[data-down]:active,.hbet-btn[data-down]:active{transform:translateY(5px) scale(.96)}
.hbet-primary[data-down]:active{transform:translateY(6px) scale(.98)}
.hl-ring{position:absolute;inset:-6px;border-radius:inherit;border:3px solid var(--hl-accent-gloss);pointer-events:none}
/* The amount's digit reels over the field (hidden while typing). */
.hbet-panel[data-custom] .hbet-custom{position:relative}
.hbet-amt{position:absolute;left:0;top:0;height:44px;width:calc(100% - 92px);display:flex;align-items:center;padding:0 6px;font:500 16px/1 var(--hl-mono);letter-spacing:-.02em;color:var(--hl-text);pointer-events:none;overflow:hidden;font-variant-numeric:tabular-nums}
.hbet-custom:not([data-roll]) .hbet-amt{display:none}
.hbet-custom[data-roll] .hbet-field{color:transparent}
.hbet-custom[data-roll] .hbet-field:focus{color:var(--hl-text)}
.hl-reel{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.hl-strip{display:block;white-space:pre;line-height:1em;will-change:transform}
/* Slide to play: the track replaces BET. Fill blue → purple → pink → green with a dot texture, notches at 25/50/75 %,
   the dashed line at 90 %, the star in the thumb. */
.hbet-panel[data-sliding=true] .hbet-primary{display:none}
.hbet-slide[hidden]{display:none}
.hs-track{position:relative;height:72px;border-radius:999px;background:var(--hl-well);box-shadow:inset 0 3px 0 #05060a;touch-action:none}
.hs-track[data-tremble=true]{animation:hs-shake 90ms linear infinite}
@keyframes hs-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px) rotate(-.3deg)}75%{transform:translateX(1.5px) rotate(.3deg)}}
.hs-fill{position:absolute;left:0;top:0;bottom:0;width:74px;border-radius:999px;overflow:hidden;opacity:1;transition:opacity .15s}
.hs-track[data-stage=idle] .hs-fill{opacity:.25}
.hs-fill::before{content:"";position:absolute;inset:0;width:var(--hs-tw,360px);background:linear-gradient(90deg,#3faff3 0%,#b77df8 45%,#fa78b2 75%,#4fd57f 92%)}
.hs-fill::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(10,12,18,.32) 1.3px,transparent 1.6px);background-size:5px 5px}
.hs-notch{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#2a3042;transition:background .12s,transform .2s var(--hl-ease-spring),box-shadow .2s,opacity .12s;z-index:1}
/* The notches sit where the idle label is ("Find a 5 HC match"), so they come in as the label goes out. */
.hs-track[data-stage=idle] .hs-notch{opacity:0}
.hs-notch[data-lit=true]{background:#fff;transform:scale(1.4);box-shadow:0 0 10px #fff}
.hs-line{position:absolute;top:10px;bottom:10px;width:0;border-left:2px dashed rgba(255,255,255,.22);z-index:1;transition:border-color .15s}
.hs-line[data-lit=true]{border-color:var(--hl-win)}
.hs-label{position:absolute;inset:0;display:flex;align-items:center;padding-left:82px;font:800 21px/1 var(--hl-display);color:var(--hl-accent);white-space:nowrap;padding-top:3px;z-index:1;pointer-events:none;transition:opacity .12s}
.hs-track:not([data-stage=idle]) .hs-label{opacity:0}
.hs-chev{display:inline-flex;margin-left:8px;letter-spacing:-3px}
.hs-chev i{font-style:normal;opacity:.25;animation:hs-chev 1.2s infinite}
.hs-chev i:nth-child(2){animation-delay:.15s}.hs-chev i:nth-child(3){animation-delay:.3s}
@keyframes hs-chev{0%,100%{opacity:.2}30%{opacity:1}}
.hs-thumb{position:absolute;left:6px;top:5px;width:62px;height:62px;border-radius:50%;background:var(--hl-face);border:1px solid rgba(255,255,255,.08);box-shadow:0 5px 0 #05060a;display:grid;place-items:center;cursor:grab;z-index:2;touch-action:none;will-change:transform;outline-offset:3px}
.hs-track[data-stage=idle] .hs-thumb{animation:hs-breathe 1.8s ease-in-out infinite}
@keyframes hs-breathe{0%,100%{scale:1}50%{scale:1.05}}
.hs-track[data-stage=armed] .hs-thumb,.hs-track[data-stage=launch] .hs-thumb{box-shadow:0 5px 0 #05060a,0 0 0 4px var(--hl-win),0 0 26px var(--hl-win)}
.hs-thumb[aria-disabled=true]{cursor:default;opacity:.6}
.hs-star{display:block;width:52px;height:52px}
.hs-star canvas{display:block;width:52px;height:52px;image-rendering:pixelated}
.hs-spark{position:absolute;width:6px;height:6px;border-radius:2px;z-index:1;pointer-events:none}
.hs-callout{position:absolute;left:0;bottom:84px;z-index:3;pointer-events:none;white-space:nowrap}
.hs-callout[hidden]{display:none}
.hs-callout span{position:relative;display:block;padding:9px 14px 6px;border-radius:14px;font:800 18px/1 var(--hl-display);color:#06121c;background:var(--hs-cc,#3faff3);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.hs-callout span::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--hs-cc,#3faff3)}
.hs-callout[data-tone=purple]{--hs-cc:#b77df8}.hs-callout[data-tone=pink]{--hs-cc:#fa78b2}.hs-callout[data-tone=orange]{--hs-cc:#fea247}.hs-callout[data-tone=green]{--hs-cc:#4fd57f}
/* The panel drops away on the launch: 380 ms ease-in (motion lab). */
.hbet-panel[data-state=hidden]{transition:transform .38s cubic-bezier(.5,0,.75,0),opacity .38s}
.hbet-go{position:fixed;left:0;right:0;top:32%;z-index:var(--hobbi-z-fx,60);text-align:center;font:800 96px/1 var(--hl-display);color:#fff;-webkit-text-stroke:5px var(--hl-well);paint-order:stroke fill;text-shadow:0 8px 0 var(--hl-well);pointer-events:none;opacity:0}
.hbet-enter{position:fixed;inset:0;z-index:var(--hobbi-z-mult,35);background:#fff;opacity:0;pointer-events:none}
/* The ribbon coin: two rainbow ribbons, the value in bold shiny gold (Param P3). */
.hl-coin{position:absolute;left:0;top:0;width:80px;height:80px;display:grid;place-items:center;pointer-events:none;will-change:transform,opacity}
.hl-coin svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hl-coin b{position:relative;font:800 18px/1 var(--hl-font);letter-spacing:-.02em;background:linear-gradient(180deg,#fff7c2 0%,#f8d96a 38%,#e3a91f 62%,#fff0a8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 1.5px 0 #6b4a05)}
.hl-spin{transform-origin:50% 50%;animation:hl-spin .9s linear infinite}
@keyframes hl-spin{to{transform:rotate(360deg)}}
.hl-coin.hr-coin{min-width:0;padding:0;border-radius:0;background:none;box-shadow:none}
.hl-coin.plain{width:56px;height:56px}
.hr-trail{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:#f2c14e;box-shadow:0 0 10px #f2c14e}
.hr-bits{position:absolute;left:0;top:0}
.hr-bit{position:absolute;left:-4px;top:-6px;width:8px;height:13px;border-radius:2px}
.hl-hot{box-shadow:0 0 0 3px #f2c14e,0 0 24px rgba(242,193,78,.7)}
/* The win, under the bet panel: the game dims, the vignette closes in, the dithered edge glows green. */
.hr-under{position:fixed;inset:0;pointer-events:none;z-index:var(--hobbi-z-under,38);contain:strict}
.hr-under.hr-under .hr-dim{position:absolute;inset:0;top:0;height:auto;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.hr-under.on .hr-dim{opacity:1}
.hr-vig{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 44%,transparent 35%,rgba(0,0,0,.88) 100%);opacity:0;transition:opacity 2.4s}
.hr-under.on .hr-vig{opacity:1}
.hr-under.landed .hr-vig{opacity:.35;transition:opacity .6s}
.hr-edge{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease-in .15s,transform 1.4s var(--hl-ease-out) .15s}
.hr-under.small .hr-edge{transition-duration:.3s;transition-delay:0s}
.hr-under.on .hr-edge{opacity:1;transform:scale(1)}
.hr-under.breath .hr-edge{opacity:.45;transition:opacity .2s}
.hr-under.landed .hr-edge{opacity:1;animation:hr-edgepulse 1.2s ease-in-out infinite}
@keyframes hr-edgepulse{50%{opacity:.65}}
.hr-under.out,.hr-win.out{opacity:0;transition:opacity .28s linear}
.hr-under.back .hr-dim{transition:opacity .5s}
/* Above: badge, the dither number, the line under it, the star, the flash and the shockwaves. */
.hr-layer .hr-win .hr-main{gap:4px;transform:translate3d(0,-50%,0);opacity:1;transition:none}
.hr-badge{display:block;background:var(--hl-surface);color:#fff;border:2px solid rgba(255,255,255,.14);font:800 19px/1 var(--hl-display);padding:9px 18px 6px;border-radius:999px;box-shadow:0 4px 0 #04050a;opacity:0}
/* A page's own badge words (winTitle, 4.59.0): bigger and in the win green, e.g. Crash's CASHED OUT AT 3.42×. */
.hr-badge.own{font-size:24px;padding:11px 22px 8px;color:var(--hb-win,#4fd57f);letter-spacing:.01em}
.hr-num{display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;transform:scale(.82);filter:drop-shadow(0 4px 0 rgba(0,0,0,.6))}
.hr-main.rolling .hr-num{opacity:1;transform:scale(1);transition:opacity .2s,transform 2.25s cubic-bezier(.5,0,.75,0)}
.hr-win.small .hr-main.rolling .hr-num{transition:opacity .2s,transform 1.1s cubic-bezier(.5,0,.75,0)}
.hr-layer .hr-win .hr-main.breath .hr-num{transform:scale(1.06);transition:transform .24s var(--hl-ease-out)}
.hr-layer .hr-win.landed .hr-main .hr-num{transform:scale(1);filter:drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(79,213,127,.75))}
.hr-num.chroma{filter:drop-shadow(-6px 0 0 rgba(252,88,85,.9)) drop-shadow(6px 0 0 rgba(63,175,243,.9))}
.hr-roll{display:block;image-rendering:pixelated}
.hr-win .hr-mult{opacity:0;transform:translateY(8px);transition:opacity .4s var(--hl-ease-out),transform .4s var(--hl-ease-out);font:600 16px/1.2 var(--hl-font);color:#dfe4ee}
.hr-win .hr-mult.on{opacity:1;transform:none}
.hr-star{position:absolute;left:50%;top:calc(var(--hr-y,330px) - 190px);width:88px;height:88px;margin-left:-44px}
.hr-star canvas{display:block;width:88px;height:88px;image-rendering:pixelated;opacity:0}
.hr-flash{position:absolute;inset:0;background:#f4fff8;opacity:0}
.hr-shock{position:absolute;left:50%;top:var(--hr-y,330px);width:40px;height:40px;border-radius:50%;border:8px solid #d4f7e0;opacity:0}
.hr-shock.two{border-color:var(--hl-win)}
.hr-layer .hr-win.back .hr-back{display:grid;gap:6px;justify-items:center;background:none;box-shadow:none;padding:0;transition:opacity .5s}
.hr-back-num{font:800 min(64px,12.5vw)/1 var(--hl-display);color:#c3c9d6}
.hr-back-sub{font:600 15px/1 var(--hl-font);color:var(--hl-label)}
@media(prefers-reduced-motion:reduce){.hl-spin,.hs-chev i,.hs-track[data-tremble=true],.hs-track[data-stage=idle] .hs-thumb,.hr-under.landed .hr-edge{animation:none}.hr-under.hr-under .hr-vig,.hr-under.hr-under .hr-edge,.hr-layer .hr-win .hr-main.rolling .hr-num{transition:none}}

/* ---------- Direction D (4.56.0): the bet panel's static look, D02 in the round, D07 forfeit sheet ----------
   orchestrator/brand/hobbi-design-package-2026-10-27/hobbi-directions (D01, D02, D05, D07, D34): a dark keycap panel,
   chips in a full row, ½ · amount · 2× as a stepper, slide to play. Solid brand surfaces (glass stays on the nav). */
.hbet-panel{--hd-surface:#151924;--hd-face:#222839;--hd-lip:#07080d;--hd-well:#0f121b;--hd-soft:#a3abbd;--hd-ink:#eef1f7;--hd-accent:var(--hb-accent,#3faff3);--hd-accent-deep:#296a94;--hd-accent-hi:#c9e9fc;
 background:var(--hd-surface);border:1px solid rgba(255,255,255,.07);border-radius:30px;padding:14px;gap:10px;box-shadow:0 7px 0 #04050a,0 20px 34px rgba(0,0,0,.5)}
.hbet-label{height:auto;padding:0 4px;font:600 13px/1.2 var(--hl-font);letter-spacing:0;text-transform:none;color:var(--hd-soft)}
.hbet-label b{color:var(--hd-ink)}
.hbet-bal[hidden],.hbet-towin[hidden]{display:none}
.hbet-panel[data-custom] .hbet-row{grid-template-columns:1fr;gap:10px}
.hbet-presets{gap:8px}
.hbet-panel .hbet-preset{height:54px;border-radius:17px;background:var(--hd-face);color:var(--hd-ink);border:1px solid rgba(255,255,255,.05);font:800 23px/1 var(--hl-display);padding-top:4px;box-shadow:0 5px 0 var(--hd-lip),inset 0 1px 0 rgba(255,255,255,.09)}
.hbet-panel .hbet-preset[aria-pressed=true]{background:var(--hd-accent);color:#06121c;box-shadow:0 5px 0 var(--hd-accent-deep),inset 0 1px 0 var(--hd-accent-hi)}
.hbet-panel .hbet-preset[data-down]{transform:translateY(5px) scale(.96);box-shadow:0 0 0 var(--hd-lip),inset 0 1px 0 rgba(255,255,255,.09)}
.hbet-panel .hbet-bid{font-size:17px;color:#fea247;background:#3a2410}
.hbet-panel .hbet-bid[aria-pressed=true]{background:#fea247;color:#1a0e02;box-shadow:0 5px 0 #8a5216}
.hbet-panel[data-custom] .hbet-custom{grid-template-columns:52px 1fr 52px;gap:8px}
.hbet-panel .hbet-btn{height:44px;border-radius:14px;background:var(--hd-face);color:var(--hd-ink);font:800 19px/1 var(--hl-display);border:1px solid rgba(255,255,255,.05);box-shadow:0 5px 0 var(--hd-lip),inset 0 1px 0 rgba(255,255,255,.09)}
.hbet-panel .hbet-btn[data-down]{transform:translateY(5px) scale(.96);box-shadow:0 0 0 var(--hd-lip)}
.hbet-fieldbox{position:relative;display:block;min-width:0}
.hbet-panel .hbet-custom .hbet-field{width:100%;height:44px;border-radius:14px;background:var(--hd-well);box-shadow:inset 0 2px 0 #05060a;text-align:center;font:800 22px/1 var(--hl-display);padding:3px 6px 0}
.hbet-panel .hbet-fieldbox .hbet-amt{left:0;right:0;width:auto;justify-content:center;font:800 22px/1 var(--hl-display);padding-top:3px}
.hbet-note b,.hbet-note .win{color:var(--hl-win)}
/* D02: in the round the panel keeps its surface: Stake · Next row, then Keep going + Cash out. */
.hbet-panel:is([data-state=cashout],[data-state=cashing],[data-state=leave]){background:var(--hd-surface);border-color:rgba(255,255,255,.07)}
.hbet-live{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:14px;background:var(--hd-well);font:600 14px/1 var(--hl-font);color:var(--hd-soft)}
.hbet-live b{color:var(--hd-ink)}
.hbet-live[hidden]{display:none}
.hbet-actions{display:flex;gap:10px}
.hbet-actions>*{flex:1}
.hbet-panel .hbet-actions .hbet-primary{flex:1.5}
.hbet-keep{height:62px;border:0;border-radius:999px;background:var(--hd-face);color:var(--hd-ink);font:800 22px/1 var(--hl-display);padding-top:4px;box-shadow:0 6px 0 var(--hd-lip),inset 0 1px 0 rgba(255,255,255,.09);margin-bottom:6px;cursor:pointer;transition:transform 70ms ease-out,box-shadow 70ms ease-out}
.hbet-keep[hidden]{display:none}
.hbet-keep[data-down]{transform:translateY(6px) scale(.98);box-shadow:0 0 0 transparent}
.hbet-panel .hbet-actions .hbet-primary{height:62px;border-radius:999px;font:800 22px/1 var(--hl-display);padding-top:4px;box-shadow:0 6px 0 var(--hd-accent-deep),inset 0 1px 0 var(--hd-accent-hi)}
.hbet-panel[data-state=cashout]::before{bottom:20px;height:58px;border-radius:999px}
/* The result card (D04 / D17) stands in for the panel. */
.hbet-panel[data-receipt=true]{transform:translate3d(0,140%,0);opacity:0;pointer-events:none}
/* Forfeit (D02) and its confirm sheet (D07). */
.hbet-forfeit{position:fixed;left:12px;top:calc(var(--sa-safe-top,env(safe-area-inset-top,0px)) + 64px);z-index:var(--hobbi-z-panel,40);display:flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border:1px solid rgba(255,255,255,.06);border-radius:999px;background:#151924;color:#fc5855;font:700 15px/1 var(--hl-font);box-shadow:0 4px 0 #04050a;cursor:pointer}
.hbet-forfeit[hidden]{display:none}
.hbet-forfeit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.hbet-sheet{position:fixed;inset:0;z-index:var(--hobbi-z-sheet,50)}
.hbet-sheet-veil{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hbet-sheet-card{position:absolute;left:0;right:0;bottom:0;display:grid;gap:12px;padding:12px 16px calc(20px + var(--hl-safe-bottom));border-radius:30px 30px 0 0;background:#151924;border-top:1px solid rgba(255,255,255,.1);color:#eef1f7;font-family:var(--hl-font)}
.hbet-sheet-star{position:absolute;left:50%;top:-58px;width:72px;height:72px;margin-left:-36px}
.hbet-sheet-star canvas{width:72px;height:72px;image-rendering:pixelated}
.hbet-grab{display:block;width:40px;height:5px;border-radius:9px;background:#2a3042;margin:0 auto 6px}
.hbet-sheet-card h2{margin:0;font:800 28px/1.05 var(--hl-display)}
.hbet-sheet-card p{margin:0 0 6px;font:500 15px/1.4 var(--hl-font);color:#c3c9d6}
.hbet-sheet-card button{height:58px;border:0;border-radius:999px;font:800 21px/1 var(--hl-display);padding-top:3px;cursor:pointer;position:relative;transition:transform 70ms ease-out,box-shadow 70ms ease-out}
.hbet-sheet-keep{background:var(--hb-accent,#3faff3);color:#06121c;box-shadow:0 6px 0 #296a94,inset 0 1px 0 #c9e9fc}
.hbet-sheet-go{background:#222839;color:#fc5855;box-shadow:0 6px 0 #07080d,inset 0 1px 0 rgba(255,255,255,.09)}
.hbet-sheet-card button[data-down]{transform:translateY(6px) scale(.98);box-shadow:none}
/* Win (D03): "Tap to continue" under the celebration; the result card (D04 win, D17 small return). */
.hr-tap{position:absolute;left:0;right:0;bottom:calc(var(--hobbi-bet-h,220px) + 18px);text-align:center;font:600 14px/1 var(--hl-font);color:rgba(238,241,247,.6);opacity:0;transition:opacity .4s .8s}
.hr-win.on .hr-tap{opacity:1}
.hr-win.receipt .hr-tap{display:none}
/* The result card takes over: the win's line steps aside so it never sits on the card's header (4.62.0). */
.hr-win.receipt .hr-mult{opacity:0;transition:opacity .12s}
.hr-win.receipt .hr-star{transition:opacity .3s}
.hr-receipt{position:absolute;left:14px;right:14px;bottom:calc(18px + var(--hl-safe-bottom));pointer-events:auto;display:grid;gap:10px;padding:18px 20px 20px;border-radius:26px;background:#151924;border:1px solid rgba(255,255,255,.08);box-shadow:0 7px 0 #04050a,0 20px 34px rgba(0,0,0,.5);color:#eef1f7;font-family:var(--hl-font)}
.hr-rc-head{position:relative;display:flex;align-items:center;gap:12px;min-height:52px}
.hr-rc-icon{width:44px;height:44px;image-rendering:pixelated}
.hr-rc-names{display:grid;gap:3px}
.hr-rc-title{font:800 22px/1 var(--hl-display);padding-top:2px}
.hr-rc-kind{font:500 13px/1 var(--hl-font);color:#a3abbd}
.hr-rc-paid{position:absolute;right:-4px;top:-8px;width:84px;height:84px;border-radius:50%;border:3px solid var(--hl-win);box-shadow:inset 0 0 0 5px #151924,inset 0 0 0 7px rgba(79,213,127,.6);display:grid;place-items:center;font:800 18px/1 var(--hl-display);letter-spacing:.06em;color:var(--hl-win);transform:rotate(-14deg)}
.hr-rc-rule{display:block;height:0;border-top:2px dashed rgba(255,255,255,.12);margin:2px -4px}
.hr-rc-row{display:flex;justify-content:space-between;align-items:baseline;font:600 16px/1.2 var(--hl-font);color:#a3abbd}
.hr-rc-row b{font:800 19px/1 var(--hl-display);color:#eef1f7}
.hr-rc-row.big{color:#eef1f7}
.hr-rc-row.big b{font-size:38px;color:var(--hl-win)}
.hr-rc-row.net b{color:#a3abbd}
.hr-rc-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.hr-rc-btn{height:56px;border:0;border-radius:999px;font:800 20px/1 var(--hl-display);padding-top:3px;cursor:pointer;color:#eef1f7;background:#222839;box-shadow:0 6px 0 #07080d,inset 0 1px 0 rgba(255,255,255,.09)}
.hr-rc-btn.pri{background:var(--hb-accent,#3faff3);color:#06121c;box-shadow:0 6px 0 #296a94,inset 0 1px 0 #c9e9fc}
.hr-rc-btn:active{transform:translateY(6px) scale(.98);box-shadow:none}
/* The page's own result card (result(), 4.65.0; PvP): the outcome line, then the page's buttons (Exit + Double or nothing). */
.hr-rc-say{display:grid;gap:5px}
.hr-rc-say[hidden]{display:none}
.hr-rc-head-line{font:800 26px/1.05 var(--hl-display);padding-top:2px;color:#eef1f7}
.hr-rc-line{font:500 14px/1.35 var(--hl-font);color:#a3abbd}
.hr-rc-actions.page{grid-template-columns:auto minmax(0,1fr)}
.hr-rc-actions.page.one{grid-template-columns:minmax(0,1fr)}
.hr-rc-actions.page .hr-rc-btn{min-width:0;padding:3px 12px 0;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-rc-actions.page .hr-rc-btn.sec{padding:3px 20px 0}
.hr-rc-btn:disabled{opacity:.55;cursor:default}
.hr-rc-btn:disabled:active{transform:none}
.hr-rc-btn.pri.pulse{animation:hr-rc-pulse 1.1s ease-in-out infinite}
@keyframes hr-rc-pulse{50%{transform:scale(1.03);box-shadow:0 6px 0 #296a94,inset 0 1px 0 #c9e9fc,0 0 0 7px rgba(63,175,243,.3)}}
@media(prefers-reduced-motion:reduce){.hr-rc-btn.pri.pulse{animation:none}}
.hr-back-kicker{font:500 12px/1 var(--hl-mono);letter-spacing:.2em;color:#a3abbd}
.hr-layer .hr-win.back .hr-back{top:calc(var(--hr-y,330px) - 40px)}
/* 4.60.0 (Direction D04): the result card's "Play with friends" banner, under the card. Tapping it emits ui.squad; the feed opens squads. */
.hr-receipt.with-squad{bottom:calc(132px + var(--hl-safe-bottom))}
.hr-squad{position:absolute;left:14px;right:14px;bottom:calc(18px + var(--hl-safe-bottom));min-height:98px;pointer-events:auto;display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border:0;border-radius:24px;text-align:left;color:#fff;cursor:pointer;
 background:linear-gradient(115deg,#b18cf6 0%,#8d8ff4 45%,#5fb0f6 100%);box-shadow:0 7px 0 #3b3f86,0 18px 30px rgba(0,0,0,.45);font-family:var(--hl-font)}
.hr-sq-text{flex:1;display:grid;gap:5px;min-width:0}
.hr-sq-title{font:800 22px/1 var(--hl-display);padding-top:2px}
.hr-sq-sub{font:600 13px/1.2 var(--hl-font);color:rgba(255,255,255,.88)}
.hr-sq-faces{display:flex;gap:4px;margin-top:3px}
.hr-sq-faces img{width:22px;height:22px}
.hr-sq-btn{flex:none;height:50px;padding:3px 20px 0;border-radius:999px;background:#fff;color:#1a1f3a;font:800 17px/1 var(--hl-display);display:grid;place-items:center;box-shadow:0 5px 0 rgba(26,31,58,.35)}
.hr-squad:active .hr-sq-btn{transform:translateY(5px);box-shadow:none}
/* 4.60.0 (Direction D19): the live room leaderboard (hobbi-board.js). A plain card, not glass. */
.hbd-board{position:fixed;left:14px;right:14px;bottom:calc(14px + var(--hl-safe-bottom));z-index:var(--hobbi-z-board,36);pointer-events:none;padding:14px 12px 10px;border-radius:24px;background:rgba(21,25,36,.94);border:1px solid rgba(255,255,255,.07);box-shadow:0 6px 0 #04050a,0 18px 30px rgba(0,0,0,.45);color:var(--hl-text);font-family:var(--hl-font);font-variant-numeric:tabular-nums}
.hbd-board[hidden]{display:none}
.hbd-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 6px 8px}
.hbd-title{font:600 14px/1.1 var(--hl-font);color:#a3abbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbd-pot{font:600 14px/1 var(--hl-font);color:#a3abbd;white-space:nowrap}
.hbd-pot-v{font:800 22px/1 var(--hl-display);color:var(--hl-text)}
.hbd-rows{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hbd-row{display:grid;grid-template-columns:22px 34px 1fr auto;align-items:center;gap:10px;height:42px;padding:0 10px;border-radius:14px;border:1.5px solid transparent;font:700 16px/1 var(--hl-font)}
.hbd-row.you{background:rgba(63,175,243,.16);border-color:var(--hb-accent,#3faff3)}
.hbd-rank{font:800 16px/1 var(--hl-display);color:#a3abbd;text-align:center}
.hbd-row.you .hbd-rank{color:var(--hb-accent,#3faff3)}
.hbd-av{width:34px;height:34px;display:grid;place-items:center}
.hbd-face{width:30px;height:30px}
.hbd-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbd-score{font:800 18px/1 var(--hl-display)}
.hbd-row.out{color:#6d7487}
.hbd-row.out .hbd-av{opacity:.5}
.hbd-row.out .hbd-name{text-decoration:line-through;text-decoration-thickness:2px}
.hbd-row.out .hbd-score{font:italic 700 15px/1 var(--hl-font);text-decoration:line-through;text-decoration-thickness:2px}

/* 4.61.1: game pages style every canvas (canvas{position:absolute|fixed; inset:0; width:100%...} for their own scene),
   which pulled the layers' canvases out of flow (Coin Toss: the win number sat off to the right, clipped). The layers'
   own canvases are put back in flow here; their sizes are set inline. */
.hbet-sheet .hbet-sheet-card .hbet-sheet-star canvas{position:relative;inset:auto;margin:0;max-width:none;max-height:none;background:none}
.hr-layer .hr-win .hr-num .hr-roll{position:relative;inset:auto;margin:0;max-width:none;max-height:none;background:none}
.hr-layer .hr-win .hr-star canvas{position:relative;inset:auto;margin:0;max-width:none;max-height:none;background:none}
.hbet-panel .hs-track .hs-thumb .hs-star canvas{position:relative;inset:auto;margin:0;max-width:none;max-height:none;background:none}

/* ---------- The 80/20 rule (4.66.0, founder P0 2026-10-27) ----------
   "The game gets 80% of the screen height; the bet UI and the win UI together get at most 20%." At 390x844 the panel
   was 266-325 px (31-39%) and sat over the bottom of every Solo game (Plinko's buckets). mountBet marks a Solo panel
   [data-fit] and <html data-hobbi-fit=on>:
   1. The panel draws compact: no "Bet amount / Balance" line (the wallet is in the top bar), the settings (Rows, Mines,
      Risk...) side by side on one line, the chips and ½ · amount · 2× on one line, a shorter BET and slide. About 150 px.
   2. The game's stage ends at the panel's top (--hobbi-bet-h, measured while the whole panel shows, so it never jumps
      mid-round): Tyler's Unity canvas and the page's main canvas (FIT_STAGE in hobbi-bet.js). The page keeps its own top
      (mountBet copies it to --hobbi-stage-top) and gets a resize so canvas pages re-measure.
      Crash (lays itself out from the panel) and the chance boards (casino-look.css does the same) keep their own.
   3. The result card is compact too, in the same bottom strip where the panel was. */
.hbet-panel[data-fit]{left:8px;right:8px;bottom:calc(6px + var(--hl-safe-bottom));padding:8px;gap:6px;border-radius:22px}
.hbet-panel[data-fit] .hbet-label{display:none}
.hbet-panel[data-fit] .hbet-settings:not([hidden]){display:flex;gap:10px}
.hbet-panel[data-fit] .hbet-settings>.hbet-setting{flex:1 1 0;min-width:0}
/* biome-ignore lint/style/noDescendingSpecificity: the compact panel overrides the base setting sizes */
.hbet-panel[data-fit] .hbet-setting{gap:6px;padding:0 0 0 6px}
.hbet-panel[data-fit] .hbet-setting:has(.hbet-dec){grid-template-columns:minmax(0,1fr) 34px minmax(30px,44px) 34px}
.hbet-panel[data-fit] .hbet-setting-label{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbet-panel[data-fit] .hbet-setting-value{font-size:15px}
.hbet-panel[data-fit] .hbet-setting .hbet-btn{height:32px;border-radius:11px;font-size:16px;margin-bottom:4px;box-shadow:0 4px 0 var(--hd-lip),inset 0 1px 0 rgba(255,255,255,.09)}
.hbet-panel[data-fit] .hbet-choice{gap:4px;min-width:0}
.hbet-panel[data-fit] .hbet-option{height:32px;min-width:0;padding:0 9px;border-radius:11px;font-size:13px;margin-bottom:4px;box-shadow:inset 0 0 0 1px var(--hl-line),0 4px 0 var(--hl-lip)}
.hbet-panel[data-fit] .hbet-option[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--hl-accent),0 4px 0 var(--hl-accent-shade)}
.hbet-panel[data-fit] .hbet-row,.hbet-panel[data-fit][data-custom] .hbet-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.hbet-panel[data-fit][data-custom=false] .hbet-row{grid-template-columns:1fr}
.hbet-panel[data-fit] .hbet-presets{gap:5px}
.hbet-panel[data-fit] .hbet-preset{height:38px;border-radius:12px;font-size:17px;padding-top:3px;margin-bottom:4px;box-shadow:0 4px 0 var(--hd-lip),inset 0 1px 0 rgba(255,255,255,.09)}
.hbet-panel[data-fit] .hbet-preset[aria-pressed=true]{box-shadow:0 4px 0 var(--hd-accent-deep),inset 0 1px 0 var(--hd-accent-hi)}
.hbet-panel[data-fit] .hbet-preset[data-down],.hbet-panel[data-fit] .hbet-btn[data-down],.hbet-panel[data-fit] .hbet-option[data-down]{transform:translateY(4px) scale(.96)}
.hbet-panel[data-fit][data-custom] .hbet-custom{grid-template-columns:36px minmax(0,1fr) 36px;gap:5px}
.hbet-panel[data-fit] .hbet-custom .hbet-btn{height:38px;border-radius:12px;font-size:16px;margin-bottom:4px;box-shadow:0 4px 0 var(--hd-lip),inset 0 1px 0 rgba(255,255,255,.09)}
.hbet-panel[data-fit] .hbet-custom .hbet-field{box-sizing:border-box;height:38px;border-radius:12px;font-size:17px}
.hbet-panel[data-fit] .hbet-fieldbox .hbet-amt{height:38px;font-size:17px}
.hbet-panel[data-fit] .hbet-live{padding:7px 12px;font-size:13px}
.hbet-panel[data-fit] .hbet-actions{gap:8px}
.hbet-panel[data-fit] .hbet-actions .hbet-primary,.hbet-panel[data-fit] .hbet-keep{height:48px;font-size:20px;margin-bottom:5px}
.hbet-panel[data-fit] .hbet-actions .hbet-primary{box-shadow:0 5px 0 var(--hd-accent-deep),inset 0 1px 0 var(--hd-accent-hi)}
.hbet-panel[data-fit] .hbet-keep{box-shadow:0 5px 0 var(--hd-lip),inset 0 1px 0 rgba(255,255,255,.09)}
.hbet-panel[data-fit][data-state=cashout]::before{bottom:13px;height:46px}
.hbet-panel[data-fit] .hs-track{height:48px}
.hbet-panel[data-fit] .hs-fill{width:52px}
.hbet-panel[data-fit] .hs-thumb{left:6px;top:3px;width:42px;height:42px;box-shadow:0 4px 0 #05060a}
.hbet-panel[data-fit] .hs-star,.hbet-panel[data-fit] .hs-track .hs-thumb .hs-star canvas{width:36px;height:36px}
.hbet-panel[data-fit] .hs-label{padding-left:60px;font-size:18px}
.hbet-panel[data-fit] .hs-line{top:8px;bottom:8px}
.hbet-panel[data-fit] .hs-callout{bottom:58px}
/* The stage ends at the panel's top. */
/* biome-ignore lint/complexity/noImportantStyles: Unity and canvas pages size their stage with inline styles */
html[data-hobbi-fit=on] #unity-canvas{bottom:auto!important;height:calc(100% - var(--hobbi-stage-top,0px) - var(--hobbi-bet-h,0px))!important}
/* biome-ignore lint/complexity/noImportantStyles: Unity and canvas pages size their stage with inline styles */
html[data-hobbi-fit=on] body:not(.crash-v2) main.app:not(.chance)>canvas:is(#field,#tower){bottom:auto!important;height:calc(100% - var(--hobbi-stage-top,0px) - var(--hobbi-bet-h,0px))!important}
/* The result card, compact: name and PAID on one line, Stake · Multiplier · Won side by side, the two buttons. The
   "Play with friends" banner stays for PvP; a Solo card has no room for it under the 80/20 rule. */
.hr-receipt.fit,.hr-receipt.fit.with-squad{left:8px;right:8px;bottom:calc(6px + var(--hl-safe-bottom));grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;padding:10px 12px 10px;border-radius:22px}
.hr-receipt.fit>.hr-rc-head,.hr-receipt.fit>.hr-rc-actions{grid-column:1/-1}
.hr-receipt.fit .hr-rc-head{min-height:0;gap:8px}
.hr-receipt.fit .hr-rc-icon{width:24px;height:24px}
.hr-receipt.fit .hr-rc-names{display:flex;align-items:baseline;gap:8px}
.hr-receipt.fit .hr-rc-title{font-size:17px}
.hr-receipt.fit .hr-rc-kind{font-size:12px}
.hr-receipt.fit .hr-rc-paid{position:static;margin-left:auto;width:auto;height:auto;padding:4px 10px 3px;border-width:2px;border-radius:999px;box-shadow:none;font-size:13px;transform:rotate(-4deg)}
.hr-receipt.fit .hr-rc-rule{display:none}
.hr-receipt.fit .hr-rc-row{display:grid;gap:3px;justify-items:center;padding:6px 4px 5px;border-radius:12px;background:#0f121b;font-size:11px;line-height:1}
.hr-receipt.fit .hr-rc-row b{font-size:17px}
.hr-receipt.fit .hr-rc-row.big b{font-size:19px}
.hr-receipt.fit .hr-rc-actions{gap:8px;margin-top:2px}
.hr-receipt.fit .hr-rc-btn{height:44px;font-size:18px;box-shadow:0 5px 0 #07080d,inset 0 1px 0 rgba(255,255,255,.09);margin-bottom:5px}
.hr-receipt.fit .hr-rc-btn.pri{box-shadow:0 5px 0 #296a94,inset 0 1px 0 #c9e9fc}
.hr-receipt.fit~.hr-squad{display:none}