/* ── 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. */ --action-primary: var(--brand-primary); --action-text: var(--content-inverse); /* Status */ --status-success: #22c55e; --status-error: #f43f5e; /* Shadow */ --shadow-neutral: #171717; /* Typography */ --font-primary: 'Google Sans Flex', system-ui, sans-serif; --font-mono: 'Google Sans Flex', monospace; /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; } /* ── Brand overrides (?brand= → brand- class on ) ── DEFAULT brand is mybc (app.jsx falls back to it when no ?brand= is given). To add a brand (e.g. setanta): add one `:root.brand-` block overriding the tokens it needs — accents read var(--brand-primary)/rgba(var(--brand-rgb),…) and CTAs read var(--action-primary)/var(--action-text), so a block here re-themes the whole game with no JS changes. */ :root.brand-mybc { /* Full MYBC theme: the arena accent AND the moles follow the brand orange (mole bodies fill var(--brand-primary)), CTAs match blackjack-mybc. */ --brand-primary: #FF7B17; --brand-rgb: 255, 123, 23; --brand-secondary: #F26B0A; --brand-highlight: #FFA149; --brand-border: #C2590A; --action-primary: #FF7B17; --action-text: #FFFFFF; /* orange is a dark-ish surface → on-brand text flips to white */ --content-inverse: #FFFFFF; } :root.brand-aviator { --brand-primary: #AF292A; --brand-rgb: 175, 41, 42; --brand-secondary: #c1352f; --brand-highlight: #d94a42; --brand-border: #7c2824; --action-primary: #37A003; --action-text: #ffffff; --content-inverse: #ffffff; } /* ── Reset ── */ * { margin: 0; padding: 0; box-sizing: border-box; } button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; } button:disabled { cursor: not-allowed; } input { font-family: inherit; } /* ── Body & Layout (dice root behavior) ── */ html { background: #171717; touch-action: manipulation; } body { height: 100dvh; height: var(--app-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. */ user-select: none; -webkit-user-select: none; } #root { width: 100%; max-width: 520px; height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* ── Mobile Header (dice 1:1) ── */ .m-header { display: flex; justify-content: space-between; align-items: center; padding: 12px; height: 56px; box-sizing: border-box; position: relative; z-index: 20; flex-shrink: 0; } .m-header-btn { display: flex; justify-content: center; align-items: center; padding: 8px; background: #262626; border: none; cursor: pointer; border-radius: 8px; } .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 (dice). */ 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); } /* 3-dot menu popover (dice) */ .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; } /* ── Arena ── */ .game-arena-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; position: relative; container-type: size; z-index: 1; } .board { position: relative; /* Moles rise ~30% of board height (= 0.207 × width) above the top row. The header already gives ~56px of slack above the arena, so only the REMAINDER is reserved as top margin — on roomy screens that's 0 and the board simply centers big; on short windows it pushes down just enough that risen moles never leave the viewport. */ --board-w: min(96cqw, 118cqh); width: var(--board-w); aspect-ratio: 1.45; margin-top: max(0px, calc(var(--board-w) * 0.207 - 56px)); } .board.board-shake { animation: boardShake .45s ease .12s; } @keyframes boardShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } } /* one hole cell — absolutely positioned in % of the board */ .hole { position: absolute; width: 26%; aspect-ratio: 1.15; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; transition: transform .15s; } .hole-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .hole-mound-low { fill: #1e1e1e; transition: fill .15s; } .hole-ring { fill: #2e2e2e; transition: fill .15s; } .hole-pit { fill: #0a0a0a; transition: fill .15s; } /* top crescent = inner shadow */ .hole-pit-floor { fill: #161616; transition: fill .15s; } @media (hover: hover) { .app.playing .hole.pickable:hover .hole-ring { fill: #404040; } .app.playing .hole.pickable:hover .hole-mound-low { fill: #2a2a2a; } .app.playing .hole.pickable:hover { transform: translate(-50%, -52%); } } .hole.miss .hole-ring { fill: #4b1d28; } .hole.miss .hole-mound-low { fill: #33141d; } .hole.miss .hole-pit { fill: #1c0a11; } .hole.miss .hole-pit-floor { fill: #2b1019; } .hole.hit .hole-ring { fill: rgba(var(--brand-rgb), 0.5); } .hole.hit .hole-mound-low { fill: rgba(var(--brand-rgb), 0.22); } .hole.hit .hole-pit { fill: #1f1c0c; } .hole.hit .hole-pit-floor { fill: #2e2a12; } /* mole window: clips the mole so it rises from inside the pit */ .mole-window { position: absolute; left: 4%; right: 4%; bottom: 42%; height: 185%; /* headroom: the raised poses + pop overshoot must never kiss the top edge — only the rim line may clip */ overflow: hidden; pointer-events: none; } /* Moles are ALWAYS mounted; states swap classes so every up/down move is a smooth spring transition (count change, round start, wave reset, reveal). */ .mole-svg { position: absolute; left: 50%; bottom: 0; width: 84%; transform: translate(-50%, 103%); /* fully hidden in the pit */ transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.34,1.56,.64,1), filter .3s ease; } /* preview (idle): half-risen, breathing */ .mole-svg.mole-peek { transform: translate(-50%, 34%); } .mole-svg.mole-peek .mole-body-g { animation: moleBreathe 2s ease-in-out infinite; transform-origin: 50% 100%; } @keyframes moleBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 0.97); } } /* found mole: full pop with squash & stretch overshoot — delayed until the hammer lands (.12s impact). When the wave resets the class is removed and the base transition slides the mole back into the pit. */ .mole-svg.mole-pop { animation: molePop .55s cubic-bezier(.34,1.56,.64,1) .12s forwards; } @keyframes molePop { 0% { transform: translate(-50%, 103%) scale(1.15, 0.8); } 55% { transform: translate(-50%, 12%) scale(0.94, 1.08); } 78% { transform: translate(-50%, 32%) scale(1.05, 0.95); } 100% { transform: translate(-50%, 26%) scale(1, 1); } } .mole-svg.mole-pop .mole-body-g { animation: moleBreathe 2s ease-in-out .75s infinite; transform-origin: 50% 100%; } /* whacked celebration: stars twinkle around the popped mole's head */ .mole-stars { opacity: 0; } .mole-pop .mole-stars { animation: starsPop .9s ease .2s; } .mole-stars path { transform-origin: center; } @keyframes starsPop { 0% { opacity: 0; transform: scale(.5) rotate(-12deg); } 25% { opacity: 1; transform: scale(1.08) rotate(4deg); } 70% { opacity: 1; transform: scale(1) rotate(10deg); } 100% { opacity: 0; transform: scale(1.15) rotate(16deg); } } /* cashout rest: same full height as the reveal, normal face, battle scars on */ .mole-svg.mole-up { transform: translate(-50%, 28%); } .mole-svg.mole-up .mole-body-g { animation: moleBreathe 2s ease-in-out infinite; transform-origin: 50% 100%; } /* lose reveal: remaining moles pop up FULL COLOR and laugh at the player */ .mole-svg.mole-reveal { transform: translate(-50%, 28%); } .mole-reveal .mole-body-g { animation: moleLaugh .55s ease-in-out .45s infinite; transform-origin: 50% 100%; } @keyframes moleLaugh { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.04, 0.94); } 60% { transform: scale(0.98, 1.04); } } /* blink: closed-eyes layer flashes on periodically */ .mole-eyes-closed { opacity: 0; animation: moleBlink 3.8s linear infinite; } @keyframes moleBlink { 0%, 91%, 97%, 100% { opacity: 0; } 93%, 95% { opacity: 1; } } .mole-eyes-open { animation: moleBlinkInv 3.8s linear infinite; } @keyframes moleBlinkInv { 0%, 91%, 97%, 100% { opacity: 1; } 93%, 95% { opacity: 0; } } /* ── Hammer whack ── Pivot sits at the handle end (94% 50%), right of the hole; the head lands on the hole centre at ≈ -4deg (calibrated against the board geometry). */ .hammer { position: absolute; left: 28%; top: -2%; width: 96%; overflow: visible; pointer-events: none; z-index: 8; transform-origin: 94% 50%; } /* click: full swing down onto the hole centre */ .hammer--swing { animation: hammerWhack .5s cubic-bezier(.36,.07,.19,.97) forwards; } @keyframes hammerWhack { 0% { opacity: 0; transform: rotate(78deg); } 18% { opacity: 1; transform: rotate(78deg); } 38% { transform: rotate(-6deg); } /* impact ≈ .12s in */ 52% { transform: rotate(24deg); } /* recoil */ 70% { transform: rotate(2deg); } 100% { opacity: 0; transform: rotate(8deg); } } /* desktop hover: raised hammer bobs over the hovered hole, ready to strike. Hover-capable pointers only — never on touch. */ .hammer--hover { display: none; } @media (hover: hover) { .hammer--hover { display: block; opacity: 0.95; animation: hammerHover 1s ease-in-out infinite; } } @keyframes hammerHover { 0%, 100% { transform: rotate(70deg); } 50% { transform: rotate(58deg); } } /* impact star flash at the pit */ .whack-flash { position: absolute; left: 50%; top: 34%; width: 42%; transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none; z-index: 5; color: var(--brand-primary); animation: whackFlash .35s ease-out .1s forwards; } @keyframes whackFlash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(14deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4) rotate(22deg); } } /* ── Face swaps (Lottie-style expression layers) ── pop: stunned face for the first beat, then the normal face returns; lose-reveal: sad face. All layers always mounted, opacity-driven. */ .mole-face-whacked, .mole-face-laugh { opacity: 0; } .mole-pop .mole-face-whacked { animation: faceStun 1.3s ease .12s forwards; } .mole-pop .mole-face-normal { animation: faceReturn 1.3s ease .12s forwards; } @keyframes faceStun { 0% { opacity: 0; } 6%, 52% { opacity: 1; } 62%, 100% { opacity: 0; } } @keyframes faceReturn { 0%, 52% { opacity: 0; } 62%, 100% { opacity: 1; } } .mole-reveal .mole-face-normal { opacity: 0; } .mole-reveal .mole-face-laugh { opacity: 1; transition: opacity .3s ease .2s; } /* ── Battle damage layers (Rainbet-style persistent marks) ── Which marks show is inline-driven (per-round shuffled order); the freshly gained mark springs in on the whacked mole, old wounds render statically. */ .mole-dmg-bump { transform-origin: 72px 13px; } .mole-dmg-scratch { transform-origin: 100px 125px; } .mole-dmg-eye { transform-origin: 127px 83px; } .mole-dmg-patch { transform-origin: 74px 84px; } .mole-dmg-cheek { transform-origin: 56px 110px; } .mole-dmg-plaster { transform-origin: 132px 34px; } .mole-pop .mole-dmg.dmg-new { animation: dmgIn .45s cubic-bezier(.34,1.56,.64,1) .18s both; } @keyframes dmgIn { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } } /* ── Taunt (Rainbet beat): after a hit the wave's OTHER moles surface too, laughing and trash-talking, then duck back down on the wave reset. */ .mole-svg.mole-taunt { transform: translate(-50%, 30%); } .mole-taunt .mole-body-g { animation: moleLaugh .55s ease-in-out .3s infinite; transform-origin: 50% 100%; } .mole-taunt .mole-face-normal { opacity: 0; } .mole-taunt .mole-face-laugh { opacity: 1; transition: opacity .2s ease .1s; } /* ── Dirt burst when a mole erupts from the hole ── */ .dirt { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); pointer-events: none; z-index: 7; } .dirt span { position: absolute; left: 0; top: 0; width: 11px; height: 9px; border-radius: 45% 55% 50% 50%; opacity: 0; animation: dirtBurst .65s cubic-bezier(.22,.68,.44,1) forwards; } .dirt span:nth-child(1) { background: #7a5230; --dx: -34px; --dy: -42px; --rot: -160deg; animation-delay: .12s; } .dirt span:nth-child(2) { background: #5d3f24; --dx: 30px; --dy: -50px; --rot: 200deg; animation-delay: .14s; } .dirt span:nth-child(3) { background: #8f6a3f; --dx: -14px; --dy: -58px; --rot: 120deg; animation-delay: .12s; } .dirt span:nth-child(4) { background: #7a5230; --dx: 44px; --dy: -30px; --rot: -220deg; animation-delay: .17s; } .dirt span:nth-child(5) { background: #5d3f24; --dx: -46px; --dy: -22px; --rot: 260deg; animation-delay: .16s; } .dirt span:nth-child(6) { background: #8f6a3f; --dx: 12px; --dy: -64px; --rot: -90deg; animation-delay: .19s; } @keyframes dirtBurst { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.6); } 12% { opacity: 1; } 60% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 34px)) rotate(var(--rot)) scale(.8); } } /* ── Confetti on big wins (≥3× or cap) ── */ .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 25; } .confetti span { position: absolute; top: -5%; width: 8px; height: 13px; border-radius: 2px; opacity: 0; animation: confettiFall linear forwards; } @keyframes confettiFall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--cx), 78vh) rotate(var(--rot)); } } /* dust puff on empty pick — waits for the hammer to land */ .dust { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; z-index: 8; } .dust span { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #6b6b6b; opacity: 0; animation: dustPuff .5s ease-out forwards; } .dust span:nth-child(1) { --dx: -22px; --dy: -14px; animation-delay: .12s; } .dust span:nth-child(2) { --dx: 20px; --dy: -18px; animation-delay: .17s; } .dust span:nth-child(3) { --dx: -8px; --dy: -26px; animation-delay: .2s; } .dust span:nth-child(4) { --dx: 12px; --dy: -6px; animation-delay: .15s; } @keyframes dustPuff { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.6); } } /* floating multiplier over a hit hole */ .hole-mult-pop { position: absolute; left: 50%; top: 8%; transform: translate(-50%, -50%); font-size: clamp(12px, 4.4cqmin, 24px); font-weight: 800; color: #ffffff; text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.6); pointer-events: none; animation: holeMultPop 1.1s ease .12s both; z-index: 7; font-variant-numeric: tabular-nums; } @keyframes holeMultPop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -55%) scale(1.12); } 70% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(.9); } } /* next-multiplier badge under the board (dice chip idiom) */ .next-badge { position: absolute; left: 50%; bottom: -7%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; height: 22px; padding: 4px 6px; background: #262626; box-shadow: 0px 1px 0px #171717; border-radius: 8px; font-size: 10px; font-weight: 400; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; animation: toast-pop .2s ease; } .next-badge svg { color: var(--content-tertiary); width: 10px; height: 10px; } /* ── Round toast (dice verbatim) ── */ .round-toast { display: flex; align-items: center; gap: 4px; position: absolute; top: calc(50% - 16px); left: 50%; transform: translate(-50%, -50%); z-index: 10; animation: toast-pop .2s ease; white-space: nowrap; } .round-toast-chip { display: flex; justify-content: center; align-items: center; padding: 4px 6px; height: 22px; border-radius: 8px; box-shadow: 0px 1px 0px #171717; font-family: var(--font-primary); font-weight: 600; font-size: 10px; line-height: 1.4; color: #FFFFFF; font-variant-numeric: tabular-nums; } .round-toast-chip--win { background: #22C55E; } .round-toast-chip--lose { background: #F43F5E; } .round-toast-chip--max { background: var(--brand-primary); color: var(--content-inverse); } .round-toast-detail { display: flex; justify-content: center; align-items: center; padding: 4px 6px; height: 22px; background: #262626; box-shadow: 0px 1px 0px #171717; border-radius: 8px; font-size: 10px; color: #FFFFFF; font-variant-numeric: tabular-nums; } @keyframes toast-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .next-badge { animation: next-pop .3s cubic-bezier(.34,1.56,.64,1); } @keyframes next-pop { 0% { opacity: 0; transform: translateX(-50%) scale(0.7); } 60% { opacity: 1; transform: translateX(-50%) scale(1.12); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } } /* per-round autobet win pill (Stake idiom: tiny, non-blocking) */ .win-toast { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 6px 14px; background: rgba(23, 23, 23, 0.92); border: 1px solid #4ADE80; border-radius: 999px; font-family: var(--font-primary); font-size: 12px; font-weight: 600; color: #4ADE80; z-index: 60; white-space: nowrap; animation: next-pop .2s ease; } /* end-of-auto summary card */ .cashout-alert.auto-summary { width: 200px; } .cashout-alert.auto-summary--neg { border-color: var(--status-error); box-shadow: 0 0 40px rgba(244,63,94,0.15), 0 16px 48px rgba(0,0,0,0.5); animation: cardPop .25s cubic-bezier(0.25, 0.1, 0.25, 1) both; } .auto-summary--neg .cashout-alert-label, .auto-summary--neg .cashout-alert-mult { color: var(--status-error); } .auto-summary-rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-family: var(--font-primary); font-size: 11px; color: var(--content-secondary); } .auto-sum--win { color: #4ADE80; } .auto-sum--loss { color: var(--status-error); } /* insufficient/alert toast */ .alert-toast { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 8px 16px; background: var(--status-error); border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; z-index: 60; box-shadow: 0 4px 16px rgba(0,0,0,.4); white-space: nowrap; animation: next-pop .2s ease; } /* ── Controls (dice footer card) ── */ .m-controls { display: flex; flex-direction: column; padding: 0 14px 14px; gap: 0; margin-top: 4px; flex-shrink: 0; } .m-tab-group { box-sizing: border-box; display: flex; align-items: center; padding: 8px; gap: 8px; background: #171717; border: 1px solid #262626; border-radius: 16px 16px 0 0; width: 100%; min-height: 64px; height: 64px; } .m-tab-label { font-size: 10px; font-weight: 400; color: #737373; padding: 0 2px 0 6px; flex-shrink: 0; } /* ── Moles dropdown + inline multiplier ladder (dice aviator av-diff pattern) ── */ .m-tab-group--ladder { gap: 8px; padding: 8px; } .av-diff-sep { flex: none; width: 1px; align-self: stretch; background: #262626; } .av-diff { position: relative; flex: none; } .av-diff-pill { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; background: var(--surface-default); border: none; border-radius: 8px; color: #fff; font-family: var(--font-primary); font-weight: 600; font-size: 12px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; } .av-diff-pill:disabled { opacity: 0.55; cursor: not-allowed; } .av-diff-pill:active:not(:disabled) { transform: scale(0.97); } .av-diff-label { line-height: 1; } .av-chev { color: #d4d4d4; } .av-diff-scrim { position: fixed; inset: 0; z-index: 40; } .av-diff-menu { position: absolute; bottom: calc(100% + 16px); left: -9px; z-index: 50; min-width: 150px; background: var(--surface-overlay); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); animation: drawer-fade-in 0.12s ease; } .av-diff-item { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; background: transparent; border: none; border-radius: 8px; color: var(--content-secondary); font-family: var(--font-primary); font-weight: 500; font-size: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .av-diff-item:hover { background: rgba(64, 64, 64, 0.5); } .av-diff-item--sel { background: var(--surface-raised); color: #fff; } .av-diff-item-label { flex: 1; text-align: left; line-height: 1; } .av-diff-item-mult { font-variant-numeric: tabular-nums; color: var(--content-tertiary); } .av-diff-item--sel .av-diff-item-mult { color: var(--brand-primary); } .mole-mini { display: block; flex-shrink: 0; } /* inline multiplier ladder (dice MultiplierTimeline idiom) */ .mt-ladder { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); } .mt-ladder::-webkit-scrollbar { display: none; } .mt-chip { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; max-height: 36px; padding: 8px 12px; border-radius: 12px; background: var(--surface-default); box-sizing: border-box; white-space: nowrap; position: relative; overflow: hidden; flex-shrink: 0; font-family: var(--font-primary); font-weight: 600; font-size: 12px; line-height: 1.6; color: var(--content-primary); font-variant-numeric: tabular-nums; } .mt-chip--played { color: var(--content-disabled); } .mt-chip--current { border: 2px solid #4ade80; color: #4ade80; } .mt-chip--next svg { width: 14px; height: 14px; color: var(--content-primary); } .mt-chip--promoted { animation: dd-settle .45s cubic-bezier(.34,1.56,.64,1); } @keyframes dd-settle { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } .mt-shimmer { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); transform: translateX(-120%); animation: dd-shimmer .7s ease forwards; pointer-events: none; } @keyframes dd-shimmer { to { transform: translateX(120%); } } .m-risk-chip { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6px 4px; gap: 1px; 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-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; font-variant-numeric: tabular-nums; } .m-risk-chip--active .m-risk-mult { color: var(--brand-primary); } /* Bet bar (dice verbatim, bottom half of the card) */ .m-bet-bar { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; gap: 8px; border: 1px solid #262626; border-top: none; border-radius: 0 0 16px 16px; height: 40px; min-height: 40px; max-height: 40px; } .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: #737373; font-family: var(--font-mono); 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; 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: #D4D4D4; cursor: pointer; font-family: var(--font-mono); 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; 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; } /* Action buttons row — ABOVE the footer card on every size (desktop order) */ .m-action-row { display: flex; gap: 8px; padding: 0 0 16px; align-items: center; order: 1; min-width: 0; } .m-tab-group { order: 2; } .m-bet-bar { order: 3; } .m-btn-betroll { display: flex; justify-content: center; align-items: center; padding: 10px 16px; gap: 4px; height: clamp(40px, 6.4vh + 11.2px, 56px); width: 100%; flex: 1; min-width: 0; white-space: nowrap; background: var(--action-primary); border-radius: 12px; border: none; cursor: pointer; font-family: var(--font-primary); font-weight: 600; font-size: 14px; color: var(--action-text); -webkit-tap-highlight-color: transparent; } .m-btn-betroll:active:not(:disabled) { transform: scale(0.97); } .m-btn-betroll:disabled { opacity: 0.5; cursor: not-allowed; } .m-btn-betroll .m-btn-amt { margin-left: 4px; font-weight: 700; font-variant-numeric: tabular-nums; } .m-btn-betroll--cash { background: #22C55E; color: #FFFFFF; animation: cashout-pulse 1.5s ease-in-out infinite; } /* long money labels stack: label on top, amount under it — the button keeps its fixed height, the two lines just center inside it */ .m-btn-betroll--cash > span, .m-btn-betroll--stop > span { display: flex; flex-direction: column; align-items: center; line-height: 1.15; } .m-btn-betroll--cash .m-btn-amt, .m-btn-betroll--stop .m-btn-amt { margin-left: 0; font-size: 12px; opacity: 0.92; } @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); } } /* Stop Auto — red CTA while the auto engine runs */ .m-btn-betroll--stop { background: var(--status-error); color: #FFFFFF; } .m-btn-betroll--stop .m-btn-amt { font-variant-numeric: tabular-nums; } /* ── Auto config drawer ── */ .auto-field-label { font-family: var(--font-primary); font-size: 12px; color: var(--content-secondary); padding: 0 4px; margin-bottom: -8px; } /* Compact auto drawer: tighter rhythm than the shared pf-content */ .auto-content { gap: 10px; } .auto-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .auto-label-row .auto-field-label { margin-bottom: 0; } .auto-row { display: flex; align-items: center; gap: 10px; } .auto-row .auto-field-label { margin-bottom: 0; flex-shrink: 0; } .auto-row .auto-seg { flex: 1; } /* Auto whack-pattern picker: mini 2-3-2 board, buttons placed by HOLE_POS % */ .auto-holes { position: relative; width: 100%; height: 92px; background: var(--surface-overlay); border-radius: 12px; } .auto-hole { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: #262626; border: 2px solid #404040; color: var(--content-secondary); font-family: var(--font-primary); font-weight: 600; font-size: 12px; cursor: pointer; padding: 0; } .auto-hole:active { transform: translate(-50%, -50%) scale(0.9); } .auto-hole--on { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--content-inverse); } .auto-holes-hint { font-family: var(--font-primary); font-size: 11px; color: var(--content-secondary); text-align: right; } .auto-seg { display: flex; padding: 4px; gap: 4px; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: 12px; } .auto-seg-btn { flex: 1; height: 34px; border-radius: 8px; background: transparent; font-family: var(--font-primary); font-size: 12px; font-weight: 500; color: var(--content-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; } .auto-seg-btn--on { background: var(--surface-default); color: #fff; box-shadow: 0 1px 0 var(--shadow-neutral); } .auto-seg-btn:disabled { opacity: .45; cursor: not-allowed; } .auto-two { display: flex; gap: 12px; align-items: stretch; } .auto-two > * { flex: 1; } /* Advanced section toggle + compact fields (uniform 44px rows) */ .auto-adv-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; padding: 0 12px; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: 12px; color: var(--content-secondary); font-family: var(--font-primary); font-size: 12px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; } .auto-adv-toggle--open { color: var(--content-primary); } /* iOS-style switch */ .adv-switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--surface-raised); transition: background .15s; flex-shrink: 0; } .adv-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: transform .15s; } .auto-adv-toggle--open .adv-switch { background: var(--brand-primary); } .auto-adv-toggle--open .adv-switch-knob { transform: translateX(16px); } .auto-adv { display: flex; flex-direction: column; gap: 16px; } .auto-adv .auto-seg { box-sizing: border-box; height: 44px; padding: 4px; } .auto-adv .auto-seg-btn { height: auto; } .auto-adv .pf-input { box-sizing: border-box; min-height: 44px; max-height: 44px; padding: 5px 12px; border-radius: 12px; } .auto-adv .pf-input-text { gap: 0; justify-content: center; } .auto-adv .pf-input-label { font-size: 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .auto-adv .pf-input-value { font-size: 13px; line-height: 1.3; } .auto-start { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; min-height: 48px; background: var(--action-primary); color: var(--action-text); border: none; border-radius: 12px; font-family: var(--font-primary); font-weight: 700; font-size: 14px; cursor: pointer; } .auto-start:active { transform: scale(0.98); } .auto-target { color: var(--brand-primary); font-variant-numeric: tabular-nums; } /* Random Pick — gray companion button (dice cashout-new idiom) */ .m-btn-random { display: flex; justify-content: center; align-items: center; flex-shrink: 0; white-space: nowrap; padding: 10px 12px; 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: #D4D4D4; white-space: nowrap; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .m-btn-random:active:not(:disabled) { transform: scale(0.97); } .m-btn-random:disabled { opacity: 0.5; cursor: not-allowed; } .m-btn-random svg { width: 16px; height: 16px; flex-shrink: 0; color: #D4D4D4; } /* ── Drawer (info / rules) ── */ .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: 520px; max-height: 80vh; display: flex; flex-direction: column; background: var(--bg-secondary); border-radius: 16px 16px 0 0; 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; flex-shrink: 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; color: var(--content-secondary); } .drawer-close:active { background: var(--surface-default); } .drawer-content h4 { color: #fff; font-size: 13px; font-weight: 600; margin: 0; padding: 0 4px; } .drawer-content table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 12px; line-height: 1.5; color: var(--content-secondary); } .drawer-content th, .drawer-content td { padding: 8px; border-bottom: 1px solid var(--border-default); } .drawer-content th { color: var(--content-tertiary); font-weight: 600; } .drawer-content th:first-child, .drawer-content td:first-child { text-align: left; } .drawer-content th:not(:first-child), .drawer-content td:not(:first-child) { text-align: right; } .drawer-content tr:last-child td { border-bottom: none; } /* Drawer content area (dice) */ .drawer-content { background: var(--bg-secondary); overflow-y: auto; flex: 1; border-radius: 0; padding-top: 12px; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--surface-raised) transparent; } .drawer-content::-webkit-scrollbar { width: 6px; } .drawer-content::-webkit-scrollbar-thumb { background: var(--surface-raised); border-radius: 3px; } .drawer-content::-webkit-scrollbar-track { background: transparent; } /* Drawer tabs — used INSIDE the Provably Fair drawer only (dice verbatim) */ .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(--border-default); border-radius: 16px; flex-shrink: 0; } .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); } /* PF seeds are meant to be copied — re-enable selection (dice convention) */ .pf-input, .pf-input *, .hist-seed-group, .hist-seed-group *, .hist-seeds, .hist-seeds * { user-select: text; -webkit-user-select: text; } /* PF input rows (dice verbatim) */ .pf-input { display: flex; align-items: center; gap: 12px; min-height: 56px; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: 16px; padding: 8px 12px 8px 16px; box-sizing: border-box; } .pf-input:focus-within { border-color: #d4d4d4; } .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; } .pf-note { font-size: 12px; line-height: 1.5; color: var(--content-tertiary); margin: 8px 2px 0; } /* PF drawer content blocks (dice verbatim) */ .pf-content { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 20px; } .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; } .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; } .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); } .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; color: var(--content-primary); cursor: pointer; } .pf-btn:active { transform: scale(0.98); } .pf-btn--ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--content-secondary); } /* How-to-play stat rows (dice) */ .htp-stat-row { display: flex; justify-content: space-between; align-items: center; height: 25px; } .htp-stat-label { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--content-secondary); } .htp-stat-value { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--content-primary); white-space: nowrap; } .htp-stat-value--green { color: #4ade80; } .htp-stats-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: 16px; padding: 14px 16px; } /* History (dice verbatim: card list) */ .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; min-width: 0; } .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; /* fixed (dice 1:1) → mult/payout chips align as columns */ justify-content: flex-end; flex-shrink: 0; } .hist-mult-chip { display: flex; align-items: center; justify-content: center; height: 24px; min-width: 72px; 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; font-variant-numeric: tabular-nums; } .hist-payout-chip { display: flex; align-items: center; justify-content: center; height: 24px; min-width: 72px; padding: 4px 8px; border-radius: 8px; font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 1.6; white-space: nowrap; font-variant-numeric: tabular-nums; } .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-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; transition: transform .15s; } .hist-chevron--open svg { transform: rotate(180deg); } .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; } .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-verified { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4ade80; } .hist-empty { color: var(--content-tertiary); padding: 8px 4px; } /* ── Desktop (dice gate: wide AND tall — phones stay vertical in landscape) ── */ @media (min-width: 768px) and (min-height: 600px) { .mobile-only { display: none !important; } .desktop-only { display: flex !important; } #root { max-width: none; padding: 0; margin: 0 auto; } .m-header { padding: 16px 24px; height: 64px; } .m-header-btn--lg { width: 36px; height: 36px; border-radius: 12px; } .m-header-dot { width: 32px; height: 32px; } .board { --board-w: min(74cqw, 118cqh); max-width: 860px; } .m-controls { align-items: center; padding: 0 24px 24px; width: 100%; } .m-controls > * { max-width: 520px; } /* desktop: Bet button ABOVE the tabs card (dice order swap) */ .m-action-row { order: 1; padding: 0 0 16px; width: 100%; } .m-tab-group { order: 2; } .m-bet-bar { order: 3; width: 100%; } .m-btn-betroll, .m-btn-random { height: 56px; border-radius: 16px; font-size: 16px; } .next-badge { height: 28px; font-size: 12px; padding: 4px 8px; } .round-toast-chip, .round-toast-detail { height: 28px; font-size: 12px; } /* Drawer → centered modal on desktop */ .drawer-backdrop { align-items: center; } .drawer { max-width: 480px; max-height: 70vh; border-radius: 16px; animation: drawer-modal-pop .2s ease; } @keyframes drawer-modal-pop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── Verify-round result panel (dice 1:1) ── */ .pf-result { display: flex; flex-direction: column; background: rgba(0,0,0,0.05); border: 1px solid var(--border-default); 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-shield svg { width: 20px; height: 20px; } .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); } /* hash commitment proof (dice 1:1) */ .pf-proof { display: flex; flex-direction: column; gap: 8px; margin: 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-default); } .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: 6px; font-size: 12px; font-weight: 600; color: #4ade80; } .pf-proof-verdict svg { width: 16px; height: 16px; flex-shrink: 0; } .pf-proof--bad .pf-proof-verdict { color: #f43f5e; } .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-value { font-family: var(--font-mono, monospace); font-size: 11px; line-height: 1.5; color: var(--content-primary); word-break: break-all; user-select: text; -webkit-user-select: text; } .pf-mapping { margin: 0 12px 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; } /* ── Cashout celebration card (dice 1:1) ── */ .cashout-alert-backdrop { 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); 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, var(--brand-primary)); 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); } .cashout-alert--max { background: linear-gradient(180deg, rgba(0, 0, 0, 0.91) 0%, #6b5600 100%); border-color: #FFD106; box-shadow: 0 0 40px rgba(255,209,6,0.2), 0 16px 48px rgba(0,0,0,0.5); animation: cardPop .25s cubic-bezier(0.25, 0.1, 0.25, 1) both, borderGlowMax 1.6s ease-out .15s both; } .cashout-alert--max .cashout-alert-label { color: #FFD106; } @keyframes borderGlowMax { 0% { box-shadow: 0 0 0 0 rgba(255,209,6,0), 0 16px 48px rgba(0,0,0,0.5); } 35% { box-shadow: 0 0 56px 4px rgba(255,209,6,0.6), 0 16px 48px rgba(0,0,0,0.5); } 100% { box-shadow: 0 0 40px 0 rgba(255,209,6,0.2), 0 16px 48px rgba(0,0,0,0.5); } } @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); } } .cashout-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .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--max, .cashout-alert-chip { animation: none; } }