/* ============================================================================
   KEYROLL — COLOR PALETTE  (single source of truth)
   ----------------------------------------------------------------------------
   Want to re-theme the whole site? Edit the values in this block ONLY.
   Every brand / semantic / surface color below feeds the entire stylesheet.

   Each color comes in two forms — keep the pair in sync when you change one:
     --x      = HEX, used for solid fills  ......... color: var(--x);
     --x-rgb  = "R, G, B" triplet, used for transparency
                ............................. background: rgba(var(--x-rgb), .2);

   (Incidental one-off dark slate shades in deep gradients are left inline by
   design — the tokens below define KeyRoll's actual identity.)
   ============================================================================ */
:root {
    color-scheme: dark;

    /* --- Brand accents (KeyRoll gold monochrome) --------------------------- */
    /* The wordmark is ivory + warm gold; the whole palette collapses to that
       family. The legacy token NAMES are kept (the stylesheet wires ~780 uses
       to them) but every value is now a warm gold/champagne/copper tone so the
       site reads as one cohesive golden identity. */
    --teal:        #f2d488;   --teal-rgb:        242, 212, 136;  /* champagne highlight (was the bright primary) */
    --gold:        #e3b04a;   --gold-rgb:        227, 176, 74;   /* core KeyRoll gold (logo #d5a349, lifted) */
    --rose:        #d99a5c;   --rose-rgb:        217, 154, 92;   /* warm rose-gold / copper */
    --rose-deep:   #9a6324;   /* deep bronze used in "rose" gradients */
    --violet:      #caa24f;   --violet-rgb:      202, 162, 79;   /* antique gold */

    /* --- Semantic state (kept distinct for win / loss) --------------------- */
    --green:       #4cb86a;   --green-rgb:       76, 184, 106;
    --danger:      #df5a4a;   --danger-rgb:      223, 90, 74;

    /* --- Surfaces (warm espresso base) ------------------------------------- */
    --ink:         #0b0804;   --ink-rgb:         11, 8, 4;
    --panel:       #1a130a;
    --panel-2:     #251b0f;
    --panel-deep:  #120d06;   --panel-deep-rgb:  18, 13, 6;

    /* --- Text (logo ivory) ------------------------------------------------- */
    --text:        #f4efe2;
    --muted:       #b6a888;

    /* --- Neutrals (overlays / shadows / borders) --------------------------- */
    --white:       #fffaf0;   --white-rgb:       255, 250, 240;  /* warm white — no harsh pure white */
    --black:       #000000;   --black-rgb:       0, 0, 0;

    /* --- Derived ----------------------------------------------------------- */
    --line:   rgba(var(--gold-rgb), 0.14);
    --shadow: 0 24px 80px rgba(var(--black-rgb), 0.55);
}
/* ===== PALETTE END — everything below is wired to the tokens above ========= */

/* --- Typography: elegant display serif (echoes the KeyRoll wordmark) -------- */
:root {
    --font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[hidden] {
    display: none !important;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--ink);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    background:
        radial-gradient(circle at 18% 14%, rgba(var(--gold-rgb), 0.16), transparent 30rem),
        radial-gradient(circle at 84% 6%, rgba(var(--teal-rgb), 0.12), transparent 28rem),
        radial-gradient(circle at 50% 118%, rgba(var(--rose-rgb), 0.10), transparent 38rem),
        linear-gradient(158deg, #0b0804 0%, #140e07 46%, #0c0905 100%);
    background-attachment: fixed;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

code {
    padding: 0.12rem 0.3rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 6px;
    color: var(--gold);
    background: rgba(var(--ink-rgb), 0.58);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78em;
    word-break: break-all;
}

button {
    cursor: pointer;
}

.ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(var(--gold-rgb), 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--gold-rgb), 0.04) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, rgba(var(--black-rgb), 0.85), transparent);
}

/* Drifting four-point star sparkle field — echoes the logo's stars.
   A single SVG of two gold stars, tiled large, slowly drifting + twinkling. */
.ambient::before {
    content: "";
    position: absolute;
    inset: -10%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cpath fill='%23e3b04a' d='M70 28c4 22 12 30 34 34-22 4-30 12-34 34-4-22-12-30-34-34 22-4 30-12 34-34z'/%3E%3Cpath fill='%23f2d488' d='M236 150c3 16 9 22 25 25-16 3-22 9-25 25-3-16-9-22-25-25 16-3 22-9 25-25z'/%3E%3Cpath fill='%23e3b04a' d='M150 250c2 12 7 17 19 19-12 2-17 7-19 19-2-12-7-17-19-19 12-2 17-7 19-19z'/%3E%3C/svg%3E");
    background-size: 320px 320px;
    opacity: 0.5;
    animation: keyroll-sparkle-drift 90s linear infinite, keyroll-sparkle-twinkle 6.5s ease-in-out infinite;
    will-change: transform, opacity;
    pointer-events: none;
}

@keyframes keyroll-sparkle-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-320px, -320px, 0); }
}

@keyframes keyroll-sparkle-twinkle {
    0%, 100% { opacity: 0.32; }
    50%      { opacity: 0.62; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient::before { animation: none; opacity: 0.4; }
}

/* ============================================================================
   BOOT SCREEN — first-load session loader
   ----------------------------------------------------------------------------
   Shown only on the first page of a browsing session (when there's no cached
   session in sessionStorage). A tiny inline script in <head> adds `.is-booting`
   to <html> before first paint; app.js removes it once the session resolves.
   Returning navigations hydrate from cache and never see this.
   ============================================================================ */
.boot-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(var(--gold-rgb), 0.10), transparent 38rem),
        linear-gradient(158deg, #0b0804 0%, #140e07 46%, #0c0905 100%);
}

html.is-booting .boot-screen {
    display: flex;
}

/* Lock scroll under the loader while it's up. */
html.is-booting,
html.is-booting body {
    overflow: hidden;
}

.boot-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    transform: translateY(-2%);
}

.boot-logo {
    width: clamp(150px, 42vw, 220px);
    height: auto;
    animation: boot-logo-pulse 2s ease-in-out infinite;
    will-change: transform, opacity, filter;
}

@keyframes boot-logo-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.82;
        filter:
            drop-shadow(0 0 22px rgba(var(--gold-rgb), 0.30))
            drop-shadow(0 0 6px rgba(var(--teal-rgb), 0.18));
    }
    50% {
        transform: scale(1.045);
        opacity: 1;
        filter:
            drop-shadow(0 0 34px rgba(var(--gold-rgb), 0.50))
            drop-shadow(0 0 12px rgba(var(--teal-rgb), 0.30));
    }
}

.boot-bar {
    position: relative;
    width: clamp(120px, 34vw, 180px);
    height: 3px;
    border-radius: 999px;
    background: rgba(var(--gold-rgb), 0.12);
    overflow: hidden;
}

.boot-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 8%;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgba(var(--gold-rgb), 0.35),
        var(--gold) 55%,
        var(--teal));
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.55);
    /* Creep toward ~92% while loading; app.js snaps it to 100% on completion. */
    animation: boot-bar-load 1.6s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}

@keyframes boot-bar-load {
    0%   { width: 8%; }
    60%  { width: 64%; }
    100% { width: 92%; }
}

/* Completed — fill snaps full just before the screen fades out. */
.boot-screen.is-complete .boot-bar-fill {
    width: 100%;
    transition: width 0.25s ease-out;
    animation: none;
}

/* Leaving — fade + gently lift the whole loader away. */
.boot-screen.is-leaving {
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .boot-logo { animation: none; opacity: 1; }
    .boot-bar-fill { animation: none; width: 70%; }
    .boot-screen.is-leaving { transition: opacity 0.2s ease; transform: none; }
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem clamp(1rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
    background: rgba(var(--ink-rgb), 0.82);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    font-weight: 850;
}

.brand span {
    white-space: nowrap;
}

.brand img {
    filter:
        drop-shadow(0 0 22px rgba(var(--gold-rgb), 0.4))
        drop-shadow(0 0 6px rgba(var(--teal-rgb), 0.3));
    transition: filter 240ms ease, transform 240ms ease;
}

.brand:hover img {
    filter:
        drop-shadow(0 0 30px rgba(var(--gold-rgb), 0.6))
        drop-shadow(0 0 10px rgba(var(--teal-rgb), 0.45));
    transform: translateY(-1px);
}

/* Wordmark logo — sized by height, width follows the SVG aspect ratio.
   Higher specificity than the square ".brand img" chip rules so the
   responsive breakpoints below don't squash it into a box. */
.brand img.brand-logo {
    width: auto;
    height: 34px;
}

.nav,
.account-strip,
.game-tabs,
.choice-grid,
.quick-row,
.stat-row {
    display: flex;
    align-items: center;
}

.nav {
    justify-content: center;
    gap: 0.35rem;
}

.nav a,
.game-tabs a {
    min-height: 2.5rem;
    padding: 0.7rem 0.9rem;
    color: var(--muted);
    border-radius: 8px;
}

.nav a.active,
.nav a:hover,
.game-tabs a.active,
.game-tabs a:hover {
    color: var(--text);
    background: rgba(var(--white-rgb), 0.08);
}

.account-strip {
    justify-content: flex-end;
    gap: 0.7rem;
}

.topbar-balance {
    justify-self: center;
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    min-height: 2.35rem;
    padding: 0.42rem 0.75rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(var(--white-rgb), 0.035);
}

.topbar-balance span {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.topbar-balance strong {
    color: #f4e8c4;
    font-size: 0.96rem;
    font-weight: 620;
}

.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 2.7rem;
    padding: 0.58rem 0.72rem;
    border: 1px solid rgba(var(--teal-rgb), 0.3);
    border-radius: 8px;
    color: #0d0a06;
    background: linear-gradient(135deg, var(--teal), var(--gold));
    box-shadow: 0 0 24px rgba(var(--teal-rgb), 0.1);
}

.level-badge span {
    font-size: 0.68rem;
    font-weight: 750;
}

.level-badge strong {
    min-width: 1.4rem;
    font-size: 0.95rem;
    font-weight: 750;
    text-align: center;
}

.level-tier {
    --level-accent: #a8966f;
    --level-surface: rgba(168, 150, 111, 0.12);
    --level-border: rgba(168, 150, 111, 0.32);
    --level-shadow: rgba(168, 150, 111, 0.12);
    color: var(--level-accent);
}

.level-tier-starter {
    --level-accent: #a8966f;
    --level-surface: rgba(168, 150, 111, 0.12);
    --level-border: rgba(168, 150, 111, 0.32);
    --level-shadow: rgba(168, 150, 111, 0.12);
}

.level-tier-riser {
    --level-accent: var(--green);
    --level-surface: rgba(var(--green-rgb), 0.12);
    --level-border: rgba(var(--green-rgb), 0.34);
    --level-shadow: rgba(var(--green-rgb), 0.13);
}

.level-tier-skilled {
    --level-accent: var(--teal);
    --level-surface: rgba(var(--teal-rgb), 0.13);
    --level-border: rgba(var(--teal-rgb), 0.38);
    --level-shadow: rgba(var(--teal-rgb), 0.16);
}

.level-tier-elite {
    --level-accent: #e8c25f;
    --level-surface: rgba(232, 194, 95, 0.14);
    --level-border: rgba(232, 194, 95, 0.4);
    --level-shadow: rgba(232, 194, 95, 0.16);
}

.level-tier-vip {
    --level-accent: var(--violet);
    --level-surface: rgba(var(--violet-rgb), 0.15);
    --level-border: rgba(var(--violet-rgb), 0.44);
    --level-shadow: rgba(var(--violet-rgb), 0.18);
}

.level-tier-mythic {
    --level-accent: var(--rose);
    --level-surface: rgba(var(--rose-rgb), 0.16);
    --level-border: rgba(var(--rose-rgb), 0.46);
    --level-shadow: rgba(var(--rose-rgb), 0.2);
}

.level-tier-legend {
    --level-accent: var(--gold);
    --level-surface: rgba(var(--gold-rgb), 0.17);
    --level-border: rgba(var(--gold-rgb), 0.5);
    --level-shadow: rgba(var(--gold-rgb), 0.22);
}

.level-tier-max {
    --level-accent: #fde047;
    --level-surface: rgba(var(--gold-rgb), 0.2);
    --level-border: rgba(var(--gold-rgb), 0.66);
    --level-shadow: rgba(var(--gold-rgb), 0.28);
}

.level-crown {
    display: inline-block;
    width: 0.92em;
    height: 0.72em;
    background: currentColor;
    clip-path: polygon(6% 100%, 6% 42%, 25% 60%, 41% 12%, 50% 50%, 59% 12%, 75% 60%, 94% 42%, 94% 100%);
}

/* YouTube-style sound control: a mute button that reveals a volume slider. */
.sound-control {
    display: inline-flex;
    align-items: center;
    height: 2.7rem;
    padding: 0 0.16rem 0 0.1rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 999px;
    color: var(--text);
    background: rgba(var(--white-rgb), 0.055);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.sound-control:hover,
.sound-control:focus-within {
    border-color: rgba(var(--teal-rgb), 0.32);
    background: rgba(var(--teal-rgb), 0.08);
}

.sound-control.is-muted {
    color: var(--muted);
    border-color: rgba(var(--rose-rgb), 0.24);
    background: rgba(var(--rose-rgb), 0.08);
}

.sound-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: inherit;
    background: transparent;
}

.sound-toggle:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.sound-svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.sound-svg .spk-body {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.1;
}

.sound-svg .spk-wave {
    transition: opacity 140ms ease;
}

.sound-svg .spk-mute {
    opacity: 0;
    stroke: var(--rose);
    transition: opacity 140ms ease;
}

/* Speaker waves shown per level (data-level set in JS: 0 mute, 1 low, 2 full). */
.sound-control[data-level="0"] .spk-wave,
.sound-control[data-level="1"] .spk-wave-2,
.sound-control.is-muted .spk-wave {
    opacity: 0;
}

.sound-control.is-muted .spk-mute {
    opacity: 1;
}

/* The slider stays collapsed until the control is hovered or focused. */
.sound-slider-wrap {
    display: flex;
    align-items: center;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 200ms ease, opacity 160ms ease, margin 200ms ease;
}

.sound-control:hover .sound-slider-wrap,
.sound-control:focus-within .sound-slider-wrap {
    width: 5.2rem;
    margin-right: 0.55rem;
    opacity: 1;
}

.sound-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    /* The global input rule (min-height/padding/border) would balloon the
       track into a fat pill — reset those so it stays a thin rail. */
    height: 4px;
    min-height: 0;
    padding: 0;
    border: 0;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(to right, var(--teal) 0 var(--vol, 70%), rgba(var(--white-rgb), 0.2) var(--vol, 70%) 100%);
    cursor: pointer;
}

.sound-control.is-muted .sound-slider {
    background: linear-gradient(to right, var(--rose) 0 var(--vol, 0%), rgba(var(--white-rgb), 0.18) var(--vol, 0%) 100%);
}

.sound-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.4);
    cursor: pointer;
}

.sound-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.4);
    cursor: pointer;
}

.sound-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}

.sound-slider:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 4px;
}

.guest-actions,
.auth-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.balance-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    border-radius: 8px;
    background: rgba(var(--gold-rgb), 0.08);
}

.balance-pill span {
    color: var(--muted);
    font-size: 0.72rem;
}

.balance-pill strong {
    color: var(--gold);
    font-size: 0.98rem;
}

.page-shell {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 3.5rem;
}

.site-footer {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1rem 0 2rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.app-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 1.2rem;
    align-items: stretch;
    min-height: 430px;
}

.casino-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 410px);
}

.hero-copy,
.auth-panel,
.game-panel,
.wallet-panel,
.mini-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(30, 21, 12, 0.94), rgba(43, 31, 17, 0.82));
    box-shadow: var(--shadow);
}

.hero-copy {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.4rem, 4vw, 3rem);
    background:
        linear-gradient(180deg, rgba(var(--ink-rgb), 0.06), rgba(var(--ink-rgb), 0.94)),
        url('/assets/img/table-pattern.svg') center / cover;
}

.hero-copy::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(var(--gold-rgb), 0.22);
    border-radius: 8px;
    pointer-events: none;
}

.eyebrow {
    margin: 0 0 0.9rem;
    color: var(--teal);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    overflow-wrap: anywhere;
}

h1 {
    max-width: 790px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.7rem, 5.4vw, 5.6rem);
    line-height: 1;
    letter-spacing: 0.01em;
}

h2 {
    margin: 0 0 0.8rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.4vw, 2.55rem);
    letter-spacing: 0.01em;
}

h3 {
    margin: 0;
    font-size: 1.02rem;
}

.lead {
    max-width: 650px;
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.trust-strip span,
.provider,
.table-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(var(--white-rgb), 0.13);
    border-radius: 8px;
    color: #f4e8c4;
    font-size: 0.76rem;
    font-weight: 850;
    background: rgba(var(--ink-rgb), 0.58);
}

.status-board {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.4rem);
    border: 1px solid rgba(var(--gold-rgb), 0.22);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(43, 31, 17, 0.94), rgba(var(--ink-rgb), 0.9)),
        radial-gradient(circle at 50% 0, rgba(var(--gold-rgb), 0.18), transparent 18rem);
    box-shadow: var(--shadow);
}

.jackpot {
    padding: 1rem;
    border: 1px solid rgba(var(--gold-rgb), 0.28);
    border-radius: 8px;
    background: rgba(var(--gold-rgb), 0.08);
}

.jackpot span,
.market-grid span {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.jackpot strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--gold);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.market-grid div {
    min-height: 5.2rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.055);
}

.market-grid strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.2rem;
}

.cta-row,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.2rem;
}

.icon-text,
.button,
.chip-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    padding: 0.75rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.01em;
    background: transparent;
    overflow: hidden;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 200ms ease;
}

.icon-text:hover,
.button:hover,
.chip-button:hover {
    transform: translateY(-1px);
}

.primary,
.button.primary {
    color: var(--ink);
    background: linear-gradient(135deg, var(--rose) 0%, var(--gold) 38%, var(--teal) 60%, var(--gold) 100%);
    background-size: 180% 100%;
    box-shadow:
        0 10px 28px rgba(var(--gold-rgb), 0.32),
        inset 0 1px 0 rgba(var(--white-rgb), 0.45);
    text-shadow: 0 1px 0 rgba(var(--white-rgb), 0.25);
}

/* Sweeping gold sheen on the primary button. */
.primary::after,
.button.primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(var(--white-rgb), 0.55) 48%, transparent 66%);
    transform: translateX(-120%);
    transition: transform 720ms ease;
    pointer-events: none;
}

.primary:hover,
.button.primary:hover {
    background-position: 100% 50%;
    box-shadow:
        0 14px 36px rgba(var(--gold-rgb), 0.46),
        inset 0 1px 0 rgba(var(--white-rgb), 0.5);
}

.primary:hover::after,
.button.primary:hover::after {
    transform: translateX(120%);
}

.ghost,
.button.ghost {
    border-color: rgba(var(--gold-rgb), 0.4);
    color: var(--text);
    background: rgba(var(--gold-rgb), 0.06);
}

.ghost:hover,
.button.ghost:hover {
    border-color: rgba(var(--gold-rgb), 0.7);
    background: rgba(var(--gold-rgb), 0.12);
    box-shadow: 0 8px 22px rgba(var(--gold-rgb), 0.18);
}

.secondary,
.button.secondary {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
}

.secondary:hover,
.button.secondary:hover {
    border-color: rgba(var(--gold-rgb), 0.5);
    color: var(--text);
}

.danger {
    color: var(--white);
    background: linear-gradient(135deg, var(--danger), #f97316);
}

.auth-panel,
.wallet-panel,
.mini-panel {
    padding: clamp(1rem, 3vw, 1.6rem);
}

.auth-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.6fr);
    gap: 1.2rem;
    align-items: start;
}

.auth-art {
    min-height: 520px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(var(--ink-rgb), 0.05), rgba(var(--ink-rgb), 0.86)),
        url('/assets/img/table-pattern.svg') center / cover;
    box-shadow: var(--shadow);
}

.field {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.check-row {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    gap: 0.6rem;
    align-items: start;
    margin: 0.8rem 0;
    color: var(--muted);
    line-height: 1.45;
}

.check-row input {
    width: 1.1rem;
    min-height: 1.1rem;
    margin-top: 0.15rem;
}

.field span,
.option-label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 750;
}

input,
select,
textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.7rem 0.8rem;
    color: var(--text);
    border: 1px solid rgba(var(--white-rgb), 0.13);
    border-radius: 8px;
    outline: none;
    background: rgba(var(--ink-rgb), 0.58);
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.14);
}

.hint {
    margin: 0.4rem 0 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.notice {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.07);
}

.notice.error {
    border-color: rgba(var(--danger-rgb), 0.45);
    background: rgba(var(--danger-rgb), 0.12);
}

.notice.success {
    border-color: rgba(var(--green-rgb), 0.45);
    background: rgba(var(--green-rgb), 0.12);
}

.flash-slot {
    margin-bottom: 1rem;
}

.center-panel {
    width: min(620px, 100%);
    margin: 2rem auto;
    text-align: center;
}

.lobby-band {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.lobby-band h2 {
    margin-bottom: 0;
}

.lobby-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}

.game-card {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(43, 31, 17, 0.94), rgba(var(--ink-rgb), 0.82)),
        radial-gradient(circle at 100% 100%, rgba(var(--teal-rgb), 0.18), transparent 14rem);
    box-shadow: 0 18px 50px rgba(var(--black-rgb), 0.24);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.game-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--gold-rgb), 0.38);
    box-shadow: 0 24px 70px rgba(var(--black-rgb), 0.36);
}

.game-card::after {
    content: attr(data-symbol);
    position: absolute;
    right: 0.7rem;
    bottom: -0.45rem;
    color: rgba(var(--white-rgb), 0.08);
    font-size: 5.6rem;
    font-weight: 900;
}

.game-card p {
    max-width: 16rem;
    color: var(--muted);
    line-height: 1.55;
}

.provider {
    margin-bottom: 1.2rem;
    color: var(--teal);
}

.roulette-card {
    background:
        linear-gradient(145deg, rgba(43, 31, 17, 0.94), rgba(var(--ink-rgb), 0.84)),
        radial-gradient(circle at 100% 100%, rgba(var(--danger-rgb), 0.2), transparent 13rem);
}

.spinner-card {
    background:
        linear-gradient(145deg, rgba(43, 31, 17, 0.94), rgba(var(--ink-rgb), 0.84)),
        radial-gradient(circle at 92% 90%, rgba(var(--green-rgb), 0.18), transparent 10rem),
        radial-gradient(circle at 72% 100%, rgba(var(--danger-rgb), 0.18), transparent 12rem);
}

.crash-card {
    background:
        linear-gradient(145deg, rgba(43, 31, 17, 0.94), rgba(var(--ink-rgb), 0.84)),
        radial-gradient(circle at 100% 100%, rgba(var(--rose-rgb), 0.22), transparent 13rem);
}

.dice-card {
    background:
        linear-gradient(145deg, rgba(43, 31, 17, 0.94), rgba(var(--ink-rgb), 0.84)),
        radial-gradient(circle at 100% 100%, rgba(var(--teal-rgb), 0.2), transparent 13rem);
}

.mines-card {
    background:
        linear-gradient(145deg, rgba(43, 31, 17, 0.94), rgba(var(--ink-rgb), 0.84)),
        radial-gradient(circle at 100% 100%, rgba(var(--green-rgb), 0.18), transparent 13rem);
}

.blackjack-card {
    background:
        linear-gradient(145deg, rgba(43, 31, 17, 0.94), rgba(var(--ink-rgb), 0.84)),
        radial-gradient(circle at 100% 100%, rgba(227, 176, 74, 0.18), transparent 13rem);
}

.game-card strong {
    color: var(--gold);
}

.game-layout {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.game-tabs {
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.game-panel {
    overflow: hidden;
}

.game-controls {
    position: relative;
    padding: 1rem;
}

.game-controls::after {
    content: "LIVE";
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid rgba(var(--gold-rgb), 0.28);
    border-radius: 8px;
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 900;
    background: rgba(var(--gold-rgb), 0.08);
}

.game-stage {
    position: relative;
    min-height: 520px;
    padding: 1rem;
    border-left: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(var(--ink-rgb), 0.24), rgba(var(--ink-rgb), 0.78)),
        url('/assets/img/table-pattern.svg') center / cover;
}

.table-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--gold);
}

.game-wager-field input {
    min-height: 2.9rem;
}

.result-box {
    min-height: 120px;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(var(--ink-rgb), 0.62);
}

.result-box.win {
    border-color: rgba(var(--green-rgb), 0.55);
    box-shadow: 0 0 32px rgba(var(--green-rgb), 0.12);
}

.result-box.loss {
    border-color: rgba(var(--danger-rgb), 0.45);
}

.result-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-weight: 900;
}

.stat-row {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.stat {
    min-width: 8rem;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.06);
}

.stat span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
}

.stat strong {
    display: block;
    margin-top: 0.15rem;
}

.choice-grid {
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0.6rem 0 1rem;
}

.choice-grid label {
    flex: 1 1 8rem;
}

.choice-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(var(--white-rgb), 0.06);
}

.choice-grid input:checked + span {
    color: #0d0a06;
    border-color: transparent;
    background: linear-gradient(135deg, var(--teal), var(--gold));
}

/* Roulette wheel styles live in the rebuilt roulette block further down. */

.dice-face {
    display: grid;
    place-items: center;
    width: min(300px, 80vw);
    aspect-ratio: 1;
    margin: 1rem auto;
    border: 1px solid rgba(var(--white-rgb), 0.14);
    border-radius: 8px;
    color: var(--gold);
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 950;
    background: linear-gradient(145deg, rgba(var(--white-rgb), 0.08), rgba(var(--white-rgb), 0.02));
    box-shadow: inset 0 0 34px rgba(var(--gold-rgb), 0.1), var(--shadow);
}

.mines-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
    width: min(480px, 100%);
    margin: 1rem auto;
}

.mine-tile {
    aspect-ratio: 1;
    border: 1px solid rgba(var(--white-rgb), 0.14);
    border-radius: 8px;
    color: transparent;
    background: linear-gradient(145deg, rgba(var(--teal-rgb), 0.16), rgba(var(--violet-rgb), 0.12));
    box-shadow: inset 0 -8px 0 rgba(var(--black-rgb), 0.18);
}

.mine-tile.selected {
    border-color: rgba(var(--gold-rgb), 0.7);
    background: rgba(var(--gold-rgb), 0.18);
}

.mine-tile.safe,
.mine-tile.boom {
    display: grid;
    place-items: center;
    color: var(--text);
    font-weight: 900;
}

.mine-tile.safe {
    background: rgba(var(--green-rgb), 0.3);
}

.mine-tile.boom {
    background: rgba(var(--danger-rgb), 0.35);
}

.blackjack-table {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;
}

.hand-zone {
    min-height: 170px;
    padding: 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.13);
    border-radius: 8px;
    background: rgba(28, 20, 10, 0.5);
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.8rem;
}

.card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 82px;
    height: 116px;
    padding: 0.5rem;
    border-radius: 8px;
    color: var(--panel-deep);
    background: var(--white);
    box-shadow: 0 14px 30px rgba(var(--black-rgb), 0.24);
}

.card.red-card {
    color: var(--rose-deep);
}

.card strong {
    font-size: 1.15rem;
}

.card .suit {
    place-self: center;
    font-size: 2rem;
}

.wallet-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
    gap: 1rem;
}

.embedded-panel {
    margin-top: 1rem;
    box-shadow: none;
}

.compliance-list {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
    line-height: 1.55;
}

.legal-copy {
    max-width: 880px;
    margin: 0 auto;
    line-height: 1.75;
}

.legal-copy h2 {
    margin-top: 1.4rem;
}

.ledger-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 8px;
}

.ledger-table th,
.ledger-table td {
    padding: 0.8rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.ledger-table th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.amount-positive {
    color: var(--green);
    font-weight: 850;
}

.amount-negative {
    color: var(--rose);
    font-weight: 850;
}

@media (max-width: 860px) {
    .topbar {
        grid-template-columns: 1fr;
    }

    .nav,
    .account-strip {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .app-hero,
    .auth-wrap,
    .game-layout,
    .wallet-grid {
        grid-template-columns: 1fr;
    }

    .game-stage {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .lobby-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .page-shell {
        width: min(100% - 1rem, 1180px);
        padding-top: 1rem;
    }

    .brand span {
        white-space: normal;
    }

    .lobby-grid {
        grid-template-columns: 1fr;
    }

    .auth-art {
        min-height: 260px;
    }

    .stat {
        min-width: 100%;
    }
}

/* Structural polish pass */
:root {
    --shell: min(1240px, calc(100% - clamp(1rem, 4vw, 3rem)));
    --radius: 8px;
    --space-1: 0.35rem;
    --space-2: 0.55rem;
    --space-3: 0.8rem;
    --space-4: 1rem;
    --space-5: 1.35rem;
    --space-6: 1.8rem;
    --space-7: 2.4rem;
    --surface: rgba(24, 17, 10, 0.86);
    --surface-strong: rgba(var(--panel-deep-rgb), 0.96);
    --line-soft: rgba(var(--white-rgb), 0.09);
    --shadow-soft: 0 18px 55px rgba(var(--black-rgb), 0.28);
    --shadow-strong: 0 28px 90px rgba(var(--black-rgb), 0.46);
}

body {
    background:
        radial-gradient(circle at 16% 0%, rgba(var(--teal-rgb), 0.14), transparent 24rem),
        radial-gradient(circle at 88% 8%, rgba(var(--gold-rgb), 0.08), transparent 24rem),
        radial-gradient(circle at 70% 78%, rgba(var(--rose-rgb), 0.09), transparent 28rem),
        linear-gradient(160deg, #0c0905 0%, #130d07 44%, #17110b 100%);
}

.ambient {
    opacity: 0.75;
    background-size: 42px 42px;
}

.topbar {
    display: flex;
    justify-content: center;
    padding: 0;
    border-bottom-color: rgba(var(--white-rgb), 0.08);
    background: rgba(12, 9, 5, 0.78);
}

.topbar-inner {
    width: var(--shell);
    min-height: 74px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
}

.brand {
    gap: var(--space-3);
    font-size: 1rem;
    letter-spacing: 0;
}

.brand img {
    width: 34px;
    height: 34px;
}

.nav {
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: var(--radius);
    background: rgba(var(--white-rgb), 0.035);
    justify-self: center;
}

.nav a,
.game-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.55rem 0.78rem;
    border-radius: 7px;
    font-size: 0.9rem;
    font-weight: 750;
}

.nav a.active,
.nav a:hover,
.game-tabs a.active,
.game-tabs a:hover {
    background: rgba(var(--white-rgb), 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--white-rgb), 0.04);
}

.account-strip {
    min-width: 0;
}

.guest-actions,
.auth-actions {
    gap: var(--space-2);
}

.balance-pill {
    min-width: 132px;
    padding: 0.48rem 0.72rem;
    border-color: rgba(var(--gold-rgb), 0.28);
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.04);
}

.page-shell,
.site-footer {
    width: var(--shell);
}

.page-shell {
    padding: clamp(1.2rem, 3vw, 2.4rem) 0 clamp(2.8rem, 6vw, 5rem);
}

.site-footer {
    display: grid;
    gap: 0.35rem;
    padding: var(--space-6) 0 var(--space-7);
    border-top: 1px solid rgba(var(--white-rgb), 0.07);
    line-height: 1.55;
}

.site-footer p {
    margin: 0;
}

h1 {
    font-size: clamp(2.15rem, 4.8vw, 4.8rem);
    line-height: 1;
}

h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.1;
}

h3 {
    font-size: 1.08rem;
    line-height: 1.2;
}

.eyebrow {
    margin-bottom: var(--space-2);
    color: #f2d488;
    font-size: 0.74rem;
}

