/* 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}
/* A refusal the player must see (game.notice, 4.83.0): a glass toast where the hint sits, tap to dismiss. */
.hbet-notice{position:fixed;left:16px;right:calc(16px + var(--rail-gutter,0px));bottom:calc(var(--hobbi-bet-h,170px) + 10px + var(--hl-safe-bottom));z-index:calc(var(--hobbi-z-panel,40) + 1);
 margin:0 auto;max-width:420px;box-sizing:border-box;padding:12px 16px;border-radius:16px;background:rgba(18,20,30,.92);box-shadow:inset 0 0 0 1.5px var(--hl-line-strong,rgba(255,255,255,.22)),0 8px 24px rgba(0,0,0,.45);
 text-align:center;font:600 15px/1.3 var(--hl-font);color:var(--hl-text,#fff);cursor:pointer;animation:hbet-notice-in .22s ease-out}
.hbet-notice[hidden]{display:none}
.hbet-notice:is([data-over=hidden],[data-over=cashout],[data-over=cashing],[data-over=leave]){bottom:calc(96px + var(--hl-safe-bottom))}
@keyframes hbet-notice-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hbet-notice{animation: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)}}
/* The PLAY button (4.103.0): a tap, never a double-tap zoom or a 300 ms wait; a pressed PLAY shows its wait with the
   same spinner as "Collecting…" until the round starts. */
