/* Extracted verbatim from includes/views/layout.php's inline <style> block on
   2026-08-12. It was 64KB of static CSS re-sent and re-parsed on EVERY page
   navigation of this multi-page app and could never be cached. Contains zero
   PHP (verified). MUST stay loaded AFTER main.css — parts of it are deliberate
   specificity overrides over the Tailwind build. */
            /* Wallet segmented pill tabs */
            .wallet-tab-pill {
                color: rgba(254, 240, 138, 0.65);
                background: transparent;
                border: 1px solid transparent;
                cursor: pointer;
            }
            .wallet-tab-pill:hover:not(.wallet-tab-active) {
                color: rgba(254, 240, 138, 0.9);
                background: rgba(127, 29, 29, 0.4);
            }
            .wallet-tab-pill.wallet-tab-active {
                color: #7f1d1d;
                background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
            }
            /* Prevent double-tap zoom on mobile */
            *, *::before, *::after {
                touch-action: manipulation;
            }
/* Date input styling for consistent appearance with selects */
            input[type="date"] {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                min-height: 0;
                box-sizing: border-box;
            }
            input[type="date"]::-webkit-date-and-time-value {
                text-align: left;
                margin: 0;
                padding: 0;
            }
            input[type="date"]::-webkit-calendar-picker-indicator {
                filter: invert(1);
                opacity: 0.6;
                cursor: pointer;
                padding: 0;
                margin: 0;
            }
            input[type="date"]::-webkit-inner-spin-button,
            input[type="date"]::-webkit-clear-button {
                display: none;
            }
            /* Ensure date inputs match select height */
            .filter-date-input {
                height: 36.5px !important;
                padding-top: 6px !important;
                padding-bottom: 6px !important;
            }

            /* DateTime-local input styling for maintenance schedule */
            input[type="datetime-local"] {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                min-height: 0;
                box-sizing: border-box;
            }
            input[type="datetime-local"]::-webkit-date-and-time-value {
                text-align: left;
                margin: 0;
                padding: 0;
            }
            input[type="datetime-local"]::-webkit-calendar-picker-indicator {
                filter: invert(1);
                opacity: 0.7;
                cursor: pointer;
                padding: 4px;
                margin: 0;
                background-color: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                transition: all 0.2s ease;
            }
            input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
                opacity: 1;
                background-color: rgba(255, 255, 255, 0.2);
            }
            input[type="datetime-local"]::-webkit-inner-spin-button,
            input[type="datetime-local"]::-webkit-clear-button {
                display: none;
            }

            /* Commission Balance Glow Animation */
            @keyframes commission-glow {
                0%, 100% {
                    text-shadow: 0 0 5px rgba(216, 180, 254, 0.3);
                }
                50% {
                    text-shadow: 0 0 10px rgba(216, 180, 254, 0.6), 0 0 15px rgba(216, 180, 254, 0.4);
                }
            }
            
            .commission-balance-glow {
                animation: commission-glow 3s ease-in-out infinite;
            }

            /* Info Tooltip (ⓘ icon → click-to-reveal popover) */
            .info-tip {
                position: relative;
                display: inline-flex;
                vertical-align: middle;
                margin-left: 4px;
            }
            .info-tip-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 22px;
                height: 22px;
                padding: 0;
                border: 0;
                background: transparent;
                color: rgba(254, 240, 138, 0.55);
                cursor: pointer;
                border-radius: 50%;
                transition: color 0.15s ease, background-color 0.15s ease;
            }
            .info-tip-btn:hover,
            .info-tip-btn:focus-visible {
                color: rgba(254, 240, 138, 0.95);
                background-color: rgba(255, 255, 255, 0.08);
                outline: none;
            }
            .info-tip.open .info-tip-btn {
                color: rgba(254, 240, 138, 1);
                background-color: rgba(255, 255, 255, 0.12);
            }
            .info-tip-pop {
                position: absolute;
                top: calc(100% + 6px);
                left: 0;
                z-index: 50;
                min-width: 200px;
                max-width: 280px;
                padding: 8px 10px;
                background: #1f1f23;
                color: #fef3c7;
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 6px;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
                font-size: 0.75rem;
                line-height: 1.35;
                font-weight: 400;
                white-space: normal;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-2px);
                transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
                pointer-events: none;
            }
            .info-tip.open .info-tip-pop {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                pointer-events: auto;
            }

            .slot-number {
                min-height: 32px;
                position: relative;
                overflow: hidden;
                letter-spacing: 0; /* Remove any letter spacing */
                word-spacing: 0; /* Remove any word spacing */
            }
            
            /* Ensure slot-number multi-digit containers have small gaps */
            .slot-number .multi-digit-container {
                gap: 1px !important;
                letter-spacing: 0;
                word-spacing: 0;
            }
            
            /* margin/padding/background/border reset only — the 2D/3D/4D digit
               WIDTH is owned by .casino-prize-board in input.css (derived from
               the font via 1ch). Don't set width here or it re-forks the source
               of truth that this thread consolidated. */
            .slot-number .single-digit-slot {
                margin: 0 !important;
                padding: 0 !important;
                background: transparent !important;
                border: none !important;
            }

            .slot-number .slot-container {
                margin: 0 !important;
                padding: 0 !important;
                background: transparent !important;
                border: none !important;
            }

            /* Ensure proper sizing for different prize types */
            .slot-number[data-prize="1st"],
            .slot-number[data-prize="2nd"],
            .slot-number[data-prize="3rd"] {
                min-height: 28px;
            }

            /* --- FIX FOR LAYOUT SHIFT --- */
            .grid .bg-white {
                /* Set a fixed height that matches the content to prevent collapse */
                height: 28px;
            }
            /* --- END OF FIX --- */


            /* Slot machine animation - animates through 50% for seamless loop */
            @keyframes slideDigits {
                0% { transform: translateY(-50%); }
                100% { transform: translateY(0); }
            }
            
            .slot-container {
                position: relative;
                overflow: hidden;
                width: 30px;
                height: 28px;
                background: white;
                border: 2px solid #ddd;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .digit-strip {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                animation: slideDigits 1s linear infinite;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                /* NO will-change here. A 2D room renders 46 of these strips, and
                   `will-change: transform` forces each one onto its own permanent
                   compositor layer — 46 layers held for the life of the page, even
                   while paused (.slot-revealing) or scrolled out of view. Low-end
                   Android GPUs thrash at that layer count; iPhones absorb it, which
                   is exactly why this only showed up on cheap Android.
                   The animation still gets composited: a running transform animation
                   is auto-promoted by the browser, and the layer is released again
                   the moment it stops. Measured 2026-08-15. */
            }
            
            .digit-item {
                height: 28px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                color: #000;
                font-size: 18px;
                line-height: 28px;
                text-align: center;
            }
            
            /* Pause animation when revealing */
            .slot-revealing .digit-strip {
                animation-play-state: paused;
            }
            
            /* Multi-digit container for 2D/3D/4D numbers */
            .multi-digit-container {
                display: flex;
                gap: 0;
                align-items: center;
                justify-content: center;
            }
            
            .single-digit-slot {
                width: 30px;
                height: 28px;
                background: white;
                border: 2px solid #ddd;
                border-radius: 8px;
                position: relative;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* SUPER BIG: Larger slot animation - scaled up version of default */
            .sb-slot-box {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: white;
                padding: 16px 12px;
                border-radius: 12px;
                box-shadow: 0 0 20px rgba(250, 204, 21, 0.6), 0 0 40px rgba(250, 204, 21, 0.3);
                min-width: 120px;
                height: 100px;
                font-size: 40px;
                font-weight: 700;
                color: #000;
                line-height: 1;
            }

            /* ===== SUPER BIG: real slot-machine reel (image frame) ========
               A pre-rendered chrome+gold slot-machine PNG (sb_slot_frame.png,
               876x358) with TWO solid white windows painted into the image sits
               BEHIND the spinning reels; transparent digits float on top of the
               white windows. Scoped to [data-game="sb"] so 2D/3D/4D keep theirs.
               No JS / DOM change — the existing spin still drives the digits.
               Window coords in the image: x 185-426 / 455-693, y 28-329.
               Box scaled to 240px wide -> scale 240/876 = 0.2740.

               TO SWAP THE IMAGE (e.g. a nicer machine):
               1. Replace games/super_big/img/sb_slot_frame.png — a chrome/gold
                  frame with the two white number windows painted in.
               2. Re-measure the two window rectangles and update the 6 CSS vars
                  in the .sb-slot-box rule below (the only values to edit):
                  horizontal as % of image width, vertical/font as px * scale.
               3. Easiest way to measure: see games/super_big/img/README.md.
               ============================================================== */

            /* Machine body = the frame image; box just sizes the stage.
               Geometry from sb_slot_frame.png (876x358, two white windows
               already painted into the image at x 185-426 / 455-693, y 28-329).
               Box scaled to 240px wide -> scale 240/876 = 0.2740. */
            .casino-prize-board .slot-number[data-game="sb"].sb-slot-box {
                /* === Window geometry — the ONLY values to edit on image swap ===
                   Horizontal (left/width) are % of box width, so they survive any
                   box-width change. Vertical (top/height) + font are px against the
                   fixed 98px box height. Derive from the source PNG: % = src px /
                   image width; px = src px * (240 / image width). See README.md. */
                --sb-win-w: 27.5%;      /* white window width (src 241 / 876)      */
                --sb-win-left1: 20.83%; /* left window x   (src 185 / 876)         */
                --sb-win-left2: 52.08%; /* right window x  (src 455 / 876)         */
                --sb-win-top: 8px;      /* reel top inside box (src 28 * 0.274)     */
                --sb-win-h: 82px;       /* reel + digit height = full white window  */
                                        /* (src 301 * 0.274; landing-math anchor)   */
                --sb-digit-fs: 62px;    /* digit glyph size — fills taller window   */

                position: relative;
                width: 240px;
                min-width: 240px;
                height: 98px;
                max-width: 100%;
                padding: 0;
                background: none !important;
                border: none;
                border-radius: 0;
                box-shadow: none;
                overflow: visible;
            }
            /* Frame PNG sits BEHIND the digits (its windows are solid white,
               so digits float on top of them — no transparent cut-out box) */
            .casino-prize-board .slot-number[data-game="sb"].sb-slot-box::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                background: url('/games/super_big/img/sb_slot_frame.png') center / 100% 100% no-repeat;
            }
            .casino-prize-board .slot-number[data-game="sb"].sb-slot-box::after { content: none; }

            /* Reels live in an absolutely-filled layer over the frame */
            .casino-prize-board .slot-number[data-game="sb"] .multi-digit-container {
                position: absolute;
                inset: 0;
                gap: 0 !important;
                z-index: 2;
            }
            /* Transparent reel windows aligned to the image's white windows */
            .casino-prize-board .slot-number[data-game="sb"] .single-digit-slot,
            .casino-prize-board .slot-number[data-game="sb"] .slot-container {
                position: absolute;
                top: var(--sb-win-top);
                width: var(--sb-win-w) !important;
                min-width: var(--sb-win-w) !important;
                height: var(--sb-win-h) !important;
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                overflow: hidden;
                z-index: 2;
            }
            .casino-prize-board .slot-number[data-game="sb"] .single-digit-slot:nth-child(1),
            .casino-prize-board .slot-number[data-game="sb"] .slot-container:nth-child(1) { left: var(--sb-win-left1); }
            .casino-prize-board .slot-number[data-game="sb"] .single-digit-slot:nth-child(2),
            .casino-prize-board .slot-number[data-game="sb"] .slot-container:nth-child(2) { left: var(--sb-win-left2); }

            /* Dark digits, sized to the window (overrides the gold text-clip) */
            .casino-prize-board .slot-number[data-game="sb"] .digit-item {
                height: var(--sb-win-h) !important;
                line-height: var(--sb-win-h) !important;
                font-size: var(--sb-digit-fs) !important;
                background: none !important;
                -webkit-background-clip: border-box !important;
                background-clip: border-box !important;
                color: #181818 !important;
                -webkit-text-fill-color: #181818 !important;
                text-shadow: none !important;
                filter: none !important;
            }

            /* SUPER BOOM: Compact square grid */
            :root {
                --bm-gold: #fcd34d;
                --bm-gold-dark: #b8860b;
                --bm-border: #7f1d1d;
            }
            /* Clear / Clear All: ghost circle */
            .bm-clear-btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 2px solid rgba(255, 255, 255, 0.3);
                background: transparent;
                color: rgba(255, 255, 255, 0.7);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                transition: all 0.2s;
                cursor: pointer;
            }
            .bm-clear-btn:hover {
                border-color: rgba(255, 255, 255, 0.5);
                color: #ffffff;
            }
            /* Clear All trash icon, beside TOTAL BET (every game room).
               2026-08-15 — operator: "the icon of remove, white circle borderline on
               this dustbin logo. Be consistent, no need circle borderline."
               The circle is gone and the glyph now matches the header icons rendered by
               renderGameModalButton(): white, borderless, 20px SVG in a 28px box with a
               hover opacity dip. 28px is deliberately the SAME tap target those header
               icons have (p-1 + w-5), so the whole room uses one icon family.
               The class name still says "circle" on purpose — it is referenced from
               includes/views/game.php AND games/super_boom/view.php and renaming it
               buys nothing but a chance to miss one of them. */
            .bm-clear-all-circle {
                width: 28px;
                height: 28px;
                border-radius: 0;
                border: 0;
                background: transparent;
                color: #ffffff;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                cursor: pointer;
                transition: opacity 0.2s;
            }
            .bm-clear-all-circle svg {
                width: 20px;
                height: 20px;
            }
            .bm-clear-all-circle:hover {
                opacity: 0.7;
            }
            .bm-clear-all-circle:active {
                transform: scale(0.92);
            }
            /* ONE-ROW CHIP RAIL (operator, 2026-08-15: "it should be one row, when
               drop to second row, third row, it affect the whole interface, let user
               slide / scroll right to view the number").

               The selection control used to wrap, so picking ~8 more numbers added a
               row and pushed draws / amount / PLACE BET down the page. Now the row
               height is constant and the overflow is horizontal. */
            .chip-rail {
                flex-wrap: nowrap !important;   /* Tailwind's flex-wrap ties on specificity */
                overflow-x: auto;
                overflow-y: hidden;
                /* Keep a swipe on the chips from chaining into the page scroll — or,
                   at the left edge on iOS, into the browser's back-navigation. */
                overscroll-behavior-x: contain;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;          /* Firefox */
                -ms-overflow-style: none;
            }
            .chip-rail::-webkit-scrollbar { display: none; }
            /* Chips must not be squeezed to fit — being squeezable is what would
               silently defeat the whole scroller. */
            .chip-rail > .number-chip,
            .chip-rail > .sbj-pick-chip,
            .chip-rail > #sbj-pick-placeholder { flex: 0 0 auto; }

            /* Fade the right edge ONLY while there is more to reveal, so the fade
               means "keep going" rather than being permanent decoration. Applied as
               a mask on the rail itself — a gradient overlay would need a wrapper,
               and a pseudo-element inside a scroller scrolls away with the content.
               This is also why SELECT sits outside the rail: masking the rail would
               otherwise fade the button too. */
            .chip-rail.is-overflowing {
                -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
                        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
            }
            /* At the far right there is nothing left to hint at, so drop the fade and
               give the last chip back its full contrast. */
            .chip-rail.is-scrolled-end {
                -webkit-mask-image: none;
                        mask-image: none;
            }

            /* Number chips in Place Bet input (all games) */
            .number-chip {
                display: inline-flex;
                align-items: center;
                background: #fef08a;
                color: #450a0a;
                padding: 2px 8px;
                border-radius: 9999px;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.2s;
            }
            .number-chip:hover {
                background: #b91c1c;
                color: #fff;
                transform: scale(1.05);
            }
            .number-chip .chip-x {
                margin-left: 4px;
                font-size: 12px;
                opacity: 0.8;
            }
            /* Width now comes from --bm-grid-w (:root in input.css) so the grid and
               the total-bet row below it share ONE number.

               This 360px was DORMANT: the markup carried an inline
               `style="max-width:320px"`, which beat it, so the grid was really 320
               and this value was never what shipped. Removing that inline style
               exposed it and the cells got BIGGER while the task was to shrink
               them. app-inline.css is linked after main.css, so a rule here wins
               ties on source order — the fix belongs at the definition, not in a
               competing rule. */
            .bm-grid {
                max-width: var(--bm-grid-w, 320px);
                margin-left: auto;
                margin-right: auto;
            }
            /* Casino-chip style quick bet buttons */
            .coin-btn {
                position: relative;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                border: none;
                color: #fff;
                font-weight: 800;
                font-size: 13px;
                /* Dark outline so white digits stay legible on light chips (green/yellow) */
                text-shadow:
                    0 0 2px rgba(0,0,0,0.95),
                    0 1px 1px rgba(0,0,0,0.95),
                    1px 0 1px rgba(0,0,0,0.85),
                    -1px 0 1px rgba(0,0,0,0.85),
                    0 -1px 1px rgba(0,0,0,0.85);
                box-shadow:
                    0 4px 0 var(--chip-base, rgba(0,0,0,0.85)),
                    0 5px 10px rgba(0,0,0,0.5),
                    inset 0 2px 4px rgba(255,255,255,0.45),
                    inset 0 -4px 6px rgba(0,0,0,0.4),
                    inset 0 0 0 1px rgba(255,255,255,0.12);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: transform 0.12s ease-in, box-shadow 0.12s ease-in;
                line-height: 1.1;
                text-align: center;
                padding: 2px;
                overflow: hidden;
            }
            /* Edge spots around the rim (classic poker-chip dashes) */
            .coin-btn::after {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: repeating-conic-gradient(
                    rgba(255,255,255,0.92) 0deg 22deg,
                    transparent 22deg 45deg
                );
                -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%, #000 78%, transparent 79%);
                mask: radial-gradient(circle, transparent 54%, #000 55%, #000 78%, transparent 79%);
                pointer-events: none;
            }
            /* Dashed inner ring */
            .coin-btn::before {
                content: '';
                position: absolute;
                inset: 5px;
                border-radius: 50%;
                border: 1.5px dashed rgba(255,255,255,0.5);
                box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
                pointer-events: none;
            }
            .coin-btn:active {
                transform: translateY(3px);
                box-shadow:
                    0 1px 0 var(--chip-base, rgba(0,0,0,0.85)),
                    0 2px 5px rgba(0,0,0,0.4),
                    inset 0 2px 4px rgba(255,255,255,0.45),
                    inset 0 -4px 6px rgba(0,0,0,0.4),
                    inset 0 0 0 1px rgba(255,255,255,0.12);
            }
            /* Selected chip — lifted, with a gold ring + glow so the active denomination is obvious */
            .coin-btn.is-selected {
                transform: translateY(-2px);
                box-shadow:
                    0 6px 0 var(--chip-base, rgba(0,0,0,0.85)),
                    0 7px 14px rgba(0,0,0,0.55),
                    0 0 0 3px #b8860b,
                    0 0 12px 2px rgba(184,134,11,0.65),
                    inset 0 2px 4px rgba(255,255,255,0.45),
                    inset 0 -4px 6px rgba(0,0,0,0.4),
                    inset 0 0 0 1px rgba(255,255,255,0.12);
            }
            /* Keep the press feedback even while selected */
            .coin-btn.is-selected:active {
                transform: translateY(3px);
            }
            .bm-bet-cell {
                position: relative;
                /* Dark fill (padding-box) + thin warm gold→red gradient edge (border-box) */
                background:
                    var(--cz-cell-bg, linear-gradient(165deg, #2a0a0a 0%, #140303 100%)) padding-box,
                    linear-gradient(160deg, #f6c560 0%, #c2452a 55%, #6b1410 100%) border-box;
                /* Defensive solid base under the layered fill — declared AFTER
                   the shorthand (which resets background-color) so it sticks.
                   Ensures a cell can never render as border-gradient only. */
                background-color: #170404;
                color: #f4ead6;
                border: 1px solid transparent;
                outline: none;
                box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8),
                            inset 0 0 8px rgba(0, 0, 0, 0.45),
                            0 1px 3px rgba(0, 0, 0, 0.5);
            }
            /* Metallic gold gradient digits (matches the SUPER BOOM title look) */
            .bm-bet-cell > span:first-child {
                background: linear-gradient(180deg, #e9dcc2 0%, #d8c5a0 35%, #c3aa7e 65%, #a98a5c 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
                filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55))
                        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
            }
            /* Boost the digit's contrast while it sits on the bright gold coin
               (active = spinning, winner = landed). Dark outline keeps the
               metallic number readable over the light coin face. */
            .bm-cell-active > span:first-child,
            .bm-cell-winner > span:first-child {
                filter:
                    drop-shadow(0 0 1px rgba(40, 22, 0, 0.9))
                    drop-shadow(0 1px 1px rgba(40, 22, 0, 0.8))
                    drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
            }
            .bm-bet-cell[data-bm-bet-cell]:hover {
                background:
                    var(--cz-cell-bg, linear-gradient(165deg, #2a0a0a 0%, #140303 100%)) padding-box,
                    linear-gradient(160deg, #ffd98a 0%, #e0573a 55%, #8a1c16 100%) border-box;
                box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7),
                            0 0 10px rgba(214, 120, 40, 0.4);
            }
            .bm-bet-cell.bm-cell-selected {
                background:
                    var(--cz-cell-bg, linear-gradient(180deg, #2c0c0c 0%, #170404 100%)) padding-box,
                    linear-gradient(150deg, #7dd3fc 0%, #38bdf8 50%, #0284c7 100%) border-box !important;
                box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
            }
            /* ── Coin medal: 3D minted-coin look (gold + boom share geometry) ── */
            .bm-grid-medal {
                position: absolute;
                inset: 5px;
                border-radius: 50%;
                /* Dark gold: restrained specular highlight over a deep metallic body */
                background: #b8860b;
                /* Beveled rim + full bright halo so the running coin already looks
                   exactly like the landed winner (the only difference is the
                   landing scale-pop animation added by .bm-grid-medal-winner) */
                box-shadow:
                    inset 0 1.5px 1px rgba(255,250,220,0.95),
                    inset 0 -2px 3px rgba(120,70,0,0.7),
                    inset 0 0 0 2px rgba(255,215,90,0.95),
                    0 0 18px 4px rgba(245,197,66,0.85),
                    0 0 8px rgba(255,230,140,0.95),
                    0 2px 4px rgba(0,0,0,0.6),
                    0 0 0 1px rgba(40,22,0,0.5);
                z-index: 5;
                pointer-events: none;
                overflow: hidden;
                /* Center the winning number on the medal */
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 900;
                letter-spacing: 0.5px;
                font-size: 0.92rem;
                line-height: 1;
                color: #fff3d6;
                /* Single soft drop shadow — avoid offset emboss that reads as a
                   ghosted/doubled digit on round numbers like "9" */
                text-shadow: 0 1px 2px rgba(60, 35, 0, 0.55);
            }
            /* Rotating shine sweep band across the coin face */
            .bm-grid-medal::after {
                content: "";
                position: absolute;
                top: -60%;
                left: -60%;
                width: 220%;
                height: 220%;
                background: linear-gradient(120deg,
                    rgba(255,255,255,0) 38%,
                    rgba(255,255,255,0.65) 50%,
                    rgba(255,255,255,0) 62%);
                transform: translateX(-100%);
                animation: bm-coin-shine 2.4s ease-in-out infinite;
                pointer-events: none;
            }
            @keyframes bm-coin-shine {
                0%   { transform: translateX(-100%) rotate(8deg); }
                55%  { transform: translateX(100%)  rotate(8deg); }
                100% { transform: translateX(100%)  rotate(8deg); }
            }
            /* Winner: same glow as the running coin — only adds the single
               scale-pop "stamp" landing impact */
            .bm-grid-medal-winner {
                animation: bm-medal-land 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
            }
            @keyframes bm-medal-land {
                0%   { transform: scale(2.1) rotate(-12deg); filter: brightness(2.2); }
                45%  { transform: scale(0.86) rotate(4deg);  filter: brightness(1.3); }
                70%  { transform: scale(1.08) rotate(-1deg); }
                100% { transform: scale(1) rotate(0); filter: brightness(1); }
            }
            /* ── Gold reveal: radiating ring waves pulsing outward a few times ──
               Two staggered concentric rings on the cell pseudo-elements so the
               waves can radiate BEYOND the coin (cell overflow is visible) for a
               luxury "jackpot pulse" feel. Pulses continuously until the next
               draw clears the winner cell (CSS-only, GPU-composited = cheap). */
            .bm-cell-winner::before,
            .bm-cell-winner::after {
                content: "";
                position: absolute;
                inset: 5px;                 /* matches the coin geometry */
                border-radius: 50%;
                border: 2px solid rgba(255, 215, 90, 0.9);
                box-shadow: 0 0 10px 2px rgba(245, 197, 66, 0.55);
                z-index: 4;                 /* behind the coin (z-5) + digit (z-10) */
                pointer-events: none;
                opacity: 0;
                animation: bm-ring-wave 1.6s ease-out infinite;
            }
            .bm-cell-winner::after { animation-delay: 0.8s; }
            @keyframes bm-ring-wave {
                0%   { transform: scale(0.55); opacity: 0; }
                12%  { opacity: 0.85; }
                100% { transform: scale(3.2); opacity: 0; }
            }
            .bm-cell-active,
            .bm-cell-winner {
                transition: none !important;
            }
            .bm-cell-winner {
                z-index: 10;
            }
            /* ── Boom coin: dark molten-iron bomb look ── */
            .bm-grid-medal-boom {
                background: #232323;
                box-shadow:
                    inset 0 1.5px 1px rgba(210,210,210,0.6),
                    inset 0 -2px 3px rgba(0,0,0,0.9),
                    inset 0 0 0 2px rgba(190,190,190,0.95),
                    0 0 18px 4px rgba(160,160,160,0.6),
                    0 0 8px rgba(220,220,220,0.7),
                    0 2px 5px rgba(0,0,0,0.8),
                    0 0 12px 2px rgba(0,0,0,0.7);
                color: #ededed;
                text-shadow: 0 1px 2px rgba(0,0,0,0.95);
            }
            .bm-grid-medal-boom::after { display: none; } /* no gold shine on boom */
            .bm-grid-medal-boom { overflow: visible; } /* let the fuse stick out the top */
            /* ── Bomb fuse with burning ember + crackling sparks ── */
            .bm-fuse {
                /* Anchored on the upper-RIGHT shoulder of the coin (not the dead
                   apex) — a real cartoon bomb's fuse-neck sits off-centre, giving
                   the body a tilted-to-the-right look. */
                position: absolute;
                top: 3px;
                left: 64%;
                width: 0;
                height: 0;
                z-index: 8;
                pointer-events: none;
                /* Tilt the whole fuse (rope + sparks) ~45° to the right,
                   pivoting on its base so it stays attached to the coin */
                transform: rotate(60deg);
                transform-origin: 2px 4px;
            }
            /* No cloth collar — clean look, just a red rope */
            .bm-fuse-cap { display: none; }
            /* Red cord: a quarter-arc curving up & out to the right */
            .bm-fuse-cord {
                position: absolute;
                bottom: 0px;         /* base just touches the coin's surface */
                left: -2px;
                width: 6px;
                height: 10px;        /* taller than the radius → mostly straight rope */
                background: transparent;
                border: 2.5px solid #ef3b1f;
                border-color: #ef3b1f #ef3b1f transparent transparent;
                border-radius: 0 6px 0 0;    /* small radius → only the top bends gently */
                transform-origin: bottom left;
                box-shadow: none;
            }
            /* No big glowing ember — the cluster of orange dots IS the spark */
            .bm-fuse-ember { display: none; }
            /* Small orange spark dots clustered at the cord tip, gently twinkling */
            .bm-spark {
                position: absolute;
                top: -11px;          /* sits at the rope's free tip (top-left point) */
                left: -2px;
                width: 2.5px;
                height: 2.5px;
                border-radius: 50%;
                background: #ff9a1e;
                animation: bm-spark-twinkle 0.5s ease-in-out infinite;
            }
            /* Scatter the dots into a small cluster + stagger the twinkle */
            .bm-spark:nth-child(4) { --sx: -4px; --sy: -3px; animation-delay: 0s;    }
            .bm-spark:nth-child(5) { --sx:  3px; --sy: -5px; animation-delay: 0.12s; }
            .bm-spark:nth-child(6) { --sx: -1px; --sy: -7px; animation-delay: 0.24s; }
            .bm-spark:nth-child(7) { --sx:  5px; --sy: -1px; animation-delay: 0.08s; }
            .bm-spark:nth-child(8) { --sx: -5px; --sy: -6px; animation-delay: 0.3s;  }
            .bm-spark:nth-child(9) { --sx:  1px; --sy: -2px; animation-delay: 0.18s; }
            @keyframes bm-spark-twinkle {
                0%, 100% { opacity: 0.25; transform: translate(var(--sx, 0), var(--sy, 0)) scale(0.6); }
                50%      { opacity: 1;    transform: translate(var(--sx, 0), var(--sy, 0)) scale(1); }
            }
            /* RUNNING and LANDED: sparks twinkle faster + brighter so the live
               coin reads as a fiercely-burning fuse about to blow */
            .bm-grid-medal-boom-anim .bm-spark,
            .bm-cell-boom .bm-grid-medal-boom .bm-spark { animation-duration: 0.25s; }
            .bm-cell-boom .bm-grid-medal-boom {
                animation: bm-boom-land 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
            }
            @keyframes bm-bomb-tremble {
                0%, 100% { transform: translate(0, 0); }
                25% { transform: translate(0.6px, -0.4px); }
                50% { transform: translate(-0.5px, 0.5px); }
                75% { transform: translate(0.4px, 0.4px); }
            }
            /* Final boom landing: smoky shockwave ring (recoil + tremble set above) */
            .bm-cell-boom .bm-grid-medal-boom::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 50%;
                border: 2px solid rgba(220, 220, 220, 0.85);
                animation: bm-boom-shockwave 0.7s ease-out 1;
                pointer-events: none;
            }
            /* ── Boom reveal: smoky shockwave rings radiating outward a few times.
               Mirrors the gold ring-wave but in cold steel/smoke tones, on the
               cell pseudo-elements so they blast BEYOND the coin. Pulses
               continuously until the next draw clears the boom cell. ── */
            .bm-cell-boom::before,
            .bm-cell-boom::after {
                content: "";
                position: absolute;
                inset: 5px;                 /* matches the coin geometry */
                border-radius: 50%;
                border: 2px solid rgba(225, 225, 225, 0.8);
                box-shadow: 0 0 12px 2px rgba(120, 120, 120, 0.5);
                z-index: 4;                 /* behind the coin (z-5) + digit (z-10) */
                pointer-events: none;
                opacity: 0;
                animation: bm-ring-wave 1.6s ease-out infinite;
            }
            .bm-cell-boom::after { animation-delay: 0.8s; }
            @keyframes bm-boom-land {
                0%   { transform: scale(2.3) rotate(10deg); filter: brightness(2.4); }
                45%  { transform: scale(0.84) rotate(-5deg); filter: brightness(1.4); }
                70%  { transform: scale(1.1) rotate(2deg); }
                100% { transform: scale(1) rotate(0); filter: brightness(1); }
            }
            @keyframes bm-boom-shockwave {
                0%   { transform: scale(0.6); opacity: 0.95; }
                100% { transform: scale(3.4); opacity: 0; }
            }
            .bm-boom-sparks {
                position: absolute;
                top: -3px;
                right: -2px;
                width: 12px;
                height: 12px;
                z-index: 1;
                pointer-events: none;
            }
            .bm-cell-boom {
                z-index: 10;
            }
            /* ── Reveal: grid shake when the user hit the boom ── */
            .bm-reveal-shake {
                animation: bm-reveal-shake 0.6s cubic-bezier(.36,.07,.19,.97) 1;
            }
            @keyframes bm-reveal-shake {
                0%, 100% { transform: translate3d(0,0,0); }
                10% { transform: translate3d(-6px, 2px, 0) rotate(-1deg); }
                20% { transform: translate3d(7px, -3px, 0) rotate(1deg); }
                35% { transform: translate3d(-5px, 3px, 0) rotate(-0.6deg); }
                50% { transform: translate3d(5px, -2px, 0) rotate(0.6deg); }
                65% { transform: translate3d(-3px, 1px, 0); }
                80% { transform: translate3d(2px, -1px, 0); }
            }
            @media (prefers-reduced-motion: reduce) {
                .bm-grid-medal::after,
                .bm-grid-medal-winner,
                .bm-cell-winner::before,
                .bm-cell-winner::after,
                .bm-cell-boom .bm-grid-medal-boom,
                .bm-cell-boom .bm-grid-medal-boom::before,
                .bm-cell-boom::before,
                .bm-cell-boom::after,
                .bm-spark,
                .bm-reveal-shake { animation: none !important; }
            }

            /* PLACE BET ships a 1px white border from the BUILT main.css. The
               Tailwind config/package.json are not in this tree, so main.css
               cannot be safely rebuilt here — this inline block loads after
               main.css, so it wins. assets/css/input.css carries the same
               change, so a future real rebuild produces the same result rather
               than silently restoring the border. */
            .casino-place-bet { border: none !important; }

            /* ================= GAME ROOM STANDARDISATION — 2026-08-15 =================
               Operator: standardise the header of every game room. These rules live HERE
               (not only in input.css) because main.css is a BUILT file with no tailwind
               config in this tree — an input.css edit alone ships nothing to the browser.
               input.css carries the same rules so a future real rebuild agrees.
               ------------------------------------------------------------------------- */

            /* 1. LOGO — one row, one size, every game.
                  Replaces three different hardcoded sizes (text-5xl here, an inline
                  clamp for SBJ, text-5xl again in Super Boom's own view). */
            .game-solo h2.casino-game-logo {
                white-space: nowrap;
                padding: 0 2.25rem;
                font-size: clamp(1.5rem, 7vw, 2.125rem) !important;
                line-height: 1.05;
            }
            /* "SUPER BIG JACKPOT" is 17 characters. The shared 7vw ramp overflows the
               card with it; 5vw was measured to fit at every phone width (320-430) and
               still reaches the shared 2.125rem ceiling on desktop, so SBJ's logo
               matches the other five games there. */
            .game-solo#game-sbj h2.casino-game-logo {
                font-size: clamp(0.9rem, 5vw, 2.125rem) !important;
            }

            /* 2. DATE/TIME + DRAW ID — reference info, de-emphasised.
                  The markup also drops font-bold/text-base, but the separator dot needs
                  a rule: `text-white/30` does NOT exist in the built main.css and an
                  absent Tailwind class renders as NOTHING (full-white dot), which is
                  exactly how this project has been bitten before. */
            .casino-draw-meta .casino-draw-sep { color: rgba(255, 255, 255, 0.3); }

            /* 3. PLACE BET — flat. Kills the 3D slab from main.css: the hard bottom
                  edge, the glass dome insets, the ambient shadow and the translateY
                  press. Press feedback survives as a colour/opacity dip, so the button
                  still answers a tap without shifting the rows beneath it. */
            /* 3b. PLACE BET height: 2.6rem (41.6px) -> 2.375rem (38px).
                  Operator 2026-08-15: "reduce the vertical height of the place bet
                  button". Stops at 38px on purpose — PLACE BET is the primary action of
                  a phone-first betting app and must stay above the ~36px tap-target
                  floor. The built main.css sets height:2.6rem!important, so this needs
                  !important too; input.css carries the same value. */
            .casino-place-bet {
                height: 2.375rem !important;
                background: #1fae42 !important;
                box-shadow: none !important;
                text-shadow: none !important;
                transition: background-color 0.15s ease, opacity 0.15s ease !important;
            }
            .casino-place-bet:hover { background: #23bd49 !important; filter: none !important; }
            .casino-place-bet:active {
                background: #16933a !important;
                opacity: 0.9;
                transform: none !important;
                box-shadow: none !important;
            }
            /* 5. STEPPERS — white ink, not gold (operator 2026-08-15). main.css ships
                  `.casino-stepper > button { color: var(--cz-gold) }`, which is why the bet
                  AMOUNT read yellow while "1 Draw" read white: the amount's middle cell is a
                  <button> (it opens the amount popup) and the draws cell is a <div>, so the
                  value inherited the button colour along with the +/- glyphs. Both steppers
                  now match the white input-field text used everywhere else. */
            .casino-stepper > button { color: #fff !important; }
            .casino-stepper > button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.10) !important; }
            /* 6. PRIZE BOARD — one rhythm for all three groups (operator 2026-08-15).
                  The 1ST/2ND/3RD label row was 8px above its cells at a 24px row height;
                  SPECIAL/CONSOLATION's .casino-section-head is 4.8px above its cells at
                  19px. Visible gap: ~13px vs ~5px. Both numbers are matched here — the
                  margin alone would have left the row 5px too tall.

                  The row height is matched EXACTLY, not approximately. `.casino-section-title`
                  computes to a 19.2px line box (1.5 x its 12.8px font), so the ordinal row is
                  given `line-height: 1.2rem` — 19.2px flat, independent of the label's own
                  12.48px font-size, which is why this is a rem and not a unitless 1.5 (that
                  would yield 18.7px and miss by half a pixel).
                  The `x` multiplier span must be pinned too: at 8.7px font it is an INLINE
                  child, so its own line box is what inflated the original row to 24px. */
            /* ONE source of truth for the label-band height. Both the ordinal row and the
               SPECIAL/CONSOLATION section heads derive from this token, so they cannot drift
               apart again — change the token and both move together. The value equals
               .casino-section-title's natural line box (1.5 x 12.8px); it was previously
               written as a bare 19.2px in two separate rules, which is the duplication that
               let them disagree in the first place.
               Verified safe for every shipped language: tallest real glyph ink is Thai
               "ที่ 1" at 13.7px, leaving 5.5px headroom, and every ancestor is overflow:visible. */
            :root { --cz-prize-label-h: 1.2rem; }
            .casino-prize-board .casino-section-head { min-height: var(--cz-prize-label-h); }
            .casino-prize-board .casino-prize-headrow,
            .game-solo .casino-prize-board .casino-prize-headrow {
                margin-bottom: 0.3rem !important;
                line-height: var(--cz-prize-label-h) !important;
                /* Explicit box: pinning the CELLS left the grid container 2.4px taller still.
                   19.2px on the container is decisive regardless of where that leading came
                   from, and box-sizing:border-box is global here so this is the final height. */
                height: var(--cz-prize-label-h) !important;
                align-items: center !important;
            }
            .casino-prize-board .casino-prize-headrow .casino-prize-label,
            .casino-prize-board .casino-prize-headrow .casino-prize-tagwrap,
            .casino-prize-board .casino-prize-headrow .casino-payout-mult {
                line-height: var(--cz-prize-label-h) !important;
            }
            /* The last 3.5px: .casino-prize-tagwrap is an INLINE-BLOCK sitting on its
                  parent's text baseline, so the line box reserves descender space beneath it
                  (19.2 -> 22.7). The section heads dodge this only because .casino-section-head
                  is display:flex, where baseline descender space does not apply. vertical-align
                  removes it without changing the display model. */
            .casino-prize-board .casino-prize-headrow .casino-prize-tagwrap { vertical-align: top !important; }
            /* Match the section head by using ITS layout model, not by tuning inline leading.
                  Chased this the wrong way first: the tagwrap is an inline-block, so the cell's
                  height came out of line-box + baseline leading (20.3px) and the grid added
                  2.4px more = 22.7px, and neither line-height nor vertical-align could pin it
                  to 19.2. .casino-section-head is display:flex, which is exactly why ITS height
                  is a clean 19.2px. So the ordinal cells become flex too, with an explicit
                  1.2rem (19.2px) box. Deterministic, and the text stays centred. */
            .casino-prize-board .casino-prize-headrow .casino-prize-label {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                height: var(--cz-prize-label-h) !important;
            }
            /* ======================= END STANDARDISATION ======================= */

            /* Super Big Jackpot — Ball Picker */
            #sbj-red-grid, #sbj-black-grid {
                grid-template-columns: repeat(5, minmax(0, 1fr));
                justify-content: center;
                gap: 4px;
            }

            /* The picker lives inside the number popup as of 2026-08-15. The
               popup is max-w-lg with its own padding, so each 5-column grid gets
               noticeably more room than it had squeezed onto the game page —
               spend it on the balls. Scoped to #sbjPicker so the page-side
               sizing above stays the fallback if the markup ever moves back. */
            #sbjPicker .sbj-ball { max-width: 40px; font-size: 0.75rem; }
            #sbjPicker #sbj-red-grid, #sbjPicker #sbj-black-grid { gap: 6px; }

            /* The ball is a percentage-width square, so its diameter tracks the
               viewport: measured inside the popup it is 38px on a desktop but
               23px at 390px and 16px at 320px. A FIXED label size therefore only
               ever fits one of those — at 320px a fixed 0.8rem "20" overflows
               its own circle. Size the text off the grid instead so the ratio
               holds at every width. The plain font-size above stays as the
               fallback for anything without container queries. */
            #sbjPicker #sbj-red-grid,
            #sbjPicker #sbj-black-grid { container-type: inline-size; }
            @supports (container-type: inline-size) {
                #sbjPicker .sbj-ball { font-size: clamp(8.5px, 9cqw, 14px); }
            }

            /* Trigger row on the game page — the staged pairs, shown the way the
               other rooms show their number chips. Reuses .bet-ball (the same
               balls the ticket list and bet slips draw) so one pair reads
               identically in all three places. */
            .sbj-pick-chip {
                display: inline-flex;
                align-items: center;
                gap: 3px;
                padding: 2px 5px;
                border-radius: 999px;
                background: rgba(0, 0, 0, 0.3);
            }
            /* Keep the row EXACTLY the same height empty or full. .bet-ball is 28px
               (sized for the ticket list and bet slips), which made this row 9px
               taller the moment the first pair appeared — a small jump, but the
               whole point of the one-row rail is that picking numbers never moves
               the page. Shrink the balls here only, and floor the rail at the same
               height so the empty state matches. */
            #sbj-pick-row { min-height: 26px; }
            .sbj-pick-chip .bet-ball {
                width: 22px;
                height: 22px;
                font-size: 10px;
                line-height: 22px;
            }
            .sbj-ball {
                position: relative;
                width: 100%;
                max-width: 32px;
                aspect-ratio: 1 / 1;
                justify-self: center;
                border-radius: 50%;
                border: none;
                outline: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 800;
                font-size: 0.7rem;
                color: #ffffff;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
                box-shadow:
                    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
                    inset 0 1px 2px rgba(255, 255, 255, 0.25),
                    0 1px 2px rgba(0, 0, 0, 0.4);
                transition: transform 0.15s ease, box-shadow 0.15s ease;
                padding: 0;
                line-height: 1;
            }
            .sbj-ball::before {
                content: '';
                position: absolute;
                top: 14%;
                left: 20%;
                width: 28%;
                height: 20%;
                border-radius: 50%;
                background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%);
                pointer-events: none;
            }
            .sbj-ball-red {
                background: radial-gradient(circle at 35% 30%, #f87171, #dc2626 55%, #7f1d1d);
            }
            .sbj-ball-black {
                background: radial-gradient(circle at 35% 30%, #4b5563, #1f2937 55%, #030712);
            }
            /* The shared ::before specular is absolute white, so it reads as a
               crisp gloss dot on the near-black ball and all but disappears on
               the much lighter red one — identical CSS, mismatched result (red
               looked matte next to a glossy black). Strengthen it on red only,
               so both balls carry the SAME perceived highlight. */
            .sbj-ball-red::before {
                background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 70%);
            }
            .sbj-ball:hover {
                transform: translateY(-1px) scale(1.05);
            }
            .sbj-ball:active {
                transform: scale(0.95);
            }
            .sbj-ball-selected {
                transform: scale(1.1);
                box-shadow:
                    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
                    inset 0 1px 2px rgba(255, 255, 255, 0.3),
                    0 0 0 2px #fde047,
                    0 0 10px rgba(253, 224, 71, 0.7);
            }
            .sbj-ball-selected:hover {
                transform: scale(1.1);
            }

            /* SBJ multi-ticket slip — ADD button + the list of picked pairs.
               Plain CSS (not Tailwind utilities) so this ships without a CSS rebuild. */
            /* Same 3D recipe and height as .casino-place-bet, in gold: inset top
               highlight + inset bottom shade + hard bottom edge + ambient drop
               shadow. ADD previously had only the hard edge (0 3px 0) and a
               shorter padding-derived height, so it read flatter AND smaller
               than PLACE BET sitting right below it. Colour alone now carries
               the hierarchy — gold = add to slip, green = commit. */
            /* FLATTENED 2026-08-15 (operator: "Add button in SBJ, no need 3D, simple
               like clear button and confirm button").

               It carried the full 3D kit — vertical gradient, inset white top
               highlight, inset bottom shade, a `0 4px 0` hard extrude, a drop
               shadow, and a translateY(3px) press. It sat directly above two flat
               buttons in the same popup, so it read as a control from a different
               product.

               Now the same component as .casino-modal-btn: one flat colour, no
               border, no shadow, no text-shadow, same 2.375rem height. It keeps
               GOLD rather than adopting green or red — Add is neither the confirm
               nor the destructive action, and colour is what distinguishes the
               three. Press feedback is a colour change, like the others. */
            .sbj-add-btn {
                width: 100%;
                margin-top: 8px;
                height: 2.375rem;
                padding: 0 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 0;
                border-radius: 8px;
                font-weight: 800;
                font-size: 0.8rem;
                letter-spacing: 0.14em;
                color: #3b0d0d;
                background: #edb62a;
                text-shadow: none;
                box-shadow: none;
                cursor: pointer;
                transition: background-color 0.15s ease, opacity 0.15s ease;
            }
            .sbj-add-btn:hover:not(:disabled)  { background: #f5c53f; }
            .sbj-add-btn:active:not(:disabled) { background: #d4a018; }
            .sbj-add-btn:disabled {
                opacity: 0.38;
                box-shadow: none;
                cursor: not-allowed;
            }
            .sbj-ticket-panel { margin-top: 10px; }
            .sbj-ticket-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 6px;
                padding: 0 2px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                color: #fde68a;
            }
            .sbj-ticket-head #sbj-ticket-count { color: #fde047; }
            .sbj-ticket-head #sbj-ticket-total { color: #fde047; font-size: 11.5px; letter-spacing: 0.02em; }
            .sbj-ticket-list { max-height: 176px; overflow-y: auto; }
            .sbj-ticket-row {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 5px 8px;
                margin-bottom: 4px;
                border-radius: 8px;
                background: rgba(0, 0, 0, 0.28);
                animation: sbj-ticket-in 0.2s ease;
            }
            @keyframes sbj-ticket-in {
                from { opacity: 0; transform: translateY(-4px); }
                to   { opacity: 1; transform: none; }
            }
            .sbj-ticket-row .sbj-ticket-pair { display: inline-flex; gap: 4px; }
            .sbj-ticket-row .sbj-ticket-amt {
                margin-left: auto;
                font-weight: 700;
                font-size: 12px;
                color: #fde68a;
            }
            .sbj-ticket-del {
                flex: 0 0 auto;
                width: 22px;
                height: 22px;
                border: 0;
                border-radius: 6px;
                background: rgba(255, 255, 255, 0.09);
                color: #fca5a5;
                font-size: 13px;
                font-weight: 700;
                line-height: 1;
                cursor: pointer;
            }
            .sbj-ticket-del:hover { background: rgba(248, 113, 113, 0.22); }
            .sbj-ticket-row.sbj-ticket-dupe {
                animation: sbj-ticket-shake 0.35s ease;
                box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.8);
            }
            @keyframes sbj-ticket-shake {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-4px); }
                75% { transform: translateX(4px); }
            }

            /* SBJ prize-card mini balls (visual match-condition indicator) */
            .sbj-mini-ball {
                display: inline-block;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                box-shadow:
                    inset 0 -1px 2px rgba(0, 0, 0, 0.5),
                    inset 0 1px 1px rgba(255, 255, 255, 0.25),
                    0 1px 2px rgba(0, 0, 0, 0.4);
            }
            .sbj-mini-ball-red {
                background: radial-gradient(circle at 35% 30%, #f87171, #dc2626 55%, #7f1d1d);
            }
            .sbj-mini-ball-black {
                background: radial-gradient(circle at 35% 30%, #4b5563, #1f2937 55%, #030712);
            }

            /* Win Celebration Effects */
            @keyframes bm-golden-flash {
                0% { opacity: 0.8; }
                50% { opacity: 0.5; }
                100% { opacity: 0; }
            }
            @keyframes bm-win-text-pop {
                0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(-5deg); }
                15% { opacity: 1; transform: translate(-50%, -50%) scale(1.4) rotate(2deg); }
                30% { transform: translate(-50%, -50%) scale(0.9) rotate(-1deg); }
                45% { transform: translate(-50%, -50%) scale(1.15) rotate(1deg); }
                60% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
                75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
                100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotate(0deg); }
            }
            @keyframes bm-win-text-glow {
                0%, 100% { text-shadow: 0 0 20px rgba(212, 160, 23, 0.9), 0 0 40px rgba(180, 120, 0, 0.6), 0 0 80px rgba(150, 90, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8); }
                50% { text-shadow: 0 0 30px rgba(212, 160, 23, 1), 0 0 60px rgba(180, 120, 0, 0.8), 0 0 100px rgba(150, 90, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8); }
            }
            /* Highlight the prize cell holding a number the user bet on.
               Keeps the dark casino fill (so the gold number stays readable)
               and adds a fast pulsing luxury gold borderline + glow.
               "Thickness" comes from an inset box-shadow ring (not a wider
               border) so the cell never reflows / nudges its neighbours. */
            .user-winning-number {
                position: relative;
                border-color: var(--bm-gold, #fcd34d) !important;
                z-index: 5;
                animation: user-win-pulse 0.7s ease-in-out infinite;
            }
            @keyframes user-win-pulse {
                0%, 100% {
                    border-color: var(--bm-gold-dark, #b8860b) !important;
                    box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.45),
                                0 0 6px rgba(255, 170, 30, 0.4);
                }
                50% {
                    border-color: var(--bm-gold, #fcd34d) !important;
                    box-shadow: inset 0 0 0 2px rgba(252, 211, 77, 1),
                                0 0 18px rgba(255, 190, 40, 0.9),
                                0 0 32px rgba(255, 170, 30, 0.5);
                }
            }
            /* Accessibility: users who ask for reduced motion get the rich gold
               border + glow held steady, with no blink. */
            @media (prefers-reduced-motion: reduce) {
                .user-winning-number {
                    animation: none;
                    border-color: var(--bm-gold, #fcd34d) !important;
                    box-shadow: inset 0 0 0 2px rgba(252, 211, 77, 1),
                                0 0 18px rgba(255, 190, 40, 0.9);
                }
            }
            .bm-win-flash {
                position: fixed;
                inset: 0;
                background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9), rgba(255, 230, 100, 0.7) 30%, rgba(255, 180, 0, 0.4) 60%, rgba(0, 0, 0, 0.2) 100%);
                z-index: 9999;
                pointer-events: none;
                animation: bm-golden-flash 1.2s ease-out forwards;
            }
            .bm-win-text {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0);
                z-index: 10000;
                pointer-events: none;
                white-space: nowrap;
                text-align: center;
                font-size: clamp(2.5rem, 10vw, 4rem);
                font-weight: 900;
                letter-spacing: 0.15em;
                line-height: 1.1;
                color: #d4a017;
                text-shadow: 0 0 20px rgba(212, 160, 23, 0.9), 0 0 40px rgba(180, 120, 0, 0.6), 0 0 80px rgba(150, 90, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8);
                -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
                animation: bm-win-text-pop 3.5s ease-out forwards, bm-win-text-glow 0.6s ease-in-out infinite;
            }
            /* Payout amount sits on its own row under "YOU WIN!" — brighter and
               slightly smaller so the eye lands on the label first, then the money. */
            .bm-win-amount {
                margin-top: 0.15em;
                font-size: 0.72em;
                letter-spacing: 0.06em;
                color: #ffd75e;
                -webkit-text-stroke: 0;
                opacity: 0;
                animation: bm-win-amount-rise 0.5s ease-out 0.35s forwards;
            }
            @keyframes bm-win-amount-rise {
                0% { opacity: 0; transform: translateY(0.35em) scale(0.85); }
                70% { opacity: 1; transform: translateY(0) scale(1.06); }
                100% { opacity: 1; transform: translateY(0) scale(1); }
            }
            @media (prefers-reduced-motion: reduce) {
                .bm-win-amount {
                    opacity: 1;
                    animation: none;
                }
            }

            .sb-slot-box .multi-digit-container {
                display: flex;
                gap: 1px !important;
                align-items: center;
                justify-content: center;
            }

            .slot-number[data-game="sb"] .single-digit-slot,
            .slot-number[data-game="sb"] .slot-container,
            .slot-number[data-game="sbj"] .single-digit-slot,
            .slot-number[data-game="sbj"] .slot-container {
                width: 50px !important;
                min-width: 50px !important;
                height: 95px !important;
                background: white;
                border: 2px solid #ccc;
                border-radius: 10px;
                position: relative;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .slot-number[data-game="sb"] .digit-item,
            .slot-number[data-game="sbj"] .digit-item {
                height: 95px !important;
                font-size: 55px !important;
                line-height: 95px !important;
                font-weight: 700;
            }

            /* SUPER BIG digit reel — a 6-cycle strip (60 × 95px) that loops
               deep in the middle so the reveal (revealSbDigits) always has
               headroom below the window for a long, decelerating drop onto the
               winning digit. The loop window slides DOWN by 2 full cycles
               (20 items) per iteration, which is seamless because the content
               repeats every 10 items. 2D/3D/4D keep the shorter slideDigits. */
            /* 3.17s for the 1900px (2-cycle) move = ~600px/s, which MUST match
               SB_REEL_VELOCITY in revealSbDigits() so the loop flows into the
               landing decel with no visible step-down in speed. */
            .digit-strip.digit-strip-sb {
                /* Duration comes from JS (--sb-reel-loop = SB_REEL.loopDurationSec)
                   so the loop runs at exactly SB_REEL.velocity and flows into the
                   landing decel with no speed step. Fallback matches 1500 px/s. */
                animation: slideDigitsSb var(--sb-reel-loop, 1.09s) linear infinite;
            }
            @keyframes slideDigitsSb {
                0%   { transform: translateY(-83.3333%); } /* showing deep cycle */
                100% { transform: translateY(-50%); }      /* same items, 2 cycles down */
            }
            /* While landing, JS drives the transform inline — kill the loop. */
            .digit-strip.digit-strip-sb.sb-landing {
                animation: none !important;
            }

            /* SUPER BIG JACKPOT — whole-number "ball drop" reel
               Replaces the two-digit-strip approach with one strip cycling
               complete numbers from the valid range (01-20) for a natural
               lottery-ball feel.
               --sbj-item-h is the single source of truth for ball/slot height.
               Used by CSS rules below, the keyframe, and read by JS in
               revealSbjWhole() so all values stay in sync. */
            :root {
                --sbj-item-h: 95px;
            }
            .sbj-whole-slot {
                position: relative;
                overflow: hidden;
                width: var(--sbj-item-h);
                height: var(--sbj-item-h);
                background: white;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .sbj-whole-strip {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                animation: sbj-ball-roll 4s linear infinite;
                will-change: transform;
            }
            .sbj-whole-item {
                height: var(--sbj-item-h);
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            /* Reel balls (separate from picker .sbj-ball to avoid name collision) */
            .sbj-reel-ball {
                width: 78px;
                height: 78px;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 30px;
                font-weight: 800;
                color: #fff;
                line-height: 1;
                font-variant-numeric: tabular-nums;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
                flex-shrink: 0;
            }
            .sbj-reel-ball-red {
                background: radial-gradient(circle at 32% 28%, #ff9b9b 0%, #e23838 48%, #6e0000 100%);
                box-shadow:
                    inset -6px -8px 14px rgba(0, 0, 0, 0.5),
                    inset 4px 4px 10px rgba(255, 255, 255, 0.28),
                    0 4px 8px rgba(0, 0, 0, 0.4);
            }
            .sbj-reel-ball-black {
                background: radial-gradient(circle at 32% 28%, #7a7a7a 0%, #262626 48%, #030303 100%);
                box-shadow:
                    inset -6px -8px 14px rgba(0, 0, 0, 0.65),
                    inset 4px 4px 10px rgba(255, 255, 255, 0.18),
                    0 4px 8px rgba(0, 0, 0, 0.4);
            }
            /* SBJ slot cradle: clean colored border, no glow (overrides the
               gold halo inherited from .sb-slot-box) */
            .slot-number[data-game="sbj"].sb-slot-box {
                padding: 8px !important;
                box-shadow: none !important;
            }
            .sbj-whole-slot {
                background: white;
            }
            @keyframes sbj-ball-roll {
                /* Strip moves DOWNWARD over time so balls visually drop in
                   from above. Strip has 3 cycles × 20 items; loop spans one
                   full cycle (20 × --sbj-item-h) for a seamless wrap. */
                0%   { transform: translateY(calc(var(--sbj-item-h) * -40)); } /* showing cycle 3 */
                100% { transform: translateY(calc(var(--sbj-item-h) * -20)); } /* showing cycle 2 (same items) */
            }
            .sbj-whole-strip.sbj-landing {
                animation: none;
            }

            /* Tab Styles */
            .tab-button {
                background: rgba(185, 28, 28, 0.3);
                color: white;
            }
            
            .tab-button.active {
                background-color: #b91c1c; /* red-700 */
                color: #fff !important;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                font-weight: 600;
            }
            [data-page="login"] .tab-button.active,
            [data-page="register"] .tab-button.active,
            [data-page="forgot_password"] .tab-button.active {
                background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(245, 158, 11, 0.8));
                color: rgba(127, 29, 29, 1) !important;
                box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
                font-weight: 600;
            }
            
            .tab-content {
                transition: all 0.3s ease-in-out;
            }
            
            .tab-content.hidden {
                opacity: 0;
                transform: translateY(-10px);
                pointer-events: none;
            }

            /* Consistent form styling for admin pages: bank accounts and currencies */
            [data-page="bank_accounts"] label {
                color: #fef3c7;
                opacity: 0.8;
                font-size: 0.875rem;
                margin-bottom: 0.5rem; /* unified label spacing at 0.5rem */
                font-weight: 500; /* consistent medium weight for labels */
            }
            [data-page="currencies"] label {
                color: #fef3c7;
                opacity: 0.8;
                font-size: 0.875rem;
                margin-bottom: 0.5rem; /* reduce spacing between label and input */
                font-weight: 500; /* consistent medium weight for labels */
            }
            /* Align currencies form group gaps to 1rem to match bank accounts */
            [data-page="currencies"] form.space-y-3 > :not([hidden]) ~ :not([hidden]) {
                margin-top: 1rem !important;
            }
            [data-page="bank_accounts"] input,
            [data-page="bank_accounts"] select,
            [data-page="bank_accounts"] textarea,
            [data-page="currencies"] input,
            [data-page="currencies"] select,
            [data-page="currencies"] textarea {
                background-color: rgba(127, 29, 29, 1); /* bg-red-800 */
                color: #fff;
                border-radius: 0.25rem; /* rounded */
                padding: 0.5rem 0.75rem; /* px-3 py-2 */
                font-weight: 400 !important; /* override tailwind font-bold in deposit page */
                font-size: 1rem; /* consistent text size at 1rem */
                line-height: 1.5; /* improve readability */
                margin-bottom: 0; /* rely on container spacing for vertical rhythm */
            }
            [data-page="bank_accounts"] ::placeholder,
            [data-page="currencies"] ::placeholder {
                font-weight: 400 !important;
                color: #fff !important; /* pure white for placeholders */
                opacity: 0.9;
            }
            /* Standardize action buttons sizing */
            .btn-primary {
                background-color: #fef3c7; /* yellow-100 */
                color: rgba(127, 29, 29, 1);
                font-weight: 700;
                padding: 0.5rem 1rem;
                border-radius: 0.5rem;
                transition: all 0.3s ease;
            }
            .btn-primary:hover { background-color: #fde68a; }
            /* Compact primary button variant for table actions */
            .btn-primary-sm {
                background-color: #fef3c7; /* yellow-100 */
                color: rgba(127, 29, 29, 1);
                font-weight: 600;
                padding: 0.375rem 0.75rem; /* smaller */
                border-radius: 0.375rem;
                transition: all 0.2s ease;
            }
            .btn-primary-sm:hover { background-color: #fde68a; }
            .btn-danger {
                background-color: #dc2626; /* red-600 */
                color: #fff;
                padding: 0.375rem 0.75rem;
                border-radius: 0.375rem;
                font-weight: 500;
                transition: background-color 0.2s ease;
            }
            .btn-danger:hover { background-color: #b91c1c; }
            .bet-ball {
                box-sizing: border-box;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                width: 28px;
                height: 28px;
                padding: 0;
                border-radius: 50%;
                font-size: 0.7rem;
                font-weight: 700;
                line-height: 1;
                color: #fff;
            }
            .bet-ball--default { background: #fde68a; color: #451a03; }
            .bet-ball--red { background: #ef4444; }
            .bet-ball--black { background: #1f2937; }
            .bet-ball-pair { display: inline-flex; align-items: center; gap: 4px; }

/* ===================================================================
   GAME BACKGROUND — STOP THE SCROLL ZOOM  (2026-08-16)

   Player report: "in each game, when you scroll to the bottom, it has a
   zoom effect."

   CAUSE — not the artwork, the BOX it is painted into. .has-game-bg::before
   is `position: fixed; top: 0; bottom: 0`, so its height is whatever the
   viewport currently is. On a phone, scrolling down COLLAPSES the browser's
   URL bar, the visible viewport gets taller, and the fixed element grows with
   it. The photo is `background-size: cover` anchored `center center`, so a
   taller box rescales the image about its centre — a visible zoom, timed to
   the exact moment the bar collapses (i.e. as you reach the bottom).

   Desktop cannot reproduce this: no collapsing chrome, so the box never
   changes height. Same blind spot that got the earlier viewport-height work
   reverted twice — see the memory on 100dvh mid-scroll rescaling.

   FIX — size the layer to the LARGE viewport, which is defined as the
   viewport with the URL bar RETRACTED and therefore never shrinks mid-scroll.
   `bottom: auto` so height wins over the top/bottom pair.

     * 100vh  — on mobile this is already the chrome-INCLUSIVE (large) height,
                so it is the correct stable fallback for engines without lvh.
     * 100lvh — explicit large-viewport unit where supported (iOS 15.4+,
                Chrome 108+); identical intent, stated in the modern unit.

   Deliberately NOT dvh: dvh is the DYNAMIC viewport and is precisely the
   thing that changes mid-scroll. Using it here would re-create the bug.

   Lives in app-inline.css (hand-authored, loaded AFTER main.css) because
   input.css is a Tailwind SOURCE — editing it changes nothing until a rebuild,
   and the rebuild glob is a known footgun in this repo.
   =================================================================== */
.has-game-bg::before {
    bottom: auto;
    height: 100vh;
    height: 100lvh;
}

/* ===================================================================
   RULES & RESULTS CONTENT — 2026-08-16

   The modal SHELLS (.casino-modal-*) were rebuilt on the --cz-* tokens,
   but the CONTENT inside them never was: it used flat `bg-red-900`,
   inline `#991b1b` fills and, in the draw selector, a pure WHITE
   `bg-white border-gray-300` dropdown. Against the room's layered
   --cz-panel-bg radial and 40%-alpha gold hairline, those read as
   foreign panels pasted into the game — the exact problem the modal
   shell comment describes, one level further in.

   Everything below is built from the SAME tokens as .casino-board /
   .casino-control so the popups belong to the room. No new colours are
   introduced; every value resolves to an existing --cz-* token.

   Lives here (hand-authored, loaded after main.css) rather than in
   input.css because input.css is a Tailwind SOURCE — adding classes
   there requires a rebuild, and the build glob is a known footgun.
   =================================================================== */

/* Surface. Replaces bg-red-900/bg-opacity-80 and inline #991b1b. */
.cz-card {
    background: var(--cz-cell-bg);
    border: 1px solid var(--cz-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 220, 130, 0.06),
                0 4px 14px rgba(0, 0, 0, 0.35);
}
.cz-card--pad { padding: 0.75rem 0.875rem; }
.cz-card--flush { padding: 0; overflow: hidden; }

/* Label / value pair inside a card. The label is the quiet half: same
   uppercase micro-type as .casino-section-title so the rules grid reads
   as the same family as the prize board. */
.cz-card-label {
    color: var(--cz-gold);
    opacity: 0.75;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 0.2rem;
}
.cz-card-value {
    color: #fff7e0;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.35;
}

/* Form controls. One class for every input type in these panels so the
   date picker, the textarea and the file field stop each having their
   own look. */
.cz-field {
    width: 100%;
    background: var(--cz-cell-bg);
    border: 1px solid var(--cz-border);
    border-radius: 8px;
    color: #fff7e0;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cz-field:focus,
.cz-field:focus-visible {
    outline: none;
    border-color: var(--cz-gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 46, 0.16);
}
.cz-field::placeholder { color: rgba(255, 247, 224, 0.4); }
/* WebKit paints the native date/calendar glyph near-black on a dark field. */
.cz-field::-webkit-calendar-picker-indicator {
    filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg);
    cursor: pointer;
}
.cz-field--file::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: 6px;
    background: var(--cz-gold);
    color: #2c0c0c;
    font-weight: 700;
    font-size: 0.8125rem;
    cursor: pointer;
}

/* Draw stepper arrows — square, hairline, gold on press. */
.cz-navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    background: var(--cz-cell-bg);
    border: 1px solid var(--cz-border);
    border-radius: 8px;
    color: var(--cz-gold);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.cz-navbtn:hover:not(:disabled) { border-color: var(--cz-gold); color: var(--cz-gold-bright); }
.cz-navbtn:active:not(:disabled) { transform: translateY(1px); }
.cz-navbtn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Draw selector + its menu. The menu was bg-white/border-gray-300 — a
   white sheet over a dark room. */
.cz-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: var(--cz-cell-bg);
    border: 1px solid var(--cz-border);
    border-radius: 8px;
    color: #fff7e0;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.5rem 0.625rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.cz-select:hover { border-color: var(--cz-gold); }
.cz-menu {
    background: var(--cz-panel-bg);
    border: 1px solid var(--cz-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.cz-menu-item {
    color: #fff7e0;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 198, 80, 0.12);
}
.cz-menu-item:last-child { border-bottom: 0; }
.cz-menu-item:hover,
.cz-menu-item.is-active { background: rgba(255, 198, 80, 0.12); color: var(--cz-gold-bright); }

/* Rules prose. Readable measure, warm ink — not pure white. */
.cz-prose {
    color: #fdecc8;
    font-size: 0.9375rem;
    line-height: 1.6;
}
.cz-prose a { color: var(--cz-gold); text-decoration: underline; }

/* Inline gold link with trailing icon (View Full Rules / Watch Video). */
.cz-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--cz-gold);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
}
.cz-link:hover { color: var(--cz-gold-bright); text-decoration: underline; }

/* Prize multiplier rows inside the rules panel. Mirrors the prize board's
   label-left / figure-right rhythm so the two teach the same thing the
   same way. */
.cz-mult-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
    align-items: baseline;
}
.cz-mult-name { color: #fff7e0; font-weight: 600; font-size: 0.875rem; }
.cz-mult-figure {
    color: var(--cz-gold-premium);
    font-weight: 800;
    font-size: 0.9375rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cz-mult-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.cz-mult-row + .cz-mult-row { margin-top: 0.375rem; }
.cz-mult-row .cz-mult-name { flex: 1; }
.cz-warn {
    color: #f87171;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Media blocks: banner image and the 16:9 video frame. */
.cz-media { border-radius: 10px; overflow: hidden; border: 1px solid var(--cz-border); }
.cz-media img { width: 100%; height: auto; display: block; }
.cz-video { aspect-ratio: 16 / 9; background: #000; }
.cz-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===================================================================
   TOUCH MINIMUMS for the rules/results controls — 2026-08-16

   Shipped at 36-39px, which is under BOTH platform minimums (iOS HIG 44pt,
   Android Material 48dp) — on a platform that is 76% mobile. 44px is the
   floor here; min-height rather than height so a textarea can still grow.
   =================================================================== */
button.cz-navbtn, .cz-navbtn { min-height: 44px; min-width: 44px; }
input.cz-field, select.cz-field, textarea.cz-field, .cz-field { min-height: 44px; }
textarea.cz-field { min-height: 88px; }
div.cz-select, .cz-select { min-height: 44px; }
div.cz-menu-item, .cz-menu-item { min-height: 44px; display: flex; align-items: center; }

            /* ── Sidebar scroll area ──────────────────────────────────────────
               The nav scrolled with the browser's default scrollbar: a fat,
               opaque light-grey track running the full height of a dark red
               panel, with rows hard-cut mid-glyph at both ends and group
               labels ("GAMES", "FINANCE") scrolling away so you lose track of
               which section you're in. Three fixes, all cosmetic:
                 1. a thin gold overlay scrollbar on a transparent track;
                 2. soft fade masks at whichever end is actually scrollable —
                    driven by .is-fade-top/.is-fade-bottom from layout.php, so
                    the first and last rows are NOT dimmed when fully scrolled;
                 3. sticky group headers.
               `scrollbar-gutter: stable` keeps the row widths from jumping when
               the thumb appears/disappears. */
            .sidebar-nav {
                overscroll-behavior: contain;
                scrollbar-gutter: stable;
                scrollbar-width: thin;
                scrollbar-color: rgba(253, 224, 71, 0.32) transparent;
                --sn-fade-top: 0px;
                --sn-fade-bottom: 0px;
                -webkit-mask-image: linear-gradient(to bottom,
                    transparent 0,
                    #000 var(--sn-fade-top),
                    #000 calc(100% - var(--sn-fade-bottom)),
                    transparent 100%);
                mask-image: linear-gradient(to bottom,
                    transparent 0,
                    #000 var(--sn-fade-top),
                    #000 calc(100% - var(--sn-fade-bottom)),
                    transparent 100%);
            }
            .sidebar-nav.is-fade-top    { --sn-fade-top: 28px; }
            .sidebar-nav.is-fade-bottom { --sn-fade-bottom: 32px; }

            .sidebar-nav::-webkit-scrollbar { width: 6px; }
            .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
            .sidebar-nav::-webkit-scrollbar-thumb {
                border-radius: 999px;
                background: linear-gradient(180deg,
                    rgba(253, 224, 71, 0.45) 0%,
                    rgba(234, 179, 8, 0.32) 100%);
            }
            .sidebar-nav::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(180deg,
                    rgba(253, 224, 71, 0.75) 0%,
                    rgba(234, 179, 8, 0.55) 100%);
            }

            /* Keep a row clear of the sticky group header when it is scrolled
               into view programmatically (the active-item reveal below). */
            .sidebar-nav li { scroll-margin-top: 2.5rem; scroll-margin-bottom: 1rem; }

            .sidebar-group {
                position: sticky;
                top: -0.75rem;   /* cancels the nav's py-4 so it pins flush */
                z-index: 2;
                padding: 0.45rem 0 0.3rem;
                background: linear-gradient(180deg,
                    rgba(127, 29, 29, 0.97) 0%,
                    rgba(127, 29, 29, 0.97) 62%,
                    rgba(127, 29, 29, 0) 100%);
                -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px);
            }