.lead {
    margin-top: var(--space-4);
    font-size: 1rem;
    line-height: 1.62;
}

.hero-copy,
.auth-panel,
.game-panel,
.wallet-panel,
.mini-panel,
.status-board,
.auth-art,
.game-card {
    border-radius: var(--radius);
    border-color: var(--line-soft);
}

.app-hero {
    min-height: clamp(430px, 52vw, 590px);
    gap: var(--space-5);
}

.casino-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 392px);
}

.hero-copy {
    padding: clamp(1.5rem, 4vw, 3.4rem);
    box-shadow: var(--shadow-strong);
}

.hero-copy > * {
    position: relative;
    z-index: 1;
}

.hero-copy::before {
    inset: clamp(0.7rem, 1.5vw, 1rem);
    border-color: rgba(var(--gold-rgb), 0.16);
}

.cta-row,
.form-actions {
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.icon-text,
.button,
.chip-button {
    min-height: 2.65rem;
    padding: 0.72rem 1rem;
    border-radius: var(--radius);
    font-size: 0.92rem;
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.05);
}

.button.primary,
.primary {
    box-shadow: 0 12px 30px rgba(var(--gold-rgb), 0.14);
}

.trust-strip {
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.trust-strip span,
.provider,
.table-badge {
    min-height: 1.8rem;
    padding: 0.35rem 0.58rem;
    font-size: 0.72rem;
}

.status-board {
    padding: var(--space-5);
    gap: var(--space-5);
    box-shadow: var(--shadow-soft);
}

.jackpot {
    padding: var(--space-5);
}

.jackpot strong {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
}

.market-grid {
    gap: var(--space-3);
}

.market-grid div {
    min-height: 5rem;
    padding: var(--space-4);
}

.lobby-band {
    margin: var(--space-7) 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(var(--white-rgb), 0.07);
}

.lobby-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: 0;
}

.game-card {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    min-height: 238px;
    padding: var(--space-5);
    box-shadow: var(--shadow-soft);
}

.game-card h3 {
    margin-top: auto;
    font-size: 1.35rem;
}

.game-card p {
    max-width: 19rem;
    min-height: 3.1rem;
    margin: var(--space-2) 0 var(--space-5);
}

.game-card strong {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 2rem;
}

.game-card::after {
    right: 0.9rem;
    bottom: -0.25rem;
    font-size: 6.2rem;
}

.provider {
    width: fit-content;
    margin-bottom: var(--space-5);
}

.game-tabs {
    width: 100%;
    margin: 0 0 var(--space-4);
    padding: 0.3rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: var(--radius);
    background: rgba(var(--white-rgb), 0.035);
}

.game-tabs a {
    flex: 1 1 8.5rem;
    justify-content: center;
    text-align: center;
}

.game-panel {
    box-shadow: var(--shadow-strong);
    background: linear-gradient(145deg, rgba(24, 17, 10, 0.98), rgba(33, 23, 13, 0.9));
}

.game-layout {
    grid-template-columns: minmax(308px, 360px) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    min-height: 620px;
}

.game-controls {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: rgba(var(--ink-rgb), 0.35);
}

.game-controls h1 {
    margin-bottom: var(--space-2);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.game-controls .button[type="submit"] {
    width: 100%;
    margin-top: var(--space-2);
}

.game-controls::after {
    top: var(--space-5);
    right: var(--space-5);
}

.game-stage {
    display: grid;
    place-items: center;
    min-height: 620px;
    padding: clamp(1.2rem, 3vw, 2rem);
    border-left-color: rgba(var(--white-rgb), 0.08);
}

.result-box {
    margin-top: auto;
    padding: var(--space-4);
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-2);
}

.stat {
    min-width: 0;
    padding: var(--space-3);
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-4);
}

.choice-grid label {
    flex: initial;
}

.choice-grid span {
    min-height: 2.55rem;
    font-size: 0.9rem;
}

.field {
    margin-bottom: var(--space-4);
}

.field span,
.option-label {
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

input,
select {
    min-height: 2.8rem;
    padding: 0.68rem 0.78rem;
    border-color: rgba(var(--white-rgb), 0.1);
    background: rgba(11, 8, 5, 0.58);
}

.auth-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
    gap: var(--space-5);
    align-items: stretch;
}

.auth-art {
    min-height: 560px;
}

.auth-panel,
.wallet-panel,
.mini-panel {
    padding: var(--space-6);
}

.auth-step {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.auth-step .field {
    margin-bottom: 0;
}

.auth-step .field-wide,
.auth-step .check-row,
.auth-step .form-actions {
    grid-column: 1 / -1;
}

.auth-step[hidden] {
    display: none;
}

.auth-step {
    animation: auth-step-in 0.22s ease;
}

@keyframes auth-step-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ---- Branded auth side panel ---- */
.auth-art {
    display: flex;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    padding: clamp(1.6rem, 3vw, 2.6rem);
    background:
        linear-gradient(155deg, rgba(var(--teal-rgb), 0.18), transparent 46%),
        radial-gradient(circle at 86% 8%, rgba(var(--gold-rgb), 0.16), transparent 42%),
        linear-gradient(180deg, rgba(var(--ink-rgb), 0.32), rgba(11, 8, 5, 0.93)),
        url('/assets/img/table-pattern.svg') center / cover;
}

.auth-brand {
    display: flex;
    position: relative;
    z-index: 1;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-6);
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--text);
}

.auth-logo img {
    filter: drop-shadow(0 0 14px rgba(var(--teal-rgb), 0.5));
}

.auth-tagline {
    margin: 0.2rem 0 0;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.auth-sub {
    margin: var(--space-3) 0 0;
    max-width: 34ch;
    color: var(--muted);
    line-height: 1.6;
}

.auth-badges {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-badges li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.auth-badges li::before {
    content: "\2713";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 800;
    color: #1c1308;
    background: linear-gradient(135deg, var(--teal), var(--green));
    box-shadow: 0 0 0 1px rgba(var(--teal-rgb), 0.35), 0 0 16px rgba(var(--teal-rgb), 0.3);
}

/* ---- Auth form side ---- */
.auth-panel-sub {
    margin: 0 0 var(--space-5);
    color: var(--muted);
    line-height: 1.55;
}

.field em {
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    color: var(--muted);
}

.auth-submit {
    width: 100%;
}

.auth-actions-split {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
}

.auth-alt {
    margin: var(--space-5) 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.auth-alt a {
    color: var(--teal);
    font-weight: 600;
}

/* ---- Step indicator ---- */
.auth-steps {
    display: flex;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.auth-steps li {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(var(--white-rgb), 0.03);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.auth-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(var(--white-rgb), 0.08);
    font-size: 0.8rem;
    font-weight: 800;
}

.auth-steps li.is-active {
    border-color: rgba(var(--teal-rgb), 0.5);
    background: rgba(var(--teal-rgb), 0.1);
    color: var(--text);
}

.auth-steps li.is-active span {
    background: linear-gradient(135deg, var(--teal), var(--green));
    color: #1c1308;
}

@media (max-width: 1040px) {
    .auth-art {
        min-height: 220px;
    }
}

.wallet-grid {
    grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.wallet-panel {
    overflow: auto;
    box-shadow: var(--shadow-soft);
}

.wallet-panel:nth-child(n + 3) {
    grid-column: 1 / -1;
}

.wallet-panel .lead {
    max-width: 44rem;
}

.ledger-table {
    min-width: 720px;
}

.ledger-table th,
.ledger-table td {
    padding: 0.82rem 0.9rem;
    white-space: nowrap;
}

.embedded-panel {
    padding: var(--space-4);
}

.dice-face {
    margin: 0 auto;
}

.mines-board {
    width: min(520px, 100%);
    gap: var(--space-2);
    margin: 0 auto;
}

.blackjack-table {
    width: min(760px, 100%);
}

.hand-zone {
    padding: var(--space-5);
}

.legal-copy {
    padding: var(--space-7);
}

@media (max-width: 1040px) {
    .topbar-inner {
        grid-template-columns: 1fr auto;
        gap: var(--space-3);
        padding: var(--space-3) 0;
    }

    .nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        overflow-x: auto;
    }

    .account-strip {
        justify-self: end;
    }

    .casino-hero,
    .app-hero,
    .auth-wrap,
    .wallet-grid {
        grid-template-columns: 1fr;
    }

    .game-card {
        grid-column: span 6;
    }

    .wallet-panel:nth-child(n + 3) {
        grid-column: auto;
    }
}

@media (max-width: 820px) {
    .page-shell {
        padding-top: var(--space-5);
    }

    .game-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .game-stage {
        min-height: 460px;
        border-left: 0;
        border-top: 1px solid rgba(var(--white-rgb), 0.08);
    }

    .result-box {
        margin-top: var(--space-5);
    }

    .auth-step {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    :root {
        --shell: min(100% - 1rem, 1240px);
    }

    .topbar-inner {
        grid-template-columns: 1fr;
    }

    .brand,
    .account-strip {
        justify-self: start;
    }

    .guest-actions,
    .auth-actions {
        flex-wrap: wrap;
    }

    .nav {
        justify-content: flex-start;
    }

    .hero-copy,
    .auth-panel,
    .wallet-panel,
    .mini-panel,
    .status-board,
    .legal-copy {
        padding: var(--space-5);
    }

    .lobby-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .game-card {
        grid-column: 1 / -1;
        min-height: 210px;
    }

    .market-grid,
    .stat-row,
    .choice-grid {
        grid-template-columns: 1fr;
    }

    .game-stage {
        min-height: 390px;
    }

    .crash-graph {
        min-height: 320px;
    }

    .ledger-table {
        min-width: 640px;
    }
}

/* Wide casino app shell */
:root {
    --shell: 100%;
    --rail-width: 224px;
    --topbar-height: 72px;
    --content-gap: 18px;
    --text: #f6f1e6;
    --muted: #ab9a73;
}

body {
    font-weight: 400;
}

body:not(.session-ready) [data-guest-only],
body:not(.session-ready) [data-auth-only] {
    display: none !important;
}

.topbar {
    min-height: var(--topbar-height);
}

.topbar-inner {
    display: grid;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: var(--topbar-height);
    padding: 0 var(--content-gap);
    grid-template-columns: minmax(190px, 0.8fr) minmax(180px, auto) minmax(260px, 0.8fr);
}

.brand {
    font-weight: 650;
}

.brand img {
    width: 32px;
    height: 32px;
}

.nav {
    justify-self: start;
    margin-left: 1.5rem;
    background: rgba(var(--white-rgb), 0.028);
}

.nav a,
.game-tabs a {
    font-weight: 560;
}

.account-strip {
    justify-self: end;
}

.topbar-balance {
    justify-self: center;
}

.level-badge {
    white-space: nowrap;
}

.account-menu-wrap,
.account-menu {
    position: relative;
}

.account-menu {
    min-width: 0;
}

.account-menu summary {
    list-style: none;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 2.75rem;
    min-width: 9.25rem;
    padding: 0.68rem 0.86rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: var(--radius);
    color: var(--text);
    font-weight: 600;
    background: rgba(var(--white-rgb), 0.055);
    cursor: pointer;
}

.menu-arrow {
    width: 0.48rem;
    height: 0.48rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg);
    opacity: 0.72;
}

.account-menu[open] .menu-arrow {
    transform: translateY(0.12rem) rotate(225deg);
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 220px;
    padding: 0.4rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: var(--radius);
    background: rgba(22, 16, 9, 0.98);
    box-shadow: 0 24px 80px rgba(var(--black-rgb), 0.48);
}

.account-dropdown a,
.account-dropdown button {
    display: flex;
    align-items: center;
    min-height: 2.45rem;
    width: 100%;
    padding: 0.62rem 0.72rem;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    font: inherit;
    font-weight: 520;
    text-align: left;
    background: transparent;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
    color: var(--text);
    background: rgba(var(--white-rgb), 0.075);
}

.balance-pill {
    min-width: 140px;
    font-weight: 500;
}

.balance-pill strong {
    font-weight: 650;
}

.page-shell {
    width: 100%;
    padding: var(--content-gap) 0 clamp(2rem, 5vw, 4rem);
}

.site-footer {
    display: block;
    width: 100%;
    margin: 0;
    padding: clamp(1.8rem, 4vw, 2.6rem) var(--content-gap) var(--content-gap);
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(216, 201, 168, 0.84);
    font-size: 0.9rem;
    line-height: 1.55;
    background:
        linear-gradient(180deg, rgba(18, 13, 6, 0.06), rgba(18, 13, 6, 0.68)),
        rgba(var(--ink-rgb), 0.18);
}

.site-footer a {
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(280px, 0.75fr) minmax(280px, 0.95fr);
    gap: clamp(1rem, 2.4vw, 2rem);
    align-items: start;
}

.footer-brand,
.footer-group,
.footer-safety {
    min-width: 0;
}

.footer-brand {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.footer-logo {
    display: inline-flex;
    width: fit-content;
}

.footer-logo img {
    width: 152px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(var(--gold-rgb), 0.24));
}

.footer-brand p,
.footer-safety p,
.footer-bottom p {
    margin: 0;
}

.footer-brand p {
    max-width: 36rem;
    color: rgba(233, 221, 196, 0.78);
}

.footer-highlights,
.footer-safety-actions,
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.footer-highlights a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 999px;
    color: #f0dca0;
    background: rgba(var(--white-rgb), 0.035);
    font-size: 0.78rem;
    font-weight: 760;
}

.footer-highlights a:hover,
.footer-safety-actions a:hover {
    color: var(--text);
    border-color: rgba(var(--gold-rgb), 0.48);
    background: rgba(var(--gold-rgb), 0.1);
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.9rem, 2vw, 1.35rem);
}

.footer-group {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.footer-group h2 {
    margin: 0;
    color: #f0dca0;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.footer-group ul {
    display: grid;
    gap: 0.42rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-group a {
    color: rgba(233, 221, 196, 0.78);
    font-weight: 520;
}

.footer-group a:hover,
.footer-legal a:hover {
    color: var(--gold);
}

.footer-safety {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(var(--gold-rgb), 0.16);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(var(--panel-deep-rgb), 0.88), rgba(11, 8, 5, 0.74)),
        rgba(var(--white-rgb), 0.035);
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.035);
}

.footer-safety span {
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.footer-safety p {
    color: rgba(233, 221, 196, 0.78);
}

.footer-safety-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.5rem 0.72rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 7px;
    color: var(--text);
    background: rgba(var(--white-rgb), 0.04);
    font-size: 0.82rem;
    font-weight: 750;
}

.footer-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.85rem 1.1rem;
    align-items: center;
    margin-top: clamp(1.25rem, 3vw, 2rem);
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--white-rgb), 0.07);
    color: rgba(216, 201, 168, 0.7);
    font-size: 0.82rem;
}

.footer-bottom strong {
    color: var(--gold);
}

.footer-legal {
    justify-content: center;
}

.footer-legal a {
    color: rgba(233, 221, 196, 0.72);
    font-weight: 650;
}

@media (max-width: 1120px) {
    .footer-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-brand {
        max-width: 46rem;
    }

    .footer-safety {
        max-width: 46rem;
    }
}

@media (max-width: 760px) {
    .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-bottom {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .footer-legal {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .site-footer {
        padding-top: 1.45rem;
    }

    .footer-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-highlights,
    .footer-safety-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-highlights a,
    .footer-safety-actions a {
        justify-content: center;
        text-align: center;
    }
}

.flash-slot {
    margin: 0 var(--content-gap) var(--content-gap);
}

.app-hero,
.lobby-band,
.lobby-grid,
.auth-wrap,
.wallet-grid,
.settings-layout,
.legal-copy,
.center-panel {
    margin-left: var(--content-gap);
    margin-right: var(--content-gap);
}

h1 {
    font-weight: 620;
    letter-spacing: 0;
}

h2,
h3 {
    font-weight: 590;
}

.eyebrow,
.field span,
.option-label,
.provider,
.trust-strip span,
.table-badge,
.ledger-table th,
.jackpot span,
.market-grid span {
    font-weight: 620;
}

.lead {
    font-weight: 400;
}

.button,
.icon-text,
.chip-button {
    font-weight: 610;
}

.hero-copy {
    min-height: 590px;
}

.casino-hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.33fr);
}

.status-board {
    min-height: 590px;
}

.lobby-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.game-card {
    grid-column: span 2;
}

.page-shell {
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    gap: 0;
    padding: 0 0 0rem;
}

.flash-slot {
    grid-column: 1 / -1;
    margin: var(--content-gap);
}

.flash-slot.notice {
    position: fixed;
    top: calc(var(--topbar-height) + 0.72rem);
    left: 50%;
    z-index: 29;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
    width: min(520px, calc(100vw - 1.5rem));
    min-height: 3.65rem;
    margin: 0;
    padding: 0.78rem 0.95rem;
    overflow: hidden;
    border: 1px solid rgba(var(--white-rgb), 0.11);
    border-radius: 8px;
    color: var(--text);
    background:
        linear-gradient(145deg, rgba(34, 24, 13, 0.96), rgba(14, 10, 6, 0.94)),
        rgba(var(--ink-rgb), 0.92);
    box-shadow: 0 20px 54px rgba(var(--black-rgb), 0.36), 0 0 0 1px rgba(var(--white-rgb), 0.035);
    transform: translateX(-50%);
    backdrop-filter: blur(14px);
}

.flash-slot.notice::before {
    content: "";
    width: 0.78rem;
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--teal);
    box-shadow: 0 0 0 0.36rem rgba(var(--teal-rgb), 0.12), 0 0 24px rgba(var(--teal-rgb), 0.42);
}

.flash-slot.notice::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--teal);
}

.flash-slot.notice.success {
    border-color: rgba(var(--green-rgb), 0.35);
}

.flash-slot.notice.success::before,
.flash-slot.notice.success::after {
    background: var(--green);
}

.flash-slot.notice.success::before {
    box-shadow: 0 0 0 0.36rem rgba(var(--green-rgb), 0.12), 0 0 24px rgba(var(--green-rgb), 0.38);
}

.flash-slot.notice.error {
    border-color: rgba(var(--rose-rgb), 0.4);
}

.flash-slot.notice.error::before,
.flash-slot.notice.error::after {
    background: var(--rose);
}

.flash-slot.notice.error::before {
    box-shadow: 0 0 0 0.36rem rgba(var(--rose-rgb), 0.13), 0 0 24px rgba(var(--rose-rgb), 0.38);
}

.flash-slot[hidden] {
    display: none !important;
}

.page-content {
    min-width: 0;
}

.game-sidebar {
    position: sticky;
    top: var(--topbar-height);
    align-self: start;
    height: calc(100vh - var(--topbar-height));
    padding: 8px;
    border-right: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(11, 8, 5, 0.62);
}

.rail-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    margin-bottom: 0.9rem;
    padding: 0.25rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.035);
}

.rail-tab {
    min-height: 2.35rem;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    font-weight: 620;
    background: transparent;
}

.rail-tab:hover,
.rail-tab.is-active {
    color: var(--text);
    background: rgba(var(--white-rgb), 0.08);
}

.rail-tab.is-active[data-rail-tab="games"] {
    border: 1px solid rgba(var(--white-rgb), 0.08);
}

.rail-tab.is-active[data-rail-tab="chat"] {
    color: #0d0a06;
    background: linear-gradient(135deg, var(--teal), var(--gold));
}

.rail-panel {
    min-height: 0;
}

.game-sidebar-title {
    padding: 0 0.75rem 0.75rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 620;
    text-transform: uppercase;
}

.chat-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100vh - var(--topbar-height) - (var(--content-gap) * 2) - 3.6rem);
    min-height: 460px;
}

.chat-feed {
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    min-height: 0;
    padding: 0 0 0.5rem;
    overflow: auto;
}

.chat-message {
    display: grid;
    gap: 0.24rem;
    padding: 0.42rem 0.48rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 6px;
    background: rgba(var(--white-rgb), 0.035);
}

.chat-message-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.32rem;
    align-items: center;
}

.chat-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    min-height: 1.12rem;
    padding: 0.1rem 0.24rem;
    border: 1px solid var(--level-border, rgba(168, 150, 111, 0.32));
    border-radius: 4px;
    color: var(--level-accent, #a8966f);
    font-size: 0.62rem;
    font-weight: 760;
    background: linear-gradient(135deg, var(--level-surface, rgba(168, 150, 111, 0.12)), rgba(var(--white-rgb), 0.035));
    box-shadow: 0 0 14px var(--level-shadow, rgba(168, 150, 111, 0.12));
}

.chat-username {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-time {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 520;
}

.chat-message-body {
    color: #f4e8c4;
    font-size: 0.8rem;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

.chat-form {
    display: grid;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
}

.chat-form textarea {
    min-height: 2.65rem;
    max-height: 5rem;
    padding: 0.56rem 0.65rem;
    font-size: 0.82rem;
    line-height: 1.28;
}

.chat-form .button {
    min-height: 2.35rem;
    padding: 0.55rem 0.75rem;
}

.game-tabs {
    display: grid;
    width: 100%;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.game-tabs a {
    justify-content: flex-start;
    gap: 0.7rem;
    min-height: 2.65rem;
    padding: 0.68rem 0.75rem;
    color: var(--muted);
    border-radius: var(--radius);
}

.game-tabs a.active,
.game-tabs a:hover {
    color: var(--text);
    background: rgba(var(--white-rgb), 0.08);
}

/* Minimalist per-game glyphs — inherit the link colour via currentColor. */
.game-tab-icon {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    opacity: 0.78;
    transition: opacity 140ms ease;
}

.game-tabs a.active .game-tab-icon,
.game-tabs a:hover .game-tab-icon {
    opacity: 1;
}

body[data-active="game"] .game-panel {
    margin: var(--content-gap) var(--content-gap) 0;
}

body[data-active="game"] .site-footer {
    display: none;
}

.game-layout {
    min-height: calc(100vh - var(--topbar-height) - (var(--content-gap) * 2));
    grid-template-columns: minmax(320px, 370px) minmax(0, 1fr);
}

.game-stage {
    min-height: calc(100vh - var(--topbar-height) - (var(--content-gap) * 2));
}

.game-controls h1 {
    font-weight: 610;
}

.game-controls::after {
    font-weight: 620;
}

.result-title {
    font-weight: 620;
}

.stat strong,
.game-card strong,
.jackpot strong,
.market-grid strong {
    font-weight: 650;
}

.auth-wrap {
    grid-template-columns: minmax(420px, 0.9fr) minmax(360px, 0.45fr);
}

.wallet-grid {
    grid-template-columns: minmax(340px, 0.45fr) minmax(380px, 0.55fr);
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

@media (min-width: 1600px) {
    :root {
        --rail-width: 248px;
        --content-gap: 22px;
    }

    .game-layout {
        grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
    }
}

@media (max-width: 1040px) {
    .topbar-inner {
        grid-template-columns: auto minmax(140px, 1fr) auto;
    }

    .nav {
        margin-left: 0;
    }

    .casino-hero,
    .auth-wrap,
    .wallet-grid {
        grid-template-columns: 1fr;
    }

    .status-board,
    .hero-copy {
        min-height: auto;
    }

    .game-card {
        grid-column: span 3;
    }
}

@media (max-width: 820px) {
    .page-shell {
        display: block;
    }

    .game-sidebar {
        position: sticky;
        top: var(--topbar-height);
        z-index: 8;
        height: auto;
        padding: 0.55rem var(--content-gap);
        border-right: 0;
        border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
        overflow: visible;
    }

    .game-sidebar-title {
        display: none;
    }

    .game-tabs {
        display: flex;
        flex-wrap: nowrap;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .game-tabs a {
        flex: 0 0 auto;
        min-width: 7rem;
        justify-content: center;
    }

    .game-layout,
    .game-stage {
        min-height: auto;
    }

    .chat-panel {
        height: 360px;
        min-height: 360px;
    }

    body[data-active="game"] .game-panel {
        margin: var(--content-gap);
    }
}

@media (max-width: 620px) {
    :root {
        --content-gap: 10px;
    }

    .topbar-inner {
        grid-template-columns: 1fr;
        padding: 0 var(--content-gap);
    }

    .topbar-balance {
        justify-self: start;
    }

    .account-dropdown {
        left: 0;
        right: auto;
    }

    .lobby-grid {
        grid-template-columns: 1fr;
    }

    .game-card {
        grid-column: auto;
    }

    .auth-actions {
        width: 100%;
    }
}

/* Typography and navigation polish */
body {
    font-family: "Segoe UI", Roboto, Arial, ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select {
    font-weight: 400;
}

strong {
    font-weight: 650;
}

.brand {
    font-weight: 700;
}

.nav a,
.game-tabs a,
.account-trigger,
.account-dropdown a,
.account-dropdown button {
    font-weight: 560;
}

.button,
.icon-text,
.chip-button {
    font-weight: 600;
}

.eyebrow,
.field span,
.option-label,
.provider,
.table-badge,
.trust-strip span,
.ledger-table th,
.game-sidebar-title {
    font-weight: 600;
}

h1 {
    font-weight: 620;
    line-height: 1.02;
}

h2,
h3,
.result-title,
.game-controls::after {
    font-weight: 600;
}

.lead,
.hint,
.game-card p,
.site-footer {
    font-weight: 400;
}

.account-trigger {
    min-width: 8.25rem;
    min-height: 2.7rem;
}

.account-dropdown a,
.account-dropdown button {
    min-height: 2.35rem;
}

.blackjack-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.75rem 0 1rem;
}

.blackjack-actions .button {
    width: 100%;
    min-width: 0;
}

.blackjack-table {
    position: relative;
    isolation: isolate;
    display: grid;
    width: min(880px, 100%);
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgba(var(--teal-rgb), 0.18);
    border-radius: 8px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(var(--teal-rgb), 0.2), transparent 26rem),
        linear-gradient(145deg, rgba(28, 20, 10, 0.92), rgba(13, 10, 6, 0.96));
    box-shadow: inset 0 0 90px rgba(var(--black-rgb), 0.38), var(--shadow-soft);
}

.blackjack-table::before {
    content: "";
    position: absolute;
    inset: 2rem;
    z-index: -1;
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 50%;
    box-shadow: inset 0 0 44px rgba(var(--gold-rgb), 0.04);
}

.blackjack-felt {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    min-height: inherit;
    padding: 2rem;
}

.blackjack-deck {
    position: absolute;
    top: 50%;
    right: 2rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 4.9rem;
    aspect-ratio: 0.72;
    border: 1px solid rgba(var(--gold-rgb), 0.32);
    border-radius: 8px;
    color: var(--gold);
    font-weight: 700;
    background:
        repeating-linear-gradient(135deg, rgba(var(--white-rgb), 0.08) 0 7px, transparent 7px 14px),
        linear-gradient(145deg, rgba(var(--ink-rgb), 0.98), rgba(43, 31, 17, 0.94));
    box-shadow: -0.35rem 0.35rem 0 rgba(var(--white-rgb), 0.08), 0 18px 40px rgba(var(--black-rgb), 0.28);
    transform: translateY(-50%) rotate(4deg);
}

.hand-zone {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1rem;
    min-height: 220px;
    padding: 1rem 7rem 1rem 1rem;
}

.dealer-zone {
    grid-row: 1;
    align-self: start;
}

.player-zone {
    grid-row: 3;
    align-self: end;
}

.blackjack-table .hand-zone h3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 2.25rem;
    min-width: 10rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(var(--ink-rgb), 0.44);
}

.blackjack-table .hand-zone h3 strong {
    color: var(--text);
}

.blackjack-table .cards {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 9.5rem;
    max-width: min(100%, 34rem);
    margin: 0 auto;
    padding: 0.4rem;
}

.blackjack-table .card {
    --card-fan: 0;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    flex: 0 0 5.8rem;
    width: 5.8rem;
    aspect-ratio: 0.72;
    margin-left: -0.55rem;
    padding: 0.55rem;
    border: 1px solid rgba(var(--ink-rgb), 0.18);
    border-radius: 8px;
    color: #181106;
    background: linear-gradient(145deg, #fffaf0, #f4e8c4);
    box-shadow: 0 16px 34px rgba(var(--black-rgb), 0.24);
    transform: translateY(calc(var(--card-fan) * 0.16rem)) rotate(calc(var(--card-fan) * 2deg));
    transform-style: preserve-3d;
}

.blackjack-table .card.is-dealing {
    animation: deal-card 460ms cubic-bezier(.18, .86, .22, 1) both;
    animation-delay: calc(var(--deal-order, 0) * 165ms);
}

.blackjack-table .card.is-flipping {
    animation: flip-card-face 620ms cubic-bezier(.18, .86, .22, 1) both;
    animation-delay: calc(var(--deal-order, 0) * 165ms);
}

.blackjack-table .card.is-flipping::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(var(--teal-rgb), 0.28);
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(var(--teal-rgb), 0.32), rgba(var(--ink-rgb), 0.96)),
        repeating-linear-gradient(45deg, rgba(var(--white-rgb), 0.1) 0 6px, transparent 6px 12px);
    box-shadow: inset 0 0 24px rgba(var(--teal-rgb), 0.08);
    transform-origin: center;
    animation: flip-card-back 620ms cubic-bezier(.18, .86, .22, 1) both;
    animation-delay: calc(var(--deal-order, 0) * 165ms);
}

.blackjack-table .card:first-child {
    margin-left: 0;
}

.blackjack-table .dealer-zone .card {
    --deal-x: 13rem;
    --deal-y: 7rem;
}

.blackjack-table .player-zone .card {
    --deal-x: 13rem;
    --deal-y: -7rem;
}

.blackjack-table .card strong {
    font-size: 1rem;
    line-height: 1;
}

.blackjack-table .card strong:last-child {
    justify-self: end;
    align-self: end;
    transform: rotate(180deg);
}

.blackjack-table .suit {
    display: grid;
    place-items: center;
    font-size: 2.3rem;
}

.blackjack-table .red-card {
    color: var(--rose-deep);
}

.blackjack-table .card.card-back {
    color: #f4e8c4;
    border-color: rgba(var(--teal-rgb), 0.28);
    background:
        linear-gradient(135deg, rgba(var(--teal-rgb), 0.26), rgba(var(--ink-rgb), 0.92)),
        repeating-linear-gradient(45deg, rgba(var(--white-rgb), 0.09) 0 6px, transparent 6px 12px);
}

.blackjack-table .card.card-back .suit {
    color: var(--teal);
    font-size: 1rem;
    letter-spacing: 0;
}

@keyframes deal-card {
    0% {
        opacity: 0;
        transform: translate(var(--deal-x, 10rem), var(--deal-y, 0)) rotate(16deg) scale(0.72);
    }

    72% {
        opacity: 1;
        transform: translate(-0.25rem, 0.15rem) rotate(calc(var(--card-fan) * 2deg)) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: translateY(calc(var(--card-fan) * 0.16rem)) rotate(calc(var(--card-fan) * 2deg)) scale(1);
    }
}

@keyframes flip-card-face {
    0% {
        filter: brightness(0.88);
        transform: translateY(calc(var(--card-fan) * 0.16rem)) rotate(calc(var(--card-fan) * 2deg)) scale(0.98);
    }

    45% {
        filter: brightness(0.88);
        transform: translateY(calc(var(--card-fan) * 0.16rem)) rotate(calc(var(--card-fan) * 2deg)) scale(0.98);
    }

    100% {
        filter: brightness(1);
        transform: translateY(calc(var(--card-fan) * 0.16rem)) rotate(calc(var(--card-fan) * 2deg)) scale(1);
    }
}

@keyframes flip-card-back {
    0% {
        opacity: 1;
        transform: rotateY(0);
    }

    45% {
        opacity: 1;
        transform: rotateY(0);
    }

    100% {
        opacity: 0;
        transform: perspective(34rem) rotateY(88deg);
    }
}

.button:disabled,
.chip-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
    transform: none;
}

.card.card-back {
    color: #f4e8c4;
    border-color: rgba(var(--teal-rgb), 0.28);
    background:
        linear-gradient(135deg, rgba(var(--teal-rgb), 0.26), rgba(var(--ink-rgb), 0.92)),
        repeating-linear-gradient(45deg, rgba(var(--white-rgb), 0.09) 0 6px, transparent 6px 12px);
}

.card.card-back .suit {
    color: var(--teal);
    font-size: 1rem;
    letter-spacing: 0;
}

@media (max-width: 620px) {
    .blackjack-actions {
        grid-template-columns: 1fr;
    }

    .blackjack-table {
        min-height: 500px;
    }

    .blackjack-felt {
        padding: 1rem;
    }

    .blackjack-deck {
        right: 0.8rem;
        width: 3.8rem;
    }

    .hand-zone {
        min-height: 180px;
        padding-right: 4.4rem;
    }

    .blackjack-table .card {
        flex-basis: 4.6rem;
        width: 4.6rem;
        margin-left: -0.75rem;
    }

    .blackjack-table .suit {
        font-size: 1.8rem;
    }
}

.crash-auto-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10.5rem, 0.88fr);
    gap: 0.55rem 0.6rem;
    align-items: stretch;
}