.hbet-primary{touch-action:manipulation;-webkit-user-select:none;user-select:none}
/* No double-tap zoom anywhere on the panel (Sai 2026-11-02: a double tap on the panel moved the whole game). */
.hbet-panel{touch-action:manipulation}
.hbet-panel .hbet-primary[data-kind=betting]:disabled{opacity:.8}
.hbet-primary[data-kind=betting]::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}
@media(prefers-reduced-motion:reduce){.hbet-primary:is([data-kind=betting],[data-kind=cashing])::after{animation:none;border-right-color:currentColor;opacity:.6}}
/* 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}
@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-track[data-tremble=true] .hs-fill,.hs-track[data-tremble=true] .hs-line{animation:hs-shake 90ms linear infinite}
.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;overflow:hidden;text-overflow:ellipsis}
.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-track[data-wait=true] .hs-label{color:var(--hl-text-2,#c3c9d6);font:600 17px/1 var(--hl-font)}
.hs-track[data-wait=true] .hs-chev{display:none}
.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}
/* A PvP search (4.100.0): the thumb parked at the end, the track's words on its left, a tap cancels. */
.hs-track[data-search=true]{cursor:pointer}
.hs-track[data-stage=search] .hs-label{opacity:1;padding-left:24px;padding-right:80px;color:var(--hl-text-2,#c3c9d6);font:600 17px/1 var(--hl-font)}
.hs-track[data-stage=search] .hs-chev{display:none}
.hs-track[data-stage=search] .hs-notch{opacity:0}
.hs-track[data-stage=search] .hs-fill{opacity:.35}
.hs-track[data-stage=search] .hs-thumb{cursor:pointer;box-shadow:0 5px 0 #05060a,0 0 0 3px var(--hl-accent);animation:hs-breathe 1.8s ease-in-out infinite}
.hs-track.nudge{animation:hbet-nudge .42s cubic-bezier(.36,.07,.19,.97) both}
.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.handoff .hr-edge,.hr-under.handoff .hr-vig{opacity:0;animation:none;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){.hs-track.nudge{animation:hbet-nudge-ring .42s ease-out both}.hs-track[data-stage=search] .hs-thumb{animation:none}.hl-spin,.hs-chev i,.hs-track[data-tremble=true] .hs-fill,.hs-track[data-tremble=true] .hs-line,.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 pill's gloss stays inside the pill (4.103.0: the PLAY button is the default now; the square 14 px strip stuck out past
   its rounded ends). */
.hbet-panel .hbet-actions .hbet-primary::before{bottom:0;height:auto;border-radius:inherit;background:linear-gradient(var(--hl-accent-gloss) 0 14px,transparent 14px)}
/* 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). */
/* 4.100.3: "Tap to continue" shows as the win starts (it was .8 s in, 2.3-2.7 s after the settle), so within 2 s of the result there is something to press. */
.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 .25s}
.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 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). Since 4.97.0 its top is
      the feed's bar for every page (the safe stage below) and the page 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-track[data-stage=search] .hs-label{padding-left:18px;padding-right:58px;font-size:15px}
.hbet-panel[data-fit] .hs-line{top:8px;bottom:8px}
.hbet-panel[data-fit] .hs-callout{bottom:58px}
/* The safe stage (4.97.0, hobbi-stage.js; mountBet mounts it with the fit): the stage canvas fills the rect under the
   feed's top bar and above the panel's idle top, full width (--hobbi-stage-x is 0 unless the rail inset is on), the
   same top for every game. Pages used to pick their own top (y=0 under the bar, 58 or 76), so the boards sat at
   different heights; the inline styles their place() sets are overridden here. No transition (4.104.0): WebKit leaves a
   WebGL canvas blank when its top/height carry one (Peg Drop, Mines and Dice drew nothing at all), so the stage snaps. */
/* biome-ignore lint/complexity/noImportantStyles: Unity and canvas pages size their stage with inline styles */
html[data-hobbi-stage=on] :is(#unity-canvas,body:not(.crash-v2) main.app:not(.chance)>canvas:is(#field,#tower)){top:var(--hobbi-stage-t,0px)!important;bottom:auto!important;left:var(--hobbi-stage-x,0px)!important;right:auto!important;width:calc(100% - 2 * var(--hobbi-stage-x,0px))!important;height:calc(100% - var(--hobbi-stage-t,0px) - var(--hobbi-stage-b,0px))!important;transition:none!important}
/* In a round (html[data-round], feed-swipe.js: live, then over until the feed is idle again) the feed hides its bar. Which
   top the stage takes then is --hobbi-stage-round-t (Sai to pick, row 36):
   (B, default) 0: the stage grows under the hidden bar, full-screen play as in 4.65.0. It moves once, at the round's
       start (a .24 s transition), and once back at its end; never mid-round.
   (A) the idle top: a fixed stage, a band of page colour at the top in a round. ?stageband=1 on the feed or the page
       (html[data-hobbi-stage-band], hobbi-stage.js) picks it. */
html[data-hobbi-stage-band]{--hobbi-stage-round-t:var(--hobbi-stage-t,0px)}
/* biome-ignore lint/complexity/noImportantStyles: overrides the stage rule above, which overrides the pages' inline styles */
html[data-hobbi-stage=on][data-round] :is(#unity-canvas,body:not(.crash-v2) main.app:not(.chance)>canvas:is(#field,#tower)){top:var(--hobbi-stage-round-t,0px)!important;height:calc(100% - var(--hobbi-stage-round-t,0px) - var(--hobbi-stage-b,0px))!important}
/* No Solo game page scrolls, so none hands an overscroll on to the feed (audit P0-3 asked for it). Untested: the feed's
   root already has overscroll-behavior:none, emulation never reproduced the back swipe, and Android's edge-back gesture
   can't be blocked from CSS. Harmless; keep it until a real Android phone says otherwise. */
html:has(.hbet-panel),html:has(.hbet-panel) body{overscroll-behavior:none}
/* The result card, compact: name and PAID on one line, Stake · Multiplier · Won side by side, the two buttons. */
.hr-receipt.fit{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}
/* ---------- The wager panel from the designer's Figma "Hobbi", frame 2. Betting (4.112.0, 2026-11-02) ----------
   Rushil: "use the buttons in the figma everywhere ... copy the figma in terms of buttons and boxes". Figma wins over
   the written design guide wherever they differ. Visual and layout only: what the panel sends, the stake limits and
   the tap and slide behaviour are hobbi-bet.js's (Max, − and + only move the stake inside the limits, like ½ and 2×).
   Every value is mates-core design/figma/SPEC.md's (read from the Figma file's node properties, 2026-11-02: frames
   128:1429 "Betting & Results" and 152:11098 "Game entry · loading"), which replaced the earlier measurement off a PNG
   export. One Figma unit u = 1/894.29 of the phone's width (0.4395 px at 393 px, 0.4495 px at 402 px):
     a #1D1D1D panel 700 x 340u at x 97.15 (centred, like the feed's LCD), radius 26u, no shadow; padding 20u on top
       (to the title's text box) and 24u at the sides and the bottom; every inner gap 16u;
     "Wager", Archivo Regular 26u #B9B9B9, in a 28u text box;
     row 1, 80u: the amount field (raised #303030, r 16u; the amount Regular 34u, 24u in; − and + Regular 34u, their
       centres 54u apart and the + 37u in from the box's right edge), then ½, 2× and Max (#303030, r 16u, Regular 28u
       #FFF): 332 : 90.67 : 90.67 : 90.67;
     row 2, 60u: the four presets, 151u each, r 15u, Regular 28u #E8E8E8; the selected one #F1E5FF with #1D1D1D text;
     row 3, 80u: "Play for" (r 18u, #64377C -> #351342, border #A677BA at 65% 1u inside, Medium 30u #EBD1FF; insets
       0 5 3 #FFF/.18 and 0 -5 5 #170A20/.15, drop 0 10 15 #000/.3);
     the panel's bottom 58.73u above the tab bar (1660 to 1718.73).
   Loading (152:11606 "disabled while loading"): the whole panel at layer opacity 0.35, layout unchanged.
   Every Figma text layer is letter-spacing 0 and line-height auto. The Hobbi coin glyph stands where Figma writes "$"
   (the coin rule, mates-games #520). One layout for every panel (the Solo fit panel included: 149 px at 393 px wide,
   17.5% of an 852 px screen, inside the 80/20 rule). The controls are drawn at the frame's sizes; each button's hit area
   reaches half a gap past its box (::before, so a game's own ::after badge, such as the PvP lobby's "N waiting", keeps its text). Colours are the --hds-* tokens (hobbi-brand.css), with fallbacks.
   :not(#_) gives every rule here one id's weight, so it wins over the older layered rules above without !important; no
   element has the id "_". The opt-in slider (Slide to play) keeps its own look. */
.hbet-panel[data-ds]:not(#_){
 --w-u:calc(min(100vw,480px) / 894.29);
 --w-surface:var(--hds-canvas,#1d1d1d);--w-raised:var(--hds-raised,#303030);--w-border:var(--hds-border,#5e5e5e);
 --w-text:var(--hds-text,#fff);--w-text-2:var(--hds-text-2,#b9b9b9);--w-text-soft:var(--hds-text-soft,#e8e8e8);
 --w-brand:var(--hds-brand,#a100ff);--w-select:var(--hds-soft,#f1e5ff);--w-on-select:var(--hds-canvas,#1d1d1d);
 --w-p-top:var(--hds-primary-top,#64377c);--w-p-bottom:var(--hds-primary-bottom,#351342);--w-p-border:var(--hds-primary-border,rgb(166 119 186/.65));--w-p-label:var(--hds-primary-label,#ebd1ff);
 --w-n-top:var(--hds-neutral-top,#414349);--w-n-bottom:var(--hds-neutral-bottom,#202126);--w-n-border:var(--hds-neutral-border,rgb(105 107 115/.65));
 --w-font:var(--hds-font,"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);--w-track:var(--hds-tracking,0);--w-dim:var(--hds-dim,.35);
 --w-inset:calc(24 * var(--w-u));--w-inset-top:calc(20 * var(--w-u));--w-gap:calc(16 * var(--w-u));--w-label-h:calc(28 * var(--w-u));
 --w-amount-h:calc(80 * var(--w-u));--w-preset-h:calc(60 * var(--w-u));--w-primary-h:calc(80 * var(--w-u));--w-setting-h:calc(60 * var(--w-u));
 --w-radius:calc(26 * var(--w-u));--w-box-r:calc(16 * var(--w-u));--w-chip-r:calc(15 * var(--w-u));--w-primary-r:calc(18 * var(--w-u));--w-line:calc(1 * var(--w-u));
 --w-t-label:calc(26 * var(--w-u));--w-t-amount:calc(34 * var(--w-u));--w-t-ctl:calc(28 * var(--w-u));--w-t-chip:calc(28 * var(--w-u));--w-t-play:calc(30 * var(--w-u));
 /* The stake row (2026-11-04, mates-core wager-look.ts STAKE_U): the keys 120u wide, the glyph and the figure Medium 56u;
    the figure's colour for a change: success green up, the result's soft red down (result-look.ts). */
 --w-key:calc(120 * var(--w-u));--w-t-stake:calc(56 * var(--w-u));--w-up:var(--hds-success,#38a169);--w-down:#d47a74;
 /* Figma's effects (SPEC 1.4): Play for, and the tactile neutral (Play again's) for the panel's secondary actions. */
 --w-p-shadow:inset 0 calc(5 * var(--w-u)) calc(3 * var(--w-u)) rgba(255,255,255,.18),inset 0 calc(-5 * var(--w-u)) calc(5 * var(--w-u)) rgba(23,10,32,.15),0 calc(10 * var(--w-u)) calc(15 * var(--w-u)) rgba(0,0,0,.3);
 --w-n-shadow:inset 0 calc(2 * var(--w-u)) calc(2 * var(--w-u)) rgba(255,255,255,.18),0 calc(4 * var(--w-u)) calc(6 * var(--w-u)) rgba(0,0,0,.3);
 left:calc(97.145 * var(--w-u));right:calc(97.145 * var(--w-u));bottom:calc(58.73 * var(--w-u) + var(--hl-safe-bottom,0px));
 box-sizing:border-box;width:100%;max-width:calc(700 * var(--w-u));margin-inline:auto;
 padding:var(--w-inset-top) var(--w-inset) var(--w-inset);gap:var(--w-gap);border:0;border-radius:var(--w-radius);background:var(--w-surface);box-shadow:none;
 font:400 var(--w-t-ctl)/1.1 var(--w-font);letter-spacing:var(--w-track);color:var(--w-text);font-variant-numeric:tabular-nums}
/* One box on every page (4.113.0, QA D10): the panel is never wider than Figma's 700u and sits centred in whatever holds
   it. Floating (Solo) its left and right already make it 700u; placed in a page's own flow (the 1 vs 1 and Multi lobbies
   put it in #stakeFields, position static, in a bar 12 px from each edge) the max-width and auto margins give it the
   same 700u box and 97.145u insets instead of the bar's full width. Its rows, presets, Find a match, Cancel search and
   the lobby's own badges are unchanged. */
/* Wider than a phone (a desktop preview): the frame's width, centred. */
@media (min-width:481px){.hbet-panel[data-ds]:not(#_){left:calc(50% - 350 * var(--w-u));right:calc(50% - 350 * var(--w-u))}}
/* The wager at the panel's top centre (Sai 2026-11-04; mates-core src/lib/wager-look.ts titleGap): the caption centred,
   the stake row 4u under it (the row's own gap otherwise is 16u), and a lobby's chosen pot said big under the caption in
   the stake row's figure (.hbet-pot, hobbi-bet.js view.pot). */
.hbet-panel[data-ds]:not(#_) .hbet-label{display:flex;align-items:center;justify-content:center;gap:var(--w-gap);height:auto;min-height:var(--w-label-h);padding:0;font:400 var(--w-t-label)/var(--w-label-h) var(--w-font);letter-spacing:var(--w-track);text-transform:none;color:var(--w-text-2)}
.hbet-panel[data-ds]:not(#_) .hbet-pot{display:flex;align-items:center;justify-content:center;height:var(--w-amount-h);font:500 var(--w-t-stake)/1 var(--w-font);letter-spacing:var(--w-track);color:var(--w-text);font-variant-numeric:tabular-nums}
.hbet-panel[data-ds]:not(#_) .hbet-pot[hidden]{display:none}
.hbet-panel[data-ds]:is([data-state=cashout],[data-state=cashing],[data-state=leave]):not(#_) .hbet-pot{display:none}
.hbet-panel[data-ds]:not(#_) .hbet-label b{color:var(--w-text);font-weight:500}
/* In a round (COLLECT, Cashing out, Leave) the title and the amount rows step out, as the older rules mean (visibility
   and a zero height); here they leave the layout, so the title's 28u min-height leaves no empty band above the stake. */
.hbet-panel[data-ds]:is([data-state=cashout],[data-state=cashing],[data-state=leave]):not(#_) :is(.hbet-label,.hbet-row,.hbet-settings,.hbet-extra){display:none}
/* The balance sits in the top bar's pill in the frame, not in the panel ("To win" stays: a game's own line). */
.hbet-panel[data-ds]:not(#_) .hbet-bal{display:none}
.hbet-panel[data-ds]:not(#_) .hbet-settings[hidden]{display:none}
/* The rows (2026-11-04, Sai: "i know how much to bet, how can i increase and decrease bets easily"; the app's panel,
   mates-core BetPanel.tsx, draws the same): row 1 is the stake row, [ − ] the stake [ + ], the keys at its ends and the
   figure big between them; row 2 the quick amounts with Max as the last chip. ½ and 2× go (a hold on − or + repeats,
   hobbi-bet.js). The DOM keeps its order (presets, then ½ · field · 2× · Max): .hbet-row is the grid, its two groups
   display:contents, so the field box takes row 1 across every column and the chips with Max fill row 2 at equal
   columns (N presets + Max; a lobby without the field, data-custom=false, keeps N equal columns and no Max). */
.hbet-panel[data-ds]:not(#_) .hbet-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--w-gap)}
.hbet-panel[data-ds]:not([data-custom=false]):not(#_) .hbet-row:has(.hbet-preset:nth-child(2):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.hbet-panel[data-ds]:not([data-custom=false]):not(#_) .hbet-row:has(.hbet-preset:nth-child(3):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.hbet-panel[data-ds]:not([data-custom=false]):not(#_) .hbet-row:has(.hbet-preset:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
/* A lobby's fixed pots (no field, no Max): as many equal columns as chips (this rule, not the :has() ones above, which
   outweigh it, so they leave the lobby alone). */
.hbet-panel[data-ds][data-custom=false]:not(#_) .hbet-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
/* The stake row (or the pot) 4u under the caption: after the row rules above, so no lower-specificity .hbet-row rule follows it. */
.hbet-panel[data-ds]:not(#_) .hbet-label+.hbet-pot:not([hidden]),.hbet-panel[data-ds]:not(#_) .hbet-pot[hidden]+.hbet-row{margin-top:calc(-12 * var(--w-u))}
.hbet-panel[data-ds]:not(#_) :is(.hbet-presets,.hbet-custom){display:contents}
.hbet-panel[data-ds][data-custom=false]:not(#_) .hbet-custom{display:none}
.hbet-panel[data-ds]:not(#_) :is(.hbet-half,.hbet-double){display:none}
.hbet-panel[data-ds]:not(#_) .hbet-fieldbox{order:-1;grid-column:1 / -1;position:relative;display:grid;grid-template-columns:var(--w-key) minmax(0,1fr) var(--w-key);align-items:center;gap:var(--w-gap);min-width:0}
/* Max, a chip after the quick amounts (the app's panel draws it so too). */
.hbet-panel[data-ds]:not(#_) .hbet-custom>.hbet-max{height:var(--w-preset-h);border-radius:var(--w-chip-r);font-size:var(--w-t-chip);color:var(--w-text-soft)}
/* Raised boxes: the presets, ½ / 2× / Max, − and +, and the game's settings (Figma draws them flat: no border, no
   shadow). */
.hbet-panel[data-ds]:not(#_) :is(.hbet-preset,.hbet-btn,.hbet-option){--hl-key-depth:1px;position:relative;margin:0;padding:0 calc(8 * var(--w-u));border:0;border-radius:var(--w-box-r);background:var(--w-raised);color:var(--w-text-soft);
 box-shadow:none;font:400 var(--w-t-ctl)/1 var(--w-font);letter-spacing:var(--w-track);transition:transform 140ms ease-out,opacity 140ms ease-out}
.hbet-panel[data-ds]:not(#_) .hbet-custom>.hbet-btn{height:var(--w-amount-h);color:var(--w-text)}
.hbet-panel[data-ds]:not(#_) .hbet-preset{height:var(--w-preset-h);border-radius:var(--w-chip-r);font-size:var(--w-t-chip)}
/* Each control's hit area runs half a gap past its box (the frame draws them small; no neighbour's area is taken). It is
   ::before because games put their own badges on ::after (edge-pvp.css #stakeFields .hbet-preset[data-waiting]::after). */
.hbet-panel[data-ds]:not(#_) :is(.hbet-preset,.hbet-custom>.hbet-btn,.hbet-option,.hbet-setting .hbet-btn)::before{content:"";position:absolute;inset:calc(-8 * var(--w-u))}
/* Selected: soft lilac with dark text, Regular as Figma draws it (aria-pressed says it to assistive tech). */
.hbet-panel[data-ds]:not(#_) :is(.hbet-preset,.hbet-option)[aria-pressed=true]{background:var(--w-select);color:var(--w-on-select);font-weight:400}
/* The press (4.113.0; not in Figma, the house defaults): on pointerdown a key sinks 1px and dims a little in 90ms, and
   comes straight back in 140ms (keycap bounce: false). Transform and opacity only: no scale, no change of shadow, size
   or colour, so nothing around it moves. Play's shade is its ::before (its hit area needs none: it fills its row). */
.hbet-panel[data-ds]:not(#_) :is(.hbet-preset,.hbet-btn,.hbet-option)[data-down]{transform:translateY(1px);opacity:.8;transition:transform 90ms ease-out,opacity 90ms ease-out}
/* The bid war chip is a preset-row choice like the others. */
.hbet-panel[data-ds]:not(#_) .hbet-bid{font-size:var(--w-t-chip)}
/* The stake row: the typed field in the middle column (plain, centred, Medium 56u; a tap on the figure still types), the
   rolling figure drawn over it, − and + the raised keys at the row's ends (the key's glyph in the stake's own colour for
   that direction). The field keeps 16 px or more so iOS never zooms into it. */
.hbet-panel[data-ds]:not(#_) .hbet-custom .hbet-field{grid-column:2;grid-row:1;box-sizing:border-box;width:100%;height:var(--w-amount-h);padding:0;border:0;border-radius:var(--w-box-r);background:transparent;
 box-shadow:none;color:var(--w-text);caret-color:var(--w-select);text-align:center;font:500 max(16px,var(--w-t-stake))/1 var(--w-font);letter-spacing:var(--w-track)}
.hbet-panel[data-ds]:not(#_) .hbet-custom .hbet-field:focus{box-shadow:inset 0 0 0 calc(3 * var(--w-u)) var(--w-select)}
/* iOS zooms into a field under 16 px; the drawn amount is the rolling overlay, at the frame's size. */
.hbet-panel[data-ds]:not(#_) .hbet-custom[data-roll] .hbet-field{color:transparent}
.hbet-panel[data-ds]:not(#_) .hbet-custom[data-roll] .hbet-field:focus{color:var(--w-text)}
.hbet-panel[data-ds]:not(#_) .hbet-fieldbox .hbet-amt{left:calc(var(--w-key) + var(--w-gap));right:calc(var(--w-key) + var(--w-gap));top:0;width:auto;height:var(--w-amount-h);padding:0;justify-content:center;font:500 var(--w-t-stake)/1 var(--w-font);letter-spacing:var(--w-track);color:var(--w-text)}
/* The figure's answer to a change (Sai: "no green red"): green as it goes up, the soft red as it goes down (data-dir,
   held while a hold keeps stepping), then a 420 ms fade back to white once the steps stop (data-fade; hobbi-bet.js). A
   colour alone: nothing moves. */
.hbet-panel[data-ds]:not(#_) .hbet-fieldbox[data-dir=up] .hbet-amt{color:var(--w-up)}
.hbet-panel[data-ds]:not(#_) .hbet-fieldbox[data-dir=down] .hbet-amt{color:var(--w-down)}
.hbet-panel[data-ds]:not(#_) .hbet-fieldbox[data-fade=up] .hbet-amt{animation:hbet-tint-up .42s ease-out both}
.hbet-panel[data-ds]:not(#_) .hbet-fieldbox[data-fade=down] .hbet-amt{animation:hbet-tint-down .42s ease-out both}
@keyframes hbet-tint-up{from{color:var(--w-up)}to{color:var(--w-text)}}
@keyframes hbet-tint-down{from{color:var(--w-down)}to{color:var(--w-text)}}
.hbet-panel[data-ds]:not(#_) .hbet-steps{display:contents}
.hbet-panel[data-ds]:not(#_) .hbet-steps .hbet-btn{grid-row:1;width:auto;height:var(--w-amount-h);padding:0;border-radius:var(--w-box-r);background:var(--w-raised);font:500 var(--w-t-stake)/1 var(--w-font)}
.hbet-panel[data-ds]:not(#_) .hbet-steps .hbet-btn::before{content:"";position:absolute;inset:calc(-8 * var(--w-u))}
.hbet-panel[data-ds]:not(#_) .hbet-less{grid-column:1;color:var(--w-down)}
.hbet-panel[data-ds]:not(#_) .hbet-more{grid-column:3;color:var(--w-up)}
/* Row 3: the tactile purple primary, full width, carrying its amount ("Play for" and the coin, hobbi-bet.js primaryText). */
.hbet-panel[data-ds]:not(#_) .hbet-actions{gap:var(--w-gap)}
.hbet-panel[data-ds]:not(#_) :is(.hbet-primary,.hbet-actions .hbet-primary){--hl-key-depth:1px;box-sizing:border-box;height:var(--w-primary-h);margin:0;padding:0 calc(24 * var(--w-u));border:var(--w-line) solid var(--w-p-border);border-radius:var(--w-primary-r);
 background:linear-gradient(180deg,var(--w-p-top),var(--w-p-bottom));color:var(--w-p-label);box-shadow:var(--w-p-shadow);
 font:500 var(--w-t-play)/1 var(--w-font);letter-spacing:var(--w-track);white-space:nowrap;transition:transform 140ms ease-out,opacity .15s}
.hbet-panel[data-ds]:not(#_) .hbet-primary::before{content:"";display:block;position:absolute;inset:0;width:auto;height:auto;border-radius:inherit;background:rgb(23 10 32/.3);opacity:0;-webkit-mask:none;mask:none;pointer-events:none;transition:opacity 140ms ease-out}
.hbet-panel[data-ds]:not(#_) .hbet-primary[data-down]{transform:translateY(1px);transition:transform 90ms ease-out,opacity .15s}
.hbet-panel[data-ds]:not(#_) .hbet-primary[data-down]::before{opacity:1;transition:opacity 90ms ease-out}
/* Tactile neutral (Figma's Play again): the consequential secondary actions (Leave · refund, Cancel search, Keep going). */
.hbet-panel[data-ds]:not(#_) :is(.hbet-primary[data-kind=leave],.hbet-primary[data-kind=searching],.hbet-keep){background:linear-gradient(180deg,var(--w-n-top),var(--w-n-bottom));border:var(--w-line) solid var(--w-n-border);color:var(--w-text);
 box-shadow:var(--w-n-shadow);font:500 var(--w-t-play)/1 var(--w-font);letter-spacing:var(--w-track)}
.hbet-panel[data-ds]:not(#_) .hbet-keep{--hl-key-depth:1px;box-sizing:border-box;height:var(--w-primary-h);margin:0;padding:0 calc(24 * var(--w-u));border-radius:var(--w-primary-r)}
.hbet-panel[data-ds]:not(#_) .hbet-keep[data-down]{transform:translateY(1px);opacity:.8;transition:transform 90ms ease-out,opacity 90ms ease-out}
/* Disabled keeps its layout: the same boxes, dimmed to 35% (the disabled attribute is the semantic state). */
.hbet-panel[data-ds]:not(#_) :is(button,.hbet-field):disabled{opacity:var(--w-dim)}
.hbet-panel[data-ds]:not(#_) .hbet-steps .hbet-btn:disabled{opacity:.3}
.hbet-panel[data-ds]:not(#_) .hbet-primary[data-kind=cashing]:disabled{opacity:.8;background:linear-gradient(180deg,var(--w-p-top),var(--w-p-bottom))}
/* The entry starting (betting, 4.113.0): Play stays down (1px and the shade) with its words and size; no spinner beside
   the words, so the label never moves. A second tap meanwhile is the same entry (hobbi-bet.js). */
.hbet-panel[data-ds]:not(#_) .hbet-primary[data-kind=betting]:disabled{opacity:1;background:linear-gradient(180deg,var(--w-p-top),var(--w-p-bottom));transform:translateY(1px)}
.hbet-panel[data-ds]:not(#_) .hbet-primary[data-kind=betting]::before{opacity:1}
.hbet-panel[data-ds]:not(#_) .hbet-primary[data-kind=betting]::after{content:none}
/* A lasting refusal (Paused, Top up, a game's own reason) is a flat, quiet box with the reason, same height. */
.hbet-panel[data-ds]:not(#_) .hbet-primary:is([data-kind=blocked],[data-kind=short],[data-kind=wait]):disabled{opacity:1;background:var(--w-raised);border-color:transparent;color:var(--w-text-2);box-shadow:none;font:400 var(--w-t-play)/1 var(--w-font)}
/* COLLECT in a round: the same purple primary (never the old blue), with a soft purple glow under it. */
.hbet-panel[data-ds][data-state=cashout]:not(#_)::before{left:var(--w-inset);right:var(--w-inset);bottom:var(--w-inset);height:var(--w-primary-h);border-radius:var(--w-primary-r);box-shadow:0 0 calc(40 * var(--w-u)) calc(10 * var(--w-u)) color-mix(in srgb,var(--w-brand) 45%,transparent)}
.hbet-panel[data-ds]:not(#_) .hbet-live{padding:calc(14 * var(--w-u)) calc(24 * var(--w-u));border-radius:var(--w-box-r);background:var(--w-raised);font:400 var(--w-t-label)/1.1 var(--w-font);letter-spacing:var(--w-track);color:var(--w-text-2)}
.hbet-panel[data-ds]:not(#_) .hbet-live b{color:var(--w-text);font:500 var(--w-t-ctl)/1.1 var(--w-font)}
.hbet-panel[data-ds]:not(#_) .hbet-note{padding:0;font:400 var(--w-t-label)/1.1 var(--w-font);letter-spacing:var(--w-track);color:var(--w-text-2)}
.hbet-panel[data-ds]:not(#_) .hbet-note :is(b,.win){color:var(--hds-success,#38a169);font-weight:500}
/* The game-settings slot (Mines, Plinko rows, Dice over/under): a label and the same raised boxes, one row above "Wager". */
.hbet-panel[data-ds]:not(#_) .hbet-settings:not([hidden]){display:grid;gap:var(--w-gap)}
.hbet-panel[data-ds]:not(#_) .hbet-setting{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--w-gap);padding:0}
.hbet-panel[data-ds]:not(#_) .hbet-setting:has(.hbet-dec){grid-template-columns:minmax(0,1fr) var(--w-setting-h) minmax(calc(60 * var(--w-u)),auto) var(--w-setting-h)}
.hbet-panel[data-ds]:not(#_) .hbet-setting-label{font:400 var(--w-t-label)/1.1 var(--w-font);letter-spacing:var(--w-track);text-transform:none;color:var(--w-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbet-panel[data-ds]:not(#_) .hbet-setting-value{text-align:center;font:400 var(--w-t-ctl)/1 var(--w-font);letter-spacing:var(--w-track);color:var(--w-text)}
.hbet-panel[data-ds]:not(#_) :is(.hbet-setting .hbet-btn,.hbet-option){height:var(--w-setting-h);min-width:var(--w-setting-h);border-radius:var(--w-chip-r);font-size:var(--w-t-chip);color:var(--w-text)}
.hbet-panel[data-ds]:not(#_) .hbet-option{padding:0 calc(24 * var(--w-u))}
.hbet-panel[data-ds]:not(#_) .hbet-choice{display:flex;gap:var(--w-gap);min-width:0}
/* (after the settings sizes, so a selected choice keeps its dark text) */
.hbet-panel[data-ds]:not(#_) .hbet-setting .hbet-option[aria-pressed=true]{background:var(--w-select);color:var(--w-on-select);font-weight:400}
/* Focus: a soft-lilac ring outside the control, for keyboard and switch control. */
.hbet-panel[data-ds]:not(#_) :is(button,.hbet-field):focus-visible{outline:2px solid var(--w-select);outline-offset:2px}
/* The panel's hint and refusal lines take the same type. */
.hbet-hint,.hbet-notice{font-family:var(--hds-font,"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);font-weight:500;letter-spacing:var(--hds-tracking,0)}
/* A shut field (in a round, while an entry is placed) dims its rolling amount too, not only the input under it. */
.hbet-panel[data-ds]:not(#_) .hbet-fieldbox:has(.hbet-field:disabled) .hbet-amt{opacity:var(--w-dim)}
/* Loading (the balance is being read; Figma 152:11606 "Wager controls · disabled while loading"): the whole panel at
   layer opacity 0.35 with its layout unchanged, and nothing inside it dimmed a second time. Its controls are
   unavailable (hobbi-bet.js marks them aria-disabled and drops a player's tap); the button already shows the words it
   will have once ready (primaryText), in its ready look. A hidden or stepped-aside panel keeps its own opacity 0.
   :not(#_):not(#_) (two ids' weight) so the reset outranks every single-id dim above. */
.hbet-panel[data-ds][data-loading=true]:not([data-state=hidden]):not([data-receipt=true]):not(#_){opacity:var(--w-dim)}
.hbet-panel[data-ds][data-loading=true]:not(#_):not(#_) :is(button,.hbet-field,.hbet-amt,.hbet-label,.hbet-settings,.hbet-keep){opacity:1}
.hbet-panel[data-ds][data-loading=true]:not(#_) :is(.hbet-presets,.hbet-custom,.hbet-settings) [data-down]{transform:none}
.hbet-panel[data-ds][data-loading=true]:not(#_):not(#_) .hbet-primary:disabled{background:linear-gradient(180deg,var(--w-p-top),var(--w-p-bottom));border-color:var(--w-p-border);color:var(--w-p-label);box-shadow:var(--w-p-shadow);font:500 var(--w-t-play)/1 var(--w-font)}
/* ---------- The result from the designer's Figma "Hobbi", frame 10. Post-results (4.112.0, 2026-11-02) ----------
   Rushil: "use his new winning and post win result from figma and not ours". Replaces the old result card (Stake /
   Multiplier / Won, PAID, the blue Play again): no headline, the fade and the card carry the result. (4.112.0 also took
   the celebration out, YOU WON!, the rolling number, the edge, the confetti, the star; 4.113.0 puts it back before the
   card, as 4.109.0 played it.) The coins fly to the wallet, so the balance counts up as in Figma's in-game win frame. Every value is mates-core
   design/figma/SPEC.md's (frames 128:9499 won, 128:9605 in-game win, 153:12219 loss), in the wager panel's unit
   (u = 1/894.29 of the phone's width; the page is the 1718.73u above the tab bar):
     the fade: the game dims (#000 at 45%) and, from 572u down, success green #38A169 0 -> 78% at 38% -> 100% at 62%
       of the fade on a win, danger red #E53E3E 0 -> 95% at 30% -> 100% on a loss; a refund (not in Figma) fades to the
       dark canvas in the win's stops;
     the card: 786 x 320u, 54u from each side, radius 28u, padding 48u at the sides; win #254D3B -> #10251C with a
       #A1DDBA 35% 1u edge, loss #5A282C -> #281719 with #E8A6A6 35%; inset 0 2 2 #FFF/.16, drop 0 5 10 #000/.28;
       the game's name Regular 32u white 80%, "@creator" Medium 40u; the rules (white 30%, 1u) with the Figma "hobbi"
       wordmark (118 x 34.4u at 40%) 24u clear each side; "Balance" Regular 30u white 70% and "96.11 [+ 24.80] =
       120.91" Medium 30u, the chip 148 x 50u r 12u #38A169 35% / #C2F3D4 (loss #E53E3E 35% / #FFD5D5);
     the buttons, 40u under the card: "↻ Play again" (tactile neutral) and "→ Continue" (tactile purple), 383 x 100u,
       r 24u, 20u apart, Medium 32u, icon 34u + 12u; then "Share your win" (neutral, 0.5u edge, Medium 30u, icon 44u +
       14u) 22u under them; the last row 66.73u above the tab bar; all with inset 0 2 2 #FFF/.18, drop 0 4 6 #000/.3.
   Behaviour is hobbi-reward.js's and did not change (Play again bets the same stake, Continue closes the card as Change
   stake did, a tap outside closes it, Share opens the share card). :not(#_) as for the panel above. */
.hr-win:not(#_),.hr-under:not(#_){--rc-u:calc(min(100vw,480px) / 894.29);
 --rc-fade-win:linear-gradient(180deg,rgba(56,161,105,0) 33.28%,rgba(56,161,105,.78) 62.79%,#38a169 81.43%,#38a169 100%),rgba(0,0,0,.45);
 /* A loss has no red (Sai 2026-11-04, "not have a bright red screen"; Figma 153:12219's #E53E3E fade is retired): the
    dark canvas in the even round's shape, calm, the game still visible, as the app's result screen (mates-core
    src/lib/play-result.ts resultWash). */
 --rc-fade-loss:linear-gradient(180deg,rgba(29,29,29,0) 33.28%,rgba(29,29,29,.78) 62.79%,rgba(29,29,29,.92) 81.43%,rgba(29,29,29,.92) 100%),rgba(0,0,0,.45);
 --rc-fade-even:linear-gradient(180deg,rgba(29,29,29,0) 33.28%,rgba(29,29,29,.78) 62.79%,rgba(29,29,29,.92) 81.43%,rgba(29,29,29,.92) 100%),rgba(0,0,0,.45)}
/* The celebration plays first, as 4.109.0 drew it (4.113.0, Sai 2026-11-02: "the winning confetti thing ... that's not how
   it used to look"): the dim and vignette, the green pixel edge all the way round, the rolling number, YOU WON!, the
   star, the flash and shockwaves, the confetti and the coins to the wallet, untouched by the Figma rules here. Only a
   small return's "X back" stays out (the Figma card says it). "Tap to continue" in the Figma type. When the win clears
   for its card (.clearing, the number flies to the wallet) the dim and vignette lift, and the Figma fade comes up with
   the card (.receipt); the edge stays under it. */
.hr-win:not(#_) .hr-back{display:none}
.hr-win:not(#_) .hr-tap{font:400 14px/1 var(--hds-font,"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);letter-spacing:var(--hds-tracking,0);color:rgba(255,255,255,.78)}
.hr-under.clearing:not(#_) :is(.hr-dim,.hr-vig){opacity:0;transition:opacity .3s ease-out}
/* 4.114.1: in the app the dim stays through the hand-off to its result screen (hobbi-reward.js openReceipt, HANDOFF_MS). */
.hr-under.clearing.keepdim:not(#_) .hr-dim{opacity:1}
/* The fade (frame 10), under the card: on the under layer (hr-under, below the edge) once the card is up, and for a page's
   own card with no celebration under it (hr-rc-fade, in the result layer). Opacity only. */
.hr-under:not(#_)::before{content:"";position:absolute;inset:0;background:var(--rc-fade-win);opacity:0;transition:opacity .42s ease-out}
.hr-under.receipt:not(#_)::before{opacity:1}
.hr-under.rc-loss:not(#_)::before{background:var(--rc-fade-loss)}
.hr-under.rc-even:not(#_)::before{background:var(--rc-fade-even)}
.hr-rc-fade{position:absolute;inset:0;pointer-events:none;background:var(--rc-fade-win);animation:hr-rc-fade-in .42s ease-out both}
.hr-rc-fade.loss{background:var(--rc-fade-loss)}
.hr-rc-fade.even{background:var(--rc-fade-even)}
@keyframes hr-rc-fade-in{from{opacity:0}to{opacity:1}}
/* The card and its buttons, one column at the bottom (the Solo .fit card is the same: Figma has one layout). */
.hr-receipt.figma:not(#_){--u:var(--rc-u);left:calc(54 * var(--u));right:calc(54 * var(--u));bottom:calc(66.73 * var(--u) + var(--hl-safe-bottom,0px));display:grid;grid-template-columns:minmax(0,1fr);gap:calc(40 * var(--u));padding:0;border:0;border-radius:0;background:none;box-shadow:none;
 --rc-btn-shadow:inset 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,.18),0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.3);
 color:#fff;font:400 calc(30 * var(--u))/1.1 var(--hds-font,"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);letter-spacing:var(--hds-tracking,0);font-variant-numeric:tabular-nums}
/* 320u tall with Figma's words: 38 + name 35 + 17 + creator 44 + 26 + mark 34.4 + 41.6 + the balance row 50 + 34. */
/* Figma's 1u edge is an inside stroke, so it is drawn as an inset ring and adds nothing to the card's 320u. */
.hr-receipt.figma:not(#_) .hr-rc-box{--rc-edge:rgba(255,255,255,.12);display:grid;box-sizing:border-box;padding:calc(38 * var(--u)) calc(48 * var(--u)) calc(34 * var(--u));border:0;border-radius:calc(28 * var(--u));
 background:linear-gradient(180deg,#303030,#1d1d1d);box-shadow:inset 0 0 0 max(1px,calc(1 * var(--u))) var(--rc-edge),inset 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,.16),0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.28)}
.hr-receipt.figma.win:not(#_) .hr-rc-box{--rc-edge:rgba(161,221,186,.35);background:linear-gradient(180deg,#254d3b,#10251c)}
/* A loss card keeps the neutral dark surface (no red card over no red fade): its chip, in the soft red, says the amount. */
.hr-receipt.figma.loss:not(#_) .hr-rc-box{--rc-edge:rgba(255,255,255,.12);background:linear-gradient(180deg,#303030,#1d1d1d)}
.hr-receipt.figma:not(#_) .hr-rc-game{font-size:calc(32 * var(--u));line-height:calc(35 * var(--u));color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-receipt.figma:not(#_) .hr-rc-title{margin-top:calc(17 * var(--u));padding:0;font-weight:500;font-size:calc(40 * var(--u));line-height:calc(44 * var(--u));font-family:inherit;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-receipt.figma:not(#_) .hr-rc-say{display:grid;gap:calc(6 * var(--u));margin-top:calc(14 * var(--u))}
.hr-receipt.figma:not(#_) .hr-rc-say[hidden]{display:none}
.hr-receipt.figma:not(#_) .hr-rc-head-line{padding:0;font-weight:500;font-size:calc(30 * var(--u));line-height:calc(33 * var(--u));font-family:inherit;color:#fff}
.hr-receipt.figma:not(#_) .hr-rc-line{font-weight:400;font-size:calc(30 * var(--u));line-height:calc(33 * var(--u));font-family:inherit;color:rgba(255,255,255,.7)}
.hr-receipt.figma:not(#_) .hr-rc-brand{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:calc(24 * var(--u));margin-top:calc(26 * var(--u))}
.hr-receipt.figma:not(#_) .hr-rc-brand>i{display:block;height:calc(1 * var(--u));min-height:1px;background:rgba(255,255,255,.3)}
/* Figma's wordmark (design/figma/assets/hobbi-wordmark_153-12044.svg, its 40% layer opacity inside the file); the span's
   text stays for a page without the image and is hidden for assistive tech by hobbi-reward.js. */
.hr-receipt.figma:not(#_) .hr-rc-mark{display:block;width:calc(118 * var(--u));height:calc(34.4 * var(--u));overflow:hidden;font-size:0;color:transparent;background:url("hobbi-brand/assets/hobbi-wordmark.svg") center/100% 100% no-repeat}
.hr-receipt.figma:not(#_) .hr-rc-bal{display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--u));min-height:calc(50 * var(--u));margin-top:calc(41.6 * var(--u))}
.hr-receipt.figma:not(#_) .hr-rc-bal .hr-rc-k{font-size:calc(30 * var(--u));line-height:calc(33 * var(--u));color:rgba(255,255,255,.7);white-space:nowrap}
/* Before, 13u, the chip, 15u, after (Figma's uneven spacing, asymmetry 5). */
.hr-receipt.figma:not(#_) .hr-rc-vals{display:flex;align-items:center;gap:0;min-width:0;white-space:nowrap}
.hr-receipt.figma:not(#_) .hr-rc-vals b{font-weight:500;font-size:calc(30 * var(--u));line-height:calc(33 * var(--u));font-family:inherit;color:#fff}
.hr-receipt.figma:not(#_) .hr-rc-from{margin-right:calc(13 * var(--u))}
.hr-receipt.figma:not(#_) .hr-rc-vals .hr-rc-chip{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(148 * var(--u));height:calc(50 * var(--u));margin-right:calc(15 * var(--u));padding:0 calc(16 * var(--u));border-radius:calc(12 * var(--u));background:rgba(255,255,255,.1)}
.hr-receipt.figma:not(#_) .hr-rc-vals .hr-rc-chip:last-child{margin-right:0}
.hr-receipt.figma:not(#_) .hr-rc-vals .hr-rc-chip.win{background:rgba(56,161,105,.35);color:#c2f3d4}
/* The amount lost: present and readable, quiet; the soft red of the app's result (mates-core result-look.ts), never the danger red. */
.hr-receipt.figma:not(#_) .hr-rc-vals .hr-rc-chip.loss{background:rgba(212,122,116,.18);color:#d47a74}
/* The buttons: two equal on a row, then the full-width Share (and a page's single action). */
.hr-receipt.figma:not(#_) .hr-rc-actions{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(20 * var(--u));row-gap:calc(22 * var(--u));margin:0}
.hr-receipt.figma:not(#_) .hr-rc-actions.one,.hr-receipt.figma:not(#_) .hr-rc-actions.page.one{grid-template-columns:minmax(0,1fr)}
.hr-receipt.figma:not(#_) .hr-rc-share{grid-column:1 / -1}
.hr-receipt.figma:not(#_) .hr-rc-alt{order:-1}
.hr-receipt.figma:not(#_) .hr-rc-btn{display:inline-flex;align-self:stretch;align-items:center;justify-content:center;gap:calc(12 * var(--u));box-sizing:border-box;min-width:0;height:calc(100 * var(--u));margin:0;padding:0 calc(20 * var(--u));border:calc(1 * var(--u)) solid var(--hds-neutral-border,rgb(105 107 115/.65));border-radius:calc(24 * var(--u));
 background:linear-gradient(180deg,var(--hds-neutral-top,#414349),var(--hds-neutral-bottom,#202126));color:#fff;box-shadow:var(--rc-btn-shadow);
 font:500 calc(32 * var(--u))/1 var(--hds-font,"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);letter-spacing:var(--hds-tracking,0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:none;cursor:pointer;transition:transform 70ms ease-out,box-shadow 70ms ease-out}
.hr-receipt.figma:not(#_) .hr-rc-btn.hr-rc-go{background:linear-gradient(180deg,var(--hds-primary-top,#64377c),var(--hds-primary-bottom,#351342));border-color:var(--hds-primary-border,rgb(166 119 186/.65));color:var(--hds-primary-label,#ebd1ff)}
.hr-receipt.figma:not(#_) .hr-rc-btn.hr-rc-share{gap:calc(14 * var(--u));border-width:calc(.5 * var(--u));font-size:calc(30 * var(--u))}
.hr-receipt.figma:not(#_) .hr-rc-btn:active:not(:disabled){transform:translateY(1px) scale(.98);box-shadow:inset 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,.12),0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.3)}
.hr-receipt.figma:not(#_) .hr-rc-btn:disabled{opacity:var(--hds-dim,.35)}
.hr-receipt.figma:not(#_) .hr-rc-btn:focus-visible{outline:2px solid var(--hds-soft,#f1e5ff);outline-offset:2px}
.hr-receipt.figma:not(#_) .hr-rc-ico{flex:none;width:calc(34 * var(--u));height:calc(34 * var(--u))}
.hr-receipt.figma:not(#_) .hr-rc-share .hr-rc-ico{width:calc(44 * var(--u));height:calc(44 * var(--u))}
@media (min-width:481px){.hr-receipt.figma:not(#_){left:calc(50% - 393 * var(--u));right:calc(50% - 393 * var(--u))}}
@media (prefers-reduced-motion:reduce){.hr-rc-fade{animation:none}.hr-under:not(#_)::before{transition:none}}