/* =====================================================================
LUCKBATTLE · V2 — standalone animated visual prototype
Fresh design system. No backend. Mobile-first, scales to desktop.
===================================================================== */
/* ============================================================================
RUNTIME ALIASES. The canonical hex library is css/lb-palette.css;
lucky-babes-buttons.css, this file and lucky-packs-v2.css consume its --lb-*
tokens so one approved change can propagate across lobby, games and packs.
============================================================================ */
:root{
/* ---- structural surfaces ----
These are ALIASES now. The hexes live in css/lb-palette.css, which every
page (lobby + all 21 games) loads first, so the lobby, the packs/battles
surfaces and the game frames cannot drift apart again. */
--bg:var(--lb-bg,#151C21); /* page base */
--surface:var(--lb-surface,#0D1317); /* rails, panel shells and modal shells */
--surface-2:var(--lb-surface-2,#1E282E);/* cards and controls on a panel */
--surface-3:var(--lb-surface-2,#1E282E);/* legacy alias of surface-2 */
--surface-hi:var(--lb-surface-3,#2A353C); /* raised: hover, secondary, 1/2 & 2x */
--surface-active:var(--lb-surface-4,#3A464E); /* active/selected fill */
--canvas:var(--lb-canvas,#151C21);
--rail:var(--lb-rail,#0D1317);
--topbar:var(--lb-topbar,var(--rail));
--control-deep:var(--lb-control-deep,#141C21);
--control-border:var(--lb-control-border,#43515A);
--control-selected:var(--lb-control-selected,#3A464E);
--selection-fill:var(--lb-selection-fill,var(--control-selected));
--selection-hover:var(--lb-selection-hover,var(--surface-active));
--selection-accent:var(--lb-selection-accent,var(--pink));
--selection-ink:var(--lb-selection-ink,var(--ink));
--menu:var(--lb-menu,#192228);
--input-bg:var(--lb-input-bg,rgba(0,0,0,.3));
/* ---- brand accents (identity only, used sparingly) ---- */
--pink:var(--lb-pink,#F45DC4);
--pink-2:var(--lb-pink-2,#FF76D0);
--purple:var(--lb-purple,#7659C6); /* brand/chrome accent, not a submit fill */
--purple-2:var(--lb-purple-2,#A28CDE);
--gold:var(--lb-gold,#E8B849); /* premium / VIP / value only */
--gold-2:var(--lb-gold-2,#F4D276);
/* ---- semantic states ---- */
--success:var(--lb-success,#38C979);
--warning:var(--lb-warning,#E8B849);
--notification:var(--lb-notification,#E8B849);
--error:var(--lb-error,#F25F70);
--available:var(--lb-success,#38C979);
--locked:var(--lb-locked,#858C90);
--green:var(--success); /* legacy aliases */
--red:var(--error);
/* ---- semantic actions: one color communicates one job ---- */
--action-primary:var(--lb-action-primary,#F45DC4);
--action-primary-hover:var(--lb-action-primary-hover,#FF76D0);
--action-primary-active:var(--lb-action-primary-active,#D848AB);
--action-primary-ink:var(--lb-action-primary-ink,#171117);
--action-secured:var(--lb-action-secured,#38C979);
--action-secured-hover:var(--lb-action-secured-hover,#4BD68A);
--action-secured-active:var(--lb-action-secured-active,#2EAD67);
--action-secured-ink:var(--lb-action-secured-ink,#08150E);
/* Secondary walks UP the approved house-system ladder:
rest #1E282E -> hover #2A353C -> pressed #3A464E. It used to press back to
its own resting colour, so a press looked like nothing happened. */
--action-secondary:var(--lb-action-secondary,#1E282E);
--action-secondary-hover:var(--lb-action-secondary-hover,#2A353C);
--action-secondary-active:var(--lb-action-secondary-active,#3A464E);
--action-secondary-border:var(--lb-action-secondary-border,#43515A);
--action-secondary-ink:var(--lb-action-secondary-ink,#F7F4F0);
--action-danger:var(--lb-action-danger,#F25F70);
--action-danger-hover:var(--lb-action-danger-hover,#FF7584);
--action-danger-active:var(--lb-action-danger-active,#D94A5D);
--action-danger-ink:var(--lb-action-danger-ink,#1A0C10);
--action-gold-ink:var(--lb-action-gold-ink,#171209);
--action-disabled:var(--lb-action-disabled,#1E282E);
--action-disabled-ink:var(--lb-action-disabled-ink,#858C90);
--action-focus:var(--lb-action-focus,#FF76D0);
--action-shadow:var(--lb-action-shadow,0 6px 15px -7px rgba(0,0,0,.68),0 1px 0 rgba(255,255,255,.10) inset);
--action-original-height:52px;
--action-original-radius:10px;
--action-original-font-size:16px;
--action-standard-height:44px;
--action-standard-radius:8px;
--action-standard-font-size:14px;
--action-compact-height:36px;
--action-compact-radius:8px;
--action-compact-font-size:13px;
--action-font-weight:700;
/* ---- text ----
Solid, not translucent — the same argument the hairlines below already make,
and it matters twice as much here because these two also colour ICONS.
A stroke painted at 66% alpha stacks with itself wherever two round-capped
paths cross, so one glyph came out part grey and part white; and the same
token rendered a different grey on every surface it sat on. The hexes are
what .66 and .55 of the ink already resolved to over the panel colour, so
nothing moves visually on a normal dark surface (owner 2026-08-08:
"stop using opacity on those ... they all paint to a specific hex"). */
--ink:var(--lb-ink,#F7F4F0);
--muted:var(--lb-ink-2,#D6D0CA);
--faint:var(--lb-ink-muted,#AAA39C);
--placeholder:var(--lb-placeholder,#928C86);
--chrome-icon:var(--lb-chrome-icon,#C6C0BA);
--chrome-text:var(--lb-chrome-text,#F7F4F0);
/* ---- borders / hairlines ----
Solid, not translucent. A white-alpha hairline renders a different colour
on every surface it crosses, which is exactly why the rails, the topbar and
the game frames never matched. One hex, everywhere. */
--line:var(--lb-line,#2A353C);
--line-2:var(--lb-line-2,#48565F);
--focus:var(--lb-focus,#FF76D0); /* focus ring, distinct from brand */
/* ---- surfaces as near-flat tonal (no glass) ---- */
--glass:var(--surface-2);
--glass-2:var(--surface-2);
/* ---- brand fills: flat by default; gradient reserved for hero/CTA only ---- */
--grad-pink:var(--pink);
--grad-cta:var(--action-primary); /* solid primary action */
--grad-gold:var(--gold);
--grad-cyber:var(--action-primary);
--hero-grad:#2f1d53; /* flattened (owner 2026-07-17): was the ONE restrained gradient */
--cta-grad:var(--action-primary);
/* ---- radius scale: sharper, consistent ---- */
--r-xs:6px; --r-sm:6px; --r:6px; --r-lg:8px; --r-xl:8px; --r-pill:999px;
/* ---- brand seam: the brand's one non-90-degree angle, measured from
lb-logo.svg (14.3deg lean). Chamfer = top-right corner cut,
6px horizontal / 24px vertical (atan(6/24)=14deg). Reuse these two
tokens everywhere; never restate the angle or polygon inline. ---- */
--lb-seam:14deg;
--lb-chamfer:polygon(0 0,calc(100% - 6px) 0,100% 24px,100% 100%,0 100%);
/* ---- depth: subtle, neutral (no colored glow) ---- */
--sh-sm:0 1px 2px rgba(0,0,0,.4);
--sh:0 6px 18px -10px rgba(0,0,0,.55);
--sh-lg:0 16px 38px -18px rgba(0,0,0,.6);
--sh-glow:0 6px 18px -10px rgba(0,0,0,.55); /* legacy alias → subtle, no neon */
--edge:inset 0 1px 0 rgba(255,255,255,.06);
/* ---- layout / spacing ---- */
--topbar-h:70px; --botnav-h:62px;
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
--maxw:480px; /* mobile column; widened by breakpoints below */
--content-pad:16px;
/* ONE text family sitewide (owner: no bubble fonts). Display = Body = Urbanist;
the loud faces survive only inside game-cover title art. */
--font-sans:'Urbanist',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--f-disp:var(--font-sans);
/* --f-game-bold (Lilita One) and --f-game-tech (Kanit) removed 2026-07-27: neither
font was ever loaded by any page, so both silently resolved to the shared face anyway. */
--f-body:var(--font-sans);
/* Money and live values. Split out from --f-disp so the numeric face can be
changed without touching headings or copy: Urbanist's figures are strongly
geometric (circular 0, footless 1), which reads well in a heading and less
well in a balance that is constantly changing. Defaults to --f-disp, so
nothing moves until it is deliberately pointed somewhere else. */
--f-num:var(--f-disp);
--num-track:0; /* letter-spacing for figures; digits want less than words */
--lb-logo:url('../assets/lb-brand-current/lb-logo.svg?v=lb-logo-20260829a');
--lucky-chip:url('../assets/lb-brand-current/lucky-chips.webp?v=chipart-20260731');
--fun-chip:url('../assets/lb-brand-current/fun-chips.webp?v=chipart-20260731');
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
background:var(--canvas); color:var(--ink);
font-family:var(--f-body); font-weight:500;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
padding:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 8px) 0
calc(var(--botnav-h) + env(safe-area-inset-bottom,0px) + 16px);
}
/* Canonical LuckBattle wordmark. Every production lockup uses these same two
spans so the type weight and split always stay exact. When the LB mark sits
beside the wordmark, its box stays about 1.3x the type size everywhere. */
.lb-wordmark{display:inline-flex;align-items:baseline;white-space:nowrap;font-family:var(--f-disp,'Urbanist',ui-sans-serif,system-ui,sans-serif);font-weight:800;font-style:normal;font-synthesis:none;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.lb-wordmark .lb-wordmark__part{font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit}
.lb-wordmark .lb-wordmark__luck{color:#fff}
.lb-wordmark .lb-wordmark__battle{color:var(--pink,#F45DC4)}
body[data-screen="packs"]{padding-top:calc(var(--topbar-h) + env(safe-area-inset-top,0px))}
body[data-screen="packs"] .stage{min-height:calc(100dvh - var(--topbar-h) - env(safe-area-inset-top,0px))}
img{display:block;max-width:100%}
[hidden]{display:none!important}
b,strong{font-weight:700}
small{font-weight:500}
button{font-family:inherit;font-weight:700;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font-family:inherit;font-weight:700;}
::-webkit-scrollbar{width:0;height:0}
.lb-logo-button{position:relative;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;
transition:transform .15s}
.lb-logo-button img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(0,0,0,.45))}
button:active .lb-logo-button{transform:scale(.93)}
/* ---------- background: brand light-streaks, spread across the WHOLE screen ---------- */
.bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:var(--canvas)}
.bg-base{position:absolute;inset:0;background:var(--canvas)}
/* thin, crisp comet trails — brand-tinted, seeded across every column AND row so the
whole viewport streaks, never bunched in one corner. GPU transform/opacity only. */
.bg-streaks{display:none;position:absolute;inset:-12% -16%;pointer-events:none;contain:strict;opacity:.35}
.bg-streaks i{
position:absolute;left:var(--x);top:var(--y);
width:var(--len);height:1.6px;border-radius:2px;
background:linear-gradient(90deg,transparent 0%,var(--c) 60%,#fff 93%,transparent 100%);
filter:drop-shadow(0 0 3px var(--c));
opacity:0;will-change:transform,opacity;
transform:rotate(-19deg) translate3d(-55vw,0,0);
animation:bgStreak var(--dur) cubic-bezier(.32,0,.22,1) var(--delay) infinite;
}
@keyframes bgStreak{
0%{opacity:0;transform:rotate(-19deg) translate3d(-55vw,0,0)}
8%{opacity:var(--op)}
72%{opacity:var(--op)}
100%{opacity:0;transform:rotate(-19deg) translate3d(60vw,0,0)}
}
.bg-streaks i:nth-child(1){--x:-8%;--y:8%; --len:34vw;--c:rgba(169,139,255,.85);--op:.50;--dur:8.5s;--delay:0s}
.bg-streaks i:nth-child(2){--x:30%;--y:5%; --len:22vw;--c:rgba(255,255,255,.70);--op:.34;--dur:6.4s;--delay:1.6s}
.bg-streaks i:nth-child(3){--x:62%;--y:11%;--len:40vw;--c:rgba(255,77,184,.70);--op:.42;--dur:10.5s;--delay:3.2s}
.bg-streaks i:nth-child(4){--x:14%;--y:20%;--len:26vw;--c:rgba(139,92,255,.80);--op:.40;--dur:7.6s;--delay:.8s}
.bg-streaks i:nth-child(5){--x:46%;--y:24%;--len:30vw;--c:rgba(36,217,255,.55);--op:.32;--dur:9.4s;--delay:4.6s}
.bg-streaks i:nth-child(6){--x:78%;--y:18%;--len:20vw;--c:rgba(255,200,61,.60);--op:.34;--dur:11.5s;--delay:2.4s}
.bg-streaks i:nth-child(7){--x:-6%;--y:33%;--len:24vw;--c:rgba(255,255,255,.60);--op:.30;--dur:7.0s;--delay:5.5s}
.bg-streaks i:nth-child(8){--x:34%;--y:38%;--len:18vw;--c:rgba(169,139,255,.70);--op:.36;--dur:5.6s;--delay:6.3s}
.bg-streaks i:nth-child(9){--x:66%;--y:31%;--len:36vw;--c:rgba(255,77,184,.62);--op:.32;--dur:12.5s;--delay:1.1s}
.bg-streaks i:nth-child(10){--x:18%;--y:46%;--len:28vw;--c:rgba(36,217,255,.55);--op:.30;--dur:8.0s;--delay:3.8s}
.bg-streaks i:nth-child(11){--x:50%;--y:52%;--len:38vw;--c:rgba(169,139,255,.80);--op:.44;--dur:10.0s;--delay:.4s}
.bg-streaks i:nth-child(12){--x:80%;--y:44%;--len:22vw;--c:rgba(255,255,255,.60);--op:.30;--dur:6.8s;--delay:7.0s}
.bg-streaks i:nth-child(13){--x:-4%;--y:58%;--len:32vw;--c:rgba(255,77,184,.70);--op:.40;--dur:9.0s;--delay:2.0s}
.bg-streaks i:nth-child(14){--x:38%;--y:63%;--len:26vw;--c:rgba(139,92,255,.78);--op:.38;--dur:7.4s;--delay:5.0s}
.bg-streaks i:nth-child(15){--x:70%;--y:56%;--len:42vw;--c:rgba(36,217,255,.50);--op:.28;--dur:11.0s;--delay:3.0s}
.bg-streaks i:nth-child(16){--x:12%;--y:72%;--len:24vw;--c:rgba(255,200,61,.55);--op:.32;--dur:8.6s;--delay:6.0s}
.bg-streaks i:nth-child(17){--x:52%;--y:76%;--len:30vw;--c:rgba(255,255,255,.55);--op:.30;--dur:9.8s;--delay:1.8s}
.bg-streaks i:nth-child(18){--x:76%;--y:68%;--len:20vw;--c:rgba(169,139,255,.72);--op:.36;--dur:6.2s;--delay:4.2s}
.bg-streaks i:nth-child(19){--x:24%;--y:88%;--len:34vw;--c:rgba(255,77,184,.62);--op:.34;--dur:10.8s;--delay:2.8s}
.bg-streaks i:nth-child(20){--x:60%;--y:92%;--len:26vw;--c:rgba(36,217,255,.52);--op:.28;--dur:8.2s;--delay:5.8s}
@media (prefers-reduced-motion: reduce){.bg-streaks{display:none}}
#fx{position:fixed;inset:0;z-index:60;pointer-events:none}
body.fx-paused #fx,
body.fx-paused .bg-streaks{display:none!important}
/* ---------- splash ---------- */
#splash{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:18px;
background:#000;transition:opacity .5s ease,visibility .5s}
#splash.gone{opacity:0;visibility:hidden;pointer-events:none;display:none}
.splash-logo{width:132px;height:132px;display:grid;place-items:center}
.splash-mark{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));animation:splashMarkIn .48s cubic-bezier(.2,.8,.2,1) both}
.splash-bar{width:170px;height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.splash-bar i{display:block;height:100%;width:30%;border-radius:99px;background:#fff;animation:load .65s ease forwards}
.splash-tag{font-family:var(--f-disp);font-weight:800;letter-spacing:.02em;color:var(--muted);font-size:16px}
@keyframes load{to{width:100%}}
@keyframes splashMarkIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
.splash-mark{animation:none}
}
/* ---------- chips ---------- */
.bal-chip{display:inline-block;width:30px;height:30px;flex:0 0 auto;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.bal-chip.lucky{background-image:var(--lucky-chip)}
.bal-chip.fun{background-image:var(--fun-chip)}
.chip-i{display:inline-block;width:18px;height:18px;vertical-align:-4px;background:var(--lucky-chip) center/contain no-repeat}
/* Inline chip inside a toast sentence: slightly smaller and nudged so it sits
on the text baseline instead of riding above it. */
.toast-item .tt .chip-i{width:15px;height:15px;vertical-align:-3px;margin:0 3px}
.chip-i.fun{background-image:var(--fun-chip)}
/* ---------- one-icon/one-value virtual-currency display ---------- */
.lb-gameplay-amount{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.lb-pair-ic{width:14px;height:14px;object-fit:contain;flex:0 0 auto}
.tb-balance .lb-pair-ic{width:18px;height:18px}
.tb-balance .lb-pair-ic{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
/* ---------- topbar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:90;height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));
padding:calc(env(safe-area-inset-top,0px) + 7px) 11px 7px;
display:flex;align-items:center;gap:8px;max-width:none;margin-inline:0;border-radius:0;
/* The topbar is structural chrome: one fully opaque palette role. Keeping it
on --lb-topbar prevents route content from tinting or redefining it. */
background:var(--topbar);
border-bottom:1px solid var(--line);
box-shadow:0 4px 6px -1px rgba(0,0,0,.20),0 2px 4px -1px rgba(0,0,0,.12)}
.tb-home{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center}
.tb-home .lb-logo-button{width:54px;height:54px;border-radius:8px}
.tb-home:active .lb-logo-button{transform:scale(.92)}
.tb-icon{position:relative;width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;border-radius:6px;
background:var(--surface-2);border:1px solid var(--line);color:var(--chrome-icon);transition:transform .15s,border-color .2s,background .2s,color .2s}
.tb-rewards,.tb-chat{color:var(--chrome-icon)}
.tb-icon:hover,.tb-icon.is-active{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.tb-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Instant swap, no crossfade: mid-fade both sheets are part-transparent and the
glyph reads as two half-painted copies of itself (owner 2026-08-08). */
.tb-icon .tb-nav-img{position:absolute;inset:50% auto auto 50%;width:31px;height:31px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.42));transform:translate(-50%,-50%);transition:none}
.tb-icon .tb-nav-purple{opacity:0}
.tb-icon:hover .tb-nav-base,.tb-icon.is-active .tb-nav-base{opacity:0}
.tb-icon:hover .tb-nav-purple,.tb-icon.is-active .tb-nav-purple{opacity:1}
.tb-wallet svg{color:var(--action-primary-ink);fill:currentColor;stroke:none}
.tb-registry-ic{width:25px;height:25px;display:grid;place-items:center;color:inherit}
.tb-icon .tb-registry-ic svg{display:block;width:100%;height:100%;fill:currentColor;stroke:none}
.tb-icon .tb-registry-ic svg[fill="none"]{fill:none;stroke:currentColor;stroke-width:1.5}
.tb-chat.is-active{background:var(--selection-fill);border-color:var(--control-border);color:var(--selection-ink)}
.tb-chat.is-active svg{stroke:currentColor}
.tb-chat.is-active .tb-nav-img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.38))}
.tb-rewards.is-active{background:var(--selection-fill);border-color:var(--control-border);color:var(--selection-ink)}
.tb-icon:active{transform:scale(.92)}
.tb-home:focus-visible,.tb-icon:focus-visible,.tb-balance:focus-visible,.tb-profile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tb-bell .dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:var(--r-pill);background:var(--notification,#E8B849);
color:var(--action-gold-ink);font:800 10px/18px var(--f-body);text-align:center}
.tb-bell{position:relative}
.tb-profile{position:relative}
.tb-profile .dot,.tb-count{display:none;position:absolute;top:-3px;right:-3px;width:18px;min-width:18px;height:18px;padding:0;
place-items:center;border-radius:50%;background:var(--notification,#E8B849);color:var(--action-gold-ink);
font:800 10px/1 var(--f-disp);font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
box-shadow:0 0 0 2px var(--bg,#080808);z-index:3}
.tb-profile.has-unread .dot,.tb-count:not([hidden]){display:grid}
/* mobile: the wrapper dissolves so balance+wallet flow like normal bar items;
desktop (below, ≥1080) pins the pair to the exact horizontal center. */
.tb-center{display:contents}
/* 48vw starved the pill on narrow screens: measured 95px wide holding a
71px number in 57px of space, so 229.17 rendered as 229.1 and the chevron
looked like it was sitting on top of the balance (owner 2026-08-08). The
ellipsis stays as the safety valve for genuinely huge balances; it just is
not allowed to fire on ordinary ones any more. */
.tb-balance{flex:0 1 auto;width:fit-content;min-width:0;max-width:min(72vw,300px);height:54px;display:flex;align-items:center;gap:9px;padding:0 13px 0 10px;border-radius:6px;
background:var(--control-deep);border:1px solid var(--line);overflow:hidden;transition:background .2s,border-color .2s,color .2s}
.tb-balance:hover,.tb-balance.is-active{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)}
.tb-balance:hover .bal-caret,.tb-balance.is-active .bal-caret{stroke:var(--muted)}
.tb-balance .bal-chip{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
/* The item count that stacked above the chevron here was removed 2026-08-08 at
the owner's call — the pill reads as one number and one chevron again. The
count still lives on the Items row inside the dropdown. */
.bal-amt{min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:.2px;margin-right:auto;white-space:nowrap;color:var(--ink)}
/* 16px, not 20 (owner 2026-08-08: "the oversized chevron"). It sits next to a
21px number, so a chevron the same size as the text competes with it — this
is a hint that the pill opens, not a control in its own right. */
.bal-caret{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;transition:transform .18s ease}
/* No push-down on toggles or dropdowns (owner 2026-08-08). The press animation
is the language for "this commits something" — placing a bet, claiming a
reward. A toggle just flips, and a dropdown just opens a list; giving them
the same physical feedback makes every control read as a submit button.
Anything with aria-expanded is a disclosure, so it lands in the same set. */
.tb-balance:active,.game-period:active,.lbx-incog:active,.lbx-tab:active,
.fchip:active,select:active,[role="switch"]:active,[aria-haspopup]:active,
[aria-expanded]:active{transform:none!important}
.tb-balance.is-active .bal-caret{transform:rotate(180deg)}
.tb-profile{width:54px;height:54px;flex:0 0 auto;border-radius:50%;overflow:visible;padding:3px;border:1px solid var(--line-2);background:var(--surface-2);box-shadow:none}
.tb-profile img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;display:block;background:var(--surface-2);filter:brightness(.9) saturate(.84)}
.tb-profile:hover{border-color:var(--line-2);background:var(--surface-2);box-shadow:none}
.tb-profile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Top-right actions are filled circles, not outlined circles. Keep this rule
outside the responsive blocks so VIP, Chat and Profile use the same visual
treatment on desktop, tablet and phone. A tonal fill change preserves a
visible hover/focus state without drawing a ring around the control. */
.topbar .tb-rewards,.topbar .tb-chat,.topbar .tb-profile{
background:var(--surface-hi);border:0;outline:0;box-shadow:none;color:var(--chrome-text);
-webkit-tap-highlight-color:transparent}
.topbar .tb-rewards:hover,.topbar .tb-rewards.is-active,
.topbar .tb-chat:hover,.topbar .tb-chat.is-active,
.topbar .tb-profile:hover,.topbar .tb-profile.is-active{
background:var(--surface-active);border:0;outline:0;box-shadow:none;color:var(--chrome-text)}
.topbar .tb-rewards:focus-visible,.topbar .tb-chat:focus-visible,.topbar .tb-profile:focus-visible{
background:var(--surface-active);border:0;outline:2px solid var(--focus);outline-offset:2px;
box-shadow:none;color:var(--chrome-text)}
.topbar .tb-rewards .tb-registry-ic,.topbar .tb-chat .tb-registry-ic,
.topbar .tb-rewards svg,.topbar .tb-chat svg{width:20px;height:20px}
.topbar .tb-profile{padding:3px}
.topbar .tb-profile img{width:100%;height:100%;background:transparent}
/* Signed-out header: Login + Register at the right, chat toggle to their right. */
.topbar .tb-login,.topbar .tb-register{display:none;padding:0 20px;flex:0 0 auto;white-space:nowrap}
body.lb-guest .tb-login,body.lb-guest .tb-register{display:inline-flex}
body.lb-guest .tb-bell,body.lb-guest .tb-profile,body.lb-guest .tb-rewards{display:none}
/* A guest has no balance to switch and Wallet only opens the same join flow, so
the centre cluster goes: brand left, auth actions + chat right. */
body.lb-guest .tb-center{display:none}
body.lb-guest .tb-login{margin-left:auto}
/* Chat must come AFTER the two CTAs even though it is earlier in the DOM. */
body.lb-guest .tb-chat{order:3;margin-left:6px}
body.lb-guest .tb-login{order:1}
body.lb-guest .tb-register{order:2}
@media (max-width:430px){ .tb-login,.tb-register{padding-inline:14px} }
/* mobile header: logo left · balance + Wallet centred · rewards · profile right.
Chat lives in the bottom bar, and the bell folds INTO the profile button
(its unread count rides the avatar; the list opens from the account sheet). */
@media (max-width:1079px){
/* Bar is 6px shorter and the glyphs 3px bigger: the retired purple marker
freed the strip's top padding, so the room goes to the icons and the rest
back to the page (owner 2026-08-08). */
/* 64, not 60: the balance pill and the wallet/profile buttons are 42px, so a
60px bar left them 9px of air and they read as shoved against the top edge
(owner 2026-08-08). 64 gives 11px, matching the proportion the 70px desktop
bar has. Everything else on mobile derives from this token. */
:root{--topbar-h:64px;--botnav-h:56px}
.tb-chat,.tb-bell{display:none}
/* Push from the LEFT, not from the right-hand cluster. The auto margin used to
sit on .tb-rewards — "first of the cluster" — but lb-shell.css hides that
button under 764px, so on a phone nothing bid for the free space and the
avatar sat glued to the logo instead of the right edge (owner 2026-08-08).
One auto on .tb-home works whatever the cluster contains. */
.tb-home{margin-right:auto}
.tb-rewards{display:grid;margin-left:0}
.topbar{gap:7px;padding:calc(env(safe-area-inset-top,0px) + 6px) 10px 6px}
.tb-home{width:44px;min-width:44px;height:44px}.tb-home .lb-logo-button{width:42px;height:42px;min-width:42px;min-height:42px}
/* Centre inside the content row below the notch. `top:50%` centred against
the full safe-area box and pulled this pair upward by half the inset. */
.tb-center{position:absolute;left:50%;top:env(safe-area-inset-top,0px);height:var(--topbar-h);transform:translateX(-50%);display:flex;align-items:center;gap:7px}
/* Sized from what the pill actually holds, not a guessed reserve. Measured
at 375px: chip 24 + amount 71 + caret 15 + two 6px gaps + 15 padding =
~137px. The old clamp resolved to exactly 95px there, so 229.17 was
ellipsised to 229.1 and the caret looked like it sat on the number
(owner 2026-08-08). Floor is now above that measured need. */
.tb-center .tb-balance{flex:0 1 auto;width:fit-content;min-width:0;max-width:clamp(140px,calc(100vw - 218px),168px);height:44px}
.tb-icon{width:44px;height:44px;border-radius:50%}
/* Phone header: Wallet is the compact primary action — icon only, square,
with the same restrained elevation as the desktop Wallet action. */
.tb-wallet{width:44px;height:44px;padding:0;border:0;border-radius:6px;background:var(--action-primary);color:var(--action-primary-ink);box-shadow:var(--action-shadow)}
.tb-wallet:hover,.tb-wallet.is-active{background:var(--action-primary-hover);border-color:transparent;color:var(--action-primary-ink)}
.tb-wallet .tb-nav-img{width:22px;height:22px;filter:none}
.tb-wallet .tb-nav-base{opacity:1!important}
.tb-wallet .tb-nav-purple{display:none!important}
.tb-wallet-label{display:none}
.tb-icon .tb-nav-img{width:28px;height:28px}
.tb-profile{width:44px;height:44px;overflow:visible}
.tb-profile.has-unread .dot{display:grid}
}
/* small phones: scale the bar down so nothing overflows */
@media (max-width:430px){
.tb-home{width:44px;min-width:44px;height:44px;justify-content:start}.tb-home .lb-logo-button{width:40px;height:40px;min-width:40px;min-height:40px}
.tb-icon,.tb-profile{width:42px;height:42px}.tb-icon svg{width:23px;height:23px}
.tb-icon .tb-nav-img{width:25px;height:25px}
.tb-wallet{width:42px;height:42px}
.tb-center{gap:6px}.tb-center .tb-balance{height:42px}
/* The amount was set at 18px with a max-width that assumed ~200px of chrome
beside it; on a narrow phone the digits ran under the wallet/profile cluster.
Smaller type + a real shrink floor keeps it inside its own pill. */
.tb-balance{height:42px;max-width:clamp(140px,calc(100vw - 200px),168px);gap:6px;padding:0 8px 0 7px}.tb-balance .bal-chip{width:24px;height:24px}.bal-amt{font-size:15px;min-width:0;flex:0 1 auto}.bal-caret{width:15px;height:15px;flex:0 0 auto}
.topbar{gap:6px;padding-left:5px;padding-right:5px}
}
/* rank icons never squish (coins vs wide crests) */
img[src*="ranks/"]{object-fit:contain}
.balance-pop{position:fixed;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 8px);left:50%;
transform:translateX(-50%) translateY(-8px) scale(.96);transform-origin:top;
width:min(360px,calc(100vw - 24px));z-index:1530;display:grid;gap:8px;padding:10px;border-radius:var(--r-lg);
background:var(--rail);border:1px solid var(--line);box-shadow:0 24px 60px -34px rgba(0,0,0,.92);
opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
/* same reason as .scrim — a closed popover kept a live blur(20px) over the
topbar strip, so that strip re-rasterized on every animation underneath it */
.balance-pop.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* Desktop account menu. The avatar owns general account notifications; the
crown owns claimable VIP rewards. This menu is intentionally flat: rows are
destinations, not raised action buttons. */
.profile-pop{position:fixed;z-index:1540;width:min(300px,calc(100vw - 24px));max-height:calc(100vh - var(--topbar-h) - 18px);
overflow-y:auto;overscroll-behavior:contain;padding:12px;border-radius:8px;background:var(--rail);
border:1px solid var(--line);outline:0;box-shadow:0 24px 60px -34px rgba(0,0,0,.92);
opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px);transform-origin:top right;
transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.profile-pop.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
.profile-menu{display:grid;gap:10px}
.profile-menu-summary{padding:14px;border-radius:7px;background:var(--surface-2,#1E282E)}
.pm-user{display:flex;align-items:center;gap:11px;min-width:0;padding-bottom:12px;border-bottom:1px solid var(--line-2,#48565F)}
.pm-avatar-edit{position:relative;width:42px;height:42px;flex:0 0 42px;padding:0;border:0;border-radius:50%;background:var(--surface-3,#2A353C);box-shadow:none;overflow:hidden;cursor:pointer}
.pm-avatar{width:100%;height:100%;display:block;border-radius:inherit;object-fit:cover;object-position:center;background:var(--surface-3,#2A353C);transition:filter .16s ease}
.pm-avatar-edit-icon{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,32,45,.72);color:#fff;opacity:0;pointer-events:none;transition:opacity .16s ease}
.pm-avatar-edit-icon svg,.pm-avatar-edit-icon .uic{width:21px;height:21px;display:block}
.pm-avatar-edit-pencil{width:20px;height:20px;display:block;filter:brightness(0) invert(1)}
.pm-avatar-edit:hover .pm-avatar,.pm-avatar-edit:focus-visible .pm-avatar{filter:brightness(.72)}
.pm-avatar-edit:hover .pm-avatar-edit-icon,.pm-avatar-edit:focus-visible .pm-avatar-edit-icon{opacity:1}
.pm-avatar-edit:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pm-user-copy{display:grid;gap:2px;min-width:0}
.pm-user-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 14px/1.2 var(--f-disp);color:var(--ink,#F7F4F0)}
.pm-user-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:600 11px/1.2 var(--f-body)}
.pm-progress{display:grid;gap:7px;padding-top:11px}
.pm-progress-ranks{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ink,#F7F4F0);font:700 11px/1.2 var(--f-body)}
.pm-rank{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pm-rank img{width:18px;height:18px;object-fit:contain;flex:0 0 auto}
.pm-rank span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-progress-bar{height:6px;border-radius:999px;background:var(--surface-active);overflow:hidden}
.pm-progress-bar i{display:block;height:100%;border-radius:inherit;background:var(--success,#38C979)}
.pm-progress-pct{color:var(--muted);font:700 10px/1 var(--f-body);font-variant-numeric:tabular-nums}
.profile-menu .am-list{gap:2px;margin:0}
.profile-menu .am-row{min-height:44px;padding:8px 9px;border:0;border-radius:6px;background:transparent;gap:11px}
.profile-menu .am-row:hover{background:var(--surface-2,#1E282E)}
.profile-menu .am-row:focus-visible{background:var(--surface-2,#1E282E);outline:2px solid var(--focus);outline-offset:-2px}
.profile-menu .am-ic{width:22px;height:22px;color:var(--chrome-icon)}
.profile-menu .am-ic svg,.profile-menu .am-ic .uic{width:19px;height:19px;display:block;object-fit:contain}
.profile-menu .am-tx b{font:700 13px/1.15 var(--f-body);color:var(--chrome-text)}
.profile-menu .am-row.is-logout{margin-top:4px;padding-top:11px;border-top:1px solid var(--line,#2A353C);border-radius:0 0 6px 6px}
.profile-menu .am-row.is-logout:hover{color:var(--error,#F25F70)}
.profile-menu .am-row.is-logout:hover .am-ic,.profile-menu .am-row.is-logout:hover .am-tx b{color:var(--error,#F25F70)}
@media(max-width:1079px){.profile-pop{display:none}}
@media(prefers-reduced-motion:reduce){.profile-pop{transition:none}}
.bp-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;min-height:44px;padding:11px 12px;border-radius:8px;
background:var(--surface-2);border:1px solid var(--line);text-align:left;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
/* Selected balance: ONLY the currency name strengthens. The row fill, the
description and the amount stay neutral — owner's call, the old accent wash on
the whole bar read as the entire row being "on". */
.bp-row:hover{background:var(--surface-hi);border-color:var(--line-2)}
.bp-row.active{background:var(--surface-2);border-color:var(--line)}
.bp-row:disabled,.bp-row:disabled:hover{cursor:default;background:var(--surface-2);border-color:var(--line)}
.balance-pop .bp-row.active>span:first-child>b,
.balance-pop .bp-row:hover>span:first-child>b{color:var(--ink)}
.bp-row small{display:block;color:var(--faint);font-size:10px;font-weight:700;line-height:1.35;max-width:230px;transition:color .16s}
.bp-row b{font-family:var(--f-disp);transition:color .16s}
.bp-amt{font-family:var(--f-disp);font-size:16px}
.balance-pop .bp-row>span:first-child>b{font:800 16px/1.15 var(--f-body);letter-spacing:0}
/* ---------- bottom nav ---------- */
.botnav{position:fixed;bottom:0;left:0;right:0;z-index:90;height:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px));
padding:5px 12px calc(5px + env(safe-area-inset-bottom,0px));max-width:none;margin-inline:0;border-radius:0;
display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
background:var(--canvas);
border-top:1px solid var(--line)}
.botnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;border-radius:var(--r);
color:var(--faint);position:relative;transition:color .2s,background .2s;font-family:var(--f-disp);font-weight:600;font-size:9.5px}
/* Packs and Battles use the same transparent resting plate as every other
phone destination. The old grey fill was unique to these two buttons, so
whichever one was inactive looked selected while the actual selection was
carried by the full-ink icon and label. */
.botnav button[data-nav="packs"],
.botnav button[data-nav="battles"]{background:transparent}
.botnav .bn-ico{display:grid;place-items:center;width:26px;height:26px}
.botnav .bn-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.botnav .bn-ico img{width:25px;height:25px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.botnav .bn-ico .uic{grid-area:1/1}
/* Rest state is a DIM GLYPH, and the dimming is a COLOUR, never an alpha
(owner 2026-08-08). The old rule faded the whole svg to .55: every stroke
went see-through, and wherever two round-capped paths crossed the alpha
stacked, so a single glyph rendered part grey part white. Rest is the solid
hex that .55 ink used to resolve to over this bar; selected is full ink.
The pink accent rides at full strength in BOTH states — it is brand, not a
selection cue, and the state is carried by grey vs white on everything else. */
.botnav .bn-ico svg{color:var(--chrome-icon);opacity:1;transition:color .2s}
.botnav button.is-active .bn-ico svg,.botnav button.on .bn-ico svg{color:var(--ink)}
.botnav .bn-center .bn-ico svg{color:var(--ink)}
/* PNG destinations stay on their neutral base art. Selection is communicated
by full-strength ink on the glyph and label, never by the retired purple sheet. */
.botnav .bn-ico .uic{transition:none}
.botnav .bn-ico .uic-purple{opacity:0}
.botnav button.is-active .bn-ico .uic-base,.botnav button.on .bn-ico .uic-base{opacity:1}
.botnav button.is-active .bn-ico .uic-purple,.botnav button.on .bn-ico .uic-purple{opacity:0}
.botnav button.is-active,.botnav button.on{color:var(--ink)}
@media (hover:hover){.botnav button:hover{background:var(--surface-2);color:var(--ink)}}
/* No purple tab-marker. Full-ink glyph + full-ink label already say "selected",
and the bar was eating the button's top padding for a third copy of the same
fact — dropping it is what buys the icons their extra size below
(owner 2026-08-08). */
.botnav .bn-center{margin-top:-16px}
.botnav .bn-center .bn-ico{width:54px;height:54px;border-radius:50%;background:var(--grad-cta);box-shadow:var(--sh);color:var(--action-primary-ink)}
.botnav .bn-center .bn-ico svg{width:26px;height:26px;fill:currentColor;stroke:none}
.botnav .bn-center.is-active::before{display:none}
.botnav button:active{transform:scale(.9)}
/* Sizing lives AFTER the base block on purpose — the phone rules further up the
file lose to `.botnav .bn-ico svg` at equal specificity on source order. The
retired purple marker paid for these three pixels (owner 2026-08-08). */
@media (max-width:1079px){
.botnav .bn-ico{width:28px;height:28px}
.botnav .bn-ico svg{width:24px;height:24px}
.botnav .bn-ico img{width:27px;height:27px}
}
/* ---------- stage / screens ---------- */
.stage{max-width:var(--maxw);margin-inline:auto;padding:3px 10px 8px}
.screen{display:none}
.screen.is-active{display:block;animation:screenIn .42s cubic-bezier(.2,.8,.3,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.stagger>*{opacity:0;animation:upIn .5s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes upIn{to{opacity:1;transform:none}}
.stagger>*{transform:translateY(16px)}
/* in-place re-render (reward claim, poll, currency switch): show the content
where it already is instead of replaying the drop-and-rise entrance */
.stagger.lb-no-anim>*{animation:none!important;opacity:1!important;transform:none!important}
/* ---------- shared bits ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-disp);font-weight:600;font-size:11px;
letter-spacing:.22em;text-transform:uppercase;color:var(--pink-2)}
.h-title{font-family:var(--f-disp);font-weight:700;font-size:clamp(24px,6.4vw,34px);margin:4px 0 0;letter-spacing:.2px;line-height:1}
.sect-head{display:flex;align-items:center;justify-content:space-between;margin:10px 4px 8px}
.sect-head h2{font-family:var(--f-disp);font-weight:700;font-size:19px;margin:0;display:flex;align-items:center;gap:8px}
/* seam accent: flat pink parallelogram on the brand angle before every section
title (on the h2, not .sect-head — the head is space-between flex and a bare
::before there would re-slot the title) */
/* Brand seam bars removed site-wide (owner call 2026-07-31) — they were being
stripped screen-by-screen (VIP, Ladder, Settings, Challenges), so the rule
is simply off now rather than fighting it with per-page overrides. */
.sect-head h2::before{content:none}
/* "The benefits" — the one section title that carries a mark, matching the
reference. Works on both .sect-head (VIP Club) and .ro-sect-head (signed-out
rewards), so the sizing hangs off the icon, not the head. */
/* 2x (owner 2026-08-08: "make that the benefits image bigger like 2x bigger").
26 -> 52, and the heading variant 30 -> 60. */
.benefits-head-ic{width:52px;height:52px;flex:0 0 auto;object-fit:contain;display:block}
.ro-sect-head.benefits-head h2{display:flex;align-items:center;gap:10px}
.ro-sect-head.benefits-head .benefits-head-ic{width:60px;height:60px}
.link{color:var(--pink-2);font-weight:700;font-size:13px;font-family:var(--f-disp)}
.card{background:var(--glass);border:1px solid transparent;border-radius:var(--r-lg);box-shadow:0 20px 50px -36px rgba(0,0,0,.92),0 1px 0 rgba(255,255,255,.025) inset;clip-path:none}
.live-dot{display:block;width:6px;height:6px;flex:0 0 auto;border-radius:999px;background:#2DE01C;box-shadow:none;animation:lb-live-dot-scale-up .2s ease-out 1}
@keyframes lb-live-dot-scale-up{0%{transform:translate(-50%,-50%) scale(0)}}
/* semantic action foundation; callers adopt these roles in their owning tasks */
.lb-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--action-standard-height);padding:0 16px;border:0;border-radius:var(--action-standard-radius);font:var(--action-font-weight) var(--action-standard-font-size)/1 var(--f-disp);cursor:pointer;box-shadow:none;transition:background .12s ease,box-shadow .12s ease,transform .05s ease}
.lb-action--original{min-height:var(--action-original-height);border-radius:var(--action-original-radius);font-size:var(--action-original-font-size)}
.lb-action--compact{min-height:var(--action-compact-height);border-radius:var(--action-compact-radius);font-size:var(--action-compact-font-size)}
.lb-action--primary{background:var(--action-primary);color:var(--action-primary-ink)}
.lb-action--primary:hover:not(:disabled){background:var(--action-primary-hover)}
.lb-action--primary:active:not(:disabled){background:var(--action-primary-active)}
.lb-action--secured{background:var(--action-secured);color:var(--action-secured-ink)}
.lb-action--secured:hover:not(:disabled){background:var(--action-secured-hover)}
.lb-action--secured:active:not(:disabled){background:var(--action-secured-active)}
.lb-action--secondary{background:var(--action-secondary);border:1px solid var(--action-secondary-border);color:var(--action-secondary-ink)}
.lb-action--secondary:hover:not(:disabled){background:var(--action-secondary-hover)}
.lb-action--secondary:active:not(:disabled){background:var(--action-secondary-active)}
.lb-action--danger{background:var(--action-danger);color:var(--action-danger-ink)}
.lb-action--danger:hover:not(:disabled){background:var(--action-danger-hover);color:var(--action-danger-ink)}
.lb-action--danger:active:not(:disabled){background:var(--action-danger-active)}
/* Elevation belongs to filled actions. Compact neutral controls stay flat so
filters, icon utilities and tiny toggles do not read like primary CTAs. */
.lb-action.lb-action--primary:not(:disabled),
.lb-action.lb-action--secured:not(:disabled),
.lb-action.lb-action--danger:not(:disabled),
.lb-action.lb-action--secondary.lb-action--standard:not(:disabled),
.lb-action.lb-action--secondary.lb-action--original:not(:disabled){box-shadow:var(--action-shadow)}
.lb-action:focus-visible{outline:2px solid var(--action-focus);outline-offset:2px}
.lb-action:disabled{background:var(--action-disabled);color:var(--action-disabled-ink);box-shadow:none;cursor:not-allowed;transition:none}
@media(max-width:767px){.lb-action--compact{min-height:var(--action-standard-height);min-width:var(--action-standard-height)}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r);
font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--action-primary-ink);background:var(--grad-cta);
box-shadow:var(--action-shadow);transition:transform .14s,background .2s,box-shadow .2s}
.btn:hover{background:var(--action-primary-hover)}
.btn:active{background:var(--action-primary-active);transform:translateY(1px) scale(.99)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-gold{background:var(--grad-gold);color:var(--action-gold-ink);box-shadow:var(--sh-sm)}
.btn-gold:hover{background:var(--gold-2)}
.btn-ghost{background:var(--surface-3);border:1px solid var(--line-2);box-shadow:none;color:var(--ink)}
.btn-ghost:hover{background:var(--surface-hi)}
.btn-cyber{background:var(--grad-cyber);color:var(--action-primary-ink)}
.btn-cyber:hover{filter:brightness(1.08)}
.btn-block{width:100%}
.btn-sm{height:40px;font-size:13px;padding:0 14px;border-radius:var(--r-sm)}
.btn[disabled]{opacity:.45;pointer-events:none}
/* =====================================================================
LOBBY
===================================================================== */
.hero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:15px 16px 16px;margin-top:4px;
background:var(--hero-grad);border:1px solid var(--line-2);box-shadow:var(--sh)}
.hero .eyebrow,.hero h1,.hero p,.hero-cta{position:relative;z-index:1}
.hero .eyebrow{color:var(--purple-2)}
.hero h1{font-family:var(--f-disp);font-weight:700;font-size:clamp(20px,5.6vw,28px);margin:0 0 4px;line-height:1.04}
.hero p{margin:0 0 13px;color:var(--muted);max-width:42ch;font-size:13px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-cta .btn{flex:1;min-width:120px}
.hero-coins{position:absolute;right:-6px;bottom:-10px;width:92px;height:92px;opacity:.55;pointer-events:none;z-index:0;
background:var(--lucky-chip) center/contain no-repeat}
/* promo hero — code-built brand hero + promo side cards */
.promo-hero{display:grid;grid-template-columns:1fr;gap:10px}
.lb-hero{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line-2);box-shadow:var(--sh);
display:block;min-height:224px;padding:0;cursor:pointer;appearance:none;color:inherit;text-align:left;
background:var(--lb-surface,#121418)}
.hero-image-only:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.hero-image-only img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
@media (max-width:679px){
.lb-hero{min-height:172px}
}
.ph-side{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ph-card{position:relative;display:block;border:1px solid var(--line-2);margin:0;padding:0;background:none;cursor:pointer;
border-radius:var(--r);overflow:hidden;aspect-ratio:1000/438;box-shadow:var(--sh)}
.ph-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .3s ease,filter .3s ease}
.ph-card:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media(hover:hover){
.ph-card:hover img{transform:scale(1.03);filter:brightness(1.07)}
}
@media (prefers-reduced-motion:reduce){.ph-card img{transition:none}}
/* desktop: featured hero + two stacked side-card columns sharing its height */
@media (min-width:920px){
.promo-hero{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.ph-side{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:12px}
.ph-card{aspect-ratio:auto;height:100%;min-height:0}
}
/* 3-card promo: VIP on top (full width), Provably Fair + Refer side-by-side below
on mobile; three across on desktop. */
.promo-hero-3{grid-template-columns:1fr 1fr;gap:10px}
.promo-hero-3 .lb-hero{grid-column:1 / -1;min-height:150px}
.promo-hero-3 .ph-card{aspect-ratio:1000/540}
@media (min-width:920px){
.promo-hero-3{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.promo-hero-3 .lb-hero{grid-column:auto;min-height:0}
.promo-hero-3 .ph-card{aspect-ratio:auto;height:100%}
}
/* promo hero: big VIP (left, full banner, no crop) + compact Get-app over Refer (right column).
VIP's natural 1000x438 ratio sets the row height; Get-app flex-fills the space above Refer. */
.promo-hero-v2{grid-template-columns:1fr;gap:10px}
.promo-hero-v2 .ph-vip,.promo-hero-v2 .ph-refer{aspect-ratio:1000/438;min-height:0}
.promo-hero-v2 .ph-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.ph-getapp{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;overflow:hidden;text-align:left}
.ph-getapp:hover{border-color:rgba(255,255,255,.16)}
.ph-getapp-phone{height:54px;width:auto;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.ph-getapp-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.ph-getapp-tx b{font-family:var(--f-disp,Urbanist),system-ui;font-size:16px;font-weight:700;color:#fff}
.ph-getapp-tx small{font:500 12px Urbanist;color:#aab0bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-getapp-plus{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:6px;background:var(--pink);color:var(--action-primary-ink);font-size:22px;font-weight:600;line-height:1}
@media (min-width:920px){
.promo-hero-v2{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:stretch}
.promo-hero-v2 .ph-vip{aspect-ratio:1000/438;height:auto}
/* right column as a grid: Get-app fills the top (1fr), Refer sits natural below (auto = its ratio) */
.promo-hero-v2 .ph-right{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;height:100%}
.promo-hero-v2 .ph-getapp{min-height:0;padding:16px 18px;gap:16px}
/* card is now ~170px tall — grow the phone art to fill it, scale text up */
.promo-hero-v2 .ph-getapp-phone{height:auto;max-height:86%;align-self:center}
.promo-hero-v2 .ph-getapp-tx b{font-size:20px}
.promo-hero-v2 .ph-getapp-tx small{font-size:13px}
.promo-hero-v2 .ph-getapp-plus{width:40px;height:40px;font-size:26px;border-radius:8px}
.promo-hero-v2 .ph-refer{aspect-ratio:1000/438;height:auto}
}
@media (display-mode:standalone){ .ph-getapp{display:none} }
/* ---------- full-bleed summer hero ----------
Single banner anchored to the VIEWPORT (100vw), not the center column.
Sits behind the fixed sidebar/chat panels (lower z-index), so expanding or
collapsing either panel reveals/covers more of the SAME image — the hero
itself never resizes or reflows. */
.lb-hero-fb{position:relative;display:block;width:100%;margin:-8px 0 8px;overflow:hidden;line-height:0;border-radius:8px;clip-path:none}
.lb-hero-fb img{display:block;width:100%;height:auto;aspect-ratio:2172/724;object-fit:cover;object-position:center}
/* Three heroes on a 30s loop, 10s each. Pure CSS so it survives every screen
re-render with no interval to leak or tear down. Slide A (summer beach) is the
base layer; B and C stack over it and fade in on their turn.
B and C carry their own baked-in headlines, so the summer copy fades out in
step with them — running both at once would stack two headlines. */
.lb-hero-fb.is-rotating .lb-hero-slide.b,
.lb-hero-fb.is-rotating .lb-hero-slide.c{position:absolute;inset:0;height:100%;opacity:0}
.lb-hero-fb.is-rotating .lb-hero-slide.b{animation:lbHeroSlideB 30s ease-in-out infinite}
.lb-hero-fb.is-rotating .lb-hero-slide.c{animation:lbHeroSlideC 30s ease-in-out infinite}
.lb-hero-fb.is-rotating .lb-hero-copy{animation:lbHeroCopyA 30s ease-in-out infinite}
@keyframes lbHeroSlideB{0%,31.6%{opacity:0}33.3%,64.9%{opacity:1}66.6%,100%{opacity:0}}
@keyframes lbHeroSlideC{0%,64.9%{opacity:0}66.6%,98.3%{opacity:1}100%{opacity:0}}
@keyframes lbHeroCopyA{0%,31.6%{opacity:1}33.3%,98.3%{opacity:0}100%{opacity:1}}
/* reduced motion: hold the summer hero, no cross-fade */
@media (prefers-reduced-motion:reduce){
.lb-hero-fb.is-rotating .lb-hero-slide.b,
.lb-hero-fb.is-rotating .lb-hero-slide.c{animation:none;opacity:0}
.lb-hero-fb.is-rotating .lb-hero-copy{animation:none;opacity:1}
}
/* natural color fade: image stays crisp longer, then blends through its own sand tone (#85653D,
sampled from the beach) into the near-black page bg (#040405) — smooth, not a hard black wipe */
.lb-hero-fb::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to bottom,
rgba(4,4,5,0) 93%,
rgba(4,4,5,.45) 100%)}
/* hero copy: left-anchored over a soft directional scrim so the art stays visible.
Normal display type — no bubble/toy weights (owner). */
.lb-hero-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(4px,.9vw,12px);padding:0 clamp(14px,4vw,52px);line-height:1.15;
background:linear-gradient(90deg,rgba(4,4,5,.52) 0%,rgba(4,4,5,.28) 38%,rgba(4,4,5,0) 62%)}
.lb-hero-kicker{font:600 clamp(11px,1.5vw,16px) var(--f-disp,Urbanist);letter-spacing:.14em;text-transform:uppercase;color:#FFD9EE;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.lb-hero-title{margin:0;font:700 clamp(17px,3vw,38px)/1.12 var(--f-disp,Urbanist);letter-spacing:.005em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55);max-width:24ch}
.lb-hero-cta{display:inline-flex;align-items:center;margin-top:clamp(2px,.8vw,10px);padding:0 clamp(14px,2vw,24px);text-decoration:none}
@media (max-width:520px){
/* copy was bottom-anchored with a 4px gap, so the kicker sat right on top of the
headline near the base of the art — top-anchor it and give the two room */
.lb-hero-copy{justify-content:flex-start;padding-top:13px;padding-bottom:12px;gap:10px}
.lb-hero-title br{display:none}
}
@media (min-width:1080px){
/* contained (not full-bleed): the hero sits inside the centered content column
so its left edge lines up with the grids and never slides under the sidebar. */
.lb-hero-fb{width:100%;margin-left:0;margin-bottom:8px;border-radius:8px;overflow:hidden;position:relative;z-index:0}
.lb-hero-fb img{height:auto}
/* games sit fully BELOW the hero (no overlap) with a small breathing gap */
.lb-hero-fb{margin-bottom:14px}
/* content paints above the hero so the overlapped games sit on top of the faded strip, not under it */
.stage>.screen-inner{position:relative;z-index:1}
}
/* live bets */
.live{margin-top:18px;overflow:hidden}
.live-feed{display:grid;gap:8px;padding:10px}
.lb-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;
background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);
box-shadow:inset 3px 0 0 var(--accent,rgba(255,255,255,.2))}
.lb-row.new{animation:rowIn .5s cubic-bezier(.2,1.2,.4,1)}
@keyframes rowIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.lb-user{display:flex;align-items:center;gap:9px;min-width:0}
.lb-ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;object-fit:cover;border:1.5px solid var(--line-2);background:#0c0418}
.lb-uname{font-family:var(--f-disp);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-rankmini{width:16px;height:16px;vertical-align:-3px;margin-right:3px}
.lb-game{display:flex;align-items:center;gap:8px;min-width:0}
.lb-gico{width:30px;height:30px;border-radius:6px;flex:0 0 auto;object-fit:contain;padding:3px;
background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 40%,#160722),#0c0418);border:1px solid var(--line)}
.lb-gname{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap}
.lb-nums{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.lb-bet{font-size:11px;color:var(--faint);font-weight:700}
.lb-mult{font-family:var(--f-disp);font-weight:600;font-size:13px}
.lb-pay{font-family:var(--f-disp);font-weight:700;font-size:14px}
.lb-pay.win{color:var(--green)}.lb-pay.lose{color:var(--faint)}
/* lobby category rows (Shuffle-style horizontal shelves) */
#lobbyRows{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.game-row-sect{margin-top:6px}
.row-head{display:flex;align-items:center;gap:10px}
.row-head h2{flex:0 1 auto}
.row-viewall{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-disp);font-weight:700;font-size:12.5px;color:var(--purple-2,#a78bfa);
background:none;border:0;cursor:pointer;padding:0 4px;letter-spacing:.02em}
.row-viewall:hover{text-decoration:underline;text-underline-offset:3px}
.row-viewall:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.row-head .row-nav{display:flex;gap:6px;margin-left:0}
.row-head .row-viewall+.row-nav{margin-left:0}
.row-head:not(:has(.row-viewall)) .row-nav{margin-left:auto}
.rn-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;cursor:pointer;
background:var(--surface-hi);border:1px solid var(--line);color:#cfc6e6;transition:background .15s,color .15s}
.rn-btn svg{width:16px;height:16px}
.rn-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.game-row{--game-card-lift-space:16px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2.3*9px)/3.3);gap:9px;
/* A horizontal scrollport also clips vertically. Reserve room for the 8px
hover lift, then offset that room so resting cards keep their old baseline. */
overflow-x:auto;scroll-snap-type:x proximity;margin-top:-12px;padding:var(--game-card-lift-space) 0 7px;scrollbar-width:none;overflow-anchor:none}
.game-row::-webkit-scrollbar{display:none}
.game-row .gcard{scroll-snap-align:start;animation:none}
@media(min-width:680px){.game-row{grid-auto-columns:calc((100% - 3.5*11px)/4.5);gap:11px}}
@media(min-width:920px){.game-row{grid-auto-columns:calc((100% - 5.5*13px)/6.5);gap:13px}}
@media(min-width:1440px){.game-row{grid-auto-columns:calc((100% - 5.5*14px)/6.5);gap:14px}}
/* game grid + cards (per-game accent) */
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.gcard{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:3/4;display:block;container-type:inline-size;isolation:isolate;
background:var(--surface-2);border:1px solid var(--line);
box-shadow:0 18px 36px -28px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.035) inset;
transition:transform .24s cubic-bezier(.22,1,.36,1)}
.gcard::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
.gcard img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .24s cubic-bezier(.22,1,.36,1),filter .24s cubic-bezier(.22,1,.36,1)}
.gcard .scrim{position:absolute;inset:auto 0 0 0;height:62%;z-index:2;
background:linear-gradient(180deg,transparent 0%,rgba(4,5,10,.24) 34%,rgba(4,5,10,.74) 72%,rgba(4,5,10,.98) 100%)}
/* Titles WRAP now (owner 2026-08-07). With both side panels open a lobby card
drops under ~110px, and one line of VIDEO POKER at that width was either
clipped or shrunk past reading. Two lines — VIDEO / POKER, LUCKY / TOWER — is
the answer; `flex-wrap` plus a per-word span is all it takes, since the words
are already separate nodes. */
.gcard .gtitle{position:absolute;left:10px;right:10px;bottom:13px;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;text-align:center;gap:0 .16em;
color:#fff;font-family:var(--f-disp);font-weight:500;font-size:clamp(11px,12.5cqw,26px);line-height:.92;letter-spacing:0;text-transform:none;
overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance;
text-shadow:0 7px 15px rgba(0,0,0,.9);
transition:color .18s,text-shadow .18s}
.gcard .gtitle .title-word{display:inline-block;max-width:100%}
/* The accent bar under the title is gone (owner 2026-08-07): it read as a glow
strip, it was the one thing on the card that changed length on hover, and the
9px it hung below the text is space the title now gets to use. */
.gcard .gtitle.vibe-playful{text-shadow:0 7px 15px rgba(0,0,0,.86)}
.gcard .gtitle.vibe-impact{text-shadow:0 8px 16px rgba(0,0,0,.9)}
.gcard .gtitle.vibe-clean{text-shadow:0 7px 15px rgba(0,0,0,.88)}
.gcard .title-advanced-dice,.gcard .title-chicken-road,.gcard .title-lucky-packs,.gcard .title-video-poker{font-size:clamp(9.5px,10.2cqw,22px);line-height:.96}
.gcard .title-blackjack,.gcard .title-baccarat,.gcard .title-roulette{font-size:clamp(10px,11.4cqw,23px)}
.gcard:active{transform:scale(.97)}
@media(hover:hover){.gcard:hover{transform:translateY(-4px)}}
.gcard.is-locked,.game-more-card.is-locked{opacity:.56;filter:grayscale(.78);cursor:not-allowed}
.gcard.is-locked .cover,.game-more-card.is-locked img{filter:grayscale(.82) brightness(.64)}
.gcard .tag{position:absolute;top:10px;right:10px;z-index:3;font-family:var(--f-disp);font-weight:700;font-size:9px;letter-spacing:.1em;
padding:4px 9px;border-radius:99px;color:#07020d;background:var(--grad-gold);box-shadow:var(--edge)}
.gcard .tag.hot{background:var(--grad-cta);color:var(--action-primary-ink)}
/* embedded BetOrigami game page */
.game-screen{display:grid;gap:18px;padding-top:10px}
.game-viewer-card{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);border:1px solid transparent;box-shadow:0 20px 50px -36px rgba(0,0,0,.92),0 1px 0 rgba(255,255,255,.025) inset}
/* Keep Keno's outer frame borderless and remove its inset edge ring at all four
corners. The game itself owns the footer and panel dividers. */
.game-viewer-card--keno{border-color:transparent;box-shadow:var(--sh)}
/* Keno's stacked tablet/phone layout is a full-width game surface. The shared
lobby column deliberately narrows other pages at these breakpoints, but that
left the 8-column board as a small thumbnail. Break only this route back out
to the viewport while keeping the reference's calm outer gutter. */
@media(max-width:919px){
.game-screen:has(.game-viewer-card--keno){
width:100vw;
max-width:none;
margin-left:calc(50% - 50vw);
padding-left:clamp(16px,2.85vw,24px);
padding-right:clamp(16px,2.85vw,24px);
}
}
/* The remaining finished game frames use the same edge treatment as Keno:
their own vertical panel divider and footer divider stay inside the iframe,
while the lobby card contributes no second outline around the perimeter. */
.game-viewer-card--limbo,
.game-viewer-card--mines,
.game-viewer-card--blitz,
.game-viewer-card--blackjack,
.game-viewer-card--baccarat,
.game-viewer-card--diamonds,
.game-viewer-card--roulette,
.game-viewer-card--plinko,
.game-viewer-card--chicken-road,
.game-viewer-card--hilo,
.game-viewer-card--coinflip,
.game-viewer-card--video-poker,
.game-viewer-card--snakes{border-color:transparent;box-shadow:var(--sh)}
.game-viewer-card--plinko{box-shadow:none}
.game-viewer-card--mines{box-shadow:none}
.game-viewer-card--crash{border:0;box-shadow:none}
.game-viewer-card--dice{border:0;box-shadow:none}
/* min-height is capped by the space actually available. A flat min-height:690px
made the frame taller than its slot on any phone under ~860dvh, and because
every game sets overscroll-behavior:contain internally the iframe swallowed
the drag instead of chaining it to the page — so you could not scroll past a
tall game (keno worst, its board is the tallest). Owner report 2026-07-31.
Root cause fixed 2026-08-05: the 13 pages that set `overscroll-behavior:none`
on html/body now set `contain auto`, so vertical scroll chains out to this
page while horizontal stays contained. Never reintroduce a Y value of
none/contain in a game page — it re-freezes the lobby under the cursor. */
/* svh, NOT dvh (owner 2026-08-08: "my screen literally jitters"). dvh tracks the
live viewport, so on a phone it changes on every pixel the URL bar slides — the
frame resized continuously WHILE you scrolled, each resize relaid the game out
inside it, and the whole page shuddered. svh is the small-viewport height: one
fixed number for the session, so the frame holds still and the scroll is smooth.
The frame is a hair shorter with the bar retracted; that is the trade. */
.game-frame{display:block;width:100%;height:min(766px,calc(100svh - var(--topbar-h) - var(--botnav-h) - 34px));
min-height:min(690px,calc(100svh - var(--topbar-h) - var(--botnav-h) - 34px));border:0;background:var(--lb-surface,#121418)}
/* game footer bar — shell-rendered strip welded to the bottom of the game card.
The engine's own footer (volume / info / instant bet) stays inside the frame;
its History + shield are hidden there so these three own the row. */
.gfbar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:48px;padding:0 10px;
background:var(--lb-game-footer,#0D1317);border-top:1px solid var(--lb-game-line,#2A353C)}
.gfbar-left{display:flex;align-items:center;gap:2px}
.gfb-ico{width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px;display:grid;place-items:center;border:0;border-radius:6px;
background:transparent;color:var(--chrome-icon,var(--lb-chrome-icon,#C6C0BA));cursor:pointer;padding:0;transition:background .12s,color .12s,transform .12s}
.gfb-ico svg{width:19px;height:19px}
.gfb-ico:hover{background:var(--lb-game-raised,#2A353C);color:var(--chrome-icon,var(--lb-chrome-icon,#C6C0BA))}
.gfb-ico:active{transform:scale(.94)}
/* No mini player on phones (owner 2026-08-08). The docked player is a second,
smaller frame beside the page — on a 375px screen there is no "beside", so it
just replaces the game with a worse copy of it. Live Stats keeps its button:
that one is a panel and works at any width.
The button is left OUT of the markup rather than hidden here — a display:none
flex child still leaves its gap. See gameFooterBarHTML. */
.gfb-ico.on{color:var(--chrome-icon,var(--lb-chrome-icon,#C6C0BA));background:var(--lb-game-active,#3A464E)}
.gfb-ico.on svg{fill:currentColor}
.gfb-pf{display:inline-flex;align-items:center;gap:6px;height:44px;min-height:44px;padding:0 6px;border:0;border-radius:6px;
background:transparent;color:var(--muted);cursor:pointer;font:600 13px/1 var(--f-body);transition:color .12s}
.gfb-pf span{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gfb-pf svg{width:16px;height:16px;flex:0 0 auto}
.gfb-pf:hover{background:var(--lb-game-raised,#2A353C);color:var(--ink)}
.gfb-ico:focus-visible,.gfb-pf:focus-visible{outline:2px solid var(--lb-focus,#FF76D0);outline-offset:2px}
.gfb-pf:active{transform:scale(.97)}
.lb-game-footer-tip{position:fixed;z-index:10000;max-width:min(260px,calc(100vw - 24px));padding:9px 11px;
border-radius:7px;background:#fff;color:#090909;box-shadow:0 8px 24px rgba(0,0,0,.36);
font:600 12px/1.15 var(--f-body,Urbanist);white-space:nowrap;pointer-events:none;
opacity:0;visibility:hidden;transform:translate(-50%,calc(-100% - 10px));transition:opacity .1s ease,visibility .1s ease}
.lb-game-footer-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
border:5px solid transparent;border-top-color:#fff}
.lb-game-footer-tip.is-visible{opacity:1;visibility:visible}
@media (max-width:560px){.gfbar{height:46px;padding:0 6px}.gfb-pf{font-size:12.5px}}
.game-load-cover{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;color:#fff;background:var(--surface);transition:opacity .32s ease,visibility .32s ease;pointer-events:auto}
.game-viewer-card.is-loaded .game-load-cover{opacity:0;visibility:hidden;pointer-events:none}
.loading-brand-mark{position:relative;display:grid;place-items:center;overflow:visible;background:transparent;filter:none}
.loading-brand-mark img{width:64%;height:64%;object-fit:contain;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}
.game-loading-mark{width:148px;height:148px;border-radius:0}
/* External provider test games own a separate cross-origin frame. The loader,
footer and note make that boundary explicit without borrowing Originals-only
controls or presentation states. */
.game-viewer-card--provider{background:#080d14;border-color:rgba(49,214,255,.28)}
.game-frame.game-frame--provider{height:clamp(520px,70svh,760px);min-height:520px;background:#080d14}
.provider-game-status{padding:24px}
.provider-game-status-inner{display:grid;justify-items:center;gap:14px;max-width:480px}
.provider-game-status p{margin:0;color:var(--muted);font-size:14px;font-weight:700;line-height:1.4}
.provider-game-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.provider-game-actions[hidden]{display:none}
.game-viewer-card--provider.has-launch-error .loading-brand-mark{display:none}
.gfbar--provider{justify-content:space-between}
.provider-game-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1px solid rgba(49,214,255,.28);border-radius:999px;background:rgba(49,214,255,.08);color:#9beaff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.provider-game-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);gap:18px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.provider-game-info>div{display:grid;justify-items:start;gap:10px}
.provider-game-info h2{margin:0;color:#fff;font-family:var(--f-disp);font-size:24px;line-height:1}
.provider-game-info p,.provider-game-info small{margin:0;color:var(--muted);line-height:1.5}
.provider-game-info small{align-self:center}
@media(max-width:560px){
.game-frame.game-frame--provider{height:min(620px,calc(100svh - var(--topbar-h) - var(--botnav-h) - 24px));min-height:480px}
.provider-game-info{grid-template-columns:1fr;padding:17px 16px}
.provider-game-actions{width:100%}
.provider-game-actions .lb-action{flex:1}
.gfbar--provider{padding-inline:8px}
}
.game-info-card{overflow:hidden;border-radius:var(--r-lg);background:var(--surface-2);border:0;box-shadow:none}
.game-info-title{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:18px 16px;appearance:none;background:transparent;border:0;border-bottom:1px solid var(--line);color:#fff;text-align:left;font:inherit;cursor:pointer}
.game-info-card:not(.open) .game-info-title{border-bottom:0}
.game-info-copy{display:flex;align-items:center;gap:12px;min-width:0}
.game-info-name{display:block;margin:0;color:#fff;font-family:var(--f-disp);font-size:23px;font-weight:800;line-height:1;transition:color .16s ease}
.game-info-category{display:inline-flex;align-items:baseline;gap:4px;margin:0;padding:8px 11px;border-radius:6px;background:var(--surface-hi);color:#fff;font-size:14px;font-weight:700;line-height:1;white-space:nowrap}
.game-info-brand{font-size:inherit;font-weight:700;letter-spacing:0;text-transform:none}
.game-info-category-suffix{color:#fff}
.game-info-actions{display:flex;align-items:center;gap:8px;min-width:0}
.game-win-summary{display:flex;align-items:center;min-width:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--lb-surface-2,#202329)}
.game-summary-pill{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 10px;background:var(--surface-3);font-family:var(--f-disp);font-weight:800;white-space:nowrap}
.game-summary-pill .chip-i{width:18px;height:18px}
.game-summary-trophy{color:var(--gold);font-size:12px}
.game-summary-user{max-width:110px;margin:0!important;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff!important;font-size:12px!important}
.game-summary-muted{padding:0 12px;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}
.game-info-toggle{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:0;background:transparent;color:#fff;transition:color .16s ease}
.game-info-toggle svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.game-info-title.is-open .game-info-toggle svg{transform:rotate(180deg)}
.game-info-title:focus{outline:0}
@media(hover:hover){.game-info-title:hover .game-info-name,.game-info-title:hover .game-info-toggle{color:var(--purple-2)}}
.game-info-body{padding:14px 14px 16px}
.game-info-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
/* ---- filtered game-list screens: Favorites / Enhanced RTP / Recently played ----
Back control + title, then the SAME toolbar and grid the lobby uses. Colours
come off the ladder (css/lb-palette.css); no new tones. */
.gl-head{display:flex;align-items:center;gap:14px;margin:2px 0 18px}
.gl-back{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:8px;
background:var(--lb-surface-2,#202329);color:var(--ink);cursor:pointer;transition:background .16s ease,color .16s ease}
.gl-back:hover{background:var(--lb-surface-3,#2A2E38)}
.gl-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gl-head h2{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--f-disp);font-weight:700;font-size:26px;color:var(--ink)}
.gl-head-ic{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;color:var(--muted)}
.gl-head-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* The grid sat 4px under the search field; the reference leaves the covers
real air. Scoped to the list screens so the lobby's own rhythm is untouched. */
.gl-screen .games-toolbar{margin-bottom:22px}
.gl-screen .game-grid{margin-top:0}
.gl-empty{display:grid;justify-items:center;gap:12px;padding:46px 20px;text-align:center;color:var(--muted);font-weight:600}
.gl-empty .lb-emptyart{width:104px;height:auto}
@media (max-width:640px){
.gl-head{gap:10px;margin-bottom:14px}
.gl-back{width:38px;height:38px}
.gl-head h2{font-size:20px}
.gl-head-ic{width:22px;height:22px}
}
.game-tabs{display:flex;gap:4px;padding:4px;border-radius:6px;background:var(--control-deep);min-width:0;overflow:auto}
.game-tabs button{height:44px;min-height:44px;padding:0 13px;border-radius:6px;color:var(--muted);font-weight:800;white-space:nowrap}
.game-tabs button.on{background:var(--surface-active);color:#fff}
.game-period-wrap{position:relative;flex:0 0 auto}
.game-period{height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:142px;padding:0 12px;border-radius:6px;background:var(--surface-3);border:1px solid var(--line);font-weight:800;color:#fff;white-space:nowrap}
.game-period svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.game-period-wrap.open .game-period svg{transform:rotate(180deg)}
.game-period-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:none;min-width:164px;padding:6px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-2);box-shadow:var(--sh-lg)}
.game-period-wrap.open .game-period-menu{display:grid;gap:4px}
.game-period-menu button{height:38px;padding:0 12px;border-radius:6px;text-align:left;color:var(--muted);font-weight:800}
.game-period-menu button:hover{background:var(--surface-hi);color:#fff}
/* Period choice is navigation state, so both its fill and label remain on the
neutral selection ladder instead of borrowing the action family. */
.game-period-menu button.on,.game-period-menu button.on:hover{background:var(--selection-fill);color:var(--selection-ink)}
.game-lb-table{display:grid;border-top:1px solid var(--line)}
.game-lb-head,.game-lb-row{display:grid;grid-template-columns:74px minmax(130px,1fr) minmax(92px,.75fr) minmax(112px,.85fr) minmax(108px,.75fr) minmax(112px,.9fr);align-items:center;gap:10px}
.game-lb-head{min-height:50px;color:var(--faint);font-size:11px;font-weight:800}
.game-lb-row{min-height:58px;border-top:0;font-weight:800}
.game-lb-row:nth-child(odd){background:rgba(255,255,255,.025)}
.game-user{display:flex;align-items:center;gap:10px;min-width:0}
/* Holds an AVATAR now, not a rank medal — so it is a round, edge-to-edge face
with no plate behind it, exactly like the live-bets ticker (owner 2026-08-08). */
.game-user-badge{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--lb-surface-2,#202329);border:0}
.game-user-badge img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:transparent;filter:none}
/* The incognito mark is a glyph, not a photo: it needs to breathe inside the ring. */
.game-user.is-hidden .game-user-badge img{width:66%;height:66%;object-fit:contain}
.game-user{cursor:pointer}
.game-user b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-rank{display:flex;align-items:center;gap:7px}
/* 24px so the struck-in number still reads; the cup carries its own metal
fills, so no colour rule applies to it. */
.game-rank-cup{width:24px;height:24px;flex:0 0 auto}
.game-rank b{font-family:var(--f-disp);color:var(--gold)}
.game-lb-row.place-1 .game-rank b{color:#ffc83d}
.game-lb-row.place-2 .game-rank b{color:#cfd6e6}
.game-lb-row.place-3 .game-rank b{color:#cd8b4a}
.game-date{color:#fff}
.game-bet,.game-payout{display:flex;align-items:center;gap:7px;color:#fff}
.game-payout{color:var(--success)}
.game-lb-empty{min-height:120px;display:grid;place-items:center;text-align:center;border-top:1px solid var(--line);color:var(--muted);font-weight:800}
.game-desc{border-top:1px solid var(--line);padding-top:16px;color:rgba(244,246,251,.78);line-height:1.62}
.game-desc p{margin:0 0 14px}
.game-desc-lead{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:start}
.game-desc-lead img{width:92px;border-radius:6px;border:0}
.game-desc-meta{margin:0 0 6px!important;color:var(--muted);font-size:12px;font-weight:800}
.game-more{min-width:0}
.game-more-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,34%);gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;padding:14px 2px 18px;scroll-snap-type:x proximity}
.game-more-card{position:relative;display:block;aspect-ratio:3/4;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);scroll-snap-align:start;box-shadow:0 18px 36px -28px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.035) inset;transition:transform .24s cubic-bezier(.22,1,.36,1);container-type:inline-size;isolation:isolate}
.game-more-card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
.game-more-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .24s cubic-bezier(.22,1,.36,1),filter .24s cubic-bezier(.22,1,.36,1)}
.game-more-card::before{content:"";position:absolute;inset:auto 0 0;height:62%;z-index:2;pointer-events:none;
background:linear-gradient(180deg,transparent 0%,rgba(4,5,10,.24) 34%,rgba(4,5,10,.74) 72%,rgba(4,5,10,.98) 100%)}
.game-more-card .gtitle{position:absolute;left:10px;right:10px;bottom:13px;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;text-align:center;gap:0 .16em;color:#fff;font-family:var(--f-disp);font-weight:500;font-size:clamp(11px,11.8cqw,24px);line-height:.92;letter-spacing:0;text-transform:none;text-wrap:balance;text-shadow:0 8px 16px rgba(0,0,0,.9);transition:color .18s,text-shadow .18s}
.game-more-card .gtitle .title-word{display:inline-block;max-width:100%}
@media(hover:hover){.game-more-card:hover{transform:translateY(-4px)}}
.game-locked-card{display:grid;place-items:center;text-align:center;gap:12px;min-height:360px;padding:34px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh),var(--edge)}
.game-locked-ic{width:54px;height:54px;display:grid;place-items:center;border-radius:var(--r);background:rgba(139,92,255,.08);color:var(--purple-2);border:1px solid rgba(139,92,255,.22)}
.game-locked-card h2{margin:0;font-family:var(--f-disp)}
.game-locked-card p{margin:0;max-width:420px;color:var(--muted);line-height:1.45}
@media (max-width:430px){
.game-screen{padding-left:7px;padding-right:7px}
.game-viewer-card,.game-info-card{border-radius:6px}
.game-frame{height:min(748px,calc(100svh - var(--topbar-h) - var(--botnav-h) - 24px));
min-height:min(690px,calc(100svh - var(--topbar-h) - var(--botnav-h) - 24px))}
.game-info-title{padding:16px 14px}
.game-info-name{font-size:22px}
.game-info-card:not(.open) .game-info-category{display:none}
.game-win-summary{display:none}
.game-info-controls{align-items:stretch;flex-direction:column}
.game-tabs{width:100%;justify-content:space-between}
.game-tabs button{flex:1;padding:0 8px}
.game-period-wrap{width:100%}
.game-period{width:100%;justify-content:space-between}
.game-period-menu{left:0;right:0}
.game-lb-head,.game-lb-row{grid-template-columns:76px minmax(0,1fr) minmax(108px,.9fr);gap:8px}
.game-lb-head span:nth-child(3),.game-lb-head span:nth-child(4),.game-lb-head span:nth-child(6),
.game-date,.game-bet,.game-payout{display:none}
.game-desc-lead{grid-template-columns:72px minmax(0,1fr)}
.game-desc-lead img{width:72px}
.game-more-row{grid-auto-columns:minmax(120px,34%)}
}
.searchbar{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-radius:8px;margin:6px 0 2px;
background:var(--input-bg);border:1px solid var(--control-border);overflow-anchor:none}
.searchbar:focus-within{border-color:var(--control-border)}
.searchbar svg{width:20px;height:20px;fill:none;stroke:var(--chrome-icon);color:var(--chrome-icon);stroke-width:2}
.searchbar input{flex:1;height:48px;background:none;border:0;outline:0;color:var(--chrome-text);font-family:var(--f-body);font-weight:500;font-size:16px;line-height:24px}
.searchbar input::placeholder{color:var(--placeholder);opacity:1}
/* No card around the empty state (owner 2026-08-07): the fill + stroke read as
a broken tile sitting in the grid. Luck and the copy carry it, same as
.gl-empty — the two empty states are the same moment. */
.game-search-empty{grid-column:1/-1;display:grid;justify-items:center;gap:6px;padding:46px 20px;text-align:center;
font-family:var(--f-disp);font-weight:700;color:var(--muted);background:none;border:0;border-radius:0}
.game-search-empty .lb-emptyart{width:104px;height:auto;margin-bottom:4px}
.game-search-empty .gse-title{font-size:15px;color:var(--ink,#F7F4F0);font-weight:700}
.game-search-empty .gse-sub{font-family:var(--f-body);font-weight:600;font-size:13px;color:var(--muted)}
.game-search-empty .gse-sub:empty{display:none}
.chips-row{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;margin:0 -2px;overflow-anchor:none}
/* games toolbar: search + filter chips share one row on desktop */
.games-toolbar{display:flex;flex-direction:column;gap:2px}
.games-toolbar .chips-row.lb-tabs{
padding:6px;
border:1px solid var(--control-border);
border-radius:8px;
background:var(--surface-2)
}
.games-toolbar .lb-tab{color:var(--chrome-text)}
.games-toolbar .lb-tab>svg{color:var(--chrome-icon)}
.games-toolbar .lb-tab.is-active,.games-toolbar .lb-tab.on{color:var(--chrome-text)}
.games-toolbar .lb-tab.is-active>svg,.games-toolbar .lb-tab.on>svg{color:var(--chrome-icon)}
@media(min-width:920px){
.games-toolbar{flex-direction:row;align-items:center;gap:12px}
/* The SEARCH takes the slack, not the chip tray (owner 2026-08-07). The tray
hugs its five chips and is capped, so it can never grow past the fold or
push the search field into a stub; extra width goes to the input. */
.games-toolbar .searchbar{flex:1 1 auto;min-width:220px;margin:0}
.games-toolbar .chips-row{flex:0 1 auto;min-width:0;max-width:min(52%,620px);padding:0;margin:0}
}
.fchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:var(--r-sm);font-family:var(--f-disp);font-weight:600;font-size:13px;
background:var(--surface-3);border:1px solid var(--line);color:var(--muted);transition:background .2s,color .2s}
.fchip:hover{background:var(--surface-hi);color:var(--ink)}
.fchip.on{background:var(--surface-active);color:#fff;border-color:var(--line-2)}
.fchip-img{width:17px;height:17px;object-fit:contain;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));margin-right:2px}
/* =====================================================================
CHAT
===================================================================== */
/* chat fills the viewport between top bar and bottom nav (no wasted space) */
.chat-screen{position:fixed;left:0;right:0;z-index:40;max-width:var(--maxw);margin-inline:auto;
top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));
bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px));
display:flex;flex-direction:column;padding:0 14px 8px;background:var(--rail)}
/* Support launcher when a right-hand surface is open (docked chat, side panel).
It used to be hidden outright; instead slide it left of that surface — the
button stays reachable and stops covering the panel's own controls, which is
how Shuffle does it. Mobile keeps hiding it: there is no room beside a
full-width sheet, and support is reachable from More > Support.
NOTE: the booted launcher iframe computes position:static — Intercom parks it
inside a hash-classed wrapper div that owns the fixed positioning. Offsetting
the iframe does nothing, so every rule here must also hit that wrapper
(.lb-ic-launcher-wrap, stamped by js/intercom-support.js, plus a :has()
fallback for the frames before the stamp lands). Dropping the wrapper
selectors puts the bubble back on top of the docked chat's Send button. */
@media (min-width:981px){
body.lb-chat-docked .intercom-lightweight-app-launcher,
body.lb-chat-docked .intercom-launcher-frame,
body.lb-chat-docked .lb-ic-launcher-wrap,
body.lb-chat-docked div:has(> iframe[name="intercom-launcher-frame"]),
body.lb-chat-docked iframe[name="intercom-launcher-frame"],
body.lb-chat-docked .intercom-launcher{right:calc(var(--chat-dock-w,360px) + 18px)!important}
body.lb-panel-open .intercom-lightweight-app-launcher,
body.lb-panel-open .intercom-launcher-frame,
body.lb-panel-open .lb-ic-launcher-wrap,
body.lb-panel-open div:has(> iframe[name="intercom-launcher-frame"]),
body.lb-panel-open iframe[name="intercom-launcher-frame"],
body.lb-panel-open .intercom-launcher{right:calc(var(--panel-w,600px) + 18px)!important}
/* the launcher iframe fills its wrapper — never offset it a second time */
body.lb-chat-docked .lb-ic-launcher-wrap > iframe[name="intercom-launcher-frame"],
body.lb-panel-open .lb-ic-launcher-wrap > iframe[name="intercom-launcher-frame"],
body.lb-chat-docked .lb-ic-messenger-wrap > iframe[name="intercom-messenger-frame"],
body.lb-panel-open .lb-ic-messenger-wrap > iframe[name="intercom-messenger-frame"]{right:0!important}
/* messenger panel follows the launcher so it never opens under the surface */
body.lb-chat-docked .intercom-messenger-frame,
body.lb-chat-docked .lb-ic-messenger-wrap,
body.lb-chat-docked div:has(> iframe[name="intercom-messenger-frame"]){right:calc(var(--chat-dock-w,360px) + 18px)!important}
body.lb-panel-open .intercom-messenger-frame,
body.lb-panel-open .lb-ic-messenger-wrap,
body.lb-panel-open div:has(> iframe[name="intercom-messenger-frame"]){right:calc(var(--panel-w,600px) + 18px)!important}
}
/* full-screen chat route and small screens: no room beside it, keep it hidden */
body[data-screen="chat"] .intercom-lightweight-app-launcher,
body[data-screen="chat"] .lb-ic-launcher-wrap,
body[data-screen="chat"] div:has(> iframe[name="intercom-launcher-frame"]),
body[data-screen="chat"] .intercom-launcher{display:none!important;visibility:hidden!important;pointer-events:none!important}
@media (max-width:980px){
body.lb-chat-docked .intercom-lightweight-app-launcher,
body.lb-chat-docked .lb-ic-launcher-wrap,
body.lb-chat-docked div:has(> iframe[name="intercom-launcher-frame"]),
body.lb-chat-docked .intercom-launcher,
body.lb-panel-open .intercom-lightweight-app-launcher,
body.lb-panel-open .lb-ic-launcher-wrap,
body.lb-panel-open div:has(> iframe[name="intercom-launcher-frame"]),
body.lb-panel-open .intercom-launcher{display:none!important;visibility:hidden!important;pointer-events:none!important}
}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 2px 11px;flex:0 0 auto}
.chat-head h2{font-family:var(--f-disp);font-weight:700;font-size:20px;margin:0;line-height:1}
.chat-head .chat-online{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--muted)}
.chat-head .chat-online b{color:var(--ink);font-variant-numeric:tabular-nums}
.chat-rules-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:0 13px;background:transparent;border:0;box-shadow:none}
.chat-rules-btn .bi svg{width:15px;height:15px}
.chat-close-btn{display:none;width:var(--action-compact-height);flex:0 0 auto;font-size:18px;line-height:1;background:transparent;border:0;box-shadow:none;color:var(--muted)}
.chat-close-btn svg{width:17px;height:17px;stroke-width:2}
.chat-close-btn:hover{color:#fff}
.chat-rain{--rain-accent:var(--purple);position:relative;isolation:isolate;overflow:hidden;flex:0 0 auto;display:block;min-height:67px;margin:0 0 9px;padding:0 0 2px;border-radius:8px 8px 4px 4px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.chat-rain::before{content:none}
.chat-rain.join-open{border-color:var(--line-2);box-shadow:0 14px 32px rgba(0,0,0,.22)}
.rain-card-body{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:61px;padding:8px 11px 8px 13px}
.rain-summary{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.rain-title-row{display:flex;align-items:center;gap:6px;min-width:0}
.rain-title{font-family:var(--f-disp);font-size:11px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.chat-rain.join-open .rain-title{color:var(--purple-2)}
.rain-info{width:17px;height:17px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.rain-info:hover,.rain-info:focus-visible{color:#fff;outline:none}
.rain-info svg{width:14px;height:14px;display:block}
.rain-pool{display:inline-flex;align-items:center;gap:5px;min-height:24px;margin-top:4px;color:#fff;font-family:var(--f-num);font-size:16px;font-weight:800;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}
.rain-pool .chip-i{width:17px;height:17px;flex:0 0 auto}
.rain-pool-value{display:inline-block;transform-origin:50% 70%}
.rain-pool-value.is-updating{animation:rainPoolUpdate .56s cubic-bezier(.22,1,.36,1)}
.rain-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.rain-topup{width:32px;min-width:32px;height:32px;min-height:32px;padding:0;border-radius:6px;color:var(--muted)}
.rain-topup:hover:not(:disabled),.rain-topup:focus-visible{color:var(--purple-2);border-color:var(--line-2)}
.rain-topup-icon{width:18px;height:18px;display:block}
.rain-join{width:auto;min-width:64px;height:32px;min-height:32px;padding:0 14px;border-radius:6px;background:var(--action-primary);color:var(--action-primary-ink);font-family:var(--f-disp);font-weight:800}
.rain-join:hover:not(:disabled){background:var(--action-primary-hover)}
.rain-join.joined{background:rgba(52,211,153,.18);color:var(--success)}
.rain-join:disabled{background:var(--surface-2);color:var(--muted);opacity:1;filter:none;cursor:not-allowed}
.rain-progress{position:absolute;z-index:2;left:0;right:0;bottom:0;height:2px;overflow:hidden;border-radius:0 0 3px 3px;background:var(--surface-2)}
.rain-progress-fill{display:block;width:100%;height:100%;transform-origin:left center;background:var(--rain-accent);transition:transform 1s linear;will-change:transform}
.rain-info-sheet{display:grid;gap:12px;color:var(--muted)}
.rain-info-sheet p{margin:0;color:#fff;font-weight:700;line-height:1.5}
.rain-info-sheet ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:13px;line-height:1.5}
/* Rain is a compact information sheet, so its close control floats over the
card instead of making the header a full button-row tall. Keep the panel in
the same neutral rail family as the rest of the account sheets. */
#profileSheet:has(.rain-info-sheet) .sheet-card{position:relative;border:0;background:var(--rail);box-shadow:0 20px 48px rgba(0,0,0,.46)}
#profileSheet:has(.rain-info-sheet) .rain-info-head{min-height:30px;margin-bottom:12px;padding-right:40px}
#profileSheet:has(.rain-info-sheet) .rain-info-head h3{color:#fff;font-size:24px;line-height:1.15}
#profileSheet:has(.rain-info-sheet) .rain-info-head .sheet-x{position:absolute;top:20px;right:8px;background:transparent;border:0;box-shadow:none}
#profileSheet:has(.rain-info-sheet) .rain-info-head .sheet-x:hover{background:transparent;color:#fff}
@keyframes rainPoolUpdate{0%{opacity:.7;transform:translateY(2px) scale(.98)}55%{opacity:1;transform:translateY(-1px) scale(1.035)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.rain-progress-fill{transition:none}
.rain-pool-value.is-updating{animation:none}
}
.chat-feed{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:8px 4px 12px;overscroll-behavior:contain}
.msg{display:flex;gap:4px;align-items:flex-start;max-width:100%;animation:upIn .3s ease}
.chat-mod-row{position:relative;padding-right:28px;min-width:0}
.chat-mod-menu{position:absolute;right:0;top:0;z-index:8}
.chat-mod-menu>summary{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;color:var(--faint);cursor:pointer;list-style:none;font-weight:800;letter-spacing:1px}
.chat-mod-menu>summary::-webkit-details-marker{display:none}
.chat-mod-menu[open]>summary,.chat-mod-menu>summary:hover{background:var(--surface-hi);color:#fff}
.chat-mod-menu>div{position:absolute;right:0;top:28px;width:160px;padding:6px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-2);box-shadow:0 16px 38px rgba(0,0,0,.5)}
.chat-mod-menu button{display:block;width:100%;padding:8px 9px;border-radius:6px;text-align:left;color:var(--muted);font-size:11px;font-weight:800}
.chat-mod-menu button:hover{background:rgba(255,255,255,.07);color:#fff}
.chat-mod-menu button.danger{color:#fb7185}
/* The cloud sits straight on the slab — no tile, no border. Dropping the "Rain"
label above the sentence takes a line of height off the row too. */
.msg.rain-msg{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;width:100%;padding:7px 11px;border-radius:8px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.rain-msg-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:0;background:none;border:0}
.rain-msg-icon img,.rain-msg-icon svg{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.rain-msg-body{min-width:0;font-size:13.5px;font-weight:700;line-height:1.42;color:rgba(255,255,255,.92)}
.rain-msg-body span{word-break:break-word}
.rain-msg-amt{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-disp);color:var(--success);white-space:nowrap;vertical-align:-3px}
.rain-msg-amt .chip-i{width:18px;height:18px}
.rain-msg-mark{display:grid;place-items:center;align-self:start;opacity:.9}
.rain-msg-mark img{width:27px;height:27px;object-fit:contain}
/* body flows rank + name + text inline, clamped to 3 lines (no bubble) */
.msg-body{min-width:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
font-size:14px;font-weight:500;line-height:1.5;color:#fff;word-break:break-word}
.msg-name{font-family:var(--f-disp);font-weight:700;font-size:15px;color:#fff;cursor:pointer;margin-right:5px}
.msg-name::after{content:':'}
.msg-name:hover{color:var(--purple);text-decoration:underline}
.msg.tip .msg-text{color:#fff}
.msg.tip .msg-text b{color:#fff}
.msg.tip .tip-to{color:var(--purple-2,#a78bfa);font-weight:500}
.tip-chip{display:flex;align-items:center;gap:6px;font-family:var(--f-disp);font-weight:500;font-size:14px;color:#fff;cursor:default}
.tip-chip .bal-chip{width:16px;height:16px}
/* Tipped amount rides INSIDE the message line (no grey .sb-chip slab). Purple so
the money reads at a glance without needing a box around it. */
.msg.tip .tip-paid{display:inline-flex;align-items:center;gap:5px;vertical-align:-3px;
font-family:var(--f-disp);font-weight:700;color:var(--purple-2)}
.msg.tip .tip-paid .lb-gameplay-amount{color:inherit;opacity:1}
.tip-amt{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-disp);font-weight:700;color:#fff;vertical-align:-3px}
.chat-compose{flex:0 0 auto;padding-top:8px}
.chat-inbar{display:flex;align-items:center;gap:5px;background:var(--surface-3);border:1px solid var(--line);border-radius:24px;padding:5px 6px 5px 10px;transition:border-color .15s}
.chat-inbar:focus-within{border-color:var(--line-2)}
.chat-ce{flex:1;min-width:0;min-height:38px;max-height:108px;overflow-y:auto;background:none;border:0;outline:0;color:#fff;font-family:var(--f-body);font-weight:600;font-size:16px;line-height:1.4;padding:8px 4px;word-break:break-word;white-space:pre-wrap}
.chat-ce:empty::before{content:attr(data-placeholder);color:var(--faint);pointer-events:none}
.chat-count{display:block;text-align:right;font-family:var(--f-disp);font-weight:700;font-size:10.5px;letter-spacing:.06em;
color:var(--faint);padding:4px 10px 0}
.chat-count.over{color:var(--red,#f43f5e)}
.chat-ce .chat-emoji{vertical-align:-0.32em}
/* Compose actions are bare marks — no border, no filled slab (owner 2026-08-07).
The send arrow only picks up brand pink once the composer has content. */
.chat-icon-btn{width:var(--action-compact-height);height:var(--action-compact-height);flex:0 0 auto;
display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;
color:var(--faint);cursor:pointer;transition:color .15s}
.chat-icon-btn:hover{color:var(--ink)}
.chat-icon-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.chat-emoji-btn svg{width:23px;height:23px}
.chat-send-btn svg{width:19px;height:19px;fill:currentColor}
.chat-send-btn.is-armed{color:var(--pink)}
.chat-send-btn.is-armed:hover{color:var(--pink-2,var(--pink))}
/* Keep the larger reaction aligned to the text top. Lowering it from the
baseline makes the line box start above the username, so the avatar appears
to jump above the name on emoji messages. */
.chat-emoji{display:inline-block;width:32px;height:32px;object-fit:contain;vertical-align:text-top;margin:0 2px}
/* public chat identity shows rank only; the profile photo stays inside the profile sheet */
.msg-rankwrap{flex:0 0 auto;display:grid;place-items:center;width:18px;height:21px;cursor:pointer;border-radius:6px;background:none;border:0}
/* Chat keeps the rank badge, but the picture itself is the same circle-and-fill
as everywhere else (owner 2026-08-08). */
.msg-rankicon{width:16px;height:16px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.msg-rankwrap .lb-bframe{width:16px;height:16px}
/* emoji picker panel */
.emoji-panel{flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0 0;max-height:236px;overflow-y:auto;overscroll-behavior:contain}
.emoji-sec+.emoji-sec{margin-top:10px}
.emoji-sec-h{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin:0 2px 6px}
.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.emoji-item{height:42px;border-radius:6px;display:grid;place-items:center;font-size:24px;line-height:1;transition:background .12s,transform .08s}
.emoji-item:hover{background:rgba(255,255,255,.09)}
.emoji-item:active{transform:scale(.9)}
.emoji-item img{width:30px;height:30px;object-fit:contain}
.tip-box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.tip-box-head{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:700;font-size:14px;margin-bottom:11px}
.rain-tip-form{display:grid;gap:12px}
.rain-tip-copy{margin:0;color:var(--muted);font-size:13px;font-weight:600;line-height:1.5}
.rain-tip-form .tip-input-row,.rain-tip-form .tip-presets{margin-bottom:0}
.tip-input-row{display:flex;align-items:center;gap:9px;height:50px;padding:0 14px;border-radius:var(--r);background:var(--surface-3);border:1px solid var(--line);margin-bottom:11px}
.tip-input-row .chip-i{width:24px;height:24px;flex:0 0 auto}
.tip-input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-family:var(--f-disp);font-weight:700;font-size:20px;-moz-appearance:textfield}
.tip-input::-webkit-outer-spin-button,.tip-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tip-input::placeholder{color:var(--faint);font-weight:600;font-size:16px}
.tip-mode{display:flex;gap:8px;margin-bottom:12px;background:var(--surface-3);border-radius:var(--r-sm);padding:4px}
.tip-mode-btn{flex:1;height:36px;border-radius:6px;background:none;color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:13px}
.tip-mode-btn.on{background:var(--surface-hi);color:var(--ink)}
.tip-switch{display:flex;align-items:center;gap:10px;margin-bottom:12px;cursor:pointer;user-select:none}
.tip-switch-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tip-switch-track{position:relative;flex:none;width:46px;height:26px;border-radius:999px;background:var(--surface-3);transition:background .18s ease}
.tip-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s ease}
.tip-switch-input:checked + .tip-switch-track{background:var(--selection-accent)}
.tip-switch-input:checked + .tip-switch-track::after{transform:translateX(20px)}
.tip-switch-input:focus-visible + .tip-switch-track{outline:2px solid var(--selection-accent);outline-offset:2px}
.tip-switch-label{font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--ink)}
.tip-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.tip-presets button{height:34px;border-radius:6px;background:var(--surface-3);border:1px solid var(--line);color:var(--muted);font-family:var(--f-disp);font-size:12px;font-weight:800}
.tip-presets button:hover{background:var(--surface-hi);color:#fff}
.chat-rules{margin:8px 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.chat-rules li{color:var(--muted);font-size:13.5px;font-weight:600;line-height:1.4}
/* Chat rules is a quiet information sheet: no container/control strokes, a
raised neutral acknowledgement action, and an unplated close glyph. Keep
this keyed to its content so every other shared #profileSheet variant keeps
its own border and close-button treatment. */
#profileCard:has(.chat-rules){border:0;outline:0}
#profileCard:has(.chat-rules) .sheet-x{background:transparent;border:0;outline:0;box-shadow:none}
#profileCard:has(.chat-rules) .sheet-x:hover,
#profileCard:has(.chat-rules) .sheet-x:focus-visible{background:transparent;color:#fff;outline:0;box-shadow:none}
#profileCard:has(.chat-rules) > .btn-block{background:var(--surface-hi);border:0;outline:0;box-shadow:none}
#profileCard:has(.chat-rules) > .btn-block:hover:not(:disabled),
#profileCard:has(.chat-rules) > .btn-block:focus-visible{background:var(--surface-active);outline:0;box-shadow:none}
#profileCard:has(.chat-rules) > .btn-block:active:not(:disabled){background:var(--action-secondary-active);outline:0;box-shadow:none}
.inv-code-card{padding:14px}
.inv-code-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.inv-code-row small{display:block;color:var(--faint);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.inv-code{font-family:var(--f-disp);font-weight:700;font-size:20px;letter-spacing:.06em;color:var(--ink)}
.inv-code-row .btn{margin-left:auto}
.inv-link-row input{width:100%;height:42px;border-radius:var(--r-sm);background:var(--surface-3);border:1px solid var(--line);
color:var(--muted);padding:0 12px;font-family:var(--f-body);font-weight:600;font-size:13px;outline:0}
.inv-actions{display:flex;gap:10px;margin-top:11px}
.inv-actions .btn{flex:1}
.inv-actions .bi svg{width:16px;height:16px}
.ref-list{display:flex;flex-direction:column;gap:9px}
.ref-row{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.ref-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1.5px solid var(--line-2);flex:0 0 auto}
.ref-meta{min-width:0;flex:1}
.ref-meta b{font-family:var(--f-disp);font-weight:700;font-size:14px;display:block}
.ref-meta small{color:var(--faint);font-size:11.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-status{flex:0 0 auto;font-family:var(--f-disp);font-weight:700;font-size:11px;padding:5px 10px;border-radius:var(--r-pill);
border:1px solid var(--line-2);color:var(--muted);background:var(--surface-3)}
.ref-status:is(.st-verified,.st-qualified,.st-rewarded){color:var(--success);border-color:color-mix(in srgb,var(--success) 52%,var(--line));background:color-mix(in srgb,var(--success) 10%,var(--surface-2))}
.ref-status:is(.st-pending,.st-review){color:var(--warning);border-color:color-mix(in srgb,var(--warning) 52%,var(--line));background:color-mix(in srgb,var(--warning) 10%,var(--surface-2))}
.ref-status.st-cancelled{color:var(--error);border-color:color-mix(in srgb,var(--error) 52%,var(--line));background:color-mix(in srgb,var(--error) 10%,var(--surface-2))}
/* =====================================================================
SUPPORT
===================================================================== */
/* =====================================================================
MENU
===================================================================== */
.menu-prof{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r-lg)}
.menu-prof .ava{width:62px;height:62px;border-radius:50%;object-fit:cover;border:2px solid var(--line-2)}
.menu-prof .who b{font-family:var(--f-disp);font-weight:700;font-size:19px;display:flex;align-items:center;gap:7px}
.menu-prof .who .rb{width:20px;height:20px}
.menu-prof .who small{color:var(--muted);font-size:12px;font-weight:700}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}
.mitem{display:flex;align-items:center;gap:12px;padding:15px;border-radius:var(--r);text-align:left;background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge);transition:transform .14s,border-color .2s}
.mitem:active{transform:scale(.97)}
.mitem .mi{width:42px;height:42px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto;font-size:20px;background:rgba(255,255,255,.05)}
.mitem b{font-family:var(--f-disp);font-weight:600;font-size:14px;display:block}
.mitem small{color:var(--faint);font-size:11px;font-weight:600}
/* =====================================================================
WALLET
===================================================================== */
.wallet-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wcard{padding:18px;border-radius:var(--r-lg);position:relative;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--sh)}
.wcard.lucky{background:var(--surface-2);border-left:3px solid var(--pink)}
.wcard.fun{background:var(--surface-2);border-left:3px solid var(--purple)}
.wcard .bal-chip{width:40px;height:40px}
.wcard small{display:block;color:rgba(255,255,255,.8);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:12px 0 2px}
.wcard b{font-family:var(--f-disp);font-weight:700;font-size:26px}
.seg{display:flex;gap:6px;padding:5px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);margin:18px 0 14px}
.seg button{flex:1;height:40px;border-radius:6px;font-family:var(--f-disp);font-weight:600;font-size:14px;color:var(--muted)}
.seg button.on{background:var(--selection-fill);color:var(--selection-ink);box-shadow:none}
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pkg{padding:16px;border-radius:var(--r);text-align:center;background:var(--glass);border:1px solid var(--line);position:relative;box-shadow:var(--edge);transition:transform .15s,border-color .2s}
.pkg.best{border-color:var(--gold)}
.pkg.best::before{content:"BEST VALUE";position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-family:var(--f-disp);font-weight:700;font-size:9px;letter-spacing:.1em;padding:3px 10px;border-radius:99px;background:var(--grad-gold);color:#3a1d04}
.pkg:active{transform:scale(.97)}
.pkg .pchip{width:54px;height:54px;margin:0 auto 8px;background:var(--lucky-chip) center/contain no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.pkg .amt{font-family:var(--f-disp);font-weight:700;font-size:20px}
.pkg .bonus{color:var(--green);font-size:11px;font-weight:800}
.pkg .price{margin-top:10px;height:38px;border-radius:6px;display:grid;place-items:center;background:var(--grad-cta);color:var(--action-primary-ink);font-family:var(--f-disp);font-weight:700;font-size:14px}
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.pay{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-size:22px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge)}
/* =====================================================================
REWARDS
===================================================================== */
.vip-top{display:flex;align-items:center;gap:13px}
.vip-top .ava{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid var(--line-2)}
.vip-top b{font-family:var(--f-disp);font-weight:700;font-size:18px;display:flex;align-items:center;gap:7px}
.vip-top .rb{width:22px;height:22px}
.vip-top small{color:var(--muted);font-size:12px;font-weight:700}
.vip-pct{margin-left:auto;font-family:var(--f-disp);font-weight:700;font-size:22px;color:var(--gold)}
.bar{height:10px;border-radius:var(--r-pill);background:var(--control-deep);overflow:hidden;margin:14px 0 8px;position:relative;border:1px solid var(--line)}
/* XP fill: flat green, no gradient/glow (owner 2026-07-17) — rewards hero,
VIP club, and the profile XP widget all share this bar */
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--success);position:relative;transition:width 1s cubic-bezier(.2,.8,.3,1)}
@keyframes shine{to{transform:translateX(180%)}}
.vip-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:700}
/* VIP Club hero — the rewards progress card plus the player's identity, the
reference layout (owner 2026-08-07). The old .vip-xp-card purple slanted
stamp tile it replaced is gone: the card uses the shared raised surface. */
.vip-hero{margin:0}
.vip-hero-who{display:flex;align-items:center;gap:11px;margin-bottom:16px;min-width:0}
.vip-hero-ava{width:40px;height:40px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.vip-hero-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.vip-hero-id>b{font:800 15px/1.15 var(--f-disp);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vip-hero-rank{display:inline-flex;align-items:center;gap:6px;min-width:0}
.vip-hero-rank img{width:15px;height:15px;flex:0 0 auto;object-fit:contain}
.vip-hero-rank i{font:700 12px/1.2 var(--f-disp);font-style:normal;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vip-hero-copy{margin:16px 0 0;max-width:44ch;color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.5}
/* rakeback cards — single owner (Instant / Daily / Weekly / Monthly) */
.rake-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.rake{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 12px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge);position:relative;overflow:hidden;clip-path:none}
.rake .rk-ico{width:84px;height:84px;margin:2px auto 10px;display:grid;place-items:center;overflow:visible}
.rake .rk-ico img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.5))}
.rake .rk-name{font-family:var(--f-disp);font-weight:600;font-size:14px}
.rake .rk-sub{color:var(--faint);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:2px 0 11px}
.rake.is-ready .rk-sub{color:var(--green)}
.rake.is-locked .rk-ico img{filter:drop-shadow(0 5px 9px rgba(0,0,0,.5)) grayscale(.12)}
@media(min-width:700px){.rake-grid{grid-template-columns:repeat(4,1fr)}}
/* Rewards state cards + shared VIP progress (full page and right-side VIP panel).
Both variants stay on the shared slate ladder; artwork supplies the only
decorative colour. */
.rw-progress{display:block;width:100%;padding:14px 16px;border:0;outline:0;border-radius:8px;background:var(--surface-2);color:var(--ink);text-align:left;box-shadow:none;transition:background .16s}
button.rw-progress:hover{background:var(--surface-hi);border:0}
button.rw-progress:focus-visible{background:var(--surface-hi);border:0;outline:2px solid var(--focus);outline-offset:2px}
.rw-progress-art{display:none;width:100%;height:142px;margin:0 0 12px;border-radius:7px;overflow:hidden;background:var(--surface-2)}
.rw-progress.is-compact .rw-progress-art{display:block}
.rw-progress-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.rw-progress.is-full{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);min-height:190px;padding:0;overflow:hidden;background:var(--surface-2)}
.rw-progress-info{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:22px 20px}
/* height:100%, not a fixed 170. The art column is a grid item that would have
stretched to the row on its own; the fixed height opted it out, and because
the info column next to it is taller than 190 the card ran on past the bottom
of the artwork and showed a bare grey strip there (owner 2026-08-08: "the
bottom of my vip hero is just grey"). min-height keeps the card from
collapsing when the info side is short. */
.rw-progress.is-full .rw-progress-art{display:block;height:100%;min-height:190px;margin:0;border-radius:0;position:relative;align-self:stretch}
.rw-progress.is-full .rw-progress-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.rw-progress.is-full .rw-progress-art::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 20%,transparent) 16%,transparent 42%)}
.rw-progress-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--f-disp);font-size:14px;line-height:1.2}
.rw-progress-top b,.rw-progress-top strong{font:800 14px/1.2 var(--f-disp)}
.rw-progress-top strong{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:var(--num-track)}
.rw-progress-bar{display:block;width:100%;height:7px;margin:10px 0 8px;border-radius:3px;overflow:hidden;background:var(--surface-hi)}
.rw-progress-bar i{display:block;height:100%;border-radius:3px;background:var(--success)}
.rw-progress-ranks{display:flex;align-items:center;justify-content:space-between;gap:14px}
.rw-progress-rank{display:inline-flex;align-items:center;min-width:0;gap:3px;color:var(--ink);font:700 12px/1.2 var(--f-disp)}
.rw-progress-rank.is-next{justify-content:flex-end;text-align:right}
.rw-progress-rank img{width:24px;height:24px;flex:0 0 auto;object-fit:contain}
.rw-progress-rank b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-progress-cta{width:100%;margin-top:14px}
.rw-progress-vip-button{width:max-content;margin-top:16px}
.rw-progress-pending{display:block}
.rw-progress-load-value{width:48px;height:17px}
.rw-progress-load-rank{width:88px;height:24px}
.rw-progress-unavailable-note{display:block;min-height:24px;color:var(--muted);font:600 12px/24px var(--f-body)}
.pm-progress-pending .pm-progress-ranks>i{width:88px;height:24px}
.pm-progress-pending[aria-busy="false"] .skel{animation:none;background:var(--surface-hi)}
.rw-section-head{display:flex;align-items:center;gap:8px;margin:20px 0 10px;color:var(--ink)}
.rw-section-head>span{display:grid;place-items:center;color:var(--chrome-icon)}
.rw-section-head svg{width:17px;height:17px}
.rw-head-ic{width:19px;height:19px;object-fit:contain;display:block}
.rw-section-head h2{margin:0;font:800 16px/1.2 var(--f-disp)}
.rw-section-count{display:grid;min-width:22px;height:22px;padding:0 6px;place-items:center;border-radius:6px;background:var(--notification);color:var(--action-gold-ink);font:800 12px/1 var(--f-num);font-style:normal;font-variant-numeric:tabular-nums}
.rw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px}
.rw-card{display:flex;min-width:0;min-height:0;flex-direction:column;align-items:center;padding:14px 12px 12px;border:0;border-radius:8px;background:var(--surface-2);text-align:center;box-shadow:none;overflow:hidden}
.rw-status{display:flex;width:100%;min-height:20px;align-items:center;justify-content:space-between;gap:8px;color:var(--ink);font:600 12px/1.2 var(--f-disp);text-align:left}
.rw-status>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* One colour for every reward-card gift (owner 2026-08-08: "why are some of
these gift svg more white than others"). Claimed-green below stays as the
single deliberate variation. */
.rw-gift{display:grid;flex:0 0 auto;place-items:center;color:var(--ink)}
.rw-gift svg,.rw-gift-ic{opacity:1}
.rw-gift svg{width:17px;height:17px}
.rw-gift-ic{width:17px;height:17px;object-fit:contain;display:block}
.rw-art{display:grid;width:76px;height:76px;margin:7px auto 5px;place-items:center}
.rw-art img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.45));transition:opacity .16s,filter .16s}
/* Blender rakeback props have matched framing and shadow-free transparent backgrounds.
Size only these four illustrations; earned rank/bonus artwork stays intact. */
.rw-card[data-reward-key$="_rakeback"] .rw-art{width:92px;height:92px;margin:6px auto 8px}
.rw-card[data-reward-key$="_rakeback"] .rw-art img{width:100%;height:100%;filter:none}
/* Rank Up Bonus: the chevron plate is the backdrop and the player's earned rank
badge sits in front of it. Both children share the one grid cell. */
.rw-art--ranked>img{grid-area:1/1}
.rw-art--ranked>img:first-child{transform:translateY(-16px) scale(.92)}
.rw-art--ranked .rw-art-rank{width:56px;height:56px;align-self:end;transform:translateY(4px);filter:drop-shadow(0 4px 7px rgba(0,0,0,.55))}
.rw-name{margin:0 0 12px;color:var(--ink);font:700 14px/1.2 var(--f-disp)}
.rw-card.is-bonus .rw-name{margin-bottom:4px}
.rw-description{display:-webkit-box;min-height:28px;margin:0 0 9px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--muted);font:600 11.5px/1.25 var(--f-disp)}
.rw-action{display:flex;width:100%;min-height:var(--action-standard-height);margin-top:auto;align-items:center;justify-content:center;gap:7px;border-radius:var(--action-standard-radius)}
.rw-action svg{width:16px;height:16px}
.rw-action .bal-chip{width:16px;height:16px;flex:0 0 auto}
.rw-card.is-ready .rw-claim:not(:disabled):active{transform:scale(.98)}
.rw-card.is-ready .rw-claim.busy{pointer-events:none}
.rw-card.is-claimed .rw-status,.rw-card.is-claimed .rw-name,.rw-card.is-claimed .rw-gift{color:var(--success)}
.rw-card.is-claimed .rw-claimed{border:1px solid var(--success);background:transparent;color:var(--success)}
.rw-card.is-waiting .rw-status,.rw-card.is-waiting .rw-gift{color:var(--warning)}
.rw-card.is-waiting .rw-timer{border:1px solid color-mix(in srgb,var(--warning) 52%,var(--line));background:color-mix(in srgb,var(--warning) 10%,var(--surface-2));color:var(--warning)}
.rw-card.is-waiting .rw-timer b{font:700 13px/1 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:var(--num-track)}
.rw-card.is-locked .rw-disabled{background:var(--action-disabled);color:var(--action-disabled-ink);cursor:not-allowed}
.rw-card.is-locked .rw-art img{opacity:.72;filter:grayscale(.15) drop-shadow(0 5px 9px rgba(0,0,0,.35))}
.rw-card.is-locked[data-reward-key$="_rakeback"] .rw-art img{filter:grayscale(.15)}
.desktop-panel>.rw-redeem{position:absolute;left:0;right:0;bottom:0;z-index:8;border-top:1px solid var(--line);background:var(--surface-2);box-shadow:0 -10px 24px rgba(0,0,0,.26)}
.rw-redeem summary{display:flex;height:70px;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;cursor:pointer;list-style:none;color:var(--ink);font:800 14px/1 var(--f-disp)}
.rw-redeem summary:hover{background:var(--surface-hi)}
.rw-redeem summary:focus-visible{background:var(--surface-hi);outline:2px solid var(--focus);outline-offset:-2px}
.rw-redeem summary::-webkit-details-marker{display:none}
.rw-redeem summary svg{width:17px;height:17px;transition:transform .16s}
.rw-redeem[open] summary svg{transform:rotate(180deg)}
.rw-redeem-body{padding:14px 16px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
.rw-redeem .promo-box{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.rw-redeem .promo-head{display:none}
.rw-redeem .promo-row{display:grid;grid-template-columns:1fr;gap:24px;margin:0}
.rw-redeem .promo-row input{width:100%;height:48px;border-color:var(--line);background:var(--control-deep);padding:0 16px;text-transform:none;letter-spacing:0}
.rw-redeem .promo-row input:focus{border-color:var(--focus);box-shadow:none}
/* Target the REAL button. promoBoxHTML emits `lb-action lb-action--primary
lb-action--compact`, never `.btn`, so both rules below were dead selectors and
the control fell through to the generic disabled treatment — which on this
panel background is near-invisible (owner 2026-08-08: "so grey that I can't
even see the Redeem button"). Disabled now stays legible: it is waiting for a
code, not broken, so it keeps readable text and a visible edge. */
.rw-redeem .promo-row .lb-action{width:100%;height:54px;border-radius:6px;background:var(--action-primary);color:var(--action-primary-ink);font:800 14px/1 var(--f-disp);opacity:1}
.rw-redeem .promo-row .lb-action:disabled{background:var(--surface-active);border:1px solid var(--line-2);color:var(--chrome-text);cursor:not-allowed;opacity:1}
.rw-redeem .promo-row .lb-action:not(:disabled):hover{background:var(--action-primary-hover)}
.rw-redeem .promo-msg:empty{display:none}
.rewards-quick .rw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.rewards-quick .rw-progress{padding:16px;margin-top:0}
.rewards-quick .rw-section-head{margin-top:20px}
.rewards-quick .rw-card{min-height:0;padding:12px 9px 10px}
.rewards-quick .rw-art{width:64px;height:64px;margin-top:6px}
.rewards-quick .rw-art img{width:64px;height:64px}
.rewards-quick .rw-card[data-reward-key$="_rakeback"] .rw-art{width:76px;height:76px}
.rewards-quick .rw-name{font-size:12.5px;margin-bottom:10px}
.rewards-quick .rw-card.is-bonus .rw-name{margin-bottom:3px}
.rewards-quick .rw-description{min-height:26px;margin-bottom:8px;font-size:10.5px}
.rewards-quick .rw-status{font-size:11.5px}
.rewards-quick .rw-action{width:100%}
@media(min-width:700px){.rewards-page:not(.rewards-quick) .rw-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media(max-width:640px){.rw-progress.is-full{grid-template-columns:1fr}.rw-progress.is-full .rw-progress-art{min-height:164px;order:-1}.rw-progress.is-full .rw-progress-art img{object-position:center 30%}.rw-progress.is-full .rw-progress-art::before{background:linear-gradient(180deg,transparent 68%,var(--surface-2) 100%)}}
@media(max-width:380px){.rw-card{padding-left:9px;padding-right:9px}.rw-status{font-size:11px}.rw-name{font-size:12.5px}.rw-action{font-size:12px}}
/* leaderboard */
.lead{padding:0;overflow:hidden;margin-top:6px;clip-path:none}
.lead-race-scene{position:relative;isolation:isolate;display:flow-root;background:var(--lb-bg)}
.lead-race-hero{position:relative;isolation:isolate;container-type:inline-size;width:100%;min-width:0;min-height:360px;aspect-ratio:5/2;box-sizing:border-box;overflow:hidden;padding:0;text-align:center;background:transparent;border-bottom:0}
.lead-race-art,.lead-race-art img{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.lead-race-art{z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.5) 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.5) 88%,transparent 100%)}
.lead-race-art img{object-fit:cover;object-position:center}
.lead-hero-overlay{position:absolute;z-index:1;inset:6% 12px auto;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,.6cqw,14px)}
.lead-hero-overlay .lead-countdown,.lead-hero-overlay .lead-hero-actions{margin-top:0}
.lead-hero-overlay .lead-clock-group small{color:var(--lb-ink-2)}
.lead-hero-overlay .lead-clock-digits{gap:3px}
.lead-hero-overlay .lead-clock-digits b{width:clamp(24px,3.2cqw,34px);height:clamp(36px,4.5cqw,46px);font-size:clamp(19px,2.2cqw,23px)}
@media(max-width:699px){.lead-race-hero{aspect-ratio:10/11;min-height:360px}}
.lead-hero-floaters{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.lead-hero-floater{position:absolute;display:block;width:72px;height:auto;opacity:.055;filter:grayscale(.3) drop-shadow(0 8px 15px rgba(0,0,0,.25));animation:leadLbFloat 6.5s ease-in-out infinite alternate}
.lead-hero-floater.is-beach-ball{opacity:.2;filter:saturate(.7) drop-shadow(0 8px 15px rgba(0,0,0,.28))}
.lead-hero-floater.is-1{left:5%;top:8%;width:76px;transform:rotate(-16deg);animation-delay:-1s}
.lead-hero-floater.is-2{left:12%;top:56%;width:56px;transform:rotate(13deg);animation-delay:-4s}
.lead-hero-floater.is-3{left:36%;top:7%;width:42px;transform:rotate(-9deg);animation-delay:-2.5s}
.lead-hero-floater.is-4{right:12%;bottom:10%;width:48px;transform:rotate(15deg);animation-delay:-5s}
.lead-hero-floater.is-5{right:5%;top:7%;width:82px;transform:rotate(14deg);animation-delay:-3s}
.lead-hero-floater.is-6{right:-2%;bottom:-38%;width:150px;opacity:.11;transform:rotate(18deg);animation-delay:-1.8s}
.lead-hero-floater.is-7{left:-3%;bottom:-38%;width:150px;opacity:.11;transform:rotate(-18deg);animation-delay:-4.8s}
.lead-hero-floater.is-8{right:5%;top:52%;width:43px;transform:rotate(-12deg);animation-delay:-.4s}
.lead-hero-tx{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(760px,100%);max-width:100%;padding:0}
.lead-race-hero h2{margin:0;font-family:var(--f-disp);font-weight:900;font-size:clamp(28px,5.2cqw,110px);line-height:1.05;color:var(--lb-ink);letter-spacing:-.025em;text-transform:uppercase}
/* Center the number itself: the small currency icon takes no layout width. */
.lead-hero-prize{position:relative;flex:none;align-self:center;white-space:nowrap;font:900 clamp(64px,9cqw,188px)/1 var(--f-num);letter-spacing:-.025em;color:var(--lb-gold)}
.lead-hero-prize .chip-i{position:absolute;right:calc(100% + .14em);top:50%;transform:translateY(-50%);width:.48em;height:.48em;vertical-align:0}
@media(max-width:699px){.lead-hero-overlay{top:10%;gap:8px}.lead-race-hero h2{font-size:clamp(28px,7cqw,48px)}.lead-hero-prize{font-size:clamp(58px,18cqw,116px)}}
.lead-race-hero p{max-width:670px;margin:11px 0 0;color:var(--lb-ink-2);font-size:13px;font-weight:600;line-height:1.45}
.lead-countdown{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin-top:18px;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.lead-countdown>i{margin-top:8px;color:var(--lb-ink-muted);font:800 24px/32px var(--f-num);font-style:normal}
.lead-countdown-error{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border-radius:7px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--error) 34%,var(--line));color:var(--error);font:700 12.5px/1 var(--f-disp)}
.lead-clock-group{display:flex;flex-direction:column;align-items:center;gap:5px}
.lead-clock-digits{display:flex;gap:5px}
.lead-clock-digits b{width:34px;height:46px;display:grid;place-items:center;border:0;border-radius:6px;background:var(--lb-control-deep);box-shadow:0 1px 0 color-mix(in srgb,var(--lb-ink) 6%,transparent) inset;color:var(--lb-ink);font:800 23px/1 var(--f-num)}
.lead-clock-group small{font:800 8.5px/1 var(--f-disp);text-transform:uppercase;letter-spacing:.08em;color:var(--lb-ink-muted)}
.lead-countdown.is-settling .lead-clock-digits b{color:var(--muted)}
.lead-hero-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px}
.summer-race-info-wrap{position:relative;display:inline-grid;place-items:center}
.summer-race-info-btn{min-height:36px;padding:0 12px;gap:6px;background:var(--control-deep);color:var(--lb-ink-2);font-size:12px;cursor:help}
.summer-race-info-btn svg{width:16px;height:16px;display:block;flex:0 0 auto}
@media(max-width:767px){.summer-race-info-btn{min-height:44px}}
.summer-race-info-btn:hover{color:var(--lb-ink)}
.summer-race-info-btn:focus-visible{color:var(--lb-ink);outline:2px solid var(--focus);outline-offset:2px}
.summer-race-info-tip{position:absolute;z-index:4;left:50%;bottom:calc(100% + 8px);display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:calc(100vw - 64px);padding:10px 12px;border:0;border-radius:7px;background:var(--control-deep);box-shadow:0 12px 28px rgba(0,0,0,.45);color:var(--ink);font:700 12px/1.2 var(--f-body);text-align:center;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,4px);transition:opacity .14s,transform .14s,visibility .14s}
.summer-race-info-tip::after{content:"";position:absolute;left:50%;top:100%;translate:-50% 0;border:6px solid transparent;border-top-color:var(--control-deep)}
.summer-race-info-tip i{color:var(--muted);font-style:normal}
.summer-race-info-tip .lb-beach-ball{width:18px;height:18px;display:inline-block;vertical-align:-4px}
@media(hover:hover){.summer-race-info-wrap:hover .summer-race-info-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}}
.summer-race-info-btn:focus-visible+.summer-race-info-tip,.summer-race-info-wrap.is-on .summer-race-info-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
@keyframes leadLbFloat{from{translate:0 -3px}to{translate:0 7px}}
.lead-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.lead-empty{padding:18px;color:var(--muted);font-weight:800;text-align:center;border-top:1px solid var(--line)}
.lead-load-error,.rewards-load-error{display:grid;justify-items:center;gap:8px;padding:28px 18px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--error) 34%,var(--line));border-radius:8px;text-align:center}
.lead-load-error>svg,.rewards-load-error>svg{width:24px;height:24px;color:var(--error)}
.lead-load-error b,.rewards-load-error b{color:var(--ink);font:700 16px/1.2 var(--f-disp)}
.lead-load-error p,.rewards-load-error p{max-width:42ch;margin:0;color:var(--muted);font:600 12.5px/1.4 var(--f-body)}
.lead-load-error .lb-action,.rewards-load-error .lb-action{margin-top:5px}
.rewards-load-error{grid-column:1/-1}
.chal-load-error,.vault-load-error{display:grid;justify-items:center;gap:8px;padding:28px 18px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--error) 34%,var(--line));border-radius:8px;text-align:center}
.chal-load-error>svg,.vault-load-error>svg{width:24px;height:24px;color:var(--error)}
.chal-load-error b,.vault-load-error b{color:var(--ink);font:700 16px/1.2 var(--f-disp)}
.chal-load-error p,.vault-load-error p{max-width:42ch;margin:0;color:var(--muted);font:600 12.5px/1.4 var(--f-body)}
.chal-load-error .lb-action,.vault-load-error .lb-action{margin-top:5px}
.chal-load-error{grid-column:1/-1}
.lead-rank{font-family:var(--f-disp);font-weight:700;font-size:17px;text-align:center;color:var(--muted)}
.lead-row.top1 .lead-rank{color:var(--gold)}.lead-row.top2 .lead-rank{color:#cdd6ff}.lead-row.top3 .lead-rank{color:#ff9e6a}
.lead-row.me{background:var(--surface-hi)}
.lead-ava{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1.5px solid var(--line-2)}
.lead-rank-icon{object-fit:contain;border:0;background:transparent;border-radius:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.lead-name{font-family:var(--f-disp);font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-name img{width:16px;height:16px}
.lead-wag{font-family:var(--f-disp);font-weight:700;font-size:14px;color:#fff}
.lead-wag small{display:block;color:var(--faint);font-size:10px;text-align:right}
/* =====================================================================
PACK OPENING MODAL
===================================================================== */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;
background:radial-gradient(circle at 50% 40%,rgba(40,10,60,.86),rgba(5,1,10,.96));backdrop-filter:blur(10px)}
.modal.open{display:flex;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes packShake{10%,90%{transform:translateX(-2px) rotate(-1deg)}30%,70%{transform:translateX(4px) rotate(1.5deg)}50%{transform:translateX(-4px) rotate(-1.5deg)}}
@keyframes bob{50%{transform:translateX(-50%) translateY(-5px)}}
@keyframes packBurst{60%{transform:scale(1.15)}100%{transform:scale(.2);opacity:0}}
@keyframes swipe{to{transform:translateX(120%)}}
@keyframes cardReveal{to{opacity:1;transform:none}}
/* sheets / toast / scrim */
/* Shuffle's modal backdrop is a flat near-black wash, not a tinted blur — the
purple-tinted 6px blur made every sheet read as frosted plastic. Same shade
family as our --bg (#080808), just used the way theirs is. */
/* The blur belongs to the OPEN state only. At opacity:0 the scrim is still a
full-viewport backdrop-filter element, and a live backdrop-filter forces
everything painted beneath it into a backdrop root that has to be
re-rasterized whenever anything under it animates. That is why hovering one
26px sidebar icon made the whole page visibly soften for the length of the
animation and snap back after: the page was being re-rendered through a blur
nobody could see. Idle scrim = no filter = nothing to re-render. */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.72);opacity:0;pointer-events:none;transition:.25s}
.scrim.on{opacity:1;pointer-events:auto;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sheet{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.sheet.open{pointer-events:auto}
.sheet-card{width:min(460px,100%);max-height:80vh;overflow-y:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:18px;
background:var(--rail);border:1px solid var(--line);box-shadow:0 -20px 60px rgba(0,0,0,.6);
/* +100px so a SHORT (empty) closed card still clears its own upward shadow off-screen — otherwise
the 0 -20px 60px shadow bleeds up as a dark "notch" at center-bottom */
transform:translateY(calc(100% + 100px));transition:transform .34s cubic-bezier(.2,.9,.3,1);padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.sheet.open .sheet-card{transform:none}
.sheet-head{display:flex;align-items:center;margin-bottom:12px}
/* Title-less variant: the close control alone, right-aligned (owner 2026-08-07
for the Monthly Race sheet -- the hero headline is the title). */
.sheet-head--bare{justify-content:flex-end;margin-bottom:2px}
.sheet-head h3{font-family:var(--f-disp);font-weight:700;font-size:18px;margin:0;flex:1}
.sheet-x{width:36px;height:36px;border-radius:8px;background:var(--surface-hi);color:var(--chrome-icon);font-size:14px;transition:background .15s,color .15s}
/* Close controls used to draw the ✕ character, so their size came from
font-size. As registry glyphs they need a box; the button keeps owning the
colour, the glyph just inherits it. */
.sheet-x,.auth-overlay-x,.inv-x,.inv-chip-x{display:grid;place-items:center}
.sheet-x>svg,.auth-overlay-x>svg,.wm-x>svg,.sp-x>svg,.bb-x>svg,.tx>svg,.inv-x>svg,.inv-chip-x>svg{
width:13px;height:13px;display:block;stroke-width:2}
.sp-x>svg,.bb-x>svg,.tx>svg{width:11px;height:11px}
.sheet-x:hover{background:var(--surface-active);color:#fff}
/* inbox cards — single owner (Shuffle-style: icon tile, 2-line body, side meta) */
.notif-list{display:grid;gap:10px}
/* 76px is a FLOOR, not a height: a long body grows the row instead of being
clipped. Icon top-aligns so it stays put on a tall card. */
.notif{position:relative;display:flex;gap:13px;align-items:flex-start;min-height:76px;padding:14px 16px 14px 18px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);width:100%;text-align:left;cursor:pointer;transition:background .18s,border-color .18s,transform .12s;overflow:hidden}
.notif::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nc,#8b5cff);opacity:.4;transition:opacity .18s}
.notif.unread::before{opacity:.95}
.notif:hover{background:var(--surface-hi);border-color:var(--line-2)}
.notif:active{transform:scale(.99)}
.notif.unread{border-color:color-mix(in srgb,var(--nc,#8b5cff) 30%,var(--line))}
.notif.unread::before{opacity:1}
.notif .ni{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;color:color-mix(in srgb,var(--nc,#fff) 72%,#fff);background:linear-gradient(150deg,color-mix(in srgb,var(--nc,#8b5cff) 22%,var(--surface-3)),var(--surface-3));border:1px solid color-mix(in srgb,var(--nc,#8b5cff) 26%,var(--line))}
.notif .ni svg{width:21px;height:21px;fill:currentColor}
.notif .ni .ni-rank{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.notif-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-self:stretch}
.notif b{font-family:var(--f-disp);font-weight:700;font-size:14px;line-height:1.25;margin-bottom:2px;overflow-wrap:anywhere}
.notif small{color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.notif-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px;align-self:stretch;justify-content:center}
.notif time{color:var(--faint);font-size:11px;font-weight:700;white-space:nowrap}
.profile-big{text-align:center}
.profile-big .pava{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center;margin:0 auto 10px;border:3px solid var(--line-2);background:var(--surface-2)}
.profile-big h2{font-family:var(--f-disp);font-weight:700;font-size:24px;margin:0;display:flex;align-items:center;justify-content:center;gap:8px}
.profile-big h2 img{width:26px;height:26px}
.profile-big .pava-wrap{position:relative;display:inline-block;margin:0 auto 10px;line-height:0}
.profile-big .pava-wrap .pava{margin:0}
.profile-big .pava-rankbadge{position:absolute;left:-3px;bottom:-3px;width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));pointer-events:none}
/* Edit profile as a badge on the avatar instead of its own full-width row.
Sits opposite the rank badge so the two never overlap. */
.profile-big .pava-edit{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;display:grid;place-items:center;
border-radius:50%;border:2px solid var(--surface-2);background:var(--purple-2,#8b5cff);color:#fff;
cursor:pointer;padding:0;line-height:0;transition:transform .12s ease,background .12s ease}
.profile-big .pava-edit:hover{transform:scale(1.08)}
.profile-big .pava-edit-ic{width:15px;height:15px;display:block;fill:none;stroke:#fff;color:#fff}
.profile-big .pava-edit-ic path{stroke:#fff}
.profile-big .sub{color:var(--muted);font-weight:700;font-size:13px;margin-top:2px}
.ep-ava img,.menu-prof .ava,.profile-big .pava,.ref-ava,.lead-ava,.creator-ava,.dm-ava,.lbx-ava,.lb-ava,.vip-top .ava,.cr-ava,.pp-ava{object-fit:cover;object-position:center;background:var(--surface-2);filter:brightness(.92) saturate(.86)}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.pstat{padding:14px 8px;border-radius:8px;background:var(--glass);border:1px solid var(--line)}
.pstat b{font-family:var(--f-disp);font-weight:700;font-size:20px;display:block}
.pstat small{color:var(--faint);font-size:11px;font-weight:700}
/* ---------- inline SVG icon sizing + color ---------- */
.mi,.hi,.bi,.big-ic{color:#fff}
.mi svg,.ti svg,.ni svg,.hi svg,.bi svg,.big-ic svg,.fmeta svg,.menu-prof svg{fill:currentColor}
.mi svg{width:25px;height:25px}
.ti svg{width:25px;height:25px}
.ni svg{width:22px;height:22px}
.hi{display:inline-grid;place-items:center;vertical-align:-5px}
.hi svg{width:21px;height:21px}
.bi{display:inline-grid;place-items:center}
.bi svg{width:18px;height:18px}
.reward .rimg.big-ic svg{width:42px;height:42px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.fmeta{display:inline-flex;align-items:center;gap:5px}
.fmeta svg{width:16px;height:16px}
.pay img{width:58%;height:58%;object-fit:contain}
.fchip svg{width:15px;height:15px;fill:currentColor;vertical-align:-3px;margin-right:3px}
.lead-rank .crown{display:inline-grid;place-items:center}
.lead-rank .crown svg{width:23px;height:23px;fill:var(--gold)}
.lh.prem .lhc{display:inline-grid;place-items:center;vertical-align:-2px}
.lh.prem .lhc svg{width:14px;height:14px;fill:#3a1d04}
/* =====================================================================
responsive — tablet / desktop
===================================================================== */
/* fill better on narrow-desktop / large-phone windows (less wasted side margin) */
@media(min-width:481px){ :root{--maxw:94vw} }
/* small tablet / large phone landscape: widen the column, 4-up grid */
@media(min-width:680px){
:root{--maxw:620px}
.game-grid{grid-template-columns:repeat(4,1fr);gap:11px}
.menu-grid{grid-template-columns:repeat(3,1fr)}
}
/* portrait tablet */
@media(min-width:768px){
:root{--maxw:700px}
.stage{padding:8px 20px 10px}
}
/* large tablet / pre-sidebar laptop: full-width lobby, fluid grid */
@media(min-width:920px){
:root{--maxw:900px}
.stage{padding:10px 24px 12px}
.game-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:14px}
.pkg-grid{grid-template-columns:repeat(4,1fr)}
.wallet-cards{grid-template-columns:1fr 1fr 1fr}
.rake-grid{grid-template-columns:repeat(4,1fr)}
.rake.monthly{grid-column:span 4}
.pm-reveal{min-height:160px}
}
@media(min-width:1280px){
.topbar,.botnav{border-radius:0}
}
/* =====================================================================
V2 PATCH — live-bets table, rakeback, leaderboard chip, clean deposit
===================================================================== */
/* live bets: reference-style table */
.livebets{overflow:hidden;margin-top:12px;overflow-anchor:none;contain:layout paint style}
/* feed toolbar: row count, then the hidden-mode switch, both hard right */
/* z-index: the stagger animation gives both this row and .lbx-scroll a transform,
so both are stacking contexts at z-auto and the later one (the scroller) paints
over the tooltip that hangs below this row. Lift the toolbar above it. */
/* space-between, not flex-end: the feed tabs claim the run of empty toolbar on
the left that used to be dead space, and the rows select + hidden-mode toggle
stay pinned right where they already were. */
.lbx-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);position:relative;z-index:2}
.lbx-tabs{display:flex;gap:4px;padding:6px;border:1px solid var(--control-border);border-radius:8px;background:var(--surface-2);min-width:0;overflow:auto;scrollbar-width:none}
.lbx-tabs::-webkit-scrollbar{height:0;display:none}
.lbx-tab{height:44px;min-height:44px;padding:0 13px;border-radius:6px;color:var(--muted);font-family:var(--f-disp);font-weight:800;font-size:13px;white-space:nowrap}
.lbx-tab:hover{color:var(--ink)}
.lbx-tab.on{background:var(--surface-active);color:#fff}
/* The eye and the rows select are ONE pair pinned right, with the tab strip
taking every remaining pixel. The auto margin used to sit on the select,
which pushed only the select over and stranded the eye against the tabs —
the two controls read as belonging to different groups (owner 2026-08-08:
"the eyeball needs to go right beside the number dropdown"). */
.lbx-tools>.lbx-incog{margin-left:auto}
.lbx-tools>.lbx-incog+.lbx-rows{margin-left:0}
/* ---- feed skeleton ----
Ghost rows on the same 48px grid as real rows, so the panel is already the
right height before data lands and nothing shifts when it does. */
.lbx-row-skel{pointer-events:none}
.lbx-row-skel .lbx-c{gap:8px}
.lbx-skel-ava{width:22px;height:22px;border-radius:50%;flex:0 0 auto}
.lbx-skel-ico{width:18px;height:18px;border-radius:5px;flex:0 0 auto}
.lbx-skel-tx{height:10px;border-radius:5px;width:min(74%,104px)}
.lbx-skel-tx.short{width:min(58%,62px)}
/* Stagger the shimmer down the column so it reads as a list filling in rather
than one block pulsing. */
.lbx-row-skel:nth-child(2n) .skel{animation-delay:.12s}
.lbx-row-skel:nth-child(3n) .skel{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.lbx-row-skel .skel{animation:none}}
/* Whole-row click target. .lbx-game and the username opt out via their own
handlers, so only the empty gaps and the money cells fall through to this. */
.lbx-row[data-betmodal]{cursor:pointer}
.lbx-row[data-betmodal]:hover{background:var(--surface-hi)}
.lbx-row[data-betmodal]:focus-visible{outline:2px solid var(--action-primary);outline-offset:-2px}
.lbx-row[data-betmodal] .lbx-game,.lbx-row[data-betmodal] .lbx-user{cursor:pointer}
/* Four-column tabs. My Bets drops User; Monthly Race swaps the whole set for
Rank/User/Tickets/Prize. Declared per breakpoint because the five-column
template is itself set three times. */
.livebets[data-live-tab="mine"] .lbx-head,.livebets[data-live-tab="mine"] .lbx-row,
.livebets[data-live-tab="race"] .lbx-head,.livebets[data-live-tab="race"] .lbx-row{
grid-template-columns:minmax(0,1.2fr) minmax(0,.82fr) minmax(0,1fr) minmax(0,1.28fr)}
.livebets[data-live-tab="race"] .lbx-head,.livebets[data-live-tab="race"] .lbx-row{
grid-template-columns:minmax(0,.5fr) minmax(0,1.6fr) minmax(0,.9fr) minmax(0,1.1fr)}
.lbx-rank b{color:var(--ink)}
.lbx-tickets{color:var(--muted)}
.lbx-tickets svg,.lbx-tickets img{width:14px;height:14px;flex:0 0 auto}
/* Race header cards */
.lbx-race-head{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;border-bottom:1px solid var(--line)}
.lbx-race-card{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid transparent;box-shadow:none}
.lbx-race-ic{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center}
/* The chest is decoration, not a game glyph — full 44px box and its own gold
duotone fills, rather than the 20px currentColor treatment icons get. */
.lbx-race-ic.is-art svg{width:40px;height:40px}
.lbx-race-ic.is-clock svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;color:var(--muted)}
.lbx-race-ic img{width:44px;height:44px;object-fit:contain}
.lbx-race-tx{display:grid;gap:2px;min-width:0}
.lbx-race-tx small{color:var(--faint);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.lbx-race-tx b{display:flex;align-items:center;gap:6px;font-family:var(--f-disp);font-size:18px;font-weight:800;white-space:nowrap}
.lbx-race-rules{margin-left:auto;flex:0 0 auto}
@media(max-width:679px){
.lbx-race-head{grid-template-columns:1fr}
.lbx-race-rules{margin-left:0}
}
.lbx-rows{display:inline-flex}
.lbx-rows select{height:44px;min-height:44px;padding:0 34px 0 12px;border:0;border-radius:8px;
background-color:var(--control-selected);color:var(--selection-ink);font-family:var(--f-disp);font-size:16px;font-weight:600;cursor:pointer;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.lbx-rows select:hover{background-color:var(--control-selected)}
.lbx-rows select option{min-height:48px;background:var(--menu);color:var(--chrome-text);font-size:16px;font-weight:600}
.lbx-rows select option:checked{background:var(--control-selected);color:var(--selection-ink)}
.lbx-incog{position:relative;width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;border:1px solid var(--line-2);
border-radius:var(--r-lg);background:var(--surface-2);color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.lbx-incog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lbx-incog:hover{color:var(--ink);background:var(--surface-hi)}
.lbx-incog.on{background:var(--surface-active);border-color:var(--line-2);color:#fff}
.lbx-incog.on:hover{background:var(--surface-active)}
/* Tooltip hangs BELOW the button: .livebets is a contain:paint card, so anything
drawn above the toolbar would be clipped off at the card edge. Same reason it
is right-aligned rather than centred — this button is the last thing in a
right-aligned toolbar, so a centred bubble runs off the card and gets cut. */
@media (hover:hover){
.lbx-incog[data-tooltip]::after{
content:attr(data-tooltip);position:absolute;z-index:60;top:calc(100% + 8px);right:0;
width:max-content;padding:7px 10px;border-radius:7px;background:var(--surface-active);color:#f4f6fb;
font:600 12px/1.15 var(--f-body);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.35);
pointer-events:none;visibility:hidden;opacity:0;transform:translateY(-4px);
transition:opacity .12s ease,transform .12s ease}
.lbx-incog[data-tooltip]::before{
content:"";position:absolute;z-index:61;top:calc(100% + 2px);left:50%;width:0;height:0;
border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #343843;
pointer-events:none;visibility:hidden;opacity:0;transform:translate(-50%,-4px);
transition:opacity .12s ease,transform .12s ease}
.lbx-incog[data-tooltip]:hover::after,.lbx-incog[data-tooltip]:focus-visible::after{
visibility:visible;opacity:1;transform:translateY(0)}
.lbx-incog[data-tooltip]:hover::before,.lbx-incog[data-tooltip]:focus-visible::before{
visibility:visible;opacity:1;transform:translate(-50%,0)}
}
.lbx-head,.lbx-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.12fr) minmax(0,.82fr) minmax(0,1fr) minmax(0,1.28fr);align-items:center;gap:5px;padding:0 12px}
.lbx-head{height:40px;border-bottom:1px solid var(--line);color:var(--faint);font-family:var(--f-disp);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
/* Horizontal pan wrapper around the head + rows so both move as one. Vertical
stays clipped — the body is a fixed-height live ticker, not a scroll list. */
.lbx-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lbx-scroll::-webkit-scrollbar{height:0;display:none}
.lbx-body{display:grid;grid-auto-rows:48px;align-content:start;height:192px;overflow:hidden;overflow-anchor:none;contain:layout paint}
.lbx-empty,.chat-empty{padding:16px;color:var(--muted);font-weight:700;line-height:1.35}
.chat-empty{min-height:120px;display:grid;place-items:center;text-align:center}
.lbx-row{height:48px;min-height:48px;border-bottom:0}
.lbx-row:nth-child(even){background:var(--surface-2)}
.lbx-row:last-child{border-bottom:0}
.lbx-c{min-width:0;display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden}
/* Feed avatar: one size for every row, hidden rows included. The drop-shadow
and the bigger private variant are gone — a column of circles that are not
all the same circle is the thing the owner was pointing at. */
.lbx-rank{width:28px;height:28px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.lbx-user .lb-bframe{width:28px;height:28px}
.lbx-user b{overflow:hidden;text-overflow:ellipsis}
.lbx-user.is-private{cursor:default;color:rgba(255,255,255,.9)}
.lbx-gico{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--a) 44%,#160722),#0c0418);border:1px solid var(--line)}
.lbx-gico img{width:22px;height:22px;object-fit:contain}
.lbx-game b{color:var(--muted);font-weight:700;overflow:hidden;text-overflow:ellipsis}
.lbx-bet{color:var(--ink)}
.lbx-bet .chip-i,.lbx-pay .chip-i{width:18px;height:18px;flex:0 0 auto}
.lbx-row.fun .lbx-bet{color:#fff}
.lbx-row.fun .lbx-pay.win{color:var(--green)}
.lbx-mult{color:var(--muted)}
.lbx-mult .trend{width:16px;height:16px;flex:0 0 auto}
.lbx-mult.up{color:#cfe9ff}.lbx-mult.up .trend{color:#62f0b0}
.lbx-mult.down .trend{color:var(--faint)}
.lbx-pay.win{color:var(--green)}.lbx-pay.lose{color:rgba(255,255,255,.86)}
.lbx-row.new{animation:liveBetInsert .34s cubic-bezier(.2,.9,.25,1)}
@keyframes liveBetInsert{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.lbx-row.new{animation:none}}
@media(min-width:680px){.lbx-body{height:240px}}
@media(min-width:920px){.lbx-body{height:288px}}
@media(min-width:920px){
.game-livebets .lbx-head,.game-livebets .lbx-row,
.casino-livebets .lbx-head,.casino-livebets .lbx-row{grid-template-columns:minmax(180px,1.2fr) minmax(180px,1.12fr) minmax(110px,.62fr) minmax(110px,.62fr) minmax(132px,.72fr);gap:14px;padding:0 18px}
.game-livebets .lbx-c,.casino-livebets .lbx-c{overflow:visible}
.game-livebets .lbx-user b,.game-livebets .lbx-game b,
.casino-livebets .lbx-user b,.casino-livebets .lbx-game b{overflow:visible;text-overflow:clip;white-space:nowrap}
.casino-livebets .lbx-body{height:384px}
}
/* Raised from 412px to 679px (owner 2026-08-08: "my bets latest bets highroller
should also do the same swipe to the right ... so u can load the row properly
as it is on desktop"). Between 413 and 679 the five columns still had to fit a
phone-width panel, so they were squeezed rather than clipped — Mult and Payout
were legible only as truncated stubs, and there was nothing to swipe because
nothing overflowed. Same treatment as under 412 now: a real minimum width, and
.lbx-scroll pans the head and the rows together so the columns stay aligned. */
@media(max-width:679px){
/* Five columns will not fit a phone at a readable size, and the panel clipped
the overflow, so Mult and Payout were simply unreachable. Give the head and
the rows a real minimum and let .lbx-scroll pan them together sideways.
Owner report 2026-07-31. */
/* 620, not 558: the old width only fit because the cells were shrunk to 11.5px
with 24px avatars. The row is meant to read the way it does on desktop and
be reached by swiping, not to be miniaturised until it squeezes in. */
.lbx-head,.lbx-body{min-width:620px}
.lbx-head,.lbx-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.74fr) minmax(0,.92fr) minmax(0,1.2fr);gap:6px;padding:0 10px}
/* The table still pans sideways, but a drag that resolves vertically belongs
to the page. pan-x alone blocked that second gesture on mobile Safari. */
.lbx-scroll{touch-action:pan-x pan-y}
}
@media(max-width:679px){
/* no font-size here: a fixed px overrides the container-query clamp and is
what clipped long names on a 92px card (owner 2026-08-07) */
.gcard .gtitle,.game-more-card .gtitle{left:8px;right:8px;bottom:12px;line-height:.92}
.gcard .gtitle.vibe-clean{letter-spacing:.015em}
}
/* rakeback claim / lock CTAs */
.rk-claim{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.rk-claim .bal-chip{width:18px;height:18px;flex:0 0 auto}
.rk-claim b{font:inherit;line-height:1}
.rk-claim.busy{opacity:.6;pointer-events:none}
.rk-lock{width:100%;height:38px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:12px}
.rk-lock .rk-lock-ic{display:inline-grid;place-items:center}
.rk-lock .rk-lock-ic svg{width:14px;height:14px;fill:var(--faint)}
.rk-empty{width:100%;height:38px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:13px}
.rk-empty .bal-chip{width:18px;height:18px;flex:0 0 auto;opacity:.7}
.rk-empty b{font:inherit;line-height:1}
/* leaderboard: chip before wagered */
.lead-wag .lwc{display:inline-flex;align-items:center;gap:5px;justify-content:flex-end}
.lead-wag .lwc .chip-i{width:17px;height:17px}
.lead-prize{display:flex;align-items:center;gap:5px;justify-content:flex-end;color:var(--gold);font-weight:800}
.lead-prize .chip-i{width:17px;height:17px}
.lead-sub{text-align:center;color:var(--muted);font-size:clamp(11.5px,1.35vw,19px);font-weight:600;margin-top:clamp(3px,.6vw,10px)}
.lead-cols{display:flex;justify-content:space-between;padding:11px 16px 2px;color:var(--faint);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
/* ---- clean deposit / wallet (financial, not arcade) ---- */
.dep-head h2{font-family:var(--f-disp);font-weight:700;font-size:24px;margin:4px 0 2px}
.dep-head p{color:var(--muted);font-size:13px;font-weight:600;margin:0 0 16px}
.dep-bal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.dep-bal-it{display:flex;align-items:center;gap:12px;padding:14px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.dep-bal-it .bal-chip{width:34px;height:34px}
.dep-bal-it small{display:block;color:var(--faint);font-size:11px;font-weight:700}
.dep-bal-it b{font-family:var(--f-disp);font-weight:700;font-size:18px;line-height:1.1}
.dep-label{font-family:var(--f-disp);font-weight:600;font-size:12px;color:var(--faint);margin:18px 2px 10px;text-transform:uppercase;letter-spacing:.08em}
.dep-foot{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--faint);font-size:11px;font-weight:600;margin-top:14px}
.dep-foot .bi svg{width:14px;height:14px;fill:var(--faint)}
/* redeem amount card */
.rdm-amount{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:8px;padding:16px}
.rdm-side{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.rdm-side .bal-chip{width:34px;height:34px;flex:0 0 auto}
.rdm-side b{font-family:var(--f-disp);font-weight:700;font-size:22px;display:block;line-height:1.05}
.rdm-side small{color:var(--muted);font-size:11px;font-weight:600}
.rdm-usd{justify-content:flex-end;text-align:right}
.rdm-usd b{color:var(--gold)}
.rdm-eq{color:var(--muted);font-size:22px;font-weight:800;flex:0 0 auto}
@media(min-width:920px){.dep{max-width:720px;margin-inline:auto}}
/* =====================================================================
V2 PATCH 2 — new routed screens (creators, inventory, tx, settings)
===================================================================== */
.cr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cr-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge),var(--sh);text-align:center}
.cr-ava{width:74px;height:74px;border-radius:50%;object-fit:cover;border:2.5px solid var(--line-2)}
.cr-meta b{font-family:var(--f-disp);font-weight:700;font-size:15px;display:block}
.cr-meta small{color:var(--faint);font-size:11px;font-weight:700}
.cr-follow{width:100%;height:36px;border-radius:6px;font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--action-primary-ink);background:var(--grad-cta);box-shadow:var(--sh-glow)}
.cr-follow.done{background:rgba(255,255,255,.07);box-shadow:none;color:var(--muted)}
.inv-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.inv-card{padding:14px 10px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge);text-align:center;position:relative}
.inv-card img{width:100%;height:82px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.inv-card b{display:block;font-family:var(--f-disp);font-weight:600;font-size:12px;margin-top:8px}
.inv-qty{position:absolute;top:8px;right:8px;font-family:var(--f-disp);font-weight:700;font-size:11px;padding:3px 8px;border-radius:99px;background:var(--selection-fill);color:var(--selection-ink)}
.tx-page{padding-bottom:10px}
/* No plate on this bar (owner 2026-08-08): just the word, then Request
Statistics and Filter pushed right. .lb-screenhead--bare unsets the surface. */
.tx-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 2px 10px}
.tx-title .tx-stat-link{margin-left:auto}
.tx-title h2{font-family:var(--f-disp);font-size:32px;line-height:1;margin:0;font-weight:800;letter-spacing:0}
.tx-filter-wrap{position:relative;flex:0 0 auto}
.tx-filter-btn{height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;border:0;border-radius:6px;outline:0;background:var(--surface-2,#202329);box-shadow:none;color:rgba(255,255,255,.82);font-family:var(--f-disp);font-size:12px;font-weight:800;white-space:nowrap}
.tx-filter-btn:hover,.tx-filter-btn[aria-expanded="true"]{background:var(--surface-hi,#2a2e38);color:#fff}
.tx-filter-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tx-filter-btn[aria-expanded="true"] .tx-chev{transform:rotate(180deg)}
.tx-tabs{display:flex;gap:3px;width:100%;padding:5px;border-radius:6px;background:var(--surface-2);border:0;overflow-x:auto;scrollbar-width:none;box-shadow:none;margin-bottom:7px}
.tx-tabs::-webkit-scrollbar{display:none}
.tx-tabs button{flex:1 0 auto;min-width:max-content;height:44px;min-height:44px;padding:0 13px;border-radius:6px;font-family:var(--f-disp);font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap}
.tx-tabs button:hover:not(.on){background:var(--surface-hi);color:var(--ink)}
.tx-tabs button.on{background:var(--selection-fill);color:var(--selection-ink);box-shadow:none}
.tx-stat-link{height:44px;min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:6px;background:none;border:0;font-family:var(--f-disp);font-size:12px;font-weight:800;color:rgba(255,255,255,.82);white-space:nowrap}
@media (hover:hover){.tx-stat-link:hover{background:var(--surface-2,#202329);color:#fff}}
.tx-stat-link svg{width:16px;height:16px;stroke:currentColor}
.tx-action-icon{width:20px;height:20px;flex:0 0 auto}
.tx-chev{width:16px;height:16px;flex:0 0 auto;color:rgba(255,255,255,.68);transition:transform .15s ease}
.tx-filter-panel{position:absolute;z-index:30;top:calc(100% + 6px);right:0;width:164px;display:grid;gap:2px;padding:5px;border:0;border-radius:7px;outline:0;background:#181b23;box-shadow:0 16px 34px rgba(0,0,0,.36)}
.tx-filter-panel button{height:44px;min-height:44px;padding:0 10px;border-radius:6px;background:transparent;border:0;text-align:left;font-family:var(--f-disp);font-size:12px;font-weight:800;color:rgba(255,255,255,.62)}
.tx-filter-panel button:hover{background:rgba(255,255,255,.055);color:#fff}
.tx-filter-panel button.on{background:var(--surface-active);color:#fff}
/* Every surface on this screen is a TONE, never an outline (owner 2026-08-08:
black, grey, black, grey — no stroke round any of it). */
.tx-state{padding:13px 14px;margin-bottom:8px;border-radius:6px;background:var(--surface-2);border:0}
.tx-state b{display:block;font-family:var(--f-disp);font-size:15px}
.tx-state small{display:block;margin-top:3px;color:rgba(255,255,255,.5);font-size:12px;line-height:1.35}
.tx-state{display:grid;gap:10px;justify-items:start}
.tx-state.bad{border-color:rgba(255,93,115,.35)}
.tx-stats{padding:11px;margin-bottom:8px;border-radius:6px;background:var(--surface-2);border:0}
.tx-stats-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.tx-stats-head b{font-family:var(--f-disp);font-size:15px}
.tx-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tx-stats-copy{margin:0 0 12px;color:rgba(255,255,255,.58);font-size:12px;line-height:1.45}
.tx-stats-label{display:block;margin:0 0 6px;font-family:var(--f-disp);font-size:11px;font-weight:800;color:rgba(255,255,255,.75)}
.tx-stats-input{width:100%;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:#fff;font:600 13px var(--f-disp);outline:0}
.tx-stats-input:focus{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 18%,transparent)}
.tx-stats-error{display:block;margin-top:7px;color:#ff8b9b;font-size:11px;line-height:1.3}
.tx-stats-req{display:flex;justify-content:center;padding:13px 0 2px}
.tx-stats-req .btn{min-width:180px}
.tx-stats-sent p{margin:0;color:rgba(255,255,255,.68);font-size:12px;line-height:1.45}
.tx-stats-sent strong{color:#fff}
.tx-stat{min-width:0;padding:11px;border-radius:8px;background:var(--surface-2);border:0}
.tx-stat span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#282d38;color:#fff;margin-bottom:8px}
.tx-stat span svg{width:17px;height:17px;fill:currentColor}
.tx-stat small{display:block;color:var(--faint);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-stat b{font-family:var(--f-disp);font-size:17px;line-height:1.15;display:block;margin-top:2px}
.tx-table{overflow-x:auto;overflow-y:hidden;border-radius:0;border:0;background:transparent;box-shadow:none;scrollbar-width:thin;margin-top:2px}
.tx-body{display:grid;gap:0}
.tx-head,.tx-line{min-width:700px;display:grid;grid-template-columns:minmax(150px,1.1fr) 180px 130px 140px;gap:16px;align-items:center;padding:0 18px}
.tx-table.casino .tx-head,.tx-line.casino{min-width:840px;grid-template-columns:minmax(180px,1.2fr) 180px 130px 120px 160px}
/* deposits carry a Type column now: each deposit is a Fun Chips purchase line
plus the LuckBucks sweepstakes bonus that rides along with it. */
.tx-table.deposits .tx-head,.tx-line.deposits{min-width:880px;grid-template-columns:minmax(190px,1.15fr) minmax(140px,.7fr) minmax(150px,.9fr) minmax(160px,.9fr) minmax(130px,.7fr)}
/* The bonus leg is a real line, not a footnote — white like every other row
(owner 2026-08-08). Same for the currency name and the free-deposit status. */
.tx-line.deposits.leg-bonus .tx-kind b{color:#fff;font-weight:700}
.tx-line.deposits .tx-value{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tx-line.deposits .tx-value .bal-chip{width:18px;height:18px;flex:0 0 auto}
.tx-coin-name{display:inline!important;margin:0!important;color:#fff;font-size:11.5px;font-weight:700}
.tx-status.free{color:#fff;font-weight:700}
.tx-line.deposits .tx-id.muted b{color:var(--faint)}
.tx-line.deposits.tx-focus{background:rgba(139,92,255,.14);box-shadow:inset 3px 0 0 var(--purple);transition:background .24s ease}
.tx-table.withdrawals .tx-head,.tx-line.withdrawals{min-width:760px;grid-template-columns:minmax(180px,1fr) minmax(150px,.75fr) minmax(180px,1fr) minmax(140px,.75fr)}
.tx-head{height:52px;color:#858c9b;font-family:var(--f-disp);font-size:13px;font-weight:800;letter-spacing:0;text-transform:none;border-bottom:1px solid #262b35}
.tx-line{min-height:70px;border-bottom:0}
.tx-line:nth-child(even){background:var(--surface-2);border-radius:8px}
.tx-line:last-child{border-bottom:0}
.tx-line b{font-family:var(--f-disp);font-size:15px;line-height:1.1}
.tx-line small{display:block;color:#858c9b;font-size:11px;line-height:1.2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-line time{color:rgba(255,255,255,.86);font-size:14px;font-weight:800;line-height:1.2}
.tx-kind,.tx-game{min-width:0}
.tx-value,.tx-status,.tx-id,.tx-mult{min-width:0;display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-size:14px;font-weight:800;white-space:nowrap}
.tx-value.stack{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"token amount" ". sub";justify-content:start;align-items:center}
.tx-value.stack .tx-token{grid-area:token}
.tx-value.stack b{grid-area:amount}
.tx-value.stack small{grid-area:sub;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-value.in{color:var(--green)}
.tx-value.out{color:rgba(255,255,255,.86)}
.tx-token .bal-chip{width:22px;height:22px}
.tx-status{justify-content:flex-start;color:var(--green)}
.tx-status.pending{color:var(--gold)}
.tx-status.reviewing{color:var(--gold)}
.tx-status.confirming{color:var(--purple-2)}
.tx-status.failed{color:var(--red)}
.tx-status svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.tx-id svg{width:17px;height:17px;fill:none;flex:0 0 auto}
.tx-id{color:rgba(255,255,255,.82);overflow:hidden;text-overflow:ellipsis}
.tx-id.linked{display:inline-flex;align-items:center;min-height:44px;color:var(--green);text-decoration:none}
.tx-status.linked{text-decoration:none}
.tx-id.linked:hover,.tx-status.linked:hover{text-decoration:underline}
.tx-id.muted{color:#858c9b}
.tx-mult{color:var(--faint)}
.tx-mult .trend{width:20px;height:20px;flex:0 0 auto}
.tx-mult.up{color:var(--green)}
.tx-more{min-width:700px;height:50px;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;border-top:0;font-family:var(--f-disp);font-weight:800;color:rgba(255,255,255,.78);background:transparent}
.tx-table.casino .tx-more{min-width:840px}
.tx-table.deposits .tx-more{min-width:760px}
.tx-table.withdrawals .tx-more{min-width:760px}
@media(max-width:430px){
.tx-title h2{font-size:30px}
.tx-filter-btn{height:44px;min-height:44px;padding:0 12px;font-size:12px}
/* Five tabs cannot share 321px. They used to be forced to (flex:1 1 0,
min-width:0), so "Redemptions" and "Casino Bets" collided into each other
and scrollWidth equalled clientWidth — nothing to scroll, just overlap.
Each tab takes its own width now and the strip swipes, which is what the
.tx-tabs overflow-x:auto was always there for. */
.tx-tabs{padding:4px;gap:2px;border-radius:6px;margin-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.tx-tabs button{flex:0 0 auto;min-width:max-content;height:44px;min-height:44px;padding:0 12px;font-size:12px;border-radius:6px;scroll-snap-align:start}
/* At 375px the three items want ~355px. The label is the part that can go:
the Request Files glyph carries the meaning and the button keeps its
aria-label, so the row fits without the heading having to shrink to
nothing or wrap under it. */
.tx-stat-link{height:44px;min-height:44px;width:44px;min-width:44px;padding:0;justify-content:center}
.tx-stat-link>span{display:none}
.tx-stat-link svg{width:18px;height:18px}
.tx-title{flex-wrap:nowrap;gap:6px}
.tx-title h2{font-size:22px}
.tx-title .lb-shead-tx{min-width:0;overflow:hidden}
.tx-title h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The table scrolls sideways on mobile too, for the tabs whose rows are wider
than the screen. It was overflow-x:hidden, which did not shrink anything —
it just cut the row off (measured: an 880px deposits row inside a 375px
viewport, with Status and ID amputated). */
.tx-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Mobile keeps the REAL table and slides it sideways (owner 2026-08-08:
"you don't need to cram every word on one part"). The stacked two-column
card that used to live here folded five columns into three rows, so every
line was a puzzle and the Type/Status/ID values were the ones that got
dropped. Same columns as desktop, smaller type, and the whole table swipes
— exactly like the tab strip above it. */
.tx-head{display:grid;height:40px;font-size:11.5px;padding:0 12px}
.tx-body{gap:0}
.tx-line,.tx-line.casino,.tx-line.deposits,.tx-line.withdrawals{
min-height:62px;padding:0 12px;border:0;border-radius:6px;background:transparent;column-gap:12px}
.tx-line:nth-child(even){background:var(--surface-2);border-radius:6px}
/* Narrower columns than desktop so the swipe is short: a deposits row goes
880px -> 600px, which is about one and a half screens instead of three. */
.tx-head,.tx-line{min-width:520px;grid-template-columns:minmax(120px,1.1fr) 120px 100px 110px}
.tx-table.casino .tx-head,.tx-line.casino{min-width:600px;grid-template-columns:minmax(120px,1.2fr) 120px 90px 80px 110px}
.tx-table.deposits .tx-head,.tx-line.deposits{min-width:600px;grid-template-columns:minmax(130px,1.1fr) minmax(96px,.7fr) minmax(104px,.9fr) minmax(108px,.9fr) minmax(90px,.7fr)}
.tx-table.withdrawals .tx-head,.tx-line.withdrawals{min-width:540px;grid-template-columns:minmax(126px,1fr) minmax(104px,.75fr) minmax(124px,1fr) minmax(96px,.75fr)}
.tx-line b{font-size:13px}
.tx-line small{display:block;font-size:10.5px}
.tx-line time{font-size:12px;line-height:1.2;color:#8d95a5;white-space:nowrap}
.tx-value,.tx-status,.tx-id,.tx-mult{gap:5px;font-size:12.5px}
.tx-token .bal-chip{width:18px;height:18px}
.tx-mult .trend{width:14px;height:14px}
.tx-id svg{width:13px;height:13px}
.tx-more,.tx-table.casino .tx-more,.tx-table.deposits .tx-more,.tx-table.withdrawals .tx-more{min-width:0;position:sticky;left:0}
}
.set-group{font-family:var(--f-disp);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:18px 4px 9px}
/* One panel per group with hairline-separated rows — not a stack of bordered
rectangles (owner ref 2026-07-25). Toggle sits on the LEFT of each row. */
.set-list{display:grid;gap:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.set-list>*{border-bottom:1px solid var(--line)}
.set-list>*:last-child{border-bottom:0}
.set-language-list{overflow:visible}
.set-language-row{display:grid;grid-template-columns:42px minmax(0,1fr) minmax(190px,240px);align-items:center;gap:12px;padding:14px 16px}
.set-language-icon{width:38px;height:38px;display:grid;place-items:center;color:var(--muted)}
.set-language-icon svg{width:26px;height:26px}
.set-language-copy{min-width:0}
.set-language-copy b{display:block;color:var(--ink);font-family:var(--f-disp);font-size:14px;font-weight:600}
.set-language-copy small{display:block;margin-top:2px;color:var(--faint);font-size:12px;font-weight:600;line-height:1.35}
.set-language-control{position:relative}
.set-language-control::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.set-language-control select{width:100%;height:46px;appearance:none;border:1px solid var(--line);border-radius:9px;background:var(--surface-3);color:var(--ink);padding:0 42px 0 14px;font:700 14px/1 var(--f-disp);outline:0;cursor:pointer}
.set-language-control select:hover,.set-language-control select:focus-visible{border-color:var(--line-2)}
.set-language-control select:focus-visible{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 22%,transparent)}
@media(max-width:580px){
.set-language-row{grid-template-columns:42px minmax(0,1fr)}
.set-language-control{grid-column:1/-1;margin-top:2px}
}
.set-row{display:flex;align-items:center;gap:14px;padding:15px 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-family:var(--f-disp);font-weight:600;font-size:14px;text-align:left;color:var(--ink);cursor:pointer;width:100%}
.set-row:hover{background:var(--surface-hi)}
.set-row:focus-visible,.set-link:focus-visible{position:relative;z-index:1;outline:2px solid var(--focus);outline-offset:-2px}
.set-row-static{cursor:default}
.set-row-static:hover{background:transparent}
.set-referral{display:grid;gap:12px;padding:15px 16px;background:transparent}
.set-referral-head{display:flex;align-items:center;gap:14px}
.set-referral-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-left:52px}
.set-referral-form input{min-width:0;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-3);color:var(--ink);font:600 14px var(--f-disp);outline:0}
.set-referral-form input:focus{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 22%,transparent)}
.set-referral-form button{height:42px;padding:0 17px;border:0;border-radius:var(--r);background:var(--action-primary);color:var(--action-primary-ink);font:800 13px var(--f-disp);cursor:pointer}
.set-referral-form button:hover:not(:disabled){background:var(--action-primary-hover)}
.set-referral-form button:active:not(:disabled){background:var(--action-primary-active)}
.set-referral-form button:disabled{opacity:.55;cursor:wait}
@media(max-width:520px){
.set-referral-form{grid-template-columns:1fr;padding-left:0}
.set-referral-form button{width:100%}
}
.set-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:left;color:var(--ink);cursor:pointer;text-decoration:none}
.set-link:hover{background:var(--surface-hi)}
/* Resting settings glyphs stay neutral. Selection and keyboard focus have
dedicated semantic roles, so every row does not look switched on. */
.set-ic{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--muted)}
.set-ic svg{width:25px;height:25px}
.asset-ic{width:34px;height:34px;object-fit:contain;object-position:center;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.34))}
/* Edit profile sits in a compact action button, so it takes the button's text
size rather than the 34px .asset-ic used by the big drawer rows. */
.ep-ic{width:16px;height:16px;object-fit:contain;display:block}
.asset-ic-xl{transform:scale(1.24)}
.edit-profile-ic,.private-mode-ic{transform:scale(1.2)}
.lb-wallet-img{width:34px;height:34px;object-fit:contain;object-position:center;display:block}
.set-tx{flex:1;min-width:0}.set-tx b{font-family:var(--f-disp);font-weight:600;font-size:14px;display:block}.set-tx small{color:var(--faint);font-size:12px;font-weight:600}
.set-chev{width:18px;height:18px;color:var(--faint);flex:0 0 auto}
.set-note{color:var(--muted);font-size:13.5px;font-weight:500;line-height:1.5;margin:6px 0 16px}
/* Settings uses the same flat Midnight Slate hierarchy as the current packs surfaces:
canvas -> one raised group tone -> deep controls. Dividers and container
strokes made every row look like a second button nested inside the first. */
.settings-page .set-list{overflow:hidden;background:var(--surface-2);border:0;border-radius:var(--r-lg);box-shadow:none}
.settings-page .set-list>*{border:0}
.settings-page .set-row,.settings-page .set-link{border:0;box-shadow:none;transform:none}
.settings-page .set-row:hover,.settings-page .set-link:hover{background:var(--surface-hi)}
.settings-page .set-language-control select,
.settings-page .set-referral-form input{background:var(--control-deep);border:0;box-shadow:none}
.settings-page .settings-logout.lb-action.lb-action--secondary.lb-action--standard{margin-top:16px;background:var(--surface-2);border:0;box-shadow:none;transform:none}
.settings-page .settings-logout:hover:not(:disabled){background:var(--surface-hi)}
.settings-page .settings-logout:active:not(:disabled){background:var(--surface-active);transform:none}
.settings-logout-icon{width:18px;height:18px;display:inline-grid;place-items:center;flex:0 0 auto;color:currentColor}
.settings-logout-icon svg{width:18px;height:18px;display:block}
/* Edit profile keeps the existing sheet geometry, but its frame and close
control are intentionally ink-only. The exit alias prevents the generic
bordered sheet and gray close tile from flashing back during dismissal. */
#profileSheet:is(.lb-sheet-edit-profile,.lb-sheet-edit-profile-exit) .sheet-card{border:0;outline:0}
#profileSheet:is(.lb-sheet-edit-profile,.lb-sheet-edit-profile-exit) .sheet-x{background:transparent;border:0;outline:0;box-shadow:none;color:var(--chrome-icon)}
#profileSheet:is(.lb-sheet-edit-profile,.lb-sheet-edit-profile-exit) .sheet-x:hover,
#profileSheet:is(.lb-sheet-edit-profile,.lb-sheet-edit-profile-exit) .sheet-x:active{background:transparent;color:#fff}
#profileSheet:is(.lb-sheet-edit-profile,.lb-sheet-edit-profile-exit) .sheet-x:focus-visible{background:transparent;color:#fff;outline:2px solid var(--focus);outline-offset:1px}
/* Change password is a quiet account sheet: flat slate backdrop, one raised
modal tone, and no permanent outlines around either the shell or close icon. */
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit){align-items:center;padding:18px}
#profileSheet.lb-sheet-password.open~#scrim{background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .sheet-card{width:min(460px,calc(100% - 36px));max-height:calc(100dvh - 36px);padding:20px;border:0;outline:0;border-radius:var(--r-lg);background:var(--surface-2);box-shadow:0 24px 70px rgba(0,0,0,.42)}
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .password-reset-head{margin-bottom:10px}
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .password-reset-head h3{color:var(--ink)}
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .sheet-x{background:transparent;border:0;outline:0;box-shadow:none;color:var(--chrome-icon)}
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .sheet-x:hover,
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .sheet-x:active{background:transparent;color:#fff}
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .sheet-x:focus-visible{background:transparent;color:#fff;outline:2px solid var(--focus);outline-offset:1px}
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .set-note{color:var(--muted)}
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .lb-action{border:0;box-shadow:none;transform:none}
@media(max-width:767px){
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit){align-items:flex-end;padding:0}
#profileSheet:is(.lb-sheet-password,.lb-sheet-password-exit) .sheet-card{width:100%;max-width:none;max-height:calc(100dvh - env(safe-area-inset-top,0px));border-radius:10px 10px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
.ep-label{display:block;font-family:var(--f-disp);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:14px 2px 8px}
.ep-input{width:100%;height:48px;border-radius:var(--r);background:var(--surface-3);border:1px solid var(--line);color:var(--ink);padding:0 14px;font-family:var(--f-disp);font-weight:700;font-size:16px;outline:0}
.ep-input:focus{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 22%,transparent)}
.ep-avas{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.ep-upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ep-upload-btn svg{width:16px;height:16px;stroke:currentColor}
.ep-upload-note{margin-top:7px;text-align:center;font-size:11.5px;font-weight:600;color:var(--faint)}
.ep-upload-note.err{color:var(--error)}
.ep-upload-note.ok{color:var(--success)}
.pp-report{display:block;width:100%;margin-top:12px;padding:9px 12px;background:none;border:0;
color:var(--faint);font:600 12px var(--f-disp);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pp-report:hover{color:var(--error)}
.ep-ava{aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid var(--line);background:var(--surface-3);padding:0;cursor:pointer}
.ep-ava img{width:100%;height:100%;object-fit:cover}
.ep-ava.on{border-color:var(--control-border);box-shadow:0 0 0 1px var(--line-2)}
/* avatar menu (account shortcuts) */
.am-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.am-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);text-align:left;color:var(--chrome-text);cursor:pointer}
.am-row:hover{background:var(--surface-hi)}
/* Owner 2026-08-07: profile-modal glyphs are white, not purple. The purple
stayed from the old icon set and fought the white row text next to it. */
.am-ic{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--chrome-icon)}
.am-ic svg{width:27px;height:27px}
.am-ic .lb-wallet-img{transform:scale(1.18)}
.promo-code-ic{transform:scale(1.13)}
.am-tx{flex:1;min-width:0}.am-tx b{font-family:var(--f-disp);font-weight:600;font-size:14px;display:block}.am-tx small{color:var(--faint);font-size:12px;font-weight:600}
.am-chev{width:18px;height:18px;color:var(--faint);flex:0 0 auto}
.am-count{display:grid;place-items:center;flex:0 0 auto;width:18px;min-width:18px;height:18px;padding:0;border-radius:50%;
background:var(--notification,#E8B849);color:var(--action-gold-ink);font:800 10px/1 var(--f-disp);font-style:normal;
font-variant-numeric:tabular-nums;letter-spacing:-.03em;text-align:center}
.am-count[hidden]{display:none}
.am-count.is-items{background:var(--notification,#E8B849);color:var(--action-gold-ink)}
/* settings static row + hint */
.set-static{cursor:default}
.set-hint{color:var(--faint);font-family:var(--f-disp);font-weight:700;font-size:12px}
/* responsible play */
.rp-sub{color:var(--muted);font-size:13px;font-weight:500;margin:0 2px 10px;line-height:1.45}
.rp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:6px}
.rp-btn{flex:1}
.rp-status-active b{color:var(--warning)}
.rp-status-error,.rg-status-error,.rg-limits-error{color:var(--error)!important}
#profileSheet:has(.se-info),#profileSheet:has(.se-sheet){align-items:center}
#profileSheet:has(.se-info) .sheet-card,#profileSheet:has(.se-sheet) .sheet-card{width:min(820px,calc(100% - 28px));max-height:88vh;border-radius:6px;background:var(--rail);border-color:var(--line);padding:24px}
#profileSheet:has(.se-info):not(.open) .sheet-card,#profileSheet:has(.se-sheet):not(.open) .sheet-card{transform:translateY(calc(100vh + 100%))}
.se-info-head{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.se-info-head h3{font-size:17px;font-weight:800}
.se-info{display:grid;gap:18px}
.se-info p{margin:0;color:var(--ink);font-size:14px;line-height:1.55;font-weight:500}
.se-step-list{display:grid;gap:22px;margin-top:8px}
.se-step-card{display:grid;grid-template-columns:82px minmax(0,1fr);min-height:104px;border-radius:8px;border:1px solid var(--line);overflow:hidden;background:var(--surface-2)}
.se-step-ic{display:grid;place-items:center;color:var(--warning);background:var(--control-deep);border-right:1px solid var(--line)}
.se-step-ic svg{width:32px;height:32px}
.se-step-copy{display:grid;align-content:center;gap:5px;padding:20px 28px}
.se-step-copy b{font-family:var(--f-disp);font-size:14px;color:var(--ink)}
.se-step-copy small{color:var(--muted);font-size:13.5px;line-height:1.45;font-weight:500}
.se-continue,.se-confirm:not(:disabled){box-shadow:none}
.se-continue{width:min(184px,100%);margin-top:6px}
.se-sheet{display:grid;gap:12px}
.se-lead{margin:0;color:var(--muted);font-size:13px;line-height:1.5;font-weight:600}
.se-grid{display:grid;gap:10px}
.se-field{display:grid;gap:7px}
.se-field span{font-size:12px;color:var(--muted);font-weight:800}
.se-field b{display:flex;align-items:center;min-height:48px;border-radius:8px;background:var(--surface-3);border:1px solid var(--line);padding:0 14px;color:var(--ink);font-size:14px;font-weight:700}
.se-steps{display:grid;gap:6px;border:1px solid var(--line);border-radius:6px;padding:13px;background:var(--control-deep)}
.se-steps b{font-family:var(--f-disp);font-size:13px}
.se-steps p{margin:0 0 6px;color:var(--muted);font-size:12.5px;line-height:1.45}
.se-checks{display:grid;gap:10px;border:1px solid var(--line);border-radius:6px;padding:14px;background:var(--control-deep)}
.se-check-title{font-size:13px;font-weight:800;color:var(--ink)}
.se-check{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;color:var(--ink);font-size:13px;line-height:1.35}
.se-check input{width:16px;height:16px;margin:1px 0 0;accent-color:var(--action-primary)}
#selfExclusionConfirm:disabled{background:var(--action-disabled);color:var(--action-disabled-ink);filter:none;cursor:not-allowed}
/* about */
.about-card{text-align:center;padding:24px 18px}
.about-logo{width:64px;height:64px;min-width:64px;min-height:64px;border-radius:8px;margin:0 auto 10px}
.about-name{font-family:var(--f-disp);font-weight:800;font-size:20px;letter-spacing:.02em;display:inline-flex}
.about-card small{color:var(--faint);font-size:12px;font-weight:600}
.about-card p{color:var(--muted);font-size:13.5px;font-weight:500;line-height:1.5;margin:12px 0 0}
/* danger button */
.btn-danger{box-shadow:none}
/* wallet hub */
.wallet-screen{max-width:480px;margin:0 auto}
.wallet-title{margin:2px 0 14px}
.wallet-title h2{font-family:var(--f-disp);font-weight:800;font-size:28px;line-height:1;margin:0;color:var(--ink)}
.wallet-title p{margin:6px 0 0;color:var(--muted);font-size:13px;font-weight:600}
.wallet-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:6px;background:var(--control-deep);border:1px solid var(--line);margin-bottom:12px}
.wallet-seg button{min-width:0;height:40px;border-radius:6px;font-family:var(--f-disp);font-weight:800;font-size:12.5px;color:var(--chrome-text);white-space:nowrap}
.wallet-seg button.on{background:var(--selection-fill);color:var(--selection-ink);box-shadow:none}
.wallet-seg button{display:flex;align-items:center;justify-content:center;gap:5px}
.wallet-seg .seg-ic{display:inline-grid;place-items:center;flex:0 0 auto}
.wallet-seg .seg-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wallet-seg button.on .seg-ic{color:var(--selection-ink)}
.wbody{display:grid;gap:12px}
.wallet-panel{position:relative;padding:14px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--edge),0 14px 32px -24px rgba(0,0,0,.85)}
.wallet-kicker{display:block;margin-bottom:9px;color:var(--faint);font-family:var(--f-disp);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.wb-lead{color:var(--muted);font-size:13px;font-weight:500;line-height:1.5;margin:0 2px 14px}
.wb-lead b{color:var(--ink)} .wb-lead a{color:var(--pink);font-weight:700}
.wb-fine{color:var(--faint);font-size:12px;font-weight:500;line-height:1.5;margin:3px 2px 0}
.wb-fine b{color:var(--muted)} .wb-fine a{color:var(--pink);font-weight:700}
.buy-panel{background:var(--surface-2);border-color:var(--line)}
.buy-entry{display:grid;gap:7px}
.buy-entry>span:first-child{font-family:var(--f-disp);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.buy-input-wrap{min-height:62px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:8px;background:var(--surface-hi);border:1px solid var(--line);box-shadow:none}
.buy-input-wrap:focus-within{border-color:var(--focus);box-shadow:none}
.buy-input-wrap b{font-family:var(--f-disp);font-size:24px;font-weight:800;color:var(--muted)}
.buy-input-wrap input{width:100%;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-family:var(--f-disp);font-size:32px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.buy-input-wrap input::placeholder{color:var(--placeholder)}
.buy-gets{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.buy-get,.buy-bonus{display:flex;align-items:center;gap:7px;min-width:0;padding:9px 10px;border-radius:6px;background:rgba(255,255,255,.045);border:1px solid var(--line);font-family:var(--f-disp);font-weight:800;line-height:1.15}
.buy-get{font-size:13px;color:var(--ink)}
.buy-get .bal-chip{width:23px;height:23px;flex:0 0 auto}
.buy-bonus{font-size:12px;color:var(--gold)}
.buy-bonus .chip-i{width:18px;height:18px;flex:0 0 auto}
.buy-entry-hint{margin-top:7px;color:var(--faint);font-size:11.5px;font-weight:700}
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.amount-pill{height:46px;border-radius:6px;background:var(--control-deep);border:1px solid var(--line);font-family:var(--f-disp);font-size:15px;font-weight:800;color:var(--chrome-text);transition:border-color .15s,background .15s,color .15s}
.amount-pill.on{background:var(--selection-fill);border-color:var(--control-border);color:var(--selection-ink);box-shadow:none}
.method-panel{display:grid;gap:12px;background:var(--surface-2);border-color:var(--line)}
.method-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.method-head .wallet-kicker{margin:0}
.deposit-groups{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.deposit-method-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px}
.deposit-method-head b{font-family:var(--f-disp);font-size:13px;font-weight:800;color:var(--ink)}
.deposit-method-head small{min-width:0;color:var(--faint);font-size:11px;font-weight:700;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.method-grid,.deposit-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.deposit-method-grid.crypto{grid-template-columns:repeat(3,minmax(0,1fr))}
.deposit-method-grid.payment-apps{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.dep-pay-img{width:38px;height:38px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--pc) 14%,#0f1724);border:1px solid color-mix(in srgb,var(--pc) 36%,transparent)}
.dep-pay-img img{width:25px;height:25px;object-fit:contain;aspect-ratio:1/1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.34))}
.dep-pay-crypto .dep-pay-img{background:var(--surface-hi);border-color:var(--line-2)}
.wallet-continue{margin-top:2px}
.wallet-continue:disabled{opacity:.48;filter:grayscale(.25);cursor:not-allowed}
.method-note{margin:0;color:var(--faint);font-size:11.5px;font-weight:600;line-height:1.45}
.free-hero{display:grid;gap:8px;background:var(--surface-2);border-color:var(--line)}
.free-hero h3{font-family:var(--f-disp);font-size:22px;line-height:1.08;margin:0;font-weight:800;color:var(--ink)}
.free-hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.free-balance{margin-top:3px;display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:8px 10px;border-radius:6px;background:var(--surface-hi);border:1px solid var(--line-2)}
.free-balance .bal-chip{width:24px;height:24px;flex:0 0 auto}
.free-balance b{font-family:var(--f-disp);font-size:17px;font-weight:800}
.free-balance small{color:var(--faint);font-size:11px;font-weight:800}
.pf-grid{display:grid;grid-template-columns:1fr;gap:9px}
@media(min-width:560px){.pf-grid{grid-template-columns:1fr 1fr}}
.pf-tile{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;padding:13px;border-radius:6px;background:var(--surface-hi);border:0;transition:background .15s,transform .1s}
.pf-tile:hover,.pf-tile:focus-visible{background:var(--surface-active);outline:none}
.pf-tile:active{transform:scale(.99)}
.pf-ic{flex:0 0 auto;width:40px;height:40px;border-radius:6px;display:grid;place-items:center;background:rgba(255,200,61,.1);color:var(--gold)}
.pf-ic .uic,.pf-ic svg{width:23px;height:23px}
.pf-ic img{width:24px;height:24px;object-fit:contain;display:block}
.pf-ic svg{fill:currentColor;stroke:none}
.pf-ic-faucet svg,.pf-ic-path svg{fill:none;stroke:currentColor;stroke-width:1.9}
.pf-ic-discord{color:#8f9bf5;background:rgba(88,101,242,.12)}
.pf-ic-telegram{background:rgba(34,158,217,.12);color:#229ed9}
.pf-tx{flex:1;min-width:0}
.pf-tx b{display:block;font-family:var(--f-disp);font-weight:800;font-size:14px;color:var(--ink)}
.pf-tx small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px;line-height:1.35}
.pf-cta{flex:0 0 auto;font-size:11.5px;font-weight:800;color:#191205;background:var(--gold);border-radius:var(--r-pill);padding:6px 11px}
.pf-arrow{flex:0 0 auto;display:grid;place-items:center;width:18px;height:18px;color:var(--faint)}
.pf-arrow-icon{display:block;width:15px;height:15px}
.lucky-free-hero{gap:16px;background:
linear-gradient(145deg,rgba(255,200,61,.08),transparent 34%),
linear-gradient(180deg,var(--surface-hi),var(--surface-2) 72%);border-color:rgba(255,255,255,.09)}
.free-hero-main{display:grid;gap:0}
.lucky-free-hero h3{max-width:760px;font-size:clamp(23px,3.3vw,34px);line-height:1.12;letter-spacing:0}
.free-lucky-balance{background:rgba(255,200,61,.09);border-color:rgba(255,200,61,.22)}
.free-lucky-balance .chip-i{width:24px;height:24px;flex:0 0 auto}
.faucet-action{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:5px 12px;align-items:center;padding:12px;border-radius:8px;background:var(--surface-hi);border:0}
.faucet-ic{grid-row:1/3;width:48px;height:48px;border-radius:6px;display:grid;place-items:center;background:rgba(255,200,61,.12);color:var(--gold)}
.faucet-ic svg{width:28px;height:28px}
.faucet-copy{grid-column:2;grid-row:1/3;align-self:center;min-width:0;display:grid;gap:1px}
.faucet-copy b{font-family:var(--f-disp);font-size:15px;font-weight:800;color:#fff}
.faucet-copy small,.faucet-next{font-size:11px;font-weight:800;color:var(--faint)}
.faucet-btn{grid-column:3;grid-row:1/3;padding:0 16px;white-space:nowrap}
.faucet-btn.cooling,.faucet-btn:disabled{cursor:not-allowed}
.faucet-next{grid-column:2}
.pf-tile{text-decoration:none;color:inherit}
.pf-primary{border-color:rgba(255,200,61,.34);background:linear-gradient(135deg,rgba(255,200,61,.13),var(--surface-2) 58%)}
.pf-primary .pf-cta{background:#fff;color:#170f02}
.redeem-panel{background:var(--surface-2)}
.redeem-panel.locked{border-color:rgba(246,183,86,.22)}
.rdm-ac-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--f-disp);font-weight:800;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.rdm-avail{color:var(--muted);white-space:nowrap}
.rdm-ac-main{display:flex;align-items:baseline;gap:9px;margin:10px 0 4px}
.rdm-ac-main .bal-chip{width:27px;height:27px;align-self:center;flex:0 0 auto}
.rdm-ac-main b{font-family:var(--f-disp);font-weight:800;font-size:35px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.rdm-ac-usd{margin-left:auto;font-size:14px;font-weight:800;color:var(--success);white-space:nowrap}
.redeem-entry-card{background:var(--surface-2)}
.redeem-entry{display:grid;gap:10px}
.redeem-entry-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.07em}
.redeem-entry-top b{font-size:11px;color:var(--faint);font-weight:800}
.redeem-entry-top small{font-size:11px;color:var(--muted);font-weight:800;white-space:nowrap}
.redeem-input-wrap{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:8px 8px 8px 13px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.redeem-input-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,200,61,.12)}
.redeem-input-wrap .bal-chip{width:30px;height:30px}
.redeem-input-wrap input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#fff;font-family:var(--f-disp);font-weight:800;font-size:29px;line-height:1;font-variant-numeric:tabular-nums}
.redeem-input-wrap input::placeholder{color:rgba(255,255,255,.28)}
.redeem-input-wrap input:disabled{opacity:.5}
.redeem-max-btn{min-height:42px;border-radius:999px;padding:0 14px;background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.28);color:var(--gold);font-family:var(--f-disp);font-weight:800;font-size:12px;cursor:pointer}
.redeem-max-btn:disabled{opacity:.45;cursor:not-allowed}
.redeem-empty{display:grid;gap:2px;margin-top:10px;padding:10px 11px;border-radius:6px;background:rgba(246,183,86,.08);border:1px solid rgba(246,183,86,.2)}
.redeem-empty b{font-family:var(--f-disp);font-size:13px;font-weight:800;color:var(--warning)}
.redeem-empty span{font-size:12px;font-weight:600;line-height:1.35;color:var(--muted)}
.redeem-btn:disabled{opacity:.48;filter:grayscale(.25);cursor:not-allowed}
.spd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.spd-btn{position:relative;min-width:0;min-height:68px;display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:center;padding:9px 6px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);text-align:center;cursor:pointer}
.spd-turbo{padding-right:40px}
.spd-btn.on{border-color:var(--line-2);background:var(--surface-active);box-shadow:none}
.spd-btn b{font-family:var(--f-disp);font-weight:800;font-size:13px}
.spd-btn small{font-size:10px;font-weight:800;color:var(--muted)}
.spd-btn .spd-eta{color:var(--faint);font-weight:700}
.spd-asset{width:20px;height:20px;object-fit:contain;display:block;margin-bottom:1px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.42)) drop-shadow(0 0 8px rgba(255,255,255,.12))}
.spd-turbo .spd-asset{position:absolute;right:14px;top:50%;width:23px;height:23px;margin:0;transform:translateY(-50%)}
.rdm-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rdm-method{display:flex;align-items:center;gap:10px;padding:11px;border-radius:6px;text-align:left;background:var(--surface-2);border:1px solid var(--line);transition:border-color .15s,background .15s,transform .1s}
.rdm-method:active{transform:scale(.99)}
.rdm-method.sel{border-color:var(--line-2);background:var(--surface-active);box-shadow:none}
.rdm-m-ic{flex:0 0 auto;width:38px;height:38px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.05)}
.rdm-m-ic img{width:27px;height:27px;object-fit:contain;aspect-ratio:1/1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.34))}
.rdm-m-tx{min-width:0}
.rdm-m-tx b{display:block;font-family:var(--f-disp);font-weight:800;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdm-m-tx small{display:block;font-size:10.5px;font-weight:800;color:var(--faint);letter-spacing:.03em}
.rdm-summary{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:12px 13px;display:grid;gap:7px}
.rdm-summary:empty{display:none}
.rdm-sum-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--muted)}
.rdm-sum-row b{font-family:var(--f-disp);font-weight:800;color:var(--ink);text-align:right}
.rdm-sum-row.total{border-top:1px solid var(--line);padding-top:8px;margin-top:1px}
.rdm-sum-row.total b{color:var(--success)}
@media(max-width:390px){
.wallet-seg button{font-size:11px}
.faucet-action{grid-template-columns:48px minmax(0,1fr)}
.faucet-btn{grid-column:2;grid-row:3;justify-self:start;margin-top:2px}
.faucet-next{grid-column:2}
.native-marks{flex-direction:column;gap:5px}.native-mark{height:28px;min-width:52px;font-size:12px}
.deposit-groups,.method-grid,.crypto-grid,.deposit-method-grid,.rdm-method-grid{grid-template-columns:1fr}
.deposit-method-head{display:grid;gap:3px}
.deposit-method-head small{text-align:left}
}
/* ---- auth: clean loading state while Telegram sign-in resolves ---- */
.auth-loading{display:grid;place-items:center;gap:16px;color:var(--ink);text-align:center}
.auth-loading p{margin:0;font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--muted)}
.auth-spin{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--action-primary);animation:authSpin .8s linear infinite}
@keyframes authSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auth-spin{animation-duration:1.6s}}
/* review sheet */
.rv-list{display:flex;flex-direction:column;gap:9px;margin:6px 0 14px}
.rv-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;color:var(--muted)}
.rv-row b{font-family:var(--f-disp);color:var(--ink)}
.rv-row.total{border-top:1px solid var(--line-2);padding-top:11px;margin-top:2px;font-size:15px}
.rv-row.total b{color:var(--success)}
.rv-note{color:var(--faint);font-size:12px;font-weight:500;line-height:1.45;margin:0 0 14px}
.crypto-deposit-card{display:grid;gap:12px}
.crypto-deposit-loading{min-height:310px;align-content:start}
.crypto-deposit-loading .crypto-deposit-token{opacity:.88}
.crypto-deposit-token{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.crypto-deposit-token .dep-pay-img{width:46px;height:46px;border-radius:8px}
.crypto-deposit-token .dep-pay-img img{width:31px;height:31px}
.crypto-deposit-token small,.crypto-address-box small,.crypto-deposit-meta small{display:block;color:var(--faint);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.crypto-deposit-token b{display:block;margin-top:2px;font-family:var(--f-disp);font-size:20px;font-weight:800;color:var(--ink)}
.crypto-deposit-qr{display:grid;place-items:center;gap:8px;padding:14px;border-radius:8px;background:linear-gradient(180deg,#ffffff,#f0eaff);border:1px solid var(--line);box-shadow:0 14px 32px rgba(0,0,0,.22)}
.crypto-deposit-qr svg{width:184px;height:184px;display:block;border-radius:6px;background:#fff}
.crypto-qr-missing{width:184px;height:184px;border-radius:6px;background:#fff}
.crypto-deposit-qr small{color:#182235;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.crypto-deposit-qr em{font-size:12px;font-weight:800;color:#7b1f2e;font-style:normal}
.crypto-deposit-qr.qr-unavailable .crypto-qr-missing{display:none}
.crypto-address-box{display:grid;gap:9px;padding:12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.crypto-address-box.warn{border-color:rgba(255,200,61,.36);background:rgba(255,200,61,.06)}
.crypto-address-box code{display:block;max-width:100%;overflow-wrap:anywhere;word-break:break-word;padding:10px;border-radius:6px;background:#0b1018;border:1px solid var(--line);color:#eef6ff;font:800 12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.crypto-address-box .btn{justify-self:start}
.crypto-deposit-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.crypto-deposit-meta span{min-width:0;padding:10px;border-radius:6px;background:var(--surface-hi);border:1px solid var(--line)}
.crypto-deposit-meta b{display:block;font-family:var(--f-disp);font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crypto-status{margin:0;padding:11px 12px;border-radius:6px;background:var(--surface-hi);border:1px solid var(--line-2);color:var(--ink);font-size:12.5px;font-weight:800;line-height:1.35}
.crypto-deposit-skel-qr{height:218px;border-radius:8px;background-color:var(--surface-2);border:1px solid var(--line)}
.crypto-address-skel{gap:10px}
.crypto-skel-line{display:block;height:16px;border-radius:8px;width:100%}
.crypto-skel-line.short{width:34%;height:12px}
.crypto-skel-button{display:block;width:138px;height:43px;border-radius:6px}
@media(max-width:430px){.crypto-deposit-meta{grid-template-columns:1fr}.crypto-address-box .btn{width:100%}}
/* skeleton loaders */
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-hi) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:skelShimmer 1.4s ease infinite;border-radius:8px;display:block}
@keyframes skelShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.skel-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.skel-row{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.skel-ava{width:38px;height:38px;border-radius:50%;flex:0 0 auto}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:7px}
.skel-line{height:11px;width:80%} .skel-line.short{width:45%}
.reel-skel{position:relative;height:calc(100% - 8px);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.skel-reel{position:absolute;inset:0;border-radius:0}
.reel-skel-foot{position:absolute;left:14px;right:60px;bottom:18px;display:flex;gap:11px;align-items:center;z-index:1}
.reel-skel-foot .skel-ava{width:42px;height:42px;border-radius:50%}
/* error card + fatal overlay */
.err-card{max-width:360px;margin:40px auto;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px}
.err-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:rgba(255,93,115,.14);color:var(--error);font-family:var(--f-disp);font-weight:800;font-size:26px}
.err-ic svg{width:24px;height:24px;fill:var(--error)}
.err-card h2{font-family:var(--f-disp);font-weight:700;font-size:19px;margin:0 0 8px}
.err-card p{color:var(--muted);font-size:13.5px;font-weight:500;line-height:1.5;margin:0 0 14px}
.err-code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;color:var(--gold);background:var(--surface-3);border:1px solid var(--line);border-radius:8px;padding:7px 12px;margin-bottom:16px;letter-spacing:.5px}
.err-actions{display:flex;gap:10px}.err-actions .btn{flex:1}
#lbErrOverlay{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(7,9,14,.92);backdrop-filter:blur(6px)}
#lbErrOverlay.show{display:flex}
#lbErrOverlay .err-card{margin:0}
/* Binary state contract: neutral means OFF; pink means ON. Green is reserved
for successful/secured outcomes, not a generic enabled preference. */
.toggle{width:46px;height:27px;border-radius:99px;background:var(--surface-hi);position:relative;flex:0 0 auto;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--ink);transition:transform .2s}
.toggle.on{background:var(--action-primary)}
.toggle.on::after{transform:translateX(19px)}
@media(min-width:680px){.cr-grid{grid-template-columns:repeat(3,1fr)}.inv-grid{grid-template-columns:repeat(4,1fr)}}
/* =====================================================================
V2 PATCH 3 — live-bets, deposit, profile
===================================================================== */
/* live bets: avatars, white icons, neutral panel */
.livebets{background:var(--surface) !important;border:1px solid var(--line) !important}
.lbx-ava{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:0;background:none}
.lbx-user{cursor:pointer}
.lbx-gico{width:22px;height:22px;object-fit:contain;flex:0 0 auto;filter:brightness(0) invert(1);background:none !important;border:0 !important;padding:0 !important}
@media(max-width:412px){.lbx-ava{width:26px;height:26px}.lbx-gico{width:23px;height:23px}}
/* profile actions */
.prof-badge{font-size:11px;font-weight:800;color:var(--green);background:rgba(55,245,160,.12);padding:2px 8px;border-radius:99px}
.prof-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prof-act{display:flex;align-items:center;gap:11px;padding:15px 14px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-family:var(--f-disp);font-weight:600;font-size:14px;color:#fff;text-align:left}
.prof-act .pa-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:6px;background:rgba(255,77,184,.12);flex:0 0 auto}
.prof-act .pa-ic svg{width:19px;height:19px;fill:var(--pink-2)}
/* coming soon */
.soon-cover{width:150px;height:200px;border-radius:8px;margin:0 auto 16px;background-size:cover;background-position:center;
border:1.5px solid color-mix(in srgb,var(--accent,#F45DC4) 60%,transparent)}
/* premium 3D utility icons (More tab / menu / profile / headers) */
.uic{width:24px;height:24px;object-fit:contain;object-position:center;vertical-align:middle;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.mi .uic{width:28px;height:28px}
.pa-ic .uic{width:23px;height:23px}
.hi .uic{width:23px;height:23px;vertical-align:-5px}
.set-ic .uic,.am-ic .uic{width:27px;height:27px}
/* Registry glyphs may still opt into the brand accent, but navigation and live
game markers use the same monochrome currentColor treatment as their peers. */
.lbic-pink{stroke:var(--pink,#F45DC4)}
.botnav button[data-nav="packs"] .lbic-pink,
.botnav button[data-nav="battles"] .lbic-pink,
#sidebar .sb-seg-btn[data-nav="packs"] .lbic-pink,
#sidebar .sb-seg-btn[data-nav="battles"] .lbic-pink,
svg.lbx-gico .lbic-pink{stroke:currentColor}
.lbx-game[data-game]{cursor:pointer}
.lbx-game[data-game]:hover b{color:#fff}
/* ===================== SECTION A — Economy / Rank / VIP ===================== */
.bp-xp{padding:11px 13px 13px;border-top:1px solid var(--line-2);margin-top:4px}
.bp-xp-top{display:flex;align-items:center;gap:7px;font-family:var(--f-disp);font-weight:600;font-size:13px}
.bp-xp-top img{width:18px;height:18px;object-fit:contain}
.bp-xp-top span{margin-left:auto;color:var(--gold);font-weight:800}
.bp-xp small{display:block;margin-top:6px;color:var(--muted);font-size:11px;font-weight:600}
.bp-xp .bar{margin-top:7px}
.vip-link{justify-content:center;display:flex;align-items:center;gap:6px}
.vip-link .bi svg{width:15px;height:15px;vertical-align:middle}
.vipb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 4px;border-radius:8px;
border:0;outline:0;background:var(--surface-2)}
.vipb{width:100%;border-collapse:collapse;font-size:12px;min-width:790px}
.vipb th,.vipb td{padding:9px 7px;text-align:center;border-bottom:1px solid var(--line);min-width:64px}
.vipb thead th{position:sticky;top:0;background:var(--surface-hi);font-family:var(--f-disp);font-weight:600}
.vipb th span{display:block;min-height:26px;font-size:10.5px;line-height:1.2;margin-top:3px;letter-spacing:.02em;overflow-wrap:anywhere}
.vipb-rk{width:28px;height:28px;object-fit:contain;object-position:center;display:block;margin:0 auto;padding:2px;box-sizing:border-box;overflow:visible}
.vipb-name{min-width:184px!important;text-align:left!important;white-space:nowrap;padding-left:12px!important}
.vipb th.vipb-name{color:var(--ink);font-weight:700}
.vipb td.vipb-name{color:var(--muted);font-weight:600;font-size:11.5px}
.vipb .cur{background:color-mix(in srgb,var(--gold) 10%,var(--surface-2))}
.vipb thead th.cur{background:color-mix(in srgb,var(--gold) 16%,var(--surface-hi));box-shadow:inset 0 -2px 0 var(--gold)}
.vipb-yes{color:var(--gold)}
.vipb-yes svg{width:15px;height:15px;vertical-align:middle}
.vipb-no{color:var(--locked)}
.vipb tbody tr:last-child td{border-bottom:none}
.rankup-card{margin-top:14px;padding:14px}
.ru-head{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:600;margin-bottom:11px}
.ru-head .hi svg{width:18px;height:18px}
.ru-body{display:flex;gap:10px;flex-wrap:wrap}
.ru-chips,.ru-pack{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);
border:1px solid var(--line-2);border-radius:6px;padding:9px 12px;font-weight:700;font-size:13px;text-transform:capitalize}
.ru-pack img{width:26px;height:26px;object-fit:contain}
/* VIP levels accordion (per-tier dropdown of sublevels) */
.vip-levels{display:flex;flex-direction:column;gap:10px}
.vlt{background:var(--surface-2);border:0;outline:0;border-radius:8px;overflow:hidden}
.vlt-head{width:100%;display:flex;align-items:center;gap:11px;padding:14px;background:var(--surface-2);border:none;
color:var(--ink);font-family:var(--f-disp);font-weight:600;font-size:16px;cursor:pointer;text-align:left}
.vlt-head:hover{background:var(--surface-hi)}
.vlt-rk{width:34px;height:34px;object-fit:contain;object-position:center;flex:0 0 auto;display:block;padding:2px;box-sizing:border-box;overflow:visible}
.vlt-badge{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);
background:color-mix(in srgb,var(--gold) 16%,var(--surface-2));border-radius:99px;padding:3px 8px}
.lb-lock-ic{width:18px;height:18px;object-fit:contain;display:inline-block;vertical-align:-4px}
.vlt-state .lb-lock-ic{width:20px;height:20px;vertical-align:0}
.vlt-done .lb-lock-ic{width:16px;height:16px;vertical-align:-3px;margin-right:3px}
.vlt-state{margin-left:auto;display:grid;place-items:center;color:var(--locked)}
.vlt-state.on{color:var(--success)}
.vlt-state svg{width:18px;height:18px}
.vlt-chev{width:20px;height:20px;flex:0 0 auto;color:var(--muted);transition:transform .25s}
.vlt.open .vlt-chev{transform:rotate(180deg)}
.vlt-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.vlt.open .vlt-body{max-height:480px}
.vlt-row{display:grid;grid-template-columns:1.25fr .75fr 1fr;align-items:center;gap:8px;
min-height:50px;padding:12px 14px;border-top:1px solid var(--line);overflow:visible}
.vlt-row.cur{background:color-mix(in srgb,var(--gold) 10%,var(--surface-2))}
.vlt-lvl{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;line-height:1.2;overflow:visible;min-width:0}
.vlt-lvl img{width:28px;height:28px;object-fit:contain;object-position:center;display:block;padding:2px;box-sizing:border-box;flex:0 0 auto;overflow:visible}
.vlt-xp{font-weight:700;font-size:13px;color:var(--muted)}
.vlt-done{display:flex;align-items:center;gap:5px;font-weight:700;font-size:12px;justify-content:flex-end}
.vlt-done svg{width:15px;height:15px}
.vlt-done.yes{color:var(--success)}
.vlt-done.no{color:var(--locked)}
/* ===================== SECTION F — Promo redeem box ===================== */
.promo-box{padding:14px;margin-bottom:14px}
.promo-head{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:600;margin-bottom:10px}
.promo-head .bi svg{width:17px;height:17px;vertical-align:middle}
.promo-row{display:flex;gap:8px}
.promo-row input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:6px;
padding:11px 13px;color:#fff;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.promo-row input::placeholder{color:rgba(255,255,255,.4);text-transform:none;letter-spacing:normal;font-weight:600}
.promo-row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,211,78,.18)}
.promo-row .btn{white-space:nowrap}
.promo-msg{min-height:16px;margin-top:9px;font-size:12.5px;font-weight:700}
.promo-msg.ok{color:#36d399}
.promo-msg.err{color:#ff6b8b}
/* ===================== SECTION B — Tasks ===================== */
/* ===================== Feed (creator video posts) ===================== */
.feed-seg{margin-bottom:14px}
.vbadge{font-size:9.5px;font-weight:800;color:var(--chrome-icon);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:2px 7px;display:inline-flex;align-items:center;gap:3px}
.vbadge svg{width:11px;height:11px}
.vpa{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;padding:5px 8px;border-radius:6px}
.vpa svg{width:19px;height:19px}
.vpa.liked{color:var(--pink)}.vpa.liked svg{fill:var(--pink)}
.feed-state{padding:22px;text-align:center}
.feed-state b{display:block;font-family:var(--f-disp);font-size:17px;margin-bottom:6px}
.feed-state small{display:block;color:var(--muted);font-size:13px;font-weight:600;line-height:1.45}
.cr-offers{display:flex;flex-wrap:wrap;gap:8px}
.cr-offer{background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:99px;padding:7px 13px;font-weight:700;font-size:12.5px;text-transform:capitalize}
/* ===================== Feed reels (TikTok-style vertical scroll) ===================== */
.feed-screen{position:fixed;z-index:40;left:0;right:0;max-width:var(--maxw);margin-inline:auto;display:flex;flex-direction:column;
top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));
bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px));
background:linear-gradient(180deg,rgba(8,2,15,.96),rgba(14,4,25,.82) 42%,rgba(4,8,19,.9))}
.feed-top{display:flex;align-items:center;gap:8px;padding:7px 10px 8px;flex:0 0 auto;
background:linear-gradient(180deg,rgba(8,2,15,.92),rgba(8,2,15,.38));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.feed-top .feed-seg{flex:1;margin:0}
.feed-top .seg{padding:4px;border-radius:6px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08)}
.feed-top .seg button{height:35px;border-radius:6px;font-size:12.5px;font-weight:800}
.reels{flex:1;min-height:0;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;padding:0 10px 6px;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;height:calc(100% - 8px);scroll-snap-align:start;scroll-snap-stop:always;border-radius:8px;overflow:hidden;margin-bottom:8px;
background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--sh-lg)}
.reel::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);pointer-events:none}
.reel-bg{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(78% 56% at 50% 38%,color-mix(in srgb,var(--accent) 42%,transparent),transparent)}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050208;filter:saturate(1.04) contrast(1.02)}
.reel-play{width:76px;height:76px;opacity:.92}
.reel-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,2,10,.9) 0%,rgba(4,2,10,.62) 24%,transparent 56%),linear-gradient(to bottom,rgba(4,2,10,.34),transparent 20%);pointer-events:none}
.reel-status{display:grid;place-items:center;background:var(--surface)}
.feed-state{text-align:center;padding:26px 20px;max-width:80%}
.feed-state b{font-family:var(--f-disp);font-size:16px;display:block;margin-bottom:6px}
.feed-state small{color:var(--muted);font-weight:600}
.reel-reveal{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;gap:2px;
background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:8px;padding:20px 26px;color:#fff;font-weight:800;font-size:15px;cursor:pointer;z-index:3}
.reel-reveal .rv-ic svg{width:26px;height:26px;fill:#fff;margin-bottom:5px}
.reel-reveal small{color:rgba(255,255,255,.72);font-weight:600;font-size:12px}
.reel-rail{position:absolute;right:10px;bottom:116px;display:flex;flex-direction:column;gap:14px;z-index:2}
.rr-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:#fff;font-weight:800;font-size:11px;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.rr-ic{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.42);border:1px solid var(--line);display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rr-ic svg{width:25px;height:25px;fill:#fff}
.rr-btn.liked .rr-ic svg{fill:var(--pink)}
.rr-ava-wrap{padding:0;overflow:hidden;border:2px solid #fff;background:none}
.rr-ava{width:100%;height:100%;object-fit:cover}
.reel-info{position:absolute;left:13px;right:70px;bottom:15px;z-index:2}
.reel-who{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.reel-who img{width:38px;height:38px;border-radius:6px;object-fit:cover;border:2px solid #fff}
.reel-who b{font-family:var(--f-disp);font-weight:700;font-size:15px}
.reel-who .vbadge{padding:3px;border-radius:50%}.reel-who .vbadge svg{width:12px;height:12px}
.reel-follow{margin-left:2px;background:var(--action-primary);color:var(--action-primary-ink);border:none;border-radius:var(--r-pill);padding:6px 14px;font-weight:800;font-size:11.5px;cursor:pointer}
.reel-follow:hover:not(.on){background:var(--action-primary-hover)}
.reel-follow.on{background:var(--selection-fill);color:var(--selection-ink)}
.reel-cap{font-weight:700;font-size:13.5px;line-height:1.35;margin-bottom:8px;text-shadow:0 1px 5px rgba(0,0,0,.72);max-height:4.1em;overflow:hidden}
.reel-dur{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.44);border:1px solid var(--line);border-radius:6px;padding:6px 9px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.reel-dur svg{width:13px;height:13px;fill:currentColor}
@media(max-width:390px){
.feed-top{padding-left:8px;padding-right:8px}
.feed-top .seg button{font-size:11.5px}
.reels{padding-left:8px;padding-right:8px}
.reel-rail{right:8px}
.reel-info{left:11px;right:64px}
}
/* ===================== SECTION J — Accessibility ===================== */
/* visible keyboard focus on every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.sheet-card:focus{outline:0}
.botnav button:focus-visible{outline-offset:-3px}
/* losing payouts/mults stay white (owner preference), bright enough for contrast */
.lbx-pay.lose,.tx-amt.lose{color:rgba(255,255,255,.86)}
.lbx-mult.down .trend{color:#8A94A6}
/* screen-reader-only utility */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* respect the user's reduced-motion preference */
@media (prefers-reduced-motion: reduce){
/* Packs and Battles are result visualizations: their reels, waiting-seat arc,
and winner picker communicate round progress. The class is the normal
lifecycle signal. data-screen/data-route are independent router-owned
fallbacks if that class is ever lost after mount;
without them a reduced-motion machine skips the reel, spinner and confetti. */
body:not(.lbp-motion-required):not([data-screen="packs"]):not([data-route="packs"]):not([data-route="battles"]) *,
body:not(.lbp-motion-required):not([data-screen="packs"]):not([data-route="packs"]):not([data-route="battles"]) *::before,
body:not(.lbp-motion-required):not([data-screen="packs"]):not([data-route="packs"]):not([data-route="battles"]) *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
body:not(.lbp-motion-required):not([data-screen="packs"]):not([data-route="packs"]):not([data-route="battles"]) .hero-coins,
body:not(.lbp-motion-required):not([data-screen="packs"]):not([data-route="packs"]):not([data-route="battles"]) #splash .splash-bar i{animation:none!important}
}
/* ============ batch: hero / creator profile / DM / notifications / desktop ============ */
/* hero: smaller */
.hero{padding:15px 17px}
.hero-text{position:relative;z-index:1;max-width:74%}
.hero h1{font-size:clamp(21px,5.4vw,30px);margin:5px 0 6px}
.hero p{font-size:13px;margin:0 0 13px;max-width:40ch}
.hero-coins{width:96px;height:96px}
/* creator profile sheet */
.creator-cover{position:relative;height:94px;border-radius:8px;margin-bottom:40px;background:linear-gradient(135deg,var(--accent,#F45DC4),#0d0420)}
.creator-ava{position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);width:78px;height:78px;border-radius:50%;object-fit:cover;border:3px solid var(--surface);box-shadow:0 8px 22px -6px #000}
.creator-id{text-align:center;margin-bottom:13px}
.creator-id h2{font-family:var(--f-disp);font-weight:700;font-size:21px;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.creator-handle{color:var(--muted);font-weight:600;font-size:13px;margin-top:3px}
.creator-stats{display:flex;justify-content:center;gap:9px;margin-bottom:14px}
.creator-stats div{flex:1;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:8px;padding:10px 6px}
.creator-stats b{font-family:var(--f-disp);font-weight:700;font-size:16px;display:block}
.creator-stats small{color:var(--muted);font-size:11px;font-weight:600}
.creator-actions{display:flex;gap:10px;margin-bottom:8px}
.creator-actions .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.creator-actions .cr-followbtn{background:var(--grad-cta);color:var(--action-primary-ink)}
.creator-actions .bi svg{width:16px;height:16px;vertical-align:middle}
.creator-offers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.creator-offer{display:flex;flex-direction:column;align-items:flex-start;gap:5px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:8px;padding:13px;cursor:pointer;text-align:left}
.creator-offer:active{transform:scale(.98)}
.creator-offer .co-ic{width:34px;height:34px;border-radius:6px;display:grid;place-items:center;background:rgba(255,77,184,.16);color:var(--pink)}
.creator-offer .co-ic svg{width:19px;height:19px}
.creator-offer b{font-weight:700;font-size:14px}
.creator-offer small{color:var(--muted);font-size:11px;font-weight:600}
.creator-note{color:var(--muted);font-size:12.5px;font-weight:600;margin:14px 2px 0;line-height:1.5}
/* DM thread */
.dm-head{display:flex;align-items:center;gap:10px}
.dm-head h3{flex:1}
.dm-back{background:none;border:none;color:#fff;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.dm-back svg{width:22px;height:22px;transform:scaleX(-1)}
.dm-ava{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.dm-thread{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow-y:auto;padding:14px 2px}
.dm-msg{display:flex;gap:8px;align-items:flex-end;max-width:82%}
.dm-msg.me{align-self:flex-end;flex-direction:row-reverse}
.dm-msg img{width:28px;height:28px;border-radius:6px;object-fit:cover;flex:0 0 auto}
.dm-bub{padding:10px 13px;border-radius:8px;font-weight:600;font-size:14px;line-height:1.4;background:rgba(255,255,255,.08)}
.dm-msg.me .dm-bub{background:var(--selection-fill);color:var(--selection-ink)}
.dm-compose{display:flex;gap:8px;margin-top:10px}
.dm-compose input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:8px;padding:12px 14px;color:#fff;font-weight:600;font-size:16px}
.dm-compose input:focus{outline:none;border-color:var(--pink)}
.dm-send{flex:0 0 auto;width:46px;border:none;border-radius:8px;background:var(--grad-cta);color:var(--action-primary-ink);cursor:pointer;display:grid;place-items:center}
.dm-send svg{width:20px;height:20px;fill:currentColor}
/* inbox chrome (tools/categories); card styles live with .notif above */
.notif-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.notif-pill{font-weight:800;font-size:12px;color:var(--notification,#FFC636);background:rgba(255,198,54,.14);border-radius:99px;padding:5px 11px}
.notif-pill.muted{color:var(--muted);background:rgba(255,255,255,.06)}
.notif-readall{font-weight:700;cursor:pointer}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--nc,var(--pink))}
.notif-empty{padding:22px;border:1px solid transparent;border-radius:8px;background:var(--surface-2);color:var(--muted);font-weight:800;text-align:center;box-shadow:none;clip-path:none}
/* launch auth */
html.lb-auth-locked-root,
body.lb-auth-locked{overflow:hidden;overscroll-behavior:none}
body.lb-auth-locked{touch-action:none}
.lb-auth-locked .topbar,
.lb-auth-locked .botnav,
.lb-auth-locked .sidebar,
.lb-auth-locked .stage,
.lb-auth-locked .site-footer,
.lb-auth-locked .chat-dock,
.lb-auth-locked .lbp-over,
.lb-auth-locked .desktop-panel{filter:blur(1.6px);opacity:.74;pointer-events:none;user-select:none}
.lb-auth-locked .balance-pop{display:none!important}
.auth-overlay{position:fixed;inset:0;z-index:1700;display:grid;place-items:center;padding:20px;overflow:hidden;background:color-mix(in srgb,var(--canvas) 6%,transparent);pointer-events:auto;overscroll-behavior:contain;touch-action:none}
.auth-overlay[hidden]{display:none!important}
/* Dismissable join modal (signed-out visitors can close it and keep browsing). */
.auth-overlay.is-modal{background:color-mix(in srgb,var(--canvas) 70%,transparent)}
.auth-overlay-scrim{position:absolute;inset:0;z-index:1;cursor:pointer}
.auth-overlay-inner{position:relative;z-index:2;width:100%;display:grid;place-items:center;pointer-events:none}
.auth-overlay-inner .auth-panel{pointer-events:auto}
.auth-overlay-x{position:absolute;top:16px;right:calc(50% - min(530px,calc(50vw - 20px)));z-index:5;width:44px;height:44px;border:0;background:transparent;color:var(--chrome-icon);font-size:21px;line-height:1;display:grid;place-items:center;cursor:pointer;pointer-events:auto}
/* The registry close mark is a full-bleed cross; at 13px with stroke forced to
2 it read as a small hairline X floating in its hit area. Give it room
and let the glyph keep its own 1.5 weight. */
.auth-overlay-x>svg{width:17px;height:17px;stroke-width:1.6}
.auth-overlay-x:hover{background:var(--surface-hi);color:var(--ink)}
.auth-screen{width:100%;min-height:0;display:grid;place-items:center;padding:0!important;overflow:hidden;pointer-events:none}
.auth-panel{position:relative;z-index:2;width:min(100%,1060px);min-height:620px;max-height:calc(100dvh - 40px);overflow:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);border:0;border-radius:12px;background:var(--rail);box-shadow:0 26px 90px rgba(0,0,0,.58);text-align:left;pointer-events:auto;touch-action:pan-y;animation:authModeFade .14s ease-out}
@keyframes authModeFade{from{opacity:.985}to{opacity:1}}
.auth-visual{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;padding:38px;background:linear-gradient(125deg,#140780 0%,#3420bb 43%,#a545f1 100%)}
.auth-visual:before{content:"";position:absolute;inset:-16%;background:linear-gradient(132deg,transparent 8%,rgba(255,255,255,.12) 8% 12%,transparent 12% 28%,rgba(14,1,102,.32) 28% 44%,transparent 44% 57%,rgba(255,155,242,.2) 57% 62%,transparent 62%),repeating-linear-gradient(122deg,transparent 0 72px,rgba(18,4,122,.3) 73px 110px,transparent 111px 154px);transform:skewY(-4deg);pointer-events:none}
.auth-visual:after{content:"";position:absolute;left:-12%;bottom:20%;width:124%;height:11px;background:rgba(255,255,255,.25);transform:rotate(-45deg);box-shadow:0 168px 0 rgba(15,3,103,.38),0 -170px 0 rgba(255,82,211,.2);pointer-events:none}
.auth-visual--welcome{isolation:isolate;padding:28px 32px;background:#0E4CB8}
.auth-visual--welcome:before,.auth-visual--welcome:after{display:none}
.auth-welcome-art{position:absolute;z-index:0;inset:0;display:block}
.auth-welcome-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.auth-visual-brand{position:relative;z-index:1;display:flex;align-items:center;gap:6px;color:#fff;font:800 25px/1 var(--f-disp);letter-spacing:-.03em;text-transform:uppercase}
.auth-visual-brand img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.auth-visual-mark{position:absolute;z-index:1;left:50%;top:49%;width:min(62%,310px);height:auto;transform:translate(-50%,-50%) rotate(-13deg);filter:drop-shadow(0 18px 18px rgba(38,0,108,.34));opacity:1}
.auth-welcome-copy{position:relative;z-index:1;width:min(94%,460px);margin:36px auto 0;text-align:center}
.auth-welcome-copy h2{margin:0;color:#fff;font:800 clamp(30px,2.75vw,38px)/.9 var(--f-disp);letter-spacing:-.045em;text-wrap:balance}
.auth-visual-legal{position:relative;z-index:1;max-width:360px;margin:auto auto 0;color:rgba(255,255,255,.96);font:700 12px/1.48 var(--f-body);text-align:center}
.auth-visual-legal a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.auth-form-side{min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:44px 52px 38px;background:var(--rail);display:flex;flex-direction:column;justify-content:center;gap:22px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.auth-tabs button{height:44px;display:grid;place-items:center;line-height:1;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);padding:8px 4px;font:800 14px/1 var(--f-body);cursor:pointer;transition:border-color .16s,color .16s}
.auth-tabs button:hover:not(.active){background:var(--surface-2);color:var(--ink)}
.auth-tabs button.active{border-color:var(--control-border);color:var(--selection-ink);box-shadow:none}
.auth-signup-progress{display:grid;gap:7px;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--rail)}
.auth-signup-progress-bar{display:block;width:100%;height:8px;overflow:hidden;border-radius:999px;background:var(--surface-active)}
.auth-signup-progress-bar i{display:block;width:50%;height:100%;border-radius:inherit;background:var(--success)}
.auth-signup-progress small{justify-self:end;color:var(--muted);font:700 10px/1 var(--f-body)}
.auth-tabs button:focus-visible,.auth-google-btn:focus-visible,.auth-primary:focus-visible,.auth-check a:focus-visible,.auth-forgot:focus-visible,.auth-social-btn:focus-visible,.auth-eye:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.auth-google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px}
.auth-google-btn span{width:20px;height:20px;display:grid;place-items:center}
.auth-google-btn b{font:800 13px/1 var(--f-body)}
.auth-form{display:grid;gap:15px;margin:0}
.auth-divider{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;color:var(--faint);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line)}
.auth-field{display:grid;gap:7px;text-align:left}
.auth-field>span:first-child{font-size:12px;color:var(--ink);font-weight:800;letter-spacing:-.01em}
.auth-field input{width:100%;height:48px;border:1px solid var(--control-border);border-radius:6px;background:var(--input-bg);color:var(--ink);padding:0 16px;font:800 16px/1 var(--f-body);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.auth-field input::placeholder{color:var(--placeholder)}
.auth-password-wrap{position:relative;display:block}
.auth-password-wrap input{padding-right:56px}
.auth-eye{position:absolute;right:4px;top:50%;width:44px;height:44px;display:grid;place-items:center;border-radius:6px;color:var(--chrome-icon);transform:translateY(-50%);transition:background .2s,color .2s}
.auth-eye svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth-eye:hover{background:var(--surface-hi);color:var(--ink)}
.auth-field input:focus{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 28%,transparent);background:var(--surface-2)}
.auth-forgot{display:flex;align-items:center;justify-self:end;margin-top:-6px}
.auth-check{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;color:var(--muted);font-weight:700;font-size:11px;line-height:1.42;text-align:left}
/* Owner 2026-08-07: the 18+ confirm used the OS checkbox (accent-color only),
so it was the one control in the modal not drawn in our own language. Native
input stays for a11y and form value; it just paints our box + registry tick. */
.auth-check input{-webkit-appearance:none;appearance:none;position:relative;
width:18px;height:18px;margin:0;flex:0 0 auto;cursor:pointer;
border:1px solid var(--line);border-radius:5px;background:var(--surface-2);
transition:background-color .14s ease,border-color .14s ease}
.auth-check input:hover{border-color:var(--line-2)}
.auth-check input:checked{background-color:var(--action-primary);border-color:var(--action-primary);
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.25 0.749 8.158 22.308a2.2 2.2 0 0 1 -3.569 0.059L0.75 17.249' fill='none' stroke='%23171117' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:11px 11px}
.auth-check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.auth-check a{color:var(--ink);font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px}
/* solid brand pink (owner 2026-08-01: gradients off the auth screens) */
.auth-primary{width:100%}
.auth-uname-sub{margin:2px 0 0;color:var(--faint);font-size:12.5px;font-weight:800;line-height:1.35}
.auth-primary.auth-ghost{background:none;box-shadow:none;border:1px solid var(--line);color:var(--ink)}
.auth-primary.auth-ghost:hover{filter:none;background:var(--surface-hi)}
.auth-referral{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.auth-referral summary{height:44px;display:flex;align-items:center;gap:4px;cursor:pointer;color:var(--ink);font:800 12px/1 var(--f-body);list-style:none}
.auth-referral summary::-webkit-details-marker{display:none}
.auth-referral summary span{color:var(--muted);font-weight:700}
.auth-referral summary svg{width:18px;height:18px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .18s}
.auth-referral[open] summary svg{transform:rotate(180deg)}
.auth-referral .auth-field{padding:0 0 14px}
.auth-login .auth-signup-only,.auth-login .auth-signup-action{display:none}
.auth-signup .auth-login-action{display:none}
.auth-social-login{display:grid;gap:18px}
.auth-social-divider{display:grid;place-items:center;color:var(--muted);font-size:12px;font-weight:700}
.auth-social-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.auth-social-btn{min-width:0}
.auth-social-btn svg{width:20px;height:20px}
.auth-social-btn b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-details-side{gap:18px}
.auth-details-side h1{margin:0;color:var(--ink);font:800 clamp(27px,3.1vw,38px)/1.16 var(--f-disp);letter-spacing:-.035em;text-align:center}
.auth-details-side .auth-uname-sub{text-align:center;font-size:13px;line-height:1.55}
.auth-details-icon{margin:0 auto;color:var(--action-primary);font-size:36px;line-height:1;text-align:center}
.auth-details-side .auth-form{margin-top:4px}
.auth-panel.auth-simple{width:min(100%,480px);min-height:0;grid-template-columns:minmax(0,1fr)}
.auth-legal-side{gap:18px}
.auth-native-head{display:flex;align-items:center;gap:6px}
.auth-logo{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.2))}
.auth-native-head .lb-wordmark,.auth-native-head .lb-wordmark .lb-wordmark__part{font-family:var(--f-disp);font-size:17px;font-weight:800;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.auth-native-copy{display:grid;gap:5px}
.auth-native-copy h1{margin:0;color:var(--ink);font:800 26px/1.12 var(--f-disp);letter-spacing:-.025em}
.auth-legal-side .auth-form{margin-top:5px}
@media (max-width:780px){
.auth-overlay{place-items:end center;padding:0;background:color-mix(in srgb,var(--canvas) 68%,transparent)}
.auth-overlay-inner{height:auto;align-self:end}
.auth-overlay-x{position:fixed;top:calc(env(safe-area-inset-top,0px) + 4px);right:calc(env(safe-area-inset-right,0px) + 8px);bottom:auto;color:var(--ink)}
.auth-screen{display:block}
.auth-panel{width:100%;min-height:0;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 52px);display:block;border-radius:18px 18px 0 0;border-bottom:0;overflow-y:auto}
.auth-visual{display:none}
.auth-form-side{min-height:0;padding:30px 30px calc(28px + env(safe-area-inset-bottom,0px));gap:18px;background:var(--rail)}
.auth-tabs button{height:44px;font-size:12px}
.auth-form{gap:13px}
.auth-field input{height:46px}
.auth-social-login{gap:15px}
.auth-social-row{gap:10px}
.auth-details-side h1{font-size:28px}
}
@media (max-width:400px){.auth-form-side{padding-left:20px;padding-right:20px}.auth-social-row{gap:8px}}
@media (prefers-reduced-motion:reduce){
.auth-panel{animation:none}
}
/* ===== DESKTOP (sidebar + wide layout) ===== */
.sidebar{display:none}
.chat-dock{display:none}
.desktop-panel{display:none}
/* Mobile: chat opens as an overlay above the current screen (game stays mounted
underneath), sitting below the botnav so its button can toggle it closed. */
@media (max-width:1079px){
body.lb-chat-docked .chat-dock{display:block;position:fixed;left:0;right:0;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px));z-index:88;background:var(--rail);overflow:hidden}
}
.tb-brand-word{display:none}
.sb-brand{display:none}
@media (min-width:1080px){
:root{--sidebar-open-w:235px;--sidebar-closed-w:64px;--sidebar-w:var(--sidebar-open-w);--chat-dock-w:360px;--panel-w:min(600px,calc(100vw - var(--sidebar-w) - 56px))}
body.lb-sidebar-collapsed{--sidebar-w:var(--sidebar-closed-w)}
.sidebar{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:95;
/* Both rails are THE panel colour. This was #121418 while the chat dock on
the other side was #121418 — same job, two different greys. */
padding:14px 10px;gap:8px;background:var(--rail);border-right:1px solid var(--lb-line,#2A2E38);overflow:hidden;
transition:width .24s cubic-bezier(.22,1,.36,1),padding .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease}
/* expanded sidebar floats over the pinned content — shadow sells the depth */
body:not(.lb-sidebar-collapsed) .sidebar{box-shadow:14px 0 44px -18px rgba(0,0,0,.72)}
/* The pack opener overlay is z-index 1450. .sidebar is 95 and creates its own
stacking context, so a collapsed-nav tooltip (z-index 2100 on a ::after)
was trapped underneath it and got clipped by the overlay. Lift the whole
sidebar above the overlay only while one is open — the overlay is already
inset to the right of the sidebar on desktop, so nothing else changes. */
body.lbp-over-open .sidebar{z-index:1460}
/* Same treatment for the right-hand utility panel (VIP / Cart), and for the
same reason. Opening VIP from inside a pack opener genuinely worked — the
panel mounted, aria-hidden went false, it sized to its 360px lane — but the
opener is `position:fixed; z-index:82` spanning everything right of the
sidebar, and the panel is in-flow at z-index 3. It rendered UNDERNEATH the
pack, so the click read as dead (owner 2026-08-08: "the vip panel popout
isnt working in pack opener"). Only while an overlay is up, and only for a
panel that is actually open, so nothing floats when there is nothing to
float over. */
body.lbp-over-open .desktop-panel[aria-hidden="false"]{z-index:1460}
.sb-head{display:flex;align-items:center;justify-content:flex-start;gap:8px;height:calc(var(--topbar-h) + env(safe-area-inset-top,0px) - 14px);flex:0 0 auto;margin:0 -10px 12px;padding:0 10px;border-bottom:1px solid var(--line)}
.sb-toggle{width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;flex:0 0 44px;border-radius:0;color:var(--chrome-icon);background:transparent;border:0;box-shadow:none;transition:color .18s,transform .18s}
.sb-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round}
.sb-toggle-icon,.sb-search-ic{display:grid;place-items:center;flex:0 0 auto}
.sb-toggle:hover{color:var(--ink);transform:scale(1.04)}
.sb-toggle:focus:not(:focus-visible){outline:none}
.sb-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.sb-logo{display:none}
.sb-logo .lb-logo-button{width:34px;height:34px;min-width:34px;min-height:34px;border-radius:6px}
.sb-word{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-disp);font-weight:800;font-size:12px;letter-spacing:.06em;transition:opacity .18s}
.sb-search{height:42px;display:flex;align-items:center;gap:9px;margin:2px 0 6px;padding:0 11px;border-radius:6px;background:var(--control-deep);border:1px solid var(--line);color:var(--chrome-icon);overflow:hidden;flex:0 0 auto;
transition:height .22s cubic-bezier(.22,1,.36,1),margin .22s cubic-bezier(.22,1,.36,1),padding .22s cubic-bezier(.22,1,.36,1),opacity .16s ease,transform .22s cubic-bezier(.22,1,.36,1),border-color .18s,box-shadow .18s}
.sb-search [hidden]{display:none!important}
.sb-search-button,.sb-pack-search{display:flex;align-items:center;gap:9px;width:100%;height:100%;min-width:0;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left}
.sb-search-button{cursor:pointer}
.sb-pack-search{cursor:text}
.sb-pack-search-input{min-width:0;flex:1 1 auto;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--chrome-text);font:700 13px var(--f-body)}
.sb-pack-search-input:focus-visible{outline:0;box-shadow:none}
.sb-pack-search-input::placeholder{color:var(--chrome-text);opacity:1}
.sb-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:0 0 auto}
.sb-search-label{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:var(--chrome-text);font:700 13px var(--f-body)}
.sb-search{cursor:pointer;text-align:left}
.sb-search:hover .sb-search-label{color:#fff}
.sb-search:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 18%,transparent)}
/* ---- Packs | Battles segmented pair ----------------------------------
One continuous, layered Streamline SVG spans both destinations. Its
original dark and light layers are recolored independently at the 50%
split. The idle half uses one flat gray backing while the selected half uses
a raised blue-gray base with one consistent navy patch color. Four busy edge/top shapes are
removed from the original 18-piece artwork, leaving the fuller giraffe
rhythm intact. The source artwork's outline and duplicate white accent stay
off, and primary-action purple remains reserved for Bet and Wallet. */
/* Lives INSIDE .sb-head now, beside the collapse toggle. min-width:0 lets it
give way when the rail narrows instead of forcing the head wider. */
.sb-seg{--sb-selected-base:var(--lb-sidebar-selected-base,var(--selection-fill));--sb-selected-navy:var(--lb-sidebar-selected-navy,var(--rail));
--sb-gray-base:var(--lb-sidebar-gray-base,var(--surface-2));--sb-gray-1:var(--lb-sidebar-gray-1,var(--surface-2));--sb-gray-2:var(--lb-sidebar-gray-2,var(--surface-hi));--sb-gray-3:var(--lb-sidebar-gray-3,var(--surface-active));
position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;flex:1 1 auto;min-width:0;height:48px;margin:0;
border-radius:6px;background:var(--lb-sidebar-seg,var(--sb-gray-base));border:1px solid var(--lb-sidebar-seg-border,var(--line));box-shadow:none;overflow:hidden}
#sidebar .sb-seg-art{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#sidebar .sb-giraffe-half{--sb-base:var(--sb-gray-base);--sb-dark-1:var(--sb-gray-base);--sb-dark-2:var(--sb-gray-base);--sb-dark-3:var(--sb-gray-base);--sb-dark-4:var(--sb-gray-base)}
#sidebar .sb-seg:has(.sb-seg-btn[data-nav="packs"].is-active) .sb-giraffe-left,#sidebar .sb-seg:has(.sb-seg-btn[data-nav="battles"].is-active) .sb-giraffe-right{--sb-base:var(--sb-selected-base);--sb-dark-1:var(--sb-selected-navy);--sb-dark-2:var(--sb-selected-navy);--sb-dark-3:var(--sb-selected-navy);--sb-dark-4:var(--sb-selected-navy)}
#sidebar #sbGiraffePaths path{transition:none}
.sb-head{gap:6px}
.sb-seg-btn{position:relative;z-index:2;isolation:isolate;display:flex;flex:1 1 50%;align-items:center;justify-content:center;gap:4px;min-width:0;height:48px;padding:0 8px;overflow:hidden;
border:0;background:transparent;color:var(--chrome-text);font:700 12.5px/18px var(--f-body);cursor:pointer;
transition:background .16s ease,color .16s ease}
.sb-seg-btn + .sb-seg-btn{border-left:0}
.sb-seg-btn b{position:relative;z-index:3;min-width:0;height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;line-height:18px}
/* The markup starts hidden until the sidebar-state rules below choose the
exact expanded or compact icon geometry. */
#sidebar .sb-seg-btn .sb-ico,#sidebar .sb-seg-btn .uic{display:none}
/* The selector and each complete glyph stay planted. Packs fan their two
cards once; Battles swings the two swords through each other once. Both
actions return to the exact resting artwork while hover remains active. */
#sidebar .sb-seg-btn .lb-i-packs .i-card-b,#sidebar .sb-seg-btn .lb-i-packs .i-card-f{transform-box:fill-box;transform-origin:50% 100%}
#sidebar .sb-seg-btn .lb-i-swords{overflow:visible}
#sidebar .sb-seg-btn .lb-i-swords .sw-a,#sidebar .sb-seg-btn .lb-i-swords .sw-b{transform-box:view-box}
#sidebar .sb-seg-btn .lb-i-swords .sw-a{transform-origin:18px 18.2px}
#sidebar .sb-seg-btn .lb-i-swords .sw-b{transform-origin:5.5px 18.7px}
#sidebar .sb-seg-btn[data-nav="packs"]:is(:hover,:focus-visible) .i-card-b{animation:lb-sb-pack-fan-back .42s ease-in-out both}
#sidebar .sb-seg-btn[data-nav="packs"]:is(:hover,:focus-visible) .i-card-f{animation:lb-sb-pack-fan-front .42s ease-in-out both}
#sidebar .sb-seg-btn[data-nav="battles"]:is(:hover,:focus-visible) .sw-a{animation:lb-sb-sword-slice-a .46s cubic-bezier(.36,.07,.19,.97) both}
#sidebar .sb-seg-btn[data-nav="battles"]:is(:hover,:focus-visible) .sw-b{animation:lb-sb-sword-slice-b .46s cubic-bezier(.36,.07,.19,.97) both}
@keyframes lb-sb-pack-fan-back{
0%,100%{transform:rotate(0)}
50%{transform:rotate(-8deg)}
}
@keyframes lb-sb-pack-fan-front{
0%,100%{transform:rotate(0)}
50%{transform:rotate(10deg)}
}
@keyframes lb-sb-sword-slice-a{
0%,100%{transform:rotate(0)}
30%{transform:rotate(-11deg)}
62%{transform:rotate(6deg)}
}
@keyframes lb-sb-sword-slice-b{
0%,100%{transform:rotate(0)}
30%{transform:rotate(11deg)}
62%{transform:rotate(-6deg)}
}
@media (prefers-reduced-motion:reduce){
#sidebar .sb-seg-btn:is(:hover,:focus-visible) .i-card-b,#sidebar .sb-seg-btn:is(:hover,:focus-visible) .i-card-f,#sidebar .sb-seg-btn:is(:hover,:focus-visible) .sw-a,#sidebar .sb-seg-btn:is(:hover,:focus-visible) .sw-b{animation:none}
}
.sb-seg-btn:hover{color:var(--selection-ink);background:transparent}
.sb-seg-btn.is-active{color:var(--selection-ink);background:transparent}
.sb-seg-btn:focus:not(:focus-visible){outline:0;box-shadow:none}
.sb-seg-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;box-shadow:none}
#sidebar .sb-seg-btn::before,#sidebar .sb-seg-btn::after{content:none}
body:not(.lb-sidebar-collapsed) .sb-seg-btn{padding-inline:3px;background:transparent;color:var(--muted);font:800 15px/18px var(--f-body);-webkit-text-stroke:.35px currentColor}
body:not(.lb-sidebar-collapsed) .sb-seg{flex:0 0 177.5px;width:177.5px;margin-left:-5px}
body:not(.lb-sidebar-collapsed) .sb-seg-btn:hover{background:transparent}
body:not(.lb-sidebar-collapsed) .sb-seg-btn.is-active{background:transparent;color:var(--selection-ink);font-weight:800}
body:not(.lb-sidebar-collapsed) #sidebar .sb-seg-btn .sb-ico{display:grid;place-items:center;position:relative;z-index:3;flex:0 0 22px;width:22px;height:22px;color:inherit;pointer-events:none}
body:not(.lb-sidebar-collapsed) #sidebar .sb-seg-btn>.sb-ico,
body:not(.lb-sidebar-collapsed) #sidebar .sb-seg-btn>b{transform:none}
body:not(.lb-sidebar-collapsed) #sidebar .sb-seg-btn .sb-ico .uic{display:block;width:22px;height:22px}
body:not(.lb-sidebar-collapsed) #sidebar .sb-seg-btn .sb-ico .uic path{stroke:currentColor!important;stroke-width:3!important}
body:not(.lb-sidebar-collapsed) #sidebar .sb-seg-btn.is-active .sb-ico .uic path{stroke:#fff!important;stroke-width:3!important}
/* Collapsed rail: the pair has no room to sit side by side, so it stacks into
two icon buttons and the shared border moves to the top edge. */
/* Collapsed rail: no room beside the toggle, so the pair drops below it and
stacks into two icon buttons. */
body.lb-sidebar-collapsed .sb-head{flex-wrap:wrap;height:auto;justify-content:center}
body.lb-sidebar-collapsed .sb-seg{display:flex;grid-template-columns:none;flex-direction:column;flex:0 0 auto;margin:8px auto 0;width:50px;height:102px;padding:1px 0;box-sizing:border-box;border-radius:6px}
body.lb-sidebar-collapsed #sidebar .sb-seg-art{inset:auto;left:50%;top:50%;width:102px;height:50px;transform:translate(-50%,-50%) rotate(90deg)}
body.lb-sidebar-collapsed .sb-seg-btn{flex:0 0 50px;height:50px;padding:0;background:transparent;color:var(--muted)}
body.lb-sidebar-collapsed #sidebar .sb-seg-btn .sb-ico{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;
/* Full ink, not the button's 72% label colour: a stroke glyph at .72 reads
as "disabled until you hover it" (owner 2026-08-07). */
color:inherit}
body.lb-sidebar-collapsed #sidebar .sb-seg-btn .uic{display:block;width:22px;height:22px;flex:0 0 auto}
body.lb-sidebar-collapsed .sb-seg-btn b{display:none}
body.lb-sidebar-collapsed .sb-seg-btn.is-active{color:var(--selection-ink);background:transparent}
body.lb-sidebar-collapsed #sidebar .sb-seg-btn .uic path{stroke:currentColor!important}
body.lb-sidebar-collapsed #sidebar .sb-seg-btn.is-active .uic path{stroke:#fff!important;stroke-width:3!important}
body.lb-sidebar-collapsed .sb-seg-btn + .sb-seg-btn{border-left:0;border-top:0}
/* A rule that ignores the sidebar's 10px side padding and runs the full width.
Only meaningful expanded; the collapsed rail keeps the inset version. */
/* Full bleed. Two things to beat: `.sidebar .sb-line` and
`body:not(.lb-sidebar-collapsed) .sb-line`, both of which re-set `margin`
and would win on source order — hence the long selectors. The -12px
over-bleeds past the sidebar's own padding (8.5px one side, 10px the
other), and .sidebar is overflow:hidden, so it lands exactly edge to edge
without hard-coding either padding value. */
body:not(.lb-sidebar-collapsed) .sidebar .sb-line.sb-line-full{margin:2px -12px 10px;width:auto}
body.lb-sidebar-collapsed .sidebar .sb-line.sb-line-full{margin:0;width:auto;align-self:stretch}
.sb-nav{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto;padding:5px 0 12px}
.sb-nav button{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:11px;width:100%;min-height:44px;padding:5px 10px 5px 12px;border-radius:6px;background:none;border:1px solid transparent;cursor:pointer;
color:var(--chrome-text);font-family:var(--f-disp);font-weight:700;font-size:12px;line-height:1;text-align:left;
transition:background .18s,color .18s,border-color .18s,box-shadow .18s,padding .24s cubic-bezier(.22,1,.36,1),grid-template-columns .24s cubic-bezier(.22,1,.36,1),width .24s cubic-bezier(.22,1,.36,1)}
.sb-nav button::before{content:none}
.sb-line{flex:none;height:1px;margin:4px 0;background:var(--lb-line,#2A2E38)}
/* collapsed rail keeps its group dividers (owner ref 2026-07-25) — without
them the icon column reads as one undifferentiated strip. Sized to the
46px rail, not the expanded width. */
body.lb-sidebar-collapsed .sb-line{width:100%;margin:6px 0;background:var(--lb-line,#2A2E38)}
.sb-nav button b{display:block;min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transition:opacity .16s ease,max-width .22s cubic-bezier(.22,1,.36,1)}
.sb-nav button:hover{background:var(--surface-2);border-color:transparent;color:var(--ink)}
.sb-nav button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* Navigation answers "where am I?" with one quiet raised surface. Purple is
reserved for actions such as Bet and Wallet instead of also carrying the
route state through a notch, icon and label at the same time. */
.sb-nav button.is-active{background:var(--selection-fill);border-color:transparent;color:var(--selection-ink);box-shadow:none}
/* Locked reads as a dimmer ink, not as a see-through row: opacity here made
the glyph translucent and the strokes went patchy (owner 2026-08-08). */
.sb-nav button.is-locked{color:var(--locked)}
.sb-nav button.is-locked:hover{color:var(--locked);background:none}
.sb-ico{position:relative;width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto}
/* No crossfade. Two stacked PNGs mid-transition are both part-transparent, so
for ~160ms the icon is a ghost of itself with grey strokes showing through
white ones. The swap is instant now — one image is visible, ever. */
.sb-ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.38));transition:none}
.sb-ico-purple{opacity:0}
.sb-nav button:hover .sb-ico-base,.sb-nav button.is-active .sb-ico-base{opacity:1}
.sb-nav button:hover .sb-ico-purple,.sb-nav button.is-active .sb-ico-purple{opacity:0}
.sb-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.lb-sidebar-collapsed .sidebar{padding:14px 8px}
body.lb-sidebar-collapsed .sb-head{justify-content:center}
body.lb-sidebar-collapsed .sb-search{height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0;border-color:transparent;opacity:0;pointer-events:none;transform:translateY(-6px)}
body.lb-sidebar-collapsed .sb-nav{align-items:center}
body.lb-sidebar-collapsed .sb-nav button{width:42px;grid-template-columns:26px 0;min-height:42px;justify-content:center;padding:5px;gap:0}
body.lb-sidebar-collapsed .sb-nav button b{max-width:0;opacity:0;pointer-events:none}
.botnav{display:none}
/* The bar is pinned to the COLLAPSED sidebar width, not the live one. It used
to sit at left:var(--sidebar-w), so collapsing the rail slid the whole bar
— and the logo with it — 124px sideways. The rail is z-index 95 against the
bar's 90 and already "floats over the pinned content", so when it expands it
simply overlays the bar's empty left gutter. Padding clears the widest rail
state, which keeps the logo at one constant x in every state. */
.topbar{left:var(--sidebar-closed-w);right:0;max-width:none;margin:0;height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));gap:12px;justify-content:flex-start;
padding:12px max(24px,calc((100% - 1560px)/2 + 24px));
padding-left:max(calc(var(--sidebar-open-w) - var(--sidebar-closed-w) + 24px),calc((100% - 1560px)/2 + 24px));
transition:right .24s cubic-bezier(.22,1,.36,1)}
/* Desktop bar layout (owner spec): [logo] .... [balance | wallet] centered .... [bell][chat][profile].
The pair is absolutely centered on the bar; when the chat dock opens the bar
itself shrinks (right:var(--chat-dock-w)) so the icons stop exactly at the
dock's edge and the pair re-centers in the remaining space. */
.tb-center{position:absolute;left:calc(50vw - var(--sidebar-closed-w));top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;z-index:2}
.tb-center .tb-balance{flex:0 1 auto;width:fit-content;min-width:0;max-width:300px}
.tb-rewards{margin-left:auto} /* first of the right-hand cluster */
body.lb-guest .tb-chat{margin-left:6px} /* guests: chat sits right of Login/Register */
/* right cluster: circular, tighter — squares at 54px ate the bar (owner 2026-07-25) */
.tb-rewards,.tb-bell,.tb-chat,.tb-profile{width:44px;height:44px;border-radius:50%}
.tb-rewards .tb-nav-img,.tb-bell .tb-nav-img,.tb-chat .tb-nav-img{width:24px;height:24px}
.tb-rewards svg,.tb-bell svg,.tb-chat svg{width:22px;height:22px}
.tb-bell .dot{top:-3px;right:-3px;min-width:17px;height:17px;font-size:9.5px;line-height:17px}
.topbar{gap:10px}
/* margin-left:0 — the bar's padding now sets the logo's x on its own, and a
negative pull here would make that offset harder to reason about. */
.tb-home{position:relative;z-index:4;display:flex;align-items:center;gap:6px;width:auto;min-width:196px;height:50px;margin-left:14px;padding:0 4px 0 0;border-radius:8px;background:transparent;border:0;cursor:pointer;transform-origin:left center;transition:transform .15s ease}
.tb-home .lb-logo-button{width:27px;height:27px;min-width:27px;min-height:27px}
.tb-home .lb-logo-button,.tb-home .tb-brand-word{pointer-events:none}
.tb-home:active{transform:scale(.97)}
.tb-home:active .lb-logo-button{transform:none}
.tb-brand-word{position:relative;top:1px;display:inline-flex;font-family:var(--f-disp);font-weight:800;font-size:21px;letter-spacing:.02em;white-space:nowrap;color:#fff}
.tb-wallet{margin-left:auto}
/* Wallet is the primary action in the centred balance pair: solid pink,
white icon, and a direct text label rather than another anonymous circle. */
.tb-center .tb-wallet{width:auto;min-width:92px;height:48px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:6px;background:var(--action-primary);color:var(--action-primary-ink);box-shadow:var(--action-shadow)}
.tb-center .tb-wallet:hover,.tb-center .tb-wallet.is-active{background:var(--action-primary-hover);border-color:transparent;color:var(--action-primary-ink)}
.tb-center .tb-wallet .tb-nav-img{position:static;inset:auto;width:18px;height:18px;flex:0 0 auto;transform:none;filter:none}
.tb-center .tb-wallet .tb-nav-base{opacity:1!important}
.tb-center .tb-wallet .tb-nav-purple{display:none!important}
.tb-wallet-label{display:block;font-family:var(--f-disp);font-weight:800;font-size:14px;line-height:1;color:var(--action-primary-ink)}
.tb-balance{flex:0 1 auto;width:fit-content;min-width:0;max-width:280px}
/* base desktop = OVERLAY: content pinned to the collapsed-rail offset, panels
float over it. The RESERVE lane (GoldPump-style, content between the expanded
sidebar + chat) kicks in at >=1500 where there's room — see that block below. */
.stage{max-width:none;margin:0 0 0 var(--sidebar-closed-w);padding:0}
.screen-inner{width:100%;max-width:min(1560px,100%);margin-inline:auto;padding:12px 24px 60px}
.game-screen{max-width:min(1360px,100%);padding-top:28px;gap:22px}
.game-frame{height:clamp(620px,calc(100vh - 168px),760px);min-height:620px}
.game-info-title{padding:20px 24px}
.game-info-body{padding:18px 24px 24px}
.game-more-row{grid-auto-columns:150px}
.feed-screen{left:var(--sidebar-closed-w);right:0;max-width:none;top:74px;bottom:0}
.chat-screen{left:var(--sidebar-closed-w);right:0;max-width:760px;margin-inline:auto;top:74px;bottom:0}
.feed-screen .feed-top,.feed-screen .reels{max-width:560px;margin-inline:auto;width:100%}
.site-footer{margin-left:var(--sidebar-closed-w)}
.sheet-card{max-width:480px;margin-inline:auto}
.balance-pop{right:auto}
.chat-dock{position:fixed;top:0;right:0;bottom:0;width:var(--chat-dock-w);z-index:96;display:none;background:var(--rail);border-left:1px solid var(--lb-line,#2A2E38);border-radius:0;box-shadow:-18px 0 54px -34px rgba(0,0,0,.82);overflow:hidden}
body.lb-chat-docked .chat-dock{display:block}
/* when chat is docked, pin the topbar's right edge to the chat and drop the
max-width centering pad so the balance/bell/chat/avatar cluster rests right
beside the expanded chat instead of being shoved left with a gap. */
body.lb-chat-docked .topbar{right:var(--chat-dock-w);padding-right:20px}
.chat-dock .chat-screen{position:static;inset:auto;max-width:none;width:100%;height:100%;margin:0;padding:0 16px 16px;background:transparent}
.chat-dock .chat-head{min-height:70px;margin:0 -16px 10px;padding:0 14px 0 16px;border-bottom:1px solid var(--line);background:transparent}
.chat-dock .chat-head h2{font-size:21px}
.chat-dock .chat-online{font-size:12px}
.chat-dock .chat-rules-btn{margin-left:0}
.chat-dock .chat-close-btn{display:grid;place-items:center;margin-left:auto}
.chat-dock .chat-feed{gap:12px;padding:4px 2px 12px}
.chat-dock .msg-body{-webkit-line-clamp:unset;display:block;font-size:13.5px}
.chat-dock .emoji-panel{max-height:210px}
/* Docked sheet: flush right edge, runs from the topbar to the bottom of the
screen — no floating window, no title bar. A slim Back pill sits inside
the scroll area instead of a top-right X. */
.desktop-panel{display:block;visibility:hidden;position:fixed;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));right:0;bottom:0;width:var(--panel-w);z-index:88;opacity:0;pointer-events:none;transform:none;
background:var(--rail);border-left:1px solid var(--lb-line,#2A2E38);border-radius:0;box-shadow:-26px 0 70px -34px rgba(0,0,0,.85);overflow:hidden;
transition:opacity .16s ease,visibility .16s}
.desktop-panel[data-screen="rewards"]{width:min(820px,calc(100vw - var(--sidebar-w) - 56px))}
.desktop-panel[data-screen="vip"]{width:min(680px,calc(100vw - var(--sidebar-w) - 56px))}
/* gift-button dock: EXACTLY the chat dock's width so it lands in the same
right-hand slot the layout already reserves. Same var, not a copied number. */
.desktop-panel[data-screen="rewardsQuick"]{width:var(--chat-dock-w)}
/* Items: a touch wider than the chat dock, but the grid stays 2-across, so the
extra width goes into the cards rather than a third column (owner
2026-08-07). Beats lb-shell.css's `.chat-dock,.desktop-panel` on
specificity, so file order does not matter. */
.desktop-panel[data-screen="inventory"]{width:min(440px,calc(100vw - var(--sidebar-w) - 56px))}
body.lb-panel-open .desktop-panel{visibility:visible;opacity:1;pointer-events:auto;transform:none}
/* slim header: title + quiet close — no back arrow, no big X (owner) */
.desktop-panel-head{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;background:linear-gradient(180deg,var(--rail) 78%,rgba(14,32,45,0))}
/* The live top-right VIP dock is rewardsQuick. Its sticky header must be an
opaque clipping boundary; the generic fade exposes scrolled card text. */
.desktop-panel[data-screen="vip"] .desktop-panel-head,
.desktop-panel[data-screen="rewardsQuick"] .desktop-panel-head{background:var(--rail)}
.desktop-panel-head b{font-family:var(--f-disp,Urbanist);font-weight:700;font-size:17px;color:var(--ink,#F7F4F0);letter-spacing:.01em}
.desktop-panel-x{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.desktop-panel-x:hover{background:rgba(255,255,255,.09);color:#fff}
/* 15px of a corner-to-corner glyph read as a speck in a 30px hit area
(owner 2026-08-07) */
.desktop-panel-x svg{width:17px;height:17px;stroke-width:2}
/* position+z-index:1 keeps scrolling content above the ::after watermark */
.desktop-panel-body{height:100%;overflow-y:auto;overscroll-behavior:contain;position:relative;z-index:1}
.desktop-panel .screen-inner{max-width:none;width:100%;padding:16px 16px 28px}
.desktop-panel .sect-head{margin-top:0}
.desktop-panel .screen-inner>.sect-head:first-child{display:none}
.desktop-panel .inv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ...and the Items grid stays 2-across in the panel: 3 columns at 520px made
the cards read as a wall of thumbnails (owner 2026-08-07, "not as absurd"). */
.desktop-panel .inv-grid-items{grid-template-columns:repeat(2,minmax(0,1fr))}
.desktop-panel .tx-page,.desktop-panel .wallet-screen{padding-top:16px}
.desktop-panel .site-footer{display:none}
.screen-inner.wallet-screen{max-width:min(1180px,calc(100% - 48px));padding-top:18px;padding-bottom:72px}
.wallet-screen .wallet-title{margin-bottom:12px}
.wallet-screen .wallet-seg{max-width:860px;margin-bottom:16px}
.wallet-screen .wbody{gap:16px}
.wallet-screen .wallet-panel{padding:16px}
.wallet-screen .buy-panel{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;align-items:start}
.wallet-screen .buy-gets{display:flex;flex-wrap:wrap;align-content:start;gap:8px;margin-top:0}
.wallet-screen .buy-get,.wallet-screen .buy-bonus{width:max-content;max-width:100%;justify-self:start;padding-inline:11px 14px}
.wallet-screen .buy-entry-hint{grid-column:1/-1;margin-top:0}
.wallet-screen .deposit-method-grid.crypto,.wallet-screen .deposit-method-grid.payment-apps{grid-template-columns:repeat(3,minmax(0,1fr))}
.wallet-screen .wallet-continue{max-width:360px;justify-self:end}
.wallet-screen .method-note{max-width:720px}
.wallet-screen .redeem-entry-card{max-width:680px}
.wallet-screen .spd-grid{max-width:760px}
.wallet-screen .rdm-method-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.wallet-screen .redeem-btn,.wallet-screen .wallet-continue{max-width:360px;justify-self:end}
.wallet-screen .lucky-free-hero h3{font-size:28px;max-width:700px}
.wallet-screen .faucet-action{max-width:100%}
.wallet-screen .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.desktop-panel .screen-inner.wallet-screen{max-width:none;padding:16px 16px 28px}
/* desktop lobby: full-width games grid, live bets table below */
.game-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px}
.lbx-body{height:288px}
.game-livebets .lbx-body{height:336px}
.hero{padding:22px 26px}
.hero h1{font-size:34px}
.hero p{font-size:15px}
}
@media (min-width:1440px){
:root{--chat-dock-w:360px}
.screen-inner{max-width:min(1680px,100%)}
.topbar{padding:12px max(28px,calc((100% - 1680px)/2 + 28px));
padding-left:max(calc(var(--sidebar-open-w) - var(--sidebar-closed-w) + 28px),calc((100% - 1680px)/2 + 28px))}
.game-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}
/* (2026-08-06) Two blocks lived here from the pre-flex era, when .topbar/.stage
were position:fixed and every consumer re-derived the rail widths by hand:
1. a 1080–1499 rule that pushed .screen-inner's padding-left by the sidebar's
expand delta (24 + 188 - 64 = 148px). Under the flex shell the column has
ALREADY shrunk by that width, so the push double-counted — with both
panels open it measured 148px left against 16px right, a visibly
off-centre lane. Its specificity (0,2,1) also outranked the magic
container's base .lb-col .screen-inner (0,2,0), so it silently won
wherever the four-way padding ladder had not yet reached 48px.
2. a >=1500 "centred lane" that capped .screen-inner at
calc(100vw - 2 * var(--chat-dock-w)). Viewport maths, not column maths:
at 1600px it pinned content to 880px inside a 1412px column and left the
rest empty, in every panel state. The rest of that block (.stage margin,
.feed-screen inset, .site-footer margin, the .topbar right/padding
reservation) is all restated later and harder by css/lb-shell.css.
Column width is the flex row's job now. Content sizing that should react to it
belongs in the magic-container ladder in lb-shell.css, written as all four
shifted copies — never against 100vw. See [[shuffle-layout-model-ported]]. */
@media (min-width:1280px){
.lbx-body{height:336px}
.game-livebets .lbx-body{height:432px}
.casino-livebets .lbx-body{height:480px}
}
@media (prefers-reduced-motion:reduce) and (min-width:1080px){
.sidebar,.topbar,.stage,.site-footer,.feed-screen,.desktop-panel,.sb-nav button,.sb-nav button b,.sb-logo{transition:none}
}
/* ---------- captcha (Cloudflare Turnstile) gate ---------- */
.ts-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
padding:20px;background:rgba(4,6,16,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ts-card{background:var(--glass,#12152a);border:1px solid var(--line-2,rgba(255,255,255,.15));
border-radius:var(--r-lg,16px);padding:22px 20px;min-width:300px;max-width:340px;
display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:var(--sh,0 24px 70px rgba(0,0,0,.55))}
.ts-ttl{color:var(--ink,#fff);font-weight:700;font-size:15px}
.ts-sub{color:var(--muted,rgba(244,246,251,.66));font-size:12px;margin-top:-8px;text-align:center}
.ts-host{min-height:65px;display:flex;align-items:center;justify-content:center}
.ts-cancel{background:transparent;border:0;color:var(--muted,#8a90b0);font-size:13px;cursor:pointer;padding:4px 10px;border-radius:8px}
.ts-cancel:hover{color:var(--ink,#fff)}
/* ===== Economy rebuild 2026-07: VIP panel, rewards, notifications, skeletons ===== */
/* Top route loader — 3px under the topbar, sweeps on navigation then fades.
Stake pins theirs to calc(header-height - 3px); ours uses --topbar-h the same way. */
#lbRouteBar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .18s ease}
#lbRouteBar.on{opacity:1}
#lbRouteBar.done{opacity:0;transition:opacity .26s ease .06s}
#lbRouteBar > i{display:block;height:100%;width:0;border-radius:999px;
background:linear-gradient(90deg,var(--pink,#E0457B),#ff7ab0);
box-shadow:0 0 10px rgba(224,69,123,.55);
transition:width .16s cubic-bezier(.22,1,.36,1)}
#lbRouteBar.done > i{transition:width .14s ease-out}
@media (prefers-reduced-motion:reduce){#lbRouteBar > i{transition:none}}
/* ---------- Packs route skeletons ----------
Reserve the exact lazy bundle geometry: a 180px Live Opens rail, the real
toolbar, and either the 2-6 column authored-cover grid or full battle rows. */
.pk-load-screen{
--pk-load-canvas:var(--bg,#151C21);--pk-load-surface:var(--surface,#0D1317);
--pk-load-surface-2:var(--surface-2,#1E282E);--pk-load-surface-3:var(--surface-hi,#2A353C);
--pk-load-input:var(--control-deep,#141C21);--pk-load-line:var(--line,#2A353C);
--pk-load-muted:var(--lb-ink-muted,#AAA39C);width:100%;max-width:1520px;margin-inline:auto;
padding:0 14px 60px;min-height:calc(100dvh - var(--topbar-h,70px) - 12px);
background:var(--pk-load-canvas);border-radius:0 0 8px 8px
}
@media (min-width:1080px){.pk-load-screen{padding-top:12px}}
@media (min-width:1500px){
.pk-load-screen{max-width:min(1520px,calc(100vw - var(--sidebar-closed-w,64px) - 48px))}
body.lb-chat-docked .pk-load-screen{max-width:min(1520px,calc(100vw - var(--sidebar-closed-w,64px) - var(--chat-dock-w) - 48px))}
}
.pk-load-live-head{margin:4px 0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pk-load-live-head h3{margin:0;display:inline-flex;align-items:center;gap:9px;font-family:var(--f-disp,Urbanist,sans-serif);font-size:16px;font-weight:700;color:var(--ink,#F7F4F0)}
.pk-load-live-dot{position:relative;display:inline-block;width:16px;height:16px;flex:0 0 16px;border:2px solid rgba(235,75,75,.5);border-radius:50%;box-sizing:border-box}
.pk-load-live-dot::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#EB4B4B;transform:translate(-50%,-50%)}
.pk-load-live-rail{display:grid;grid-auto-flow:column;grid-auto-columns:224px;gap:16px;height:180px;margin-bottom:4px;overflow:hidden}
.pk-load-live-card{position:relative;display:block;height:180px;border-radius:8px;background:var(--pk-load-surface-2)}
.pk-load-live-card.pk-load-shimmer{background:var(--pk-load-surface-2)}
.pk-load-live-avatar-dot{position:absolute;z-index:1;top:16px;right:16px;display:block;width:28px;height:28px;border-radius:50%;background:var(--pk-load-surface-3)}
.pk-load-shimmer{position:relative;overflow:hidden;background:var(--pk-load-surface-3)}
.pk-load-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.075) 50%,transparent 80%);transform:translateX(-100%);animation:pkLoadShimmer 1.4s ease-in-out infinite}
.pk-load-toolbar{display:flex;flex-direction:column;gap:10px;margin:20px 0 16px}
.pk-load-search,.pk-load-filters>span,.pk-load-battle-sort{min-height:46px;border:1px solid var(--pk-load-line);border-radius:8px;background:var(--pk-load-input);color:var(--pk-load-muted)}
.pk-load-search{display:flex;align-items:center;gap:12px;padding:0 14px;font-size:14px}
.pk-load-search>i{position:relative;width:16px;height:16px;flex:0 0 16px;border:2px solid currentColor;border-radius:50%}
.pk-load-search>i::after{content:"";position:absolute;width:6px;height:2px;right:-5px;bottom:-2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.pk-load-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pk-load-filters>span,.pk-load-battle-sort{display:flex;align-items:center;gap:9px;padding:0 13px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden}
.pk-load-filters>span>i,.pk-load-battle-sort>i{width:16px;height:16px;flex:0 0 16px;border-radius:4px;background:var(--pk-load-surface-3)}
.pk-load-filters>span>b,.pk-load-battle-sort>b{width:7px;height:7px;margin-left:auto;flex:0 0 7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.pk-load-grid-frame{container:pk-load-packs / inline-size;width:100%}
.pk-load-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
@container pk-load-packs (min-width:520px){.pk-load-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container pk-load-packs (min-width:700px){.pk-load-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container pk-load-packs (min-width:900px){.pk-load-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@container pk-load-packs (min-width:1280px){.pk-load-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pk-load-pack{min-width:0;display:flex;flex-direction:column;align-items:stretch}
.pk-load-cover{position:relative;display:block;aspect-ratio:1000/1400;border-radius:8px;background:var(--pk-load-surface-2)}
.pk-load-vol{display:flex;align-items:center;width:min(152px,calc(100% - 20px));height:8px;margin:-2px auto 0;gap:2px;padding:0;box-sizing:border-box;border-radius:0;background:transparent;position:relative;z-index:1}
.pk-load-vol>i{flex:1;height:4px;border-radius:1px;background:var(--pk-load-surface-3)}
.pk-load-price{height:22px;margin-top:7px;display:flex;align-items:center;justify-content:center;gap:6px}
.pk-load-price>i{width:17px;height:17px;border-radius:50%;background:var(--pk-load-surface-3)}
.pk-load-price>b{display:block;width:58px;height:12px;border-radius:99px}
.pk-load-battle-filter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px}
.pk-load-battle-sort{width:min(240px,100%)}
.pk-load-battle-create{min-width:172px;min-height:52px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:8px;background:var(--action-primary,#F45DC4);color:var(--action-primary-ink);font-size:14px;font-weight:700}
.pk-load-battle-create>i{position:relative;width:15px;height:15px}
.pk-load-battle-create>i::before,.pk-load-battle-create>i::after{content:"";position:absolute;top:6px;left:1px;width:13px;height:2px;border-radius:2px;background:currentColor}
.pk-load-battle-create>i::after{transform:rotate(90deg)}
.pk-load-battle-list{container:pk-load-battles / inline-size;display:flex;flex-direction:column;gap:16px}
.pk-load-battle-card{min-height:150px;padding:16px;display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(0,auto) minmax(150px,auto);align-items:center;gap:0;border-radius:8px;background:var(--pk-load-surface-2)}
.pk-load-battle-info{min-width:0;display:flex;flex-direction:column;gap:8px}
.pk-load-battle-title,.pk-load-battle-sub,.pk-load-battle-total{display:block;border-radius:99px}
.pk-load-battle-title{width:62%;height:19px}.pk-load-battle-sub{width:44%;height:17px}.pk-load-battle-total{width:76px;height:24px}
.pk-load-battle-avatars{height:34px;display:flex;align-items:center}
.pk-load-battle-avatars>b{width:34px;height:34px;margin-left:-5px;border:1px solid var(--pk-load-surface-2);border-radius:50%;background:var(--pk-load-surface-3);box-sizing:border-box}
.pk-load-battle-avatars>b:first-child{margin-left:0}
.pk-load-battle-packwrap{position:relative;min-width:0;width:100%;height:110px;justify-self:end;border-radius:8px;background:var(--pk-load-input);overflow:hidden}
.pk-load-battle-packs{min-width:0;display:flex;align-items:center;justify-content:safe center;gap:12px;width:calc(100% - 2px);height:108px;margin:1px;padding:6px;box-sizing:border-box;overflow:hidden}
.pk-load-battle-packs>i{display:block;width:63px;height:96px;flex:0 0 63px;border-radius:6px;background:var(--pk-load-surface-3)}
.pk-load-battle-pack-count{position:absolute;z-index:1;top:4px;right:4px;min-height:25px;padding:2px 6px;display:inline-flex;align-items:center;border-radius:4px;background:var(--pk-load-surface-2);color:var(--pk-load-muted);font-size:14px;font-weight:700;box-sizing:border-box}
.pk-load-battle-outcome{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pk-load-battle-outcome>b{display:block;width:160px;height:44px;border-radius:8px;background:var(--pk-load-surface-3)}
@container pk-load-battles (max-width:819.98px){
.pk-load-battle-card{grid-template-columns:minmax(0,1fr);gap:10px;min-height:0;text-align:center}
.pk-load-battle-info{align-items:center;gap:10px}.pk-load-battle-outcome{align-items:center}.pk-load-battle-outcome>b{width:min(280px,100%)}.pk-load-battle-packwrap{justify-self:stretch}.pk-load-battle-packs{width:auto;max-width:100%;justify-content:safe center}
}
@container pk-load-battles (min-width:820px){
.pk-load-battle-card{grid-template-columns:336px minmax(0,1fr) 192px;gap:0;padding:16px;min-height:150px}
.pk-load-battle-packs{justify-content:flex-start;width:calc(100% - 2px)}.pk-load-battle-outcome{align-items:center}
}
@media (max-width:759px){
.pk-load-battle-filter{flex-direction:column;align-items:stretch;gap:8px}.pk-load-battle-create{order:-1;width:100%}.pk-load-battle-sort{width:100%}
}
@media (max-width:640px){
.pk-load-battle-card{grid-template-columns:minmax(0,1fr);gap:12px;min-height:0;padding:16px 14px}
.pk-load-battle-packs>i{width:58px;height:86px;flex-basis:58px}
}
@media (max-width:560px){
.pk-load-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@keyframes pkLoadShimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.pk-load-shimmer::after{animation:none}}
#toastStack{position:fixed;left:calc(env(safe-area-inset-left,0px) + 12px);right:auto;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 10px);z-index:1800;display:flex;flex-direction:column;gap:8px;align-items:stretch;pointer-events:none;width:min(92vw,400px)}
@media (min-width:1080px){
#toastStack{left:calc(var(--lb-nav-w,64px) + 12px)}
body:not(.lb-sidebar-collapsed) #toastStack{left:calc(var(--lb-nav-open-w,235px) + 12px)}
}
.toast-item{display:flex;align-items:stretch;gap:0;background:var(--menu);border:0;color:var(--chrome-text);font-weight:800;font-size:14px;padding:0;border-radius:8px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.5);opacity:0;transform:translateX(-28px);transition:opacity .2s ease,transform .22s cubic-bezier(.22,1,.36,1);width:100%;max-width:100%;pointer-events:auto}
/* One width for every toast. Sizing to content made the card jump between a
short 'Saved' and a long welcome line; a fixed track means the shape is
constant no matter what lands in it. */
.toast-item.show{opacity:1;transform:translateX(0)}
/* Two-line toast + the countdown bar that drains for exactly the toast's life. */
.toast-item{position:relative}
.toast-item .tt-2{display:flex;flex-direction:column;gap:2px;justify-content:center}
.toast-item .tt-title{font-weight:800;font-size:14px;line-height:1.25}
.toast-item .tt-sub{font-weight:600;font-size:12px;line-height:1.3;color:var(--muted)}
.toast-item .tbar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;
opacity:.55;transform-origin:left center;animation:lbToastBar linear forwards;pointer-events:none}
.toast-item.ok .tbar{color:var(--success);opacity:.9}
.toast-item.warning .tbar{color:var(--warning);opacity:.9}
.toast-item.warn .tbar{color:var(--error);opacity:.9}
@keyframes lbToastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.toast-item .tbar{animation:none;transform:scaleX(1);opacity:.25}}
/* green (or red) is a full-height panel FLUSH to the left edge, check centered */
.toast-item .ti{flex:0 0 auto;align-self:stretch;display:grid;place-items:center;width:46px;background:var(--surface-hi);color:#fff}
.toast-item .ti svg{width:19px;height:19px}
.toast-item.ok .ti{background:var(--success);color:var(--action-secured-ink)}
.toast-item.warning .ti{background:var(--warning);color:var(--action-gold-ink)}
.toast-item.warn .ti{background:var(--error);color:var(--action-danger-ink)}
.toast-item.img .ti{background:var(--surface-hi)}
.toast-item .ti img{width:27px;height:27px;object-fit:contain}
/* Avatars are photos, not glyphs — crop to a circle instead of letterboxing.
Scoped to the two-line style so game/pack art in other toasts stays square. */
.toast-item.img:has(.tt-2) .ti img{border-radius:50%;object-fit:cover;width:28px;height:28px}
.toast-item .tt{flex:1 1 auto;min-width:0;padding:12px 4px 12px 14px}
.toast-item .tx{flex:0 0 auto;align-self:stretch;display:grid;place-items:center;background:transparent;border:0;color:var(--muted,#9a9aa2);font-size:14px;line-height:1;cursor:pointer;padding:0 14px}
.toast-item .tx:hover{color:#fff}
.rake .rk-sub .bal-chip.mini{width:14px;height:14px;display:inline-block;vertical-align:-2px}
.rewards-signin{display:flex;flex-direction:column;gap:4px;padding:18px}
.rewards-signin b{font-size:15px}
.rewards-signin small{color:var(--muted)}
.lead-me-chip{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(139,92,255,.16);border:1px solid rgba(139,92,255,.4);color:#cdb7ff;font-weight:800;font-size:12.5px;padding:6px 12px;border-radius:999px}
/* skeleton loaders */
.skel{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:8px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:skelShine 1.2s infinite}
@keyframes skelShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.skel-card{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;min-height:130px}
.skel-ico{width:44px;height:44px;border-radius:6px}
.skel-line{width:70%;height:12px}
.skel-line.sm{width:45%;height:9px}
.skel-tile{height:84px;border-radius:8px;margin-bottom:10px}
.skel-input{height:52px;border-radius:6px}
/* ===== Wallet rework 2026-07 ===== */
/* shared wallet body rhythm: generous spacing, calmer panels */
#walletBody .wbody{gap:14px}
#walletBody .wallet-panel{padding:16px;border-radius:var(--r-lg)}
#walletBody .dep-label{margin:4px 2px -2px}
#walletBody .wallet-kicker{margin-bottom:0}
#walletBody .method-panel{gap:13px}
/* skeleton variants (reuse .skel shimmer) */
.wsk-line{display:inline-block;width:96px;height:10px;border-radius:6px;vertical-align:middle}
.wsk-num{display:inline-block;width:64px;height:14px;border-radius:6px}
/* ---- deposit: hero balance strip + value prop ---- */
.buy-hero{display:grid;gap:12px;background:var(--surface-2);border-color:var(--line)}
.buy-bal-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.buy-bal{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px;border-radius:var(--r);background:var(--surface-hi);border:1px solid var(--line)}
.buy-bal .bal-chip{width:30px;height:30px}
.buy-bal-tx{min-width:0;display:grid;gap:1px}
.buy-bal-tx small{color:var(--faint);font-family:var(--f-disp);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.buy-bal-tx b{font-family:var(--f-disp);font-size:17px;font-weight:800;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buy-value-prop{margin:0;color:var(--muted);font-size:12.5px;font-weight:700;line-height:1.45}
.buy-value-prop b{color:var(--gold);font-family:var(--f-disp);font-weight:800}
/* ---- deposit: quick amount chips ---- */
.buy-quick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:12px}
@media(max-width:430px){.buy-quick{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ---- deposit: consistent 2-column method cards (icon, name, network tag) ---- */
#walletBody .deposit-method-grid.crypto,#walletBody .deposit-method-grid.payment-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
#walletBody .deposit-method-grid.telegram-checkout{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:460px){#walletBody .deposit-method-grid.telegram-checkout{grid-template-columns:1fr}}
#walletBody .deposit-method-head small{font-weight:700}
/* ---- deposit: summary card ---- */
.buy-summary{display:grid;gap:10px;background:var(--surface-2)}
.buy-sum-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;color:var(--muted)}
.buy-sum-row b{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-disp);font-weight:800;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.buy-sum-row b .chip-i{width:17px;height:17px;vertical-align:0}
.buy-sum-row.bonus{border-top:1px solid var(--line);padding-top:10px}
.buy-sum-row.bonus b{color:var(--gold)}
.buy-summary .wallet-continue{margin-top:4px}
.buy-summary .method-note{margin:0}
/* ---- redeem: panels, speed tiers as horizontal cards, summary ---- */
.rdm-amount-panel{display:grid;gap:10px}
.rdm-speed-panel,.rdm-method-panel,.rdm-summary-panel{display:grid;gap:11px}
#walletBody .spd-grid{grid-template-columns:1fr;gap:8px;max-width:none}
#walletBody .spd-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:3px;align-items:center;justify-items:start;min-height:58px;padding:10px 14px;text-align:left;border-radius:var(--r)}
#walletBody .spd-btn b{grid-column:1;grid-row:1;font-size:14px}
#walletBody .spd-btn small:not(.spd-eta){grid-column:2;grid-row:1/3;justify-self:end;padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);font-size:10.5px;font-weight:800}
#walletBody .spd-btn .spd-eta{grid-column:1;grid-row:2;color:var(--faint);font-size:11px}
#walletBody .spd-btn.on{border-color:var(--line-2)}
#walletBody .spd-btn.on small:not(.spd-eta){background:var(--surface-hi);border-color:var(--line-2);color:var(--ink)}
#walletBody .spd-turbo{padding-right:48px}
#walletBody .spd-turbo .spd-asset{right:12px}
#walletBody .spd-turbo small:not(.spd-eta){background:rgba(255,200,61,.1);border-color:rgba(255,200,61,.28);color:var(--gold)}
#walletBody .rdm-method-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#walletBody .rdm-method{min-height:62px;border-radius:var(--r);padding:10px 12px}
.rdm-summary-panel{background:var(--surface-2)}
.rdm-summary-panel .rdm-summary{background:var(--surface-2);border-color:rgba(255,255,255,.07);border-radius:var(--r)}
.rdm-sum-row.after b{color:var(--muted)}
.rdm-min-hint{margin:0;color:var(--faint);font-size:12px;font-weight:600;line-height:1.45}
#rdmSummary:not(:empty)~.rdm-min-hint{display:none}
.rdm-summary-panel .redeem-btn{margin-top:2px}
.rdm-summary-panel .dep-foot{margin-top:0}
/* ---- play free: hero, faucet progress, rank pack rail ---- */
.wb-free .lucky-free-hero{gap:14px}
.wb-free .free-hero-main{gap:6px}
.wb-free .lucky-free-hero h3{font-size:clamp(21px,3vw,30px)}
.wb-free .free-hero-main p{margin:0;color:var(--muted);font-size:13px;font-weight:600;line-height:1.5}
.faucet-panel{display:grid;gap:11px;border-color:rgba(255,200,61,.22);background:linear-gradient(160deg,rgba(255,200,61,.09),var(--surface-2) 72%)}
.faucet-panel .faucet-action{padding:0;border:0;background:transparent;border-radius:0}
.faucet-track{position:relative;height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);overflow:hidden}
.faucet-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform-origin:left center;transform:scaleX(var(--fp-start,1))}
.faucet-fill.filling{animation:lbFaucetFill linear forwards;animation-duration:var(--fp-dur,0ms)}
@keyframes lbFaucetFill{from{transform:scaleX(var(--fp-start,0))}to{transform:scaleX(1)}}
.faucet-panel:has(.faucet-btn.cooling) .faucet-fill:not(.filling){transform:scaleX(.04);animation:none}
@media(prefers-reduced-motion:reduce){.faucet-fill.filling{animation:none;transform:scaleX(1)}}
.faucet-note{margin:0;color:var(--faint);font-size:11.5px;font-weight:600;line-height:1.45}
/* ---- desktop: two-column wallet layouts (matches existing >=1080 shell) ---- */
@media(min-width:1080px){
#walletBody .wbody{gap:16px}
.wallet-screen .wb-buy{grid-template-columns:minmax(320px,400px) minmax(0,1fr);align-items:start}
.wallet-screen .wb-buy .buy-hero{grid-column:1/-1;grid-row:1}
.wallet-screen .wb-buy .buy-panel{display:block;grid-column:1;grid-row:2}
.wallet-screen .wb-buy .method-panel{grid-column:2;grid-row:2/span 2}
.wallet-screen .wb-buy .buy-summary{grid-column:1;grid-row:3}
.wallet-screen .wb-buy .wb-fine{grid-column:1/-1;grid-row:4}
.wallet-screen .wb-buy .wallet-continue{max-width:none;justify-self:stretch}
.wallet-screen .wb-redeem{grid-template-columns:minmax(320px,420px) minmax(0,1fr);align-items:start}
.wallet-screen .wb-redeem .rdm-amount-panel{grid-column:1;grid-row:1;max-width:none}
.wallet-screen .wb-redeem .rdm-speed-panel{grid-column:1;grid-row:2}
.wallet-screen .wb-redeem .rdm-method-panel{grid-column:2;grid-row:1}
.wallet-screen .wb-redeem .rdm-summary-panel{grid-column:2;grid-row:2}
.wallet-screen .wb-redeem .redeem-btn{max-width:none;justify-self:stretch}
#walletBody .rdm-method-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.wallet-screen .wb-history .history-panel{max-width:560px}
}
/* =====================================================================
REWARDS BONUSES + BONUS BANNERS + BET MODAL + SHARED BETS — 2026-07
Single owner for all bonus/PF surfaces (replaces .vlu-* and the
aly-v246 iframe heads-up banner).
===================================================================== */
/* -- Bonuses (Rewards panel, under the rakeback grid) -- */
.bonus-list{display:grid;gap:12px;margin-top:6px}
.bonus-card{padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--bc,#8b5cff) 26%,var(--line))}
.bonus-head{display:flex;align-items:center;gap:11px;padding:13px 16px;background:linear-gradient(120deg,color-mix(in srgb,var(--bc,#8b5cff) 16%,transparent),transparent 70%)}
.bonus-rank{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));flex:0 0 auto}
.bonus-rank.dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--bc,#8b5cff);margin:11px}
.bonus-title b{display:block;font-family:var(--f-disp);font-weight:700;font-size:15px}
.bonus-title small{color:var(--muted);font-size:11.5px;font-weight:700}
.bonus-rows{display:flex;flex-direction:column}
.bonus-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-top:1px solid var(--line);min-height:56px}
.bonus-row.done{opacity:.55}
.bonus-ic{width:34px;height:34px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--bc,#8b5cff) 16%,var(--surface-3));color:color-mix(in srgb,var(--bc,#8b5cff) 70%,#fff)}
.bonus-ic svg{width:17px;height:17px;fill:currentColor}
.bonus-meta{flex:1;min-width:0}
.bonus-meta b{display:block;font-family:var(--f-disp);font-weight:700;font-size:13.5px}
.bonus-meta small{display:block;color:var(--muted);font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bonus-claim{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:0 16px}
.bonus-claim .bal-chip{width:15px;height:15px}
.bonus-claim b{font:inherit}
.bonus-done{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;color:var(--success);font-weight:800;font-size:12.5px}
.bonus-done svg{width:14px;height:14px;fill:currentColor}
.bonus-wait{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:12px}
.bonus-wait svg{width:13px;height:13px;fill:var(--faint)}
/* -- Bonus banners: polished in-shell notification pop (top-right) -- */
#bonusBanners{position:fixed;top:calc(var(--topbar-h,64px) + env(safe-area-inset-top,0px) + 12px);right:14px;z-index:1810;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:min(400px,calc(100vw - 28px))}
.bonus-banner{pointer-events:auto;position:relative;overflow:hidden;display:grid;grid-template-columns:44px minmax(0,1fr) 28px;align-items:center;gap:11px;padding:13px 12px 13px 16px;border-radius:8px;cursor:pointer;
background:#1a1d23;border:1px solid var(--line);
box-shadow:0 14px 34px rgba(0,0,0,.5);
opacity:0;transform:translateX(32px);transition:opacity .22s ease-out,transform .24s cubic-bezier(.22,1,.36,1)}
.bonus-banner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bb,#8b5cff)}
.bonus-banner.show{opacity:1;transform:none}
.bonus-banner .bb-ic{width:44px;height:44px;border-radius:6px;display:grid;place-items:center;background:#2A2E38;color:#fff}
.bonus-banner .bb-ic img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.bonus-banner .bb-ic svg{width:20px;height:20px;fill:currentColor}
.bonus-banner .bb-body{min-width:0}
.bonus-banner .bb-body b{display:block;font-family:var(--f-disp);font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bonus-banner .bb-body small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:11.5px;font-weight:600;line-height:1.35}
.bonus-banner:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bonus-banner .bb-x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--muted);font-size:11px;cursor:pointer;align-self:start}
@media(max-width:640px){#bonusBanners{left:14px;right:14px;max-width:none}.bonus-banner{grid-template-columns:40px minmax(0,1fr) 26px}}
/* (A/B banner variants removed — base .bonus-banner is the chosen flat/no-glow look) */
/* -- inbox polish: rank art icons -- */
.notif .ni .ni-rank{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
/* -- Bet details / provably fair modal -- */
.bm-id{color:var(--muted);font-weight:700;font-size:14px;margin-left:4px}
.bm-copy{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#9ba5b4;background:var(--surface-hi);margin-left:6px;cursor:pointer;vertical-align:middle;transition:color .15s,background .15s}
.bm-copy:hover{color:#fff;background:var(--surface-active)}
.bm-copy svg{width:14px;height:14px;fill:none;stroke:currentColor}
.bm-by{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;font-weight:700;margin:-2px 0 16px}
.bm-user-pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface-hi);border:0;border-radius:6px;padding:5px 11px;min-height:30px}
.bm-user-pill .bm-rank{width:18px;height:18px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
/* The pill wears the player's face. Rank badges live on chat messages only. */
.bm-user-pill .bm-face{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--surface)}
.bm-user-pill.is-hidden .bm-face{object-fit:contain;padding:2px}
.bm-user-pill b{color:#fff;font-family:var(--f-disp);font-weight:700;font-size:13px}
.bm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:14px 6px;text-align:center;margin-bottom:12px}
.bm-stats>div+div{border-left:1px solid var(--line)}
.bm-stats small{display:block;color:var(--faint);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.bm-stats b{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-weight:700;font-size:15px}
.bm-stats b.up{color:var(--success)}
.bm-stats .bal-chip{width:16px;height:16px}
.bm-stats .lb-gameplay-amount{gap:8px}
.bm-stats .lb-pair-ic{width:16px;height:16px}
.bm-snapshot{padding:16px;margin-bottom:12px}
/* coinflip snapshot — matches the game coin (pink triangle = heads, cyan square = tails) */
.bm-cf-single{display:flex;align-items:center;justify-content:center;padding:24px 16px}
.bm-cf-track{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;background:var(--surface-1,#0e1017);border:1px solid var(--line);border-radius:6px;padding:14px}
.bm-cf-coin{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.bm-cf-coin.heads{background:#F25FC4;border:3px solid #b52ba0}
.bm-cf-coin.tails{background:#19CBE6;border:3px solid #087fd0}
.bm-cf-coin.big{width:118px;height:118px;border-width:11px}
.bm-cf-coin.won{box-shadow:0 0 0 3px #2fe37a}
.bm-cf-coin.big.won{box-shadow:0 0 0 5px #2fe37a}
.bm-cf-coin.lost{opacity:.4}
.bm-cf-mark{width:44%;height:44%;display:block}
.bm-cf-coin.heads .bm-cf-mark{background:#34176b;clip-path:polygon(50% 4%,100% 96%,0% 96%)}
.bm-cf-coin.tails .bm-cf-mark{background:#043572;border-radius:24%}
.bm-cf-slot{width:26px;height:26px;border-radius:50%;flex:0 0 auto;background:#242a38;border:1px solid var(--line)}
.bm-board{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-width:330px;margin:0 auto}
.bm-cell{aspect-ratio:1;border-radius:6px;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--line)}
.bm-cell svg{width:58%;height:58%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.bm-cell.picked{border-color:#c84cff;box-shadow:0 0 0 1.5px rgba(200,76,255,.55)}
.bm-cell.mine.picked{border-color:#ff314a;box-shadow:0 0 0 1.5px rgba(255,49,74,.55)}
/* Snakes final result — preserve the game's twelve-tile loop and last landing,
instead of exposing the server's board-shuffle/debug fields. */
.bm-snapshot.bm-snakes{padding:14px}
.bm-snakes-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:7px;max-width:344px;aspect-ratio:1;margin:0 auto}
.bm-snakes-cell{min-width:0;border-radius:7px;display:grid;place-items:center;background:#252a34;border:1px solid var(--line);color:#f4f6fb;font-family:var(--f-disp);font-weight:800;font-size:12px;font-variant-numeric:tabular-nums;box-shadow:inset 0 -2px rgba(0,0,0,.2)}
.bm-snakes-cell.multiplier{background:linear-gradient(145deg,#2d2542,#252a34);color:#c9a9ff}
.bm-snakes-cell.start{background:linear-gradient(145deg,#234335,#252a34);color:#42d98c}
.bm-snakes-start-mark{font-size:17px;transform:translateX(1px)}
.bm-snakes-cell.snake{background:linear-gradient(145deg,#48232d,#29252d);color:#ff708c}
.bm-snakes-cell.snake svg{width:58%;height:58%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.bm-snakes-cell.landed{border-color:#a76cff;box-shadow:0 0 0 2px rgba(167,108,255,.72),0 0 18px rgba(124,44,255,.35)}
.bm-snakes-cell.landed.busted{border-color:#ff526d;box-shadow:0 0 0 2px rgba(255,82,109,.68),0 0 18px rgba(255,49,74,.28)}
.bm-snakes-center{grid-row:2/4;grid-column:2/4;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#111418;border:1px solid var(--line);text-align:center}
.bm-snakes-center small{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.bm-snakes-center>b{font-family:var(--f-disp);font-size:20px;font-weight:800}
.bm-snakes-center>b.up{color:var(--success)}
.bm-snakes-center>b.down{color:#ff5d7d}
.bm-snakes-dice{display:flex;gap:6px}
.bm-snakes-dice span{width:31px;height:31px;border-radius:6px;display:grid;place-items:center;background:#f4f6fb;color:#111418;border:1px solid #fff;box-shadow:0 3px 0 #aeb5c3;font-family:var(--f-disp);font-weight:800;font-size:16px}
.bm-three-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.bm-three-fields .bm-field{min-width:0}
.bm-three-fields .bm-field-val{min-height:48px;display:flex;align-items:center;padding:10px;font-size:12.5px}
@media(max-width:480px){.bm-snakes-board{max-width:310px}.bm-snakes-cell{font-size:10.5px}.bm-three-fields{grid-template-columns:1fr}.bm-three-fields .bm-field-val{min-height:42px}}
/* Diamonds — the 5 result gems, styled like the real win end-result:
matched gems sit lit on their coloured pedestal, odd-ones-out stay dim. */
.bm-diamonds{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;max-width:362px;margin:0 auto}
.bm-dgem{position:relative;aspect-ratio:5/6;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--line);overflow:hidden}
.bm-dgem img{width:88%;height:88%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 4px 7px rgba(0,0,0,.5))}
.bm-dgem.hit{border-color:color-mix(in srgb,var(--dg,#fff) 45%,var(--line))}
.bm-dgem.hit::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--dg,#888) 74%,#000),var(--dg,#888))}
.bm-dgem:not(.hit) img{opacity:.5;filter:grayscale(.4) drop-shadow(0 4px 7px rgba(0,0,0,.5))}
/* Whiter bet-modal text — the default --muted/--faint greys read too dim here.
Lift the grey copy toward near-white (keeps a touch of hierarchy). */
.bm-by,.bm-by b,.bm-id,.bm-idchip{color:rgba(244,246,251,.94)!important}
.bm-stats small,.bm-facts small,.bm-fact small,.bm-seed small{color:rgba(244,246,251,.85)!important}
.bm-pf-hint,.bm-pf-note{color:rgba(244,246,251,.82)!important}
.bm-copy{color:rgba(244,246,251,.72)!important}
/* Engine-game win popup (diamonds >=2x) — tap to open the bet modal */
.lb-gamewin{position:fixed;left:50%;top:23%;transform:translate(-50%,-8px);z-index:400;opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.lb-gamewin.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.lb-gamewin-card{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:168px;padding:16px 28px;border-radius:8px;background:var(--surface-2);border:1.5px solid var(--gold,#FFC83D);cursor:pointer;font-family:var(--f-disp,'Urbanist'),system-ui,sans-serif;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.lb-gamewin-card:active{transform:scale(.96);transition:transform 70ms cubic-bezier(.4,0,1,1)}
.lb-gamewin-x{font-size:34px;font-weight:700;color:var(--gold,#FFC83D);font-variant-numeric:tabular-nums;line-height:1}
.lb-gamewin-amt{font-size:15px;font-weight:700;color:#f4f6fb;font-variant-numeric:tabular-nums}
.lb-gamewin-cta{font-size:11px;font-weight:700;color:var(--muted,rgba(244,246,251,.62));text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.bm-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bm-fact small{display:block;color:var(--faint);font-size:10.5px;font-weight:800;text-transform:capitalize;margin-bottom:2px}
.bm-fact b{font-family:var(--f-disp);font-weight:700;font-size:13.5px;word-break:break-word}
.bm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.bm-actions .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.bm-actions .btn:only-child{grid-column:span 2}
.bm-actions .bi svg,.bm-actions svg{width:16px;height:16px;fill:currentColor}
.bm-pf{padding:0;overflow:hidden}
.bm-pf-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 16px;font-family:var(--f-disp);font-weight:700;font-size:15px;color:#fff;cursor:pointer;min-height:48px}
.bm-pf .bm-chev{width:18px;height:18px;transition:transform .22s ease}
.bm-pf.open .bm-chev{transform:rotate(180deg)}
.bm-pf-body{display:none;padding:2px 16px 16px;flex-direction:column;gap:10px}
.bm-pf.open .bm-pf-body{display:flex}
.bm-seed small{display:block;color:var(--faint);font-size:11px;font-weight:800;margin-bottom:4px}
.bm-seed span{display:flex;align-items:center;gap:6px}
.bm-seed code{flex:1;min-width:0;display:block;padding:10px 12px;border-radius:6px;background:var(--surface-3);border:1px solid var(--line);font-size:12px;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-seed.revealed code{border-color:color-mix(in srgb,var(--success,#37f5a0) 45%,var(--line));color:var(--success)}
.bm-pf-hint,.bm-pf-note{color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.5;margin:2px 0 0}
.bm-verify{margin-top:2px}
.bm-verify-out{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:6px;background:var(--surface-3);border:1px solid var(--line)}
.bm-verify-out.ok{border-color:color-mix(in srgb,var(--success,#37f5a0) 40%,var(--line))}
.bm-verify-out.bad{border-color:rgba(255,93,93,.5)}
.bm-check{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.9);line-height:1.4}
.bm-check svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;fill:currentColor}
.bm-check.ok{color:var(--success)}
.bm-check.bad{color:#ff7a7a}
.bm-check.dim{color:var(--faint);font-weight:600;word-break:break-all}
/* -- Account-level Provably Fair / client-seed sheet -- */
#profileSheet.lb-sheet-fairness .sheet-card{width:min(560px,100%);max-width:560px}
.fair-head{align-items:flex-start}
.fair-head>div:first-child{display:grid;gap:1px;min-width:0;flex:1}
.fair-head h3{font-size:20px}
.fair-kicker{display:block;color:var(--faint);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.fair-sheet{display:grid;gap:12px}
.fair-loading,.fair-load-error{padding:18px;color:var(--muted);font-size:13px;font-weight:700}
.fair-load-error{display:grid;gap:10px;border:1px solid color-mix(in srgb,var(--error) 34%,var(--line));background:var(--surface-2)}
.fair-load-error b{color:var(--ink);font-family:var(--f-disp);font-size:16px}
.fair-load-error p{margin:0;color:var(--muted)}
.fair-load-error .lb-action{justify-self:start}
.fair-section{display:grid;gap:10px;padding:16px}
.fair-section h4{margin:-5px 0 0;color:var(--ink);font-family:var(--f-disp);font-size:17px;font-weight:800}
.fair-section>p{margin:0;color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.5}
.fair-value{min-width:0}
.fair-value+.fair-value{margin-top:1px}
.fair-value code{min-height:42px;display:flex;align-items:center}
.fair-seed-form{display:grid;gap:6px;margin-top:2px}
.fair-seed-form>label{color:var(--ink);font-size:11px;font-weight:800}
.fair-seed-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:stretch}
.fair-seed-actions input{width:100%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:6px;background:var(--control-deep);color:var(--ink);padding:10px 12px;font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;outline:0}
.fair-seed-actions input:focus{border-color:var(--focus);background:var(--surface-hi);box-shadow:none}
.fair-seed-actions input[aria-invalid="true"]{background:color-mix(in srgb,var(--error) 11%,var(--control-deep))}
.fair-seed-actions input:disabled{opacity:.62;cursor:wait}
.fair-seed-actions .lb-action{min-height:44px;white-space:nowrap}
.fair-seed-form>small{color:var(--faint);font-size:11px;font-weight:600}
.fair-field-error,.fair-submit-error{min-height:16px;color:var(--error)!important;font-size:11.5px!important;font-weight:700!important}
.fair-submit-error:empty{display:none}
.fair-return-note{padding:9px 11px;border:0;border-radius:6px;background:color-mix(in srgb,var(--success) 8%,var(--control-deep))}
.fair-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fair-section-head>div{display:grid;gap:1px}
.fair-section-head>svg{width:20px;height:20px;fill:currentColor;color:var(--success)}
.fair-revealed{border:0}
.fair-code{max-width:100%;margin:0;padding:11px 12px;border-radius:6px;background:var(--control-deep);border:0;overflow:auto;color:var(--ink);font:600 11.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.fair-history{width:100%;min-height:44px}
/* A deliberately plain Provably Fair surface. Seed state is shown as regular
labelled fields, not a stack of dashboard cards or disclosure widgets. */
#profileSheet.lb-sheet-fairness{--fair-shell:var(--rail);--fair-field:var(--surface-2);--fair-field-hi:var(--surface-hi);--fair-line:var(--line);--fair-muted:var(--faint);align-items:center;padding:18px}
#profileSheet.lb-sheet-fairness .sheet-card{width:min(620px,calc(100% - 36px));max-width:620px;max-height:min(720px,calc(100dvh - 72px));display:flex;flex-direction:column;padding:0;border:0;border-radius:10px;background:var(--fair-shell);box-shadow:0 24px 64px rgba(0,0,0,.52);outline:0;overflow:hidden;opacity:0;transform:translateY(14px) scale(.988);transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1)}
#profileSheet.lb-sheet-fairness .sheet-card:focus{outline:0}
#profileSheet.lb-sheet-fairness.open .sheet-card{opacity:1;transform:none}
#profileSheet.lb-sheet-fairness .fair-head{position:relative;flex:0 0 auto;display:grid;place-items:center;min-height:68px;margin:0;padding:18px 60px 10px;background:var(--fair-shell)}
#profileSheet.lb-sheet-fairness .fair-head h3{margin:0;text-align:center;font-size:24px;font-weight:800;line-height:1.15}
#profileSheet.lb-sheet-fairness .fair-head .sheet-x{position:absolute;right:14px;top:14px;background:transparent;border:0;outline:0;box-shadow:none}
#profileSheet.lb-sheet-fairness .fair-head .sheet-x:hover{background:var(--surface-hi);color:var(--ink);outline:0;box-shadow:none}
#profileSheet.lb-sheet-fairness .fair-head .sheet-x:focus-visible{background:transparent;color:var(--ink);outline:2px solid var(--focus);outline-offset:1px;box-shadow:none}
.fair-tabs{position:relative;flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;margin:0 34px;border:0;border-bottom:1px solid var(--fair-line);background:transparent}
.fair-tabs button{position:relative;min-height:46px;border:0;border-radius:0;background:transparent;color:var(--muted);font:600 15px var(--f-disp);cursor:pointer;transition:background .15s,color .15s}
.fair-tabs button::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:3px;border-radius:3px 3px 0 0;background:transparent}
.fair-tabs button.active{background:transparent;color:var(--selection-ink);font-weight:800}
.fair-tabs button.active::after{background:var(--control-border)}
.fair-tabs button:hover{background:var(--surface-2);color:var(--ink)}
.fair-tabs button:focus-visible{background:transparent;outline:2px solid var(--focus);outline-offset:-3px}
#profileSheet.lb-sheet-fairness .fair-sheet{flex:1 1 auto;min-height:0;display:grid;align-content:start;gap:22px;padding:22px 34px 30px;overflow-y:auto;scrollbar-gutter:stable}
.fair-seed-fields{display:grid;gap:14px}
#profileSheet.lb-sheet-fairness .fair-active-pair{padding:0;background:transparent}
#profileSheet.lb-sheet-fairness .fair-value{margin:0;min-width:0}
#profileSheet.lb-sheet-fairness .fair-value>small{display:block;margin:0 0 6px;color:var(--ink);font-size:13px;font-weight:700;line-height:1.25}
#profileSheet.lb-sheet-fairness .fair-value>span{display:flex;align-items:center;min-height:50px;padding:0 6px 0 13px;border:1px solid var(--fair-line);border-radius:7px;background:var(--fair-shell);transition:border-color .15s,background .15s}
#profileSheet.lb-sheet-fairness .fair-value>span:focus-within{border-color:var(--focus);background:var(--fair-field)}
#profileSheet.lb-sheet-fairness .fair-value code{flex:1;min-width:0;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--fair-muted);font:500 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#profileSheet.lb-sheet-fairness .fair-value .bm-copy{width:44px;height:44px;min-width:44px;min-height:44px;margin:0;border:0;border-radius:6px;background:transparent;color:var(--ink)}
#profileSheet.lb-sheet-fairness .fair-value .bm-copy:hover{background:var(--fair-field-hi);color:var(--ink)}
#profileSheet.lb-sheet-fairness .fair-value .bm-copy:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.fair-rotate-pair,.fair-previous-pair{display:grid;gap:12px}
.fair-rotate-pair h4,.fair-previous-pair h4{margin:0;color:var(--ink);font:800 22px/1.15 var(--f-disp)}
#profileSheet.lb-sheet-fairness .fair-seed-form{display:grid;gap:6px;margin:0}
#profileSheet.lb-sheet-fairness .fair-seed-form>label{color:var(--ink);font-size:13px;font-weight:700}
#profileSheet.lb-sheet-fairness .fair-seed-actions{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:stretch}
#profileSheet.lb-sheet-fairness .fair-seed-actions input{width:100%;min-width:0;min-height:50px;border:1px solid var(--fair-line);border-radius:7px;background:var(--fair-field);color:var(--ink);padding:10px 13px;font:500 13px ui-monospace,SFMono-Regular,Menlo,monospace;outline:0}
#profileSheet.lb-sheet-fairness .fair-seed-actions input:focus{border-color:var(--focus);background:var(--fair-field-hi);box-shadow:none}
#profileSheet.lb-sheet-fairness .fair-seed-actions input[aria-invalid="true"]{border-color:var(--error);background:color-mix(in srgb,var(--error) 8%,var(--fair-field))}
#profileSheet.lb-sheet-fairness .fair-seed-actions input:disabled{opacity:.62;cursor:wait}
#profileSheet.lb-sheet-fairness .fair-seed-actions .lb-action{min-height:50px;border-radius:7px;white-space:nowrap;font-size:14px}
.fair-field-error,.fair-submit-error{min-height:16px;color:var(--error)!important;font-size:11.5px!important;font-weight:700!important}
.fair-field-error:empty,.fair-submit-error:empty{display:none}
#profileSheet.lb-sheet-fairness .fair-return-note{margin:0;padding:0;border:0;background:transparent;color:var(--fair-muted);font-size:12px}
.fair-sheet-verify .fair-verify-form{display:grid;gap:16px;padding:0;border:0;background:transparent}
.fair-verify-form>label,.fair-verify-options>label,.fair-commitment label{display:grid;gap:8px;color:var(--ink);font-size:13px;font-weight:700}
.fair-verify-form input,.fair-verify-form select,.fair-verify-options input,.fair-verify-options select,.fair-commitment input{width:100%;min-width:0;min-height:48px;border:1px solid var(--fair-line);border-radius:7px;background:var(--fair-field);color:var(--ink);padding:10px 12px;font:600 13px var(--f-disp);outline:0}
.fair-verify-form input:not([type=number]),.fair-commitment input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fair-verify-form input:focus,.fair-verify-form select:focus,.fair-verify-options input:focus,.fair-verify-options select:focus,.fair-commitment input:focus{border-color:var(--focus);background:var(--fair-field-hi);box-shadow:none}
.fair-verify-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fair-verify-options:has(>label:only-child){grid-template-columns:1fr}
.fair-commitment{border:1px solid var(--fair-line);border-radius:8px;background:var(--fair-field)}
.fair-commitment summary{padding:14px;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}
.fair-commitment[open] summary{border-bottom:1px solid var(--fair-line)}
.fair-commitment label{padding:14px}
.fair-commitment label span{color:var(--fair-muted);font-weight:600}
.fair-preview{min-height:177px;border:1px solid var(--fair-line);border-radius:8px;background:var(--fair-field);box-shadow:none;overflow:hidden}
.fair-dice-stage{position:relative;min-height:136px;padding:69px 26px 19px}
.fair-dice-badge{position:absolute;top:21px;left:50%;min-width:48px;min-height:39px;display:grid;place-items:center;transform:translateX(-50%);padding:6px 8px;border:3px solid var(--error);border-radius:6px;background:var(--fair-field);color:var(--ink);font:800 12px var(--f-disp);transition:left .48s cubic-bezier(.2,.8,.2,1)}
.fair-dice-track{position:relative;height:34px;border:8px solid var(--line-2);border-radius:8px;background:var(--control-deep);box-shadow:inset 0 0 0 1px var(--line)}
.fair-dice-loss,.fair-dice-win{position:absolute;top:50%;height:5px;transform:translateY(-50%);transition:width .48s cubic-bezier(.2,.8,.2,1),left .48s cubic-bezier(.2,.8,.2,1)}
.fair-dice-loss{left:0;width:50%;background:var(--error);border-radius:5px 0 0 5px}
.fair-dice-win{left:50%;right:0;background:var(--success);border-radius:0 5px 5px 0}
.fair-dice-thumb{position:absolute;top:50%;left:50%;width:15px;height:22px;transform:translate(-50%,-50%);border-radius:5px;background:var(--action-primary);box-shadow:0 0 0 2px rgba(0,0,0,.22);transition:left .48s cubic-bezier(.2,.8,.2,1)}
.fair-dice-labels{display:flex;justify-content:space-between;padding:8px 3px 0;color:var(--ink);font-size:10.5px;font-weight:700}
.fair-result-stage{min-height:136px;display:grid;place-content:center;gap:8px;padding:26px;text-align:center}
.fair-result-stage small{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.fair-result-stage strong{max-width:420px;color:var(--ink);font:800 clamp(24px,5vw,38px)/1.15 var(--f-disp);overflow-wrap:anywhere}
.fair-preview-status{min-height:40px;display:flex;align-items:center;padding:9px 12px;border:0;border-top:1px solid var(--fair-line);background:var(--fair-shell);color:var(--fair-muted);font-size:11.5px;font-weight:600;line-height:1.35}
.fair-preview-status.ok{color:var(--success)}
.fair-preview-status.bad{color:var(--error)}
#profileSheet.lb-sheet-fairness .fair-history{justify-self:start;width:auto;min-height:34px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--fair-muted);text-decoration:underline;text-underline-offset:3px}
#profileSheet.lb-sheet-fairness .fair-history:hover{background:transparent;color:var(--ink);outline:0;box-shadow:none}
#profileSheet.lb-sheet-fairness .fair-history:focus-visible{background:transparent;color:var(--ink);outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}
#profileSheet.lb-sheet-fairness .fair-load-fields,#profileSheet.lb-sheet-fairness .fair-load-rotate{display:grid;gap:14px}
#profileSheet.lb-sheet-fairness .fair-load-field{height:50px;border-radius:7px}
#profileSheet.lb-sheet-fairness .fair-load-button{height:50px;border-radius:7px}
@media(max-width:767px){
#profileSheet.lb-sheet-fairness{align-items:flex-end;padding:0}
#profileSheet.lb-sheet-fairness .sheet-card{width:100%;max-width:none;max-height:90dvh;border-radius:10px 10px 0 0;transform:translateY(calc(100% + 40px));opacity:1}
#profileSheet.lb-sheet-fairness.open .sheet-card{transform:none}
#profileSheet.lb-sheet-fairness .fair-head{min-height:64px;padding:18px 54px 10px}
#profileSheet.lb-sheet-fairness .fair-head h3{font-size:21px}
#profileSheet.lb-sheet-fairness .fair-head .sheet-x{right:12px;top:12px}
.fair-tabs{margin:0 18px}
.fair-tabs button{min-height:48px;font-size:14px}
#profileSheet.lb-sheet-fairness .fair-sheet{gap:20px;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));scrollbar-gutter:auto}
#profileSheet.lb-sheet-fairness .fair-seed-actions{grid-template-columns:1fr}
#profileSheet.lb-sheet-fairness .fair-seed-actions .lb-action{width:100%;min-height:50px}
#profileSheet.lb-sheet-fairness .fair-value>span{min-height:50px;padding-left:12px}
.fair-rotate-pair h4,.fair-previous-pair h4{font-size:20px}
.fair-verify-options{grid-template-columns:1fr}
.fair-preview{min-height:166px}
.fair-dice-stage{min-height:126px;padding-inline:18px}
.fair-result-stage{min-height:126px;padding:20px 16px}
}
/* -- Shared bets in chat -- */
.msg.shared-bet .sb-label{color:var(--purple-2,#a78bfa);font-weight:500}
.sb-chip{display:flex;align-items:center;gap:8px;width:100%;margin-top:6px;padding:8px;border-radius:6px;background:var(--surface-2);border:0;cursor:pointer;min-height:38px;transition:background .16s,transform .12s;text-align:left}
.sb-chip:hover{background:var(--surface-hi);border-color:var(--line-2)}
.sb-chip:active{transform:scale(.985)}
.sb-chip[disabled]{opacity:.55;cursor:default}
.sb-game{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:1;font-family:var(--f-disp);font-weight:500;font-size:14px;color:#fff}
.sb-game .sb-gico{width:16px;height:16px;object-fit:contain;filter:brightness(0) invert(1);flex:0 0 auto}
/* Game marks are stroke glyphs now. The brightness(0) invert(1) flatten and the
thumbnail rounding were there to tame full-colour .webp art and would fight
line work, so the svg branch opts out of both. One `color` restyles them all;
the four games still on .webp keep the old treatment above. */
/* Feed/transaction game marks: same rule as the sidebar — a glyph sits at the
row's ink, not above it. These were #fff at .92 next to 66%-ink text. */
/* Solid hex, never an alpha. A translucent stroke double-counts wherever two
round-capped paths cross, so one glyph came out part grey part white. */
svg.sb-gico,svg.lbx-gico,svg.tx-gico,svg.bm-gico{filter:none;border-radius:0;background:none;color:var(--chrome-icon);opacity:1;overflow:visible}
.sb-game b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-mult{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-weight:500;font-size:14px;color:#fff;flex:0 0 auto}
.sb-mult svg{width:14px;height:14px}
.sb-pay{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-weight:500;font-size:14px;color:var(--muted);flex:0 0 auto}
.sb-pay.up{color:var(--success)}
.sb-pay .bal-chip{width:15px;height:15px}
.sb-chev{width:10px;height:10px;color:var(--faint);flex:0 0 auto}
.sb-cta{margin-left:auto;flex:0 0 auto;font:800 11px var(--f-disp,Urbanist);letter-spacing:.04em;text-transform:uppercase;color:var(--action-primary-ink);background:var(--action-primary,#F45DC4);border-radius:6px;padding:4px 9px}
.shared-battle .sb-pay{margin-left:0}
.msg.shared-bet .msg-body{overflow:visible;display:block;-webkit-line-clamp:unset}
/* -- clickable live-bet + transactions bet ids -- */
.lbx-row.has-bet .lbx-mult,.lbx-row.has-bet .lbx-pay{cursor:pointer}
.lbx-row.has-bet .lbx-mult:hover b,.lbx-row.has-bet .lbx-pay:hover{text-decoration:underline;text-underline-offset:3px}
button.tx-id.linked{cursor:pointer;background:none;border:0;padding:0;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:5px}
button.tx-id.linked:hover b{text-decoration:underline;text-underline-offset:3px}
/* staged bet share above the chat composer */
.share-pending{display:flex;align-items:center;gap:9px;margin:8px 0 0;padding:9px 11px;border-radius:8px;background:var(--surface);border:1px solid color-mix(in srgb,#c84cff 40%,var(--line));min-height:44px;animation:upIn .24s ease}
.share-pending .sp-label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto}
.share-pending .sp-label svg{width:13px;height:13px;fill:currentColor}
.share-pending .sb-game{flex:1}
.share-pending .sp-x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--muted);font-size:11px;cursor:pointer;flex:0 0 auto}
/* -- bet modal: game-specific snapshots (reference: Shuffle bet modals) -- */
.bm-gico{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1);margin-right:10px;flex:0 0 auto}
.bm-big{padding:26px 16px;text-align:center;font-family:var(--f-disp);font-weight:800;font-size:40px;letter-spacing:-.01em;color:#fff}
/* Hilo board: the card chain as the game draws it — start card, then each
called card with the multiplier it paid. Scrolls sideways rather than
shrinking, because a long chain would otherwise squash the cards to nothing. */
.bm-snapshot.bm-hilo{padding:14px 12px;overflow-x:auto;overflow-y:hidden}
.bm-hilo-row{display:flex;align-items:flex-start;gap:6px;min-width:min-content}
.bm-hilo-card{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:62px}
.bm-hilo-card img{display:block;width:62px;height:93px;border-radius:5px;background:#fff}
.bm-hilo-tag{font-style:normal;font-size:9.5px;font-weight:800;line-height:1;padding:4px 6px;
border-radius:5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bm-hilo-tag.win{background:#22C55E;color:#06140b}
.bm-hilo-tag.start{background:var(--panel2);border:1px solid var(--line);color:var(--dim)}
.bm-hilo-tag.skip{background:var(--panel2);border:1px solid var(--line);color:var(--faint)}
.bm-hilo-tag.bust{background:#EF4444;color:#fff}
.bm-hilo-dir{flex:0 0 auto;align-self:center;margin-top:-14px;width:18px;height:18px;border-radius:5px;
display:grid;place-items:center;font-size:9px;line-height:1;background:var(--panel2);border:1px solid var(--line)}
.bm-hilo-dir.up{color:#22C55E;border-color:rgba(34,197,94,.5)}
.bm-hilo-dir.down{color:#EF4444;border-color:rgba(239,68,68,.5)}
.bm-hilo-dir.flat{color:var(--faint)}
.bm-snapshot.bm-plinko{display:flex;align-items:center;justify-content:center;gap:14px;padding:22px 16px}
.bm-plinko-ball{display:block;width:48px;height:48px;flex:0 0 auto}
.bm-plinko-ball svg{display:block;width:100%;height:100%}
.bm-plinko-mult{font-family:var(--f-disp);font-weight:800;font-size:40px;letter-spacing:-.01em;color:#fff}
.bm-plinko-mult.up{color:var(--success)}
.bm-plinko-mult.down{color:#ff6b6b}
.bm-big.up{color:var(--success)}
.bm-big.down{color:#ff6b6b}
.bm-field{margin:0 0 12px}
.bm-field small{display:block;color:rgba(255,255,255,.85);font-size:12.5px;font-weight:700;margin:0 0 6px}
.bm-field-val{padding:13px 14px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-family:var(--f-disp);font-weight:700;font-size:14px;color:#fff}
/* blackjack / baccarat table */
.bm-table{display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 16px}
.bm-hand{display:flex;flex-direction:column;align-items:center;gap:10px}
.bm-hand-cards{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bm-total{min-width:40px;text-align:center;padding:4px 12px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line);font-family:var(--f-disp);font-weight:800;font-size:13px;color:#fff}
.bm-total.win{background:color-mix(in srgb,var(--success,#37f5a0) 22%,var(--surface-3));border-color:color-mix(in srgb,var(--success,#37f5a0) 55%,var(--line));color:var(--success)}
.bm-card{width:64px;height:88px;border-radius:6px;background:#fff;color:#202329;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-family:var(--f-disp);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.bm-card b{font-weight:800;font-size:26px;line-height:1}
.bm-card i{font-style:normal;font-size:22px;line-height:1.15}
.bm-card.red{color:#e01e37}
.bm-card.win{outline:2.5px solid var(--success,#37f5a0);outline-offset:-1px;box-shadow:0 4px 14px rgba(55,245,160,.28)}
@media(max-width:420px){.bm-card{width:52px;height:72px}.bm-card b{font-size:21px}.bm-card i{font-size:18px}}
/* blitz 13x4 card grid */
.bm-blitz{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;padding:2px}
.bm-mini-card{aspect-ratio:5/7;border-radius:4.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--line);color:rgba(255,255,255,.28);font-family:var(--f-disp)}
.bm-mini-card b{font-weight:800;font-size:10.5px;line-height:1}
.bm-mini-card i{font-style:normal;font-size:9px;line-height:1.2}
.bm-mini-card.red{color:rgba(224,30,55,.42)}
.bm-mini-card.hit{background:#fff;color:#202329;border-color:var(--success,#37f5a0);outline:1.5px solid var(--success,#37f5a0);outline-offset:-1px}
.bm-mini-card.hit.red{color:#e01e37}
/* keno 8x5 board */
.bm-keno-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.bm-keno{position:relative;aspect-ratio:1;border-radius:6px;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--line);font-family:var(--f-disp);font-weight:800;font-size:13px;color:rgba(255,255,255,.75)}
.bm-keno.pick{background:var(--selection-fill);border-color:var(--control-border);color:var(--selection-ink)}
.bm-keno.drawn{color:#ff5d6c;background:#111117;border-color:rgba(255,93,108,.35)}
.bm-keno.hit{background:#17111f;border-color:#b86cff;box-shadow:0 0 10px rgba(184,108,255,.4),0 0 18px rgba(184,108,255,.18)}
/* roulette pocket */
.bm-roulette{display:grid;place-items:center;padding:26px 16px}
.bm-pocket{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:28px;color:#fff;border:3px solid rgba(255,255,255,.25)}
.bm-pocket.red{background:#e5002c}
.bm-pocket.dark{background:#202329}
.bm-pocket.green{background:#0f9d58}
/* -- rewards page 2026-07 polish: hero art, calm spacing, countdown locks -- */
.rewards-page .sect-head{margin-top:26px}
.rewards-page .card,.rewards-page .rake,.rewards-page .lead{clip-path:none}
.rewards-page .rake-grid{gap:14px}
/* -- gift-button quick-claim dock (chat width) --
.rake-grid goes 4-up at >=700px VIEWPORT, which a 360px dock can never honour —
media queries measure the window, not this container. These are 2 classes deep so
they outrank those width rules wherever they sit in the file. */
.rewards-quick{padding:0 14px 20px}
.desktop-panel .screen-inner.rewards-quick{padding-left:16px;padding-right:16px}
.desktop-panel[data-screen="rewardsQuick"] .rewards-quick{padding-bottom:88px}
.rewards-quick .sect-head{margin-top:16px}
.rewards-quick .sect-head h2{font-size:15px}
.rewards-quick .rake-grid{grid-template-columns:1fr 1fr;gap:10px}
.rewards-quick .rake{padding:12px 8px}
.rewards-quick .rake .rk-ico{width:54px;height:54px;margin:0 auto 7px}
.rewards-quick .rake .rk-ico img{width:54px;height:54px}
.rewards-quick .rake .rk-name{font-size:12px;margin-bottom:8px;line-height:1.25}
.rewards-quick .rk-claim{height:34px;font-size:12px;gap:4px}
.rewards-quick .rk-claim .bal-chip{width:15px;height:15px}
.rewards-quick .rk-lock,.rewards-quick .rk-empty{height:34px;font-size:12px}
/* bonus + free-pack rows are already list-shaped; just tighten them */
.rewards-quick .bonus-row{padding:10px 11px;gap:9px}
.rewards-quick .bonus-meta small{display:none}
.rewards-quick .bonus-claim{width:auto}
.rewards-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:0;padding:0;overflow:hidden;background:var(--surface-2);border-color:transparent;box-shadow:none}
.rewards-hero .rh-info{padding:22px 20px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.rewards-hero .vip-link{margin-top:6px;width:max-content;padding:0 16px;min-height:38px;display:inline-flex;align-items:center;gap:7px}
.rewards-hero .rh-art{position:relative;min-height:170px}
.rewards-hero .rh-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.rewards-hero .rh-art::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 72%,transparent) 38%,color-mix(in srgb,var(--surface-2) 12%,transparent) 100%)}
@media(max-width:640px){
.rewards-hero{grid-template-columns:1fr}
.rewards-hero .rh-art{min-height:164px;order:-1}
.rewards-hero .rh-art img{object-position:center 30%}
.rewards-hero .rh-art::before{background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 6%,transparent) 25%,var(--surface-2) 100%)}
}
.rk-lock .rk-lock-ic svg{width:16px;height:16px}
.rk-timer-box{gap:8px}
.rk-timer-box b{font:inherit;font-size:13px;color:rgba(255,255,255,.85);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.rake .rk-name{margin-bottom:12px}
/* -- free rank packs (bottom of Rewards): one free pack per rank reached.
Same surface tokens as .rake / .bonus-card. No glow, no gradients. -- */
.fpk-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}
.fpk-head .sect-head{margin:0;min-width:0}
.fpk-head .sect-head h2{margin:0}
.fpk-battle-btn{flex:0 0 auto;padding:0 15px;gap:8px}
.fpk-battle-btn b{font:inherit;font-variant-numeric:tabular-nums}
.fpk-battle-btn>svg{width:18px;height:18px;flex:0 0 auto}
.fpk-battle-ic{width:18px;height:18px;flex:0 0 auto}
.fpk-sub{color:var(--muted);font-size:12.5px;line-height:1.45;margin:0 4px 12px}
.fpk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px}
.fpk{min-width:0}
.fpk-btn{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border-radius:var(--r);background:transparent;border:0;outline:0;box-shadow:none;color:inherit;text-align:center}
.fpk-art{position:relative;width:100%;aspect-ratio:3/4;display:grid;place-items:center}
.fpk-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.5))}
.fpk-tag{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;overflow:hidden;padding:0 8px}
.fpk-tag svg{width:12px;height:12px;flex:0 0 auto;fill:currentColor}
.fpk-tag.go{background:var(--action-primary);color:var(--action-primary-ink)}
.fpk-tag.done{background:var(--action-secondary);border:0;color:var(--action-secondary-ink)}
.fpk-tag.done b{font:inherit;font-variant-numeric:tabular-nums;color:inherit}
.fpk-tag.wait{background:rgba(255,255,255,.05);border:0;color:var(--faint)}
.fpk-tag.lock{width:auto;align-self:center;padding:4px 2px;background:transparent;border:0;color:var(--chrome-text);font-weight:700}
.fpk-tag.lock svg{width:14px;height:14px;fill:currentColor}
.fpk.is-ready .fpk-btn{border:0}
.fpk.is-locked .fpk-art img{filter:drop-shadow(0 5px 9px rgba(0,0,0,.5));opacity:1}
.fpk.is-pending .fpk-art img{filter:drop-shadow(0 5px 9px rgba(0,0,0,.5)) grayscale(.9);opacity:.55}
.fpk.is-claimed .fpk-art img{opacity:.7}
@media(min-width:700px){.fpk-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}}
@media(max-width:620px){.fpk-head{align-items:stretch;flex-direction:column}.fpk-battle-btn{width:100%}}
/* bet id chip (link icon, whole chip copies) */
/* bet id: plain grey text + link glyph, purple on hover (whole thing copies) */
.bm-idchip{display:inline-flex;align-items:center;gap:7px;margin-left:4px;padding:2px 4px;background:none;border:none;color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:17px;cursor:pointer;vertical-align:-1px;transition:color .16s}
.bm-idchip svg{width:15px;height:15px;flex:0 0 auto}
.bm-idchip:hover{color:var(--purple-2,#a78bfa)}
/* centered modal header, close pinned right */
.bm-head{position:relative;justify-content:center;margin-bottom:16px;padding:4px 44px 0}
.bm-head h3{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:19px}
.bm-head .sheet-x{position:absolute;right:0;top:0}
/* keno gem now inline svg */
.bm-keno.hit svg{width:74%;height:74%;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
/* -- header line alignment: topbar / sidebar / chat dock / workspace panel
share one baseline --
Desktop header token is 80px; the sidebar header sits inside 14px top padding
so its own height is 80-14. All four border-bottoms land at exactly 80px.
The workspace panel (rewards dock, notifications, wallet, inventory…) is the
same kind of right-hand dock as chat, but its title bar was sized by padding
alone — 55px measured — so its rule stopped 25px short of the topbar's and
the two horizontal lines never met at the panel's left edge. Height comes off
the same token now; the padding keeps only its horizontal half. */
@media(min-width:1024px){
:root{--topbar-h:80px}
.sb-head{height:calc(var(--topbar-h) - 14px);min-height:0;margin-bottom:14px}
.chat-dock .chat-head{height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));min-height:0;margin-bottom:12px}
}
/* 1080, not 1024: below that the workspace panel is not a dock at all — the
inventory drawer at max-width:1079px is a floating inset card whose header
has no topbar edge to meet. */
@media(min-width:1080px){
.desktop-panel-head{height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));min-height:0;
padding-top:0;padding-bottom:0;box-sizing:border-box}
}
/* =====================================================================
CHALLENGES — community challenge cards page
Design target: Shuffle's Challenges page (measured specs below).
Contract: class names are fixed by the JS renderer — style, never rename.
Brand tokens reused from :root — --pink / --purple / --purple-2 /
--surface-2..3 / --surface-hi / --muted / --ink / --line(-2) / --focus /
--r-sm / --r-pill / --f-disp / --f-body / --botnav-h. No new brand colors.
===================================================================== */
/* ---- one shared segmented control, matching the rest of the site ---- */
.chal-tabs{
display:flex;gap:4px;align-items:center;width:max-content;max-width:100%;
margin:2px 0 16px;padding:6px;
border-radius:6px;background:var(--surface-2);
overflow-x:auto;overscroll-behavior-inline:contain;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.chal-tabs::-webkit-scrollbar{display:none}
.chal-tab{
flex:0 0 auto;
display:inline-flex;align-items:center;justify-content:center;
min-height:36px;
padding:0 16px;
border-radius:6px;
font-family:var(--f-disp);font-size:14px;font-weight:700;line-height:1;
white-space:nowrap;
color:var(--muted);
background:transparent;
border:0;
transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.chal-tab:hover{color:var(--ink);background:var(--surface-hi)}
.chal-tab.on{
color:#fff;
background:var(--surface-active,#343843);
}
.chal-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* ---- centered empty / loading / error message ---- */
.chal-status{
grid-column:1/-1; /* span the whole grid if nested */
min-height:160px;
display:grid;place-items:center;
text-align:center;
padding:32px 16px;
color:var(--muted);
font-weight:700;
}
/* ---- responsive card grid ----------------------------------------------
Mobile-first: 2 cols on phones. Steps mirror the file's EXISTING
breakpoints (see .game-grid / :root --maxw: 680 → 920 → 1280) so the page
grows in lockstep with the rest of the lobby rather than inventing new
stops. Bottom padding lets the last row clear the fixed mobile bottom nav
(~62px, --botnav-h) + safe-area, matching the pattern used site-wide. */
.chal-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:4px;
padding-bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px) + 12px);
}
@media(min-width:680px){ .chal-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:920px){ .chal-grid{grid-template-columns:repeat(4,1fr)} }
@media(min-width:1280px){
/* 6-up on wide desktop, capped so cards stay ~200px */
.chal-grid{grid-template-columns:repeat(6,minmax(0,200px));justify-content:start}
}
/* ---- the card (the whole card is a link/button) ---- */
.chal-card{
display:flex;flex-direction:column;
text-align:left;
border-radius:8px; /* measured: 8px (== --r-sm) */
overflow:hidden;
background:var(--surface-2,#202329);
border:0;
box-shadow:none;
cursor:pointer;
transition:background-color .18s ease;
}
.chal-card:hover{
transform:none;
background:var(--surface-hi,#2A2E38);
}
.chal-card:active{transform:none!important}
.chal-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* ---- art (full-bleed image area, top of card) ---- */
.chal-art{
position:relative;display:block;flex:0 0 auto;width:100%;overflow:hidden;
aspect-ratio:3/4;
background:var(--surface-hi); /* placeholder while img loads */
}
.chal-art img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
/* ---- footer content ---- */
.chal-foot{
display:grid;grid-template-rows:60px 40px 40px;gap:8px;
padding:16px; /* measured: 16px */
}
/* condition line — up to 2 lines, no truncation */
.chal-cond{
margin:0 0 2px;
height:60px;
font-family:var(--f-body);
font-size:14px;font-weight:500;line-height:1.35;
color:#fff;
overflow-wrap:anywhere;
}
/* meta rows (Reward, Creator): stacked label + value */
.chal-meta{
display:flex;flex-direction:column;gap:2px;min-height:40px;
justify-content:flex-start;
}
.chal-meta small{
font-family:var(--f-body);
font-size:12px;font-weight:500;line-height:1.2;
color:rgb(155,165,180); /* muted grey label */
}
.chal-meta b{
font-family:var(--f-body);
font-size:14px;font-weight:500;line-height:1.2;
color:#fff;
}
/* reward value: chip icon + number on one line */
.chal-reward{
display:inline-flex;align-items:center;gap:6px;
}
.chal-reward .bal-chip.lucky.mini{
width:16px;height:16px;flex:0 0 auto;
}
/* completed block (finished challenges only): centered label + winner */
.chal-completed{
display:flex;flex-direction:column;align-items:center;gap:3px;
padding-top:2px;
text-align:center;
}
.chal-completed small{
font-family:var(--f-body);
font-size:12px;font-weight:500;line-height:1.2;
color:rgb(155,165,180); /* muted grey */
}
.chal-winner{
font-family:var(--f-body);
font-size:14px;font-weight:500;line-height:1.2;
color:#fff;
}
/* lock icon before "Hidden" winner names */
.chal-winlock{
display:inline-flex;align-items:center;
margin-right:4px;
color:var(--muted);
vertical-align:-1px;
}
.chal-winlock svg{width:12px;height:12px;display:block}
/* ---- motion / accessibility: honour reduced-motion preference ---- */
@media (prefers-reduced-motion:reduce){
.chal-card,.chal-tab{transition:none}
.chal-card:hover,.chal-card:active{transform:none}
}
/* Challenges sidebar entry: target icon only; this destination never carries
an unread/live notification count. */
/* The resting glyph stays cool blue-grey. Hover/active rows use white icon
ink against their neutral blue-grey surfaces; purple remains action-only. */
.sb-nav button .sb-ico svg{width:22px;height:22px;display:block;margin:auto;color:var(--chrome-icon)}
.sb-nav button.is-active .sb-ico svg,.sb-nav button:hover .sb-ico svg{color:var(--selection-ink)}
/* Keep the Challenges title bar, but let its panel tone carry the shape. */
.challenges-page>.lb-screenhead{border:0}
/* =====================================================================
Notifications drawer — Shuffle-style right slide (2026-07 polish)
Scoped to #notifSheet; other .sheet instances keep the bottom sheet.
Informational-only rows; reward rows route to Rewards on row tap.
===================================================================== */
/* The notification drawer is a side panel, not a modal — the chat dock and the
rewards panel do not frost the page behind them, so neither does this. The
scrim stays (it is what closes the drawer on an outside tap), just unblurred
and lighter. */
body.lb-sheet-notif .scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,1,10,.42)}
#notifSheet{justify-content:flex-end;align-items:stretch}
#notifSheet .sheet-card{
position:relative;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;
border-radius:0;border:none;border-left:1px solid var(--line-2);
background:linear-gradient(210deg,color-mix(in srgb,var(--purple) 8%,var(--surface-2)),var(--surface-2) 42%);
box-shadow:-28px 0 70px rgba(0,0,0,.6);
display:flex;flex-direction:column;overflow:hidden;
padding:0 16px calc(14px + env(safe-area-inset-bottom,0px));
transform:translateX(102%);transition:transform .3s cubic-bezier(.32,.72,.28,1);
}
#notifSheet.open .sheet-card{transform:none}
#notifSheet .sheet-card::before{content:none}
#notifSheet .sheet-head{flex:0 0 auto;margin:0 -16px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;border-bottom:1px solid var(--line)}
#notifSheet .sheet-x{width:44px;height:44px;min-width:44px;min-height:44px}
#notifSheet #notifList{flex:1;min-height:0;overflow-y:auto;align-content:start;grid-auto-rows:max-content;gap:6px;padding:10px 2px 8px;overscroll-behavior:contain}
#notifSheet .notif-tools{position:sticky;top:0;z-index:2;margin:-10px -2px 4px;padding:10px 2px 8px;
background:linear-gradient(180deg,var(--surface-2) 78%,transparent)}
.notif-hacts{display:inline-flex;align-items:center;gap:2px}
.notif-readall{display:inline-flex;align-items:center;gap:6px;padding:0 12px;margin:0}
.notif-readall svg{width:14px;height:14px;flex:0 0 auto}
.notif-hbtn{display:grid;place-items:center;width:44px;height:44px;border:none;border-radius:var(--r-pill);
background:none;color:var(--muted);cursor:pointer;transition:background .16s,color .16s}
.notif-hbtn svg{width:17px;height:17px;fill:currentColor}
.notif-hbtn:hover{background:rgba(255,255,255,.08);color:var(--ink)}
#notifSheet .notif{gap:12px;align-items:flex-start;min-height:96px;height:auto;max-height:none;padding:16px 14px;border-radius:var(--r-lg);
overflow:visible;background:transparent;border:1px solid transparent;transition:background .16s,border-color .16s,transform .12s}
.notif::before{content:none}
.notif:hover{background:var(--surface-hi);border-color:var(--line)}
.notif.unread{background:color-mix(in srgb,var(--purple) 9%,transparent);
border-color:color-mix(in srgb,var(--purple) 24%,var(--line))}
.notif .ni{width:38px;height:38px;border-radius:6px;margin-top:1px}
.notif .ni svg{width:18px;height:18px}
.notif .ni .ni-rank{width:27px;height:27px}
.notif-body{display:flex;flex-direction:column;justify-content:flex-start;align-self:auto;gap:3px;overflow:visible}
.notif-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;min-width:0}
.notif-top b{flex:1;min-width:0;margin-bottom:0}
.notif-meta{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;transform:translateY(-1px)}
.notif small{display:block;font-weight:500;white-space:normal;overflow:visible;text-overflow:clip;max-height:none;-webkit-line-clamp:unset}
.notif time{font-size:11px}
.notif-dot{width:7px;height:7px;background:var(--notification,#FFC636)}
.notif-empty{display:grid;justify-items:center;gap:8px;padding:38px 20px;margin-top:10px;
background:var(--surface-2);border-color:transparent;border-style:solid;box-shadow:none}
.notif-empty svg{width:26px;height:26px;fill:var(--faint)}
.notif-empty b{font-family:var(--f-disp);font-weight:700;font-size:14px;color:var(--ink)}
.notif-empty span{font-size:12.5px;font-weight:600;color:var(--muted)}
.notif-retry{padding-inline:16px}
.notif:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.notif-readall:focus-visible,.notif-hbtn:focus-visible,#notifSheet .sheet-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
#notifSheet .sheet-card{transition:none}
.notif,.notif-readall,.notif-hbtn{transition:none}
}
@media(min-width:680px){
#notifSheet .sheet-card{width:min(520px,calc(100vw - 24px))}
}
/* Notification row icons: crypto deposit logos + generic image/svg sizing */
.notif .ni .ni-coin{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.notif .ni:has(.ni-coin){background:rgba(255,255,255,.06);border-color:var(--line)}
.notif .ni svg{width:18px;height:18px}
.notif .ni img:not(.ni-coin):not(.ni-rank){width:22px;height:22px;object-fit:contain}
/* Rewards: separate the promo-code box from the weekly-race leaderboard above it */
.rewards-page .promo-box{margin-top:18px}
/* =====================================================================
DEPOSIT v2 — one clean flow, two cards (2026-07). Brand tokens only.
===================================================================== */
.dep2-wrap{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}
.dep2-card{background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-lg,16px);padding:18px;box-shadow:none}
/* balance strip */
.dep2-bal{display:flex;gap:20px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.dep2-bal-item{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:600}
.dep2-bal-item b{color:var(--ink);font-family:var(--f-disp);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.dep2-bal-item .bal-chip{width:18px;height:18px}
/* amount — the focal point */
.dep2-amount{display:block;margin-bottom:12px}
.dep2-lbl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.dep2-amount-in{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:6px 16px;transition:border-color .18s,box-shadow .18s}
.dep2-amount-in:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 22%,transparent)}
.dep2-amount-in>b{font-family:var(--f-disp);font-weight:800;font-size:26px;color:var(--muted)}
.dep2-amount-in input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-family:var(--f-disp);font-weight:800;font-size:28px;padding:8px 0;font-variant-numeric:tabular-nums}
/* you-receive highlight */
.dep2-get{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:6px;background:linear-gradient(120deg,color-mix(in srgb,var(--pink) 12%,transparent),color-mix(in srgb,var(--purple) 14%,transparent));border:1px solid color-mix(in srgb,var(--purple) 26%,var(--line))}
.dep2-get>span{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.dep2-get b{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-weight:800;font-size:14px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.dep2-get .chip-i{width:16px;height:16px}
.dep2-get-sep{color:var(--muted);margin:0 2px}
.dep2-hint{margin-top:9px;font-size:11.5px;color:var(--faint);font-weight:600}
/* segmented Crypto / Cards & Apps */
.dep2-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:14px}
.dep2-seg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:6px;background:none;border:none;cursor:pointer;color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:13.5px;transition:background .18s,color .18s}
.dep2-seg-btn svg{width:16px;height:16px;fill:currentColor}
.dep2-seg-btn.on{background:var(--selection-fill);color:var(--selection-ink);box-shadow:none}
.dep2-seg-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* coin / method grid */
.dep2-coins{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
@media(max-width:460px){.dep2-coins{grid-template-columns:1fr}}
.dep2-coin{position:relative;display:flex;align-items:center;gap:11px;min-height:56px;padding:10px 12px;border-radius:6px;background:var(--surface);border:1.5px solid var(--line);cursor:pointer;text-align:left;transition:border-color .16s,background .16s,transform .12s}
.dep2-coin:hover{border-color:var(--line-2);background:var(--surface-hi)}
.dep2-coin.sel{border-color:var(--line-2);background:var(--surface-active)}
.dep2-coin:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dep2-coin-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--pc,#8a8a8a) 16%,#080808);overflow:hidden}
.dep2-coin-ic img{width:22px;height:22px;object-fit:contain}
.dep2-coin-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dep2-coin-tx b{font-family:var(--f-disp);font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dep2-coin-tx small{font-size:11px;color:var(--muted);font-weight:600}
.dep2-coin-check{position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--surface-active);opacity:0;transform:scale(.6);transition:opacity .16s,transform .16s}
.dep2-coin-check svg{width:12px;height:12px;fill:#fff}
.dep2-coin.sel .dep2-coin-check{opacity:1;transform:scale(1)}
/* CTA + note + history */
.dep2-cta{min-height:52px;font-family:var(--f-disp);font-weight:800;font-size:15px;background:var(--cta-grad);color:var(--action-primary-ink);box-shadow:var(--action-shadow)}
.dep2-cta:disabled{opacity:.5;filter:grayscale(.25);cursor:not-allowed}
.dep2-cta:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dep2-cta.dep2-cta-card{margin-top:8px;background:transparent!important;border:1px solid var(--line,#2a2a2c);color:var(--txt,#fff);box-shadow:none}
.dep2-note{display:flex;gap:8px;align-items:flex-start;margin:12px 2px 0;font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.5}
.dep2-note-ic{flex:0 0 auto;color:var(--faint)}.dep2-note-ic svg{width:14px;height:14px;fill:currentColor}
.dep2-history{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:14px;padding:0 12px;border-radius:6px;background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:border-color .16s,background .16s}
.dep2-history:hover{border-color:var(--line-2);background:var(--surface-hi)}
.dep2-history:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dep2-hist-ic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:color-mix(in srgb,var(--purple) 15%,transparent);color:var(--purple-2)}
.dep2-hist-ic svg{width:16px;height:16px;fill:currentColor}
.dep2-history>span:not(.dep2-hist-ic):not(.dep2-hist-chev){flex:1;font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--ink)}
.dep2-hist-chev{color:var(--faint);font-size:18px;font-weight:800}
@media(prefers-reduced-motion:reduce){.dep2-qa,.dep2-seg-btn,.dep2-coin,.dep2-coin-check,.dep2-cta,.dep2-history,.dep2-amount-in{transition:none}}
/* =====================================================================
FLAT PASS (2026-07): kill the pink/purple gradients + pill-in-pill.
Shuffle-style: flat cards and plain circular icons.
===================================================================== */
/* deposit: flat cards, flat you-receive */
.dep2-card{background:var(--surface-2)!important}
.dep2-get{background:var(--surface)!important;border:1px solid var(--line)!important}
.dep2-seg-btn.on{background:var(--surface-active)!important}
.dep2-cta{background:var(--action-primary)!important;color:var(--action-primary-ink)!important}
.dep2-cta:hover:not(:disabled){background:var(--action-primary-hover)!important}
.dep2-cta:active:not(:disabled){background:var(--action-primary-active)!important}
/* notifications drawer: flat surface with no coloured edge accent */
#notifSheet .sheet-card{background:var(--rail)!important;border-left:0!important}
/* notif rows: flat cards; unread state is carried by the yellow dot only */
.notif{background:var(--surface-2)!important;border:1px solid var(--line)!important;border-radius:6px}
.notif.unread{background:var(--surface-2)!important;border-color:var(--line)!important}
.notif:hover{background:var(--surface-hi)!important;border-color:var(--line-2)!important}
/* icon: plain flat circle, no gradient tile, no --nc tint */
.notif .ni{background:var(--surface-hi)!important;border:1px solid var(--line)!important;border-radius:50%!important;color:var(--muted)!important;width:40px!important;height:40px!important}
.notif .ni:has(.ni-coin){background:#fff!important;border-color:transparent!important;padding:0}
.notif .ni .ni-coin{width:40px!important;height:40px!important;box-shadow:none}
.dep2-div{height:1px;background:var(--line);margin:16px -18px 16px;opacity:.7}
.dep2-solo .dep2-get{margin-top:12px}
/* =====================================================================
VAULT — balance-dropdown entry + transfer modal (2026-07). Flat/brand.
===================================================================== */
.bp-vault{display:flex;align-items:center;gap:11px;width:100%;margin-top:6px;padding:11px 12px;border:none;border-top:1px solid var(--line);background:none;cursor:pointer;text-align:left;color:inherit;transition:background .16s}
.bp-vault:hover{background:var(--surface-hi)}
.bp-vault:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* Items/Vault use the same native outline glyph language as the shell. The
wrapper exists only for alignment; a second grey tile made the icons look
boxed and added a false surface layer inside the floating menu. */
.bp-vault-ic{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:0;background:transparent;color:var(--chrome-icon)}
.bp-vault:hover .bp-vault-ic{color:var(--ink)}
.bp-vault-ic svg{width:22px;height:22px}
.bp-vault-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.bp-vault-tx b{font-family:var(--f-disp);font-weight:700;font-size:13.5px;color:var(--ink)}
.bp-vault-tx small{font-size:11px;color:var(--muted)}
.bp-vault .bp-amt{font-variant-numeric:tabular-nums}
.bp-vault-chev{display:grid;place-items:center;width:17px;height:17px;color:var(--faint)}
.bp-vault-chev svg{display:block;width:15px;height:15px}
#vaultCard{
border:0;
outline:0;
background:var(--rail);
box-shadow:0 30px 86px -26px rgba(0,0,0,.92)
}
#vaultCard>.sheet-head{margin-bottom:2px}
#vaultCard>.sheet-head .sheet-x{background:transparent;border:0;outline:0;box-shadow:none}
#vaultCard>.sheet-head .sheet-x:hover{background:transparent;color:var(--ink)}
#vaultCard>.sheet-head .sheet-x:focus-visible{background:transparent;color:var(--ink);outline:2px solid var(--focus);outline-offset:1px;box-shadow:none}
body:has(#vaultSheet.open) #scrim.scrim.on{
/* Keep the route visible, but lower it one layer so the borderless sheet
reads as a modal instead of blending into the battle canvas. */
background:rgba(5,9,12,.42);
backdrop-filter:none;
-webkit-backdrop-filter:none
}
.vault-body{padding:0 2px 6px}
.vault-bal{display:grid;grid-template-columns:1fr;margin-bottom:16px}
.vault-bal-box{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:6px;background:var(--surface-2);border:0}
.vault-bal-box.is-vault{background:var(--surface-hi);border:0}
.vault-bal-box small{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.vault-bal-box b{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-family:var(--f-disp);font-weight:800;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.vault-bal-box .bal-chip{width:18px;height:18px}
.vault-lock{display:inline-grid;place-items:center;color:var(--error)}.vault-lock svg{width:17px;height:17px;fill:currentColor}
.vault-info-wrap{position:relative;display:inline-flex;vertical-align:middle;margin-left:3px}
.vault-info{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:help}
.vault-info svg{width:14px;height:14px;display:block}
.vault-info:hover{color:var(--ink)}
.vault-info:focus-visible{color:var(--ink);outline:2px solid var(--focus);outline-offset:1px}
.vault-info-tip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:4;width:250px;padding:9px 11px;border:1px solid var(--line-2);border-radius:6px;background:var(--control-deep);box-shadow:0 12px 28px rgba(0,0,0,.45);color:var(--ink);font-size:11.5px;font-weight:600;line-height:1.45;text-transform:none;letter-spacing:0;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s,transform .14s,visibility .14s;pointer-events:none}
.vault-info-wrap:hover .vault-info-tip,.vault-info:focus-visible+.vault-info-tip{opacity:1;visibility:visible;transform:none}
.vault-dir{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:var(--control-deep);border:0;border-radius:6px;margin-bottom:14px}
.vault-dir button{min-height:40px;border:none;border-radius:8px;background:none;color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:13px;cursor:pointer;transition:background .16s,color .16s}
.vault-dir button.on{background:var(--selection-fill);color:var(--selection-ink)}
.vault-dir button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.vault-amt-lbl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:7px}
.vault-amt-in{display:flex;align-items:center;gap:8px;background:var(--control-deep);border:1px solid var(--control-border);border-radius:6px;padding:4px 6px 4px 14px;transition:border-color .18s,box-shadow .18s}
.vault-amt-in:focus-within{border-color:var(--selection-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--selection-accent) 20%,transparent)}
.vault-amt-in .bal-chip{width:18px;height:18px;flex:0 0 auto}
.vault-amt-in input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-family:var(--f-disp);font-weight:800;font-size:20px;padding:8px 0;font-variant-numeric:tabular-nums}
.vault-max{flex:0 0 auto;min-height:34px;padding:0 13px;border:none;border-radius:8px;background:var(--surface-hi);color:var(--pink);font-family:var(--f-disp);font-weight:800;font-size:12px;cursor:pointer}
.vault-max:hover{background:var(--surface-active)}
.vault-cta{width:100%;margin-top:12px}
.vault-reauth{text-align:center;padding:8px 4px 4px}
.vault-reauth-lock{width:48px;height:48px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--pink);border:0}
.vault-reauth-lock svg{width:22px;height:22px;fill:currentColor}
.vault-reauth p{margin:0 auto 16px;max-width:330px;color:var(--muted);font-size:13px;line-height:1.55}
.vault-reauth p b{color:var(--ink)}
.vault-reauth-field{display:grid;gap:7px;text-align:left;margin-bottom:12px}
.vault-reauth-field>span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.vault-reauth-field input{width:100%;height:48px;padding:0 13px;border-radius:6px;border:1px solid var(--control-border);background:var(--control-deep);color:var(--ink);font:700 15px var(--f-disp);outline:none}
.vault-reauth-field input:focus{border-color:var(--selection-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--selection-accent) 20%,transparent)}
.vault-reauth-confirm,.vault-reauth-provider{display:flex;align-items:center;justify-content:center;gap:9px}
.vault-reauth-back{margin-top:11px;padding:8px 12px;border:0;background:transparent;color:var(--muted);font:700 12.5px var(--f-disp);cursor:pointer}
.vault-reauth-back:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.bp-vault,.vault-dir button,.vault-amt-in{transition:none}}
/* ============ Invite & Earn — affiliate dashboard ============ */
.af-dash{ display:flex; flex-direction:column; gap:16px; max-width:980px; }
/* tabs */
.af-tabs{ display:inline-flex; gap:4px; padding:5px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; align-self:flex-start; flex-wrap:wrap; }
.af-tab{ border:0; background:transparent; color:var(--muted); font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:6px; cursor:pointer; }
.af-tab:hover{ background:var(--surface-hi); color:var(--ink); }
.af-tab.on{ background:var(--surface-active); color:var(--ink); }
.af-tab:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.af-pane{ display:flex; flex-direction:column; gap:16px; }
.af-dash>.af-pane{ animation:none; opacity:1; transform:none; }
.af-pane[hidden]{ display:none; }
/* hero banner */
.af-hero{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line); line-height:0; }
.af-hero-art{ display:block; width:100%; height:auto; }
.af-rate-badge{ position:absolute; right:16px; bottom:16px; line-height:1; background:rgba(10,10,12,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:8px; padding:10px 16px; text-align:center; }
.af-rate-badge small{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#c9ccd6; margin-bottom:3px; }
.af-rate-badge b{ display:block; font-size:26px; font-weight:800; color:#fff; }
.af-metrics-2{ grid-template-columns:repeat(2,1fr); }
/* header: title + rate pill */
.af-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.af-top-l{ min-width:0; }
.af-badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); background:color-mix(in srgb, var(--purple) 16%, transparent); padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.af-top h1{ margin:0 0 6px; font-size:27px; line-height:1.1; }
.af-top p{ margin:0; color:var(--muted); max-width:58ch; font-size:14px; line-height:1.55; }
.af-top p b{ color:var(--ink); }
.af-rate{ flex:0 0 auto; text-align:center; padding:14px 24px; border-radius:8px; background:var(--surface-hi); border:1px solid var(--line); }
.af-rate b{ display:block; font-size:36px; font-weight:800; color:var(--purple); line-height:1; }
.af-rate small{ display:block; margin-top:5px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
/* referral link — primary action */
.af-link-card{ padding:18px 20px; }
.af-lbl{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px; }
.af-link-row{ display:flex; gap:10px; }
.af-link-row input{ flex:1; min-width:0; height:46px; border-radius:6px; outline:0; background:var(--control-deep); border:1px solid var(--control-border); color:var(--ink); padding:0 14px; font-size:14px; }
.af-link-row input:focus-visible{ border-color:var(--focus); box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 22%,transparent); }
.af-link-row input[data-state="pending"]{ border-color:color-mix(in srgb,var(--warning) 52%,var(--control-border)); color:var(--warning); }
.af-link-row input[data-state="error"]{ border-color:var(--error); color:var(--error); }
.af-copy{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:0 20px; }
.af-copy svg{ width:16px; height:16px; }
.af-link-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
.af-custom{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.af-custom-note{ display:block; margin-top:7px; color:var(--faint); font-size:11.5px; font-weight:600; }
.af-code-pill{ font-size:12px; color:var(--muted); }
.af-code-pill b{ color:var(--ink); font-family:var(--f-disp); letter-spacing:.05em; margin-left:5px; cursor:pointer; }
.af-share{ display:inline-flex; align-items:center; gap:7px; padding:0 14px; }
.af-share:link,.af-share:visited{ text-decoration:none; }
/* Share link + Partner kit ride together on the right of the code pill. */
.af-foot-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Brand resources are a supporting action, not another full-width content row. */
.af-brandkit{ display:inline-flex; align-items:center; gap:8px; width:auto; min-height:var(--action-compact-height); margin-top:12px; padding:0 12px;
border:0; border-radius:var(--action-compact-radius); background:var(--surface-hi); color:var(--ink); cursor:pointer; }
.af-brandkit:link,.af-brandkit:visited{ text-decoration:none; color:var(--ink); }
.af-brandkit:hover{ background:var(--surface-active); }
.af-bk-ic{ width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; }
.af-bk-ic img{ width:20px; height:20px; object-fit:contain; border-radius:4px; }
.af-bk-tx{ min-width:0; }
.af-bk-tx b{ font-family:var(--f-disp); font-weight:700; font-size:13px; display:block; }
.af-bk-tx small{ color:var(--faint); font-size:12px; font-weight:600; }
.af-brandkit .am-chev{ width:14px; height:14px; }
.af-share svg{ width:15px; height:15px; }
/* metric tiles */
/* auto-fit keeps the overview metrics balanced across desktop and mobile */
.af-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; }
.af-metric{ background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.af-metric small{ color:var(--muted); font-size:12px; }
.af-metric b{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.af-metric-chip{ display:flex; align-items:center; gap:7px; }
.af-metric-chip .bal-chip{ width:18px; height:18px; filter:none; }
/* earnings split */
.af-earn{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.af-earn-card{ padding:18px 20px; }
.af-earn-total small,.af-earn-claim small{ display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.af-earn-total b,.af-earn-claim b{ display:flex; align-items:center; gap:9px; font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; }
.af-earn-card>b .bal-chip,.af-earn-claim>div>b .bal-chip{ width:18px; height:18px; filter:none; }
.af-earn-claim{ display:flex; flex-direction:column; align-items:stretch; gap:14px; }
.af-claim-btn b{ font:inherit; line-height:1; }
/* friends table */
.af-friends{ padding:18px 20px; }
.af-friends-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.af-friends-head h2{ margin:0; font-size:17px; }
.af-friends-sub{ font-size:12.5px; color:var(--muted); }
.af-friends-sub b{ color:var(--ink); }
.af-table-wrap{ overflow-x:auto; }
.af-table{ width:100%; border-collapse:collapse; }
.af-table th{ text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0 12px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.af-table td{ padding:12px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
.af-table tbody tr:last-child td{ border-bottom:0; }
.ref-who{ display:flex; align-items:center; gap:10px; }
.ref-who .ref-ava{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; }
.ref-who b{ font-family:var(--f-disp); font-weight:700; font-size:13.5px; }
.ref-when{ color:var(--muted); white-space:nowrap; }
.ref-empty{ text-align:center; color:var(--muted); padding:26px 12px !important; font-size:13.5px; }
.ref-empty-state{ min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
/* how it works */
.af-works{ padding:20px; }
.af-works h3{ margin:0 0 14px; font-size:16px; }
.af-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.af-steps li{ display:flex; gap:12px; align-items:flex-start; }
.af-step-ic{ flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; color:var(--muted); }
.af-step-ic svg{ width:20px; height:20px; display:block; }
.af-steps b{ display:block; font-size:14px; margin-bottom:3px; }
.af-steps small{ color:var(--muted); font-size:12.5px; line-height:1.5; }
@media (max-width:760px){
.af-top{ flex-direction:column; align-items:flex-start; gap:14px; }
.af-rate{ align-self:stretch; }
.af-metrics{ grid-template-columns:repeat(2,1fr); }
.af-earn{ grid-template-columns:1fr; }
.af-steps{ grid-template-columns:1fr; }
.af-copy span{ display:none; }
.af-copy{ padding:0 16px; }
}
/* ============ Invite & Earn — LuckBattle Blender artwork ============ */
.afs-overview-scene{position:relative;isolation:isolate;container-type:inline-size;width:100%;overflow:clip}
.afs-overview-scene::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(ellipse 90% 700px at 90% 200px,color-mix(in srgb,var(--lb-brand-pink) 9%,transparent),transparent 72%)}
/* Page-level art starts behind the navigation and fades beyond the metrics. */
.afs-page-art{position:absolute;z-index:0;inset:0 0 auto;display:block;width:100%;height:clamp(780px,75cqw,1100px);pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%)}
.afs-page-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.afs-overview-scene>.afs-page{z-index:1}
.afs-page{position:relative;display:flex;isolation:isolate;flex-direction:column;max-width:1160px;padding-bottom:68px;scroll-behavior:smooth}
.afs-subpage::before{content:"";position:absolute;z-index:0;top:-12px;left:50%;width:100vw;height:2500px;transform:translateX(-50%);background:linear-gradient(180deg,transparent 0%,rgba(16,23,28,.04) 58%,var(--bg) 96%),url('../assets/referrals/affiliate-page-backdrop-v2.jpg') center top/auto 2500px no-repeat;opacity:.78;pointer-events:none}
.afs-page>*{position:relative;z-index:1}
.afs-program-head{display:flex;flex-direction:column;gap:18px}
.afs-program-head h1{margin:0;font-size:21px;line-height:1.35;letter-spacing:-.015em}
.afs-tabs{display:flex;gap:4px;align-items:center;align-self:flex-start;padding:6px;border-radius:8px;background:var(--surface-2);overflow-x:auto;max-width:100%;scrollbar-width:none}
.afs-tabs::-webkit-scrollbar{display:none}
.afs-tabs button{display:flex;align-items:center;justify-content:center;min-width:116px;height:36px;padding:0 16px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:700 13px/1 var(--f-body);white-space:nowrap;cursor:pointer}
.afs-tabs button:hover{color:var(--ink);background:var(--surface-3)}
.afs-tabs button.on{background:var(--surface-active);color:var(--ink)}
.afs-hero{position:relative;isolation:isolate;container-type:inline-size;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:390px;margin-top:12px}
.afs-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:38px 0}
.afs-hero-copy h2{margin:0;font-family:var(--f-disp);font-size:clamp(36px,5.2cqw,56px);line-height:1.05;letter-spacing:-.035em;text-transform:uppercase}
.afs-hero-copy h2 span{color:var(--lb-brand-pink)}
.afs-hero-copy>p{max-width:560px;margin:8px 0 18px;color:var(--muted);font-size:14px;line-height:1.55}
.afs-hero-copy>p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.afs-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;max-width:580px}
.afs-link-row input,.afs-custom-row input{min-width:0;height:48px;padding:0 16px;border:1px solid color-mix(in srgb,var(--lb-brand-pink) 32%,var(--control-border));border-radius:6px;outline:0;background:var(--control-deep);color:var(--ink);font-size:13.5px}
.afs-link-row input:focus-visible,.afs-custom-row input:focus-visible{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 22%,transparent)}
.afs-link-row input[data-state="pending"]{border-color:color-mix(in srgb,var(--warning) 55%,var(--control-border));color:var(--warning)}
.afs-link-row input[data-state="error"]{border-color:var(--error);color:var(--error)}
.afs-copy{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:96px}
.afs-copy svg{width:16px;height:16px}
.afs-code-meta{display:flex;align-items:center;gap:8px;min-height:30px;margin-top:10px;color:var(--faint);font-size:11px}
.afs-code-meta .inv-code{min-height:26px;padding:0 9px;border:0;border-radius:5px;background:var(--surface-3);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.04em;cursor:pointer}
.afs-share{display:inline-flex;align-items:center;gap:6px;margin-left:4px;padding:4px 0;border:0;background:none;color:var(--muted);font:700 11px/1 var(--f-body);cursor:pointer}
.afs-share:hover{color:var(--ink)}
.afs-share:disabled{opacity:.45;cursor:default}
.afs-share svg{width:14px;height:14px}
.afs-custom{max-width:580px;margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--surface-2) 84%,transparent)}
.afs-custom label{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:800}
.afs-custom-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.afs-custom small{display:block;margin-top:7px;color:var(--faint);font-size:10.5px;line-height:1.4}
.afs-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.afs-metrics article{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:88px;padding:17px 22px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.afs-metrics article>span{position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--lb-brand-pink)}
.afs-metrics small{margin-bottom:7px;color:var(--muted);font-size:12px}
.afs-metrics b{display:flex;align-items:center;gap:7px;font-family:var(--f-num);font-size:17px;line-height:1.1;font-variant-numeric:tabular-nums}
.afs-metrics b strong{font:inherit}
.afs-metrics .bal-chip{width:18px;height:18px;filter:none}
.afs-divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:13px;margin:58px 0 30px}
.afs-divider span{height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 10px,transparent 10px 17px)}
.afs-divider img{width:24px;height:24px;object-fit:contain;opacity:.45}
.afs-section>h2{justify-content:center;margin:0 0 26px;font-family:var(--f-disp);font-size:34px;line-height:1.15;letter-spacing:-.02em;text-align:center;text-transform:uppercase}
.afs-start-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px}
.afs-start-visual{position:relative;container-type:inline-size;min-width:0;aspect-ratio:100/73;overflow:hidden;border:0;border-radius:12px;background:var(--lb-surface);isolation:isolate}
.afs-start-art{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
/* Keep the live rate inside the render's clear lower-left corner. */
.afs-rate-panel{position:absolute;z-index:1;left:4%;bottom:6%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;width:43%;min-width:0;box-sizing:border-box;padding:12px 14px;border:1px solid var(--lb-line);border-radius:9px;background:color-mix(in srgb,var(--lb-surface) 88%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.afs-rate-panel small{color:var(--lb-ink);font-size:clamp(10px,2.6cqw,13px);font-weight:800;line-height:1.25}
.afs-rate-panel b{color:var(--success);font-family:var(--f-num);font-size:clamp(28px,6.5cqw,37px);line-height:1;font-variant-numeric:tabular-nums}
.afs-steps{display:flex;align-self:stretch;flex-direction:column;justify-content:space-between;gap:25px;padding:24px 0}
.afs-steps article h3{margin:0 0 7px;font-size:15px;line-height:1.3}
.afs-steps article h3 span{color:var(--success)}
.afs-steps article p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.afs-green-action{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:44px;padding:0 18px;border:0;border-radius:6px;background:var(--success);color:#07100c;font:800 13px/1 var(--f-body);cursor:pointer}
.afs-green-action:hover{filter:brightness(1.06)}
.afs-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.afs-feature-card{display:flex;align-items:flex-start;gap:18px;min-width:0;padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.afs-feature-card>img{flex:0 0 auto;width:80px;height:80px;object-fit:contain}
.afs-feature-card>div{display:flex;flex:1;min-width:0;flex-direction:column}
.afs-feature-card h3{margin:1px 0 6px;font-size:17px;line-height:1.25}
.afs-feature-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.52}
.afs-feature-card p b{color:var(--ink)}
.afs-feature-card code{display:block;margin-top:16px;padding:13px 14px;border:1px solid var(--line);border-radius:7px;background:var(--control-deep);color:var(--ink);font:12.5px/1.55 var(--f-body);white-space:normal}
.afs-referrals,.afs-earnings{scroll-margin-top:90px;border:1px solid var(--line);background:var(--surface-2)}
.afs-referrals{overflow:hidden;padding:0}
.afs-referrals>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line)}
.afs-referrals>header small,.afs-earnings header small{display:block;margin-bottom:4px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.afs-referrals>header h2,.afs-earnings h2{margin:0;font-size:17px}
.afs-referrals>header>span{display:inline-flex;align-items:center;gap:4px;padding:6px 9px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:11px}
.afs-referrals>header>span b{color:var(--ink);font-family:var(--f-num)}
.afs-referrals .af-table{table-layout:fixed}
.afs-referrals .af-table th:nth-child(1){width:58%}.afs-referrals .af-table th:nth-child(2){width:9%}.afs-referrals .af-table th:nth-child(3){width:11%}.afs-referrals .af-table th:nth-child(4){width:14%}.afs-referrals .af-table th:nth-child(5){width:8%}
.afs-referrals .af-table th{background:var(--control-deep)}
.afs-referrals .ref-list{display:table-row-group}
.afs-referrals .ref-row{display:table-row;padding:0;border:0;border-radius:0;background:transparent}
.afs-referrals .ref-row td{height:62px}
.afs-earnings{display:flex;flex-direction:column;padding:20px}
.afs-claimable{display:flex;align-items:center;gap:9px;margin:25px 0 22px;font-family:var(--f-num);font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.afs-claimable .bal-chip{width:24px;height:24px;filter:none}
.afs-earnings dl{display:flex;flex-direction:column;gap:0;margin:0 0 20px}
.afs-earnings dl div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.afs-earnings dt{color:var(--muted);font-size:12px}.afs-earnings dd{display:flex;align-items:center;gap:6px;margin:0;font-family:var(--f-num);font-size:13px;font-weight:800}
.afs-earnings dd .bal-chip{width:15px;height:15px;filter:none}
.afs-claim{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:auto}.afs-claim b{font:inherit}.afs-claim .bal-chip{width:16px;height:16px;filter:none}
.afs-info-card{align-items:center;min-height:210px}
.afs-info-card>img{width:112px;height:112px;filter:brightness(0) saturate(100%) invert(59%) sepia(76%) saturate(2484%) hue-rotate(286deg) brightness(101%) contrast(92%) drop-shadow(1px 0 0 #f45dc4) drop-shadow(-1px 0 0 #f45dc4) drop-shadow(0 1px 0 #f45dc4) drop-shadow(0 -1px 0 #f45dc4) drop-shadow(0 9px 18px rgba(244,93,196,.14))}
.afs-info-card>div{align-self:stretch}
.afs-purple-action{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:auto;padding:0 18px;border:0;border-radius:6px;background:var(--purple);color:#fff;font:800 13px/1 var(--f-body);text-decoration:none;cursor:pointer}
.afs-purple-action:hover{filter:brightness(1.08)}
.afs-info-card p{margin-bottom:16px}
.afs-subpage{min-height:calc(100dvh - var(--topbar-h));padding-bottom:72px}
.afs-subpage::before{height:1250px;background-size:auto 1900px;opacity:.3}
.afs-route-heading{max-width:760px;margin:70px 0 24px}
.afs-route-heading small{display:block;margin-bottom:7px;color:var(--pink);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.afs-route-heading h2{margin:0;font-family:var(--f-disp);font-size:34px;line-height:1.12;letter-spacing:-.025em}
.afs-route-heading p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.afs-subpage>.afs-referrals{width:100%;margin-top:70px}
.afs-earnings-route{width:min(520px,100%)}
.afs-earnings-route .afs-earnings{min-height:340px}
.afs-faq-list{display:flex;flex-direction:column;gap:14px}
.afs-faq-item{overflow:hidden;border:1px solid var(--line);border-radius:8px;background:transparent}
.afs-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:0 24px;cursor:pointer;list-style:none;color:var(--ink);font-size:13.5px;font-weight:800}
.afs-faq-item summary::-webkit-details-marker{display:none}
.afs-faq-item summary svg{flex:0 0 auto;width:15px;height:15px;color:var(--muted);transition:transform .18s ease}
.afs-faq-item[open] summary svg{transform:rotate(180deg)}
.afs-faq-answer{padding:0 24px 18px}
.afs-faq-answer p{max-width:880px;margin:0;color:var(--muted);font-size:13px;line-height:1.58}
@media(max-width:920px){
.afs-start-grid{gap:30px}
.afs-feature-grid{gap:14px}
.afs-feature-card{padding:20px}
}
@media(max-width:760px){
.afs-page{padding-bottom:42px}
.afs-page-art{top:92px;height:clamp(350px,105cqw,510px);-webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent 100%);mask-image:linear-gradient(to bottom,#000 75%,transparent 100%)}
.afs-page-art img{object-fit:contain;object-position:center top}
.afs-subpage::before{height:1800px;background-size:auto 1800px;background-position:78% top;opacity:.72}
.afs-program-head{gap:17px}
.afs-program-head h1{font-size:20px}
.afs-tabs{align-self:stretch;padding:5px}
.afs-tabs button{min-width:128px}
.afs-hero{grid-template-columns:1fr;gap:0;min-height:0;margin-top:0;padding-top:clamp(310px,95cqw,470px)}
.afs-hero-copy{align-items:center;margin-top:-8px;padding:0;text-align:center}
.afs-hero-copy h2{font-size:clamp(32px,7cqw,43px);line-height:1.05}
.afs-hero-copy>p{margin:7px auto 17px;font-size:13.5px}
.afs-link-row{align-self:stretch;width:100%}
.afs-code-meta{justify-content:center;flex-wrap:wrap}
.afs-custom{align-self:stretch;text-align:left}
.afs-metrics{grid-template-columns:1fr;margin-top:24px}
.afs-metrics article{min-height:84px;padding-left:42px}
.afs-metrics article>span{left:25px;top:20px;bottom:20px;width:3px;border-radius:3px}
.afs-divider{margin:38px 0 28px}
.afs-section>h2{margin-bottom:24px;font-size:30px}
.afs-start-grid{grid-template-columns:1fr;gap:22px}
.afs-steps{gap:24px;padding:0}
.afs-green-action{align-self:stretch}
.afs-feature-grid{grid-template-columns:1fr;gap:24px}
.afs-feature-card{flex-direction:column;align-items:center;min-height:0;padding:24px;text-align:center}
.afs-feature-card>img{width:80px;height:80px}
.afs-info-card>img{width:104px;height:104px}
.afs-feature-card code{width:100%;text-align:left}
.afs-referrals .af-table-wrap{overflow-x:auto}
.afs-referrals .af-table{min-width:670px}
.afs-info-card>div{align-self:stretch}
.afs-subpage>.afs-referrals{margin-top:44px}
.afs-faq-item summary{min-height:66px;padding:0 20px;font-size:13px;text-align:left}
.afs-faq-answer{padding:0 20px 17px}
}
@media(max-width:520px){
.afs-tabs button{min-width:122px;padding:0 13px}
.afs-link-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
.afs-copy{min-width:82px;padding-inline:13px}
.afs-copy svg{display:none}
.afs-code-meta>span{display:none}
.afs-custom-row{grid-template-columns:1fr}
.afs-section>h2{font-size:28px}
.afs-rate-panel{padding:10px;gap:5px}
.afs-route-heading{margin-top:44px}
.afs-route-heading h2{font-size:29px}
.afs-referrals>header{align-items:flex-start;flex-direction:column;gap:10px}
}
/* ============ Player popup — Shuffle-style public card ============ */
.pp-hero{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 0 18px; margin:0 -2px; text-align:center; }
.pp-ava{ width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--line-2); background:var(--surface-hi); }
.pp-name{ margin:2px 0 0; font-family:var(--f-disp); font-weight:700; font-size:21px; }
.pp-rank{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--muted); background:var(--surface-hi); border:1px solid var(--line); padding:5px 14px; border-radius:999px; }
.pp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:14px 6px; margin-bottom:16px; }
.pp-stats>div{ display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center; padding:0 8px; }
.pp-stats>div+div{ border-left:1px solid var(--line); }
.pp-stats small{ color:var(--muted); font-size:11.5px; }
.pp-stats b{ font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:5px; }
.pp-hidden{ color:var(--muted); }
.pp-hidden svg{ width:14px; height:14px; }
/* Public player cards use the canonical modal ladder: dark shell, raised
content panels, and a deep input. Privacy changes data visibility only; it
never fades the card or its identity. */
#profileCard:has(.pp-hero){background:var(--surface);border-color:var(--line);color:var(--ink)}
#profileCard:has(.pp-hero) .pp-stats,
#profileCard:has(.pp-hero) .tip-box{background:var(--surface-2);border-color:var(--line)}
#profileCard:has(.pp-hero) .tip-input-row{background:var(--control-deep);border-color:var(--control-border)}
#profileCard:has(.pp-hero) .tip-switch-input:checked + .tip-switch-track{background:var(--selection-accent)}
#profileCard:has(.pp-hero) .sheet-x{background:var(--surface-hi);border:0;outline:0;box-shadow:none;color:var(--chrome-icon)}
#profileCard:has(.pp-hero) .sheet-x:hover,
#profileCard:has(.pp-hero) .sheet-x:focus-visible{background:var(--surface-active);color:#fff;border:0;outline:0;box-shadow:none}
/* Player popup — rank pill with tier icon */
.pp-rank{ display:inline-flex; align-items:center; gap:6px; }
.pp-rank img{ width:16px; height:16px; object-fit:contain; }
.pp-rank.bot{color:#d9d2ff;border-color:rgba(139,92,255,.38);background:rgba(139,92,255,.12)}
.pp-rank.bot svg{width:17px;height:17px;fill:none;stroke:#a98cff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pp-hero-bot .pp-ava{border-color:rgba(139,92,255,.45)}
/* Redeem tab — one-card layout (matches deposit dep2-solo) */
.wb-redeem .dep2-card .dep2-lbl{display:block;margin:0 0 10px}
.wb-redeem .redeem-entry{display:block}
.wb-redeem .rdm-summary{margin:16px 0 14px;background:var(--surface)!important;border:1px solid var(--line)}
.wb-redeem .rdm-summary:empty{display:none}
.rdm2-min{margin:0;color:var(--muted);font-size:12.5px;text-align:center}
.wb-redeem .dep2-cta:disabled{opacity:.45;cursor:not-allowed}
/* ============ Bet modal — Shuffle-style game snapshots ============ */
/* Our in-game card colors (customCardRedColor / customCardBlackColor) */
.bm-card{color:#151020}
.bm-card.red{color:#e01e37}
.bm-card.lose{outline:2.5px solid #ff4d5e;outline-offset:-1px;box-shadow:0 4px 14px rgba(255,77,94,.25)}
.bm-total.lose{background:color-mix(in srgb,#ff4d5e 20%,var(--surface-3));border-color:color-mix(in srgb,#ff4d5e 55%,var(--line));color:#ff6b7c}
.bm-total.push{background:color-mix(in srgb,var(--gold,#ffd34e) 18%,var(--surface-3));border-color:color-mix(in srgb,var(--gold,#ffd34e) 50%,var(--line));color:var(--gold,#ffd34e)}
.bm-hand-cards.lg .bm-card{width:72px;height:100px}
.bm-hand-cards.lg .bm-card b{font-size:30px}
.bm-hand-cards.lg .bm-card i{font-size:25px}
@media(max-width:420px){.bm-hand-cards.lg .bm-card{width:58px;height:82px}.bm-hand-cards.lg .bm-card b{font-size:23px}.bm-hand-cards.lg .bm-card i{font-size:19px}}
/* Blackjack: dealer total pill above, player hand(s) larger below, side bets */
.bm-bj{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 16px}
.bm-bj-hands{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.bm-bj-hand{display:flex;flex-direction:column;align-items:center;gap:10px}
.bm-bj-sides{display:flex;gap:8px;justify-content:center;margin-top:2px}
.bm-bj-side{display:inline-flex;align-items:center;gap:0;border-radius:999px;overflow:hidden;font-family:var(--f-disp);font-weight:800;font-size:12px}
.bm-bj-side b{background:#101418;color:var(--success,#37f5a0);padding:5px 10px;border:1px solid color-mix(in srgb,var(--success,#37f5a0) 45%,transparent);border-right:none;border-radius:999px 0 0 999px}
.bm-bj-side i{font-style:normal;background:var(--success,#37f5a0);color:#08110c;padding:5px 9px;border-radius:0 999px 999px 0}
.bm-bj-side:only-child b:last-child{border-right:1px solid color-mix(in srgb,var(--success,#37f5a0) 45%,transparent);border-radius:999px}
/* Baccarat: player | banker side by side */
.bm-bac{display:flex;align-items:stretch;justify-content:center;gap:16px;padding:24px 12px}
.bm-bac-col{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;min-width:0}
.bm-bac-col small{color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bm-bac-col .bm-hand-cards{flex-wrap:nowrap}
.bm-bac-col .bm-hand-cards .bm-card+.bm-card{margin-left:-30px}
.bm-bac-div{width:1px;background:var(--line);margin:8px 0}
@media(max-width:420px){.bm-bac{gap:8px}.bm-bac-col .bm-hand-cards .bm-card+.bm-card{margin-left:-26px}}
/* Wheel: donut ring + pin + multiplier strip */
.bm-wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 14px}
.bm-wheel{width:min(300px,82%);height:auto;display:block}
.bm-wheel-win{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.bm-wheel-center{font-family:var(--f-disp);font-weight:800;font-size:34px}
.bm-wheel-strip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bm-wheel-chip{font-family:var(--f-disp);font-weight:800;font-size:12.5px;padding:7px 12px;border-radius:6px;background:var(--surface-3);border:1px solid var(--line);color:#fff;border-bottom:3px solid var(--wc)}
.bm-wheel-chip.on{background:var(--wc);border-color:var(--wc);color:#080808}
.bm-two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bm-two-fields .bm-field{margin:0 0 12px}
/* chicken road: Difficulty / Lane Number / Death Lane sit on one row */
.bm-chicken-result{
position:relative;
height:168px;
overflow:hidden;
background:#17162e url('../assets/chicken-road/runtime/road/background.svg') center/cover no-repeat;
}
.bm-chicken-result__line{
position:absolute;top:0;bottom:0;width:5px;
background:url('../assets/chicken-road/runtime/road/line.svg') top center/5px auto repeat-y;
opacity:.95;
}
.bm-chicken-result__line--one{left:25%}
.bm-chicken-result__line--two{right:25%}
.bm-chicken-result__manhole{
position:absolute;left:50%;top:58px;width:96px;height:90px;
object-fit:contain;transform:translateX(-50%);
}
.bm-chicken-result__dance{
position:absolute;z-index:2;left:50%;top:17px;width:96px;height:96px;
transform:translateX(-50%);
background:url('../assets/chicken-road/runtime/chicken/win.png') no-repeat 0 0/11520px 96px;
animation:bmChickenDance 5s steps(119) infinite;
will-change:background-position;
}
.bm-chicken-result strong{
position:absolute;z-index:3;left:50%;bottom:9px;transform:translateX(-50%);
min-width:max-content;padding:6px 10px;border-radius:6px;
background:rgba(18,20,24,.9);color:#fff;
font:700 12px/1 Urbanist,ui-sans-serif,system-ui,sans-serif;
}
@keyframes bmChickenDance{to{background-position:100% 0}}
.bm-three-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bm-three-fields .bm-field{margin:0 0 12px;min-width:0}
@media(max-width:420px){.bm-three-fields{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bm-chicken-result__dance{animation:none}}
/* Play Free tab — one-card layout */
.wb-free .dep2-card{border:0;box-shadow:none}
.wb-free .pf2-hero{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wb-free .pf2-hero h3{margin:6px 0 6px;font-size:18px}
.wb-free .pf2-hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:640px){.wb-free .pf2-hero{flex-direction:column;align-items:flex-start}}
/* ============ Wallet alignment + deposit polish (owner pass 2026-07-02) ============ */
/* One centered column: title, tabs and card all share the same width.
The guest sign-in banner is a later addition and was never added to this
ladder, so on desktop it stretched the full 1084px content box while the
title above it and the free-chips card below it both sat in the 640px
column — it read as a stray full-bleed bar. */
@media (min-width:768px){
.wallet-screen .wallet-title{max-width:640px;margin-left:auto;margin-right:auto}
.wallet-screen .wallet-seg{max-width:640px;margin-left:auto;margin-right:auto}
}
/* Crypto tab: three stacked coin logos instead of the star */
.dep2-tri{display:inline-flex;align-items:center}
.dep2-tri img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid var(--surface-2)}
.dep2-tri img+img{margin-left:-7px}
.dep2-seg-btn.on .dep2-tri img{border-color:var(--line-2)}
/* Coin logos fill their circle — kills the pale ring around each icon */
.dep2-coin-ic{background:transparent}
.dep2-coin-ic img{width:34px;height:34px;border-radius:50%;object-fit:cover}
/* Method notes vary in length; reserve two lines so the card never jumps */
.dep2-note{min-height:38px}
.dep2-coins{align-content:start}
/* Notifications: header row sized like a normal toolbar, no floating grey slab */
#notifSheet .notif-tools{margin:0 0 8px;padding:8px 10px;border-radius:6px;
background:var(--surface-hi);border:1px solid var(--line)}
/* Casino bets table: icon+game, tighter columns, no dead space */
@media(min-width:431px){.tx-table.casino .tx-head,.tx-line.casino{min-width:640px;grid-template-columns:minmax(150px,1fr) 150px 110px 96px 140px;gap:10px}}
.tx-game{display:inline-flex;align-items:center;gap:9px;min-width:0}
.tx-game b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-gico{width:26px;height:26px;border-radius:6px;object-fit:cover;flex:0 0 auto}
/* Play Free: image icons in the free-chips grid */
.pf-ic-rain img,.pf-ic-invite img,.pf-ic-promo img{width:22px;height:22px;object-fit:contain}
/* Notif icons: crypto logos + rank badges render bare — no circle chip behind them */
#notifSheet .notif .ni:has(img){background:none!important;border:none!important;box-shadow:none!important}
#notifSheet .notif .ni .ni-coin{width:38px!important;height:38px!important;border-radius:50%;object-fit:cover}
#notifSheet .notif .ni .ni-rank{width:40px!important;height:40px!important;object-fit:contain}
/* Casino bets: cap width so game sits near date (no comedic desktop stretch);
grid columns sized to content, table left-aligned. Mobile keeps horizontal scroll. */
@media (min-width:768px){
.tx-table.casino{max-width:980px}
.tx-table.casino .tx-head,.tx-line.casino{min-width:0;grid-template-columns:minmax(180px,1.1fr) 160px 110px 104px 140px;column-gap:18px}
/* breathe like the rest of the desktop tables — rows were noticeably tighter here */
.tx-line.casino{min-height:78px;padding:0 14px}
.tx-table.casino .tx-head{padding:0 14px}
}
/* ============ Icon consistency pass (owner 2026-07-02) ============
The three settings PNGs are all 120px canvases but their artwork fills
different amounts (change-password 64px, edit-profile 75px, private-mode
89px). Scales below were computed from the measured artwork bounding boxes
so every icon renders ~26px of visible art in the same 34px box. */
.set-ic .asset-ic{width:34px;height:34px}
.set-ic img.asset-ic{transform:none}
.set-ic img[src*="edit-profile"]{transform:scale(1.22)}
.set-ic img[src*="change-password"]{transform:scale(1.43)}
.set-ic img[src*="private-mode-live-bets"]{transform:scale(1.03)}
/* The 26px box stays — that is what put the labels back on one baseline — but
the GLYPH inside it draws at 22 (owner 2026-08-08: the icons jut out). 26px of
line art beside a 12px label is more than twice its cap height; 22 in a 26 cell
keeps the label's x untouched and lets the word lead the row. */
.sb-nav button .sb-ico svg{width:22px;height:22px}
@media (min-width:768px){ .sb-ico svg{width:22px;height:22px} }
/* ...and the CELL has to be 26px too (owner 2026-08-08: "the text beside them
is off centered"). The glyph was bumped to 26 while its box and the grid
column stayed at 22-24, so every icon overflowed ~2px to the right and sat
left of its own cell centre while the labels all started at one fixed x —
which reads as the text being off, not the icon. Measured: cell 24, glyph 26,
left pad 0, right pad -2. Sizing the column and the box to the glyph puts the
optical centre back under the label. */
.sb-nav button .sb-ico{width:26px;height:26px;display:grid;place-items:center}
.sb-nav button{grid-template-columns:26px minmax(0,1fr)}
.sidebar .sb-nav button{grid-template-columns:26px max-content auto}
/* The collapsed rail is icon-only, so its second column must stay zero. */
body.lb-sidebar-collapsed .sb-nav button{grid-template-columns:26px 0}
/* Sweep fixes 2026-07-02 */
/* balance-pop currency rows are real buttons now (keyboard reachable) */
.bp-row{width:100%;text-align:left;font:inherit;background:none;border:none;cursor:pointer}
/* inventory: icon card for non-pack items (coupons etc.) */
.inv-card-ic{width:44px;height:44px;display:grid;place-items:center;color:var(--purple)}
.inv-card-ic svg{width:26px;height:26px}
.inv-card.is-static{cursor:default}
/* tiny phones: keep the topbar from clipping the profile button */
@media(max-width:430px){.tb-balance{min-width:0}.bal-amt{font-size:14px}}
@media(max-width:374px){.topbar{gap:5px}.tb-balance{min-width:0}.bal-amt{font-size:13px}}
/* In-place data refreshes re-render the same screen; skip the entrance
animation so timers/balances update without the whole page dipping. */
#stage[data-no-anim="1"] .stagger>*{animation:none!important;opacity:1!important;transform:none!important}
/* Challenges PNG art fills 86/128px vs ~111/128 for its siblings — scale to parity */
.sb-nav button[data-nav="challenges"] .sb-ico img{transform:scale(1.29)}
/* ============================================================================
Signed-out experience — guest chrome, dismissable join modal affordances,
wallet guest note, and the marketing rewards page. Flat colors only:
NO gradients, NO glow halos (per brand). purple=chrome/CTA, pink=accent.
============================================================================ */
/* Remove the chip drop-shadow inside rewards claim/amount pills (owner request:
no glow on the chips icon on the claim button — locked or unlocked). */
.rake .bal-chip{filter:none}
/* Guest topbar: blank balance reads as a muted dash, not a real 0. */
body.lb-guest .tb-balance .bal-amt{color:var(--muted,#9aa0aa)}
/* Wallet — signed-out visitors get the live screen, not a greyed one.
The purple "Sign in to your account" bar and the opacity/pointer-events mask
that used to sit here are gone (owner 2026-08-08): every Free Chips tile is
worth a click while logged out. Discord, Telegram and Invite go straight
through, Chip rain opens chat, Rakeback opens the VIP page, and the two that
genuinely need an account (Claim, Promo codes) pop the join modal themselves
via requireLaunchAuth. A tile that opens the signup sheet converts better
than a bar that stops the tap. */
/* ---------- Rewards: signed-out marketing page ---------- */
.rewards-signedout{max-width:1120px;margin:0 auto;padding-bottom:40px}
.rewards-signedout .ro-sect-head{margin:30px 2px 14px}
.rewards-signedout .ro-sect-head h2{font-size:22px;font-weight:800;color:var(--ink)}
.ro-hero{position:relative;border-radius:8px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);min-height:300px;display:flex;align-items:center}
.ro-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.ro-hero-copy{position:relative;z-index:2;max-width:560px;padding:34px 30px}
.ro-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#f5c451;margin-bottom:12px}
.ro-eyebrow svg{width:16px;height:16px}
.ro-hero-copy h1{font-size:34px;line-height:1.08;font-weight:800;color:#fff;margin:0 0 12px;letter-spacing:-.01em}
.ro-hero-copy p{font-size:15px;line-height:1.5;color:#c4c8d2;margin:0 0 20px;max-width:480px}
.ro-play{display:inline-flex;align-items:center;justify-content:center;padding-inline:30px}
.ro-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ro-step{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:16px}
.ro-step-art{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/10;margin-bottom:14px;
background:var(--control-deep);
display:grid;place-items:center}
.ro-step-art img{max-width:80%;max-height:82%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.ro-step-n{position:absolute;top:10px;left:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--action-primary);color:var(--action-primary-ink);font-weight:800;font-size:14px}
.ro-step b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}
.ro-step p{font-size:13.5px;line-height:1.45;color:var(--muted);margin:0}
.ro-advs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ro-adv{display:flex;gap:15px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.ro-adv-ic{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;border-radius:8px;background:var(--surface-hi);color:var(--chrome-icon)}
.ro-adv-ic.is-progress{color:var(--success)}
.ro-adv-ic.is-boost{color:var(--pink)}
.ro-adv-ic.is-vip{color:var(--gold)}
.ro-adv-ic svg{width:26px;height:26px}
.ro-adv-ic img{width:28px;height:28px;object-fit:contain}
.ro-adv b{display:block;font-size:16px;color:var(--ink);margin-bottom:5px}
.ro-adv p{font-size:13.5px;line-height:1.45;color:var(--muted);margin:0}
.ro-faqs{display:flex;flex-direction:column;gap:10px}
.ro-faq{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ro-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-size:15px;font-weight:600;color:var(--ink)}
.ro-faq summary:hover{background:var(--surface-hi)}
.ro-faq summary:focus-visible{background:var(--surface-hi);outline:2px solid var(--focus);outline-offset:-2px}
.ro-faq summary::-webkit-details-marker{display:none}
.ro-faq-chev{width:20px;height:20px;flex:0 0 auto;color:var(--muted);transition:transform .18s ease}
.ro-faq[open] .ro-faq-chev{transform:rotate(180deg)}
.ro-faq-a{padding:0 18px 16px;font-size:14px;line-height:1.55;color:var(--muted)}
.ro-final{margin-top:34px;text-align:center;padding:34px 20px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.ro-final h2{font-size:24px;font-weight:800;color:var(--ink);margin:0 0 16px}
@media (max-width:760px){
.ro-hero{min-height:0}
.ro-hero-bg{opacity:.32}
.ro-hero-copy{padding:26px 20px}
.ro-hero-copy h1{font-size:26px}
.ro-steps{grid-template-columns:1fr}
.ro-advs{grid-template-columns:1fr}
.rewards-signedout .ro-sect-head h2{font-size:19px}
}
/* ---------- Top-of-lobby app-install band + lobby fullness ---------- */
.app-band{display:flex;align-items:center;gap:18px;margin:0 0 12px;padding:12px 18px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.app-band .ab-copy{flex:1 1 auto;min-width:0}
.ab-title{font-family:var(--f-disp,Urbanist),system-ui;font-size:22px;font-weight:700;color:#fff;margin:0 0 5px;letter-spacing:.005em;line-height:1.12}
.ab-title .ab-actually{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2.5px;text-underline-offset:3px;color:#fff}
.ab-title .ab-at{color:var(--pink);font-weight:700;font-style:normal;font-size:1.06em;position:relative;top:.02em}
.ab-sub{font-family:Urbanist,system-ui;font-size:13px;font-weight:500;color:#aab0bd;margin:0;line-height:1.45;max-width:52ch}
.ab-right{flex:0 0 auto;display:flex;align-items:center;gap:14px}
.ab-get{gap:7px}
.ab-get .ab-plus{font-size:17px;line-height:1;font-weight:600}
/* CSS iPhone mockup — flat, no glow, bottom cropped short. */
.ab-phone{position:relative;flex:0 0 auto;width:auto;height:112px;border-radius:0;background:none;border:0;box-shadow:none;padding:0;overflow:visible}
.ab-phone-img{height:100%;width:auto;display:block;object-fit:cover;object-position:top center;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.ab-phone-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:36px;height:10px;border-radius:8px;background:#000;z-index:2}
.ab-phone-scr{height:100%;border-radius:8px 8px 0 0;background:radial-gradient(120% 120% at 50% 0%,#1a1330,var(--surface-2) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding-top:8px}
.ab-appicon{width:46px;height:46px;border-radius:8px;overflow:hidden;background:var(--control-deep);border:1px solid var(--line)}
.ab-appicon img{width:100%;height:100%;object-fit:cover}
.ab-appname{font-size:11.5px;font-weight:800;color:#fff}
/* Logged-in visitors: same compact band. */
body:not(.lb-guest) .app-band .ab-title{font-size:18px}
body:not(.lb-guest) .app-band .ab-phone{height:104px}
body:not(.lb-guest) .app-band .ab-appicon{width:42px;height:42px}
/* Installed / running as an app — never show the install band. */
/* Installed as an app: keep the social-casino headline, just drop the now-pointless "Get the app" CTA. */
@media (display-mode:standalone){ .app-band .ab-get,.app-band .ab-phone{display:none} }
.all-games-head .ag-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;margin-left:2px;border-radius:6px;background:var(--surface-hi);color:var(--muted);font-size:12px;font-weight:700;vertical-align:middle}
@media (max-width:760px){
.app-band{gap:14px;padding:12px 14px}
.ab-title{font-size:18px}
.ab-sub{font-size:12.5px}
.ab-phone{height:96px}
.ab-appicon{width:42px;height:42px}
}
@media (max-width:520px){
.app-band{flex-direction:column;align-items:flex-start;text-align:left;gap:12px}
.ab-right{align-self:stretch;justify-content:space-between;width:100%;gap:16px}
.ab-phone{height:92px}
}
/* ---- inventory cart (won pack items) ---- */
/* One line: what you own on the left, select-all on the right. No panel chrome
around it -- the items are the content, this is just a rule above them. */
.inv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 12px;padding:0 2px 10px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0}
/* fixed-size box: the ✕ is always in the layout (hidden at 0 selected) and the
height never changes, so selecting items cannot reflow the grid below */
.inv-bar-count{display:inline-flex;align-items:center;gap:7px;font:600 13.5px Urbanist;color:#8b90a0;height:26px;white-space:nowrap}
.inv-bar-count.has-selection{color:#fff}
.inv-bar-count b{font-family:var(--f-disp);font-variant-numeric:tabular-nums}
.inv-bar-count b .chip-i{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.inv-bar-actions{display:inline-flex;gap:8px}
.inv-bar .btn-sm{padding:8px 14px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);color:#e8eaf0;font:700 12.5px Urbanist;cursor:pointer}
.inv-bar .btn-sm:disabled{cursor:default}
/* idle: grey button, grey text — a selection lights Sell green (cashout = green).
Sell sits inline on the count row now, so it sizes to its label instead of
stretching (owner 2026-08-07). */
/* the shuffle primitive is width:100%!important, so beating it takes the same
weight — otherwise Sell eats the whole bar and shoves the count off it */
.inv-bar button.lb-originals-btn.inv-sell{width:auto!important;min-width:132px;flex:0 1 auto}
.inv-bar button.lb-originals-btn.inv-sell>.lb-originals-btn__content{padding-left:18px;padding-right:18px}
.inv-clear{display:grid;place-items:center;flex:0 0 18px;width:18px;height:26px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.inv-clear svg{display:block;width:14px;height:14px;stroke-width:2.4}
.inv-clear:hover{background:none;color:#fff}
.inv-clear.hide{visibility:hidden;pointer-events:none}
/* The selection well: a plain fill with NO stroke, the way the reference cart
does it. It keeps its height whether or not anything is selected, so tapping
an item never reflows the grid underneath. */
.inv-selected-strip{min-height:96px;align-items:center;padding:10px;background:var(--surface-2);border-radius:8px}
.inv-selected-strip.empty{justify-content:center}
/* sort + select-all live on their own right-aligned row under the well */
.inv-selrow{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:10px 0 12px}
.inv-sort,.inv-selall{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:6px;
border:0;background:var(--surface-2);color:#cfd3dc;font:700 12.5px Urbanist;white-space:nowrap;cursor:pointer;
transition:background .12s ease,color .12s ease}
.inv-sort:hover,.inv-selall:hover{background:var(--surface-hi);color:#fff}
/* a chevron per direction (owner-supplied), so nothing is flipped in CSS */
.inv-sort-ic{display:inline-grid;place-items:center;width:12px;height:12px}
.inv-sort-ic svg{width:100%;height:100%;display:block}
.inv-selall{min-width:0;text-align:left}
/* One select box, two places: the Select All chip and each item's own corner
control (owner-supplied Check-2 glyph, 2026-08-07). Off = outline only.
On = box filled blue, tick white. */
.lb-cbx{display:grid;place-items:center;width:16px;height:16px;color:rgba(255,255,255,.42);flex:0 0 auto}
.lb-cbx svg{width:100%;height:100%;display:block}
.lb-cbx .cbx-tick{opacity:0}
.lb-cbx.on{color:var(--selection-accent)}
.lb-cbx.on .cbx-box{fill:var(--selection-accent)}
.lb-cbx.on .cbx-tick{opacity:1;stroke:var(--action-primary-ink)}
.inv-grid-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px}
.inv-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px 12px;min-height:0;background:var(--surface-2);border:1px solid transparent;border-radius:8px;outline:0;cursor:pointer;transition:border-color .12s ease,transform .12s ease}
/* selected = blue rim + check ONLY — hover/focus reveals the empty selector,
but the card edge stays silent until it is actually selected. */
.inv-item.on{border-color:var(--selection-accent)}
.inv-check{position:absolute;top:8px;right:8px;z-index:3;width:18px;height:18px;opacity:0;pointer-events:none;transition:opacity .12s ease}
.inv-item:hover .inv-check,
.inv-item:focus-visible .inv-check,
.inv-item:focus-within .inv-check,
.inv-item.on .inv-check{opacity:1}
.inv-dots{position:absolute;top:-5px;left:-5px;z-index:3;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:none;color:var(--muted);padding:0;border-radius:8px;cursor:pointer}
.inv-dots svg{width:14px;height:14px;display:block}
.inv-dots:hover{color:var(--ink);background:var(--surface-hi)}
.inv-dots:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.inv-menu{position:absolute;top:40px;left:8px;z-index:6;display:flex;flex-direction:column;min-width:150px;padding:5px;background:var(--surface-2);border:0;border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.5)}
.inv-menu button{display:flex;align-items:center;gap:6px;padding:9px 10px;border:0;border-radius:8px;background:none;color:#e8eaf0;font:600 12.5px Urbanist;cursor:pointer;text-align:left}
.inv-menu button:hover{background:rgba(255,255,255,.07)}
.inv-item-art{width:108px;height:108px;display:grid;place-items:center}
.inv-item-art img{max-width:92px;max-height:92px;object-fit:contain}
.inv-item-nm{font:600 12.5px/1.3 Urbanist;color:#e8eaf0;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-item-vl{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-weight:700;font-size:13px;color:#fff;font-variant-numeric:tabular-nums}
.inv-item-sell{width:100%;margin-top:6px}
.inv-dock .inv-sell{width:100%}
/* ---- chrome polish 2026-07-10: collapsed-rail alignment, balance-pop grid, premium lobby rhythm ---- */
body.lb-sidebar-collapsed .sb-nav{width:100%}
body.lb-sidebar-collapsed .sb-nav button{margin:0 auto}
body.lb-sidebar-collapsed .sb-toggle{margin:0 auto}
.balance-pop .bp-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;width:100%;text-align:left}
.balance-pop .bp-vault{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;width:100%;text-align:left}
.balance-pop .bp-vault-ic{width:24px;height:24px;justify-self:center}
.balance-pop .bp-amt{font-variant-numeric:tabular-nums;justify-self:end}
.balance-pop .bp-vault{grid-template-columns:24px 1fr auto 14px}
@media (prefers-reduced-motion:reduce){.balance-pop,.bal-caret{transition:none}}
/* premium lobby rhythm (Stake/Shuffle: calm headers, consistent gaps, subtle card lift) */
.game-row-sect{margin-bottom:22px}
.sect-head h2{font-size:16.5px;font-weight:800;letter-spacing:.015em}
.sect-head .hi{opacity:.85}
.game-row-sect .sect-head .hi,.all-games-head .hi{color:var(--chrome-icon)}
.game-more .sect-head .hi{color:var(--chrome-icon)}
.row-viewall{font-weight:700;color:var(--muted,#9aa0aa);border-radius:8px}
.row-viewall:hover{color:#fff}
.game-row .g-card,.game-row a,.game-row button{transition:transform .18s ease,filter .18s ease}
.game-row .g-card:hover,.game-row a:hover,.game-row button:hover{transform:translateY(-3px)}
.af-dash .card{border-radius:8px}
/* ---- collapsed rail rebuild (Shuffle-style: uniform 46px items, even 10px rhythm, search=icon) 2026-07-10 ---- */
@media (min-width:981px){
body.lb-sidebar-collapsed .sidebar{padding:14px 9px}
body.lb-sidebar-collapsed .sb-head{justify-content:center;align-items:center;min-height:46px;margin:0 0 10px;padding:0;border-bottom:0}
body.lb-sidebar-collapsed .sb-toggle{width:46px;height:46px;min-height:46px;margin:0 auto;border-radius:6px;display:grid;place-items:center}
body.lb-sidebar-collapsed .sb-logo{display:none}
/* search collapses to a real icon button (no empty gap) */
body.lb-sidebar-collapsed .sb-search{height:46px;width:46px;min-height:46px;margin:0 auto;padding:0;justify-content:center;align-items:center;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);opacity:1;pointer-events:auto;transform:none;overflow:visible;cursor:pointer}
body.lb-sidebar-collapsed .sb-search-label{display:none}
body.lb-sidebar-collapsed .sb-search-button,body.lb-sidebar-collapsed .sb-pack-search{justify-content:center}
body.lb-sidebar-collapsed .sb-pack-search{position:relative}
body.lb-sidebar-collapsed .sb-pack-search-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
body.lb-sidebar-collapsed .sb-search svg{width:20px;height:20px;margin:0}
body.lb-sidebar-collapsed .sb-nav{align-items:center;gap:10px;padding:0}
body.lb-sidebar-collapsed .sb-nav button{width:42px;height:42px;min-height:42px;grid-template-columns:26px 0;justify-content:center;align-items:center;padding:0;gap:0;margin:0 auto;border-radius:6px}
body.lb-sidebar-collapsed .sb-nav button .sb-badge{top:6px;right:6px}
body.lb-sidebar-collapsed .sb-nav button::before{top:9px;bottom:9px}
}
/* ---- sidebar header = hamburger + Casino/Packs pill (Shuffle layout) 2026-07-10b ---- */
@media (min-width:981px){
.sb-head{display:flex;align-items:center;gap:6px;min-height:52px;margin:0 0 10px;padding:0;border-bottom:0}
.sb-toggle{background:transparent;border:0;box-shadow:none}
.sb-toggle{flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--chrome-icon);cursor:pointer}
.sb-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* uniform mode-icon box; packs webp gets object-fit + slight scale to match casino png */
/* COLLAPSED: header stacks -> hamburger, then Casino/Packs icons, all 46px centered */
body.lb-sidebar-collapsed .sb-head{flex-direction:column;gap:10px;min-height:0;margin:0 0 10px}
body.lb-sidebar-collapsed .sb-toggle{width:46px;height:46px;margin:0 auto}
}
/* ---- collapsed rail: flatten header cluster so everything is one even 10px column 2026-07-10c ---- */
@media (min-width:981px){
body.lb-sidebar-collapsed .sidebar{padding:14px 6px;gap:8px;align-items:center}
body.lb-sidebar-collapsed .sb-head{display:contents}
body.lb-sidebar-collapsed .sb-nav{gap:10px;padding:0;width:auto;align-items:center;flex:0 0 auto}
body.lb-sidebar-collapsed .sb-toggle,
body.lb-sidebar-collapsed .sb-search,
body.lb-sidebar-collapsed .sb-nav button{flex:0 0 44px!important;width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;margin:0!important;border-radius:6px;box-sizing:border-box}
/* collapsed rail = bare icons: the hamburger and search kept a filled chip
while every nav icon below them sits on nothing, so the two read as an
odd pair of buttons. Same rest/hover treatment as .sb-nav button.
!important because the collapsed-search chip is re-declared in several
later blocks (the 46px rail rebuild among them) that would win otherwise. */
body.lb-sidebar-collapsed .sidebar .sb-toggle,
body.lb-sidebar-collapsed .sidebar .sb-search{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
body.lb-sidebar-collapsed .sidebar .sb-toggle:hover,
body.lb-sidebar-collapsed .sidebar .sb-search:hover{background:var(--surface-2)!important;color:var(--ink)}
}
/* ---- one continuous header divider: sidebar line meets topbar + chat line at y=--topbar-h 2026-07-11 ---- */
@media (min-width:981px){
/* draw the divider across the sidebar at the exact topbar baseline so it reads as one line
(topbar draws x:sidebar-w→right, chat draws its own; this fills x:0→sidebar-w) */
/* topbar/chat draw their divider as an INNER border-bottom (sits 1px above the box edge),
so anchor the sidebar line 1px up to land on the exact same row */
.sidebar::before{content:"";position:absolute;left:0;right:0;top:calc(var(--topbar-h) - 1px);height:1px;background:var(--line);box-shadow:none;pointer-events:none;z-index:4}
/* hamburger owns the header band above the line; Casino/Packs sits below it */
body:not(.lb-sidebar-collapsed) .sb-head{height:calc(var(--topbar-h) - 14px);min-height:0;margin:0 0 12px}
/* collapsed: nudge the Casino/Packs shell down so the first icon clears the line */
}
/* The menu control is the sidebar's fixed anchor: expanding/collapsing changes
the content beside/below it, never the control's size or screen position. */
@media (min-width:1080px){
.sb-toggle:hover{transform:none}
body.lb-sidebar-collapsed .sb-toggle{margin-top:10px!important}
}
/* ---- signed-out get-the-app: phone peeking up from the sidebar's bottom-left corner (image IS the button) ---- */
.sb-getapp{display:none}
@media (min-width:981px){
/* only signed-out (guest) + expanded sidebar; the phone art sits in the empty space below the nav */
body.lb-guest:not(.lb-sidebar-collapsed) .sb-getapp{
display:block;position:absolute;left:50%;bottom:-372px;width:160px;height:auto;
margin:0;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;z-index:3;
transform:translateX(-50%);
transition:bottom .32s cubic-bezier(.22,1,.36,1)}
body.lb-guest:not(.lb-sidebar-collapsed) .sb-getapp img{display:block;width:100%;height:auto}
/* tall portrait phone: peeks at the bottom, rises on hover so its top lands just below Responsible Play */
body.lb-guest:not(.lb-sidebar-collapsed) .sb-getapp:hover{bottom:-169px}
}
/* ---------- @mention (Shuffle-style) ---------- */
.chat-compose{position:relative}
.mention-dd{position:absolute;bottom:calc(100% + 6px);left:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:5px;z-index:60;min-width:190px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.mention-dd button{display:block;width:100%;text-align:left;padding:8px 11px;border:0;background:transparent;color:#A78BFA;font:700 13.5px Urbanist,system-ui;border-radius:8px;cursor:pointer}
.mention-dd button:hover{background:#222226}
.msg-mention{color:#A78BFA;font-weight:800;cursor:pointer}
.msg-mention:hover{text-decoration:underline}
/* ---------- compact live Rain card ---------- */
.chat-rain{position:relative;overflow:hidden}
/* ---------- shared PACK chip in chat ---------- */
.sb-chip.sb-pack{display:grid;grid-template-columns:1fr auto;grid-template-areas:"head chev" "item chev" "foot chev";align-items:center;gap:2px 8px;text-align:left}
.sb-pack .sb-pack-head{grid-area:head;font-weight:800;font-size:13px;color:var(--lbp-ink,#f4f4f5)}
.sb-pack .sb-pack-item{grid-area:item;display:flex;align-items:center;gap:8px}
.sb-pack .sb-pack-item img{width:34px;height:34px;object-fit:contain;flex:none}
.sb-pack .sb-pack-item i{font-style:normal;font-size:12px;color:var(--muted,#9aa0a6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-pack .sb-pack-foot{grid-area:foot;display:flex;align-items:center;gap:10px;font-size:12px}
.sb-pack .sb-chev{grid-area:chev}
/* Multi-pack open (x2..x6): SAME card, same slot — the item row just runs
left-to-right inside it and scrolls sideways when the pulls don't fit.
min-width:0 on the grid item is what actually lets it shrink and scroll;
without it the strip stretches the whole chip and the chevron gets pushed off. */
.sb-pack .sb-pack-cell{display:flex;align-items:center;gap:6px;flex:none}
.sb-pack .sb-pack-cell i:empty{display:none}
.sb-pack .sb-pack-strip{min-width:0;overflow-x:auto;overflow-y:hidden;gap:6px;
scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:2px}
.sb-pack .sb-pack-strip::-webkit-scrollbar{height:4px}
.sb-pack .sb-pack-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}
.sb-pack .sb-pack-strip::-webkit-scrollbar-track{background:transparent}
.sb-pack .sb-pack-strip .lbp-voucher-face,.sb-pack .sb-pack-item .lbp-voucher-face{display:inline-flex;flex:none}
.sb-pack .sb-pack-strip .lbp-voucher-face .lbp-vf-ticket,.sb-pack .sb-pack-item .lbp-voucher-face .lbp-vf-ticket{width:34px;height:34px;object-fit:contain}
.sb-pack .sb-pack-n{font-style:normal;font-size:11px;font-weight:700;color:var(--muted,#9aa0a6);margin-left:5px}
/* ---------- pack snapshot in bet modal ---------- */
.bm-snapshot.bm-pack{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px}
.bm-pack .bm-pack-name{font-weight:800;font-size:15px}
.bm-pack .bm-pack-art img{width:120px;height:120px;object-fit:contain}
.bm-pack .bm-pack-item{font-size:13px;color:var(--muted,#9aa0a6)}
/* ---------- moderator shield badge ---------- */
.mod-badge{display:inline-flex;vertical-align:-2px;margin-left:5px;cursor:help}
.mod-badge svg{width:14px;height:14px}
.pp-name .mod-badge svg{width:18px;height:18px}
/* ===================================================================
WALLET MODAL (wm-*) — Deposit · Withdraw · Buy Crypto · Tip
Centered dialog on desktop, full sheet on small screens.
=================================================================== */
.wm-overlay{position:fixed;inset:0;z-index:1600;display:flex;align-items:flex-start;justify-content:center;
padding:max(4vh,20px) 14px 20px;background:rgba(4,4,6,.58);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
opacity:0;transition:opacity .18s;overflow-y:auto;overscroll-behavior:contain}
.wm-overlay.in{opacity:1}
.wm-card{width:min(500px,100%);position:relative;border-radius:8px;background:var(--rail);border:1px solid var(--line);
box-shadow:0 24px 60px -34px rgba(0,0,0,.92);transform:translateY(10px) scale(.985);transition:transform .18s;margin:auto 0;clip-path:none}
/* The docked utility panel keeps its watermark. Wallet flows stay clean. */
.desktop-panel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
background-image:var(--lb-logo);background-repeat:no-repeat;background-position:right 16px bottom 16px;background-size:120px auto}
.wm-overlay.in .wm-card{transform:none}
.wm-head{position:relative;overflow:hidden;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;background:var(--rail)}
.wm-tabs{position:relative;display:flex;align-items:center;gap:2px;padding:6px 52px 0 14px}
.wm-tab{position:relative;padding:14px 13px 13px;font:700 14.5px var(--f-body);color:var(--muted);white-space:nowrap;transition:color .15s}
.wm-tab:hover{color:var(--ink)}
.wm-tab.on{color:var(--selection-ink)}
.wm-tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:3px;background:var(--control-border)}
.wm-x{position:absolute;top:10px;right:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:6px;color:var(--muted);font-size:15px}
.wm-x:hover{background:rgba(255,255,255,.07);color:#fff}
.wm-body{padding:16px 18px 20px;display:flex;flex-direction:column;position:relative;z-index:1}
/* The modal card is 500px, but the bodies it hosts were written for the
full-width wallet SCREEN, where .pf-grid flips to two columns on a viewport
media query. Viewport width says nothing about this 464px container, so the
two `1fr` tracks kept their min-content floor (~245px each) and pushed the
Play for Free panel 57px past the card. minmax(0,1fr) lets the tracks
shrink; min-width:0 lets the flex children stop honouring min-content.
(.wallet-screen already carries the same minmax fix.) */
.wm-body>*{min-width:0}
.wm-body .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wm-body .dep2-wrap{max-width:100%}
.wm-lbl{display:flex;align-items:center;gap:8px;margin:13px 2px 7px;font:700 12.5px var(--f-body);color:var(--muted)}
.wm-lbl:first-child{margin-top:2px}
.wm-lbl-chips{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.wm-lbl-chips .chip-i{width:14px;height:14px;vertical-align:-2px}
.wm-lbl-right{margin-left:auto;font-weight:600;color:var(--faint)}
.wm-lbl-right .chip-i{width:13px;height:13px}
.wm-field{position:relative;display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border-radius:6px;
background:var(--surface-2);border:1px solid var(--line);color:var(--ink);text-align:left;width:100%;transition:border-color .15s,background .15s}
button.wm-field{cursor:pointer}
button.wm-field:hover{border-color:var(--line-2)}
/* Deposit is a display-first flow: its filled surfaces carry the resting
hierarchy, while hover/focus brings the edge back only for interaction. */
.wm-body[data-wm-tab="deposit"] .wm-field{border-color:transparent}
.wm-body[data-wm-tab="deposit"] .wm-field:hover{border-color:var(--line-2)}
.wm-body[data-wm-tab="deposit"] .wm-field:focus-within,
.wm-body[data-wm-tab="deposit"] button.wm-field:focus-visible{border-color:var(--focus)}
/* Withdraw uses filled surfaces for selectors and presets. Only the payout
address and amount remain framed inputs; interactive selectors may still
reveal their edge on hover/focus. */
.wm-body[data-wm-tab="withdraw"] .wm-dd>.wm-field,
.wm-body[data-wm-tab="withdraw"]>.wm-field.wm-static{border-color:transparent}
.wm-body[data-wm-tab="withdraw"] .wm-menu{border:0}
.wm-body[data-wm-tab="withdraw"]>.wm-field.wm-input,
.wm-body[data-wm-tab="withdraw"]>.wm-field.wm-amount{border-color:var(--line)}
.wm-select-tx{flex:1;min-width:0}
.wm-select-tx b{font-weight:700;font-size:14.5px}
.wm-coin{width:26px;height:26px;flex:none;display:grid;place-items:center}
.wm-coin img{width:24px;height:24px;object-fit:contain}
.wm-caret{width:18px;height:18px;flex:none;color:var(--muted);transform:rotate(0);transition:transform .16s ease}
.wm-dd.open .wm-caret{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.wm-caret{transition:none}}
.wm-payamt{margin-left:auto;font:600 13px var(--f-body);color:var(--faint);white-space:nowrap}
.wm-dd{position:relative}
.wm-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:6;display:none;max-height:262px;overflow-y:auto;
padding:6px;border-radius:6px;background:var(--surface-2);border:0;box-shadow:0 22px 50px -18px rgba(0,0,0,.85)}
.wm-dd.open .wm-menu{display:block}
.wm-opt{display:flex;align-items:center;gap:10px;width:100%;padding:11px 10px;border-radius:6px;color:var(--ink);text-align:left}
.wm-opt b{font-size:14px}
.wm-opt small{margin-left:auto;color:var(--faint);font-weight:700}
.wm-opt:hover{background:var(--surface-hi)}
.wm-opt.on{background:var(--surface-active)}
.wm-amount input,.wm-input input{flex:1;min-width:0;height:48px;background:none;border:0;outline:none;color:var(--ink);
font:700 15px var(--f-body);letter-spacing:.01em}
.wm-input input{font-weight:600}
.wm-amount b{font-weight:800;color:var(--muted)}
.wm-amount .chip-i{width:19px;height:19px}
.wm-withdraw-amount{gap:8px}
.wm-withdraw-amount .chip-i{width:21px;height:21px;flex:none}
.wm-withdraw-amount>b{color:var(--ink);font-size:15px;margin-left:1px}
.wm-amount.half{flex:1;min-width:0}
.wm-amount.grow{flex:1}
.wm-addr{min-height:52px;padding-right:8px}
.wm-addr code{flex:1;min-width:0;font:600 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);
word-break:break-all;padding:9px 0}
.wm-addr small{position:absolute;top:-8px;left:10px;padding:0 6px;background:var(--rail);color:var(--warning);font-weight:700;font-size:10.5px}
.wm-memo{margin-top:12px;border-color:rgba(246,183,86,.4)}
.wm-copy{width:var(--action-compact-height);flex:none;display:grid;place-items:center;padding:0}
.wm-copy.lb-action--secondary{border:0}
.wm-copy svg{width:17px;height:17px}
.wm-warn{display:flex;align-items:center;gap:8px;margin:11px 2px 0;color:var(--error);font:600 12.5px/1.35 var(--f-body);white-space:nowrap;overflow:hidden}
.wm-warn>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-warn svg{width:16px;height:16px;flex:none}
.wm-warn b{font-weight:800}
.wm-qr{display:grid;place-items:center;margin:16px auto 2px}
.wm-qr .crypto-deposit-qr{margin:0}
/* wallet deposit QR: Shuffle-style — no white card, white modules straight on the modal */
#walletModal .crypto-deposit-qr{background:none;border:0;box-shadow:none;padding:8px 0 0;margin:8px auto 0}
#walletModal .crypto-deposit-qr svg{background:transparent;border-radius:0;width:196px;height:196px}
#walletModal .crypto-deposit-qr svg rect{fill:transparent}
#walletModal .crypto-deposit-qr svg path{fill:#F2F5FA}
#walletModal .crypto-deposit-qr small:empty{display:none}
#walletModal .crypto-deposit-qr small{color:var(--faint)}
.wm-qr svg,.crypto-deposit-qr svg{width:188px;height:188px;border-radius:6px;background:#fff;padding:10px}
.wm-qr-skel .skel{width:188px;height:188px;border-radius:6px}
.wm-skel-line{display:block;width:70%;height:14px;border-radius:6px}
.wm-error-box{display:grid;gap:6px;justify-items:start;padding:14px;border-radius:6px;background:rgba(255,93,115,.07);border:1px solid rgba(255,93,115,.3)}
.wm-error-box b{font-size:14px}
.wm-error-box small{color:var(--muted)}
.wm-history{margin:16px auto 0;padding:6px 4px;color:var(--ink);font:700 13.5px var(--f-body);text-decoration:underline;text-underline-offset:4px}
.wm-history:hover{color:var(--purple-2)}
.wm-pcts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.wm-pcts button{width:100%;padding:0}
.wm-body[data-wm-tab="withdraw"] .wm-pcts .lb-action--secondary{background:var(--surface-hi);border:0;color:var(--ink)}
.wm-body[data-wm-tab="withdraw"] .wm-pcts .lb-action--secondary:hover:not(:disabled){background:var(--surface-active)}
.wm-meta-row{display:flex;align-items:center;gap:8px;margin:13px 2px 0;color:var(--muted);font:600 13px var(--f-body)}
.wm-meta-row b{color:var(--ink);font-weight:800}
.wm-meta-label{color:var(--muted)}
.wm-meta-value{color:var(--ink);font-weight:800}
.wm-meta-row svg{width:16px;height:16px;flex:none;color:var(--warning)}
.wm-meta-row.shield svg{color:var(--success)}
.wm-meta-note{color:var(--faint)}
.wm-hint.warn{margin:10px 2px 0;color:var(--warning);font:600 12.5px var(--f-body)}
.wm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px}
.wm-btn.block{width:100%;margin-top:15px}
.wm-provider{gap:12px}
.wm-provider-dot{width:11px;height:11px;flex:none;border-radius:50%;background:var(--purple);box-shadow:0 0 0 3px rgba(139,92,255,.22)}
.wm-provider-receive{display:flex;align-items:center;justify-content:flex-end;min-width:0;margin-left:auto;color:var(--ink);font:700 13.5px var(--f-body)}
.wm-receive-quote{display:inline-flex;align-items:center;gap:7px;color:var(--ink);white-space:nowrap}
.wm-receive-quote .wm-coin{width:20px;height:20px}
.wm-receive-quote .wm-coin img{width:19px;height:19px}
.wm-receive-quote b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.wm-quote-loading{display:inline-flex;align-items:center;min-width:96px}
.wm-quote-skeleton{display:block;width:92px;height:15px;border-radius:999px;background:linear-gradient(90deg,var(--surface-hi) 0%,var(--line-2) 50%,var(--surface-hi) 100%);background-size:200% 100%;animation:wmQuoteShimmer 1.1s ease-in-out infinite}
@keyframes wmQuoteShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.wm-quote-skeleton{animation:none}}
.wm-quote-state{color:var(--muted);font-weight:600;white-space:nowrap}
.wm-quote-retry{padding:5px 0;color:var(--muted);font:700 12.5px var(--f-body);text-decoration:underline;text-underline-offset:3px}
.wm-quote-retry:hover{color:var(--ink)}
.wm-quote-retry:focus-visible{outline:2px solid var(--action-focus);outline-offset:2px}
.wm-body[data-wm-tab="buy"] .wm-opt:hover{background:var(--surface-hi)}
.wm-paylogos{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;padding:13px 18px;
border-radius:6px;background:var(--surface-2);border:0}
.wm-paylogos img{height:17px;width:auto;opacity:.95}
.wm-disclaimer{margin:13px 4px 0;text-align:center;color:var(--faint);font:600 12px/1.55 var(--f-body)}
.wm-toggle-row{display:flex;align-items:center;gap:11px;margin:15px 2px 0;cursor:pointer;user-select:none}
.wm-toggle-row input{position:absolute;opacity:0;pointer-events:none}
.wm-toggle{position:relative;width:42px;height:24px;flex:none;border-radius:99px;background:var(--surface-hi);border:1px solid var(--line);transition:background .16s}
.wm-toggle::after{content:"";position:absolute;top:2.5px;left:3px;width:17px;height:17px;border-radius:50%;background:#8f939e;transition:transform .16s,background .16s}
.wm-toggle-row input:checked + .wm-toggle{background:var(--selection-accent);border-color:var(--selection-accent)}
.wm-toggle-row input:checked + .wm-toggle::after{transform:translateX(17px);background:#fff}
.wm-toggle-row span:last-child{font:700 14px var(--f-body);color:var(--ink)}
.wm-toggle-row small{display:block;font-weight:600;font-size:11.5px;color:var(--faint)}
.wm-tip-status-row{min-height:20px;margin:7px 2px 0}
.wm-tip-status{display:inline-flex;align-items:center;gap:7px;font:600 12.5px var(--f-body);color:var(--muted)}
.wm-tip-status.ok{color:var(--success)}
.wm-tip-status.bad{color:var(--error)}
.wm-tip-status img{width:20px;height:20px;border-radius:50%;object-fit:cover}
body.wm-open{overflow:hidden}
@media (max-width:560px){
.wm-overlay{padding:0;align-items:flex-end;overflow:hidden}
.wm-card{width:100%;height:calc(100dvh - var(--topbar-h,70px));max-height:calc(100dvh - var(--topbar-h,70px));
display:flex;flex-direction:column;border-radius:14px 14px 0 0;border:0;margin:0}
.wm-head{position:sticky;top:0;z-index:5;flex:0 0 auto;border-radius:14px 14px 0 0}
.wm-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.wm-tabs{padding-top:calc(env(safe-area-inset-top,0px) + 6px);overflow-x:auto;scrollbar-width:none}
.wm-x{top:calc(env(safe-area-inset-top,0px) + 10px);z-index:2;background:var(--rail)}
.wm-tab{padding:14px 10px 13px;font-size:13.5px}
.wm-body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
}
/* ---- Your Cart (PackDraw reference) 2026-07-15 ----
Inventory is the same desktop drawer as the compact Rewards surface. Keep
the shared panel geometry (flush to the topbar and viewport bottom) instead
of turning it into an inset card; only the cart-specific header/actions live
below. This gives the long item list one continuous, internal scroll lane. */
.dp-cart-head{gap:10px}
.dp-cart-head b{display:inline-flex;align-items:center}
.dp-cart-total{font-family:var(--f-disp,Urbanist);font-weight:700;font-size:15px;color:#cfd3dc;padding-left:10px;border-left:1px solid var(--line);font-variant-numeric:tabular-nums;margin-right:auto}
.desktop-panel-head{border-bottom:1px solid var(--line)}
.inv-empty{padding:56px 16px;text-align:center}
.inv-empty b{display:block;font:700 18px Urbanist;color:#e8eaf0;margin-bottom:8px}
.inv-empty p{margin:0;font:500 13.5px Urbanist;color:#8b90a0}
.inv-load-error{display:grid;justify-items:center;gap:9px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--error) 34%,var(--line));border-radius:8px}
.inv-load-error>svg{width:24px;height:24px;color:var(--error)}
.inv-load-error b{margin:0;color:var(--ink)}
.inv-load-error p{color:var(--muted)}
.inv-load-error .lb-action{margin-top:6px}
.inv-refresh-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 var(--inv-gut) 10px;padding:10px 12px;border-radius:7px;background:var(--surface-2);border-left:3px solid var(--error);color:var(--muted);font:600 12.5px/1.35 var(--f-body)}
/* SELECTION DOCK (2026-08-07). The strip used to sit above the grid at a fixed
118px whether or not anything was selected, purely so selecting could not
reflow the page. Docking it to the bottom of the panel gets the same
stability for free -- it overlays instead of pushing -- and hands the whole
first screenful back to the items. */
.inv-dock{position:sticky;bottom:0;z-index:6;display:flex;flex-direction:column;gap:10px;
margin:14px -14px -12px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
background:linear-gradient(180deg,transparent 0%,var(--rail) 22%);
border-top:1px solid var(--line)}
.inv-dock.empty{display:none}
.inv-selected-strip{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0}
.inv-strip-hint{font:600 13px Urbanist;color:#6f7484}
.inv-voucher-img{max-width:92px;max-height:92px;object-fit:contain}
.inv-strip-item .inv-voucher-img{max-width:58px;max-height:58px}
.inv-selected-strip::-webkit-scrollbar{display:none}
.inv-strip-item{position:relative;flex:0 0 auto;width:86px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 5px 7px;background:var(--surface-2);border:0;border-radius:6px}
.inv-strip-item img{max-width:58px;max-height:58px;object-fit:contain}
.inv-strip-item small{font:700 10.5px Urbanist;color:#cfd3dc;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px}
.inv-strip-item small .chip-i{width:11px;height:11px}
.inv-strip-x{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:6px;border:0;background:var(--surface-hi);color:#fff;font:700 10px Urbanist;cursor:pointer;display:grid;place-items:center}
.inv-voucher-face{width:96px;height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:6px;background:linear-gradient(160deg,#2a1020,#1a0a14);border:1px dashed rgba(255,77,184,.55)}
.inv-voucher-face small{font:700 8.5px Urbanist;letter-spacing:.12em;text-transform:uppercase;color:#b98aa6}
.inv-voucher-face b{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-disp,Urbanist);font-weight:800;font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.inv-voucher-face b .chip-i{width:13px;height:13px}
.inv-voucher-face em{font:700 9px Urbanist;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--pink,#F45DC4)}
.inv-strip-item .inv-voucher-face{width:58px;height:58px;border-radius:8px}
.inv-strip-item .inv-voucher-face small,.inv-strip-item .inv-voucher-face em{display:none}
.inv-strip-item .inv-voucher-face b{font-size:10px}
/* .inv-foot retired 2026-08-07 -- the dock is the footer at every width. */
/* Panel body is a column so the grid takes the slack and the dock lands on the
floor of the panel instead of floating just under the last row. */
#desktopPanel[data-screen="inventory"] .desktop-panel-body{height:100%;display:flex;flex-direction:column;overflow:hidden}
#desktopPanel[data-screen="inventory"] .desktop-panel-head{position:relative;flex:0 0 auto;background:var(--rail)}
#desktopPanel[data-screen="inventory"] .inv-screen{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding-top:5px!important}
#desktopPanel[data-screen="inventory"] .inv-grid-items{align-content:start;flex:1 1 auto}
/* Nothing in the cart may push the panel sideways. A single over-wide child
(the Sell button used to be one) turned the whole panel into a horizontal
scroller — owner 2026-08-07. min-width:0 lets flex children actually shrink. */
#desktopPanel[data-screen="inventory"] .inv-bar,
#desktopPanel[data-screen="inventory"] .inv-selrow{min-width:0;max-width:100%;flex-wrap:wrap;row-gap:8px}
#desktopPanel[data-screen="inventory"] .inv-bar-count{min-width:0;flex:1 1 auto}
/* mobile: cart is an overlay panel (game visible behind) with a sticky Sell/Withdraw footer */
@media (max-width:1079px){
body.lb-panel-open #desktopPanel[data-screen="inventory"]{display:block;position:fixed;left:6px;right:6px;bottom:6px;top:calc(var(--topbar-h,56px) + 6px);z-index:95;background:var(--rail);border-radius:8px;border:1px solid var(--line);overflow:hidden}
#desktopPanel[data-screen="inventory"] .desktop-panel-body{height:100%;overflow:hidden;padding-bottom:0}
/* The dock is sticky inside the scroller, so the old absolute footer and the
duplicate top Sell button are both gone. */
/* header styles are desktop-scoped elsewhere — restate them for the mobile cart */
#desktopPanel[data-screen="inventory"] .desktop-panel-head{position:relative;top:auto;z-index:4;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:14px 16px 10px;background:var(--rail);border-bottom:1px solid var(--line)}
#desktopPanel[data-screen="inventory"] .desktop-panel-head b{font-family:var(--f-disp,Urbanist);font-weight:700;font-size:17px;color:var(--ink,#F7F4F0)}
#desktopPanel[data-screen="inventory"] .desktop-panel-x{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
#desktopPanel[data-screen="inventory"] .desktop-panel-x svg{width:17px;height:17px;stroke-width:2}
#desktopPanel[data-screen="inventory"] .screen-inner{padding:12px 14px}
}
.pp-stats-hidden{display:flex;align-items:center;justify-content:center;gap:9px;margin:6px 0 12px;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px}
.pp-stats-hidden img,.pp-stats-hidden svg{width:22px;height:22px;object-fit:contain}
.pp-stats-hidden b{font:700 13.5px Urbanist;color:#cfd3dc}
/* cart open = page behind is frozen in place (owner 2026-07-16) */
body.lb-cart-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* Runtime SVG ticket. No HTML amount overlay; SVG carries exact face + amount. */
.lb-vt{position:relative;display:block;width:100%;aspect-ratio:551/491;overflow:visible}
.lb-vt img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
/* ---- sidebar header: naked hamburger + one unified Casino/Packs segment (owner ref 2026-07-25) ---- */
@media (min-width:981px){
/* Hamburger = bare glyph, no box; neutral ink strengthens on hover. */
body:not(.lb-sidebar-collapsed) .sb-toggle{background:transparent;border:0;box-shadow:none;color:var(--chrome-icon);transition:color .16s ease}
body:not(.lb-sidebar-collapsed) .sb-toggle:hover{color:var(--ink)}
/* Casino/Packs = single continuous pill, halves colored by selection */
}
/* ---- game cards, mines treatment rolled to the whole grid 2026-07-25 ----
1. No card frame. Three 1px light strokes were stacked here (border + two
inset rings) and read as a cover inside a cover; art now runs edge-to-edge
and the hover accent rides ON the artwork.
2. Scrim pulled back — it was crushing the bottom 62% of every cover to
near-black. Titles keep their black drop shadow for legibility.
3. One title face for all 21 (Kanit 900, uppercase) instead of the
Urbanist / Lilita One / Kanit mix. Long names keep their smaller clamp. */
/* 4. Keep the covers flat against the lobby surface. Hover is the lift and
nothing else; the cards do not cast a drop shadow. */
.gcard,.game-more-card{border:0;box-shadow:none}
/* Covers already carry their own edge colour. Keep the CSS perimeter clear so
the artwork runs cleanly to the rounded card edge. */
.gcard::after,.game-more-card::after{
background:transparent;
box-shadow:none;
transition:none}
/* Keep the expanded search comfortably below the header divider. The collapsed
rail reserves that same vertical footprint so nav rows expand sideways only. */
@media (min-width:1080px){
body:not(.lb-sidebar-collapsed) .sidebar{padding-left:8.5px}
body:not(.lb-sidebar-collapsed) .sb-head{margin:0 0 12px;transform:translateX(-12px)}
body:not(.lb-sidebar-collapsed) .sb-search{height:46px;min-height:46px;margin:2px 0 6px;padding-left:12px}
/* 26 -> 20 (owner 2026-08-08: "make the left side bar magnifying glass
smaller"). At 26 it was the biggest glyph in the rail, four pixels over the
22px nav icons directly beneath it, and its stroke-width dropped to 1.5 to
compensate — so it read as both oversized and thinner than everything else. */
body:not(.lb-sidebar-collapsed) .sb-search svg{width:20px;height:20px}
/* Restored 2026-07-30: the nav-labels pass set this to `0 0 26px`, which both
opened a 26px gap under the collapsed search icon (owner: "massive gap"
before Home) and dropped the `auto` side margins that centre the 46px
button in the rail. Back to the base rule's spacing — see the collapsed
.sb-search rule above. */
body.lb-sidebar-collapsed .sb-search{margin:0 auto!important}
/* THE rail scroller, and it starts UNDER the search. .sidebar itself stays
overflow:hidden (lb-shell.css owns that for the collapse animation), so the
toggle, the Packs|Battles pair and the search field are pinned and only the
nav lists move -- scrolling the whole rail took the search with it.
Scrollbars stay hidden site-wide; wheel/trackpad/keyboard all work.
overscroll-behavior stops the scroll chaining into the page at either end. */
.sb-scroll{display:flex;flex-direction:column;flex:1 1 0;min-width:0;width:100%;
min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
gap:10px;scrollbar-width:none}
.sb-scroll::-webkit-scrollbar{width:0;height:0}
body.lb-sidebar-collapsed .sb-scroll{gap:8px;align-items:center}
body:not(.lb-sidebar-collapsed) .sb-nav{gap:10px;padding-top:0}
body:not(.lb-sidebar-collapsed) .sb-nav button{padding-left:9px}
body:not(.lb-sidebar-collapsed) .sb-line{margin:6px 0}
body.lb-sidebar-collapsed .sb-nav,
body:not(.lb-sidebar-collapsed) .sb-nav{flex:0 0 auto;min-height:0;overflow:visible;padding:0;width:100%}
/* Home sits in its own .sb-nav so the rail's button rules still style it, but
.sb-nav carries flex:1 to push the list to fill the column. With two navs
that free space was SPLIT — which is the ~350px hole that opened under Home.
Only the main list should grow. */
body.lb-sidebar-collapsed .sb-nav.sb-nav-top,
body:not(.lb-sidebar-collapsed) .sb-nav.sb-nav-top{flex:0 0 auto;overflow:visible}
/* The search row is not a .sb-nav button, so nothing held it to the same left
rhythm: it sat 3px further in, its glyph was 6px narrower than a .sb-ico and
its label landed 7px left of every nav label. Match the nav geometry so the
icon column and the text column are single straight lines. */
body:not(.lb-sidebar-collapsed) .sb-search{padding-left:9px;gap:13px;margin:2px 0 2px}
body:not(.lb-sidebar-collapsed) .sb-search-ic{width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto}
/* 20px, deliberately two under the 22px .sb-ico glyphs (owner 2026-08-08:
"make the left side bar magnifying glass smaller"). It used to match them at
26 — this is the one glyph the owner wants reading as smaller than the nav,
because it labels a field rather than a destination. stroke-width 1.9 rather
than the nav's 1.5: a smaller glyph drawn at the same stroke reads lighter,
and 1.9 at 20px puts the same amount of ink on screen as 1.5 at 26px. */
body:not(.lb-sidebar-collapsed) .sb-search-ic>svg{width:20px;height:20px;display:block;stroke-width:1.9}
body.lb-sidebar-collapsed .sb-search-ic{display:grid;place-items:center}
.sb-getapp{display:none!important}
}
/* ---- icon navigation tooltips: white reference bubble, desktop only ---- */
@media (min-width:1080px) and (hover:hover){
body.lb-sidebar-collapsed .sidebar,
body.lb-sidebar-collapsed .sb-nav{overflow:visible}
body.lb-sidebar-collapsed .sidebar [data-tooltip],
.topbar [data-tooltip]{position:relative}
.topbar [data-tooltip]::after{
content:attr(data-tooltip);position:absolute;z-index:2100;display:block;width:max-content;max-width:190px;
padding:9px 11px;border-radius:7px;background:#fff;color:#090909;
font:600 12px/1.15 var(--f-body);letter-spacing:0;text-align:center;white-space:nowrap;
box-shadow:0 6px 18px rgba(0,0,0,.28);pointer-events:none;visibility:hidden;opacity:0;
transition:opacity .12s ease,transform .12s ease}
body.lb-sidebar-collapsed .sb-search[data-tooltip]::before,
body.lb-sidebar-collapsed .sb-nav button[data-tooltip] .sb-ico::after{
content:"";position:absolute;z-index:2101;top:50%;width:0;height:0;
border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:7px solid #fff;
pointer-events:none;visibility:hidden;opacity:0;transform:translate(4px,-50%);
transition:opacity .12s ease,transform .12s ease}
body.lb-sidebar-collapsed .sb-search[data-tooltip]::before{left:calc(100% + 6px)}
body.lb-sidebar-collapsed .sb-nav button[data-tooltip] .sb-ico::after{left:calc(100% + 13px)}
body.lb-sidebar-collapsed .sb-search[data-tooltip]:hover::before,
body.lb-sidebar-collapsed .sb-search[data-tooltip]:focus-within::before,
body.lb-sidebar-collapsed .sb-nav button[data-tooltip]:hover .sb-ico::after,
body.lb-sidebar-collapsed .sb-nav button[data-tooltip]:focus-visible .sb-ico::after{
visibility:visible;opacity:1;transform:translate(0,-50%)}
.topbar [data-tooltip]::after{
top:calc(100% + 10px);left:50%;transform:translate(-50%,4px)}
.topbar [data-tooltip]::before{
content:"";position:absolute;z-index:2101;top:calc(100% + 4px);left:50%;width:0;height:0;
border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #fff;
pointer-events:none;visibility:hidden;opacity:0;transform:translate(-50%,4px);
transition:opacity .12s ease,transform .12s ease}
.topbar [data-tooltip]:hover::after,
.topbar [data-tooltip]:focus-visible::after,
.topbar [data-tooltip]:hover::before,
.topbar [data-tooltip]:focus-visible::before{
visibility:visible;opacity:1;transform:translate(-50%,0)}
.tb-profile[data-tooltip]{overflow:visible}
}
@media (prefers-reduced-motion:reduce){
[data-tooltip]::before,[data-tooltip]::after{transition:none!important}
}
.gcard .scrim{display:none}
.game-more-card::before{background:none}
/* The flat Originals masters contain the visible game name and the
LUCKBATTLE ORIGINALS line. Keep the DOM title for assistive technology, but
do not draw it a second time over the artwork. */
.gcard .gtitle,.game-more-card .gtitle{
position:absolute!important;width:1px!important;height:1px!important;
padding:0!important;margin:-1px!important;overflow:hidden!important;
clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
white-space:nowrap!important;border:0!important}
/* must carry a vibe class to outrank `.gcard .gtitle.vibe-impact` (0,3,0),
which is what was still forcing Urbanist on crash and Lilita One on plinko.
Owner call 2026-07-26: one tile font, Urbanist, matching the rest of the site.
Urbanist 900 is wider than Kanit 900 at a given size, so the step comes down. */
.gcard .gtitle.vibe-clean,.gcard .gtitle.vibe-impact,.gcard .gtitle.vibe-playful,
.game-more-card .gtitle.vibe-clean,.game-more-card .gtitle.vibe-impact,.game-more-card .gtitle.vibe-playful{
font-family:var(--f-disp);font-weight:800;text-transform:uppercase;
/* Owner 2026-08-07: single-word tiles read small next to the two-line ones.
Matched to the .gt-multi step (15cqw) so one-line and two-line titles are
the same size. Measured ceiling: BLACKJACK, the longest single word, needs
93px of the 103px title box at 15cqw -- and because both the type and the
box are container-relative, that headroom holds at every card width. */
letter-spacing:.01em;font-size:clamp(11px,15cqw,24px)}
/* long names still need the smaller step or they wrap */
.gcard .gtitle.title-advanced-dice,.gcard .gtitle.title-chicken-road,
.gcard .gtitle.title-lucky-packs,.gcard .gtitle.title-video-poker,
.game-more-card .gtitle.title-advanced-dice,.game-more-card .gtitle.title-chicken-road,
.game-more-card .gtitle.title-lucky-packs,.game-more-card .gtitle.title-video-poker{
font-size:clamp(9.5px,10.2cqw,21px);line-height:.96}
/* A name with a space can spend a second line, so it does not have to shrink to
stay on one. Must outrank the .title- steps above, hence the vibe class in
the selector. Owner 2026-08-07: "you can say Video then below that Poker". */
.gcard .gtitle.gt-multi.vibe-clean,.gcard .gtitle.gt-multi.vibe-impact,.gcard .gtitle.gt-multi.vibe-playful,
.game-more-card .gtitle.gt-multi.vibe-clean,.game-more-card .gtitle.gt-multi.vibe-impact,.game-more-card .gtitle.gt-multi.vibe-playful{
font-size:clamp(13px,15cqw,26px);line-height:.94}
/* each word owns its own line once the box is too narrow for both */
.gtitle.gt-multi .title-word{flex:0 1 auto}
/* ---- home headline tiles: Lucky Packs + Pack Battles (2026-07-25) ----
The lobby showed only casino games; the half the brand is named after had no
tile, row or grid entry anywhere on home. Flat purple chrome, no gradients,
no glow — the pack art does the talking. */
.home-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px}
.home-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;padding:16px 18px;
border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface-2);overflow:hidden;
text-decoration:none;color:#fff;cursor:pointer;transition:border-color .16s ease,background .16s ease}
.home-tile:hover{border-color:rgba(139,92,255,.42);background:var(--surface-3)}
.home-tile:hover .ht-art{transform:translateY(-3px)}
.home-tile:active .ht-art{transform:translateY(0)}
.home-tile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Tile art (torn pack + items bursting out). object-fit:contain, NOT cover:
the art is ~2.2:1 against a ~3.5:1 tile, so cover was slicing a third off the
top and bottom. Contained + right-aligned shows all of it and leaves the left
clear for the label and icon, which is how the art was composed. */
/* fill the card edge to edge — no letterbox band. The tile is wider than the
art, so cover crops top/bottom; each tile anchors the crop on its own subject
(the packs art sits low in frame, the battle packs are centred). */
.home-tile .ht-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
z-index:0;pointer-events:none;transition:transform .3s ease}
/* anchored high so the tops of the bags and the shoe stay in frame — the trade
is the lower part of each pack (the "10% LOUIS VUITTON" strip) sliding out */
.ht-packs{aspect-ratio:960/508}
.ht-packs .ht-bg{object-position:center}
/* battles art is the full uncropped frame again, anchored near the top so the
shoe and bag tops stay in — the pack bottoms slide out instead */
.ht-battles{aspect-ratio:960/447}
.ht-battles .ht-bg{object-position:center}
.home-tile:hover .ht-bg{transform:scale(1.04)}
.home-tile::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg,rgba(6,6,8,.86) 0%,rgba(6,6,8,.55) 26%,rgba(6,6,8,.12) 48%,rgba(6,6,8,0) 66%)}
/* Icons ride ON TOP of the art rather than being baked in, so the art can be
swapped without redrawing them. Swords sit in the gap the battle art leaves
between the two packs; the packs icon sits in the empty left of its art. */
.home-tile .ht-icon{position:absolute;z-index:2;pointer-events:none;
filter:drop-shadow(0 2px 10px rgba(0,0,0,.85));transition:transform .3s ease}
.home-tile:hover .ht-icon{transform:scale(1.06)}
.ht-icon-vs{width:clamp(38px,7.5%,60px);height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
.home-tile.ht-battles:hover .ht-icon-vs{transform:translate(-50%,-50%) scale(1.06)}
.ht-icon-packs{width:clamp(30px,6%,46px);height:auto;left:18px;top:16px;opacity:.95}
@media (max-width:860px){
.ht-icon-packs{left:15px;top:13px}
}
.home-tile .ht-tx{position:relative;z-index:2;display:block;min-width:0}
/* tile icon sits directly above its label; both tiles share one size so the
two cards read as a matched pair */
.home-tile .ht-ico{display:block;width:34px;height:34px;margin:0 0 8px;object-fit:contain;
filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));transition:transform .3s ease}
.home-tile:hover .ht-ico{transform:translateY(-2px)}
@media (max-width:919px){.home-tile .ht-ico{width:25px;height:25px;margin-bottom:4px}}
.home-tile .ht-tx b{display:block;font-family:var(--f-disp);font-weight:800;font-size:21px;line-height:1.1;letter-spacing:-.01em}
.home-tile .ht-tx small{display:block;margin-top:3px;color:var(--muted);font-size:12.5px;font-weight:600}
.ht-art{position:absolute;inset:0 0 auto auto;z-index:1;display:block;width:58%;height:100%;pointer-events:none;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.ht-cov{position:absolute;top:50%;width:96px;object-fit:contain}
.ht-packs .ht-cov.a{right:8%;transform:translateY(-54%) rotate(-8deg);z-index:3}
/* fully opaque, no drop shadow: the fanned packs used to fade back (.92/.72)
and cast a dark halo, which read as see-through packs on a smudged tile.
Depth comes from the stacking order and rotation alone. */
.ht-packs .ht-cov.b{right:28%;transform:translateY(-48%) rotate(3deg);z-index:2}
.ht-packs .ht-cov.c{right:47%;transform:translateY(-44%) rotate(12deg);z-index:1}
.ht-art-vs{display:flex;align-items:center;justify-content:center;gap:6px}
.ht-art-vs .ht-cov{position:static;top:auto;right:auto}
.ht-art-vs .ht-cov.l{order:1;transform:rotate(-11deg)}
.ht-vs{order:2;flex:0 0 auto;width:52px;height:52px;transform:none;
fill:none;stroke:#F6F7FB;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 2px 7px rgba(0,0,0,.9))}
.ht-art-vs .ht-cov.r{order:3;transform:rotate(11deg)}
@media (max-width:919px){
:root{--mobile-feature-height:clamp(78px,12vw,86px)}
/* stay 2-up on phones at roughly half the old height — one stacked pair of
full-width tiles pushed the game grid below the fold (owner ref 2026-07-26) */
.home-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.home-tile{min-height:var(--mobile-feature-height);padding:9px 11px}
.home-tile .ht-tx b{font-size:15px;line-height:1.05}
.home-tile .ht-tx small{display:none}
/* art fills the tile and stays full size — the label rides over it on a scrim
instead of being given its own column (owner ref 2026-07-26) */
.ht-art{inset:0;width:100%;display:flex;align-items:center;justify-content:center}
.ht-packs .ht-cov{position:static;top:auto;right:auto;width:64px;margin:0 -10px}
.ht-packs .ht-cov.a{transform:rotate(-8deg);z-index:3}
.ht-packs .ht-cov.b{transform:rotate(3deg);z-index:2}
.ht-packs .ht-cov.c{display:block;transform:rotate(12deg);z-index:1}
.ht-art-vs{gap:2px}
.ht-art-vs .ht-cov{width:60px}
.ht-vs{width:34px;height:34px}
/* keeps the title legible where it crosses the pack art */
.home-tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(10,11,14,0) 34%,rgba(10,11,14,.86) 100%)}
.home-tile .ht-tx b{text-shadow:0 1px 4px rgba(0,0,0,.85)}
}
@media (min-width:561px) and (max-width:919px){
.home-tile{min-height:var(--mobile-feature-height)}
.home-tile .ht-tx b{font-size:16px}
.home-tile .ht-tx small{display:none}
.ht-cov{width:62px}
.ht-vs{width:32px;height:32px}
}
/* ============================================================================
MOBILE "PLAY FOR FREE" TAB — compress (owner ref 2026-07-26).
The free tab was the tallest wallet tab and drove the whole modal's height.
Desktop keeps the full copy; this only trims the phone layout.
Appended at EOF on purpose — earlier .pf-* / .wb-free rules are declared
further down the file and would win on source order.
========================================================================== */
.pf2-h-short{display:none}
.pf2-fine-short{display:none}
.pf-t-sm{display:none}
.pf-t-lg{display:inline}
@media (max-width:640px){
/* hero: "PLAY FOR FREE" + "No deposit needed." and nothing else */
.wb-free .pf2-hero h3:not(.pf2-h-short){display:none}
.wb-free .pf2-hero p:not(.pf2-fine-short){display:none}
.wb-free .pf2-h-short{display:block;font-size:15px;line-height:1.3;margin:0}
.wb-free .free-balance{display:none}
.wb-free .pf2-hero{gap:0}
/* faucet: drop the trailing explainer */
.wb-free .faucet-note{display:none}
/* tiles: bolded label only — no description, no Open pill */
.wb-free .pf-tx small{display:none}
.wb-free .pf-cta{display:none}
.wb-free .pf-tile{padding:10px 12px;gap:10px}
.pf-t-lg{display:none}
.pf-t-sm{display:inline}
/* with the descriptions gone the tiles are short and 2-up: pin the chevron to
the right edge so it can't sit flush against the label, and size the label
so most fit on one line. */
.wb-free .pf-tx b{font-size:12.5px;line-height:1.25}
.wb-free .pf-arrow{margin-left:auto}
/* sweeps disclaimer rides under the headline instead of trailing the card */
.wb-free .pf2-fine-short{display:block;margin:6px 0 0;font-size:10.5px;line-height:1.4;font-weight:600;color:var(--faint)}
.wb-free .pf2-fine-short a{color:var(--faint);text-decoration:underline}
.wb-free .wb-fine{display:none}
}
/* filter chips ~20% smaller on phones (owner ref 2026-07-26) */
@media (max-width:640px){
.fchip{padding:4px 8px;font-size:10.5px;gap:4px;border-radius:6px}
.fchip svg{width:12px;height:12px;margin-right:2px}
.fchip-img{width:14px;height:14px}
}
/* Phones scroll these rows by swipe, so the prev/next chevrons are dead weight —
two buttons per row across every category. View all stays: it's the only way to
reach the whole category without repeated swipes. (owner ref 2026-07-26) */
@media (max-width:640px){
.row-head .row-nav{display:none}
.row-head .row-viewall{margin-left:auto;padding-right:2px}
}
/* ---- badge frame: avatar + small rank badge overlaid bottom-right ----
(contract: agent B emits ) */
.lb-bframe{position:relative;display:inline-flex}
.lb-bframe>img.lb-bframe-rank{position:absolute;right:-3px;bottom:-3px;width:45%;height:45%;
object-fit:contain;border:0;background:transparent;border-radius:0;pointer-events:none;
transform:scale(1.4);transform-origin:right bottom}
/* ============================================================================
ONE AVATAR SHAPE, EVERYWHERE (owner 2026-08-08)
Every profile picture in the product is the same circle at the same scale,
and the picture FILLS it edge to edge. `contain` was the old default, which
letterboxed anything that was not already square — that is the black-edged
result the owner kept seeing. `cover` crops instead of padding, and a solid
backdrop means even a transparent PNG lands on the circle rather than on
whatever is behind it.
Applies equally to uploaded pictures, the auto-assigned faces and bot
portraits — they are all just images in the same frame.
========================================================================= */
.lb-bframe{border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--surface-2)}
.lb-bframe>img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* The rank badge hangs OUTSIDE the circle, so its frame must not clip it. Only
chat renders one (bet feeds, the leaderboard and the race are picture-only). */
.lb-bframe:has(>img.lb-bframe-rank){overflow:visible}
/* Private mode: the incognito mark, never a face and never a rank badge (owner
has asked for this repeatedly — 2026-08-08 the loudest). It is a GLYPH, not a
photo, so it sits contained and inset inside the same circle rather than being
cropped to fill it like a picture. */
.lb-bframe.priv{background:var(--surface-2);display:grid;place-items:center}
.lb-bframe.priv>img{width:66%;height:66%;object-fit:contain;border-radius:0;opacity:.85}
.lb-bframe.bot>.lbx-rank{border-radius:50%;object-fit:cover}
/* ============================================================================
-- ladder screen -- (Wave 2)
The full rank ladder: one chamfered .card band per tier, sub-level badges
inside, the player's current band accented with a 3px purple seam-skewed
left bar. Brand tokens only — no new colors, flat fills, no glow.
========================================================================== */
.ladder-bands{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.ladder-band{position:relative;padding:12px 14px}
.ladder-band.cur{border-color:rgba(139,92,255,.45)}
/* Seam bar and title seam stand down on the ladder (owner call 2026-07-30).
The current tier is still marked by its border colour and the YOU chip. */
.ladder-band.cur::before{content:none}
.ladder-band-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ladder-band-head b{font-size:15px;font-weight:800}
.ladder-band-rk{width:30px;height:30px;object-fit:contain}
.ladder-band-me{margin-left:auto;font-size:11px;font-weight:800;color:var(--purple);letter-spacing:.05em;text-transform:uppercase}
.ladder-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.ladder-sub{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;text-align:center;background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r);clip-path:none}
.ladder-sub img{width:36px;height:36px;object-fit:contain}
.ladder-sub b{font-size:11.5px;font-weight:800}
.ladder-sub small{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ladder-sub:not(.done):not(.cur){opacity:.55}
.ladder-sub.cur{border-color:var(--purple);opacity:1}
.ladder-you{font-size:9.5px;font-weight:800;line-height:1;color:#fff;background:var(--purple);padding:3px 7px;border-radius:4px;letter-spacing:.06em;text-transform:uppercase}
/* lock-toast inline action: flat text link into the ladder */
.toast-act{display:inline;padding:0;margin-left:2px;background:none;border:0;color:var(--purple-2);font-weight:800;font-size:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* -- the tally: session scoreboard strip at the top of Live Bets (Wave 2).
Hidden until the first settled round of the session; numbers get a single
150ms transform pop on change — nothing else moves. -- */
.lb-tally{display:none;align-items:center;justify-content:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.lb-tally.on{display:flex}
.lb-tally b{display:inline-block;margin-left:5px;font-weight:800;color:var(--ink)}
.lb-tally-side.luck b{color:var(--error)}
.lb-tally-side.you b{color:var(--gold)}
.lb-tally-dash{color:var(--faint)}
.lb-tally b.pop{animation:lbTallyPop .15s cubic-bezier(.34,1.56,.64,1)}
@keyframes lbTallyPop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
.lb-tally b.pop{animation:none}
}
/* ==========================================================================
Cover hover motion — per-game character (Wave 4)
The covers are flat single images: there is no isolated wheel/dice layer to
move on its own. So the WHOLE image is transformed, and the motion is picked
per game to suit the subject. Because every cover is a centred object on a
dark stage, a rotate on a radially symmetric subject (roulette, wheel,
coinflip) reads as that object spinning — which is the effect asked for.
Driven by a transition on the hover state, never a keyframe animation, so
mouse-out reverses back through the same spring instead of snapping. Gated
to real hover pointers so nothing sticks after a tap on touch.
Overrides the pre-existing .24s/scale(1.04) cover hover (css/app.css:582,600
for .gcard and :698,704 for .game-more-card) by equal specificity + later
source order; the existing saturate/brightness filter pop is re-declared in
the transition and left to apply untouched.
========================================================================== */
/* Per-game hover TILT and animated cover clips are both retired. Static covers
keep only the plain card lift in .gcard:hover. */
/* Reduced motion: covers hold perfectly still. Placed after the per-game rules
so it wins on source order at equal specificity. */
@media (prefers-reduced-motion:reduce){
.gcard img.cover,
.game-more-card img[data-g]{transition:none}
.gcard:hover img.cover[data-g],
.game-more-card:hover img[data-g]{transform:none}
.gcard:hover img.cover,
.game-more-card:hover img{transform:none}
}
/* ---- home tile hover clip + tile bounce (2026-07-27) ----
The battles tile's art now has a 2.6s silent loop layered over it. The static
stays underneath as the resting frame, so nothing pops in
while the file downloads (the