.crash-auto-grid .field {
    gap: 0.32rem;
    min-width: 0;
    margin: 0;
    transition: opacity 160ms ease;
}

.crash-auto-grid input {
    min-height: 2.62rem;
}

.crash-auto-grid[data-cashout="on"] .crash-auto-field--cashout,
.crash-auto-grid[data-autobet="on"] .crash-auto-field--autobet {
    opacity: 0.45;
}

.crash-auto-toggle {
    width: 100%;
    min-width: 0;
    min-height: 3.72rem;
    padding: 0.5rem 0.72rem;
}

.crash-auto-toggle .auto-toggle-state {
    white-space: normal;
    font-size: 0.9rem;
    line-height: 1.16;
}

.auto-cashout-input {
    position: relative;
    display: flex;
    align-items: center;
}

.auto-cashout-input input {
    width: 100%;
    padding-right: 1.9rem;
}

.auto-cashout-suffix {
    position: absolute;
    right: 0.85rem;
    color: var(--muted);
    font-weight: 650;
    pointer-events: none;
}

.auto-bet-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.auto-bet-control .field {
    margin-bottom: 0;
}

.plinko-auto-label {
    flex: 0 0 5rem;
    margin-bottom: 0;
}

.auto-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.32rem;
    min-height: 3.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 10px;
    color: var(--text);
    text-align: left;
    background: rgba(var(--white-rgb), 0.045);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.auto-toggle-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 620;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color 160ms ease;
}

.auto-toggle-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
}

.auto-toggle-state::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: var(--muted);
    box-shadow: 0 0 0 3px rgba(var(--white-rgb), 0.06);
    transition: background 160ms ease, box-shadow 160ms ease;
}

.auto-toggle.is-on {
    color: #0d0a06;
    border-color: rgba(var(--teal-rgb), 0.6);
    background: linear-gradient(135deg, var(--gold), var(--teal));
    box-shadow: 0 0 26px rgba(var(--teal-rgb), 0.2);
}

.auto-toggle.is-on .auto-toggle-label {
    color: rgba(16, 12, 7, 0.72);
}

.auto-toggle.is-on .auto-toggle-state::before {
    background: #20160a;
    box-shadow: 0 0 0 3px rgba(30, 21, 11, 0.28);
}

.auto-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Provably-fair hash — compact, single line, click to copy. */
/* ============================================================
   CRASH — self-contained layout (mirrors the Plinko pattern):
   left control rail + full-bleed graph stage + bottom live-bets.
   ============================================================ */
.crash-page {
    overflow: hidden;
    border-color: rgba(var(--white-rgb), 0.08);
    background:
        radial-gradient(circle at 80% 8%, rgba(var(--gold-rgb), 0.07), transparent 22rem),
        radial-gradient(circle at 14% 28%, rgba(var(--teal-rgb), 0.08), transparent 24rem),
        linear-gradient(150deg, rgba(14, 10, 6, 0.97), rgba(23, 16, 9, 0.94));
}

/* Stacked layout — top stat strip, hero arena, control bar, roster below the fold.
   The header + console mirror the blackjack table shell so the games feel consistent. */
body[data-game="crash"] .game-panel.crash-page {
    margin-bottom: 10px;
}

.crash-shell {
    display: grid;
    gap: 0.78rem;
    padding: clamp(0.7rem, 1.4vw, 1.05rem);
}

/* TOP BAR — title on the left, live stat pills on the right (matches blackjack header). */
.crash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.crash-title-stack {
    flex: 1 1 240px;
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.crash-title-stack h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: 0.01em;
}

.crash-stat-strip,
.dice-stat-strip,
.spinner-stat-strip {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-width: 0;
}

.crash-stat-pill,
.dice-stat-pill,
.spinner-stat-pill {
    display: grid;
    gap: 0.3rem;
    align-content: center;
    min-height: 3.15rem;
    margin: 0;
    padding: 0.7rem 0.78rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    text-align: left;
    background: rgba(var(--white-rgb), 0.035);
}

.crash-stat-pill > span,
.dice-stat-pill > span,
.spinner-stat-pill > span {
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crash-stat-pill strong,
.dice-stat-pill strong,
.spinner-stat-pill strong {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Hash keeps the global <code> inset box (gold text, border, dark fill) like blackjack.
   Full hash stays readable: one line when there's room, wraps (never truncates) when tight. */
.crash-stat-pill code,
.dice-stat-pill code,
.spinner-stat-pill code {
    display: block;
    word-break: break-all;
    font-size: 0.78rem;
}

/* CONTROL BAR — auto-bet (left), wager + actions (center), status (right). */
.crash-console {
    display: grid;
    grid-template-columns: minmax(360px, 0.96fr) minmax(330px, 1.28fr) minmax(240px, 0.78fr);
    gap: 0.7rem;
    align-items: stretch;
}

.crash-autobet-card,
.crash-wager-card,
.crash-result-box {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    min-height: 9.7rem;
    margin: 0;
    padding: 0.8rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.035);
}

.crash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.crash-card-head span {
    display: block;
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 780;
    text-transform: uppercase;
}

.crash-card-head strong {
    color: rgba(233, 221, 196, 0.82);
    font-size: 0.86rem;
}

.crash-wager-card .field,
.crash-wager-card .quick-bet-buttons,
.crash-autobet-card .crash-auto-grid {
    margin: 0;
}

.crash-autobet-card .crash-auto-grid {
    flex: 1;
    align-content: center;
}

/* Crash actions stay pinned to the bottom of the center island. */
.crash-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.55rem;
    margin: 0;
    margin-top: auto;
}

.crash-result-box {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    place-self: stretch;
    min-height: 9.7rem;
    height: 100%;
    margin-top: 0;
}

.crash-result-box .result-title {
    margin-bottom: 0;
}

.crash-result-box .stat-row {
    align-self: start;
    grid-auto-rows: minmax(4.25rem, auto);
    height: auto;
    margin-top: 0;
}

.crash-result-box .stat {
    display: grid;
    align-content: center;
    min-height: 4.25rem;
}

.crash-bet-button,
.crash-cashout-button {
    width: 100%;
    min-height: 3rem;
    font-size: 1.02rem;
}

.crash-bet-button:disabled,
.crash-cashout-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

/* A disabled bet button (e.g. "Betting Closed" while a round is in flight) should
   read as inactive — drop the bright gold primary fill/sheen for a muted look. */
.crash-bet-button:disabled {
    background: rgba(var(--white-rgb), 0.05);
    color: var(--muted);
    box-shadow: none;
    text-shadow: none;
    opacity: 0.8;
}

.crash-bet-button:disabled::after {
    display: none;
}

/* Provably-fair hash — doubles as the header hash pill; click to copy.
   Sizes to the hash itself (no stretched-out wasted width). */
.crash-fair,
.dice-fair,
.spinner-fair {
    flex: 0 1 auto;
    position: relative;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.crash-fair:hover,
.dice-fair:hover,
.spinner-fair:hover {
    border-color: rgba(var(--gold-rgb), 0.4);
    background: rgba(var(--gold-rgb), 0.06);
}

.crash-fair .crash-fair-copied,
.dice-fair .dice-fair-copied,
.spinner-fair .spinner-fair-copied {
    position: absolute;
    top: -0.72rem;
    right: 0.4rem;
    padding: 0.12rem 0.42rem;
    border-radius: 6px;
    color: #0f0b06;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
    background: var(--gold);
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.crash-fair.is-copied .crash-fair-copied,
.dice-fair.is-copied .dice-fair-copied,
.spinner-fair.is-copied .spinner-fair-copied {
    opacity: 1;
    transform: translateY(0);
}

/* History strip — a thin row of recent crash points across the top of the graph. */
.crash-history {
    position: absolute;
    top: 0.85rem;
    left: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow: hidden;
    pointer-events: none;
    mask-image: linear-gradient(to left, transparent, var(--black) 3rem);
    -webkit-mask-image: linear-gradient(to left, transparent, var(--black) 3rem);
}

.crash-history-pill,
.crash-history-empty {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(var(--ink-rgb), 0.55);
    backdrop-filter: blur(6px);
}

.crash-history-empty {
    color: var(--muted);
    font-weight: 500;
    background: none;
    border-color: transparent;
}

.crash-history-pill[data-tier="low"] {
    color: #fecdd3;
    border-color: rgba(var(--rose-rgb), 0.34);
    background: rgba(var(--rose-rgb), 0.14);
}

.crash-history-pill[data-tier="mid"] {
    color: #fde68a;
    border-color: rgba(var(--gold-rgb), 0.34);
    background: rgba(var(--gold-rgb), 0.14);
}

.crash-history-pill[data-tier="good"] {
    color: #f2dca0;
    border-color: rgba(var(--teal-rgb), 0.38);
    background: rgba(var(--teal-rgb), 0.16);
}

.crash-history-pill[data-tier="hot"] {
    color: #0d0a06;
    border-color: rgba(var(--gold-rgb), 0.62);
    background: linear-gradient(135deg, var(--gold), var(--green));
    box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.22);
}

.crash-stage {
    min-width: 0;
}

.crash-graph {
    --tip-left: 7.2%;
    --tip-top: 86%;
    --crash-heat: 0;
    position: relative;
    isolation: isolate;
    width: 100%;
    /* Live bets now sit just below the first viewport, leaving more room for flight. */
    min-height: clamp(400px, 56vh, 580px);
    overflow: hidden;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% -12%, rgba(var(--teal-rgb), 0.09), transparent 60%),
        radial-gradient(circle at 50% 120%, rgba(var(--rose-rgb), 0.06), transparent 55%),
        linear-gradient(180deg, rgba(26, 18, 10, 0.62), rgba(11, 8, 5, 0.62));
    box-shadow: inset 0 0 90px rgba(var(--black-rgb), 0.42);
    transition: box-shadow 240ms ease;
}

.crash-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.crash-area {
    fill: url(#crashAreaGradient);
    opacity: 0.7;
}

.crash-curve {
    fill: none;
    stroke: url(#crashCurveGradient);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px rgba(var(--teal-rgb), 0.3));
    transition: stroke 200ms ease, filter 200ms ease;
}

.crash-marker {
    stroke: var(--rose);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0;
    filter: drop-shadow(0 0 14px rgba(var(--rose-rgb), 0.45));
}

.crash-time-axis,
.crash-multiplier-axis {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.crash-time-axis span,
.crash-multiplier-axis span {
    position: absolute;
    color: rgba(244, 232, 196, 0.72);
    font-size: 0.72rem;
    font-weight: 560;
    line-height: 1;
    text-shadow: 0 1px 8px rgba(var(--black-rgb), 0.55);
    white-space: nowrap;
}

.crash-time-axis span {
    bottom: 1.05rem;
    transform: translateX(-50%);
}

.crash-time-axis span::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1.2rem;
    height: 0.42rem;
    border-left: 1px solid rgba(244, 232, 196, 0.22);
}

.crash-multiplier-axis span {
    right: 0.9rem;
    transform: translateY(-50%);
}

.crash-multiplier-axis span::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 0.45rem);
    width: 0.45rem;
    border-top: 1px solid rgba(244, 232, 196, 0.22);
}

.crash-countdown {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
    text-align: center;
    text-shadow: 0 8px 36px rgba(var(--black-rgb), 0.72);
}

.crash-countdown-card {
    min-width: 16rem;
    padding: 1rem 1.35rem 1.15rem;
    border: 1px solid rgba(var(--gold-rgb), 0.28);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(var(--ink-rgb), 0.92), rgba(35, 25, 14, 0.8)),
        radial-gradient(circle at 50% 0, rgba(var(--gold-rgb), 0.18), transparent 9rem);
    box-shadow: 0 22px 70px rgba(var(--black-rgb), 0.42), inset 0 0 34px rgba(var(--gold-rgb), 0.05);
    backdrop-filter: blur(14px);
}

.crash-countdown span {
    display: block;
    color: rgba(244, 232, 196, 0.78);
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: uppercase;
}

.crash-countdown strong {
    display: block;
    color: var(--gold);
    font-size: 5.4rem;
    font-weight: 650;
    line-height: 0.95;
}

.crash-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(var(--white-rgb), 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--white-rgb), 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 28% 82%, var(--black), rgba(var(--black-rgb), 0.15) 78%);
    -webkit-mask-image: radial-gradient(circle at 28% 82%, var(--black), rgba(var(--black-rgb), 0.15) 78%);
}

/* Curve-tip orb — a glowing pulse dot riding the tip of the multiplier curve. */
.crash-orb {
    position: absolute;
    top: var(--tip-top);
    left: var(--tip-left);
    z-index: 4;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, var(--white) 0%, var(--gold) 48%, rgba(var(--gold-rgb), 0) 74%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 220ms ease, background 200ms ease;
    will-change: left, top;
}

/* Soft halo that rides the tip during flight. */
.crash-orb::before {
    content: "";
    position: absolute;
    inset: -0.9rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(var(--teal-rgb), 0.42), rgba(var(--teal-rgb), 0) 70%);
    pointer-events: none;
}

/* Big centered multiplier readout (Stake-style), heat-shifts teal -> gold as it climbs. */
.crash-readout {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.55rem;
    pointer-events: none;
    text-align: center;
}

.crash-multiplier {
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.01em;
    color: var(--gold);
    color: color-mix(in oklab, var(--teal), var(--gold) calc(var(--crash-heat, 0) * 100%));
    text-shadow: 0 0 calc(20px + var(--crash-heat, 0) * 40px) rgba(var(--gold-rgb), calc(0.16 + var(--crash-heat, 0) * 0.32));
    transition: color 220ms ease, text-shadow 220ms ease;
}

.crash-status {
    min-height: 1.4rem;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    background: rgba(var(--ink-rgb), 0.5);
    opacity: 0;
    transition: opacity 200ms ease, color 200ms ease;
}

.crash-status:not(:empty) {
    opacity: 1;
}

/* On-graph cash-out button — appears mid-flight while the player holds a live bet. */
.crash-cashout-overlay {
    position: absolute;
    left: 50%;
    bottom: clamp(1.4rem, 6vh, 3.2rem);
    z-index: 6;
    display: grid;
    gap: 0.12rem;
    min-width: 14rem;
    padding: 0.8rem 1.4rem;
    border: 0;
    border-radius: 12px;
    color: #052012;
    text-align: center;
    background: linear-gradient(135deg, #4ade80, var(--green));
    box-shadow: 0 16px 40px rgba(var(--green-rgb), 0.32), inset 0 0 0 1px rgba(var(--white-rgb), 0.14);
    transform: translateX(-50%);
    cursor: pointer;
    animation: crash-cashout-rise 220ms cubic-bezier(.16, 1, .3, 1);
    transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.crash-cashout-overlay:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 22px 50px rgba(var(--green-rgb), 0.42), inset 0 0 0 1px rgba(var(--white-rgb), 0.18);
}

.crash-cashout-overlay:active {
    transform: translateX(-50%) translateY(0);
}

.crash-cashout-overlay:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.crash-cashout-overlay-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.78;
}

.crash-cashout-overlay-amount {
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1.1;
}

/* Crash explosion burst (fires at the curve tip when the round crashes). */
.crash-burst {
    position: absolute;
    top: var(--tip-top);
    left: var(--tip-left);
    z-index: 5;
    width: 2.2rem;
    height: 2.2rem;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
}

/* --- Flight state --- */
.crash-graph[data-state="flying"] {
    box-shadow: inset 0 0 90px rgba(var(--black-rgb), 0.42), inset 0 0 0 1px rgba(var(--teal-rgb), 0.16);
}

.crash-graph[data-state="flying"] .crash-orb {
    opacity: 1;
    animation: crash-orb-pulse 1.1s ease-out infinite;
}

.crash-graph[data-state="betting"] .crash-orb,
.crash-graph[data-state="idle"] .crash-orb {
    opacity: 0;
}

/* --- Ended state --- */
.crash-graph[data-state="ended"] .crash-curve,
.crash-graph[data-state="settled"] .crash-curve {
    stroke: var(--rose);
    filter: drop-shadow(0 0 12px rgba(var(--rose-rgb), 0.4));
}

.crash-graph[data-state="ended"][data-outcome="crashed"] .crash-orb {
    opacity: 0;
}

.crash-graph[data-state="ended"][data-outcome="crashed"] .crash-multiplier {
    color: var(--rose);
    text-shadow: 0 0 36px rgba(var(--rose-rgb), 0.45);
}

.crash-graph[data-state="ended"][data-outcome="crashed"] .crash-status {
    color: #fecdd3;
}

.crash-graph[data-state="ended"][data-outcome="crashed"] .crash-burst {
    animation: crash-explode 640ms ease-out forwards;
}

.crash-graph[data-state="ended"][data-outcome="crashed"] {
    animation: crash-graph-shake 360ms ease-out;
}

/* Cashout (safe) — curve and orb turn green, no explosion. */
.crash-graph[data-outcome="cashout"] .crash-curve {
    stroke: var(--green);
    filter: drop-shadow(0 0 14px rgba(var(--green-rgb), 0.4));
}

.crash-graph[data-outcome="cashout"] .crash-orb {
    background: radial-gradient(circle at 50% 50%, var(--white) 0%, var(--green) 48%, rgba(var(--green-rgb), 0) 74%);
}

.crash-graph[data-outcome="cashout"] .crash-multiplier {
    color: var(--green);
    text-shadow: 0 0 30px rgba(var(--green-rgb), 0.4);
}

.crash-graph[data-outcome="cashout"] .crash-status {
    color: #86efac;
}

@keyframes crash-orb-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--teal-rgb), 0.5); }
    70%, 100% { box-shadow: 0 0 0 0.9rem rgba(var(--teal-rgb), 0); }
}

@keyframes crash-cashout-rise {
    from { opacity: 0; transform: translateX(-50%) translateY(0.8rem); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes crash-graph-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-5px, 3px); }
    40% { transform: translate(5px, -3px); }
    60% { transform: translate(-3px, 3px); }
    80% { transform: translate(3px, -2px); }
}

@keyframes crash-explode {
    0% {
        transform: translate(-50%, -50%) scale(0.25);
        opacity: 1;
        background: radial-gradient(circle, var(--white) 0%, #fde68a 24%, var(--rose) 54%, rgba(var(--rose-rgb), 0) 70%);
        box-shadow: 0 0 50px 14px rgba(var(--gold-rgb), 0.7);
    }
    55% { opacity: 1; }
    100% {
        transform: translate(-50%, -50%) scale(3.6);
        opacity: 0;
        background: radial-gradient(circle, rgba(var(--white-rgb), 0) 0%, rgba(var(--rose-rgb), 0) 70%);
        box-shadow: 0 0 0 36px rgba(var(--rose-rgb), 0);
    }
}

.crash-graph[data-state="betting"] .crash-readout {
    opacity: 0;
}

/* On round end, demote the countdown to a compact top pill so it clears the hero multiplier. */
.crash-graph[data-state="ended"] .crash-countdown {
    align-items: start;
    padding-top: 1.15rem;
}

.crash-graph[data-state="ended"] .crash-countdown-card {
    min-width: 0;
    padding: 0.5rem 0.95rem 0.55rem;
}

.crash-graph[data-state="ended"] .crash-countdown strong {
    font-size: 1.45rem;
}

.crash-graph[data-state="ended"] .crash-countdown span {
    font-size: 0.68rem;
}

@media (prefers-reduced-motion: reduce) {
    .crash-graph[data-state="flying"] .crash-orb,
    .crash-cashout-overlay,
    .crash-graph[data-state="ended"][data-outcome="crashed"],
    .crash-graph[data-state="ended"][data-outcome="crashed"] .crash-burst {
        animation: none;
    }
}

/* Live-bets table under the graph. */
.crash-roster {
    overflow: hidden;
    margin-top: clamp(0.8rem, 2.4vh, 1.55rem);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background: rgba(11, 8, 5, 0.5);
}

.crash-roster-head {
    display: grid;
    gap: 0.6rem;
    padding: 0.8rem 1rem 0.65rem;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.03);
}

.crash-roster-summary {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}

.crash-roster-summary > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.crash-roster-summary strong {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.crash-roster-summary strong span {
    color: var(--teal);
}

.crash-roster-cols,
.crash-player {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 1rem;
    align-items: center;
}

.crash-roster-cols span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.crash-roster-cols span:not(:first-child),
.crash-player > :not(:first-child) {
    text-align: right;
}

.crash-players {
    display: grid;
    align-content: start;
    max-height: 320px;
    overflow: auto;
}

.crash-player {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.05);
    font-size: 0.9rem;
}

.crash-player:last-child {
    border-bottom: 0;
}

.crash-player-name {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crash-player-result {
    font-weight: 800;
}

.crash-player[data-status="cashout"] .crash-player-result {
    color: var(--green);
}

.crash-player[data-status="crashed"] {
    color: var(--muted);
}

.crash-player[data-status="crashed"] .crash-player-result {
    color: var(--rose);
}

.empty-row {
    padding: 1rem;
    color: var(--muted);
}

@media (max-width: 1100px) {
    .crash-console {
        grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.05fr);
    }

    .crash-result-box {
        grid-column: 1 / -1;
        min-height: auto;
    }
}

@media (max-width: 760px) {
    .crash-stat-strip,
    .dice-stat-strip,
    .spinner-stat-strip {
        flex-basis: 100%;
    }

    .crash-console {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .crash-graph {
        min-height: clamp(360px, 56vh, 500px);
    }

    .crash-multiplier {
        font-size: clamp(2.4rem, 12vw, 3.4rem);
    }

    .crash-cashout-overlay {
        min-width: 11rem;
        padding: 0.7rem 1rem;
    }

    .crash-auto-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .crash-history-pill,
    .crash-history-empty {
        min-height: 1.5rem;
        padding: 0.18rem 0.45rem;
        font-size: 0.72rem;
    }

    .crash-countdown strong {
        font-size: 3.2rem;
    }

    .crash-countdown-card {
        min-width: 12rem;
        padding: 0.8rem 1rem 0.9rem;
    }

    .crash-roster-cols {
        display: none;
    }

    .crash-player {
        grid-template-columns: 1fr auto;
    }

    .crash-player-wager,
    .crash-player-cashout {
        display: none;
    }
}

/* Quick bet buttons */
.quick-bet-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin: -0.35rem 0 0.95rem;
}

.quick-bet-btn {
    min-width: 0;
    min-height: 2.2rem;
    padding: 0.42rem 0.5rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 7px;
    color: var(--text);
    background: rgba(var(--white-rgb), 0.045);
    font-size: 0.78rem;
    font-weight: 560;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.quick-bet-btn:hover {
    color: var(--teal);
    background: rgba(var(--teal-rgb), 0.08);
    border-color: rgba(var(--teal-rgb), 0.24);
    transform: translateY(-1px);
}

.quick-bet-btn:focus-visible {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.12);
}

.quick-bet-btn:active {
    transform: translateY(0);
    opacity: 0.9;
}

.quick-bet-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    transform: none;
}

@media (max-width: 620px) {
    .quick-bet-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: -0.15rem;
    }
}

.crypto-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.crypto-quote {
    display: grid;
    gap: 0.25rem;
    margin: -0.15rem 0 0.9rem;
    padding: 0.75rem;
    border: 1px solid rgba(var(--teal-rgb), 0.22);
    border-radius: 8px;
    background: rgba(var(--teal-rgb), 0.07);
}

.crypto-quote span,
.vip-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.crypto-quote strong {
    color: var(--teal);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.vip-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin: 1.2rem 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(var(--gold-rgb), 0.24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--gold-rgb), 0.12), rgba(var(--teal-rgb), 0.07)),
        rgba(var(--white-rgb), 0.035);
}

.vip-card strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--gold);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1;
}

.vip-card p {
    margin: 0.35rem 0 0;
    color: var(--text);
    font-weight: 600;
}

.vip-rank {
    min-width: 8rem;
    text-align: right;
}

.level-meter {
    position: relative;
    height: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 999px;
    background: rgba(var(--ink-rgb), 0.62);
}

.level-progress {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--teal), var(--gold));
    box-shadow: 0 0 24px rgba(var(--teal-rgb), 0.24);
    transition: width 420ms ease;
}

.leaderboard-table td:first-child,
.leaderboard-table th:first-child {
    width: 5rem;
}

.amount-positive {
    color: var(--green);
}

.amount-negative {
    color: var(--rose);
}

@media (max-width: 620px) {
    .crypto-grid,
    .vip-card {
        grid-template-columns: 1fr;
    }

    .vip-rank {
        text-align: left;
    }
}

/* ==========================================================================
   ROULETTE — rebuilt live-table page (floating header + rail + felt stage)
   Consistent with Mines/Dice/Plinko/Blackjack: serif title top-left, RTP +
   full fair-play hash pills top-right, controls in a left rail, the shared
   emerald felt carrying the wheel, results and betting board, and a
   full-width players roster underneath.
   ========================================================================== */

.roulette-page {
    --rl-felt-1: #14583f;
    --rl-felt-2: #0d3c2b;
    --rl-felt-3: #06201a;
    --rl-red: #a92222;
    --rl-red-deep: #6f1212;
    --rl-black: #17100a;
    --rl-green: #0f7a52;
    --rl-green-deep: #0a4c34;
    --rl-line: rgba(244, 239, 226, 0.26);
    --rl-ivory-dim: rgba(240, 230, 205, 0.66);
    padding: clamp(0.7rem, 1.4vw, 1.05rem);
    border-color: rgba(var(--white-rgb), 0.08);
    background:
        linear-gradient(150deg, rgba(14, 10, 6, 0.97), rgba(23, 17, 9, 0.95)),
        radial-gradient(circle at 78% 16%, rgba(var(--gold-rgb), 0.1), transparent 26rem);
}

/* Single column: the felt stage gets the full width, bet controls sit under it. */
.roulette-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "stage"
        "controls"
        "roster";
    gap: clamp(0.7rem, 1.05vw, 1rem);
    align-items: stretch;
}

