/* ── Google Sans Flex ── */ @font-face { font-family: 'Google Sans Flex'; src: url('GoogleSansFlex.ttf') format('truetype'); font-weight: 100 900; font-display: swap; } /* ── Originals Design System Tokens ── */ :root { /* Colors */ --bg: #171717; --bg-secondary: #171717; --surface-default: #262626; --surface-raised: #404040; --surface-overlay: #171717; --border-default: #262626; --border-strong: #525252; /* Content */ --content-primary: #ffffff; --content-secondary: #d4d4d4; --content-tertiary: #737373; --content-disabled: #525252; --content-inverse: #171717; /* Brand */ --brand-primary: #ffd106; --brand-rgb: 255, 209, 6; /* brand-primary as r,g,b for glows/tints — rgba(var(--brand-rgb), a) */ --brand-secondary: #fbbf24; --brand-highlight: #fcd34d; --brand-border: #ccab18; /* Action / CTA accent — decoupled from --brand-primary so a brand can use a different colour for its primary buttons than for its arena/logo accent. Default: buttons follow the brand accent (yellow). Aviator overrides to green. */ --action-primary: var(--brand-primary); --action-text: var(--content-inverse); /* Status */ --status-success: #22c55e; --status-error: #f43f5e; /* Shadow */ --shadow-neutral: #171717; /* Legacy aliases */ --brand: #ffd106; --red: #f43f5e; --green: #22c55e; --amber: #ffd106; --tx: #ffffff; --tx2: #d4d4d4; --tx3: #737373; --card: #171717; --card2: #262626; --elev: #262626; --brd: #262626; --brd2: #404040; --bg-old: #0d0d0d; --blue: #ffd106; --purple: #ffd106; /* Typography */ --font-primary: 'Google Sans Flex', system-ui, sans-serif; --font-mono: 'Google Sans Flex', monospace; --font: var(--font-primary); --mono: var(--font-mono); /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 6px; --space-8: 8px; --space-12: 12px; /* Font sizes */ --font-size-2xs: 10px; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; /* Responsive tokens (mobile first) */ --pad: 12px; --gap: 8px; --die-size: 56px; --btn-h: 40px; --radius: 16px; } /* ── MyBC brand ── primary CTA (Place a Bet) is MyBC orange #FF7B17. */ :root.brand-mybc { --action-primary: #FF7B17; --action-text: #FFFFFF; /* white label on the orange CTA */ } /* ── Aviator brand ── Same dark theme as the default; only the brand (primary) colour swaps to Aviator crimson and on-brand text flips to white. Activated by app.jsx adding `brand-aviator` to from the ?brand=aviator launch param. Every brand accent reads var(--brand-primary) / rgba(var(--brand-rgb), …), so this single block re-themes the whole game. Semantic colours (win/lose/push) are untouched. */ :root.brand-aviator { /* Arena / logo / accent crimson (Figma new-aviator: #AF292A + hotter glow reds) */ --brand-primary: #AF292A; --brand-rgb: 175, 41, 42; --brand-secondary: #c1352f; --brand-highlight: #d94a42; --brand-border: #7c2824; --brand: #AF292A; --amber: #AF292A; --blue: #AF292A; --purple: #AF292A; /* Dual-accent: primary CTAs are GREEN in the new aviator design, not crimson. */ --action-primary: #37A003; --action-text: #ffffff; /* dark crimson is a dark surface → on-brand text must be light, not #171717 */ --content-inverse: #ffffff; } /* Aviator's deep-space background: a top-centred teal glow (Figma bg-on-top) layered over the top-down linear gradient (designer spec). The starfield canvas sits on this and the stars draw over it — the animation is untouched; this only enriches the STATIC backdrop the stars float on. */ :root.brand-aviator body { background: radial-gradient(150% 62% at 50% -16%, #13252F 0%, rgba(15, 29, 40, 0) 60%), linear-gradient(180deg, #0A131A 0%, #000000 45%, #000000 100%); background-attachment: fixed; } .starfield-bg { position: fixed; inset: 0; /* z-index:0 (not -1) so it renders ABOVE an opaque html background on iOS WebKit — a negative-z-index fixed layer is painted behind the root bg there, which both hid the animation and left the safe-area white. The game content is lifted to z-index:1 so it still sits on top of the starfield. */ z-index: 0; pointer-events: none; background: linear-gradient(180deg, #0A131A 0%, #000000 45%, #000000 100%); } /* Keep all game content above the z-index:0 starfield (aviator only). */ :root.brand-aviator .game-arena-center, :root.brand-aviator .m-controls { position: relative; z-index: 1; } /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Body & Layout ── */ /* Dark root so the iOS safe-area insets (status bar / home indicator) under viewport-fit=cover render #171717, not white. Safe to be opaque because the aviator starfield canvas sits at z-index:0 (not -1) with the game content lifted above it — see .starfield-bg / .game-arena-center / .m-controls. */ html { background: #171717; } body { height: 100dvh; background: var(--bg); color: var(--content-primary); font-family: var(--font-primary); display: flex; justify-content: center; -webkit-font-smoothing: antialiased; overflow: hidden; /* Casino-style: nothing in the UI is text-selectable by default. Avoids the player accidentally highlighting chip totals / bet amounts while mashing the table. The Provably Fair surfaces below opt back in (.pf-result, .pf-input-text, .hist-seed-* etc.) so players can copy server seeds / hashes for independent verification. */ user-select: none; -webkit-user-select: none; } /* Anything inside the Provably Fair drawer or the per-round history's seed reveal is meant to be copied. Re-enable text selection on those. */ .pf-result, .pf-result *, .pf-input, .pf-input *, .hist-seed-group, .hist-seed-group *, .hist-seeds, .hist-seeds * { user-select: text; -webkit-user-select: text; } #root { width: 100%; max-width: 520px; height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* ── Header ── */ .header { display: flex; align-items: center; justify-content: space-between; padding: 8px; flex-shrink: 0; gap: 8px; } .header-left { display: flex; align-items: center; gap: 8px; } .header-right { display: flex; align-items: center; gap: 8px; } .icon-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-default); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.15s ease; -webkit-tap-highlight-color: transparent; } .icon-btn:hover { background: var(--surface-raised); } .icon-btn:active { transform: scale(0.92); } .icon-btn svg { width: 16px; height: 16px; } .history-btn { height: 32px; padding: 0 12px 0 8px; border-radius: var(--radius-md); background: var(--surface-default); border: none; display: flex; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0; transition: all 0.15s ease; -webkit-tap-highlight-color: transparent; } .history-btn:hover { background: var(--surface-raised); } .history-btn:active { transform: scale(0.95); } .history-btn svg { width: 16px; height: 16px; } .history-btn span { font-family: var(--font-primary); font-weight: 600; font-size: var(--font-size-sm); color: var(--content-primary); line-height: 1.5; } /* ── Brand Logo ── */ .brand-logo { display: flex; justify-content: center; padding: 4px 0 6px; flex-shrink: 0; } .brand-logo-img { width: 171px; height: 38px; } /* ── Game Arena ── */ .game-arena-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0; } .game-arena { flex: 1; display: flex; flex-direction: column; background: #0d0d0d; border-radius: var(--radius-sm); padding: 0; position: relative; min-height: 0; } /* ── Arena Header (icons inside game area — desktop only) ── */ .arena-header { display: none; } /* ── Arena Layout ── */ .arena-layout { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; gap: 0; margin-top: -40px; transform: translateY(12px); /* mobile: dice-matched position nudged 32px down (was -20px) */ } .arena-label-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; z-index: 5; } .arena-label-row .chip { min-width: 50px; height: 22px; padding: 4px; font-size: 10px; line-height: 140%; box-shadow: 0px 1px 0px #171717; border-radius: 8px; } .arena-top-labels { display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 5; margin-bottom: -11px; order: 1; position: relative; } .arena-score--top { order: 2; } .arena-cards--top { order: 3; } .arena-table { order: 4; } .arena-cards--bottom { order: 5; } .arena-score--bottom { order: 6; } .arena-bottom-labels { order: 7; } .arena-bottom-labels { display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 3; margin-top: -11px; height: 60px; flex-shrink: 0; position: relative; } /* Player dice inside the table */ .arena-cards { position: relative; z-index: 5; /* above the deck (z-index 4) so a dealt card lifts off the TOP of the deck, not from behind it */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; /* Figma 16px cards<->total (tightened) */ transform-style: preserve-3d; } /* Total pill: dark rounded pill with a number, coloured on result (Figma _base/chip: #262626, white, 8px radius, 24px tall, 12px text). */ .bj-total { z-index: 6; position: relative; box-sizing: border-box; min-width: 32px; /* 32px baseline; grows for soft totals (e.g. 10/20) */ width: auto; height: 24px; min-height: 24px; padding: 4px 8px; border: 3px solid #171717; /* Figma _base/chip 3px border */ border-radius: 8px; font-size: 12px; font-weight: 400; /* Figma chip text is regular */ font-family: "Google Sans Flex", sans-serif; box-shadow: 0px 1px 0px #171717; /* Ease the position with the fan (matches .bj-hand) so it doesn't jump on hit. */ transition: transform 0.34s cubic-bezier(0.3, 1.1, 0.4, 1); } /* Result pill colours (Figma status tokens): win #22c55e, lose #f43f5e, push #ffd106. (chip--positive elsewhere is a darker green.) */ /* Score chips only show during an active round (a hand is on the table). When the table is empty — idle before a bet, or after the round ends and clears — the pill is hidden but still occupies its space, so the table doesn't reflow when the totals appear on deal / disappear on clear. */ .bj-total--empty { visibility: hidden; } .bj-total.chip--positive, .bj-split-total.chip--positive { background: #22c55e; color: #ffffff; } .bj-total.chip--negative, .bj-split-total.chip--negative { background: #f43f5e; color: #ffffff; } .bj-total.chip--primary, .bj-split-total.chip--primary { background: #ffd106; color: #171717; } /* Figma: dealer total tracks its LAST card (bottom-right), player total tracks its FIRST card (top-left). The fan cascades down-right ~32×12 per card × the hand scale (dealer 0.667 → 10.7/4 px, player 0.833 → 13.3/5 px), so the offset scales with the card count (--dn / --pn) to follow the card diagonally as the hand grows. */ /* translateZ pushes the chip in front of the cards in the .arena-cards preserve-3d context (where z-index is unreliable — iOS Safari flickered it behind on deal). No perspective on .arena-cards → parallel projection, so no visual scaling. */ .arena-cards--top .bj-total { min-width: 32px; /* beats .chip--sm min-width:16px so single totals stay 32; wide (10/20) grow */ margin-top: -2px; /* Chip hugs the card corner and tracks it as the card scales on short screens: the card-corner term (card geometry × --base mult 0.667) × --mob-scale, plus a fixed flow-anchor constant. At --mob-scale:1 this equals the tuned values (25 / -23). */ transform: translate(calc((34.7px + (var(--dn, 2) - 2) * 10.7px) * var(--mob-scale, 1) - 9.7px), calc((40px + (var(--dn, 2) - 2) * 4px) * var(--mob-scale, 1) - 63px)) translateZ(60px); } .arena-cards--bottom .bj-total { min-width: 32px; margin-bottom: -2px; transform: translate(calc((-43.3px - (var(--pn, 2) - 2) * 13.3px) * var(--mob-scale, 1) + 9.3px), calc((-50px - (var(--pn, 2) - 2) * 5px) * var(--mob-scale, 1) + 66px)) translateZ(60px); } /* Mobile score chips = Figma _base/chip: 36px wide, 24px tall, 4px 8px padding, 12px white label (beats .chip--sm's 10px). Wide totals (10/20) still grow. Split totals get the same intrinsic size; the split-hand counter-scale keeps them full-size at --split-fit:1, so they render 36×24/12 to match the main chip. */ @media (max-width: 767px) { .arena-cards--top .bj-total, .arena-cards--bottom .bj-total, .bj-split-hand .bj-split-total { min-width: 36px; height: 24px; max-height: 24px; padding: 4px 8px; font-size: 12px; line-height: 1; } } .arena-cards--top { margin-bottom: -70px; --die-size: 40px; z-index: 2; } .arena-cards--top .bj-hand { /* Scale WITH the table on mobile short screens (--mob-scale = tableW/332). At full table --mob-scale = 1 → 0.667 (unchanged). Fallback 1 before JS runs. */ --base: calc(var(--mob-scale, 1) * 0.667); /* dealer: 72×0.667 ≈ 48×72 at full size */ } .arena-cards--bottom { /* Raised so the player cards' bottom edge sits on the table's bottom edge (mobile), keeping them clear of the floating action overlay below. */ margin-top: -140px; --die-size: 56px; z-index: 2; } .arena-cards--bottom .bj-hand { --base: calc(var(--mob-scale, 1) * 0.833); /* player: 72×0.833 ≈ 60×90 at full size */ } /* ── Blackjack cards ── The hand is a fixed one-card box; cards are absolutely stacked inside and positioned imperatively via transform (see CardHand). --hs (hand-scale, shrinks as the hand grows) composes with the per-area base scale (--base): dealer 0.833, split 0.82, player 1. */ .bj-hand { position: relative; width: 72px; height: 108px; margin: 0 auto; transform: scale(calc(var(--base, 1) * var(--hs, 1) * var(--vscale, 1))); transform-origin: 50% 55%; transition: transform 0.34s cubic-bezier(0.3, 1.1, 0.4, 1); } /* Short-height mobile (below 550px tall — landscape / cramped iframe): downscale the cards 25% so they fit the reduced vertical space. --vscale composes with the per-area --base and the per-hand --hs in the transform above. */ /* Short screens now scale proportionally via --mob-scale (cards track the shrinking table), replacing the old fixed --vscale:0.75 band-aid (which double-shrank). */ .bj-hand .bj-card-slot { position: absolute; /* Centre each slot on the hand box so the card fan is symmetric regardless of the box width. Split hands widen the box (see CardHand) to wrap their fanned cards; the main hand keeps a 72px box (centre == left:0 there). */ left: 50%; margin-left: -36px; top: 50%; margin-top: -54px; /* centre the slot vertically too, so a grown (split) box centres the fan */ width: 72px; height: 108px; } .bj-hand--thrown { animation: bjSweepLeft 0.49s cubic-bezier(0.42, 0, 0.9, 0.5) forwards; } .arena-cards--top .bj-hand--thrown { animation-name: bjSweepRight; } @keyframes bjSweepLeft { 0% { transform: translate(0, 0) rotate(0) scale(var(--base, 1)); opacity: 1; } 24% { transform: translate(0, -5px) rotate(0) scale(calc(var(--base, 1) * 0.88)); opacity: 1; } 100% { transform: translate(-460px, 16px) rotate(-15deg) scale(calc(var(--base, 1) * 0.82)); opacity: 0; } } @keyframes bjSweepRight { 0% { transform: translate(0, 0) rotate(0) scale(var(--base, 1)); opacity: 1; } 24% { transform: translate(0, -5px) rotate(0) scale(calc(var(--base, 1) * 0.88)); opacity: 1; } 100% { transform: translate(460px, 16px) rotate(15deg) scale(calc(var(--base, 1) * 0.82)); opacity: 0; } } .bj-card-slot { /* per-card wrapper so the deal-in transform never fights the hand transform */ display: block; /* smooth "fold": existing cards slide to their tighter positions with a small bounce when a new card is dealt (per the deal/stack reference). */ transition: margin-left 0.34s cubic-bezier(0.34, 1.35, 0.4, 1); } .bj-card-slot--dealing { animation: bjDeal 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both; } @keyframes bjDeal { 0% { opacity: 0; transform: translate(28px, -46px) rotate(10deg) scale(0.86); } 100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } } .bj-card { box-sizing: border-box; position: relative; width: 72px; /* Figma player card 72x108 */ height: 108px; border-radius: 9px; /* Figma 9.29px */ background: #ffffff; /* Figma color/background/inverse */ border: 1.37px solid #D4D4D4; /* Figma 1.14px @60w → 1.37 @72w */ color: #171717; /* black suit */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); font-family: "Google Sans Flex", system-ui, sans-serif; overflow: hidden; user-select: none; } .bj-card--red { color: #F43F5E; } /* Figma status/error red */ /* Result outline on the player hand — the Figma card-states colour frame: green #22c55e win, red #f43f5e (status/error) lose, gold #ffd106 push. */ .bj-hand--win .bj-card:not(.bj-card--back) { box-shadow: 0 0 0 2.7px #22c55e, 0 2px 6px rgba(0,0,0,0.4); } .bj-hand--lose .bj-card:not(.bj-card--back) { box-shadow: 0 0 0 2.7px #f43f5e, 0 2px 6px rgba(0,0,0,0.4); } .bj-hand--push .bj-card:not(.bj-card--back) { box-shadow: 0 0 0 2.7px #ffd106, 0 2px 6px rgba(0,0,0,0.4); } /* Top-left rank + suit stack (Figma frame: left 6.83px, top 4.57px @60w → ×1.2). */ .bj-card-tl { position: absolute; left: 8.2px; top: 5.5px; display: flex; flex-direction: column; align-items: flex-start; } .bj-card-rank { font-weight: 600; font-size: 36px; /* Figma 30px @60w → 36 @72w */ line-height: 1.25; letter-spacing: -0.01em; } .bj-card-suit { display: flex; margin-top: -2px; } .bj-card-suit svg { display: block; width: 22px; height: 22px; } /* Figma 18.29px → ×1.2 */ /* Face-down card = yellow SETANTA back (Figma brand/primary, solid) */ /* Face-down card: exact Figma back — #FFD106 body + the 'S' logo, sharing the same shape and shadow as the face-up cards (no clipped export shadow). */ .bj-card--back { /* Fill the wrapper yellow and clip to the rounded card shape so the transparent corners of the SVG can't reveal the (white) card overlapped beneath it. */ background: #FFD106; /* brand/primary — matches the SVG body */ border: none; border-radius: 9px; /* match .bj-card corner radius */ overflow: hidden; /* clip content to the rounded card */ box-shadow: 0 0.7px 2px rgba(65, 52, 12, 0.39); } /* MyBC card back is purple — match the wrapper fill so the rounded corners aren't yellow. */ :root.brand-mybc .bj-card--back { background: #1B1941; box-shadow: 0 0.7px 2px rgba(10, 8, 30, 0.5); } /* The SVG fills the slot; preserveAspectRatio="none" → even border, no crop, crisp. */ .bj-card-back-full { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Idle "disable card" placeholder (Figma 241-38975): dark card + dim 'S' mark, shown in both slots when no round is active. Same 72×108 shape as .bj-card. */ .bj-card--disabled { background: #0D0D0D; /* empty slot body */ border: 1px solid #2A2A2A; /* empty slot stroke */ border-radius: 9px; overflow: hidden; box-shadow: none; } /* Placeholder hand: a backdrop layer behind the real CardHand. The stack wrapper is sized to the real hand (72×108), so the absolutely-positioned placeholder overlaps it exactly and the dealt cards land right on top. translateZ(-4px) keeps it behind the cards even in the preserve-3d context (where plain z-index is unreliable on iOS Safari). No perspective on .arena-cards → no visual scale. */ .bj-hand-stack { position: relative; } .bj-hand-stack .bj-hand--placeholder { position: absolute; inset: 0; transform: scale(var(--base, 1)) translateZ(-4px); transition: opacity 0.34s ease; } .bj-hand--placeholder.is-fading { opacity: 0; } /* Fan pose set here (not inline) so it matches CardHand's poseX/poseY for n=2. */ .bj-hand--placeholder .bj-card-slot:nth-child(1) { transform: translate(-16px, -6px); z-index: 1; } .bj-hand--placeholder .bj-card-slot:nth-child(2) { transform: translate(16px, 6px); z-index: 2; } /* ── Deck / shoe — exact Figma card-stack export (top-right of the table) ── */ .bj-deck { /* Anchored near the top of the play area and pulled up so ~75% is clipped by the top edge (Figma) — only the bottom of the stack peeks in from the top. */ position: absolute; top: -97px; /* header ~56 + ~41 above the edge (nudged 8px down) */ left: calc(50% + 66px); /* centre-right, above the cards, clear of the ⋯ menu */ width: 42px; height: 66px; /* card (~61.6) + the 4-card peek (~4.5) */ z-index: 5; pointer-events: none; } /* Stack of 4 card backs (Figma Frame 2): the front card sits at the top, each card behind it is nudged ~1.5px lower so its bottom edge peeks — a thin deck. */ .bj-deck-card { position: absolute; left: 0; width: 42px; height: 61.6px; /* inline svg needs an explicit height (42 × 88/60) */ display: block; /* box-shadow, not filter: — CSS filters rasterize the vector (blur on retina). */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); border-radius: 5.4px; /* match the card's rounded corners for the shadow */ } .bj-deck-card:nth-child(1) { top: 0; z-index: 4; } /* frontmost / top */ .bj-deck-card:nth-child(2) { top: 1.5px; z-index: 3; } .bj-deck-card:nth-child(3) { top: 3px; z-index: 2; } .bj-deck-card:nth-child(4) { top: 4.5px; z-index: 1; } /* MyBC deck+shoe — exact Figma "card deck" frame (247:26425, 60×46) placed on the felt at x 239/348, y 53/313. It is a self-contained widget (NOT clipped by the table edge); the internal overflow:hidden clips the deck's right 5px (deck rotated is 65 wide) and the shoe's bottom 14px (shoe is 60 tall) — exactly as Figma. Everything is % of this box so it scales with the table at both breakpoints. */ .bj-deck-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; } /* MyBC deck — built from the SAME CardBackSVG as the playing cards (identical vector visual) + a #323054 CSS hat. The fan + hat share one anchor (.bj-deck) so they can't drift. Placed at the right edge, nudged up. Figma deck 247-72998: 4 card-backs stepped +2.6px right / +2px down, front card on top at the bottom-right. */ /* MyBC deck+hat — 1:1 with Figma table 247-61688 (card deck 247:61858, 55×75 frame at the TOP-RIGHT, right edge on the table edge; ~half the deck clips off the edge; hat overlaps). Values are Figma units × (332/348) so they map 1:1 onto the table, × --mob-scale. */ :root.brand-mybc .bj-deck { position: absolute; top: 22%; /* Figma frame top 72/313 */ right: 0; /* frame right edge AT the table edge */ left: auto; bottom: auto; width: calc(52.5px * var(--mob-scale, 1)); /* frame 55 units */ height: calc(71.6px * var(--mob-scale, 1)); /* frame 75 units */ transform: none; z-index: 5; } /* the flipped 4-card fan (Figma Frame 2147225248, -scale-y-100), left-aligned & vertically centred; its right ~third clips off the table edge. */ :root.brand-mybc .bj-deck-fan { position: absolute; left: calc(0.7px * var(--mob-scale, 1)); top: 50%; width: calc(77.5px * var(--mob-scale, 1)); height: calc(53.7px * var(--mob-scale, 1)); transform: translateY(-50%); } /* each card = a CardBackSVG (48.764×71.521 portrait) rotated 90° → landscape. */ :root.brand-mybc .bj-deck-fan .bj-deck-card { position: absolute; width: calc(46.5px * var(--mob-scale, 1)); /* portrait width (Cw) */ height: calc(68.2px * var(--mob-scale, 1)); /* portrait height (Ch) */ transform: rotate(90deg); transform-origin: center; border-radius: calc(5.9px * var(--mob-scale, 1)); /* match the card's rounded corners for the shadow */ box-shadow: 0 calc(0.6px * var(--mob-scale,1)) calc(2.4px * var(--mob-scale,1)) rgba(0, 0, 0, 0.25); /* Figma deck-card shadow */ } /* Front card (nth-child 4) top-right; each card behind steps 1px down-left (Figma 254-25872). */ :root.brand-mybc .bj-deck-fan .bj-deck-card:nth-child(1) { left: calc(17.16px * var(--mob-scale,1)); top: calc(-7.86px * var(--mob-scale,1)); z-index: 1; } :root.brand-mybc .bj-deck-fan .bj-deck-card:nth-child(2) { left: calc(18.16px * var(--mob-scale,1)); top: calc(-8.86px * var(--mob-scale,1)); z-index: 2; } :root.brand-mybc .bj-deck-fan .bj-deck-card:nth-child(3) { left: calc(19.16px * var(--mob-scale,1)); top: calc(-9.86px * var(--mob-scale,1)); z-index: 3; } :root.brand-mybc .bj-deck-fan .bj-deck-card:nth-child(4) { left: calc(20.16px * var(--mob-scale,1)); top: calc(-10.86px * var(--mob-scale,1)); z-index: 4; } /* Hat (Figma 247:61909): SOLID #323054 slot, rounded-left 10px, white-6% border on t/l/b, at the right of the frame (its right edge past the table edge → clipped). Taller than the deck. */ :root.brand-mybc .bj-deck-hat { position: absolute; left: calc(35px * var(--mob-scale, 1)); top: 0; width: calc(20.3px * var(--mob-scale, 1)); height: calc(71.6px * var(--mob-scale, 1)); background: #ff7b17; border: 1.25px solid rgba(255, 255, 255, 0.06); border-right: none; border-radius: calc(9.5px * var(--mob-scale,1)) 0 0 calc(9.5px * var(--mob-scale,1)); box-shadow: -2px 0 21px 2px rgba(0, 0, 0, 0.4); /* Figma 254-25903: strong left shadow */ z-index: 6; pointer-events: none; } /* ── Dealer hole-card flip ("Unfold") ── */ .bj-flip { width: 72px; height: 108px; perspective: 700px; } .bj-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: bjFlip 0.39s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Back and open cards are the same size now, so the flip is a pure Y-rotation (no grow). */ @keyframes bjFlip { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } } .bj-flip-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bj-flip-front { transform: rotateY(180deg); } /* ── Blackjack action buttons (Hit / Stand / Double) ── */ .bj-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; /* Figma tile gap */ width: 100%; } .bj-actions--3 { grid-template-columns: 1fr 1fr 1fr; } .bj-actions--4 { grid-template-columns: 1fr 1fr 1fr 1fr; } /* Split: two hands side by side, active one highlighted */ .bj-split-hands { display: flex; flex-direction: row-reverse; /* first round (hand 0) on the RIGHT, second on the LEFT */ justify-content: center; align-items: flex-start; /* top-align the two hands (chip + first card level) */ gap: 64px; transform: translateY(-16px); /* split cards + score chips sit 16px higher */ /* Match the single-hand row height so switching to/from split (and the end-of-round clear) doesn't re-centre the table. -7px compensates the taller score chip on mobile (desktop overrides to -8). */ margin-top: 10px; margin-bottom: -7px; } /* Split move-apart: the two hands slide out from the centre (per reference). With row-reverse, first-child is on the RIGHT (slides right) and last-child is on the LEFT (slides left). */ .bj-split-hands--splitting .bj-split-hand:first-child { animation: bjSplitR 0.46s cubic-bezier(0.3, 0.8, 0.35, 1) backwards; } .bj-split-hands--splitting .bj-split-hand:last-child { animation: bjSplitL 0.46s cubic-bezier(0.3, 0.8, 0.35, 1) backwards; } /* Split reveal: cards start at NORMAL size overlapping in the centre, then slide apart WHILE downscaling to the split size (0.556) — one smooth motion. */ @keyframes bjSplitL { from { transform: translateX(72px) scale(1); } to { transform: translateX(0) scale(calc(var(--split-fit, 1) * var(--split-base, 0.556))); } } @keyframes bjSplitR { from { transform: translateX(-72px) scale(1); } to { transform: translateX(0) scale(calc(var(--split-fit, 1) * var(--split-base, 0.556))); } } /* --fit = the active breakpoint's table-shrink ratio (mobile here; desktop overrides it below). --split-fit DAMPENS that shrink for the split hands so they don't get too tiny on short screens (they're already small): only 40% of the shrink applies. */ :root { --fit: var(--mob-scale, 1); --split-fit: calc(0.6 + 0.4 * var(--fit, 1)); --split-base: 0.667; /* split card baseline: 72 × 0.667 = 48px (mobile) */ --split-gap: 8px; /* visual gap between split cards and their score chip */ } .bj-split-hand { display: flex; flex-direction: column; align-items: center; gap: 4px; /* Split cards render at --split-base × 72 at full size, shrinking gently with --split-fit on short screens. Scaling the whole hand keeps cards, border and pill aligned. transform-origin top so scaling keeps the two hands' TOPS aligned. */ transform: scale(calc(var(--split-fit, 1) * var(--split-base, 0.556))); transform-origin: center top; } /* Split fan is TOP-anchored: slots start at the box top (not centred), so poseY = i×STEP makes the first card the fixed top and extra cards cascade downward. */ .bj-split-hand .bj-card-slot { top: 0; margin-top: 0; } /* The focus border wraps ONLY the cards (not the total pill), hugging them. */ .bj-split-cardbox { padding: 0; /* focus ring moved to the hand outline (no layout impact) */ } /* Active-hand focus ring: an OUTLINE on the fan box so it wraps the grown fan WITHOUT adding to layout (the box grows via negative margins → no table jump). */ .bj-split-hand .bj-hand { border-radius: 9px; } .bj-split-hand--active .bj-hand { outline: 1.5px solid #ffd106; /* Figma border/warning */ outline-offset: 4px; /* Figma p-[4px] gap */ } /* MyBC: the split active-hand focus ring uses the brand's bet-button orange. */ :root.brand-mybc .bj-split-hand--active .bj-hand { outline-color: #FF7B17; /* --action-primary (Place a Bet button) */ } /* Split hands render at full size (no --base shrink) with a box that is sized to the fanned cards in JS, so the active-hand border wraps the cards exactly and the two hands keep a real gap between them. */ .bj-split-hand .bj-hand { --base: 1; } /* Split score chip: centred under the cards (flex align-center), full-size (counter the hand's --split-base scale), and pushed --split-gap below the fan. The gap is a translateY (NOT a margin) so it's purely visual and doesn't grow the split hand's layout height — otherwise the table jumps on split start/end. Dividing by (--split-fit × --split-base) cancels the hand's scale, so the on-screen gap is exactly --split-gap at every size. */ .bj-split-total { order: -1; /* chip sits ABOVE the cards */ margin-top: 2px; /* Pushed UP by --split-gap (visual only, ÷ scale cancels) so there's a clean gap between the chip and the top card. */ transform: translateY(calc(-1 * var(--split-gap, 8px) / var(--split-fit, 1) / var(--split-base, 0.556))) scale(calc(1 / var(--split-base, 0.556))); transform-origin: center bottom; } .bj-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; /* Figma icon<->label gap */ height: 64px; /* Figma tile 64px */ padding: 8px; border: none; border-radius: 12px; /* Figma radius/md */ background: #262626; /* Figma surface/default */ color: #ffffff; /* Figma content/primary */ font-family: "Google Sans Flex", system-ui, sans-serif; font-size: 12px; /* Figma xs / semibold */ font-weight: 600; line-height: 1.6; cursor: pointer; transition: transform 0.08s ease, background 0.15s ease, filter 0.15s ease; } .bj-btn:active { transform: scale(0.96); } .bj-btn:hover { filter: brightness(1.12); } /* Disabled action tile (e.g. Surrender after the opening hand): stays in place but muted and non-interactive. */ .bj-btn--disabled { opacity: 0.4; cursor: default; pointer-events: none; } .bj-btn-ico { display: flex; align-items: center; justify-content: center; height: 24px; line-height: 1; } .bj-btn-ico svg { display: block; height: 24px; width: auto; } /* Figma 24px icon */ .bj-btn--hit .bj-btn-ico { color: #ffd106; } /* Figma Hit icon fill */ .bj-btn--stand .bj-btn-ico { color: #e11d48; } /* Figma Stand icon fill */ .bj-btn-ico--2x { color: #ffd106; } .bj-btn--split .bj-btn-ico { color: #ffd106; } /* Player-turn column: tile row + full-width Surrender beneath it. The panel chrome now lives on .m-action-row (the shared game-States container). */ .bj-actions-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; } /* Mid-action (a card is being dealt): keep the tiles on screen but dimmed and non-interactive, so the Place Bet button never appears during the round. */ .bj-actions-wrap--busy { opacity: 0.5; pointer-events: none; } .bj-surrender { min-height: 48px; /* Figma _base/button 48px */ height: 48px; flex-direction: row; gap: 4px; /* Figma space/4 */ padding: 10px 16px; background: #262626; /* Figma surface/default */ font-size: 14px; /* Figma sm */ } .bj-surrender .bj-btn-ico { color: #ffd106; height: 20px; } .bj-surrender .bj-btn-ico svg { height: 20px; } /* Figma 20px */ /* Insurance decision */ .bj-btn--insure .bj-btn-ico { color: #22c55e; } .bj-btn--noinsure .bj-btn-ico { color: #ff5959; } /* ── Action-footer states — Figma 237-91925 ── Blackjack-only classes (.bj-foot/.bj-tiles/.bj-tile/.bj-cta) so the shared .m-action-row / .m-btn-deal chrome used by the other games is untouched. */ .bj-foot { width: 100%; display: flex; flex-direction: column; gap: 8px; /* Figma space/2 between rows */ } .bj-tiles { display: grid; gap: 8px; /* Figma tile gap */ width: 100%; } .bj-tiles--4 { grid-template-columns: repeat(4, 1fr); } .bj-tiles--2 { grid-template-columns: repeat(2, 1fr); } /* Mid-deal: keep the tiles on screen but dimmed + inert */ .bj-tiles--busy { opacity: 0.5; pointer-events: none; } .bj-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; /* Figma icon<->label */ box-sizing: border-box; height: 56px; /* Figma tile max-h 56 */ padding: 10px 8px; /* Figma px-8 py-10 */ border: none; border-radius: 12px; /* Figma tile radius */ background: #262626; /* surface/default */ color: #ffffff; /* content/primary */ font-family: "Google Sans Flex", system-ui, sans-serif; font-size: 10px; /* Figma 2xs label */ font-weight: 600; line-height: 1.2; cursor: pointer; overflow: hidden; transition: transform 0.08s ease, filter 0.15s ease, opacity 0.15s ease; } .bj-tile:active { transform: scale(0.96); } .bj-tile:hover { filter: brightness(1.1); } .bj-tile-ico { display: flex; align-items: center; justify-content: center; height: 21px; line-height: 1; } .bj-tile-ico svg { display: block; height: 21px; width: auto; } /* Figma 21px icon */ .bj-tile-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* All tiles are neutral dark (#262626) with a COLORED ICON — Hit=yellow, Stand=red, Split=white (icon fills baked into the SVGs). No solid-color fill on the tile itself (per Figma 237-91925). */ /* Active Double tile: 2X icon is WHITE (disabled stays grey via .bj-tile--off). */ .bj-tile--double:not(.bj-tile--off) .bj-tile-ico svg path { fill: #ffffff; } /* Active Hit tile: icon is green #4ADE80 (disabled stays grey via .bj-tile--off). */ .bj-tile--hit:not(.bj-tile--off) .bj-tile-ico svg path { fill: #4ADE80; } /* Insurance tiles: dark, green shield / red hand icon, white label */ .bj-tile--no .bj-tile-ico { color: #ff5959; } /* IconHand uses currentColor */ /* Unavailable tile: whole tile at 50% opacity, greyed icon + disabled-grey label, no border — matches Figma 237-114403 disabled state. */ .bj-tile--off { opacity: 0.5; pointer-events: none; } .bj-tile--off .bj-tile-lbl { color: #525252; } /* content/disabled */ .bj-tile--off .bj-tile-ico { color: #737373; } .bj-tile--off .bj-tile-ico svg path { fill: #737373; } /* CTA slot (reuses .m-btn-deal for the yellow enabled "Place a bet") */ .bj-foot .m-btn-deal { height: 40px; /* Figma _base/button 40 */ min-height: 40px; border-radius: 12px; /* radius/md */ font-size: 14px; } /* Dark disabled placeholder during the player's turn (no surrender available) */ .bj-cta--muted { background: #262626 !important; color: #737373 !important; opacity: 1 !important; /* override .m-btn-deal:disabled 0.5 */ cursor: default; } /* Surrender lives in the CTA slot: dark bar, white flag + label */ .bj-cta--surrender { gap: 6px; background: #262626 !important; color: #ffffff !important; } .bj-cta--surrender .bj-cta-ico { display: flex; align-items: center; height: 20px; line-height: 1; } .bj-cta--surrender .bj-cta-ico svg { display: block; height: 20px; width: auto; } /* Figma 20px */ /* Surrender no longer available (after hit/split/double): stays in place, dark, with a greyed flag + label — NOT replaced by the Place-a-Bet placeholder. */ .bj-cta--surrender:disabled { opacity: 0.5; /* same dim as the disabled tiles (.bj-tile--off) */ background: #262626 !important; color: #525252 !important; /* content/disabled — matches tile label */ cursor: default; } .bj-cta--surrender:disabled .bj-cta-ico svg path { fill: #525252; } /* content/disabled */ /* Insurance heading */ .bj-ins-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 2px 0 2px; width: 100%; } .bj-ins-title { font-family: "Google Sans Flex", sans-serif; font-weight: 600; font-size: 12px; line-height: 1.6; color: #ffffff; } .bj-ins-sub { font-family: "Google Sans Flex", sans-serif; font-weight: 400; font-size: 10px; line-height: 1.2; color: #d4d4d4; } /* Score chips — sit between dice and table */ .arena-score { z-index: 3; } .arena-score--top { z-index: 5; position: relative; } .arena-score--bottom { z-index: 3; position: relative; } /* ── Arena Table Shape ── */ .arena-table { position: relative; width: clamp(216px, 70vh - 100px, 332px); overflow: visible; } .arena-table-bg { display: block; width: 100%; height: auto; } /* Aviator table (Figma Vector 16): translucent #15191B@40% surface (in the SVG) + a subtle 3.5px backdrop blur. The blur is gentle so the transparency still reads. Clipped to the table's rounded shape. */ /* Aviator now uses the round-bottom blackjack table (table-red.svg) — the square rounding/blur that shaped the old square table are no longer needed. */ .arena-edge-label { position: absolute; left: 50%; display: flex; align-items: center; gap: 4px; z-index: 10; } .arena-edge-label--top { top: 0; transform: translate(-50%, -50%); } .arena-edge-label--bottom { bottom: 5%; transform: translate(-50%, 50%); } /* Aviator's red border makes alignment visible — sit the player chip on it */ :root.brand-aviator .arena-edge-label--bottom { bottom: 3.2%; } /* Centre "print" — watermark logo + (default brand) the felt rules text, grouped and centred on the table like real table print. Sits under the cards. */ .arena-print { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: clamp(160px, 80%, 240px); display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: none; } /* Mobile: nudge the whole centre print up. */ @media (max-width: 767px) { .arena-print { transform: translate(-50%, calc(-50% - 20px)); } } /* Blackjack (default brand): watermark removed → centre the felt rules on the table. */ :root:not(.brand-mybc):not(.brand-aviator) .arena-print { top: 50%; } @media (max-width: 767px) { :root:not(.brand-mybc):not(.brand-aviator) .arena-print { transform: translate(-50%, -50%); } } .arena-table-logo { width: 100%; height: auto; display: block; } /* Blackjack felt print — SETANTAbet watermark + curved rules (Figma Bg-Assets). */ .arena-felt { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .arena-felt-logo { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 58%; /* Figma wordmark ≈165u glyphs on the felt */ height: auto; opacity: 1; /* watermark.svg already bakes SETANTA .2 / bet .1 */ } .arena-felt-outline { fill: none; stroke: #525252; stroke-opacity: 0.1; stroke-width: 1.3; } /* Whole felt print as one pre-aligned Figma vector export (228×214 = inner shape). */ .arena-felt-print { position: absolute; left: 50%; top: 46.8%; transform: translate(-50%, -50%); width: 71.5%; height: auto; } .arena-felt-rules { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .arena-felt-txt { font-family: "Google Sans Flex", sans-serif; fill: #525252; /* content/disabled */ text-transform: uppercase; } .arena-felt-txt--top { font-size: 12px; font-weight: 500; letter-spacing: 0; } .arena-felt-txt--bot { fill: #2f2f2f; font-size: 10px; font-weight: 400; letter-spacing: 0; } /* MyBC table logo rendered as a subtle transparent watermark */ .arena-table-logo--mybc { opacity: 0.3; /* Figma 247-26494: medium, readable grey */ transform: scale(0.32); /* Figma: ~30% of table width */ } /* Felt rules print (default/SETANTAbet brand only) — exact Figma frame 230:69152. container-type lets the text size (cqw) stay proportional to the banner at any rendered width, so it's a true 1:1 to the design (10px on the 271.83px frame). */ .arena-rules { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: 0; /* Figma: subtext sits right at the banner bottom */ width: 272px; /* exact Figma frame width */ max-width: 92vw; /* safety on very narrow phones */ } /* "BLACKJACK PAYS 3 TO 2" banner — exact Figma ribbon SVG (272×39). */ .arena-rules-pays { position: relative; width: 100%; aspect-ratio: 271.83 / 38.97; } .arena-rules-pays-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .arena-rules-pays-text { position: absolute; left: 50%; top: 41%; /* body centre (Figma inset 25.56%–56.36%) */ transform: translate(-50%, -50%); font-family: "Google Sans Flex", serif; /* self-hosted (was Bree Serif in Figma 237-113456) */ font-weight: 400; font-size: 5.15cqw; /* 14px on the 271.83 frame (Figma sm) */ line-height: 1.5; text-transform: uppercase; color: #737373; /* Figma color/content/tertiary */ white-space: nowrap; } .arena-rules-sub { font-family: var(--font-primary); font-weight: 400; font-size: 3.68cqw; /* 10px on the 271.83 frame */ line-height: 1.4; text-transform: uppercase; color: #737373; white-space: nowrap; } /* Aviator table watermark: half size, vertically centred on the table */ :root.brand-aviator .arena-print { width: clamp(80px, 40%, 120px); top: 50%; } /* …20% larger on desktop */ @media (min-width: 768px) and (min-height: 600px) { :root.brand-aviator .arena-print { width: clamp(96px, 48%, 144px); } } /* ── Chips (Design System) ── */ .chip { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-family: var(--font-primary); font-weight: 400; line-height: 1.4; white-space: nowrap; box-shadow: 0 1px 0 var(--shadow-neutral); } .chip--xs { padding: var(--space-1); font-size: var(--font-size-2xs); } .chip--sm { min-width: 16px; height: 22px; padding: 4px; font-size: 10px; line-height: 140%; box-shadow: 0px 1px 0px #171717; border-radius: 8px; line-height: 14px; } .chip--neutral { background: var(--surface-default); color: var(--content-primary); } .chip--primary { background: var(--brand-primary); color: var(--content-inverse); } .chip--positive { background: #15803D; color: var(--content-primary); } .chip--negative { background: var(--status-error); color: var(--content-primary); } /* ── Mobile Header (new Figma design) ── */ .m-header { display: flex; justify-content: space-between; align-items: center; padding: 12px; height: 56px; box-sizing: border-box; position: relative; z-index: 20; } .m-header-btn { display: flex; justify-content: center; align-items: center; padding: 8px; background: #262626; border: none; cursor: pointer; } .m-header-btn--lg { width: 32px; height: 32px; border-radius: 12px; } .m-header-btn svg { width: 16px; height: 16px; } .m-header-btn:active { transform: scale(0.92); } .m-header-results { /* Hidden for now — keep markup/logic intact, may re-enable later. Restore by switching back to: display: flex; */ display: none; align-items: center; gap: 8px; } .m-header-dot { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; background: #262626; border-radius: 8px; border: 1px solid transparent; cursor: pointer; padding: 0; } .m-header-dot--loss { border-color: #F43F5E; } .m-header-dot--push { border-color: #FFD106; } .m-header-dot:active { transform: scale(0.92); } .m-header-actions { display: flex; align-items: center; gap: 8px; } .m-header-actions .m-header-btn { width: 32px; height: 32px; border-radius: 8px; } .desktop-only { display: none !important; } .m-header-history-btn { display: flex; align-items: center; justify-content: center; padding: 8px 12px 8px 8px; gap: 4px; height: 37px; background: #262626; border-radius: 12px; border: none; cursor: pointer; font-family: var(--font-primary); font-weight: 600; font-size: 14px; color: #FFFFFF; } .m-header-history-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .m-header-history-btn:active { transform: scale(0.95); } /* ── Insufficient Balance Toast ── */ .insufficient-toast { box-sizing: border-box; display: flex; align-items: center; padding: 8px; gap: 8px; width: auto; height: 40px; background: #262626; border: 1px solid #262626; border-radius: 16px; position: absolute; left: 50%; top: calc(60% - 16px); transform: translate(-50%, -50%); z-index: 15; z-index: 10; animation: toast-pop .2s ease; font-family: var(--font-primary); font-weight: 400; font-size: 12px; color: #FFFFFF; } @keyframes toast-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .insufficient-toast span { white-space: nowrap; } /* ── Round Result Toast ── */ /* Aviator hides the win/push/lost round toast (kept in the DOM, just not shown). */ :root.brand-aviator .round-toast { display: none !important; } .round-toast { display: flex; align-items: center; gap: 4px; position: absolute; top: 33%; /* upper-centre, just above the SETANTAbet watermark (~47%) */ left: 50%; transform: translate(-50%, -50%); z-index: 15; z-index: 10; animation: toast-pop .2s ease; white-space: nowrap; } .round-toast-chip { display: flex; justify-content: center; align-items: center; padding: 4px; height: 22px; border-radius: 8px; box-shadow: 0px 1px 0px #171717; font-family: var(--font-primary); font-weight: 400; font-size: 10px; line-height: 1.4; color: #FFFFFF; white-space: nowrap; box-sizing: border-box; } .round-toast-chip--win { background: #22C55E; } .round-toast-chip--lose { background: #F43F5E; } .round-toast-chip--push { background: #FFD106; color: #171717; } .round-toast-chip--tie { background: #FFD106; color: #171717; } .round-toast-chip--surrender { background: #94a3b8; color: #171717; } .round-toast-detail { display: flex; justify-content: center; align-items: center; padding: 4px; height: 22px; background: #262626; box-shadow: 0px 1px 0px #171717; border-radius: 8px; font-family: var(--font-primary); font-weight: 400; font-size: 10px; line-height: 1.4; color: #FFFFFF; white-space: nowrap; box-sizing: border-box; } /* ── Free Round Counter ── */ .free-round-counter { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; } .free-round-counter-text { font-family: var(--font-primary); font-weight: 600; font-size: 13px; color: var(--content-primary); } .free-round-winnings { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: #22C55E; } /* ── Desktop Free Round Counter ── */ .desktop-free-round { position: absolute; bottom: 90px; right: 24px; max-width: 372px; } /* ── Cashout Success Alert ── */ .cashout-alert-backdrop { /* Matches main: centered over the arena table on both mobile and desktop. */ position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; animation: cashout-fade .15s ease; } @keyframes cashout-fade { from { opacity: 0; } to { opacity: 1; } } .cashout-alert { box-sizing: border-box; position: relative; overflow: hidden; /* clip the confetti burst to the card */ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; gap: 8px; width: 112px; background: var(--surface-default); border: 2px solid #4ADE80; border-radius: 16px; box-shadow: 0 0 40px rgba(74,222,128,0.15), 0 16px 48px rgba(0,0,0,0.5); /* win-card pop + one-shot border glow */ animation: cardPop .25s cubic-bezier(0.25, 0.1, 0.25, 1) both, borderGlow 1.6s ease-out .15s both; } .cashout-alert--big { width: 157px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.91) 0%, var(--brand-primary) 100%); border-color: var(--brand-border); box-shadow: 0 0 40px rgba(var(--brand-rgb),0.15), 0 16px 48px rgba(0,0,0,0.5); animation: cardPop .25s cubic-bezier(0.25, 0.1, 0.25, 1) both, borderGlowBig 1.6s ease-out .15s both; } .cashout-alert--big .cashout-alert-label { color: var(--brand-primary); } @keyframes cardPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes borderGlow { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0), 0 16px 48px rgba(0,0,0,0.5); } 35% { box-shadow: 0 0 56px 4px rgba(74,222,128,0.6), 0 16px 48px rgba(0,0,0,0.5); } 100% { box-shadow: 0 0 40px 0 rgba(74,222,128,0.15), 0 16px 48px rgba(0,0,0,0.5); } } @keyframes borderGlowBig { 0% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb),0), 0 16px 48px rgba(0,0,0,0.5); } 35% { box-shadow: 0 0 56px 4px rgba(var(--brand-rgb),0.6), 0 16px 48px rgba(0,0,0,0.5); } 100% { box-shadow: 0 0 40px 0 rgba(var(--brand-rgb),0.15), 0 16px 48px rgba(0,0,0,0.5); } } /* confetti burst canvas — fills the card (clipped by overflow:hidden), sits behind the text, never blocks clicks */ .cashout-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* Win burst — covers the table and pops up over the win toast. */ .win-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 12; pointer-events: none; } /* text/chip layer sits above the confetti canvas */ .cashout-alert-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .cashout-alert-label { font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 150%; text-align: center; color: #4ADE80; } .cashout-alert-mult { font-family: var(--font-primary); font-weight: 600; font-size: 16px; line-height: 1.5; text-align: center; color: #4ade80; white-space: nowrap; } .cashout-alert--big .cashout-alert-mult { color: #FFFFFF; } .cashout-alert-chip { display: flex; align-items: center; justify-content: center; padding: 4px; height: 22px; animation: chipRise .45s cubic-bezier(0.25, 0.1, 0.25, 1) both; background: var(--surface-default); border-radius: 8px; box-shadow: 0px 1px 0px #171717; font-family: var(--font-primary); font-weight: 400; font-size: 10px; line-height: 1.4; color: var(--content-primary); white-space: nowrap; box-sizing: border-box; } @keyframes chipRise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cashout-alert, .cashout-alert--big, .cashout-alert-chip { animation: none !important; } } /* ── History ── */ .hist-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; overflow-y: auto; } .hist-item { display: flex; align-items: center; justify-content: center; background: var(--surface-default); border-radius: 16px; padding: 8px 0; overflow: hidden; cursor: pointer; } .hist-item--expanded { flex-direction: column; gap: 8px; } .hist-header { display: flex; align-items: center; justify-content: space-between; padding-left: 4px; padding-right: 8px; width: 100%; box-sizing: border-box; } .hist-left { display: flex; align-items: center; min-width: 0; flex-shrink: 1; } .hist-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; border-radius: 12px; } .hist-icon svg { width: 20px; height: 20px; } .hist-info { display: flex; flex-direction: column; justify-content: center; } .hist-info-title { font-family: var(--font-primary); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--content-secondary); white-space: nowrap; } .hist-info-sub { font-family: var(--font-primary); font-weight: 400; font-size: 10px; line-height: 1.4; color: var(--content-secondary); white-space: nowrap; } .hist-right { display: flex; align-items: center; flex-shrink: 0; margin-left: auto; } .hist-chips { display: flex; align-items: center; gap: 8px; width: 160px; justify-content: flex-end; } .hist-mult-chip { display: flex; align-items: center; justify-content: center; height: 24px; min-width: 56px; padding: 4px 8px; background: var(--surface-raised); border-radius: 8px; box-shadow: 0px 1px 0px #171717; font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.6; color: var(--content-primary); white-space: nowrap; box-sizing: border-box; } .hist-payout-chip { min-width: 72px; } .hist-payout-chip { display: flex; align-items: center; justify-content: center; height: 24px; padding: 4px 8px; border-radius: 8px; font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.6; white-space: nowrap; } .hist-payout-chip--win { background: rgba(34,197,94,0.14); color: #22c55e; } .hist-payout-chip--lose { background: rgba(244,63,94,0.14); color: #f43f5e; } .hist-payout-chip--push { background: rgba(255,209,6,0.14); color: #FFD106; } .hist-payout-chip--surrender { background: rgba(148,163,184,0.16); color: #94a3b8; } .hist-chevron { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 12px; background: none; border: none; cursor: pointer; } .hist-chevron svg { width: 16px; height: 16px; } .hist-details { padding: 0 8px; width: 100%; box-sizing: border-box; } .hist-details-inner { display: flex; flex-direction: column; gap: 12px; background: rgba(0,0,0,0.14); border-radius: 12px; padding: 10px; width: 100%; box-sizing: border-box; } .hist-details-inner .pf-result { margin: 0; } .hist-details-inner .pf-result-body { font-size: 14px; } /* ── Blackjack round-history detail ── */ .hist-hand { display: flex; flex-direction: column; gap: 6px; } .hist-hand-head { display: flex; align-items: center; gap: 8px; } .hist-hand-label { font-size: 12px; font-weight: 600; color: #a3a3a3; min-width: 52px; } .hist-hand-total { font-size: 13px; font-weight: 700; color: #fff; background: #262626; border-radius: 6px; padding: 1px 7px; } .hist-hand-out { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; border-radius: 5px; padding: 2px 6px; } .hist-hand-out--win { background: rgba(34,197,94,0.16); color: #22c55e; } .hist-hand-out--lose { background: rgba(244,63,94,0.16); color: #f43f5e; } .hist-hand-out--push { background: rgba(255,209,6,0.16); color: #ffd106; } .hist-hand-out--surrender { background: rgba(148,163,184,0.16); color: #94a3b8; } .hist-hand-cards { display: flex; gap: 4px; flex-wrap: wrap; } .hist-card { position: relative; width: 30px; height: 42px; border-radius: 5px; background: #fff; color: #0d0d0d; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: "Google Sans Flex",system-ui,sans-serif; } .hist-card--red { color: #ff5959; } .hist-card b { position: absolute; top: 2px; left: 3px; font-size: 11px; font-weight: 800; line-height: 1; } .hist-card i { display: flex; align-items: center; justify-content: center; } .hist-card i svg { display: block; width: 12px; height: 12px; } .hist-card--back { background: #ffd106; } .hist-flags { display: flex; flex-wrap: wrap; gap: 6px; } .hist-flag { font-size: 11px; font-weight: 600; color: #d4d4d4; background: #262626; border-radius: 6px; padding: 3px 8px; } .hist-money { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid #262626; padding-top: 10px; } .hist-money-row { display: flex; justify-content: space-between; font-size: 13px; color: #a3a3a3; } .hist-money-row > span:last-child { color: #fff; font-weight: 600; } .hist-money-row--net > span:last-child.pos { color: #22c55e; } .hist-money-row--net > span:last-child.neg { color: #f43f5e; } .hist-verify-note { font-size: 12px; color: #737373; text-align: center; padding-top: 2px; } .hist-verify-panel { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #262626; padding-top: 10px; } .hist-verify-verdict { font-size: 12px; font-weight: 600; border-radius: 8px; padding: 8px 10px; } .hist-verify-verdict--ok { background: rgba(34,197,94,0.14); color: #22c55e; } .hist-verify-verdict--bad { background: rgba(244,63,94,0.14); color: #f43f5e; } .hist-verify-hash { font-family: "Google Sans Flex", monospace; font-size: 11px; color: #a3a3a3; word-break: break-all; user-select: text; } .hist-verify-deal { display: flex; flex-direction: column; gap: 10px; } .hist-seeds { display: flex; flex-direction: column; gap: 12px; padding: 0 4px; } .hist-seed-group { display: flex; flex-direction: column; justify-content: center; } .hist-seed-label { font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--content-secondary); } .hist-seed-value { font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.4; color: var(--content-primary); word-break: break-all; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .hist-verify-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; background: var(--surface-default); border: none; border-radius: 12px; font-family: var(--font-primary); font-weight: 600; font-size: 12px; line-height: 1.6; color: var(--content-primary); cursor: pointer; gap: 4px; } .hist-verify-btn:active { transform: scale(0.98); } .hist-verify-btn svg { width: 20px; height: 20px; } .hist-empty { font-family: var(--font-primary); font-weight: 400; font-size: 14px; color: var(--content-tertiary); text-align: center; padding: 40px 16px; } /* ── Provably Fair ── */ .pf-content { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; } .pf-title { font-family: var(--font-primary); font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--content-primary); } .pf-desc { font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.6; color: var(--content-secondary); } .pf-section { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; } /* Overview steps */ .pf-steps { display: flex; flex-direction: column; gap: 4px; align-items: center; background: rgba(0,0,0,0.22); border-radius: 16px; padding: 16px; overflow: hidden; } .pf-step { display: flex; gap: 10px; align-items: center; width: 100%; overflow: hidden; } .pf-step-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; background: var(--brand-primary); border-radius: 999px; padding: 6px; overflow: hidden; } .pf-step-icon svg { width: 20px; height: 20px; } .pf-step-text { flex: 1; min-width: 0; font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.6; color: var(--content-secondary); } .pf-step-arrow { display: flex; align-items: center; padding: 0 16px; width: 100%; } .pf-step-arrow-line { width: 0; height: 20px; border-left: 1px dashed var(--content-tertiary); } /* Inputs (Seeds + Verify) */ .pf-input { display: flex; align-items: center; gap: 12px; min-height: 56px; max-height: 56px; background: var(--surface-overlay); border: 1px solid var(--brd); border-radius: 16px; padding: 8px 12px 8px 16px; box-sizing: border-box; width: 100%; } .pf-input-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0; } .pf-input-label { font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--content-secondary); } .pf-input-value { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--content-primary); background: none; border: none; outline: none; padding: 0; width: 100%; } .pf-input-value--green { color: #4ade80; } .pf-input-value--mono { font-family: var(--font-mono); word-break: break-all; } .pf-input-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; background: var(--surface-default); border: none; border-radius: 12px; cursor: pointer; } .pf-input-btn:active { transform: scale(0.92); } .pf-input-btn svg { width: 16px; height: 16px; } /* Input states */ .pf-input:focus-within { border-color: #d4d4d4; } .pf-input--danger { border-color: #e11d48; } .pf-input--success { border-color: #4ade80; } .pf-input .pf-input-value::placeholder { color: var(--content-tertiary); } /* Buttons */ .pf-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; min-height: 48px; background: var(--surface-default); border: none; border-radius: 12px; font-family: var(--font-primary); font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--content-primary); cursor: pointer; } .pf-btn:active { transform: scale(0.98); } .pf-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pf-btn--ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--content-secondary); } /* Provably-fair: hash-match proof + outcome mapping */ .pf-proof { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--surface-default); border: 1px solid var(--border-strong); } .pf-proof--ok { border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.07); } .pf-proof--bad { border-color: rgba(244,63,94,0.5); background: rgba(244,63,94,0.07); } .pf-proof-verdict { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--green); } .pf-proof-verdict svg { width: 16px; height: 16px; flex-shrink: 0; } .pf-proof--bad .pf-proof-verdict { color: var(--red); } .pf-proof-label { font-size: 11px; color: var(--content-tertiary); text-transform: uppercase; letter-spacing: 0.04em; } .pf-proof-row { display: flex; flex-direction: column; gap: 2px; } .pf-proof-hash { display: flex; align-items: flex-start; gap: 8px; } .pf-proof-hash-value { font-family: var(--font-mono, monospace); font-size: 11px; line-height: 1.4; color: var(--content-secondary); word-break: break-all; flex: 1; } .pf-proof-note { font-size: 12px; color: var(--content-tertiary); } .pf-result-value--mono { font-family: var(--font-mono, monospace); } .pf-mapping { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-default); border: 1px solid var(--border-default); } .pf-mapping-label { font-size: 11px; color: var(--content-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .pf-mapping-formula { display: block; font-family: var(--font-mono, monospace); font-size: 11px; line-height: 1.5; color: var(--brand-highlight); word-break: break-word; } /* Standalone round-verification page (/dice/?round=) */ .rv-wrap { min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px 48px; background: var(--bg); overflow-y: auto; } .rv-card { width: 100%; max-width: 560px; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: 16px; padding: 24px; } .rv-card--wide { max-width: 760px; } .rv-title { font-family: var(--font-primary); font-weight: 800; font-size: 22px; color: var(--brand-primary); margin-bottom: 4px; } .rv-muted { color: var(--content-tertiary); font-size: 14px; } .rv-mono { font-family: var(--font-mono, monospace); color: var(--content-primary); font-size: 13px; } .rv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .rv-meta-cell { display: flex; flex-direction: column; gap: 4px; } .rv-seeds { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--surface-default); border: 1px solid var(--border-default); } /* Shareable verification permalink in a bet-history row */ .hist-permalink { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-default); border: 1px solid var(--border-default); } .hist-permalink-row { display: flex; align-items: center; gap: 8px; } .hist-permalink-a { flex: 1; min-width: 0; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--brand-primary); text-decoration: none; word-break: break-all; } .hist-permalink-a:hover { text-decoration: underline; } .hist-permalink-copy { flex-shrink: 0; height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: transparent; color: var(--content-secondary); font-family: var(--font-primary); font-size: 12px; font-weight: 600; cursor: pointer; } .hist-permalink-copy:active { transform: scale(0.97); } /* Full game rules */ .htp-fullrules-btn { width: 100%; height: 44px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--brand-border); background: transparent; color: var(--brand-primary); font-family: var(--font-primary); font-weight: 700; font-size: 14px; cursor: pointer; } .htp-fullrules-btn:active { transform: scale(0.99); } .rules-content { display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; } .rules-sec { display: flex; flex-direction: column; gap: 10px; } .rules-h { font-family: var(--font-primary); font-weight: 800; font-size: 16px; color: var(--brand-primary); margin: 0; } .rules-p { font-size: 14px; line-height: 1.55; color: var(--content-secondary); margin: 0; } .rules-ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .rules-ul li { font-size: 14px; line-height: 1.5; color: var(--content-secondary); } .rules-table { display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: 10px; overflow-x: auto; /* horizontal scroll on narrow screens instead of clipping */ -webkit-overflow-scrolling: touch; background: var(--surface-default); } /* Keep wide tables legible on mobile: rows hold a min width and the table scrolls. The bare 6-col modes table is the widest; narrower variants need less. */ .rules-table:not(.rules-table--4):not(.rules-table--3):not(.rules-table--2) .rules-tr { min-width: 500px; } .rules-table--4 .rules-tr { min-width: 380px; } .rules-table--3 .rules-tr { min-width: 320px; } .rules-tr { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 6px; padding: 9px 10px; font-size: 12px; color: var(--content-secondary); border-top: 1px solid var(--border-default); } .rules-table--2 .rules-tr { grid-template-columns: 1fr auto; } .rules-table--3 .rules-tr { grid-template-columns: 1fr 1fr 1.4fr; } .rules-table--4 .rules-tr { grid-template-columns: 0.6fr 1fr 1fr 1fr; } .rules-tr:first-child { border-top: none; } .rules-tr--head { background: var(--brand-primary); color: var(--content-inverse); font-weight: 800; border-top: none; } .rules-accent { color: var(--brand-primary); font-weight: 700; } .rules-win { color: var(--green); font-weight: 700; } .rules-loss { color: var(--red); font-weight: 700; } .rules-mode { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .rules-mode-t { font-weight: 700; font-size: 13px; color: var(--content-primary); } .rules-ex { font-size: 13px; color: var(--content-primary); background: var(--surface-default); border: 1px solid var(--border-default); border-radius: 8px; padding: 8px 10px; } .rules-warn { font-size: 13px; line-height: 1.5; color: var(--brand-highlight); background: rgba(var(--brand-rgb),0.07); border: 1px solid rgba(var(--brand-rgb),0.3); border-radius: 8px; padding: 10px 12px; } .rules-note { font-size: 12px; color: var(--content-tertiary); line-height: 1.5; } .rules-disclaimer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; color: var(--content-tertiary); } /* In-game full-rules overlay (no navigation → no game reload) */ .rules-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; } .rules-overlay-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-default); background: var(--surface-overlay); flex-shrink: 0; } .rules-overlay-back { background: transparent; border: none; color: var(--brand-primary); font-family: var(--font-primary); font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 0; } .rules-overlay-title { color: var(--content-secondary); font-weight: 600; font-size: 14px; margin-left: auto; } .rules-overlay-body { flex: 1; overflow-y: auto; padding: 16px; max-width: 760px; width: 100%; margin: 0 auto; } /* Verified result card */ .pf-result { display: flex; flex-direction: column; background: rgba(0,0,0,0.05); border: 1px solid var(--brd); border-radius: 16px; overflow: hidden; width: 100%; } .pf-result-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 12px; gap: 10px; } .pf-result-status { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; } .pf-result-title { font-family: var(--font-primary); font-weight: 500; font-size: 14px; line-height: 1.5; color: #4ade80; } .pf-result-sub { font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.6; color: var(--content-primary); } .pf-result-shield { width: 20px; height: 20px; flex-shrink: 0; } .pf-result-hash { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd); gap: 8px; } .pf-result-hash-text { display: flex; flex: 1; min-width: 0; gap: 8px; align-items: center; font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.5; } .pf-result-hash-label { color: var(--content-tertiary); white-space: nowrap; } .pf-result-hash-value { color: var(--content-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pf-result-copy { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; } .pf-result-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.5; white-space: nowrap; overflow: hidden; } .pf-result-row { display: flex; align-items: center; justify-content: space-between; overflow: hidden; } .pf-result-row-left { display: flex; flex: 1; min-width: 0; gap: 8px; align-items: center; } .pf-result-label { color: var(--content-tertiary); } .pf-result-value { color: var(--content-primary); } /* Error result */ .pf-result--error { background: rgba(244,63,94,0.08); border-color: rgba(244,63,94,0.2); } .pf-result--error .pf-result-title { color: var(--red); } /* ── How to Play ── */ .htp-content { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; } .htp-intro { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--content-secondary); } .htp-card { display: flex; flex-direction: column; gap: 16px; background: rgba(0,0,0,0.22); border-radius: 20px; padding: 16px 12px; overflow: hidden; } .htp-card-title { font-family: var(--font-primary); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--content-primary); text-align: center; width: 100%; } .htp-previews { display: flex; gap: 12px; justify-content: center; width: 100%; } .htp-preview { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 12px; align-items: center; justify-content: center; } .htp-preview-img { width: 100%; height: 120px; background: #171717; border-radius: 16px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .htp-preview-table { position: absolute; width: 113px; height: 102px; top: 6px; left: 50%; transform: translateX(-50%); } .htp-preview-table-bg { width: 100%; height: 100%; display: block; } .htp-preview-table-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 55%; opacity: 0.6; } /* SETANTAbet preview logo — brighter for legibility on the dark table (MyBC unaffected) */ .htp-preview-table-logo--setanta { opacity: 0.95; } .htp-preview-btn { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 8px; font-family: var(--font-primary); font-weight: 600; font-size: 9px; white-space: nowrap; border: none; cursor: default; } .htp-preview-btn--green { background: #22c55e; color: #171717; } .htp-preview-btn--yellow { background: #FFD106; color: #171717; } .htp-preview-btn svg { width: 12px; height: 12px; } .htp-preview-btn svg path { fill: #171717; } .htp-preview-info { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: space-between; width: 100%; flex: 1; } .htp-preview-texts { display: flex; flex-direction: column; align-items: center; text-align: center; } .htp-preview-label { font-family: var(--font-primary); font-weight: 600; font-size: 12px; line-height: 1.6; } .htp-preview-label--green { color: #22c55e; } .htp-preview-label--yellow { color: #FFD106; } .htp-preview-desc { font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.6; color: var(--content-secondary); text-align: center; } .htp-chip { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 8px; box-shadow: 0px 1px 0px #171717; font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--content-primary); white-space: nowrap; } .htp-chip--green { background: rgba(34,197,94,0.12); } .htp-chip--yellow { background: rgba(255,209,6,0.32); } /* Aviator: the how-to-play "Double / Roll Again" previews use the brand colour, so they go brand-red (green "win" previews stay green). */ /* Cashout preview matches the real in-game Cashout button: gray surface with green text + green dice icon (not a solid green pill). */ :root.brand-aviator .htp-preview-btn--green { background: var(--surface-default); color: #4ade80; } :root.brand-aviator .htp-preview-btn--green svg path { fill: #4ade80; } /* Double / "Roll Again" preview uses the action green (matches the real Roll button), not the crimson brand accent. */ :root.brand-aviator .htp-preview-btn--yellow { background: var(--action-primary); color: var(--action-text); } :root.brand-aviator .htp-preview-btn--yellow svg path { fill: var(--action-text); } :root.brand-aviator .htp-preview-label--yellow { color: var(--action-primary); } :root.brand-aviator .htp-chip--yellow { background: rgba(55, 160, 3, 0.32); } .htp-stats { display: flex; flex-direction: column; gap: 10px; background: var(--bg-secondary); border-radius: 16px; padding: 14px; width: 100%; box-sizing: border-box; } .htp-stat-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; min-height: 25px; } .htp-stat-label { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--content-secondary); flex-shrink: 0; } .htp-stat-value { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--content-primary); text-align: right; } .htp-stat-value--green { color: #4ade80; } .htp-warning { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--content-secondary); text-align: center; padding: 0 4px; } .htp-warning-red { color: #e11d48; } /* Risk Levels */ .htp-risk-cards { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; } .htp-risk-card { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 20px; align-items: center; justify-content: center; background: var(--bg-secondary); border-radius: 16px; padding: 16px 8px 8px; } .htp-risk-chip { display: flex; align-items: center; justify-content: space-between; width: 88px; padding: 4px 8px; background: var(--surface-default); border-radius: 12px; box-shadow: 0px 1px 0px #171717; } .htp-risk-chip-icon { width: 16px; height: 16px; flex-shrink: 0; } .htp-risk-chip-text { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; } /* Aviator: no bar icon, multiplier + label on one line (e.g. "1.15x Easy"). */ :root.brand-aviator .htp-risk-chip { justify-content: center; width: 100%; } :root.brand-aviator .htp-risk-chip-text { flex-direction: row; align-items: baseline; gap: 6px; } .htp-risk-chip-mult { font-family: var(--font-primary); font-weight: 600; font-size: 12px; line-height: 1.6; color: var(--content-primary); } .htp-risk-chip-label { font-family: var(--font-primary); font-weight: 400; font-size: 10px; line-height: 1.2; color: var(--content-secondary); } /* Footer */ .htp-footer { display: flex; gap: 10px; align-items: flex-start; padding: 0 4px; width: 100%; } .htp-footer-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; } .htp-footer-text { flex: 1; min-width: 0; font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.6; color: var(--content-tertiary); } .htp-footer-text strong { color: var(--content-secondary); font-weight: 500; } /* ── Bottom Drawer ── */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: flex; align-items: flex-end; justify-content: center; animation: drawer-fade-in .2s ease; } @keyframes drawer-fade-in { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 100%; max-width: 100%; max-height: 80vh; display: flex; flex-direction: column; animation: drawer-slide-up .25s ease; } @keyframes drawer-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; height: 64px; box-sizing: border-box; background: var(--bg-secondary); border-radius: 16px 16px 0 0; } .drawer-title { font-family: var(--font-primary); font-weight: 600; font-size: 14px; color: var(--content-primary); } .drawer-close { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: none; border: none; border-radius: 12px; cursor: pointer; } .drawer-close:active { background: var(--surface-default); } .drawer-tabs { box-sizing: border-box; display: flex; align-items: center; padding: 8px; margin: 0 16px 16px; background: var(--surface-overlay); border: 1px solid var(--brd); border-radius: 16px; } .drawer-tab { flex: 1; height: 34px; display: flex; justify-content: center; align-items: center; border: none; border-radius: 12px; background: transparent; filter: drop-shadow(0px 1px 0px var(--bg-secondary)); cursor: pointer; font-family: var(--font-primary); font-weight: 400; font-size: 12px; color: var(--content-primary); } .drawer-tab--active { background: var(--surface-default); box-shadow: 0px 1px 0px var(--bg-secondary); } .drawer-content { background: var(--bg-secondary); overflow-y: auto; flex: 1; border-radius: 0; padding-top: 12px; padding-bottom: 12px; } /* ── Mobile 3-dot Menu ── */ .m-menu-backdrop { position: fixed; inset: 0; z-index: 99; } .m-menu { position: absolute; top: 40px; right: 0; z-index: 100; display: flex; flex-direction: column; min-width: 160px; background: #262626; border: 1px solid #404040; border-radius: 12px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .m-menu-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: none; border: none; border-radius: 8px; cursor: pointer; font-family: var(--font-primary); font-size: 13px; font-weight: 500; color: #D4D4D4; white-space: nowrap; } .m-menu-item:active { background: #404040; } .m-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; } /* ── Mobile Controls Card (unified action footer) ── */ /* One bordered rounded-16 container: button panel (#171717) + bet bar (Figma Frame 1618874110). */ /* Footer wrapper — reserves a constant height (tall enough for the largest action state: Hit/Stand row + surrender + bet bar) so the flex-centred arena above never re-centres when the controls grow/shrink. The controls card is anchored to the bottom and stays its natural (dynamic) height; the reserved slack shows as empty space between the table and the card. */ /* Mobile: the footer is a FLOATING OVERLAY pinned to the bottom, taken out of the layout flow. This lets the arena/table centre in the FULL height (so the table no longer gets pushed up) and, because the overlay isn't in flow, its changing height across action states can't move the table — no jump, no overlap-driven reflow. The action states simply float over the empty area below the table (player cards are raised to the table edge so they stay clear — see .arena-cards--bottom). Desktop reverts to in-flow (below). */ .m-footer { display: flex; flex-direction: column; justify-content: flex-end; position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; } .m-controls { display: flex; flex-direction: column; margin: 4px 16px 14px; border: 1px solid #262626; border-radius: 16px; overflow: hidden; } .m-tab-group { box-sizing: border-box; display: flex; align-items: center; padding: 8px; gap: 11px; background: #171717; border: 1px solid #262626; border-radius: 16px 16px 0 0; width: 100%; min-height: 64px; height: 64px; } .m-risk-chip { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 8px 12px; gap: 4px; flex: 1; height: 47px; border: none; border-radius: 12px; background: transparent; filter: drop-shadow(0px 1px 0px #171717); cursor: pointer; font-family: var(--font-primary); transition: background .15s; } .m-risk-chip--active { background: #262626; box-shadow: 0px 1px 0px #171717; } .m-risk-chip:disabled { opacity: 0.45; cursor: not-allowed; } .m-risk-bars { display: flex; flex-direction: row; align-items: flex-end; gap: 2px; width: 11px; height: 11px; } .m-risk-bar { width: 2px; border-radius: 25px; flex-shrink: 0; } .m-risk-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; } .m-risk-mult { font-weight: 600; font-size: 12px; line-height: 160%; color: #FFFFFF; } .m-risk-label { font-weight: 400; font-size: 10px; line-height: 120%; color: #D4D4D4; white-space: nowrap; } /* Bet bar (bottom half of card) */ .m-bet-bar { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; gap: 8px; height: 40px; min-height: 40px; max-height: 40px; border-top: 1px solid #262626; /* separator from the button panel */ } .m-bet-left { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .m-bet-currency { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background: #404040; box-shadow: 0px 1px 0px #171717; border-radius: 9999px; font-weight: 600; font-size: 10px; color: #FFFFFF; } .m-bet-balance { font-weight: 400; font-size: 12px; line-height: 150%; color: #D4D4D4; /* Figma content/secondary */ font-family: "Google Sans Flex", sans-serif; font-variant-numeric: tabular-nums; width: auto; white-space: nowrap; } .m-bet-divider { width: 0; height: 16px; border-left: 1px solid #262626; margin: 0 4px; } .m-bet-center { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; } .m-bet-adj { display: flex; justify-content: center; align-items: center; width: 22px; height: 22px; background: var(--surface-default); box-shadow: 0px 1px 0px var(--bg-secondary); border-radius: 8px; font-size: 10px; border: none; font-size: 10px; color: #FFFFFF; cursor: pointer; font-family: var(--font-primary); } .m-bet-adj:active:not(:disabled) { transform: scale(0.95); } .m-bet-adj:disabled { opacity: 0.4; cursor: not-allowed; } .m-bet-value--disabled { opacity: 0.4; cursor: not-allowed; } .m-bet-label { font-weight: 400; font-size: 12px; color: #737373; font-family: var(--font-primary); } .m-bet-value { font-weight: 400; font-size: 12px; color: #FFFFFF; /* Figma amount = white */ cursor: pointer; font-family: "Google Sans Flex", sans-serif; font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; } .m-bet-input { width: 50px; height: 22px; background: #262626; border: 1px solid #404040; border-radius: 6px; color: #D4D4D4; font-size: 12px; text-align: center; outline: none; font-family: var(--font-primary); } .m-bet-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .m-bet-chip { box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 4px; min-width: 26px; width: auto; height: 22px; background: #404040; border: 1px solid #525252; box-shadow: 0px 1px 0px #171717; border-radius: 8px; border: none; font-weight: 400; font-size: 10px; color: #FFFFFF; cursor: pointer; font-family: var(--font-primary); } .m-bet-chip:active { transform: scale(0.95); } .m-bet-chip:disabled { opacity: 0.45; cursor: not-allowed; } /* ── Blackjack bet row — Figma 237-114403: plain balance + [1/2] − Bet + [2X], all chips dark #262626, no currency badge/divider. Scoped to blackjack. ── */ /* Bet-input row (Figma parent/bet-input): 42px tall, 10px padding, balance left, controls right, space-between. */ .m-bet-bar--bj { gap: 14px; padding: 10px; height: 42px; min-height: 42px; max-height: 42px; } .m-bet-bar--bj .m-bet-balance { flex-shrink: 0; font-weight: 400; font-size: 12px; line-height: 150%; color: #d4d4d4; /* content/secondary */ font-family: "Google Sans Flex", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; } .m-bet-bar--bj .m-bet-controls { display: flex; align-items: center; justify-content: space-between; /* Figma: 1/2 … −Bet+ … 2X spread across the group */ width: 216px; max-width: 62%; flex-shrink: 1; } .m-bet-bar--bj .m-bet-center { flex: 0 0 auto; gap: 4px; } /* All four chips (1/2, −, +, 2X) = Figma _base/chip: 22×22, #262626, 8px radius, 0 1px 0 #171717 shadow, 10px white label. */ .m-bet-bar--bj .m-bet-chip, .m-bet-bar--bj .m-bet-adj { box-sizing: border-box; width: 22px; min-width: 22px; height: 22px; padding: 4px; background: #262626; border: none; box-shadow: 0px 1px 0px #171717; border-radius: 8px; font-size: 10px; font-weight: 400; color: #ffffff; } .m-bet-bar--bj .m-bet-label { font-size: 12px; color: #737373; } .m-bet-bar--bj .m-bet-value { font-size: 12px; color: #ffffff; min-width: 40px; } /* Action buttons row */ /* game-States: the button panel — #171717 with 10px padding (Figma) */ .m-action-row { display: flex; gap: 8px; padding: 10px; box-sizing: border-box; background: #171717; position: relative; z-index: 10; width: 100%; /* Dynamic height — the action area hugs its content (bet button, or the Hit/Stand row with an optional surrender row). The table no longer depends on this height: the arena is anchored to the top of its region (see .game-arena-center) so a taller/shorter footer never moves it. */ min-height: 68px; align-items: center; } .m-btn-back { display: flex; justify-content: center; align-items: center; padding: 10px 16px 10px 8px; gap: 4px; height: clamp(40px, 6.4vh + 11.2px, 56px); width: 172px; background: #262626; border-radius: 12px; border: none; cursor: pointer; font-family: var(--font-primary); font-weight: 600; font-size: 14px; color: #FFFFFF; } .m-btn-back:active:not(:disabled) { transform: scale(0.97); } .m-btn-back:disabled { opacity: 0.4; cursor: not-allowed; } .m-btn-back svg { flex-shrink: 0; } /* Cashout active button (green, in double mode) — legacy, kept for compat */ .m-btn-cashout-active { display: flex; justify-content: center; align-items: center; padding: 10px 16px; gap: 4px; height: clamp(40px, 6.4vh + 11.2px, 56px); width: 172px; background: #22C55E; border-radius: 12px; border: none; cursor: pointer; font-family: var(--font-primary); font-weight: 600; font-size: 14px; color: #FFFFFF; animation: cashout-pulse 1.5s ease-in-out infinite; } .m-btn-cashout-active:active { transform: scale(0.97); } @keyframes cashout-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50% { box-shadow: 0 0 12px 4px rgba(34,197,94,0.25); } } /* NEW: Cashout button — gray bg, green text (Figma redesign) */ .m-btn-cashout-new { display: flex; justify-content: center; align-items: center; padding: 10px 16px; gap: 4px; height: clamp(40px, 6.4vh + 11.2px, 56px); background: #262626; border-radius: 12px; border: none; cursor: pointer; font-family: var(--font-primary); font-weight: 600; font-size: 12px; color: #4ade80; white-space: nowrap; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .m-btn-cashout-new:active { transform: scale(0.97); } .m-btn-cashout-new svg { width: 20px; height: 20px; flex-shrink: 0; } /* NEW: Bet & Roll button — full-width yellow (idle state) */ .m-btn-deal { display: flex; justify-content: center; align-items: center; padding: 10px 16px; gap: 4px; height: 48px; /* Figma _base/button 48px */ width: 100%; flex: 1; background: var(--action-primary); border-radius: 12px; border: none; cursor: pointer; font-family: "Google Sans Flex", var(--font-primary); font-weight: 600; font-size: 14px; /* Figma sm */ color: var(--action-text); -webkit-tap-highlight-color: transparent; } .m-btn-deal:active:not(:disabled) { transform: scale(0.97); } .m-btn-deal:disabled { opacity: 0.5; cursor: not-allowed; } /* Bet amount shown inline on the Place a Bet CTA. */ .m-btn-deal-amt { margin-left: 6px; font-weight: 700; } .m-btn-deal svg { width: 20px; height: 20px; } /* NEW: Step tracker (horizontal scroll in-game) */ .m-step-track { display: flex; align-items: center; gap: 8px; overflow-x: auto; flex: 1; padding: 0 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; } .m-step-track::-webkit-scrollbar { display: none; } .m-step-chip { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px; height: 36px; background: #262626; border-radius: 12px; border: none; cursor: default; font-family: var(--font-primary); font-weight: 600; font-size: 12px; line-height: 1.6; color: #FFFFFF; white-space: nowrap; box-sizing: border-box; } .m-step-chip--active { border: 2px solid #404040; } .m-step-chip--done { padding: 0; width: 36px; min-width: 36px; height: 36px; background: #262626; } .m-step-chip svg { width: 16px; height: 16px; flex-shrink: 0; } /* MultiplierTimeline (double-mode ladder) — chip promotion motion. The JS component references these by name; keeping them here avoids a per-render