/* ---- FLOATING HEADER — title left + stat pills right, mirrors the other games ---- */
.roulette-header {
    grid-area: header;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.roulette-title-stack {
    flex: 1 1 240px;
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.roulette-title-stack h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: 0.01em;
}

.roulette-stat-strip {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-width: 0;
}

.roulette-stat-pill {
    display: grid;
    gap: 0.3rem;
    align-content: center;
    min-height: 3.15rem;
    margin: 0;
    padding: 0.7rem 0.78rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    text-align: left;
    background: rgba(var(--white-rgb), 0.035);
}

.roulette-stat-pill > span {
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.roulette-stat-pill strong {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Full server-seed hash stays readable — one line when there's room, wraps
   (never truncates) when tight, exactly like the other game headers. */
.roulette-stat-pill code {
    display: block;
    word-break: break-all;
    font-size: 0.78rem;
}

.roulette-fair {
    position: relative;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.roulette-fair:hover {
    border-color: rgba(var(--gold-rgb), 0.4);
    background: rgba(var(--gold-rgb), 0.06);
}

.roulette-fair .roulette-fair-copied {
    position: absolute;
    top: -0.72rem;
    right: 0.4rem;
    padding: 0.12rem 0.42rem;
    border-radius: 6px;
    color: #0f0b06;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
    background: var(--gold);
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.roulette-fair.is-copied .roulette-fair-copied {
    opacity: 1;
    transform: translateY(0);
}

/* ---- BET SETUP PANEL (under the stage) ---- */
.roulette-controls {
    grid-area: controls;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 0.8rem 1.2rem;
    align-items: start;
    padding: clamp(0.9rem, 1.4vw, 1.2rem);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(var(--white-rgb), 0.04), rgba(var(--white-rgb), 0.015)),
        rgba(8, 6, 3, 0.4);
}

.roulette-bet-cluster {
    display: grid;
    gap: 0.8rem;
    align-content: start;
    min-width: 0;
}

.roulette-panel-head .eyebrow {
    margin: 0;
}

.roulette-wager-field {
    margin-bottom: 0;
}

.roulette-note {
    display: flex;
    align-items: center;
    min-height: 2.3rem;
    margin: 0;
    padding: 0.5rem 0.68rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 650;
    background: rgba(var(--white-rgb), 0.035);
}

.roulette-placed-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.72rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 10px;
    background: rgba(var(--white-rgb), 0.03);
}

.roulette-placed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.roulette-placed-head span {
    color: #f0dca0;
    font-size: 0.7rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.roulette-placed-head strong {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.roulette-placed-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.4rem;
    max-height: 10.5rem;
    overflow: auto;
    scrollbar-width: thin;
}

.roulette-placed-chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 8px;
    background: rgba(var(--gold-rgb), 0.05);
}

.roulette-placed-chip strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roulette-placed-chip span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.roulette-placed-chip.won {
    border-color: rgba(var(--green-rgb), 0.34);
    background: rgba(var(--green-rgb), 0.09);
}

.roulette-placed-chip.won span {
    color: var(--green);
}

.roulette-placed-chip.lost {
    border-color: rgba(var(--danger-rgb), 0.22);
    background: rgba(var(--danger-rgb), 0.05);
    opacity: 0.88;
}

/* ---- LIVE FELT STAGE ---- */
.roulette-stage {
    grid-area: stage;
    position: relative;
    display: grid;
    grid-template-columns: clamp(320px, 34%, 580px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "livebar livebar"
        "wheel results"
        "wheel board";
    gap: clamp(0.7rem, 1.2vw, 1.1rem);
    min-width: 0;
    padding: clamp(0.8rem, 1.5vw, 1.35rem);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 50% -12%, rgba(var(--gold-rgb), 0.14), transparent 58%),
        radial-gradient(circle at 22% 40%, rgba(var(--white-rgb), 0.045), transparent 46%),
        linear-gradient(158deg, var(--rl-felt-1), var(--rl-felt-2) 55%, var(--rl-felt-3));
}

/* Felt weave + inner gold rail sit under the content */
.roulette-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(45deg, rgba(var(--white-rgb), 0.022) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-45deg, rgba(var(--white-rgb), 0.016) 0 1px, transparent 1px 9px);
    pointer-events: none;
}

.roulette-stage::after {
    content: "";
    position: absolute;
    inset: clamp(0.45rem, 0.9vw, 0.75rem);
    z-index: 0;
    border: 1.5px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 10px;
    box-shadow: inset 0 0 90px rgba(var(--black-rgb), 0.34);
    pointer-events: none;
}

.roulette-stage > * {
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* ---- LIVE BAR — phase, round meta and countdown with a progress rail ---- */
.roulette-live-bar {
    grid-area: livebar;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1rem;
    padding: 0.62rem 0.85rem 0.8rem;
    border: 1px solid rgba(244, 239, 226, 0.14);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(5, 22, 16, 0.58);
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.05);
}

.roulette-phase {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.roulette-phase strong {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.roulette-phase-dot {
    flex: 0 0 auto;
    width: 0.62rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px rgba(var(--green-rgb), 0.75);
    animation: roulette-dot-pulse 1.7s ease-in-out infinite;
}

.roulette-page[data-phase="spinning"] .roulette-phase-dot {
    background: var(--gold);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.8);
    animation-duration: 0.85s;
}

.roulette-page[data-phase="ended"] .roulette-phase-dot {
    background: #f4efe2;
    box-shadow: 0 0 8px rgba(var(--white-rgb), 0.5);
    animation: none;
}

.roulette-live-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-inline: auto;
    min-width: 0;
}

.roulette-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.3rem 0.62rem;
    border: 1px solid rgba(244, 239, 226, 0.13);
    border-radius: 999px;
    color: var(--rl-ivory-dim);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(var(--black-rgb), 0.22);
    white-space: nowrap;
}

.roulette-live-chip strong {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.roulette-countdown {
    min-width: 4ch;
    margin-left: auto;
    color: #ffe9ad;
    font-size: clamp(1.25rem, 1.6vw, 1.65rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
    text-shadow: 0 0 18px rgba(var(--gold-rgb), 0.4);
}

.roulette-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(var(--black-rgb), 0.4);
}

.roulette-progress span {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #ffe9ad);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.55);
    transition: width 140ms linear;
}

/* ---- WHEEL ---- */
.roulette-wheel-panel {
    grid-area: wheel;
    display: grid;
    place-items: center;
    align-self: stretch;
    padding: clamp(0.2rem, 0.8vw, 0.6rem);
}

.roulette-wheel-wrap {
    --ball-track: -152px;
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: min(580px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
}

.roulette-wheel-shadow {
    position: absolute;
    inset: 16% 8% 0;
    border-radius: 50%;
    background: rgba(var(--black-rgb), 0.5);
    filter: blur(24px);
    transform: rotateX(66deg) translateY(9%);
}

.roulette-wheel {
    --roulette-gradient: var(--rl-green) 0deg 9.73deg, var(--rl-black) 9.73deg 19.46deg, var(--rl-red) 19.46deg 29.19deg;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: clamp(10px, 1.1vw, 15px) solid #2c1a0c;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, #120c07 0 17.5%, transparent 18.5%),
        radial-gradient(circle at 50% 50%, transparent 0 55%, rgba(var(--gold-rgb), 0.34) 55.5% 56.3%, transparent 57%),
        conic-gradient(var(--roulette-gradient)),
        radial-gradient(circle at 38% 32%, rgba(var(--white-rgb), 0.11), transparent 42%);
    box-shadow:
        inset 0 0 0 6px rgba(var(--gold-rgb), 0.22),
        inset 0 0 42px rgba(var(--black-rgb), 0.76),
        inset 0 -20px 30px rgba(var(--black-rgb), 0.5),
        0 26px 60px rgba(var(--black-rgb), 0.42);
    transition: none;
    will-change: transform;
}

/* Thin ivory sheen ring over the pockets */
.roulette-wheel::before {
    content: "";
    position: absolute;
    inset: 4.5%;
    z-index: 3;
    border: 1px solid rgba(var(--white-rgb), 0.13);
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(var(--white-rgb), 0.07) 63%, transparent 64.5%),
        linear-gradient(145deg, rgba(var(--white-rgb), 0.1), transparent 36%, rgba(var(--black-rgb), 0.2) 78%);
    pointer-events: none;
}

/* Hub shows the latest number — counter-rotated every frame by the JS-set
   --wheel-label-rotation so it stays upright while the wheel spins, and
   filled with the winning color once the ball lands. */
.roulette-wheel::after {
    content: attr(data-roll);
    position: absolute;
    inset: 30%;
    z-index: 8;
    display: grid;
    place-items: center;
    border: 2px solid rgba(var(--gold-rgb), 0.85);
    border-radius: 50%;
    color: #f7edd3;
    font-size: clamp(1.8rem, 3vw, 3.1rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(var(--black-rgb), 0.6), 0 0 20px rgba(var(--gold-rgb), 0.35);
    background:
        radial-gradient(circle at 35% 26%, rgba(var(--white-rgb), 0.14), transparent 30%),
        radial-gradient(circle, #221708 0, #120d07 66%, #0b0805 100%);
    box-shadow:
        0 0 0 8px rgba(44, 26, 12, 0.85),
        inset 0 0 22px rgba(var(--black-rgb), 0.55),
        0 0 30px rgba(var(--gold-rgb), 0.16);
    transform: rotate(var(--wheel-label-rotation, 0deg));
    will-change: transform;
}

.roulette-wheel[data-color="spinning"]::after {
    color: rgba(247, 237, 211, 0.42);
}

.roulette-wheel[data-color="red"]::after {
    background:
        radial-gradient(circle at 35% 26%, rgba(var(--white-rgb), 0.16), transparent 32%),
        radial-gradient(circle, #c22727 0, #8f1717 66%, var(--rl-red-deep) 100%);
    box-shadow:
        0 0 0 8px rgba(44, 26, 12, 0.85),
        inset 0 0 22px rgba(var(--black-rgb), 0.4),
        0 0 34px rgba(var(--danger-rgb), 0.3);
}

.roulette-wheel[data-color="black"]::after {
    background:
        radial-gradient(circle at 35% 26%, rgba(var(--white-rgb), 0.12), transparent 32%),
        radial-gradient(circle, #241a12 0, #120c07 66%, #060402 100%);
}

.roulette-wheel[data-color="green"]::after {
    background:
        radial-gradient(circle at 35% 26%, rgba(var(--white-rgb), 0.16), transparent 32%),
        radial-gradient(circle, #14996a 0, var(--rl-green) 60%, var(--rl-green-deep) 100%);
    box-shadow:
        0 0 0 8px rgba(44, 26, 12, 0.85),
        inset 0 0 22px rgba(var(--black-rgb), 0.4),
        0 0 34px rgba(var(--green-rgb), 0.3);
}

.roulette-pocket-divider,
.roulette-pocket-label {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.roulette-pocket-divider {
    z-index: 2;
    width: 1px;
    height: clamp(1.4rem, 2.4vw, 2.5rem);
    background: linear-gradient(to top, transparent, rgba(var(--gold-rgb), 0.5), transparent);
    opacity: 0.6;
    transform: translate(-50%, -100%) rotate(var(--angle)) translateY(calc(-1 * var(--divider-radius)));
    transform-origin: 50% 50%;
}

.roulette-pocket-label {
    z-index: 5;
    display: grid;
    place-items: center;
    width: clamp(1.05rem, 1.5vw, 1.55rem);
    min-width: 1.05rem;
    height: clamp(0.82rem, 1.1vw, 1.12rem);
    color: rgba(250, 244, 227, 0.92);
    font-size: clamp(0.5rem, 0.66vw, 0.66rem);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(var(--black-rgb), 0.8);
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--pocket-radius))) rotate(var(--label-angle));
    transform-origin: 50% 50%;
    transition: color 180ms ease, text-shadow 180ms ease;
}

.roulette-pocket-label.is-hit {
    color: #ffe9ad;
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.95);
}

.roulette-ball {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 13;
    width: clamp(0.68rem, 0.95vw, 0.94rem);
    aspect-ratio: 1;
    border: 1px solid rgba(var(--white-rgb), 0.85);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, var(--white) 0 22%, #efe6cf 23% 44%, #b3a179 74%, #61503a 100%);
    box-shadow:
        0 0 16px rgba(var(--white-rgb), 0.7),
        0 8px 16px rgba(var(--black-rgb), 0.45);
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    transition: none;
    will-change: transform;
}

.roulette-ball::after {
    content: "";
    position: absolute;
    inset: -0.42rem;
    border-radius: 50%;
    opacity: 0;
    background:
        radial-gradient(circle, rgba(var(--white-rgb), 0.3), rgba(236, 207, 126, 0.16) 42%, transparent 68%);
    filter: blur(5px);
    transition: opacity 160ms ease;
}

.roulette-spinning .roulette-ball::after {
    opacity: 0.72;
}

.roulette-landing .roulette-ball {
    box-shadow:
        0 0 18px rgba(var(--white-rgb), 0.92),
        0 0 18px rgba(var(--gold-rgb), 0.26),
        0 9px 18px rgba(var(--black-rgb), 0.46);
}

.roulette-landing .roulette-ball::after {
    opacity: 0.34;
    background:
        radial-gradient(circle, rgba(var(--white-rgb), 0.28), rgba(var(--gold-rgb), 0.14) 46%, transparent 70%);
}

/* ---- RESULTS STRIP — last number + recent history ---- */
.roulette-results {
    grid-area: results;
    display: grid;
    grid-template-columns: minmax(14rem, auto) minmax(0, 1fr);
    gap: clamp(0.6rem, 1vw, 0.9rem);
    align-items: stretch;
}

.roulette-result-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.68rem 0.85rem;
    border: 1px solid rgba(244, 239, 226, 0.15);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(5, 22, 16, 0.58);
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.05);
    transition: border-color 220ms ease, box-shadow 220ms ease;
}

.roulette-result-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background: linear-gradient(100deg, transparent, rgba(var(--white-rgb), 0.16), transparent);
    transform: translateX(-110%);
    pointer-events: none;
}

.roulette-result-card.is-winning::before {
    animation: roulette-shine 760ms ease;
}

.roulette-result-card > strong {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: clamp(3rem, 3.4vw, 3.6rem);
    aspect-ratio: 1;
    border: 2px solid rgba(var(--white-rgb), 0.22);
    border-radius: 50%;
    color: #fdf6e3;
    font-size: clamp(1.25rem, 1.5vw, 1.55rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: var(--rl-green);
    box-shadow:
        inset 0 -10px 18px rgba(var(--black-rgb), 0.3),
        0 8px 20px rgba(var(--black-rgb), 0.3);
}

.roulette-result-card[data-color="red"] > strong {
    background: var(--rl-red);
}

.roulette-result-card[data-color="black"] > strong {
    background: #100b07;
}

.roulette-result-copy {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.roulette-result-copy span {
    color: var(--rl-ivory-dim);
    font-size: 0.66rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.roulette-result-copy small {
    color: var(--text);
    font-size: 0.98rem;
    font-weight: 800;
}

.roulette-result-copy em {
    min-width: 0;
    overflow: hidden;
    color: var(--rl-ivory-dim);
    font-size: 0.74rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roulette-result-card[data-outcome="win"] {
    border-color: rgba(var(--green-rgb), 0.5);
    box-shadow: 0 0 26px rgba(var(--green-rgb), 0.16), inset 0 1px 0 rgba(var(--white-rgb), 0.05);
}

.roulette-result-card[data-outcome="loss"] {
    border-color: rgba(var(--danger-rgb), 0.38);
}

.roulette-result-card[data-outcome="push"] {
    border-color: rgba(var(--gold-rgb), 0.34);
}

.roulette-history-card {
    display: grid;
    gap: 0.42rem;
    align-content: center;
    min-width: 0;
    padding: 0.68rem 0.85rem;
    border: 1px solid rgba(244, 239, 226, 0.15);
    border-radius: 10px;
    background: rgba(5, 22, 16, 0.58);
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.05);
}

.roulette-history-card > span {
    color: var(--rl-ivory-dim);
    font-size: 0.66rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.roulette-history {
    display: flex;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
}

.roulette-history-chip {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: clamp(1.9rem, 2vw, 2.2rem);
    aspect-ratio: 1;
    border: 1px solid rgba(var(--white-rgb), 0.18);
    border-radius: 50%;
    color: #fdf6e3;
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: #100b07;
    box-shadow:
        inset 0 -4px 8px rgba(var(--black-rgb), 0.42),
        0 4px 10px rgba(var(--black-rgb), 0.3);
}

.roulette-history-chip.red {
    background: var(--rl-red);
}

.roulette-history-chip.green {
    background: var(--rl-green);
}

.roulette-history-chip:first-child {
    box-shadow:
        0 0 0 2px rgba(var(--gold-rgb), 0.55),
        inset 0 -4px 8px rgba(var(--black-rgb), 0.42),
        0 4px 12px rgba(var(--black-rgb), 0.34);
}

/* ---- BETTING BOARD ---- */
.roulette-table {
    grid-area: board;
    display: grid;
    gap: 0.55rem;
    align-content: start;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.roulette-board {
    display: grid;
    grid-template-columns: minmax(2.9rem, 3.9rem) minmax(33rem, 1fr) minmax(3.2rem, 4.4rem);
    grid-template-areas:
        "zero numbers columns"
        ". dozens ."
        ". outside .";
    gap: clamp(0.24rem, 0.4vw, 0.4rem);
    min-width: 42rem;
    padding: clamp(0.35rem, 0.6vw, 0.55rem);
    border: 1px solid rgba(var(--gold-rgb), 0.26);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(var(--black-rgb), 0.26), rgba(var(--black-rgb), 0.08)),
        rgba(4, 30, 22, 0.55);
    box-shadow: inset 0 0 34px rgba(var(--black-rgb), 0.26);
}

.roulette-number-grid {
    grid-area: numbers;
    display: grid;
    grid-template-columns: repeat(12, minmax(2.2rem, 1fr));
    grid-template-rows: repeat(3, minmax(clamp(2.55rem, 3.1vw, 3.35rem), 1fr));
    gap: clamp(0.24rem, 0.4vw, 0.4rem);
}

.roulette-columns {
    grid-area: columns;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: clamp(0.24rem, 0.4vw, 0.4rem);
}

.roulette-dozens {
    grid-area: dozens;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.24rem, 0.4vw, 0.4rem);
}

.roulette-outside {
    grid-area: outside;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.24rem, 0.4vw, 0.4rem);
}

.roulette-zero {
    grid-area: zero;
}

.roulette-cell {
    position: relative;
    min-width: 0;
    min-height: clamp(2.4rem, 2.9vw, 3.1rem);
    padding: 0.3rem 0.26rem;
    border: 1px solid var(--rl-line);
    border-radius: 6px;
    color: #f7f1de;
    font-size: clamp(0.78rem, 0.85vw, 0.95rem);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    background: rgba(5, 24, 17, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(var(--white-rgb), 0.06),
        inset 0 -8px 14px rgba(var(--black-rgb), 0.18);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease, filter 200ms ease;
}

.roulette-cell.red,
.roulette-cell.red-bet {
    border-color: rgba(255, 206, 190, 0.3);
    background: linear-gradient(155deg, var(--rl-red), var(--rl-red-deep));
}

.roulette-cell.black,
.roulette-cell.black-bet {
    background: linear-gradient(155deg, #1e1610, #0c0805);
}

.roulette-cell.roulette-zero {
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    background: linear-gradient(165deg, var(--rl-green), var(--rl-green-deep));
}

.roulette-cell.outside {
    font-size: clamp(0.72rem, 0.8vw, 0.86rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(5, 24, 17, 0.55);
}

.roulette-cell.outside.red-bet {
    background: linear-gradient(155deg, var(--rl-red), var(--rl-red-deep));
}

.roulette-cell.outside.black-bet {
    background: linear-gradient(155deg, #1e1610, #0c0805);
}

.roulette-cell:hover,
.roulette-cell:focus-visible {
    outline: none;
    z-index: 2;
    border-color: rgba(var(--gold-rgb), 0.85);
    box-shadow:
        inset 0 1px 0 rgba(var(--white-rgb), 0.08),
        0 0 0 2px rgba(var(--gold-rgb), 0.2),
        0 8px 18px rgba(var(--black-rgb), 0.28);
    transform: translateY(-1px);
}

.roulette-cell:disabled {
    cursor: not-allowed;
    filter: saturate(0.8) brightness(0.82);
    transform: none;
}

.roulette-cell.is-selected {
    border-color: rgba(var(--gold-rgb), 0.95);
    box-shadow:
        inset 0 0 0 1px rgba(var(--gold-rgb), 0.3),
        0 0 0 2px rgba(var(--gold-rgb), 0.2),
        0 0 22px rgba(var(--gold-rgb), 0.16);
}

.roulette-cell.is-wagered {
    border-color: rgba(var(--gold-rgb), 0.82);
    box-shadow:
        inset 0 0 0 1px rgba(var(--gold-rgb), 0.3),
        0 0 0 2px rgba(var(--gold-rgb), 0.15),
        0 0 18px rgba(var(--gold-rgb), 0.12);
}

.roulette-cell.is-winning {
    z-index: 2;
    border-color: rgba(255, 233, 173, 0.95);
    color: #fff6d8;
    box-shadow:
        0 0 0 2px rgba(255, 233, 173, 0.3),
        0 0 26px rgba(var(--gold-rgb), 0.34);
    animation: roulette-win-pulse 1.05s ease-in-out 2;
}

.roulette-cell.is-winning-bet {
    border-color: rgba(var(--green-rgb), 0.92);
    box-shadow:
        inset 0 0 0 1px rgba(var(--green-rgb), 0.35),
        0 0 0 2px rgba(var(--green-rgb), 0.2),
        0 0 30px rgba(var(--green-rgb), 0.26);
    animation: roulette-win-pulse 1.05s ease-in-out 2;
}

.roulette-cell.is-removing-chip {
    border-color: rgba(var(--danger-rgb), 0.7);
}

/* Casino chips dropped on the board — corner-anchored so labels stay readable */
.roulette-chip-stack {
    position: absolute;
    top: 0.14rem;
    right: 0.14rem;
    z-index: 3;
    display: grid;
    justify-items: end;
    pointer-events: none;
    filter: drop-shadow(0 3px 5px rgba(var(--black-rgb), 0.45));
}

.roulette-chip {
    grid-area: 1 / 1;
    width: clamp(1.1rem, 1.4vw, 1.42rem);
    aspect-ratio: 1;
    border: 2px dashed rgba(var(--white-rgb), 0.88);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 40%, #f6e7bd 0 30%, var(--chip-tone, #b9932f) 33% 100%);
    box-shadow:
        inset 0 0 0 2px rgba(var(--black-rgb), 0.28),
        0 2px 4px rgba(var(--black-rgb), 0.4);
    transform: translateY(calc(var(--chip-index, 0) * -3px));
}

.roulette-chip-stack.red .roulette-chip {
    --chip-tone: #b3271f;
}

.roulette-chip-stack.black .roulette-chip {
    --chip-tone: #33281d;
}

.roulette-chip-stack.green .roulette-chip {
    --chip-tone: var(--rl-green);
}

.roulette-chip-stack.table .roulette-chip {
    --chip-tone: #c79a3d;
}

.roulette-chip-amount {
    grid-area: 2 / 1;
    margin-top: -0.34rem;
    padding: 0.05rem 0.34rem;
    border: 1px solid rgba(var(--gold-rgb), 0.42);
    border-radius: 999px;
    color: #ffe9ad;
    font-size: 0.58rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: rgba(10, 7, 4, 0.9);
}

.roulette-cell.is-placing-chip .roulette-chip-stack,
.roulette-cell.is-doubling-chip .roulette-chip-stack {
    animation: roulette-chip-pop 260ms ease;
}

/* ---- BOARD FOOT — mouse legend + table rules ----
   Sticky-left keeps it in view while the board scrolls sideways on phones. */
.roulette-table-foot {
    position: sticky;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.2rem;
    max-width: 100%;
    min-width: 0;
    padding: 0 0.15rem;
}

.roulette-bindings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}

.roulette-binding {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--rl-ivory-dim);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.roulette-mouse-icon {
    display: inline-grid;
    place-items: center;
    width: 0.92rem;
    flex: 0 0 auto;
}

.roulette-mouse-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

.roulette-mouse-icon .mouse-shell {
    fill: rgba(var(--white-rgb), 0.06);
    stroke: rgba(244, 239, 226, 0.55);
    stroke-width: 2;
}

.roulette-mouse-icon .mouse-button {
    fill: transparent;
}

.roulette-mouse-icon .mouse-wheel {
    fill: rgba(244, 239, 226, 0.4);
}

.roulette-mouse-icon .mouse-seam {
    stroke: rgba(244, 239, 226, 0.35);
    stroke-width: 1.4;
}

.roulette-mouse-icon.left .mouse-left,
.roulette-mouse-icon.right .mouse-right {
    fill: var(--gold);
}

.roulette-mouse-icon.middle .mouse-wheel {
    fill: var(--gold);
}

.roulette-table-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    color: var(--rl-ivory-dim);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- PLAYERS ROSTER ---- */
.roulette-roster {
    grid-area: roster;
    display: grid;
    gap: 0.6rem;
    padding: clamp(0.8rem, 1.2vw, 1rem);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(var(--white-rgb), 0.035), rgba(var(--white-rgb), 0.012)),
        rgba(8, 6, 3, 0.4);
}

.roulette-roster-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 0.9rem;
}

.roulette-roster-head .eyebrow {
    margin: 0;
}

.roulette-roster-meta {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.roulette-roster-meta strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.roulette-players {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem;
}

.roulette-player {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.58rem 0.68rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 9px;
    background: rgba(var(--white-rgb), 0.03);
}

.roulette-player-head,
.roulette-player-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.roulette-player-head strong,
.roulette-player-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roulette-player-head strong {
    font-size: 0.88rem;
}

.roulette-player-head span {
    flex: 0 0 auto;
    color: #f0dca0;
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.roulette-player-meta {
    color: var(--muted);
    font-size: 0.72rem;
}

.roulette-player.won {
    border-color: rgba(var(--green-rgb), 0.3);
    background: rgba(var(--green-rgb), 0.07);
}

.roulette-player.won .roulette-player-head span {
    color: var(--green);
}

.roulette-player.lost {
    border-color: rgba(var(--danger-rgb), 0.2);
    opacity: 0.85;
}

.roulette-player.betting {
    border-color: rgba(var(--gold-rgb), 0.2);
}

/* ---- ANIMATIONS ---- */
@keyframes roulette-shine {
    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(110%);
    }
}

@keyframes roulette-dot-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.78);
    }
}

@keyframes roulette-win-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(255, 233, 173, 0.3),
            0 0 22px rgba(var(--gold-rgb), 0.3);
    }

    50% {
        box-shadow:
            0 0 0 4px rgba(255, 233, 173, 0.44),
            0 0 40px rgba(var(--gold-rgb), 0.52);
    }
}

@keyframes roulette-chip-pop {
    0% {
        transform: translateY(0.3rem) scale(0.82);
        opacity: 0.5;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ---- RESPONSIVE ---- */
@media (min-width: 1900px) {
    .roulette-stage {
        grid-template-columns: clamp(380px, 32%, 640px) minmax(0, 1fr);
    }

    .roulette-wheel-wrap {
        max-width: 640px;
    }

    .roulette-board {
        min-width: 48rem;
    }

    .roulette-number-grid {
        grid-template-rows: repeat(3, minmax(clamp(3rem, 2.6vw, 3.9rem), 1fr));
    }
}

@media (max-width: 1340px) {
    .roulette-stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "livebar"
            "wheel"
            "results"
            "board";
    }

    .roulette-wheel-wrap {
        max-width: min(460px, 82vw);
    }
}

@media (max-width: 900px) {
    .roulette-controls {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .roulette-stage {
        padding: 0.6rem;
    }

    .roulette-live-bar {
        gap: 0.45rem 0.7rem;
        padding: 0.55rem 0.65rem 0.75rem;
    }

    .roulette-live-meta {
        order: 3;
        flex-basis: 100%;
        margin-inline: 0;
    }

    .roulette-countdown {
        margin-left: auto;
    }

    .roulette-results {
        grid-template-columns: minmax(0, 1fr);
    }

    .roulette-wheel-wrap {
        max-width: min(330px, 86vw);
    }

    .roulette-board {
        min-width: 36rem;
    }

    .roulette-number-grid {
        grid-template-rows: repeat(3, minmax(2.3rem, 1fr));
    }

    .roulette-cell {
        min-height: 2.3rem;
        font-size: 0.72rem;
    }

    .roulette-bindings {
        display: none;
    }

    .roulette-players {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .roulette-phase-dot,
    .roulette-cell.is-winning,
    .roulette-cell.is-winning-bet,
    .roulette-cell.is-placing-chip .roulette-chip-stack,
    .roulette-cell.is-doubling-chip .roulette-chip-stack,
    .roulette-result-card.is-winning::before {
        animation: none !important;
    }

    .roulette-progress span {
        transition: none;
    }
}

.wallet-page {
    display: grid;
    gap: var(--space-5);
}

.wallet-page .wallet-panel {
    overflow: hidden;
    border-color: rgba(var(--white-rgb), 0.1);
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(28, 20, 11, 0.92), rgba(14, 10, 6, 0.96)),
        radial-gradient(circle at 8% 0%, rgba(var(--teal-rgb), 0.1), transparent 26rem);
}

.wallet-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.58fr);
    gap: var(--space-5);
    align-items: end;
}

.wallet-balance-row,
.wallet-card-head,
.wallet-limits-panel summary,
.wallet-break-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.wallet-label,
.wallet-metric span,
.wallet-status-chip,
.wallet-withdraw-note span,
.wallet-withdraw-note small {
    color: var(--muted);
    font-size: 0.78rem;
}

.wallet-balance-row h1 {
    margin: 0.18rem 0 0;
    font-size: clamp(2.7rem, 5.5vw, 5.8rem);
    font-weight: 720;
    line-height: 0.95;
}

.wallet-return {
    flex: 0 0 auto;
}

.wallet-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.72rem;
}

.wallet-metric,
.wallet-withdraw-note,
.crypto-quote,
.wallet-break-actions {
    min-height: 5rem;
    padding: 0.9rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.045);
}

.wallet-metric {
    display: grid;
    align-content: center;
    gap: 0.28rem;
}

.wallet-metric strong,
.wallet-withdraw-note strong {
    font-size: 1.02rem;
}

.wallet-cashier-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    gap: var(--space-5);
    align-items: stretch;
}

.wallet-action-card {
    display: grid;
    gap: var(--space-5);
}

.wallet-card-head h2,
.wallet-status-panel h2 {
    margin: 0.2rem 0 0;
}

.wallet-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(var(--teal-rgb), 0.24);
    border-radius: 999px;
    color: #ecd9a0;
    background: rgba(227, 176, 74, 0.12);
    white-space: nowrap;
}

.wallet-status-chip.muted {
    border-color: rgba(var(--gold-rgb), 0.22);
    color: #fef3c7;
    background: rgba(var(--gold-rgb), 0.08);
}

.wallet-form {
    display: grid;
    gap: var(--space-4);
}

.wallet-page .field {
    margin-bottom: 0;
}

.wallet-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.wallet-method-grid .field:first-child,
.wallet-method-grid .crypto-quote {
    grid-column: 1 / -1;
}

.wallet-deposit-route-grid .wallet-demo-route {
    grid-column: 1 / -1;
}

.crypto-quote,
.wallet-withdraw-note {
    display: grid;
    align-content: center;
    gap: 0.28rem;
}

.crypto-quote strong {
    color: var(--gold);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86rem;
    word-break: break-all;
}

.wallet-status-panel {
    display: grid;
    grid-template-columns: minmax(190px, 0.22fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
}

.wallet-page .compliance-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    min-height: 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wallet-page .compliance-list li {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.52rem 0.72rem;
    border: 1px solid rgba(var(--teal-rgb), 0.18);
    border-radius: 999px;
    color: #efdca6;
    background: rgba(27, 19, 11, 0.7);
}

.wallet-limits-panel {
    padding: 0;
}

.wallet-limits-panel summary {
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
}

.wallet-limits-panel summary::-webkit-details-marker {
    display: none;
}

.wallet-limits-panel summary > span {
    color: var(--muted);
    font-size: 0.86rem;
}

.wallet-limits-panel summary strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.2rem;
}

.wallet-limits-body {
    display: grid;
    gap: var(--space-4);
    padding: 0 var(--space-6) var(--space-6);
}

.wallet-limits-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: end;
}

.wallet-break-actions {
    min-height: 0;
}

.wallet-break-actions > div:first-child {
    display: grid;
    gap: 0.2rem;
}

.wallet-break-actions > div:first-child span {
    color: var(--muted);
    font-size: 0.86rem;
}

.wallet-break-actions .form-actions {
    margin: 0;
}

.wallet-history-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
}

.wallet-history-panel {
    min-width: 0;
}

.wallet-table-wrap {
    margin-top: var(--space-4);
    overflow-x: auto;
}

.wallet-page .ledger-table {
    width: 100%;
    min-width: 660px;
}

.wallet-page .ledger-table th,
.wallet-page .ledger-table td {
    padding: 0.72rem 0.78rem;
}

@media (max-width: 1180px) {
    .wallet-overview,
    .wallet-cashier-grid,
    .wallet-history-grid,
    .wallet-status-panel {
        grid-template-columns: 1fr;
    }

    .wallet-metric-grid,
    .wallet-limits-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .wallet-balance-row,
    .wallet-card-head,
    .wallet-limits-panel summary,
    .wallet-break-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .wallet-return,
    .wallet-break-actions .form-actions,
    .wallet-break-actions .button {
        width: 100%;
    }

    .wallet-metric-grid,
    .wallet-method-grid,
    .wallet-limits-form {
        grid-template-columns: 1fr;
    }

    .wallet-limits-panel summary,
    .wallet-limits-body {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }
}

.wallet-page {
    margin: var(--content-gap);
}

.wallet-payment-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.wallet-method-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    min-height: 5.2rem;
    padding: 0.9rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.04);
    cursor: pointer;
}

.wallet-method-card:has(input:checked) {
    border-color: rgba(var(--teal-rgb), 0.44);
    background:
        linear-gradient(135deg, rgba(var(--teal-rgb), 0.14), rgba(var(--gold-rgb), 0.07)),
        rgba(var(--white-rgb), 0.04);
}

.wallet-method-card input,
.wallet-toggle-line input {
    width: 1.05rem;
    min-height: 1.05rem;
    margin: 0.15rem 0 0;
    accent-color: var(--teal);
}

.wallet-method-card span {
    display: grid;
    gap: 0.25rem;
}

.wallet-method-card small,
.wallet-demo-route span,
.crypto-quote small,
.wallet-limit-copy {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.wallet-payment-mode[hidden] {
    display: none !important;
}

.wallet-payment-mode {
    display: grid;
    gap: var(--space-4);
}

.wallet-checkout-preview {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}

.wallet-qr {
    position: relative;
    min-height: 6.25rem;
    border: 1px solid rgba(var(--white-rgb), 0.11);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(var(--white-rgb), 0.88) 12%, transparent 12% 28%, rgba(var(--white-rgb), 0.88) 28% 40%, transparent 40% 58%, rgba(var(--white-rgb), 0.88) 58% 70%, transparent 70%),
        linear-gradient(0deg, rgba(var(--white-rgb), 0.88) 10%, transparent 10% 26%, rgba(var(--white-rgb), 0.88) 26% 38%, transparent 38% 64%, rgba(var(--white-rgb), 0.88) 64% 76%, transparent 76%),
        #0d0a06;
    background-size: 1.15rem 1.15rem;
    box-shadow: inset 0 0 0 0.72rem #0d0a06;
}

.wallet-qr::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--teal), var(--gold));
    transform: translate(-50%, -50%);
}

.wallet-flow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.wallet-flow-steps span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.45rem;
    border: 1px solid rgba(var(--teal-rgb), 0.16);
    border-radius: 8px;
    color: #efdca6;
    font-size: 0.75rem;
    text-align: center;
    background: rgba(27, 19, 11, 0.58);
}

.wallet-demo-route {
    display: grid;
    gap: 0.35rem;
    min-height: 6.25rem;
    padding: 1rem;
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 8px;
    background: rgba(var(--gold-rgb), 0.07);
}

.wallet-limits-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
}

.wallet-limits-form {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) minmax(160px, 0.34fr);
    align-items: stretch;
}

.wallet-limits-form > .button {
    align-self: end;
    min-height: 2.8rem;
}

.wallet-limit-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.04);
}

.wallet-limit-card.is-off {
    border-color: rgba(var(--white-rgb), 0.065);
    background: rgba(var(--white-rgb), 0.025);
}

.wallet-limit-card.is-off .field {
    opacity: 0.48;
}

.wallet-toggle-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.wallet-toggle-line strong {
    font-size: 1rem;
}

@media (max-width: 1180px) {
    .wallet-limits-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .wallet-payment-choice,
    .wallet-checkout-preview,
    .wallet-flow-steps {
        grid-template-columns: 1fr;
    }
}

.admin-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 16% 8%, rgba(var(--teal-rgb), 0.15), transparent 24rem),
        radial-gradient(circle at 88% 10%, rgba(var(--gold-rgb), 0.1), transparent 22rem),
        linear-gradient(145deg, #0c0905, #150f08 52%, #0e0b06);
}

.admin-shell {
    display: grid;
    gap: var(--space-5);
    width: 100%;
    min-height: 100vh;
    padding: var(--content-gap);
}

.admin-login-card,
.admin-panel,
.admin-topbar {
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(var(--panel-deep-rgb), 0.94), rgba(14, 10, 6, 0.97)),
        radial-gradient(circle at 12% 0%, rgba(var(--teal-rgb), 0.08), transparent 22rem);
    box-shadow: 0 24px 72px rgba(var(--black-rgb), 0.36);
}

.admin-login-card {
    display: grid;
    gap: var(--space-5);
    width: min(460px, calc(100vw - 2rem));
    margin: auto;
    padding: var(--space-7);
}

.admin-login-card h1,
.admin-hero h1 {
    margin: 0.2rem 0 0;
}

.admin-login-form {
    display: grid;
    gap: var(--space-4);
}

.admin-muted {
    color: var(--muted);
}

.admin-small {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
}

.admin-topbar {
    position: sticky;
    top: var(--content-gap);
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: 0.75rem;
}

.admin-topnav {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
}

.admin-topnav a {
    min-height: 2.35rem;
    padding: 0.58rem 0.82rem;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 650;
}

.admin-topnav a:hover {
    color: var(--text);
    background: rgba(var(--white-rgb), 0.07);
}

.admin-topnav a.active {
    color: #0d0a06;
    background: linear-gradient(135deg, var(--teal), var(--gold));
}

.admin-notice {
    margin: 0;
}

.admin-panel {
    padding: var(--space-6);
}

.admin-hero {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.72rem;
}

.admin-stat-grid div {
    display: grid;
    gap: 0.25rem;
    min-height: 4.8rem;
    padding: 0.82rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.04);
}

.admin-stat-grid span,
.admin-table span {
    color: var(--muted);
    font-size: 0.78rem;
}

.admin-stat-grid strong {
    font-size: 1.16rem;
}

.admin-action-panel,
.admin-adjust-form,
.admin-section-head {
    display: grid;
    gap: var(--space-4);
}

.admin-action-panel {
    grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
    align-items: end;
}

.admin-adjust-form {
    grid-template-columns: minmax(180px, 0.9fr) minmax(160px, 0.55fr) minmax(220px, 1fr) auto;
    align-items: end;
}

.admin-section-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: var(--space-4);
}

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
    padding: 0.38rem 0.72rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(var(--white-rgb), 0.045);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-status-pill.is-ready,
.admin-cashier-summary strong.is-ready {
    border-color: rgba(var(--green-rgb), 0.36);
    color: var(--green);
    background: rgba(var(--green-rgb), 0.1);
}

.admin-status-pill.is-warning,
.admin-cashier-summary strong.is-warning {
    border-color: rgba(var(--danger-rgb), 0.34);
    color: #ffb3a9;
    background: rgba(var(--danger-rgb), 0.1);
}

.admin-cashier-panel {
    display: grid;
    gap: var(--space-4);
}

.admin-cashier-summary,
.admin-cashier-config-grid {
    display: grid;
    gap: 0.72rem;
}

.admin-cashier-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-cashier-summary div,
.admin-cashier-config-item {
    min-width: 0;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.035);
}

.admin-cashier-summary div {
    display: grid;
    gap: 0.28rem;
    padding: 0.82rem;
}

.admin-cashier-summary span,
.admin-cashier-config-item span,
.admin-cashier-foot span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 750;
    text-transform: uppercase;
}

.admin-cashier-summary strong {
    width: max-content;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.admin-cashier-alerts {
    display: grid;
    gap: 0.45rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(var(--gold-rgb), 0.24);
    border-radius: 8px;
    color: rgba(244, 239, 226, 0.9);
    background: rgba(var(--gold-rgb), 0.07);
}

.admin-cashier-alerts p {
    margin: 0;
    line-height: 1.5;
}

.admin-cashier-config-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-cashier-config-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.42rem 0.65rem;
    align-items: start;
    padding: 0.82rem;
}

.admin-cashier-config-item strong {
    color: var(--green);
    font-size: 0.76rem;
}

.admin-cashier-config-item.is-missing strong {
    color: #ffb3a9;
}

.admin-cashier-config-item code {
    grid-column: 1 / -1;
    width: 100%;
    overflow-wrap: anywhere;
}

.admin-cashier-foot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding-top: 0.2rem;
}

.admin-cashier-foot code {
    overflow-wrap: anywhere;
}

.admin-range-panel {
    display: grid;
    grid-template-columns: minmax(220px, 0.22fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: end;
}

.admin-range-panel h2 {
    margin: 0.2rem 0 0;
}

.admin-range-form {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(190px, 0.42fr) minmax(190px, 0.42fr) auto;
    gap: var(--space-4);
    align-items: end;
}

.admin-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.admin-preset-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.48rem 0.68rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 680;
    background: rgba(var(--white-rgb), 0.04);
}

.admin-preset-row a:hover,
.admin-preset-row a.active {
    color: #0d0a06;
    border-color: transparent;
    background: linear-gradient(135deg, var(--teal), var(--gold));
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
}

.admin-table.compact {
    min-width: 680px;
}

.admin-table th,
.admin-table td {
    padding: 0.78rem 0.72rem;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.075);
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 760;
    text-transform: uppercase;
}

.admin-table td {
    color: var(--text);
    font-size: 0.88rem;
}

.admin-table td > strong,
.admin-table td > span {
    display: block;
}

.admin-inline-form {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto;
    gap: 0.45rem;
}

.admin-inline-form select,
.admin-row-actions button,
.admin-inline-form button {
    min-height: 2.25rem;
    padding: 0.42rem 0.55rem;
    font-size: 0.78rem;
}

.admin-inline-form button,
.admin-row-actions button {
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 7px;
    color: var(--text);
    font-weight: 650;
    background: rgba(var(--white-rgb), 0.06);
}

.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}

.admin-row-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.admin-ratio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.7rem;
    min-height: 1.75rem;
    padding: 0.25rem 0.48rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 999px;
    color: #f4e8c4;
    font-weight: 720;
    background: rgba(var(--white-rgb), 0.045);
}

.admin-ratio.hot {
    border-color: rgba(var(--rose-rgb), 0.34);
    color: #fecdd3;
    background: rgba(var(--rose-rgb), 0.12);
}

.admin-ratio.cold {
    border-color: rgba(var(--teal-rgb), 0.28);
    color: #f2dca0;
    background: rgba(var(--teal-rgb), 0.11);
}

.admin-ratio.normal {
    border-color: rgba(var(--gold-rgb), 0.28);
    color: #fef3c7;
    background: rgba(var(--gold-rgb), 0.1);
}

.admin-flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.admin-flag-row span {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.22rem 0.44rem;
    border: 1px solid rgba(var(--rose-rgb), 0.22);
    border-radius: 999px;
    color: #fecdd3;
    background: rgba(var(--rose-rgb), 0.09);
}

/* ---- Games panel ---- */
.admin-shell .button.secondary {
    border: 1px solid rgba(232, 194, 95, 0.4);
    border-radius: 9px;
    padding: 0.5rem 0.95rem;
    color: #f4e8c4;
    font-weight: 680;
    background: rgba(200, 146, 54, 0.16);
}

.admin-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 var(--space-5);
}

.admin-pills a {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.85rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 999px;
    color: #efdca6;
    font-size: 0.84rem;
    font-weight: 640;
    text-decoration: none;
    background: rgba(var(--white-rgb), 0.04);
    transition: border-color 0.15s, background 0.15s;
}

.admin-pills a:hover {
    border-color: rgba(232, 194, 95, 0.45);
    background: rgba(200, 146, 54, 0.12);
}

.admin-pills a.active {
    border-color: rgba(232, 194, 95, 0.7);
    color: var(--white);
    background: rgba(200, 146, 54, 0.26);
}

.admin-head-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.admin-filter {
    min-height: 2.3rem;
    min-width: 12rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 8px;
    color: var(--text);
    background: rgba(14, 10, 6, 0.6);
}

.admin-csv {
    font-size: 0.8rem;
}

.admin-back {
    color: #eccf7e;
    text-decoration: none;
    font-weight: 640;
}

.admin-cell-link {
    color: inherit;
    text-decoration: none;
}

.admin-cell-link:hover {
    color: #eccf7e;
    text-decoration: underline;
}

.admin-table tr.is-clickable {
    cursor: pointer;
}

.admin-table tr.is-clickable:hover td {
    background: rgba(200, 146, 54, 0.07);
}

.admin-table th.is-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.admin-table th.is-sortable::after {
    content: "\2195";
    margin-left: 0.3rem;
    opacity: 0.35;
}

.admin-table th.sort-asc::after {
    content: "\2191";
    opacity: 0.9;
}

.admin-table th.sort-desc::after {
    content: "\2193";
    opacity: 0.9;
}

/* ---- Charts ---- */
.admin-chart-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.admin-chart {
    margin: 0;
    padding: 0.85rem;
    border: 1px solid rgba(var(--white-rgb), 0.07);
    border-radius: 12px;
    background: rgba(14, 10, 6, 0.5);
}

.admin-chart figcaption {
    margin-bottom: 0.6rem;
    color: #f0dca0;
    font-size: 0.74rem;
    font-weight: 720;
    text-transform: uppercase;
}

.admin-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 130px;
}

.admin-bar {
    flex: 1 1 0;
    min-width: 3px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #e8c25f, #c79236);
}

.admin-chart.signed .admin-bar.pos {
    background: linear-gradient(180deg, #34d399, #059669);
}

.admin-chart.signed .admin-bar.neg {
    background: linear-gradient(180deg, var(--rose), #e11d48);
}

.admin-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    color: rgba(233, 221, 196, 0.5);
    font-size: 0.85rem;
}

/* ---- RTP meter ---- */
.admin-rtp-meter {
    margin-top: 1rem;
    max-width: 28rem;
}

.admin-meter-track {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: rgba(var(--white-rgb), 0.08);
    overflow: hidden;
}

.admin-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #c79236, #e8c25f);
}

.admin-meter-fill.hot {
    background: linear-gradient(90deg, #e11d48, var(--rose));
}

.admin-meter-fill.cold {
    background: linear-gradient(90deg, #9a6324, var(--teal));
}

.admin-meter-fill.normal {
    background: linear-gradient(90deg, #ca8a04, var(--gold));
}

.admin-meter-track .admin-meter-target {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--text);
    box-shadow: 0 0 0 1px rgba(var(--black-rgb), 0.4);
    overflow: visible;
}

.admin-meter-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    color: rgba(233, 221, 196, 0.72);
    font-size: 0.76rem;
}

/* ---- Simulator ---- */
.admin-sim-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
}

.admin-sim-form .field {
    min-width: 9rem;
}

.admin-sim-result {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 12px;
    background: rgba(14, 10, 6, 0.5);
}

.admin-sim-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.admin-sim-rtp strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1.1;
}

.admin-sim-rtp span {
    color: rgba(233, 221, 196, 0.7);
    font-size: 0.78rem;
}

.admin-sim-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.admin-sim-badge.pass {
    color: #bbf7d0;
    background: rgba(var(--green-rgb), 0.2);
    border: 1px solid rgba(var(--green-rgb), 0.5);
}

.admin-sim-badge.fail {
    color: #fecaca;
    background: rgba(var(--danger-rgb), 0.2);
    border: 1px solid rgba(var(--danger-rgb), 0.55);
}

.admin-sim-badge.info {
    color: #f0dca0;
    background: rgba(200, 146, 54, 0.18);
    border: 1px solid rgba(200, 146, 54, 0.5);
}

.admin-sim-grid {
    margin-bottom: 0.5rem;
}

.admin-sim-all-results {
    margin-top: 0.75rem;
    overflow-x: auto;
}

@media (max-width: 1280px) {
    .admin-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1280px) {
    .admin-hero,
    .admin-action-panel,
    .admin-range-panel,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-cashier-summary,
    .admin-cashier-config-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-adjust-form {
        grid-template-columns: 1fr 1fr;
    }

    .admin-range-form {
        grid-template-columns: 1fr 1fr;
    }

    .admin-preset-row {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .admin-topbar,
    .admin-section-head,
    .admin-adjust-form,
    .admin-range-form,
    .admin-stat-grid,
    .admin-cashier-summary,
    .admin-cashier-config-grid,
    .admin-cashier-foot {
        grid-template-columns: 1fr;
    }

    .admin-topnav {
        justify-content: flex-start;
        overflow-x: auto;
    }
}

body[data-game="dice"] .game-panel {
    overflow: hidden;
}

.dice-page {
    padding: 0;
    border-color: rgba(var(--white-rgb), 0.08);
    background:
        linear-gradient(145deg, rgba(15, 11, 7, 0.96), rgba(26, 19, 11, 0.94)),
        radial-gradient(circle at 50% 22%, rgba(var(--teal-rgb), 0.09), transparent 22rem);
}

.dice-shell {
    display: grid;
    gap: 0.78rem;
    padding: clamp(0.7rem, 1.4vw, 1.05rem);
}

/* TOP BAR — mirrors the Crash header: title on the left, RTP + fair-play hash
   pills on the right (shares the .crash-stat-* / .crash-fair styling). */
.dice-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.dice-title-stack {
    flex: 1 1 240px;
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.dice-title-stack h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: 0.01em;
}

.dice-slider-guides,
.dice-control-grid .field span {
    color: var(--muted);
}

.dice-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem;
    justify-content: center;
    min-height: 1.45rem;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 3.2rem), transparent 100%);
    mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 3.2rem), transparent 100%);
}

.dice-roll-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 1.38rem;
    padding: 0.14rem 0.5rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 3px;
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: rgba(var(--white-rgb), 0.04);
}

.dice-roll-chip.win {
    color: #4ade80;
    border-color: rgba(var(--green-rgb), 0.32);
    background: rgba(var(--green-rgb), 0.12);
}

.dice-roll-chip.loss {
    color: #fb7185;
    border-color: rgba(var(--rose-rgb), 0.3);
    background: rgba(var(--rose-rgb), 0.12);
}

.dice-stage {
    display: grid;
    grid-template-rows: auto minmax(10rem, 1fr) auto;
    gap: var(--space-4);
    min-height: 360px;
    padding: clamp(1rem, 3vw, 2.2rem);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(var(--white-rgb), 0.025), transparent 42%),
        rgba(var(--white-rgb), 0.025);
}

.dice-result-display {
    display: grid;
    place-items: center;
    min-height: 10rem;
}

/* Numeric readout — the authoritative roll value. */
.dice-readout {
    display: grid;
    place-items: center;
    gap: 0.32rem;
    text-align: center;
}

.dice-page .dice-face {
    width: auto;
    aspect-ratio: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    color: var(--text);
    font-size: 4.4rem;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 0 30px rgba(168, 150, 111, 0.22);
}

.dice-page .dice-face.is-loss {
    color: var(--rose);
    text-shadow: 0 0 30px rgba(var(--rose-rgb), 0.25);
}

.dice-page .dice-face.is-win {
    color: var(--green);
    text-shadow: 0 0 30px rgba(var(--green-rgb), 0.28);
}

.dice-readout-label {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dice-stage.is-rolling .dice-face {
    color: var(--text);
    opacity: 0.62;
    text-shadow: 0 0 28px rgba(168, 150, 111, 0.18);
}

.dice-stage.is-rolling .dice-roll-marker.is-set {
    opacity: 0.48;
}

.dice-slider-wrap {
    position: relative;
    display: grid;
    gap: 0.75rem;
    padding: 3.55rem 0 0;
}

.dice-roll-marker {
    position: absolute;
    top: -0.12rem;
    left: var(--dice-roll-position, 50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 3.35rem;
    aspect-ratio: 1;
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 920;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    opacity: 0;
    transform: translateX(-50%) translateY(0.3rem) scale(0.86);
    transition:
        left 240ms cubic-bezier(.2, .86, .2, 1),
        opacity 160ms ease,
        transform 220ms ease,
        color 160ms ease;
    pointer-events: none;
}

.dice-roll-marker::before {
    content: "";
    position: absolute;
    inset: 0.32rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: rgba(12, 9, 18, 0.88);
    box-shadow:
        0 0 18px rgba(var(--green-rgb), 0.22),
        inset 0 0 18px rgba(var(--green-rgb), 0.08);
    transform: rotate(45deg);
}

.dice-roll-marker span {
    position: relative;
    z-index: 1;
}

.dice-roll-marker.is-set {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.dice-roll-marker.is-loss {
    color: var(--rose);
}

.dice-roll-marker.is-loss::before {
    box-shadow:
        0 0 18px rgba(var(--rose-rgb), 0.22),
        inset 0 0 18px rgba(var(--rose-rgb), 0.08);
}

.dice-roll-marker.is-landed {
    animation: dice-marker-land 360ms cubic-bezier(.18, .95, .24, 1);
}

@keyframes dice-marker-land {
    0% {
        transform: translateX(-50%) translateY(0.25rem) scale(0.82);
    }
    62% {
        transform: translateX(-50%) translateY(-0.12rem) scale(1.07);
    }
    100% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dice-roll-marker {
        transition: none;
    }

    .dice-roll-marker.is-landed {
        animation: none;
    }
}

.dice-track {
    position: absolute;
    top: 4.19rem;
    left: 0;
    right: 0;
    height: 0.82rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--rose);
    pointer-events: none;
}

.dice-track-win,
.dice-track-loss {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: inherit;
}

.dice-track-win {
    left: 0;
    width: var(--dice-target, 37.5%);
    background: var(--green);
}

.dice-track-loss {
    left: var(--dice-target, 37.5%);
    width: calc(100% - var(--dice-target, 37.5%));
    background: var(--rose);
}

.dice-slider {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 2.1rem;
    padding: 0;
    appearance: none;
    background: transparent;
}

.dice-slider::-webkit-slider-runnable-track {
    height: 0.82rem;
    border-radius: 999px;
    background: transparent;
}

.dice-slider::-webkit-slider-thumb {
    appearance: none;
    width: 1.12rem;
    height: 2.15rem;
    margin-top: -0.66rem;
    border: 0;
    border-radius: 5px;
    background: var(--text);
    box-shadow: 0 8px 22px rgba(var(--black-rgb), 0.38);
}

.dice-slider::-moz-range-track {
    height: 0.82rem;
    border-radius: 999px;
    background: transparent;
}

.dice-slider::-moz-range-thumb {
    width: 1.12rem;
    height: 2.15rem;
    border: 0;
    border-radius: 5px;
    background: var(--text);
    box-shadow: 0 8px 22px rgba(var(--black-rgb), 0.38);
}

.dice-slider-guides {
    display: flex;
    justify-content: space-between;
    padding: 0 0.08rem;
    font-size: 0.92rem;
}

.dice-console {
    display: grid;
    grid-template-columns: minmax(250px, 0.28fr) minmax(0, 1fr) minmax(260px, 0.32fr);
    gap: 0.72rem;
    align-items: start;
}

.dice-wager-card,
.dice-control-grid,
.dice-result-box {
    align-self: start;
    padding: 0.8rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.035);
}

.dice-wager-card {
    display: grid;
    gap: 0.52rem;
    align-content: start;
    padding: 0.72rem;
}

.dice-wager-card .field,
.dice-control-grid .field {
    margin-bottom: 0;
}

.dice-auto-rounds {
    margin: 0;
}

.dice-auto-rounds .button {
    min-height: 2.8rem;
    padding-inline: 0.75rem;
}

.dice-roll-button {
    min-height: 3rem;
    width: 100%;
}

.dice-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    align-content: start;
    align-items: start;
}

.dice-control-grid .dice-roll-button {
    grid-column: 1 / -1;
    margin-top: 0.1rem;
}

.dice-wager-card .quick-bet-buttons {
    gap: 0.38rem;
    margin: -0.15rem 0 0;
}

.dice-wager-card .quick-bet-btn {
    min-height: 2.25rem;
    padding: 0.52rem 0.45rem;
}

.dice-input-affix {
    position: relative;
}

.dice-input-affix input {
    padding-right: 2.2rem;
}

.dice-target-field input {
    padding-right: 3.35rem;
}

.dice-target-field input::-webkit-outer-spin-button,
.dice-target-field input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.dice-target-field input[type="number"] {
    appearance: textfield;
}

.dice-direction-toggle {
    position: absolute;
    right: 0.36rem;
    bottom: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    min-height: 2.1rem;
    padding: 0;
    border: 1px solid rgba(var(--teal-rgb), 0.28);
    border-radius: 6px;
    color: #dffcf6;
    font-size: 1.05rem;
    font-weight: 820;
    line-height: 1;
    background: rgba(var(--teal-rgb), 0.1);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.dice-direction-toggle:hover {
    border-color: rgba(var(--teal-rgb), 0.48);
    background: rgba(var(--teal-rgb), 0.16);
}

.dice-input-affix strong {
    position: absolute;
    right: 0.78rem;
    bottom: 0.82rem;
    color: var(--text);
}

.dice-result-box {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    align-content: start;
}

.dice-result-box .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dice-result-box .stat {
    min-height: 4.25rem;
}

@media (max-width: 1320px) {
    .dice-console,
    .dice-control-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dice-result-box {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .dice-console,
    .dice-control-grid {
        grid-template-columns: 1fr;
    }

    .dice-stage {
        min-height: 320px;
    }

    .dice-page .dice-face {
        font-size: 3.1rem;
    }

    .dice-roll-marker {
        width: 2.95rem;
        font-size: 0.66rem;
    }

    .dice-strip {
        -webkit-mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 2rem), transparent 100%);
        mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 2rem), transparent 100%);
    }

    .dice-roll-chip {
        flex-basis: auto;
    }

    .dice-result-box {
        grid-column: auto;
    }
}

body[data-game="spinner"] .game-panel {
    overflow: hidden;
}

.spinner-page {
    padding: clamp(0.7rem, 1.4vw, 1.05rem);
    border-color: rgba(var(--white-rgb), 0.08);
    background:
        radial-gradient(circle at 72% 18%, rgba(var(--teal-rgb), 0.08), transparent 22rem),
        linear-gradient(145deg, rgba(15, 11, 7, 0.97), rgba(27, 20, 12, 0.94));
}

.spinner-shell {
    display: grid;
    gap: var(--space-4);
}

/* TOP BAR — mirrors the Crash/Dice header: title on the left, live stat pills
   on the right (shares the .crash-stat-* styling via grouped selectors). */
.spinner-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.spinner-title-stack {
    flex: 1 1 240px;
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.spinner-title-stack h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: 0.01em;
}

.control-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.spinner-history {
    display: flex;
    gap: 0.4rem;
    min-height: 2.15rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 2.8rem), transparent 100%);
    mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 2.8rem), transparent 100%);
}

.spinner-history-chip {
    flex: 0 0 2.15rem;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 850;
    box-shadow: inset 0 -6px 0 rgba(var(--black-rgb), 0.2);
}

.spinner-history-empty {
    color: var(--muted);
    font-size: 0.86rem;
}

.spinner-history-chip.red,
.spinner-tile.red,
.spinner-choice.red {
    --spinner-color-a: var(--rose);
    --spinner-color-b: var(--rose-deep);
    --spinner-ink: #fff1f2;
}

.spinner-history-chip.black,
.spinner-tile.black,
.spinner-choice.black {
    --spinner-color-a: #221910;
    --spinner-color-b: #0b0805;
    --spinner-ink: #ece3d2;
}

.spinner-history-chip.green,
.spinner-tile.green,
.spinner-choice.green {
    --spinner-color-a: #34d399;
    --spinner-color-b: #047857;
    --spinner-ink: #052e1a;
}

.spinner-history-chip,
.spinner-tile,
.spinner-choice {
    background:
        linear-gradient(135deg, var(--spinner-color-a), var(--spinner-color-b)),
        repeating-linear-gradient(45deg, rgba(var(--white-rgb), 0.12) 0 7px, transparent 7px 14px);
}

.spinner-stage {
    position: relative;
    min-height: clamp(15rem, 29vw, 22.5rem);
    padding: clamp(0.9rem, 2.6vw, 2rem);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(var(--white-rgb), 0.025), transparent 42%),
        rgba(var(--white-rgb), 0.025);
}

.spinner-page.spinner-spinning .spinner-stage {
    border-color: rgba(var(--gold-rgb), 0.18);
    box-shadow: 0 0 42px rgba(var(--gold-rgb), 0.08);
}

.spinner-window {
    position: absolute;
    left: clamp(1rem, 3vw, 2.2rem);
    right: clamp(1rem, 3vw, 2.2rem);
    top: 50%;
    overflow: hidden;
    padding: 0.45rem 0;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 10px;
    background: rgba(11, 8, 5, 0.62);
    box-shadow: inset 0 0 40px rgba(var(--black-rgb), 0.28);
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--black) 12%, var(--black) 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, var(--black) 12%, var(--black) 88%, transparent 100%);
}

.spinner-marker {
    position: absolute;
    top: 17%;
    bottom: 17%;
    left: 50%;
    z-index: 3;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, var(--gold), #fff7ad, var(--gold), transparent);
    box-shadow: 0 0 24px rgba(var(--gold-rgb), 0.45);
    transform: translateX(-50%);
    pointer-events: none;
}

.spinner-reel {
    display: flex;
    gap: 0.55rem;
    will-change: transform;
}

.spinner-tile {
    position: relative;
    flex: 0 0 clamp(4.45rem, 6.4vw, 5.9rem);
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 8px;
    color: var(--spinner-ink);
    box-shadow: inset 0 -12px 0 rgba(var(--black-rgb), 0.18);
}

.spinner-tile i {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 24%, rgba(var(--white-rgb), 0.24), transparent 22%),
        linear-gradient(45deg, transparent 42%, rgba(var(--white-rgb), 0.12) 42% 49%, transparent 49% 58%, rgba(var(--black-rgb), 0.12) 58% 65%, transparent 65%);
    opacity: 0.72;
}

.spinner-tile strong {
    position: relative;
    z-index: 1;
    font-size: clamp(1.15rem, 2.5vw, 1.7rem);
    font-weight: 900;
}

.spinner-console {
    display: grid;
    grid-template-columns: minmax(240px, 0.32fr) minmax(0, 1.2fr) minmax(260px, 0.34fr);
    grid-template-areas:
        "wager choice result"
        ". bets .";
    gap: var(--space-3);
    align-items: stretch;
}

.spinner-wager-card,
.spinner-choice-card,
.spinner-bets-card,
.spinner-result-box {
    padding: var(--space-4);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.035);
}

.spinner-wager-card,
.spinner-choice-card {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.spinner-wager-card {
    grid-area: wager;
    gap: 0.62rem;
    padding: var(--space-3);
    min-height: 10.9rem;
}

.spinner-choice-card {
    grid-area: choice;
}

.spinner-result-box {
    grid-area: result;
    min-height: 10.9rem;
}

.spinner-bets-card {
    grid-area: bets;
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 0.7rem;
}

.spinner-wager-card .quick-bet-buttons {
    margin: -0.15rem 0 0;
}

.spinner-choice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.spinner-choice-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spinner-bet-all,
.spinner-clear-bets {
    min-height: 2.4rem;
    padding-inline: 1rem;
}

.spinner-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: start;
}

.spinner-color-column {
    display: grid;
    min-width: 0;
}

.spinner-choice {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.42rem;
    min-height: 5rem;
    padding: 0.82rem;
    overflow: hidden;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    color: var(--spinner-ink);
    font: inherit;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 -10px 0 rgba(var(--black-rgb), 0.16);
}

.spinner-choice strong,
.spinner-choice span {
    position: relative;
    z-index: 1;
}

.spinner-choice strong {
    font-size: clamp(1.05rem, 1.55vw, 1.35rem);
    line-height: 1;
}

.spinner-choice span {
    min-width: 3.15rem;
    padding: 0.2rem 0.58rem 0.24rem;
    border: 1px solid rgba(var(--white-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--white-rgb), 0.12);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0.55rem 1rem rgba(var(--black-rgb), 0.18);
    transform: translateY(-0.16rem);
}

.spinner-choice:not(:disabled):hover,
.spinner-choice:focus-visible,
.spinner-choice.is-placed {
    border-color: rgba(var(--gold-rgb), 0.62);
    box-shadow: inset 0 -10px 0 rgba(var(--black-rgb), 0.16), 0 0 0 3px rgba(var(--gold-rgb), 0.1);
}

.spinner-choice:disabled {
    cursor: not-allowed;
    filter: saturate(0.8);
    opacity: 0.62;
}

.spinner-choice.is-placed {
    opacity: 1;
}

.spinner-bets-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.spinner-bets-head > span:last-child {
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 850;
}

.spinner-bets-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.spinner-bets-column {
    display: grid;
    gap: 0.48rem;
    min-width: 0;
}

.spinner-bets-label {
    color: var(--text);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.spinner-bets-label.red {
    color: #fecdd3;
}

.spinner-bets-label.green {
    color: #bbf7d0;
}

.spinner-bets-label.black {
    color: #d8c9a8;
}

.spinner-player-list {
    display: grid;
    align-content: start;
    gap: 0.28rem;
    min-height: 3.4rem;
    max-height: 4.9rem;
    overflow: hidden auto;
    padding: 0.42rem;
    border: 1px solid rgba(var(--white-rgb), 0.075);
    border-radius: 8px;
    background: rgba(11, 8, 5, 0.46);
    scrollbar-width: thin;
}

.spinner-player-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.28rem 0.38rem;
    border: 1px solid rgba(var(--white-rgb), 0.055);
    border-radius: 6px;
    background: rgba(var(--white-rgb), 0.035);
}

.spinner-player-row strong,
.spinner-player-row em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spinner-player-row strong {
    color: var(--text);
    font-size: 0.84rem;
}

.spinner-player-row em {
    color: var(--gold);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 850;
}

.spinner-player-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.9rem;
    padding: 0.14rem 0.34rem;
    border: 1px solid var(--level-border, rgba(168, 150, 111, 0.32));
    border-radius: 4px;
    background: linear-gradient(135deg, var(--level-surface, rgba(168, 150, 111, 0.12)), rgba(var(--white-rgb), 0.04));
    color: var(--level-accent, #a8966f);
    font-size: 0.64rem;
    font-weight: 950;
    box-shadow: 0 0 14px var(--level-shadow, rgba(168, 150, 111, 0.12));
}

.spinner-player-empty {
    display: grid;
    place-items: center;
    min-height: 2.6rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.spinner-spin-button {
    width: 100%;
    min-height: 3rem;
}

.spinner-result-box {
    margin: 0;
    align-content: center;
}

.spinner-result-box .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1320px) {
    .spinner-console {
        grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1fr);
        grid-template-areas:
            "wager choice"
            "result bets";
    }
}

@media (max-width: 820px) {
    .spinner-console {
        grid-template-columns: 1fr;
    }

    .spinner-choice-grid {
        grid-template-columns: 1fr;
    }

    .spinner-choice-head {
        align-items: stretch;
        flex-direction: column;
    }

    .spinner-choice-actions .button {
        flex: 1 1 0;
    }

    .spinner-console {
        grid-template-areas:
            "wager"
            "choice"
            "bets"
            "result";
    }

    .spinner-bets-grid {
        grid-template-columns: 1fr;
    }
}

body[data-game="mines"] .game-panel {
    overflow: hidden;
}

body[data-game="plinko"] .game-panel {
    overflow: hidden;
}

.plinko-page {
    padding: clamp(0.7rem, 1.4vw, 1.05rem);
    border-color: rgba(var(--white-rgb), 0.08);
    background:
        radial-gradient(circle at 78% 10%, rgba(var(--gold-rgb), 0.08), transparent 22rem),
        radial-gradient(circle at 16% 32%, rgba(var(--teal-rgb), 0.09), transparent 24rem),
        linear-gradient(150deg, rgba(14, 10, 6, 0.97), rgba(23, 16, 9, 0.94));
}

.plinko-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "controls stage";
    gap: var(--space-5);
    align-items: stretch;
}

.plinko-controls {
    grid-area: controls;
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: clamp(0.9rem, 1.4vw, 1.25rem);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background:
        linear-gradient(160deg, rgba(var(--white-rgb), 0.05), rgba(var(--white-rgb), 0.018)),
        rgba(11, 8, 5, 0.5);
}

/* ---- FLOATING HEADER — title left + stat pills right, mirrors Mines/Dice ---- */
.plinko-header {
    grid-area: header;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.plinko-title-stack {
    flex: 1 1 240px;
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.plinko-title-stack h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: 0.01em;
}

.plinko-stat-strip {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-width: 0;
}

/* Pills mirror the Crash/Dice/Mines header strip so the games read consistently. */
.plinko-stat-pill {
    display: grid;
    gap: 0.3rem;
    align-content: center;
    min-height: 3.15rem;
    margin: 0;
    padding: 0.7rem 0.78rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    text-align: left;
    background: rgba(var(--white-rgb), 0.035);
}

.plinko-stat-pill > span {
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plinko-stat-pill strong {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Full server-seed hash stays readable — one line when there's room, wraps
   (never truncates) when tight, exactly like the Crash/Dice/Mines header. */
.plinko-stat-pill code {
    display: block;
    word-break: break-all;
    font-size: 0.78rem;
}

.plinko-fair {
    position: relative;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.plinko-fair:hover {
    border-color: rgba(var(--gold-rgb), 0.4);
    background: rgba(var(--gold-rgb), 0.06);
}

.plinko-fair .plinko-fair-copied {
    position: absolute;
    top: -0.72rem;
    right: 0.4rem;
    padding: 0.12rem 0.42rem;
    border-radius: 6px;
    color: #0f0b06;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
    background: var(--gold);
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.plinko-fair.is-copied .plinko-fair-copied {
    opacity: 1;
    transform: translateY(0);
}

.plinko-controls .field,
.plinko-controls .quick-bet-buttons {
    margin: 0;
}

.plinko-wager-field {
    display: grid;
    gap: 0.45rem;
}

.plinko-risk-panel {
    display: grid;
    gap: 0.55rem;
}

.plinko-risk-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.plinko-risk-button {
    min-height: 2.6rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    color: var(--text);
    background: rgba(var(--white-rgb), 0.045);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.plinko-risk-button:hover,
.plinko-risk-button:focus-visible {
    border-color: rgba(var(--teal-rgb), 0.5);
    transform: translateY(-1px);
}

.plinko-risk-button.is-active {
    color: #0c0905;
    border-color: transparent;
    background: linear-gradient(135deg, var(--teal), var(--gold));
    box-shadow: 0 8px 22px rgba(var(--teal-rgb), 0.18);
}

.plinko-risk-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

.plinko-row-control {
    display: grid;
    gap: 0.55rem;
    padding: 0.72rem 0.78rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background: rgba(11, 8, 5, 0.34);
}

.plinko-row-control span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.plinko-row-control strong {
    color: var(--gold);
}

.plinko-row-control input {
    width: 100%;
    min-height: auto;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--teal);
    cursor: pointer;
}

.plinko-row-control input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.plinko-drop-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
    align-items: end;
}

.plinko-drop-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 3rem;
    font-size: 1.02rem;
}

.plinko-auto-label {
    margin: 0;
}

.plinko-auto-label input {
    min-height: 2.7rem;
}

.plinko-drop-row .js-auto-stop {
    min-height: 2.7rem;
}

.plinko-controls .result-box {
    min-height: 0;
    margin: 0;
}

.plinko-result-box {
    display: grid;
    align-content: start;
    gap: 0.6rem;
}

.plinko-result-box .stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.plinko-result-box .stat {
    min-width: 0;
}

.plinko-result-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.plinko-stage {
    grid-area: stage;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--space-4);
    min-width: 0;
    padding: clamp(0.9rem, 1.4vw, 1.4rem);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% -12%, rgba(var(--teal-rgb), 0.08), transparent 60%),
        rgba(11, 8, 5, 0.45);
}

.plinko-board {
    position: relative;
    width: min(50rem, 100%);
    height: clamp(27rem, 62vh, 42rem);
    margin: 0 auto;
    align-self: center;
    overflow: hidden;
    border: 1px solid rgba(var(--teal-rgb), 0.14);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 6%, rgba(var(--gold-rgb), 0.1), transparent 13rem),
        radial-gradient(circle at 50% 118%, rgba(var(--rose-rgb), 0.08), transparent 52%),
        linear-gradient(180deg, rgba(26, 18, 10, 0.62), rgba(11, 8, 5, 0.55));
    box-shadow: inset 0 0 90px rgba(var(--black-rgb), 0.4);
}

.plinko-drop-port {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    z-index: 2;
    width: 3rem;
    height: 0.4rem;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.9), transparent);
    box-shadow: 0 0 26px rgba(var(--gold-rgb), 0.38);
    transform: translateX(-50%);
}

.plinko-pegs,
.plinko-balls {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Balls sit above the pegs but BEHIND the buckets, so they drop in behind the slot. */
.plinko-pegs {
    z-index: 1;
}

.plinko-balls {
    z-index: 2;
}

.plinko-peg {
    position: absolute;
    width: clamp(0.3rem, 0.5vw, 0.5rem);
    aspect-ratio: 1;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, var(--white), #d8c9a8 55%, #786242);
    box-shadow: 0 0 5px rgba(168, 150, 111, 0.35);
    transform: translate(-50%, -50%);
    transition: background 130ms ease, box-shadow 130ms ease;
}

.plinko-peg.is-lit {
    background: radial-gradient(circle at 35% 30%, var(--white), #fde68a 55%, var(--gold));
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.85), 0 0 5px rgba(var(--white-rgb), 0.9);
}

.plinko-ball {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(0.6rem, 0.95vw, 0.85rem);
    aspect-ratio: 1;
    border-radius: 999px;
    opacity: 0;
    background: radial-gradient(circle at 34% 28%, var(--white) 0 16%, #fde68a 17% 38%, #f59e0b 39% 100%);
    box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.7), 0 0 30px rgba(var(--gold-rgb), 0.32), inset 0 -2px 3px rgba(120, 53, 15, 0.5);
    transform: translate3d(-999px, -999px, 0);
    pointer-events: none;
}

.plinko-ball.is-live {
    opacity: 1;
}

.plinko-buckets {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: clamp(0.5rem, 1vw, 0.9rem);
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(var(--plinko-buckets, 17), minmax(0, 1fr));
    gap: clamp(0.12rem, 0.3vw, 0.24rem);
}

.plinko-bucket {
    --bucket-hue: 45;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: clamp(1.7rem, 3.4vh, 2.25rem);
    padding: 0.24rem 0.03rem;
    border-radius: 6px;
    color: hsl(var(--bucket-hue) 82% 15%);
    background: linear-gradient(180deg, hsl(var(--bucket-hue) 96% 62%), hsl(var(--bucket-hue) 92% 50%));
    box-shadow:
        0 0.26rem 0 hsl(var(--bucket-hue) 72% 34%),
        0 6px 10px rgba(var(--black-rgb), 0.3),
        0 0 0 rgba(var(--gold-rgb), 0);
    font-size: clamp(0.52rem, calc(9.8rem / var(--plinko-buckets, 17)), 0.92rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: filter 220ms ease, box-shadow 220ms ease;
}

@keyframes plinko-bucket-pop {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(30%); }
    62%  { transform: translateY(-7%); }
    100% { transform: translateY(0); }
}

.plinko-bucket.is-hit {
    z-index: 4;
    filter: brightness(1.2) saturate(1.08);
    box-shadow:
        0 0.26rem 0 hsl(var(--bucket-hue) 72% 34%),
        0 6px 10px rgba(var(--black-rgb), 0.3),
        0 0 22px hsl(var(--bucket-hue) 95% 60% / 0.75);
    animation: plinko-bucket-pop 440ms cubic-bezier(.3, .75, .4, 1);
}

.plinko-board.plinko-win-big {
    animation: plinko-board-win-big 920ms ease-out;
}

.plinko-board.plinko-win-jackpot {
    animation: plinko-board-win-jackpot 1480ms cubic-bezier(.2, .8, .2, 1);
}

.plinko-bucket.is-big-hit {
    filter: brightness(1.3) saturate(1.18);
    box-shadow:
        0 0.26rem 0 hsl(var(--bucket-hue) 72% 34%),
        0 8px 16px rgba(var(--black-rgb), 0.34),
        0 0 28px hsl(var(--bucket-hue) 96% 63% / 0.9),
        0 0 52px rgba(var(--gold-rgb), 0.34);
}

.plinko-bucket.is-jackpot-hit {
    z-index: 5;
    color: #241205;
    filter: brightness(1.45) saturate(1.32);
    box-shadow:
        0 0.3rem 0 hsl(var(--bucket-hue) 78% 30%),
        0 12px 22px rgba(var(--black-rgb), 0.38),
        0 0 34px hsl(var(--bucket-hue) 100% 66% / 1),
        0 0 82px rgba(var(--gold-rgb), 0.58),
        0 0 120px rgba(var(--teal-rgb), 0.22);
}

.plinko-win-burst {
    position: absolute;
    left: var(--burst-x, 50%);
    top: var(--burst-y, 88%);
    z-index: 6;
    width: 0;
    height: 0;
    pointer-events: none;
}

.plinko-win-burst::before,
.plinko-win-burst::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    aspect-ratio: 1;
    border-radius: 999px;
    transform: translate(-50%, -50%) scale(0.2);
    pointer-events: none;
}

.plinko-win-burst::before {
    width: clamp(8rem, 22vw, 15rem);
    border: 1px solid rgba(var(--gold-rgb), 0.46);
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.28), rgba(var(--teal-rgb), 0.11) 44%, transparent 70%);
    box-shadow: 0 0 42px rgba(var(--gold-rgb), 0.24);
    animation: plinko-win-halo 980ms ease-out forwards;
}

.plinko-win-burst::after {
    width: clamp(10rem, 28vw, 19rem);
    background: conic-gradient(from 18deg, transparent, rgba(var(--gold-rgb), 0.4), transparent 18%, rgba(var(--teal-rgb), 0.22), transparent 36%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: plinko-win-rays 1120ms ease-out forwards;
}

.plinko-win-burst.is-jackpot::before {
    width: clamp(12rem, 38vw, 28rem);
    border-color: rgba(var(--gold-rgb), 0.72);
    background: radial-gradient(circle, rgba(var(--white-rgb), 0.28), rgba(var(--gold-rgb), 0.34) 25%, rgba(var(--teal-rgb), 0.17) 54%, transparent 76%);
    animation-duration: 1580ms;
}

.plinko-win-burst.is-jackpot::after {
    width: clamp(15rem, 46vw, 34rem);
    opacity: 0;
    animation-duration: 1820ms;
}

.plinko-win-callout {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    justify-items: center;
    gap: 0.08rem;
    white-space: nowrap;
    color: var(--gold);
    text-shadow:
        0 2px 0 rgba(var(--black-rgb), 0.45),
        0 0 18px rgba(var(--gold-rgb), 0.76),
        0 0 42px rgba(var(--teal-rgb), 0.24);
    transform: translate(-50%, -132%) scale(0.72);
    animation: plinko-win-callout 1180ms cubic-bezier(.18, .92, .22, 1) forwards;
}

.plinko-win-callout b {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.95;
}

.plinko-win-callout strong {
    color: var(--gold);
    font-size: 1.15rem;
    font-weight: 950;
    line-height: 1;
}

.plinko-win-burst.is-jackpot .plinko-win-callout {
    transform: translate(-50%, -142%) scale(0.72);
    animation-duration: 1640ms;
}

.plinko-win-burst.is-jackpot .plinko-win-callout b {
    font-size: 3.4rem;
}

.plinko-win-burst.is-jackpot .plinko-win-callout strong {
    font-size: 1.45rem;
}

@media (max-width: 520px) {
    .plinko-win-callout b {
        font-size: 1.55rem;
    }

    .plinko-win-callout strong {
        font-size: 0.95rem;
    }

    .plinko-win-burst.is-jackpot .plinko-win-callout b {
        font-size: 2.15rem;
    }

    .plinko-win-burst.is-jackpot .plinko-win-callout strong {
        font-size: 1.05rem;
    }
}

.plinko-win-coin,
.plinko-win-spark {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
}

.plinko-win-coin {
    width: clamp(0.42rem, 0.8vw, 0.68rem);
    aspect-ratio: 1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 32% 28%, var(--white) 0 13%, #fde68a 14% 36%, transparent 37%),
        linear-gradient(145deg, #facc15, #d97706);
    box-shadow:
        inset 0 -1px 2px rgba(97, 45, 6, 0.5),
        0 0 12px rgba(var(--gold-rgb), 0.62);
    animation: plinko-win-coin-flight 1080ms cubic-bezier(.14, .78, .28, 1) var(--delay, 0ms) forwards;
}

.plinko-win-burst.is-jackpot .plinko-win-coin {
    width: clamp(0.46rem, 0.95vw, 0.82rem);
    animation-duration: 1520ms;
}

.plinko-win-spark {
    width: clamp(0.28rem, 0.52vw, 0.48rem);
    aspect-ratio: 1;
    border-radius: 2px;
    background: var(--white);
    box-shadow:
        0 0 10px rgba(var(--white-rgb), 0.95),
        0 0 22px rgba(var(--gold-rgb), 0.72);
    animation: plinko-win-spark-flight 860ms ease-out var(--delay, 0ms) forwards;
}

.plinko-win-burst.is-jackpot .plinko-win-spark {
    animation-duration: 1280ms;
}

@keyframes plinko-board-win-big {
    0% {
        filter: brightness(1);
        box-shadow: inset 0 0 90px rgba(var(--black-rgb), 0.4);
    }
    38% {
        filter: brightness(1.14) saturate(1.08);
        box-shadow:
            inset 0 0 90px rgba(var(--black-rgb), 0.28),
            0 0 34px rgba(var(--gold-rgb), 0.34),
            0 0 70px rgba(var(--teal-rgb), 0.16);
    }
    100% {
        filter: brightness(1);
        box-shadow: inset 0 0 90px rgba(var(--black-rgb), 0.4);
    }
}

@keyframes plinko-board-win-jackpot {
    0%, 100% {
        filter: brightness(1);
        box-shadow: inset 0 0 90px rgba(var(--black-rgb), 0.4);
        transform: translate3d(0, 0, 0);
    }
    12% {
        transform: translate3d(-3px, 1px, 0);
    }
    20% {
        transform: translate3d(3px, -1px, 0);
    }
    30% {
        transform: translate3d(-2px, 2px, 0);
    }
    42% {
        filter: brightness(1.24) saturate(1.16);
        box-shadow:
            inset 0 0 90px rgba(var(--black-rgb), 0.22),
            0 0 42px rgba(var(--gold-rgb), 0.55),
            0 0 98px rgba(var(--teal-rgb), 0.26),
            0 0 132px rgba(var(--rose-rgb), 0.16);
        transform: translate3d(0, 0, 0);
    }
    70% {
        filter: brightness(1.1) saturate(1.08);
    }
}

@keyframes plinko-win-halo {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18);
    }
    24% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes plinko-win-rays {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.22) rotate(0deg);
    }
    24% {
        opacity: 0.72;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.08) rotate(34deg);
    }
}

@keyframes plinko-win-callout {
    0% {
        opacity: 0;
        transform: translate(-50%, -112%) scale(0.72);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -150%) scale(1.08);
    }
    48% {
        opacity: 1;
        transform: translate(-50%, -142%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -174%) scale(0.98);
    }
}

@keyframes plinko-win-coin-flight {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    }
    14% {
        opacity: 1;
    }
    78% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -80px))) scale(var(--scale, 1)) rotate(var(--rot, 360deg));
    }
}

@keyframes plinko-win-spark-flight {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    }
    16% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -80px))) scale(var(--scale, 1)) rotate(var(--rot, 180deg));
    }
}

@media (prefers-reduced-motion: reduce) {
    .plinko-board.plinko-win-big,
    .plinko-board.plinko-win-jackpot,
    .plinko-win-burst::before,
    .plinko-win-burst::after,
    .plinko-win-callout,
    .plinko-win-coin,
    .plinko-win-spark {
        animation-duration: 1ms;
        animation-delay: 0ms;
    }

    .plinko-board.plinko-win-jackpot {
        transform: none;
    }
}

.plinko-history {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    width: min(50rem, 100%);
    margin: 0 auto;
    min-height: 1.9rem;
}

.plinko-history:empty {
    display: none;
}

.plinko-history-chip {
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
}

.plinko-history-chip.win {
    border: 1px solid rgba(var(--green-rgb), 0.3);
    color: #4ade80;
    background: rgba(var(--green-rgb), 0.2);
}

.plinko-history-chip.loss {
    border: 1px solid rgba(var(--danger-rgb), 0.25);
    color: var(--rose);
    background: rgba(var(--danger-rgb), 0.15);
}

.plinko-history-chip.push {
    border: 1px solid var(--line);
    color: var(--muted);
    background: rgba(var(--white-rgb), 0.08);
}

.plinko-drop-button[data-active-drops] {
    position: relative;
}

.plinko-drop-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(var(--black-rgb), 0.3);
    font-size: 0.65rem;
    font-weight: 700;
    vertical-align: middle;
}

.plinko-has-active-balls .plinko-board {
    border-color: rgba(var(--gold-rgb), 0.28);
}

@media (max-width: 980px) {
    .plinko-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "stage"
            "controls";
    }

    .plinko-board {
        width: 100%;
        height: clamp(22rem, 64vw, 34rem);
    }

    .plinko-history {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .plinko-risk-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plinko-bucket {
        min-height: 1.4rem;
    }
}

/* ======================================================================
   MINES — rebuilt "vault" UI (2026-06-29)
   Hybrid header: full-width top meta bar (round / RTP / fair-play hash)
   + left control rail (wager / mines / live stats) + right board stage.
   ====================================================================== */
.mines-page {
    padding: clamp(0.7rem, 1.4vw, 1.05rem);
    border-color: rgba(var(--white-rgb), 0.08);
    background:
        linear-gradient(150deg, rgba(14, 10, 6, 0.97), rgba(23, 17, 9, 0.95)),
        radial-gradient(circle at 78% 16%, rgba(var(--gold-rgb), 0.1), transparent 26rem);
}

.mines-layout {
    display: grid;
    grid-template-columns: minmax(312px, 366px) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "controls stage";
    gap: clamp(0.7rem, 1.05vw, 1rem);
    align-items: stretch;
}

/* ---- FLOATING HEADER — title left + stat pills right, mirrors Dice/Blackjack ---- */
.mines-header {
    grid-area: header;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.mines-title-stack {
    flex: 1 1 240px;
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.mines-title-stack h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: 0.01em;
}

.mines-stat-strip {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-width: 0;
}

/* Pills mirror the Crash/Dice header strip so the games read consistently. */
.mines-stat-pill {
    display: grid;
    gap: 0.3rem;
    align-content: center;
    min-height: 3.15rem;
    margin: 0;
    padding: 0.7rem 0.78rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    text-align: left;
    background: rgba(var(--white-rgb), 0.035);
}

.mines-stat-pill > span {
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mines-stat-pill strong {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Full server-seed hash stays readable — one line when there's room, wraps
   (never truncates) when tight, exactly like the Crash/Dice header. */
.mines-stat-pill code {
    display: block;
    word-break: break-all;
    font-size: 0.78rem;
}

.mines-fair {
    position: relative;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.mines-fair:hover {
    border-color: rgba(var(--gold-rgb), 0.4);
    background: rgba(var(--gold-rgb), 0.06);
}

.mines-fair .mines-fair-copied {
    position: absolute;
    top: -0.72rem;
    right: 0.4rem;
    padding: 0.12rem 0.42rem;
    border-radius: 6px;
    color: #0f0b06;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
    background: var(--gold);
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.mines-fair.is-copied .mines-fair-copied {
    opacity: 1;
    transform: translateY(0);
}

/* ---- LEFT CONTROL RAIL ---- */
.mines-controls {
    grid-area: controls;
    display: grid;
    gap: 0.8rem;
    align-content: start;
    padding: clamp(0.9rem, 1.4vw, 1.2rem);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(var(--white-rgb), 0.04), rgba(var(--white-rgb), 0.015)),
        rgba(8, 6, 3, 0.4);
}

.mines-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.mines-panel-head .eyebrow {
    margin: 0;
}

.mines-wager-field {
    margin: 0;
}

.mines-mines-field {
    display: grid;
    gap: 0.55rem;
}

.mines-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.mines-field-head > span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.mines-mines-hint {
    color: var(--muted);
    font-size: 0.74rem;
}

.mines-mines-hint strong {
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.mines-stepper {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    align-items: stretch;
    gap: 0.4rem;
}

.mines-step {
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 9px;
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(var(--white-rgb), 0.05);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 120ms ease;
}

.mines-step:hover {
    border-color: rgba(var(--gold-rgb), 0.45);
    background: rgba(var(--gold-rgb), 0.1);
}

.mines-step:active {
    transform: scale(0.93);
}

.mines-step:disabled {
    opacity: 0.4;
    cursor: default;
}

.mines-stepper input {
    min-height: 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mines-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}

.mines-preset {
    padding: 0.44rem 0;
    border-radius: 8px;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
    background: rgba(var(--white-rgb), 0.035);
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.mines-preset:hover {
    border-color: rgba(var(--gold-rgb), 0.4);
    color: var(--text);
}

.mines-preset.is-active {
    border-color: rgba(var(--gold-rgb), 0.6);
    color: #1a1206;
    background: linear-gradient(135deg, var(--gold), var(--teal));
}

.mines-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.mines-action-row .button {
    min-height: 3.1rem;
    font-size: 0.96rem;
}

.js-mines-cashout:not(:disabled) {
    color: #06130d;
    border-color: transparent;
    background: linear-gradient(135deg, var(--green), var(--teal));
    box-shadow: 0 12px 28px rgba(var(--green-rgb), 0.28);
}

.mines-live {
    display: grid;
    gap: 0.6rem;
}

.mines-live-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.mines-live-cell--accent {
    grid-column: 1 / -1;
}

.mines-live-cell {
    display: grid;
    gap: 0.14rem;
    padding: 0.6rem 0.7rem;
    border-radius: 9px;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.03);
}

.mines-live-cell span {
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mines-live-cell strong {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.mines-live-cell--accent {
    border-color: rgba(var(--gold-rgb), 0.28);
    background: linear-gradient(140deg, rgba(var(--gold-rgb), 0.13), rgba(var(--white-rgb), 0.02));
}

.mines-live-cell--accent strong {
    color: var(--gold);
    font-size: 1.22rem;
}

.mines-meter {
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--white-rgb), 0.08);
}

.mines-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--teal), var(--green), var(--gold));
    box-shadow: 0 0 12px rgba(var(--green-rgb), 0.4);
    transition: width 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mines-result-box {
    margin: 0;
}

/* ---- RIGHT BOARD STAGE ---- */
.mines-stage {
    grid-area: stage;
    display: grid;
    align-content: center;
    justify-items: stretch;
    min-height: clamp(440px, calc(100vh - var(--topbar-height) - 12.5rem), 760px);
    padding: clamp(0.9rem, 1.8vw, 1.5rem);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 10%, rgba(var(--gold-rgb), 0.08), transparent 58%),
        linear-gradient(180deg, rgba(var(--white-rgb), 0.03), rgba(6, 4, 2, 0.5));
}

.mines-board-frame {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 12px;
    padding: clamp(0.4rem, 1.2vw, 1rem);
    background: radial-gradient(circle at 50% 50%, rgba(var(--gold-rgb), 0.05), transparent 70%);
}

body[data-game="mines"] .mines-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(0.4rem, 0.9vw, 0.72rem);
    width: min(576px, 100%);
    margin: 0 auto;
}

body[data-game="mines"] .mine-tile {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: transparent;
    border: 1px solid rgba(var(--gold-rgb), 0.16);
    border-radius: clamp(8px, 1.3vw, 12px);
    background:
        linear-gradient(158deg, rgba(60, 45, 24, 0.5), rgba(28, 20, 11, 0.62)),
        rgba(var(--white-rgb), 0.02);
    box-shadow:
        inset 0 1px 0 rgba(var(--white-rgb), 0.08),
        inset 0 -10px 18px rgba(var(--black-rgb), 0.38),
        0 12px 26px rgba(var(--black-rgb), 0.26);
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 160ms ease,
        box-shadow 160ms ease, opacity 200ms ease, background 200ms ease;
}

body[data-game="mines"] .mine-tile::before {
    content: "";
    position: absolute;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 4px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.16), rgba(var(--white-rgb), 0.04));
    box-shadow: inset 0 0 0 1px rgba(var(--white-rgb), 0.05);
    opacity: 0.5;
    transition: opacity 160ms ease, transform 220ms ease;
}

body[data-game="mines"] .mine-tile:not(:disabled) {
    cursor: pointer;
}

body[data-game="mines"] .mine-tile:not(:disabled):hover {
    transform: translateY(-3px);
    border-color: rgba(var(--gold-rgb), 0.5);
    box-shadow:
        inset 0 1px 0 rgba(var(--white-rgb), 0.12),
        0 16px 30px rgba(var(--black-rgb), 0.34),
        0 0 22px rgba(var(--gold-rgb), 0.22);
}

body[data-game="mines"] .mine-tile:not(:disabled):hover::before {
    opacity: 0.9;
    transform: rotate(45deg) scale(1.1);
}

body[data-game="mines"] .mine-tile:not(:disabled):active {
    transform: translateY(-1px) scale(0.97);
}

/* dormant tiles (board not in play) sit dim */
body[data-game="mines"] .mines-board:not(.is-live) .mine-tile:disabled:not(.revealed) {
    opacity: 0.5;
}

body[data-game="mines"] .mine-tile.revealed::before {
    display: none;
}

body[data-game="mines"] .mine-icon {
    width: 56%;
    height: 56%;
}

/* SAFE GEM */
body[data-game="mines"] .mine-tile.safe {
    border-color: rgba(var(--green-rgb), 0.5);
    background:
        radial-gradient(circle at 50% 38%, rgba(var(--green-rgb), 0.4), transparent 70%),
        linear-gradient(158deg, rgba(var(--green-rgb), 0.2), rgba(20, 30, 18, 0.7));
    box-shadow:
        inset 0 0 0 1px rgba(var(--green-rgb), 0.3),
        0 10px 24px rgba(var(--green-rgb), 0.18);
}

body[data-game="mines"] .mine-tile.safe .mine-gem {
    color: #63e294;
    filter: drop-shadow(0 3px 8px rgba(var(--green-rgb), 0.55));
}

/* MINE */
body[data-game="mines"] .mine-tile.boom {
    border-color: rgba(var(--danger-rgb), 0.55);
    background:
        radial-gradient(circle at 50% 40%, rgba(var(--danger-rgb), 0.42), transparent 72%),
        linear-gradient(158deg, rgba(var(--danger-rgb), 0.24), rgba(34, 14, 11, 0.74));
    box-shadow:
        inset 0 0 0 1px rgba(var(--danger-rgb), 0.3),
        0 10px 24px rgba(var(--danger-rgb), 0.2);
}

body[data-game="mines"] .mine-tile.boom .mine-bomb {
    color: #ff7a63;
    filter: drop-shadow(0 3px 8px rgba(var(--danger-rgb), 0.6));
}

body[data-game="mines"] .mine-tile.is-detonated {
    border-color: rgba(255, 120, 100, 0.85);
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 96, 74, 0.72), transparent 68%),
        linear-gradient(158deg, rgba(var(--danger-rgb), 0.5), rgba(60, 18, 12, 0.85));
    box-shadow: 0 0 0 1px rgba(255, 130, 110, 0.6), 0 0 34px rgba(var(--danger-rgb), 0.5);
}

/* reveal flash overlay */
body[data-game="mines"] .mine-flash {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.85), transparent 60%);
}

/* reveal animations */
@keyframes mines-tile-pop {
    0% { transform: scale(0.62) rotate(-6deg); }
    55% { transform: scale(1.12) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes mines-icon-in {
    0% { opacity: 0; transform: scale(0.2) rotate(-26deg); }
    60% { opacity: 1; transform: scale(1.22) rotate(6deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes mines-flash {
    0% { opacity: 0.9; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(1.7); }
}

@keyframes mines-board-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

body[data-game="mines"] .mine-tile.is-revealing {
    animation: mines-tile-pop 360ms cubic-bezier(0.2, 0.9, 0.25, 1.3);
}

body[data-game="mines"] .mine-tile.is-revealing .mine-icon {
    animation: mines-icon-in 420ms cubic-bezier(0.2, 0.9, 0.25, 1.3);
}

body[data-game="mines"] .mine-tile.is-revealing .mine-flash {
    animation: mines-flash 460ms ease-out;
}

/* settle emphasis */
body[data-game="mines"] .mines-board[data-result="lose"] {
    animation: mines-board-shake 420ms ease;
}

body[data-game="mines"] .mines-board[data-result] .mine-tile:disabled:not(.revealed) {
    opacity: 0.3;
}

body[data-game="mines"] .mines-board[data-result="win"] .mine-tile.safe {
    border-color: rgba(var(--green-rgb), 0.7);
    box-shadow:
        inset 0 0 0 1px rgba(var(--green-rgb), 0.42),
        0 0 20px rgba(var(--green-rgb), 0.3);
}

/* ---- WIN / LOSS OVERLAY ---- */
.mines-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: rgba(6, 4, 2, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

.mines-overlay.is-shown {
    opacity: 1;
}

.mines-overlay-card {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    text-align: center;
    padding: 1.1rem 1.9rem;
    border-radius: 14px;
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    background: linear-gradient(160deg, rgba(26, 19, 10, 0.96), rgba(14, 10, 6, 0.96));
    box-shadow: 0 24px 60px rgba(var(--black-rgb), 0.5), 0 0 40px rgba(var(--gold-rgb), 0.12);
    transform: translateY(10px) scale(0.94);
    transition: transform 320ms cubic-bezier(0.2, 0.9, 0.25, 1.2);
}

.mines-overlay.is-shown .mines-overlay-card {
    transform: translateY(0) scale(1);
}

.mines-overlay[data-tone="lose"] .mines-overlay-card {
    border-color: rgba(var(--danger-rgb), 0.45);
    box-shadow: 0 24px 60px rgba(var(--black-rgb), 0.5), 0 0 40px rgba(var(--danger-rgb), 0.12);
}

.mines-overlay-tag {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--green);
}

.mines-overlay[data-tone="lose"] .mines-overlay-tag {
    color: var(--danger);
}

.mines-overlay-amount {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    color: var(--white);
}

.mines-overlay[data-tone="lose"] .mines-overlay-amount {
    color: #ff8a73;
}

.mines-overlay-mult {
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    body[data-game="mines"] .mine-tile,
    body[data-game="mines"] .mine-tile.is-revealing,
    body[data-game="mines"] .mine-tile.is-revealing .mine-icon,
    body[data-game="mines"] .mine-tile.is-revealing .mine-flash,
    body[data-game="mines"] .mines-board[data-result="lose"],
    .mines-overlay-card {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 1080px) {
    .mines-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "stage"
            "controls";
    }

    .mines-stage {
        min-height: auto;
    }
}

@media (max-width: 620px) {
    .mines-action-row,
    .mines-live-grid {
        grid-template-columns: 1fr;
    }
}

/* Rebuilt casino lobby */
body[data-active="lobby"] .page-content {
    min-width: 0;
}

.casino-home {
    display: grid;
    gap: var(--content-gap);
    padding: var(--content-gap);
}

.home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
    gap: 1rem;
    align-items: end;
    min-height: 430px;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    background:
        radial-gradient(circle at 84% 24%, rgba(var(--gold-rgb), 0.18), transparent 22rem),
        linear-gradient(90deg, rgba(11, 8, 5, 0.95) 0%, rgba(11, 8, 5, 0.78) 48%, rgba(11, 8, 5, 0.52) 100%),
        linear-gradient(180deg, rgba(11, 8, 5, 0.18), rgba(11, 8, 5, 0.9)),
        url("/assets/img/casino-lobby-hero.png") center / cover no-repeat,
        #120d06;
    /* Desaturate the photo against the espresso base so no off-brand hues leak through. */
    background-blend-mode: screen, normal, normal, luminosity, normal;
    box-shadow: 0 28px 90px rgba(var(--black-rgb), 0.42);
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(var(--white-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(rgba(var(--white-rgb), 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.38;
    mask-image: linear-gradient(90deg, rgba(var(--black-rgb), 0.7), transparent 76%);
}

.home-hero-copy,
.home-player-card {
    position: relative;
    z-index: 1;
}

.home-hero-copy {
    display: grid;
    gap: 1rem;
    align-content: end;
    max-width: 760px;
    min-height: 100%;
    padding: 1.25rem;
}

.home-kicker {
    margin: 0;
    color: var(--teal);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.home-hero h1 {
    max-width: 12ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 7vw, 6rem);
    font-weight: 600;
    line-height: 0.96;
    letter-spacing: 0.01em;
    background: linear-gradient(100deg,
        var(--text) 0%, var(--text) 32%,
        var(--teal) 46%, var(--white) 52%, var(--gold) 60%,
        var(--text) 74%, var(--text) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: keyroll-shimmer 7s ease-in-out infinite;
    filter: drop-shadow(0 14px 36px rgba(var(--black-rgb), 0.5));
}

@keyframes keyroll-shimmer {
    0%   { background-position: 120% 50%; }
    100% { background-position: -20% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero h1 { animation: none; }
}

.home-lead {
    max-width: 39rem;
    margin: 0;
    color: rgba(233, 221, 196, 0.88);
    font-size: 1.08rem;
    line-height: 1.65;
}

.home-actions,
.home-trust-row,
.home-category-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.home-actions .button {
    min-width: 9rem;
}

.home-trust-row span,
.home-trust-row .home-trust-link {
    min-height: 2rem;
    padding: 0.44rem 0.68rem;
    color: rgba(233, 221, 196, 0.78);
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 999px;
    background: rgba(11, 8, 5, 0.5);
    backdrop-filter: blur(10px);
    font-size: 0.82rem;
    font-weight: 700;
}

.home-trust-row .home-trust-link {
    text-decoration: none;
    transition: color 140ms ease, border-color 140ms ease;
}

.home-trust-row .home-trust-link:hover {
    color: var(--gold);
    border-color: rgba(var(--gold-rgb), 0.5);
}

.home-player-card {
    display: grid;
    gap: 0.8rem;
    align-self: stretch;
    min-height: 0;
    padding: 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 8px;
    background:
        linear-gradient(155deg, rgba(27, 19, 11, 0.88), rgba(11, 8, 5, 0.74)),
        rgba(11, 8, 5, 0.76);
    box-shadow: 0 24px 70px rgba(var(--black-rgb), 0.34);
    backdrop-filter: blur(16px);
}

.home-card-head,
.home-balance-pill,
.home-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.home-card-head span,
.home-balance-pill span,
.home-player-grid span,
.home-jackpot span,
.home-panel-title span,
.home-promo span,
.home-game-copy > span,
.home-feed-list span {
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.home-card-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-balance-pill {
    min-height: 4.4rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--gold-rgb), 0.24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--gold-rgb), 0.12), rgba(var(--teal-rgb), 0.06)),
        rgba(var(--white-rgb), 0.045);
}

.home-balance-pill strong,
.home-jackpot strong {
    color: var(--gold);
    font-size: 1.45rem;
}

.home-player-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.home-player-grid div {
    min-height: 4.2rem;
    padding: 0.78rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.045);
}

.home-player-grid strong,
.home-player-grid span {
    display: block;
}

.home-player-grid strong {
    margin-top: 0.3rem;
    font-size: 1rem;
}

.home-jackpot {
    display: grid;
    gap: 0.25rem;
    margin-top: auto;
    padding: 0.9rem;
    border: 1px solid rgba(var(--teal-rgb), 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--teal-rgb), 0.1), rgba(var(--rose-rgb), 0.08)),
        rgba(11, 8, 5, 0.46);
}

.home-promo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.home-promo {
    position: relative;
    display: grid;
    gap: 0.35rem;
    min-height: 8.2rem;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(var(--panel-deep-rgb), 0.96), rgba(11, 8, 5, 0.88)),
        rgba(var(--white-rgb), 0.035);
}

.home-promo::after {
    content: "";
    position: absolute;
    right: -3rem;
    top: -3.8rem;
    width: 8rem;
    aspect-ratio: 1;
    border: 1.1rem solid rgba(var(--white-rgb), 0.06);
    border-radius: 999px;
}

.home-promo:hover,
.home-game-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--gold-rgb), 0.34);
}

.home-promo,
.home-game-card,
.home-category-row a,
.home-feed-list div,
.home-activity-panel {
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.home-promo-primary {
    border-color: rgba(var(--teal-rgb), 0.24);
    background:
        linear-gradient(140deg, rgba(var(--teal-rgb), 0.18), rgba(var(--gold-rgb), 0.12)),
        rgba(11, 8, 5, 0.88);
}

.home-promo strong,
.home-panel-title strong {
    position: relative;
    z-index: 1;
    font-size: 1.04rem;
}

.home-promo small,
.home-activity-panel p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(216, 201, 168, 0.78);
    line-height: 1.55;
}

.home-section {
    display: grid;
    gap: 1rem;
}

.home-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.home-section-head h2 {
    margin: 0.25rem 0 0;
    font-size: 2rem;
    line-height: 1.1;
}

.home-category-row {
    justify-content: flex-end;
}

.home-category-row a {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.55rem 0.8rem;
    color: rgba(233, 221, 196, 0.76);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 999px;
    background: rgba(var(--white-rgb), 0.035);
    font-weight: 750;
}

.home-category-row a:hover {
    color: var(--text);
    background: rgba(var(--teal-rgb), 0.12);
}

.home-game-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.home-game-card {
    position: relative;
    display: grid;
    grid-column: span 3;
    grid-template-rows: 9rem minmax(0, 1fr);
    min-height: 22rem;
    overflow: hidden;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(var(--panel-deep-rgb), 0.98), rgba(14, 10, 6, 0.96)),
        rgba(var(--white-rgb), 0.035);
    box-shadow: 0 20px 56px rgba(var(--black-rgb), 0.2);
}

.home-game-featured {
    grid-column: span 6;
}

.home-game-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(var(--white-rgb), 0.08), transparent 28%),
        linear-gradient(180deg, transparent, rgba(11, 8, 5, 0.68));
    opacity: 0.72;
}

.home-game-art,
.home-game-copy {
    position: relative;
    z-index: 1;
}

.home-game-art {
    display: grid;
    place-items: center;
    min-height: 9rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.07);
}

.home-game-copy {
    display: grid;
    gap: 0.45rem;
    align-content: end;
    min-height: 0;
    padding: 1rem;
}

.home-game-copy h3 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.12;
}

.home-game-copy p {
    min-height: 3.2rem;
    margin: 0;
    color: rgba(216, 201, 168, 0.78);
    line-height: 1.5;
}

.home-game-copy strong {
    width: fit-content;
    color: var(--gold);
}

.roulette-art span {
    display: block;
    width: 7.6rem;
    aspect-ratio: 1;
    border: 0.72rem solid rgba(120, 53, 15, 0.96);
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, #181106 0 22%, var(--gold) 23% 26%, transparent 27%),
        conic-gradient(#059669 0 9.7deg, var(--panel-deep) 9.7deg 19.4deg, var(--rose-deep) 19.4deg 29.1deg, var(--panel-deep) 29.1deg 38.8deg, var(--rose-deep) 38.8deg 48.5deg, var(--panel-deep) 48.5deg 58.2deg, var(--rose-deep) 58.2deg 67.9deg, var(--panel-deep) 67.9deg 77.6deg, var(--rose-deep) 77.6deg 87.3deg, var(--panel-deep) 87.3deg 97deg, var(--rose-deep) 97deg 106.7deg, var(--panel-deep) 106.7deg 116.4deg, var(--rose-deep) 116.4deg 126.1deg, var(--panel-deep) 126.1deg 135.8deg, var(--rose-deep) 135.8deg 145.5deg, var(--panel-deep) 145.5deg 155.2deg, var(--rose-deep) 155.2deg 164.9deg, var(--panel-deep) 164.9deg 174.6deg, var(--rose-deep) 174.6deg 184.3deg, var(--panel-deep) 184.3deg 194deg, var(--rose-deep) 194deg 203.7deg, var(--panel-deep) 203.7deg 213.4deg, var(--rose-deep) 213.4deg 223.1deg, var(--panel-deep) 223.1deg 232.8deg, var(--rose-deep) 232.8deg 242.5deg, var(--panel-deep) 242.5deg 252.2deg, var(--rose-deep) 252.2deg 261.9deg, var(--panel-deep) 261.9deg 271.6deg, var(--rose-deep) 271.6deg 281.3deg, var(--panel-deep) 281.3deg 291deg, var(--rose-deep) 291deg 300.7deg, var(--panel-deep) 300.7deg 310.4deg, var(--rose-deep) 310.4deg 320.1deg, var(--panel-deep) 320.1deg 329.8deg, var(--rose-deep) 329.8deg 339.5deg, var(--panel-deep) 339.5deg 349.2deg, var(--rose-deep) 349.2deg 360deg);
    box-shadow: 0 18px 45px rgba(var(--black-rgb), 0.38);
}

.spinner-art {
    display: flex;
    gap: 0.55rem;
}

.spinner-art span {
    width: 4.9rem;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1px solid rgba(var(--white-rgb), 0.13);
    background:
        linear-gradient(45deg, rgba(var(--white-rgb), 0.14), transparent 42%),
        linear-gradient(135deg, var(--rose), var(--rose-deep));
}

.spinner-art span:nth-child(2) {
    background:
        linear-gradient(45deg, rgba(var(--white-rgb), 0.14), transparent 42%),
        linear-gradient(135deg, #463620, #0b0805);
}

.spinner-art span:nth-child(3) {
    background:
        linear-gradient(45deg, rgba(var(--white-rgb), 0.14), transparent 42%),
        linear-gradient(135deg, #34d399, #059669);
}

.crash-art {
    background:
        linear-gradient(transparent 31px, rgba(var(--white-rgb), 0.04) 32px),
        linear-gradient(90deg, transparent 31px, rgba(var(--white-rgb), 0.04) 32px);
    background-size: 32px 32px;
}

.crash-art span {
    position: relative;
    width: 8.8rem;
    height: 4rem;
}

.crash-art span::before {
    content: "";
    position: absolute;
    left: -3.4rem;
    right: 2.4rem;
    bottom: 0.55rem;
    height: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), var(--gold), var(--rose));
    transform: rotate(-19deg);
    transform-origin: right center;
}

.crash-art span::after {
    content: "KR";
    position: absolute;
    right: 0;
    top: 0.55rem;
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 2.3rem;
    color: #0b0805;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), var(--rose));
    font-weight: 950;
    transform: rotate(-13deg);
    box-shadow: 0 0 28px rgba(var(--gold-rgb), 0.28);
}

.dice-art span {
    display: grid;
    place-items: center;
    min-width: 8rem;
    min-height: 4.4rem;
    color: var(--green);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(var(--green-rgb), 0.22) 0 38%, rgba(var(--rose-rgb), 0.28) 38%),
        rgba(var(--white-rgb), 0.04);
    font-size: 2.25rem;
    font-weight: 900;
}

.mines-art {
    grid-template-columns: repeat(3, 2.2rem);
    gap: 0.42rem;
}

.mines-art span {
    width: 2.2rem;
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    background: linear-gradient(145deg, rgba(var(--teal-rgb), 0.24), rgba(27, 19, 11, 0.72));
}

.mines-art span:nth-child(5) {
    background: linear-gradient(145deg, rgba(var(--rose-rgb), 0.7), rgba(127, 29, 29, 0.52));
}

.plinko-art {
    position: relative;
    width: min(10rem, 100%);
    min-height: 7rem;
    background:
        radial-gradient(circle, rgba(var(--gold-rgb), 0.9) 0 0.16rem, transparent 0.18rem) 50% 10% / 2rem 1.1rem,
        radial-gradient(circle, rgba(var(--teal-rgb), 0.82) 0 0.14rem, transparent 0.16rem) 0 0 / 2rem 1.1rem;
}

.plinko-art span {
    position: absolute;
    bottom: 0;
    width: 2.55rem;
    height: 1.55rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(27, 19, 11, 0.96), rgba(48, 36, 20, 0.74));
    box-shadow: inset 0 -6px 0 rgba(var(--black-rgb), 0.18);
}

.plinko-art span:nth-child(1) {
    left: 0.4rem;
    background: linear-gradient(145deg, var(--rose), var(--rose-deep));
}

.plinko-art span:nth-child(2) {
    left: 50%;
    background: linear-gradient(145deg, var(--gold), var(--teal));
    transform: translateX(-50%);
}

.plinko-art span:nth-child(3) {
    right: 0.4rem;
    background: linear-gradient(145deg, #34d399, #047857);
}

.blackjack-art {
    display: flex;
    gap: 0;
}

.blackjack-art span {
    display: grid;
    place-items: center;
    width: 4.2rem;
    height: 5.6rem;
    border: 1px solid rgba(var(--white-rgb), 0.2);
    border-radius: 8px;
    background: var(--text);
    color: var(--rose-deep);
    font-size: 2rem;
    font-weight: 950;
    box-shadow: 0 16px 34px rgba(var(--black-rgb), 0.22);
}

.blackjack-art span:first-child {
    transform: rotate(-8deg) translateX(0.25rem);
}

.blackjack-art span:last-child {
    color: #0b0805;
    transform: rotate(8deg) translateX(-0.25rem);
}

.home-bottom-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr;
    gap: 1rem;
}

.home-activity-panel {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    min-height: 12rem;
    padding: 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--panel-deep-rgb), 0.95), rgba(11, 8, 5, 0.9));
}

.home-feed-list {
    display: grid;
    gap: 0.55rem;
}

.home-feed-list div {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.6fr) minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    min-height: 3rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.035);
}

.home-feed-list strong {
    color: var(--text);
}

.home-feed-list small {
    color: rgba(216, 201, 168, 0.72);
    font-weight: 700;
}

.home-progress-bar {
    height: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--white-rgb), 0.08);
}

.home-progress-bar span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--teal), var(--green), var(--gold));
}

@media (max-width: 1380px) {
    .home-promo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-game-card,
    .home-game-featured {
        grid-column: span 4;
    }
}

@media (max-width: 1120px) {
    .home-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .home-player-card {
        max-width: 720px;
    }

    .home-game-card,
    .home-game-featured {
        grid-column: span 6;
    }

    .home-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .casino-home {
        padding: 0.85rem;
    }

    .home-hero {
        padding: 0.85rem;
        background-position: 62% center;
    }

    .home-hero-copy {
        padding: 0.65rem;
    }

    .home-hero h1 {
        font-size: 3.1rem;
    }

    .home-lead {
        font-size: 1rem;
    }

    .home-section-head {
        display: grid;
        align-items: start;
    }

    .home-category-row {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }

    .home-category-row a {
        flex: 0 0 auto;
    }

    .home-promo-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .home-hero h1 {
        font-size: 2.55rem;
    }

    .home-actions .button {
        width: 100%;
    }

    .home-trust-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-trust-row span,
    .home-trust-row .home-trust-link {
        text-align: center;
    }

    .home-player-grid {
        grid-template-columns: 1fr;
    }

    .home-game-grid {
        grid-template-columns: 1fr;
    }

    .home-game-card,
    .home-game-featured {
        grid-column: auto;
        min-height: 20.5rem;
    }

    .home-feed-list div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* Rebuilt blackjack table — KeyRoll luxury felt */
body[data-game="blackjack"] .game-panel.blackjack-page {
    --bj-felt-1: #14583f;
    --bj-felt-2: #0d3c2b;
    --bj-felt-3: #06201a;
    --bj-red: #c0392b;
    --bj-ink: #1a1208;
    --bj-card-w: clamp(3.7rem, 5vw, 5.35rem);
    --bj-card-radius: 0.62rem;
    --bj-back:
        radial-gradient(circle at 50% 36%, rgba(var(--gold-rgb), 0.32), transparent 54%),
        repeating-linear-gradient(45deg, rgba(var(--gold-rgb), 0.12) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(-45deg, rgba(var(--white-rgb), 0.05) 0 6px, transparent 6px 12px),
        linear-gradient(150deg, #1d140b, #0b0805);
    overflow: hidden;
    border-color: rgba(var(--gold-rgb), 0.16);
    background:
        radial-gradient(circle at 78% 8%, rgba(var(--gold-rgb), 0.08), transparent 24rem),
        radial-gradient(circle at 12% 92%, rgba(var(--teal-rgb), 0.06), transparent 22rem),
        linear-gradient(150deg, rgba(15, 11, 6, 0.98), rgba(26, 18, 10, 0.97));
}

body[data-game="blackjack"] .blackjack-shell {
    display: grid;
    gap: 0.85rem;
    padding: clamp(0.7rem, 1.4vw, 1.05rem);
}

/* Header — kept consistent with the rest of the games */
body[data-game="blackjack"] .blackjack-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    min-width: 0;
}

body[data-game="blackjack"] .blackjack-title-stack {
    flex: 1 1 240px;
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

body[data-game="blackjack"] .blackjack-title-stack h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: 0.01em;
}

body[data-game="blackjack"] .blackjack-stat-strip {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-width: 0;
}

body[data-game="blackjack"] .blackjack-stat-pill {
    display: grid;
    gap: 0.3rem;
    align-content: center;
    min-height: 3.15rem;
    margin: 0;
    padding: 0.7rem 0.78rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    color: var(--text);
    text-align: left;
    background: rgba(var(--white-rgb), 0.035);
}

body[data-game="blackjack"] .blackjack-stat-pill > span {
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body[data-game="blackjack"] .blackjack-stat-pill strong {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

body[data-game="blackjack"] .blackjack-stat-pill code {
    display: block;
    word-break: break-all;
    font-size: 0.78rem;
}

body[data-game="blackjack"] .blackjack-fair {
    position: relative;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

body[data-game="blackjack"] .blackjack-fair:hover {
    border-color: rgba(var(--gold-rgb), 0.4);
    background: rgba(var(--gold-rgb), 0.06);
}

body[data-game="blackjack"] .blackjack-fair .blackjack-fair-copied {
    position: absolute;
    top: -0.72rem;
    right: 0.4rem;
    padding: 0.12rem 0.42rem;
    border-radius: 6px;
    color: #0f0b06;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
    background: var(--gold);
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

body[data-game="blackjack"] .blackjack-fair.is-copied .blackjack-fair-copied {
    opacity: 1;
    transform: translateY(0);
}

body[data-game="blackjack"] .blackjack-action-head span {
    display: block;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Stage + felt */
body[data-game="blackjack"] .blackjack-stage {
    min-width: 0;
}

body[data-game="blackjack"] .bj-table {
    position: relative;
    width: 100%;
    height: clamp(354px, 50vh, 536px);
    border-radius: 16px;
    isolation: isolate;
}

body[data-game="blackjack"] .bj-felt {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.7rem;
    height: 100%;
    padding: clamp(1.15rem, 2.6vw, 2.1rem) clamp(1rem, 4vw, 3rem);
    overflow: hidden;
    border: 1px solid rgba(var(--gold-rgb), 0.22);
    border-radius: 16px;
    background:
        radial-gradient(ellipse 76% 58% at 50% 30%, rgba(var(--white-rgb), 0.08), transparent 70%),
        radial-gradient(ellipse 90% 80% at 50% 8%, var(--bj-felt-1), transparent 72%),
        radial-gradient(ellipse 120% 100% at 50% 120%, var(--bj-felt-3), transparent 70%),
        linear-gradient(160deg, var(--bj-felt-2), var(--bj-felt-3));
    box-shadow:
        inset 0 0 5px rgba(var(--gold-rgb), 0.18),
        inset 0 0 120px rgba(0, 0, 0, 0.5),
        0 26px 70px rgba(0, 0, 0, 0.4);
    isolation: isolate;
}

/* Curved table edge near the player */
body[data-game="blackjack"] .bj-rail {
    position: absolute;
    inset: -34% 5% 12% 5%;
    z-index: 0;
    border: 1.5px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 50%;
    box-shadow:
        inset 0 -1px 0 rgba(var(--gold-rgb), 0.12),
        inset 0 0 60px rgba(0, 0, 0, 0.32);
    pointer-events: none;
}

/* Card shoe in the corner */
body[data-game="blackjack"] .bj-shoe {
    position: absolute;
    top: clamp(0.7rem, 2vh, 1.15rem);
    right: clamp(0.8rem, 2.4vw, 1.6rem);
    z-index: 1;
    display: grid;
    place-items: center;
    width: calc(var(--bj-card-w) * 0.82);
    aspect-ratio: 0.69;
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    border-radius: var(--bj-card-radius);
    color: var(--gold);
    background: var(--bj-back);
    box-shadow:
        -0.22rem 0.22rem 0 rgba(var(--white-rgb), 0.06),
        -0.44rem 0.44rem 0 rgba(var(--white-rgb), 0.03),
        0 14px 34px rgba(0, 0, 0, 0.4);
    transform: rotate(3deg);
}

body[data-game="blackjack"] .bj-shoe span {
    display: grid;
    place-items: center;
    width: 1.85rem;
    aspect-ratio: 1;
    border: 1px solid rgba(var(--gold-rgb), 0.45);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(var(--gold-rgb), 0.1);
}

/* Hands */
body[data-game="blackjack"] .bj-hand {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-height: 0;
}

body[data-game="blackjack"] .bj-hand-dealer {
    justify-content: flex-start;
}

body[data-game="blackjack"] .bj-hand-player {
    justify-content: flex-end;
}

body[data-game="blackjack"] .bj-hand-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.28rem 0.85rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 999px;
    background: rgba(7, 5, 3, 0.55);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3px);
}

body[data-game="blackjack"] .bj-hand-name {
    color: rgba(var(--white-rgb), 0.62);
    font-size: 0.7rem;
    font-weight: 760;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body[data-game="blackjack"] .bj-hand-value {
    display: inline-flex;
    align-items: baseline;
    min-width: 1.5rem;
    justify-content: center;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    animation: bj-pop 360ms cubic-bezier(.2, .9, .25, 1) both;
}

body[data-game="blackjack"] .bj-hand-value.is-empty {
    color: rgba(var(--white-rgb), 0.5);
    font-family: var(--font-body, inherit);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: none;
}

body[data-game="blackjack"] .bj-value-more {
    margin-left: 0.08rem;
    color: rgba(var(--gold-rgb), 0.55);
    font-size: 0.8rem;
    font-style: normal;
}

/* Cards */
body[data-game="blackjack"] .bj-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--bj-card-w) / 0.69);
    padding-inline: 0.6rem;
    perspective: 1200px;
}

body[data-game="blackjack"] .bj-card {
    position: relative;
    flex: 0 0 var(--bj-card-w);
    width: var(--bj-card-w);
    aspect-ratio: 0.69;
    margin-left: -1.5rem;
    border-radius: var(--bj-card-radius);
    color: var(--bj-ink);
    background:
        radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.95), transparent 42%),
        linear-gradient(150deg, #fffdf7 0%, #f4ead2 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 16px 30px rgba(0, 0, 0, 0.34),
        0 2px 6px rgba(0, 0, 0, 0.28);
    transform-origin: 50% 155%;
    transform: rotate(calc(var(--card-fan) * 4deg));
    transform-style: preserve-3d;
}

body[data-game="blackjack"] .bj-card:first-child {
    margin-left: 0;
}

body[data-game="blackjack"] .bj-card.is-red {
    color: var(--bj-red);
}

body[data-game="blackjack"] .bj-corner {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 0.02em;
    font-weight: 800;
    line-height: 0.92;
}

body[data-game="blackjack"] .bj-corner b {
    font-size: clamp(0.62rem, 1.05vw, 0.82rem);
}

body[data-game="blackjack"] .bj-corner i {
    font-size: clamp(0.56rem, 0.95vw, 0.74rem);
    font-style: normal;
}

body[data-game="blackjack"] .bj-corner-tl {
    top: 0.34rem;
    left: 0.36rem;
}

body[data-game="blackjack"] .bj-corner-br {
    right: 0.36rem;
    bottom: 0.34rem;
    transform: rotate(180deg);
}

body[data-game="blackjack"] .bj-pip {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(1.55rem, 2.7vw, 2.3rem);
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

/* Card back */
body[data-game="blackjack"] .bj-card--back {
    color: rgba(var(--gold-rgb), 0.92);
    background: var(--bj-back);
    box-shadow:
        0 0 0 1px rgba(var(--gold-rgb), 0.18) inset,
        0 16px 30px rgba(0, 0, 0, 0.4);
}

body[data-game="blackjack"] .bj-card-back-art {
    position: absolute;
    inset: 0.34rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--gold-rgb), 0.32);
    border-radius: calc(var(--bj-card-radius) - 0.2rem);
}

body[data-game="blackjack"] .bj-card-back-mono {
    font-family: var(--font-display);
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(var(--gold-rgb), 0.85);
}

/* Deal + flip animations */
body[data-game="blackjack"] .bj-card { --deal-x: 16rem; --deal-y: -7rem; }

body[data-game="blackjack"] .bj-card.is-dealing {
    animation: bj-deal 520ms cubic-bezier(.16, .84, .26, 1) both;
    animation-delay: calc(var(--deal-order, 0) * 130ms);
}

body[data-game="blackjack"] .bj-card.is-flipping {
    animation: bj-flip-front 560ms cubic-bezier(.3, .8, .35, 1) both;
    animation-delay: calc(var(--deal-order, 0) * 130ms);
}

body[data-game="blackjack"] .bj-card.is-flipping::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--bj-back);
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.2) inset;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    animation: bj-flip-cover 560ms cubic-bezier(.3, .8, .35, 1) both;
    animation-delay: calc(var(--deal-order, 0) * 130ms);
}

@keyframes bj-deal {
    0% {
        opacity: 0;
        transform: translate(var(--deal-x), var(--deal-y)) rotate(18deg) scale(0.78);
    }
    62% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(calc(var(--card-fan) * 4deg)) scale(1);
    }
}

@keyframes bj-flip-front {
    0% {
        transform: rotateY(180deg) rotate(calc(var(--card-fan) * 4deg));
    }
    100% {
        transform: rotateY(0deg) rotate(calc(var(--card-fan) * 4deg));
    }
}

@keyframes bj-flip-cover {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

@keyframes bj-pop {
    0% {
        opacity: 0;
        transform: translateY(0.25rem) scale(0.82);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Bet chip in the player circle */
body[data-game="blackjack"] .bj-chip {
    position: absolute;
    left: clamp(0.5rem, 6%, 3rem);
    bottom: 8%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 999px;
    color: var(--bj-ink);
    font-size: 0.62rem;
    font-weight: 800;
    text-align: center;
    background:
        repeating-conic-gradient(var(--gold) 0deg 18deg, #c98f2e 18deg 36deg);
    box-shadow:
        0 0 0 0.18rem rgba(255, 250, 240, 0.85) inset,
        0 0 0 0.34rem var(--gold) inset,
        0 10px 20px rgba(0, 0, 0, 0.4);
    animation: bj-pop 360ms cubic-bezier(.2, .9, .25, 1) both;
}

body[data-game="blackjack"] .bj-chip span {
    display: grid;
    place-items: center;
    width: 1.95rem;
    aspect-ratio: 1;
    padding: 0.1rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 250, 240, 0.92);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}

/* Center insignia + outcome */
body[data-game="blackjack"] .bj-center {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    gap: 0.22rem;
    min-height: 3.2rem;
    text-align: center;
}

body[data-game="blackjack"] .bj-center-mark {
    color: rgba(var(--gold-rgb), 0.5);
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.7vw, 1.3rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body[data-game="blackjack"] .bj-center-sub {
    color: rgba(var(--white-rgb), 0.3);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

body[data-game="blackjack"] .bj-center.is-outcome {
    animation: bj-pop 420ms cubic-bezier(.2, .9, .25, 1) both;
}

body[data-game="blackjack"] .bj-outcome-head {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--gold);
    text-shadow: 0 2px 18px rgba(var(--gold-rgb), 0.4);
}

body[data-game="blackjack"] .bj-outcome-net {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(var(--white-rgb), 0.78);
}

body[data-game="blackjack"] .bj-felt[data-result="win"] .bj-outcome-head {
    color: var(--green);
    text-shadow: 0 2px 20px rgba(var(--green-rgb), 0.45);
}

body[data-game="blackjack"] .bj-felt[data-result="win"] .bj-outcome-net {
    color: var(--green);
}

body[data-game="blackjack"] .bj-felt[data-result="lose"] .bj-outcome-head {
    color: var(--danger);
    text-shadow: 0 2px 20px rgba(var(--danger-rgb), 0.4);
}

body[data-game="blackjack"] .bj-felt[data-result="lose"] .bj-outcome-net {
    color: rgba(var(--danger-rgb), 0.92);
}

/* Win / lose hand emphasis */
body[data-game="blackjack"] .bj-felt[data-status="active"] .bj-hand-player .bj-cards,
body[data-game="blackjack"] .bj-felt[data-result="win"] .bj-hand-player .bj-cards {
    filter: drop-shadow(0 0 14px rgba(var(--gold-rgb), 0.32));
}

body[data-game="blackjack"] .bj-felt[data-result="win"] .bj-hand-player .bj-cards {
    filter: drop-shadow(0 0 18px rgba(var(--green-rgb), 0.45));
}

body[data-game="blackjack"] .bj-felt[data-result="win"] .bj-hand-player .bj-hand-value {
    color: var(--green);
}

body[data-game="blackjack"] .bj-felt[data-result="lose"] .bj-hand-player {
    opacity: 0.82;
}

body[data-game="blackjack"] .bj-felt[data-result="lose"] .bj-hand-dealer .bj-cards {
    filter: drop-shadow(0 0 16px rgba(var(--danger-rgb), 0.32));
}

/* Console */
body[data-game="blackjack"] .blackjack-console {
    display: grid;
    grid-template-columns: minmax(238px, 0.78fr) minmax(330px, 1.24fr) minmax(238px, 0.78fr);
    gap: 0.7rem;
    align-items: stretch;
}

body[data-game="blackjack"] .blackjack-wager-card,
body[data-game="blackjack"] .blackjack-action-card,
body[data-game="blackjack"] .blackjack-result-box {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    min-height: 9.4rem;
    margin: 0;
    padding: 0.85rem;
    border: 1px solid rgba(var(--gold-rgb), 0.12);
    border-radius: 12px;
    background:
        linear-gradient(160deg, rgba(var(--white-rgb), 0.045), rgba(var(--white-rgb), 0.015));
}

body[data-game="blackjack"] .blackjack-wager-card .field {
    margin: 0;
}

body[data-game="blackjack"] .blackjack-wager-card .quick-bet-buttons {
    margin: 0;
}

body[data-game="blackjack"] .blackjack-wager-card .button,
body[data-game="blackjack"] .blackjack-actions .button {
    min-height: 2.72rem;
}

body[data-game="blackjack"] .blackjack-action-card {
    align-content: stretch;
}

body[data-game="blackjack"] .blackjack-action-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body[data-game="blackjack"] .blackjack-action-head strong {
    color: rgba(var(--white-rgb), 0.8);
    font-size: 0.84rem;
}

body[data-game="blackjack"] .blackjack-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
}

body[data-game="blackjack"] .blackjack-actions .button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--text);
    border-color: rgba(var(--gold-rgb), 0.16);
    background:
        linear-gradient(155deg, rgba(var(--white-rgb), 0.06), rgba(var(--white-rgb), 0.02)),
        rgba(11, 8, 5, 0.4);
    transition: transform 140ms ease, border-color 160ms ease, background 160ms ease;
}

body[data-game="blackjack"] .blackjack-actions .button:not(:disabled):hover {
    border-color: rgba(var(--gold-rgb), 0.5);
    background: rgba(var(--gold-rgb), 0.12);
    transform: translateY(-2px);
}

body[data-game="blackjack"] .blackjack-action-icon {
    position: relative;
    display: inline-block;
    width: 1.05rem;
    aspect-ratio: 1;
}

body[data-game="blackjack"] .blackjack-action-icon.hit::before,
body[data-game="blackjack"] .blackjack-action-icon.hit::after {
    content: "";
    position: absolute;
    inset: 0.14rem;
    border: 1px solid rgba(var(--gold-rgb), 0.85);
    border-radius: 3px;
    background: rgba(var(--gold-rgb), 0.14);
}

body[data-game="blackjack"] .blackjack-action-icon.hit::after {
    transform: translate(0.28rem, -0.2rem) rotate(8deg);
}

body[data-game="blackjack"] .blackjack-action-icon.stand::before {
    content: "";
    position: absolute;
    left: 0.12rem;
    right: 0.12rem;
    top: 0.46rem;
    height: 0.2rem;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 -0.34rem 0 rgba(var(--gold-rgb), 0.55), 0 0.34rem 0 rgba(var(--gold-rgb), 0.55);
}

body[data-game="blackjack"] .blackjack-action-icon.double::before,
body[data-game="blackjack"] .blackjack-action-icon.double::after {
    content: "";
    position: absolute;
    width: 0.68rem;
    aspect-ratio: 1;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), var(--rose));
}

body[data-game="blackjack"] .blackjack-action-icon.double::before {
    left: 0.04rem;
    bottom: 0.08rem;
}

body[data-game="blackjack"] .blackjack-action-icon.double::after {
    right: 0.04rem;
    top: 0.08rem;
}

body[data-game="blackjack"] .blackjack-result-box {
    align-content: center;
    gap: 0.7rem;
}

body[data-game="blackjack"] .blackjack-result-box .result-title {
    margin: 0;
}

body[data-game="blackjack"] .blackjack-result-box .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-game="blackjack"] .blackjack-result-box .stat {
    min-height: 3.9rem;
}

/* Responsive */
@media (max-width: 1320px) {
    body[data-game="blackjack"] .blackjack-console {
        grid-template-columns: minmax(238px, 0.74fr) minmax(0, 1.26fr);
    }

    body[data-game="blackjack"] .blackjack-result-box {
        grid-column: 1 / -1;
        min-height: auto;
    }
}

@media (max-width: 980px) {
    body[data-game="blackjack"] .blackjack-console {
        grid-template-columns: 1fr;
    }

    body[data-game="blackjack"] .blackjack-stat-strip {
        flex-basis: 100%;
    }

    body[data-game="blackjack"] .bj-table {
        height: clamp(348px, 56vh, 486px);
    }
}

@media (max-width: 620px) {
    body[data-game="blackjack"] .blackjack-shell {
        padding: 0.7rem;
    }

    body[data-game="blackjack"] .blackjack-actions,
    body[data-game="blackjack"] .blackjack-result-box .stat-row {
        grid-template-columns: 1fr;
    }

    body[data-game="blackjack"] .blackjack-actions {
        grid-template-columns: repeat(3, 1fr);
    }

    body[data-game="blackjack"] .bj-table {
        height: clamp(300px, 46vh, 400px);
    }

    body[data-game="blackjack"] .bj-card {
        margin-left: -1.85rem;
    }

    body[data-game="blackjack"] .bj-chip {
        width: 2.5rem;
    }

    body[data-game="blackjack"] .bj-chip span {
        width: 1.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-game="blackjack"] .bj-card.is-dealing,
    body[data-game="blackjack"] .bj-card.is-flipping,
    body[data-game="blackjack"] .bj-card.is-flipping::after,
    body[data-game="blackjack"] .bj-hand-value,
    body[data-game="blackjack"] .bj-center.is-outcome,
    body[data-game="blackjack"] .bj-chip {
        animation: none !important;
    }

    body[data-game="blackjack"] .bj-card.is-flipping::after {
        display: none;
    }

    body[data-game="blackjack"] .blackjack-actions .button:not(:disabled):hover {
        transform: none;
    }
}

/* Responsive app chrome */
.topbar {
    z-index: 30;
}

.topbar-inner {
    grid-template-columns: minmax(150px, 1fr) auto minmax(210px, 1fr);
    gap: 0.8rem;
}

.brand {
    overflow: hidden;
}

.brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-strip {
    min-width: 0;
    /* Pin to the right column so guests (no balance pill in the middle column)
       keep their controls on the right instead of collapsing into the centre. */
    grid-column: 3;
}

.auth-actions,
.guest-actions {
    min-width: 0;
}

/* Logged-out controls: Log in + Register as compact nav buttons on the right. */
.guest-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topbar-auth-button {
    min-height: 2.35rem;
    padding: 0.42rem 0.95rem;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 650;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .topbar-auth-button {
        padding: 0.4rem 0.7rem;
        font-size: 0.84rem;
    }
}

.topbar-balance {
    max-width: 100%;
    white-space: nowrap;
}

.account-trigger {
    max-width: min(15rem, 100%);
}

.account-trigger-auth {
    min-width: 10rem;
}

.account-identity {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.45rem;
}

.account-level-inline {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    color: var(--level-accent, #a8966f);
    border: 1px solid var(--level-border, rgba(168, 150, 111, 0.32));
    border-radius: 6px;
    background: linear-gradient(135deg, var(--level-surface, rgba(168, 150, 111, 0.12)), rgba(var(--white-rgb), 0.04));
    padding: 0.14rem 0.36rem;
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1.15;
    box-shadow: 0 0 14px var(--level-shadow, rgba(168, 150, 111, 0.12));
}

.account-identity .js-account-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-trigger-auth .menu-arrow {
    flex: 0 0 auto;
}

.account-strip .account-dropdown {
    right: 0;
    left: auto;
}

.level-badge {
    display: none !important;
}

@media (max-width: 1040px) {
    .topbar-inner {
        grid-template-columns: minmax(142px, 1fr) auto minmax(170px, 1fr);
        gap: 0.6rem;
    }

    .sound-control:hover .sound-slider-wrap,
    .sound-control:focus-within .sound-slider-wrap {
        width: 4.6rem;
    }

    .account-trigger {
        min-width: 0;
    }
}

@media (max-width: 820px) {
    :root {
        --topbar-height: 76px;
    }

    .topbar-inner {
        min-height: var(--topbar-height);
        padding-inline: 0.75rem;
        grid-template-columns: minmax(132px, 1fr) auto minmax(136px, 1fr);
    }

    .brand img {
        width: 30px;
        height: 30px;
    }

    .brand span {
        max-width: 10rem;
    }

    .topbar-balance {
        min-height: 2.35rem;
        padding: 0.4rem 0.62rem;
    }

    .topbar-balance span {
        display: none;
    }

    .account-strip {
        gap: 0.45rem;
    }

    .account-trigger-auth {
        min-width: 8.8rem;
    }

    .game-sidebar {
        position: sticky;
        top: var(--topbar-height);
        z-index: 24;
        display: grid;
        /* Cap the single column at the viewport so the tab strip scrolls inside
           itself instead of inflating the whole page sideways. */
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
        padding: 0.48rem 0.65rem 0.58rem;
        background:
            linear-gradient(180deg, rgba(11, 8, 5, 0.96), rgba(11, 8, 5, 0.9)),
            rgba(11, 8, 5, 0.94);
        backdrop-filter: blur(16px);
    }

    .rail-switch {
        width: min(100%, 20rem);
        margin: 0;
        padding: 0.2rem;
        justify-self: start;
    }

    .rail-tab {
        min-height: 2rem;
        padding: 0.38rem 0.7rem;
        font-size: 0.84rem;
    }

    .game-sidebar-title {
        display: none;
    }

    .game-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.36rem;
        width: auto;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 1.8rem), transparent 100%);
        mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 1.8rem), transparent 100%);
    }

    .game-tabs::-webkit-scrollbar {
        display: none;
    }

    .game-tabs a {
        flex: 0 0 auto;
        min-width: auto;
        min-height: 2.35rem;
        padding: 0.55rem 0.78rem;
        justify-content: center;
        white-space: nowrap;
    }

    .chat-panel {
        height: min(420px, calc(100vh - var(--topbar-height) - 5rem));
        min-height: 300px;
        padding-top: 0.2rem;
    }
}

@media (max-width: 620px) {
    :root {
        --topbar-height: 118px;
    }

    .topbar-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand account"
            "balance balance";
        align-content: center;
        row-gap: 0.55rem;
        min-height: var(--topbar-height);
        padding-block: 0.62rem;
    }

    .brand {
        grid-area: brand;
        justify-self: start;
    }

    .brand span {
        max-width: 9.2rem;
    }

    .account-strip {
        grid-area: account;
        justify-self: end;
    }

    .topbar-balance {
        grid-area: balance;
        justify-self: stretch;
        justify-content: center;
        min-height: 2.2rem;
    }

    .account-trigger-auth {
        max-width: 9.5rem;
        min-width: 0;
    }

    .account-level-inline {
        padding-inline: 0.28rem;
    }

    .game-sidebar {
        top: var(--topbar-height);
        padding: 0.42rem 0.55rem 0.5rem;
    }

    .rail-switch {
        width: 100%;
    }

    .game-tabs a {
        min-height: 2.25rem;
        padding: 0.5rem 0.7rem;
        font-size: 0.86rem;
    }
}

@media (max-width: 430px) {
    .brand span {
        max-width: 7.4rem;
    }

    .sound-control {
        height: 2.45rem;
    }

    .sound-toggle {
        width: 2.2rem;
        height: 2.2rem;
    }

    /* On phones the hover slider can't reveal — keep just the mute button. */
    .sound-slider-wrap,
    .sound-control:hover .sound-slider-wrap,
    .sound-control:focus-within .sound-slider-wrap {
        width: 0;
        margin-right: 0;
        opacity: 0;
    }

    .account-trigger {
        min-height: 2.45rem;
        padding: 0.55rem 0.58rem;
    }

    .account-trigger-auth {
        max-width: 8.2rem;
    }

    .account-level-inline {
        font-size: 0.72rem;
    }

    .account-dropdown {
        width: min(92vw, 16rem);
    }
}

/* =========================================================================
   AUTH PAGES — login / register
   A centered two-panel card (no games/chat rail) with a compact version of the
   site footer, refined visuals + a gentle entrance animation. Scoped to the
   auth pages so nothing else is affected.
   ========================================================================= */
body[data-active="login"],
body[data-active="register"] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* No games/chat rail while signing in. */
body[data-active="login"] .game-sidebar,
body[data-active="register"] .game-sidebar {
    display: none;
}

/* The body flexes between topbar and footer; the card centers in the gap. */
body[data-active="login"] .page-shell,
body[data-active="register"] .page-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

body[data-active="login"] .page-content,
body[data-active="register"] .page-content {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vh, 2.5rem) var(--content-gap);
}

body[data-active="login"] .flash-slot,
body[data-active="register"] .flash-slot {
    flex: 0 0 auto;
}

body[data-active="login"] .site-footer,
body[data-active="register"] .site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 1rem var(--content-gap) var(--content-gap);
    text-align: left;
}

body[data-active="login"] .footer-inner,
body[data-active="register"] .footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1rem;
}

body[data-active="login"] .footer-logo img,
body[data-active="register"] .footer-logo img {
    width: 124px;
}

body[data-active="login"] .footer-brand,
body[data-active="register"] .footer-brand {
    gap: 0.65rem;
}

body[data-active="login"] .footer-brand p,
body[data-active="register"] .footer-brand p {
    font-size: 0.84rem;
}

body[data-active="login"] .footer-safety,
body[data-active="register"] .footer-safety {
    grid-column: 1 / -1;
    padding: 0.85rem;
}

body[data-active="login"] .footer-bottom,
body[data-active="register"] .footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    margin-top: 0.9rem;
}

body[data-active="login"] .footer-legal,
body[data-active="register"] .footer-legal {
    justify-content: flex-start;
}

@media (max-width: 760px) {
    body[data-active="login"] .footer-inner,
    body[data-active="register"] .footer-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- The unified card ---- */
body[data-active="login"] .auth-wrap,
body[data-active="register"] .auth-wrap {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    width: min(940px, 100%);
    margin: 0;
    align-items: stretch;
    border: 1px solid rgba(var(--gold-rgb), 0.16);
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(28, 20, 11, 0.97), rgba(17, 12, 7, 0.97));
    box-shadow:
        0 44px 130px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(var(--white-rgb), 0.05);
    animation: auth-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(16px) scale(0.992); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body[data-active="login"] .auth-wrap,
    body[data-active="register"] .auth-wrap { animation: none; }
}

/* ---- Left: brand / art ---- */
body[data-active="login"] .auth-art,
body[data-active="register"] .auth-art {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.8rem;
    min-height: 0;
    padding: clamp(2rem, 3.4vw, 3rem);
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    background:
        radial-gradient(circle at 82% -10%, rgba(var(--gold-rgb), 0.20), transparent 52%),
        radial-gradient(circle at -10% 110%, rgba(var(--teal-rgb), 0.14), transparent 55%),
        linear-gradient(160deg, rgba(40, 28, 14, 0.55), rgba(12, 9, 5, 0.72)),
        url('/assets/img/table-pattern.svg') center / cover;
}

body[data-active="login"] .auth-art::after,
body[data-active="register"] .auth-art::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.42);
}

body[data-active="login"] .auth-art > *,
body[data-active="register"] .auth-art > * {
    position: relative;
    z-index: 1;
}

body[data-active="login"] .auth-logo,
body[data-active="register"] .auth-logo {
    display: inline-flex;
    align-items: center;
}

body[data-active="login"] .auth-logo-img,
body[data-active="register"] .auth-logo-img {
    width: clamp(150px, 14vw, 188px);
    height: auto;
    filter: drop-shadow(0 0 20px rgba(var(--gold-rgb), 0.30));
}

body[data-active="login"] .auth-tagline,
body[data-active="register"] .auth-tagline {
    margin: 0;
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    line-height: 1.1;
}

body[data-active="login"] .auth-sub,
body[data-active="register"] .auth-sub {
    margin: 0.7rem 0 0;
    max-width: 32ch;
    color: var(--muted);
    line-height: 1.6;
}

/* ---- Right: form ---- */
body[data-active="login"] .auth-panel,
body[data-active="register"] .auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: clamp(1.9rem, 3vw, 2.9rem);
    border: 0;
    border-left: 1px solid rgba(var(--white-rgb), 0.06);
    border-radius: 0;
    background: rgba(11, 8, 5, 0.32);
    box-shadow: none;
}

body[data-active="login"] .auth-panel-inner,
body[data-active="register"] .auth-panel-inner {
    width: 100%;
}

body[data-active="login"] .auth-panel h1,
body[data-active="register"] .auth-panel h1 {
    margin: 0.1rem 0 0;
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1;
}

body[data-active="login"] .auth-form,
body[data-active="register"] .auth-form {
    margin-top: 1.3rem;
}

/* Remember-me row */
.auth-remember {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.1rem 0 1.2rem;
    color: var(--muted);
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
}

.auth-remember:hover {
    color: var(--text);
}

.auth-remember input[type="checkbox"],
.check-row input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    accent-color: var(--gold);
    cursor: pointer;
}

/* Gold focus ring on the form fields. */
body[data-active="login"] .field input,
body[data-active="register"] .field input,
body[data-active="register"] .field select {
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body[data-active="login"] .field input:focus,
body[data-active="register"] .field input:focus,
body[data-active="register"] .field select:focus {
    border-color: rgba(var(--gold-rgb), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.14);
    outline: none;
}

/* ---- Mobile: stack to a single form card, drop the art panel ---- */
@media (max-width: 760px) {
    body[data-active="login"] .auth-wrap,
    body[data-active="register"] .auth-wrap {
        grid-template-columns: 1fr;
        width: min(440px, 100%);
    }

    body[data-active="login"] .auth-art,
    body[data-active="register"] .auth-art {
        display: none;
    }

    body[data-active="login"] .auth-panel,
    body[data-active="register"] .auth-panel {
        border-left: 0;
    }
}

/* ==========================================================================
   PROVABLY FAIR page (/provably-fair/) — seed manager, per-game verifier.
   Everything scoped under .fair-page.
   ========================================================================== */

body[data-active="provably-fair"] .page-content {
    min-width: 0;
}

.fair-page {
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    margin: 0 auto;
    padding: var(--content-gap);
}

.fair-seeds-card,
.fair-games {
    scroll-margin-top: calc(var(--topbar-height, 72px) + 1rem);
}

.fair-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: clamp(1rem, 2.4vw, 1.6rem);
    overflow: hidden;
    padding: clamp(1.25rem, 4vw, 2.6rem);
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(11, 8, 5, 0.94) 0%, rgba(11, 8, 5, 0.78) 54%, rgba(11, 8, 5, 0.58) 100%),
        linear-gradient(180deg, rgba(11, 8, 5, 0.18), rgba(11, 8, 5, 0.9)),
        url('/assets/img/table-pattern.svg') center / cover no-repeat,
        #120d06;
    box-shadow: 0 28px 90px rgba(var(--black-rgb), 0.4);
}

.fair-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(var(--white-rgb), 0.045) 1px, transparent 1px),
        linear-gradient(rgba(var(--white-rgb), 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.36;
    mask-image: linear-gradient(90deg, rgba(var(--black-rgb), 0.72), transparent 78%);
}

.fair-hero-copy,
.fair-proof-card {
    position: relative;
    z-index: 1;
}

.fair-hero-copy {
    display: grid;
    gap: 1rem;
    align-content: end;
    min-width: 0;
    max-width: 780px;
}

.fair-title-stack .eyebrow {
    margin-bottom: 0.35rem;
}

.fair-title-stack h1 {
    max-width: 10ch;
    font-family: var(--font-display);
    font-size: clamp(3.15rem, 7vw, 5.9rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: 0;
}

.fair-lead {
    margin: 0;
    color: rgba(233, 221, 196, 0.88);
    line-height: 1.72;
}

.fair-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

.fair-hero-actions .button {
    min-width: 10rem;
}

.fair-proof-card {
    align-self: flex-start;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 8px;
    background:
        linear-gradient(155deg, rgba(27, 19, 11, 0.9), rgba(11, 8, 5, 0.76)),
        rgba(11, 8, 5, 0.76);
    box-shadow: 0 24px 70px rgba(var(--black-rgb), 0.32);
    backdrop-filter: blur(14px);
}

.fair-proof-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.fair-proof-card-head span,
.fair-section-kicker,
.fair-seed-label,
.fair-table th {
    color: #f0dca0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.fair-proof-card-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fair-proof-flow {
    display: grid;
    align-content: end;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fair-proof-flow li {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    min-height: 5rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.045);
}

.fair-proof-index {
    display: grid;
    place-items: center;
    width: 2.35rem;
    aspect-ratio: 1;
    border: 1px solid rgba(var(--green-rgb), 0.36);
    border-radius: 8px;
    color: var(--green);
    background: rgba(var(--green-rgb), 0.1);
    font-size: 0.72rem;
    font-weight: 850;
}

.fair-proof-flow strong,
.fair-proof-flow small {
    display: block;
}

.fair-proof-flow strong {
    margin-bottom: 0.22rem;
}

.fair-proof-flow small {
    color: rgba(216, 201, 168, 0.78);
    line-height: 1.45;
}

/* ---- Step cards ---- */
.fair-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.fair-step {
    position: relative;
    min-width: 0;
    overflow: hidden;
    min-height: 13.5rem;
    padding: 1.15rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(var(--panel-deep-rgb), 0.95), rgba(27, 19, 11, 0.9)),
        rgba(var(--white-rgb), 0.035);
}

.fair-step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--gold));
    opacity: 0.72;
}

.fair-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(var(--gold-rgb), 0.36);
    border-radius: 8px;
    color: var(--gold);
    background: rgba(var(--gold-rgb), 0.12);
    font-size: 0.86rem;
    font-weight: 850;
}

.fair-step h2 {
    margin: 0 0 0.48rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0;
}

.fair-step p {
    margin: 0;
    color: rgba(216, 201, 168, 0.82);
    font-size: 0.9rem;
    line-height: 1.62;
}

.fair-step p strong {
    color: var(--text);
}

/* ---- Shared panel chrome ---- */
.fair-seeds-card,
.fair-games,
.fair-faq {
    display: grid;
    gap: clamp(1rem, 2vw, 1.25rem);
    min-width: 0;
    padding: clamp(1rem, 2.5vw, 1.45rem);
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(var(--panel-deep-rgb), 0.96), rgba(18, 13, 6, 0.88)),
        rgba(var(--white-rgb), 0.035);
    box-shadow: 0 20px 56px rgba(var(--black-rgb), 0.2);
}

.fair-card-head {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(320px, 1fr);
    gap: 1rem;
    align-items: end;
}

.fair-card-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.4vw, 2.2rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0;
}

.fair-card-head p {
    max-width: 76ch;
    margin: 0;
    color: rgba(216, 201, 168, 0.8);
    font-size: 0.92rem;
    line-height: 1.6;
}

.fair-faq .fair-card-head {
    grid-template-columns: 1fr;
}

.fair-section-kicker {
    margin: 0 0 0.35rem;
}

.fair-note {
    margin: 0;
    color: rgba(216, 201, 168, 0.78);
    font-size: 0.82rem;
    line-height: 1.55;
}

.fair-seeds {
    display: grid;
    gap: 1rem;
}

/* ---- Guest prompt ---- */
.fair-guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    border: 1px dashed rgba(var(--gold-rgb), 0.36);
    border-radius: 8px;
    color: rgba(216, 201, 168, 0.84);
    background: rgba(var(--gold-rgb), 0.055);
}

.fair-guest p {
    margin: 0;
}

.fair-guest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* ---- Seed pair grid ---- */
.fair-seed-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.fair-seed-item {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    min-width: 0;
    min-height: 6.25rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.045);
}

.fair-seed-label {
    display: block;
}

.fair-seed-label em {
    color: rgba(216, 201, 168, 0.72);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.fair-seed-item code {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--text);
    background: transparent;
    font-size: 0.78rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.fair-seed-item--small code {
    color: var(--gold);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.05;
}

.fair-page [data-copy] {
    cursor: copy;
    transition: color 140ms ease;
}

.fair-page [data-copy]:hover {
    color: var(--gold);
}

.fair-page [data-copy].is-copied {
    color: var(--green);
}

/* ---- Rotation form ---- */
.fair-rotate {
    display: grid;
    grid-template-columns: minmax(260px, 420px) auto;
    gap: 0.8rem;
    align-items: end;
}

.fair-rotate-field {
    min-width: 0;
}

.fair-rotate .button {
    min-width: 14rem;
}

.fair-history-wrap,
.fair-list-wrap {
    display: grid;
    gap: 0.65rem;
}

.fair-history-wrap h3,
.fair-list-wrap h3,
.fair-verify-card h3,
.fair-code-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.22rem, 1.5vw, 1.45rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
}

/* ---- Tables ---- */
.fair-table-scroll {
    overflow: auto;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--ink-rgb), 0.34);
}

.fair-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
}

.fair-table th {
    padding: 0.75rem 0.85rem;
    text-align: left;
    white-space: nowrap;
    background: rgba(var(--ink-rgb), 0.7);
}

.fair-table td {
    padding: 0.78rem 0.85rem;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(244, 239, 226, 0.92);
    vertical-align: middle;
}

.fair-table tbody tr:hover td {
    background: rgba(var(--white-rgb), 0.035);
}

.fair-table code {
    display: inline-block;
    max-width: 24rem;
    color: rgba(216, 201, 168, 0.84);
    font-size: 0.76rem;
    line-height: 1.45;
    vertical-align: middle;
}

.fair-table .fair-empty {
    padding: 1.35rem;
    color: rgba(216, 201, 168, 0.72);
    text-align: center;
}

.fair-locked {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.28rem 0.65rem;
    border: 1px dashed rgba(var(--white-rgb), 0.16);
    border-radius: 999px;
    color: rgba(216, 201, 168, 0.72);
    font-size: 0.74rem;
    white-space: nowrap;
}

.fair-verify-btn {
    min-height: 2.15rem;
    padding: 0.34rem 0.85rem;
    font-size: 0.78rem;
}

/* ---- Game tabs ---- */
.fair-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-width: 0;
    margin: 0;
    overflow-x: auto;
    padding: 0.3rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 999px;
    background: rgba(var(--ink-rgb), 0.38);
    scrollbar-width: thin;
}

.fair-tab {
    flex: 0 0 auto;
    min-height: 2.45rem;
    padding: 0.52rem 0.95rem;
    border: 0;
    border-radius: 999px;
    color: rgba(216, 201, 168, 0.82);
    background: transparent;
    font-size: 0.86rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    transition: color 140ms ease, background 140ms ease, box-shadow 160ms ease;
}

.fair-tab:hover {
    color: var(--text);
    background: rgba(var(--white-rgb), 0.06);
}

.fair-tab.is-active {
    color: var(--ink);
    background: linear-gradient(135deg, var(--gold), var(--teal));
    box-shadow: 0 8px 22px rgba(var(--gold-rgb), 0.22), inset 0 1px 0 rgba(var(--white-rgb), 0.36);
}

.fair-game-panel {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

/* ---- Explanation ---- */
.fair-explain {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.04);
}

.fair-explain h3 {
    margin: 0 0 0.45rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0;
}

.fair-explain p {
    max-width: 100ch;
    margin: 0;
    color: rgba(216, 201, 168, 0.84);
    font-size: 0.92rem;
    line-height: 1.68;
}

.fair-explain code {
    padding: 0.08rem 0.35rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 6px;
    color: var(--text);
    background: rgba(var(--ink-rgb), 0.55);
    font-size: 0.8rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.fair-explain strong,
.fair-explain em {
    color: var(--text);
}

/* ---- Verifier + code columns ---- */
.fair-columns {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

.fair-verify-card,
.fair-code-card {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.045);
}

.fair-code-card {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.fair-page .field {
    margin: 0;
}

.fair-page input,
.fair-page select,
.fair-page textarea {
    min-height: 2.8rem;
    background: rgba(var(--ink-rgb), 0.58);
}

.fair-verify-card form {
    display: grid;
    gap: 0.75rem;
}

.fair-verify-pair,
.fair-verify-params {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.75rem;
}

.fair-verify-params:empty {
    display: none;
}

.fair-verify-card .button[type="submit"] {
    justify-self: start;
    min-width: 12rem;
}

.fair-verify-result {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.1rem;
    padding: 0.95rem;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 8px;
    background: rgba(var(--ink-rgb), 0.52);
    font-size: 0.9rem;
}

.fair-outcome-line strong {
    color: var(--gold);
    font-size: 1.08rem;
}

.fair-verify-result p {
    margin: 0;
}

.fair-hash-check {
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(var(--white-rgb), 0.14);
    color: rgba(216, 201, 168, 0.78);
    font-size: 0.8rem;
}

.fair-hash-check code {
    font-size: 0.74rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.fair-page .is-win {
    color: var(--green);
}

.fair-page .is-loss {
    color: var(--danger);
}

.fair-path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* mines layout preview */
.fair-mine-grid {
    display: grid;
    grid-template-columns: repeat(5, 1.8rem);
    gap: 0.28rem;
    width: max-content;
    margin-top: 0.6rem;
}

.fair-mine-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid rgba(var(--white-rgb), 0.1);
    border-radius: 6px;
    color: rgba(216, 201, 168, 0.62);
    background: rgba(var(--white-rgb), 0.045);
    font-size: 0.82rem;
}

.fair-mine-cell.is-mine {
    border-color: rgba(var(--danger-rgb), 0.55);
    color: var(--danger);
    background: rgba(var(--danger-rgb), 0.18);
}

/* blackjack deal preview */
.fair-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.fair-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    min-width: 2.6rem;
    padding: 0.34rem 0.48rem;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    color: #1a130a;
    background: #fffaf0;
    font-size: 0.86rem;
    font-weight: 800;
}

.fair-card.is-red {
    color: #c0392b;
}

.fair-card em {
    color: rgba(26, 19, 10, 0.62);
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* roulette / spinner pocket chip */
.fair-pocket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 1.8rem;
    padding: 0.2rem 0.52rem;
    border-radius: 999px;
    font-weight: 850;
}

.fair-pocket.is-red {
    color: #ffb0a6;
    background: rgba(169, 34, 34, 0.3);
}

.fair-pocket.is-black {
    border: 1px solid rgba(var(--white-rgb), 0.13);
    color: var(--text);
    background: rgba(0, 0, 0, 0.45);
}

.fair-pocket.is-green {
    color: #93e6ba;
    background: rgba(15, 122, 82, 0.34);
}

/* ---- Code display ---- */
.fair-code-scroll {
    min-height: 0;
    max-height: min(42rem, 62vh);
    overflow: auto;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--ink-rgb), 0.56);
}

.fair-code-scroll pre {
    margin: 0;
    padding: 1rem;
    color: #d9cdaf;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    line-height: 1.6;
    white-space: pre;
}

/* ---- FAQ ---- */
.fair-faq-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.fair-faq-grid article {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.045);
}

.fair-faq-grid h3 {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0;
}

.fair-faq-grid p {
    margin: 0;
    color: rgba(216, 201, 168, 0.8);
    font-size: 0.86rem;
    line-height: 1.6;
}

/* ---- Responsive ---- */
@media (max-width: 1220px) {
    .fair-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .fair-proof-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: stretch;
    }

    .fair-columns {
        grid-template-columns: 1fr;
    }

    .fair-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .fair-card-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .fair-steps,
    .fair-proof-flow {
        grid-template-columns: 1fr;
    }

    .fair-step {
        min-height: 0;
    }

    .fair-seed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .fair-page {
        padding: 0.85rem;
    }

    .fair-hero {
        padding: 1rem;
    }

    .fair-title-stack h1 {
        font-size: clamp(2.7rem, 14vw, 3.6rem);
    }

    .fair-hero-actions,
    .fair-hero-actions .button,
    .fair-guest-actions,
    .fair-guest-actions .button {
        width: 100%;
    }

    .fair-seed-grid,
    .fair-faq-grid,
    .fair-rotate,
    .fair-verify-pair,
    .fair-verify-params {
        grid-template-columns: 1fr;
    }

    .fair-rotate .button,
    .fair-verify-card .button[type="submit"] {
        width: 100%;
    }

    .fair-table {
        min-width: 640px;
    }
}

/* ---- Game-header fair pills are links to /provably-fair/ now ---- */
a.crash-fair,
a.dice-fair,
a.mines-fair,
a.plinko-fair,
a.roulette-fair,
a.blackjack-fair,
a.spinner-fair {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

a.crash-fair:hover,
a.dice-fair:hover,
a.mines-fair:hover,
a.plinko-fair:hover,
a.roulette-fair:hover,
a.blackjack-fair:hover,
a.spinner-fair:hover {
    border-color: rgba(var(--gold-rgb), 0.55);
    background: rgba(var(--gold-rgb), 0.07);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.08);
}