/* ── Reset & Base ─────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    /* Color/surface/text/accent/semantic/shadow-elevated tokens now flow
       from tokens.css → legacy-aliases.css. Layout (nav/header heights)
       lives in tokens.css too. This block keeps only primitives without
       a new-token equivalent yet — Tasks 2-20 will migrate progressively. */

    /* Typography */
    /* --font-display, --font-body inherit from tokens.css. */
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* Shadows (only --shadow-elevated lives in tokens.css) */
    --shadow-subtle: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-card: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,168,65,0.06);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: var(--header-height);
    padding-bottom: var(--nav-height);
    position: relative;
}

/* Ambient background glow - subtle, not overwhelming */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 3%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(212, 168, 65, 0.015) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* Persistent ambient particles */
.ambient-particles {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.ambient-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat linear infinite;
}

/* $FYM Watermark Background */
body::before {
    content: '$FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM';
    position: fixed;
    top: 0;
    left: -20px;
    right: -20px;
    bottom: 0;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 2.2;
    color: rgba(212, 168, 65, 0.015);
    pointer-events: none;
    z-index: 0;
    word-break: break-all;
    overflow: hidden;
    transform: rotate(-5deg) scale(1.1);
}

/* Ensure all content sits above watermark */
#header, .screen, #bottom-nav, .toast, .modal-overlay, .screen-flash {
    position: relative;
    z-index: 1;
}

#header, #bottom-nav {
    z-index: 100;
}

.toast {
    z-index: 200;
}

.modal-overlay {
    z-index: 250;
}

.screen-flash {
    z-index: 300;
}

/* ── Header ──────────────────────────────────────────────────── */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: linear-gradient(180deg, rgba(10,10,14,0.96) 0%, rgba(6,6,8,0.92) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid rgba(212, 168, 65, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255,255,255,0.03) inset;
}

.logo {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--accent);
}

@keyframes shimmerText {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.header-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 15%, transparent));
}

.loading-logo-img {
    width: 180px;
    max-width: 60vw;
    height: auto;
    object-fit: contain;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 30%, transparent));
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 30%, transparent)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 24px rgba(212, 168, 65, 0.5)); transform: scale(1.02); }
}

.balance-display {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--accent-hi);
    background: linear-gradient(135deg, rgba(212,168,65,0.12), rgba(212,168,65,0.06));
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(212, 168, 65, 0.18);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    letter-spacing: 0.5px;
    transition: color 0.3s, text-shadow 0.3s;
}
.balance-display.counting-up {
    color: var(--accent-hi);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent-hi) 40%, transparent);
}
.balance-display {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.balance-coin {
    font-size: 13px;
    font-weight: 900;
    color: var(--accent);
    opacity: 0.85;
}
.balance-unit {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--accent);
    opacity: 0.7;
    text-transform: uppercase;
}

/* Progression panel — full-width gold gradient CTA footer */
.pp-footer {
    padding: 14px 18px max(14px, env(safe-area-inset-bottom, 14px));
    border-top: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg,
        rgba(8, 7, 15, 0.4) 0%,
        rgba(8, 7, 15, 0.92) 100%);
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pp-footer-cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    background: linear-gradient(135deg, #d4af37 0%, #f2ca50 60%, #e9c349 100%);
    border: 0;
    border-radius: 2px;
    color: #3c2f00;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow:
        0 8px 24px -8px rgba(212, 175, 55, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.4);
}
.pp-footer-cta-icon {
    font-size: 17px !important;
    line-height: 1;
    transition: transform 0.18s ease;
}
.pp-footer-cta:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 28px -8px rgba(212, 175, 55, 0.75),
        inset 0 1px 0 rgba(255,255,255,0.5);
    filter: brightness(1.05);
}
.pp-footer-cta:hover .pp-footer-cta-icon { transform: translateX(4px); }
.pp-footer-cta:active { transform: translateY(0) scale(0.985); }

/* Profile page — progression detail tabs */
.profile-prog-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 8px 0 12px;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.profile-prog-tabs::-webkit-scrollbar { display: none; }
.profile-prog-tab {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--fym-text-dim, #9a9aa8);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
}
.profile-prog-tab:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.profile-prog-tab.active {
    background: rgba(245,166,35,0.15);
    color: #f5a623;
    border-color: rgba(245,166,35,0.4);
}
.profile-prog-body {
    min-height: 120px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 10px;
}

/* ── Profile Timeline ─────────────────────────────────────────── */
.profile-timeline { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; }
.tl-row {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    transition: background 150ms var(--ease-out);
}
.tl-row.tl-win { border-left: 3px solid #22c55e; }
.tl-row.tl-loss { border-left: 3px solid rgba(239,68,68,0.55); }
.tl-row.tl-push { border-left: 3px solid rgba(255,255,255,0.3); }
.tl-row.tl-ach { border-left: 3px solid #f5a623; }
.tl-row.tl-xp { border-left: 3px solid #a855f7; }
.tl-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.tl-body { flex: 1; min-width: 0; }
.tl-title {
    font-weight: 700; color: var(--fym-text, #fff); font-size: 13px;
    letter-spacing: 0.02em; text-transform: capitalize;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-sub {
    color: var(--fym-text-dim, #8b8b9e); font-size: 11px;
    margin-top: 2px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-right { text-align: right; flex-shrink: 0; }
.tl-amt {
    font-weight: 800; font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.tl-amt.pos { color: #22c55e; }
.tl-amt.neg { color: #ef4444; }
.tl-ts { color: var(--fym-text-dim, #8b8b9e); font-size: 10px; margin-top: 2px; }

/* Live Wins level chip overlay */
.live-win-avatar-wrap { position: relative; display: inline-block; }
.live-win-level {
    position: absolute;
    bottom: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--chip-color, #f5a623);
    color: #0c0c18;
    font-size: 9px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0c0c18;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* Avatar level chip — sits on bottom-right of avatar */
.avatar-with-level { vertical-align: middle; }
.avatar-level-chip {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: var(--chip-size, 20px);
    height: var(--chip-size, 20px);
    padding: 0 5px;
    border-radius: 999px;
    background: var(--chip-color, #f5a623);
    color: #0c0c18;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0c0c18;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    line-height: 1;
}

/* ── Screens ─────────────────────────────────────────────────── */
.screen {
    display: none;
    padding: 16px;
    animation: fadeIn 0.2s ease;
}

.screen.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Loading Screen ──────────────────────────────────────────── */
#loading-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: #000;
    padding: 0;
    overflow: hidden;
}

#loading-screen.active {
    display: flex;
}

/* Particle background layer */
.loading-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
}

/* Golden glow effects - top and bottom light beams */
.loading-glow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 2px;
    background: radial-gradient(ellipse, rgba(212, 168, 65, 0.7) 0%, color-mix(in srgb, var(--accent) 30%, transparent) 40%, transparent 70%);
    box-shadow: 0 0 40px 20px color-mix(in srgb, var(--accent) 15%, transparent),
                0 0 80px 40px rgba(212, 168, 65, 0.05);
}
.loading-glow-top {
    top: 22%;
    animation: glowPulseTop 3s ease-in-out infinite;
}
.loading-glow-bottom {
    bottom: 25%;
    animation: glowPulseBottom 3s ease-in-out infinite 1.5s;
}

@keyframes glowPulseTop {
    0%, 100% { opacity: 0.7; width: 250px; }
    50% { opacity: 1; width: 350px; }
}
@keyframes glowPulseBottom {
    0%, 100% { opacity: 0.5; width: 200px; }
    50% { opacity: 0.9; width: 320px; }
}

/* Floating particles */
.loading-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(var(--drift)) scale(0.3); opacity: 0; }
}

/* Ambient dust/sparkle layer */
.loading-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(180, 120, 40, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(180, 100, 20, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 80%, rgba(200, 140, 40, 0.08) 0%, transparent 40%);
    animation: ambientShift 6s ease-in-out infinite;
}

@keyframes ambientShift {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Content layer - centered above particles */
.loading-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 85%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-logo-img {
    width: 220px;
    max-width: 70vw;
    height: auto;
    object-fit: contain;
    margin-bottom: 40px;
    filter: drop-shadow(0 0 25px rgba(212, 168, 65, 0.5))
            drop-shadow(0 0 50px rgba(255, 140, 20, 0.2));
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 25px rgba(212, 168, 65, 0.5))
                drop-shadow(0 0 50px rgba(255, 140, 20, 0.2));
    }
    50% {
        transform: translateY(-8px);
        filter: drop-shadow(0 0 35px rgba(212, 168, 65, 0.7))
                drop-shadow(0 0 70px rgba(255, 140, 20, 0.35));
    }
}

.loading-logo {
    font-size: 56px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent-hi), var(--accent), #A07830);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 8px;
    text-shadow: none;
    margin-bottom: 4px;
}

.loading-subtitle {
    font-size: 18px;
    color: rgba(212, 168, 65, 0.6);
    letter-spacing: 12px;
    margin-bottom: 40px;
}

.loading-bar {
    width: 100%;
    height: 4px;
    background: rgba(212, 168, 65, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(212, 168, 65, 0.2), var(--accent), var(--accent-hi), rgba(212, 168, 65, 0.2));
    background-size: 200% 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
    animation: barShimmer 2s ease-in-out infinite;
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

@keyframes barShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.loading-text {
    font-size: 12px;
    color: rgba(255, 200, 120, 0.5);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ── Cinematic Loading Screen (shared look) ─────────────────── */
#loading-screen.cinematic,
.bj-loader {
    background: radial-gradient(ellipse at 50% 45%, #1a0e05 0%, #0a0502 55%, #000 100%);
}
.bj-loader {
    position: fixed;
    inset: 0;
    /* Belt-and-suspenders: some mobile WebViews (Telegram, iOS Safari)
       compute `inset: 0` against a buggy viewport when a parent has a
       transform. Pin the box to viewport dimensions explicitly so the
       loader cannot be cropped to less than full height. */
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bj-loader.hidden { display: none; }
/* While the BJ loader is up, hide all other children of the screen so
   the dealer/table can't leak through if the loader is somehow cropped
   on a buggy WebView. The loader itself sits at body level (moved by JS),
   so this rule only suppresses the in-screen UI. */
body.bj-loading #blackjack-screen > *:not(.bj-loader) {
    visibility: hidden;
}
.bj-loader.fade-out {
    opacity: 0;
    transition: opacity 0.8s ease-out;
    pointer-events: none;
}
/* When curtains start opening, drop the backdrop so the table shows through */
.bj-loader.curtains-out {
    background: transparent;
    transition: background 0.4s ease-out;
}
.bj-loader.curtains-out .loading-bg,
.bj-loader.curtains-out .loading-content {
    opacity: 0;
    transition: opacity 0.35s ease-out;
}
.loading-spotlight {
    position: absolute;
    top: 50%; left: 50%;
    width: 140vmax; height: 140vmax;
    transform: translate(-50%, -55%);
    background: radial-gradient(circle, rgba(255, 200, 100, 0.18) 0%, rgba(212, 168, 65, 0.08) 18%, transparent 42%);
    pointer-events: none;
    animation: spotlightBreathe 5s ease-in-out infinite;
}
@keyframes spotlightBreathe {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -55%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -55%) scale(1.08); }
}
.loading-rays {
    position: absolute; inset: 0;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg, rgba(255, 200, 100, 0.05) 12deg, transparent 24deg,
            transparent 60deg, rgba(255, 200, 100, 0.05) 72deg, transparent 84deg,
            transparent 120deg, rgba(255, 200, 100, 0.05) 132deg, transparent 144deg,
            transparent 180deg, rgba(255, 200, 100, 0.05) 192deg, transparent 204deg,
            transparent 240deg, rgba(255, 200, 100, 0.05) 252deg, transparent 264deg,
            transparent 300deg, rgba(255, 200, 100, 0.05) 312deg, transparent 324deg);
    mix-blend-mode: screen;
    animation: raysSpin 40s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }

/* Velvet curtains opening */
.loading-curtain {
    position: absolute;
    top: 0; bottom: 0;
    width: 52%;
    background:
        repeating-linear-gradient(90deg,
            #1a0404 0px, #3a0808 18px, #1a0404 36px, #2a0606 54px),
        linear-gradient(180deg, #220505, #0a0101);
    box-shadow: inset 0 0 80px rgba(0,0,0,0.8), 0 0 60px rgba(0,0,0,0.6);
    z-index: 5;
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    pointer-events: none;
}
.loading-curtain-left  { left: 0;  transform: translateX(-101%); border-right: 2px solid color-mix(in srgb, var(--accent) 15%, transparent); }
.loading-curtain-right { right: 0; transform: translateX(101%);  border-left:  2px solid color-mix(in srgb, var(--accent) 15%, transparent); }
#loading-screen.curtains-in .loading-curtain-left,
.bj-loader.curtains-in .loading-curtain-left  { transform: translateX(0); }
#loading-screen.curtains-in .loading-curtain-right,
.bj-loader.curtains-in .loading-curtain-right { transform: translateX(0); }
#loading-screen.curtains-out .loading-curtain-left,
.bj-loader.curtains-out .loading-curtain-left  { transform: translateX(-101%); }
#loading-screen.curtains-out .loading-curtain-right,
.bj-loader.curtains-out .loading-curtain-right { transform: translateX(101%); }

/* Crest above logo */
.loading-crest {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
    opacity: 0; animation: crestFadeIn 1s ease-out 0.3s forwards;
}
.loading-crest-line {
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.loading-crest-diamond {
    color: var(--accent-hi);
    font-size: 14px;
    text-shadow: 0 0 10px rgba(255,200,100,0.8);
}
@keyframes crestFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.loading-tagline {
    font-family: var(--font-display, serif);
    font-style: italic;
    font-size: 13px;
    color: rgba(255, 215, 140, 0.7);
    letter-spacing: 2px;
    margin: -24px 0 28px;
    opacity: 0;
    animation: taglineFadeIn 1.2s ease-out 0.9s forwards;
    text-shadow: 0 0 12px rgba(255,180,60,0.35);
}
@keyframes taglineFadeIn {
    from { opacity: 0; letter-spacing: 8px; }
    to   { opacity: 1; letter-spacing: 2px; }
}

.loading-percent {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-hi, #ffcc66);
    letter-spacing: 4px;
    text-shadow: 0 0 8px rgba(255,200,100,0.5);
}

/* Fade-out when done */
#loading-screen.fade-out {
    opacity: 0;
    transition: opacity 0.8s ease-out;
    pointer-events: none;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Section Title ───────────────────────────────────────────── */
.section-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Royal design elements */
.royal-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text);
}
.royal-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 4px;
}
.royal-divider span:first-child,
.royal-divider span:last-child {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 65, 0.2), transparent);
}
.divider-gem {
    color: var(--accent);
    font-size: 8px;
    opacity: 0.5;
}
.section-heading {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    position: relative;
    padding-left: 14px;
}
.section-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--accent);
    border-radius: 2px;
}

/* Gold shimmer text - reserved for balance/wins only */
.gold-shimmer {
    background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 65%, var(--bg)), var(--accent-hi), color-mix(in oklch, var(--accent) 65%, var(--bg)));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 4s linear infinite;
}

/* Glass card */
.glass-card {
    background: var(--surface) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-card);
    transition: all 0.2s ease !important;
}
.glass-card:active {
    box-shadow: var(--shadow-elevated) !important;
    border-color: color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* Glowing button */
.btn-glow {
    position: relative;
    overflow: hidden;
}
.btn-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
    animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Home Screen ─────────────────────────────────────────────── */
.home-welcome {
    text-align: center;
    padding: 12px 0 8px;
}

.home-welcome h1 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.tagline {
    color: var(--muted);
    font-size: 11px;
    font-style: italic;
    letter-spacing: 1px;
}

/* Quick Games Row on Home */
.quick-games {
    display: flex;
    gap: 10px;
    margin: 16px 0;
    overflow-x: auto;
    padding-bottom: 4px;
}

.quick-games .game-card {
    min-width: 100px;
    flex-shrink: 0;
    padding: 14px 12px;
}

/* Daily Bonus Card */
.daily-bonus-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}
@keyframes cardShimmer {
    0% { transform: translateX(-33%); }
    100% { transform: translateX(33%); }
}

.daily-bonus-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.daily-icon {
    font-size: 32px;
}

.daily-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--muted);
}

.daily-amount {
    font-weight: 700;
    font-size: 18px;
    color: var(--accent);
}

/* Game Grid */
.game-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.game-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.game-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 65, 0.08), transparent);
}

.game-card:active {
    transform: scale(0.96);
    border-color: color-mix(in srgb, var(--accent) 15%, transparent);
}

.game-card.mp {
    border-color: rgba(200, 155, 60, 0.15);
}

.game-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.game-name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 3px;
    color: var(--text);
}

.game-desc {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.3px;
}

/* Leaderboard Preview */
.leaderboard-preview {
    margin-top: 16px;
}

.leaderboard-preview h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

.lb-row {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    background: rgba(18, 16, 10, 0.7);
    border: 1px solid rgba(212, 168, 65, 0.06);
    border-radius: 12px;
    margin-bottom: 6px;
    gap: 8px;
    transition: all 0.2s;
}

.lb-row.clickable {
    cursor: pointer;
}

.lb-row.clickable:active {
    background: var(--raised);
}

.lb-rank {
    width: 28px;
    font-weight: 700;
    flex-shrink: 0;
}

.lb-avatar-wrap {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.lb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.lb-name {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-balance {
    color: var(--accent);
    font-weight: 600;
    flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    border: none;
    border-radius: 12px;
    padding: 11px 22px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    background: rgba(30, 26, 16, 0.9);
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: scale(0.96);
}

.btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.btn-primary {
    background: linear-gradient(135deg, #7A6325, var(--accent), #D4A841);
    color: #0a0a0a;
    font-weight: 800;
    box-shadow: 0 2px 12px rgba(212, 168, 65, 0.2);
    border: 1px solid rgba(212, 168, 65, 0.2);
}
.btn-primary:active {
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

.btn-secondary {
    background: rgba(30, 26, 16, 0.8);
    border: 1px solid rgba(212, 168, 65, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn-gold {
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 65%, var(--bg)), var(--accent), color-mix(in oklch, var(--accent) 65%, var(--bg)));
    background-size: 200% 100%;
    color: #0a0a0a;
    font-weight: 800;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid rgba(212, 168, 65, 0.2);
}
@keyframes btnGoldShimmer {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
}

.btn-green {
    background: linear-gradient(135deg, #8b6914, #c89b3c, #e6b84d);
    color: #000;
    font-weight: 800;
}

.btn-red, .btn-danger {
    background: linear-gradient(135deg, #cc2222, var(--loss));
}

.btn-warning {
    background: linear-gradient(135deg, #cc8800, #ffaa00);
    color: #000;
}

.btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 8px;
}

.btn-lg {
    width: 100%;
    padding: 16px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    border-radius: 14px;
    margin-top: 12px;
    text-transform: uppercase;
}

/* Chip Buttons */
.chip-btn {
    background: rgba(18, 16, 10, 0.8);
    border: 1px solid rgba(212, 168, 65, 0.12);
    border-radius: 22px;
    padding: 8px 16px;
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-btn:active {
    transform: scale(0.94);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    box-shadow: 0 0 12px rgba(212, 168, 65, 0.1);
}

.chip-btn.gold {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
    box-shadow: 0 0 8px rgba(212, 168, 65, 0.08);
}

/* Back / Info Links */
.back-link, .info-link {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.back-btn {
    margin-bottom: 12px;
}

/* ── Bet Controls ────────────────────────────────────────────── */
.bet-controls {
    margin-top: 20px;
}

.bet-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.bet-input-row label {
    font-weight: 600;
    color: var(--muted);
    font-size: 14px;
}

.bet-input-row input {
    flex: 1;
    background: rgba(12, 10, 6, 0.8);
    border: 1px solid rgba(212, 168, 65, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bet-input-row input:focus {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: 0 0 16px rgba(212, 168, 65, 0.08);
}

.bet-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.bet-row input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    outline: none;
}

.quick-bets {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

/* ── Game Header ─────────────────────────────────────────────── */
.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.game-header h2 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    flex: 1;
    text-align: center;
    color: var(--text);
    letter-spacing: 0.5px;
}

/* ── Slots ────────────────────────────────────────────────────── */
.slots-machine {
    background: linear-gradient(180deg, #0e0e14, #08080c, #0e0e14);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: var(--radius-xl);
    padding: 16px 12px 12px;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-elevated);
}

.slots-machine.jackpot-shake {
    animation: machineShake 0.4s ease 3;
}

@keyframes machineShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px) rotate(-0.5deg); }
    75% { transform: translateX(6px) rotate(0.5deg); }
}

.slots-frame {
    background: linear-gradient(180deg, #12121a, #0a0a10, #12121a);
    border: 1px solid rgba(212, 168, 65, 0.1);
    border-radius: var(--radius-lg);
    padding: 12px 10px;
    position: relative;
}

.slots-top-label {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--accent);
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(212, 168, 65, 0.4);
}

.slots-reels {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.reel-container {
    width: 90px;
    height: 240px;
    overflow: hidden;
    background: linear-gradient(180deg, #06060a, #0a0a10, #06060a);
    border: 1px solid rgba(212, 168, 65, 0.08);
    border-radius: var(--radius-md);
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.reel-container.win-glow {
    border-color: var(--accent);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 168, 65, 0.5);
    animation: glowPulse 0.6s ease infinite alternate;
}

.reel-container.jackpot-glow {
    border-color: var(--accent);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 30px rgba(212, 168, 65, 0.7), 0 0 60px color-mix(in srgb, var(--accent) 30%, transparent);
    animation: glowPulse 0.3s ease infinite alternate;
}

@keyframes glowPulse {
    from { box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 16px rgba(212, 168, 65, 0.4); }
    to { box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 28px rgba(212, 168, 65, 0.7); }
}

.reel-strip {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.reel-cell {
    width: 90px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    flex-shrink: 0;
}

.payline-indicator {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    transform: translateY(4px);
    pointer-events: none;
    z-index: 5;
}

.payline-indicator::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--accent);
    opacity: 0.5;
    border-radius: 1px;
    box-shadow: 0 0 6px rgba(212, 168, 65, 0.4);
}

.payline-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--accent);
    text-shadow: 0 0 4px rgba(212, 168, 65, 0.6);
}

.payline-arrow-left { left: -2px; }
.payline-arrow-right { right: -2px; }

.slots-result {
    min-height: 32px;
    font-weight: 700;
    font-size: 16px;
    margin-top: 12px;
    padding: 4px;
}

.slots-result.win { color: var(--win); }
.slots-result.lose { color: var(--faint); font-size: 14px; }
.slots-result.jackpot {
    color: var(--accent);
    font-size: 22px;
}

.slots-result .jackpot-text {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 4px;
    animation: jackpotFlash 0.4s ease infinite alternate;
}

@keyframes jackpotFlash {
    from { color: var(--accent); text-shadow: 0 0 10px rgba(212, 168, 65, 0.6); }
    to { color: #fff; text-shadow: 0 0 20px rgba(212, 168, 65, 0.9); }
}

.slots-result .win-label {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--win);
    text-shadow: 0 0 8px rgba(212, 168, 65, 0.4);
}

.slots-result .win-amount {
    font-size: 20px;
    font-weight: 900;
    margin-top: 2px;
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

/* ── Slots Bet Section ──────────────────────────────────────── */
.slots-bet-section {
    margin-top: 16px;
    text-align: center;
}

.slots-bet-display {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    color: var(--accent-hi);
    margin-bottom: 10px;
}

.slots-chip-bar {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.slots-chip-bar .chip-btn {
    min-width: 48px;
    padding: 8px 14px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 800;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
}

.slots-chip-bar .chip-btn:active {
    transform: scale(0.92);
}

.slots-chip-bar .chip-btn.active {
    border-color: var(--accent);
    background: rgba(212, 168, 65, 0.12);
    color: var(--accent);
    box-shadow: 0 0 8px rgba(212, 168, 65, 0.2);
}

.slots-chip-bar .chip-btn.gold {
    border-color: color-mix(in oklch, var(--accent) 65%, var(--bg));
    color: var(--accent);
}

.slots-chip-bar .chip-btn.gold.active {
    background: rgba(212, 168, 65, 0.18);
}

/* ── Slots Action Row (Spin + Auto) ─────────────────────────── */
.slots-action-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    align-items: stretch;
}

.slots-action-row .spin-btn {
    flex: 1;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 16px;
    border-radius: 14px;
    margin-top: 0;
}

.autospin-wrapper {
    position: relative;
}

.autospin-toggle {
    height: 100%;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 14px;
    white-space: nowrap;
}

.btn-red {
    background: var(--loss);
    color: #fff;
    border: none;
    cursor: pointer;
}

.btn-red:active {
    background: #cc3333;
}

.autospin-badge {
    background: var(--accent);
    color: #000;
    font-size: 11px;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

.autospin-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    min-width: 200px;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.autospin-menu.visible {
    display: block;
}

.autospin-menu-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--muted);
    text-align: center;
}

.autospin-options {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.autospin-options .btn {
    flex: 1;
    font-size: 13px;
    padding: 8px 4px;
    border-radius: 10px;
}

.btn-sm.btn-gold {
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 65%, var(--bg)), var(--accent));
    color: #000;
    border: none;
    font-weight: 800;
    cursor: pointer;
}

.autospin-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}

.autospin-check input {
    accent-color: var(--accent);
}

/* ── Screen Flash ────────────────────────────────────────────── */
.screen-flash {
    display: none;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    z-index: 300;
    pointer-events: none;
    animation: flashAnim 0.6s ease forwards;
}

.screen-flash.active {
    display: block;
}

@keyframes flashAnim {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.paytable {
    margin-top: 20px;
    background: rgba(18, 16, 10, 0.7);
    border: 1px solid rgba(212, 168, 65, 0.06);
    border-radius: 14px;
    padding: 16px;
}

.paytable h4 {
    text-align: center;
    margin-bottom: 10px;
    color: var(--muted);
}

.paytable-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: var(--muted);
}

.paytable-row span:last-child {
    color: var(--accent);
    font-weight: 600;
}

/* ── Blackjack Table ─────────────────────────────────────────── */
.bj-table {
    position: relative;
    margin: 0 -16px;
}

.bj-felt {
    background: linear-gradient(180deg, #0a4d1a 0%, #0d6b25 40%, #0a4d1a 100%);
    border: 3px solid #8b7532;
    border-radius: 0 0 50% 50% / 0 0 20% 20%;
    padding: 16px 20px 30px;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Felt texture overlay */
.bj-felt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='rgba(0,0,0,0.03)'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
    z-index: 0;
}

.bj-felt > * { position: relative; z-index: 1; }

.bj-felt-text-top {
    text-align: center;
    color: rgba(212, 168, 65, 0.5);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.bj-table-curve {
    height: 8px;
    background: #5c4d1e;
    border-radius: 0 0 50% 50%;
    margin: 0 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Dealer / Player sections */
.bj-dealer-section,
.bj-player-section {
    text-align: center;
    padding: 8px 0;
}

.bj-hand-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bj-value-badge {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0;
    min-width: 28px;
    text-align: center;
}

/* Cards container */
.bj-cards {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    flex-wrap: wrap;
}

/* Insurance / rule line */
.bj-rule-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    margin: 4px 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

.bj-rule-left, .bj-rule-right {
    font-size: 8px;
    color: color-mix(in srgb, var(--accent) 30%, transparent);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bj-rule-center {
    font-size: 10px;
    color: rgba(212, 168, 65, 0.5);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Bet display on table */
.bj-table-bet {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

.bj-table-chip {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e8b730, #b8860b);
    border: 3px dashed rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

.bj-table-bet-amount {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 8px;
    border-radius: 8px;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    width: 52px;
    height: 72px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    perspective: 600px;
    position: relative;
    background: white;
    transition: transform 0.3s ease;
}

.card.red { color: #cc0000; }
.card.black { color: #1a1a1a; }

.card .card-rank {
    font-size: 18px;
    line-height: 1;
}

.card .card-suit {
    font-size: 16px;
    line-height: 1;
    margin-top: -2px;
}

/* Card back design - RED with $FYM pattern */
.card-back-design {
    background: linear-gradient(135deg, #c0392b, #922b21, #c0392b);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e74c3c;
    position: relative;
    overflow: hidden;
}

.card-back-design::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.card-back-design::after {
    content: '$FYM';
    font-size: 9px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
}

/* Card flip animations */
.card .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.card.card-face-down .card-inner {
    transform: rotateY(180deg);
}

.card.card-flipping .card-inner {
    transform: rotateY(90deg);
    transition: transform 0.3s ease;
}

.card.card-flipped .card-inner {
    transform: rotateY(0deg);
    transition: transform 0.3s ease;
}

.card .card-front,
.card .card-back-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.card .card-front {
    background: white;
}

.card.red .card-front { color: #cc0000; }
.card.black .card-front { color: #1a1a1a; }

.card .card-back-face {
    transform: rotateY(180deg);
}

/* ── BJ Result ──────────────────────────────────────────────── */
.bj-result {
    text-align: center;
    padding: 8px 0;
    font-weight: 800;
    font-size: 18px;
    min-height: 36px;
    transition: all 0.3s ease;
}

.bj-result-animate {
    animation: resultPop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes resultPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.bj-result.win { color: var(--win); text-shadow: 0 0 12px rgba(212, 168, 65, 0.5); }
.bj-result.lose { color: var(--loss); }
.bj-result.push { color: var(--accent); }
.bj-result.blackjack {
    color: var(--win);
    font-size: 24px;
    text-shadow: 0 0 16px rgba(255, 200, 0, 0.6);
    animation: resultPop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1), bjGlow 1s ease-in-out 0.5s infinite alternate;
}

@keyframes bjGlow {
    from { text-shadow: 0 0 12px rgba(255, 200, 0, 0.4); }
    to { text-shadow: 0 0 24px rgba(255, 200, 0, 0.8); }
}

/* ── Action buttons ─────────────────────────────────────────── */
.bj-actions {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    justify-content: center;
}

.bj-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.bj-action-btn:active {
    transform: scale(0.95);
}

.bj-btn-icon {
    font-size: 16px;
    line-height: 1;
}

.bj-btn-hit {
    background: linear-gradient(180deg, #27ae60, #1e8449);
    color: white;
}

.bj-btn-stand {
    background: linear-gradient(180deg, #e67e22, #d35400);
    color: white;
}

.bj-btn-double {
    background: linear-gradient(180deg, #c89b3c, #a07830);
    color: white;
}

/* ── Insurance prompt ──────────────────────────────────────── */
.bj-insurance-prompt {
    text-align: center;
    padding: 10px 16px;
    animation: bjInsuranceFadeIn 0.4s ease-out;
}
#blackjack-screen .bj-insurance-prompt {
    position: absolute !important;
    left: 0; right: 0; bottom: 72px;
    padding: 10px 16px;
    background: rgba(10, 8, 4, 0.85);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(80, 160, 255, 0.3);
    z-index: 8;
}
@keyframes bjInsuranceFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bj-insurance-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}
.bj-insurance-shield {
    font-size: 22px;
    filter: drop-shadow(0 0 6px rgba(80, 160, 255, 0.6));
}
.bj-insurance-title {
    font-size: 18px;
    font-weight: 800;
    color: #5dade2;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(80, 160, 255, 0.4);
}
.bj-insurance-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 10px;
}
.bj-insurance-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.bj-btn-insure-yes {
    background: linear-gradient(180deg, #2e86c1, #1a5276);
    color: white;
    min-width: 100px;
    box-shadow: 0 4px 14px rgba(46, 134, 193, 0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.bj-btn-insure-no {
    background: linear-gradient(180deg, #555, #333);
    color: rgba(255,255,255,0.8);
    min-width: 100px;
}
.bj-result-insurance {
    font-size: 11px;
    margin-top: 4px;
    letter-spacing: 1px;
}
.bj-result-insurance.won { color: #5dade2; }
.bj-result-insurance.lost { color: rgba(255,120,120,0.7); }

/* ── Betting controls ───────────────────────────────────────── */
.bj-betting-controls {
    padding: 12px 0;
    text-align: center;
}

.bj-bet-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.bj-bet-label {
    font-size: 14px;
    color: var(--muted);
    font-weight: 600;
}

.bj-current-bet {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-hi);
}

.bj-chip-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.bj-chip {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px dashed rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    color: white;
    transition: all 0.15s ease;
    background: linear-gradient(180deg, #444, #333);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.bj-chip:active { transform: scale(0.9); }

.bj-chip[data-value="10"] { background: linear-gradient(180deg, #3498db, #2980b9); }
.bj-chip[data-value="25"] { background: linear-gradient(180deg, #27ae60, #1e8449); }
.bj-chip[data-value="50"] { background: linear-gradient(180deg, #8e44ad, #6c3483); }
.bj-chip[data-value="100"] { background: linear-gradient(180deg, #c0392b, #922b21); }
.bj-chip[data-value="500"] { background: linear-gradient(180deg, #2c3e50, #1a252f); }
.bj-chip[data-value="max"] { background: linear-gradient(180deg, #d4ac0d, #b7950b); color: #000; }

.bj-chip.active {
    border-color: var(--accent);
    border-style: solid;
    transform: scale(1.12);
    box-shadow: 0 0 12px rgba(212, 168, 65, 0.4);
}

.bj-deal-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #7A6325, var(--accent), #D4A841);
    color: #0a0a0a;
    border: 1px solid rgba(212, 168, 65, 0.2);
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px rgba(212, 168, 65, 0.2);
    position: relative;
    overflow: hidden;
}

.bj-deal-btn:active {
    transform: scale(0.97);
}

/* Leaderboard avatar fallback */
.lb-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--faint);
}

/* ── Roulette ─────────────────────────────────────────────────── */

/* Rolling strip container */
.r-roll-container {
    position: relative;
    height: 52px;
    overflow: hidden;
    margin: 0 auto 10px;
    border-radius: 8px;
    background: #111;
    border: 2px solid #333;
    display: none;
}

.r-strip-track {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.r-strip-num {
    width: 52px;
    min-width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: white;
    border-right: 1px solid #222;
}

.r-strip-num.red { background: #8b0000; }
.r-strip-num.black { background: #1a1a1a; }
.r-strip-num.green { background: #005500; }

.r-strip-highlight {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 56px;
    border: 3px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 0 16px rgba(212, 168, 65, 0.6), inset 0 0 8px color-mix(in srgb, var(--accent) 15%, transparent);
    pointer-events: none;
    z-index: 2;
}

.roulette-result-info {
    text-align: center;
    min-height: 20px;
    margin-bottom: 8px;
}

/* Standard roulette board: 13 columns (0 + 12 number cols) */
.r-table-wrap {
    overflow-x: auto;
    margin-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.r-standard-board {
    display: grid;
    grid-template-columns: 40px repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    min-width: 340px;
}

.roulette-cell {
    position: relative;
    padding: 12px 2px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    border: 2px solid transparent;
    color: white;
    user-select: none;
}

.roulette-cell:active {
    transform: scale(0.94);
}

.roulette-cell.num-red { background: #8b0000; }
.roulette-cell.num-black { background: #1a1a1a; border: 1px solid #333; }
.roulette-cell.num-green { background: #005500; }

.roulette-cell.result-highlight {
    animation: highlightResult 0.5s ease infinite alternate;
}

@keyframes highlightResult {
    from { box-shadow: 0 0 8px var(--win); }
    to { box-shadow: 0 0 20px var(--win), 0 0 30px rgba(255,215,0,0.3); }
}

/* Casino chip on cell */
.r-cell-chip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--accent-hi), color-mix(in oklch, var(--accent) 65%, var(--bg)));
    border: 2px dashed #fff;
    color: #000;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    z-index: 3;
    pointer-events: none;
    line-height: 1;
}

.r-cell-label {
    position: relative;
    z-index: 1;
}

/* Side bets row below the main board */
.roulette-side-bets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}

.roulette-side-bets .roulette-cell {
    padding: 10px 4px;
    font-size: 11px;
}

.roulette-cell.side-bet { background: var(--surface); border: 1px solid var(--border); font-size: 11px; color: var(--text); }
.roulette-cell.side-red { background: rgba(139, 0, 0, 0.5); border: 1px solid #8b0000; }
.roulette-cell.side-black { background: rgba(30, 30, 30, 0.8); border: 1px solid #444; }
.roulette-cell.side-wide { }

/* Chip selector bar */
.r-chip-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    overflow-x: auto;
    justify-content: center;
    flex-wrap: wrap;
}

.r-chip-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    margin-right: 2px;
}

.r-chip {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px dashed rgba(255,255,255,0.3);
    background: radial-gradient(circle at 35% 35%, #555, #222);
    color: white;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.r-chip:active { transform: scale(0.92); }

.r-chip.active {
    border-color: var(--accent);
    background: radial-gradient(circle at 35% 35%, var(--accent-hi), color-mix(in oklch, var(--accent) 65%, var(--bg)));
    color: #000;
    box-shadow: 0 0 12px rgba(212, 168, 65, 0.5);
    transform: scale(1.1);
}

/* Controls row */
.r-controls {
    text-align: center;
    padding: 6px 0 10px;
}

.r-total-bet {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
}

.r-action-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.r-action-btns .btn {
    flex: 1;
    max-width: 160px;
}

/* History section */
.r-history-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.r-history-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 6px;
}

.r-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 120px;
    overflow-y: auto;
}

.r-hist-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: white;
}

.r-hist-num.red { background: #8b0000; }
.r-hist-num.black { background: #222; border: 1px solid #444; }
.r-hist-num.green { background: #005500; }

.game-id-text {
    font-size: 11px;
    color: var(--faint);
    cursor: pointer;
    margin-top: 4px;
}

.game-id-text:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* ── Lottery ──────────────────────────────────────────────────── */
/* ─── Lottery hero pot — overhauled 2026-04-30 ──────────────────
   The pot panel is the centerpiece of the lottery screen. It
   shifts visual energy based on `data-state` (set by lottery.js)
   so the room "warms up" as the draw approaches:
     calm     → > 60 min     · steady gold
     soon     → 60-15 min    · brighter gold
     urgent   → 15-5 min     · glow pulse
     critical → 5-1 min      · ember pulse, faster
     live     → < 60 sec     · ruby pulse, "DRAWING NOW"
*/
.lottery-pot {
    text-align: center;
    background:
        radial-gradient(120% 60% at 50% -10%,
            color-mix(in srgb, var(--accent, #f2ca50) 18%, transparent), transparent 60%),
        linear-gradient(180deg, #14110a 0%, #0a0807 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: var(--radius-xl);
    padding: 32px 24px 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 24px 50px -12px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(242, 202, 80, 0.15);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.lottery-pot::before {
    /* faint gold sheen across the top edge — luxury motif */
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(242, 202, 80, 0.5) 40%,
        rgba(242, 202, 80, 0.5) 60%,
        transparent);
    pointer-events: none;
}

.lottery-pot[data-state="urgent"]   { border-color: rgba(242, 202, 80, 0.65); animation: lottery-pot-glow 2.4s ease-in-out infinite; }
.lottery-pot[data-state="critical"] { border-color: rgba(255, 122, 24, 0.85); animation: lottery-pot-pulse 1.4s ease-in-out infinite; background:
        radial-gradient(120% 60% at 50% -10%, rgba(255, 122, 24, 0.22), transparent 60%),
        linear-gradient(180deg, #1a0e08 0%, #0a0706 100%); }
.lottery-pot[data-state="live"]     { border-color: rgba(220, 40, 60, 0.9); animation: lottery-pot-live 0.9s ease-in-out infinite; background:
        radial-gradient(120% 60% at 50% -10%, rgba(220, 40, 60, 0.25), transparent 60%),
        linear-gradient(180deg, #180808 0%, #0a0606 100%); }

@keyframes lottery-pot-glow {
    0%, 100% { box-shadow: 0 24px 50px -12px rgba(0,0,0,0.7), 0 0 24px -4px rgba(242, 202, 80, 0.4), inset 0 1px 0 rgba(242, 202, 80, 0.18); }
    50%      { box-shadow: 0 24px 50px -12px rgba(0,0,0,0.7), 0 0 44px 0     rgba(242, 202, 80, 0.7), inset 0 1px 0 rgba(242, 202, 80, 0.28); }
}
@keyframes lottery-pot-pulse {
    0%, 100% { box-shadow: 0 24px 50px -12px rgba(0,0,0,0.7), 0 0 28px -4px rgba(255, 122, 24, 0.55); }
    50%      { box-shadow: 0 24px 50px -12px rgba(0,0,0,0.7), 0 0 56px 4px  rgba(255, 122, 24, 0.85); }
}
@keyframes lottery-pot-live {
    0%, 100% { transform: scale(1);     box-shadow: 0 24px 50px -12px rgba(0,0,0,0.75), 0 0 32px -2px rgba(220, 40, 60, 0.65); }
    50%      { transform: scale(1.005); box-shadow: 0 24px 50px -12px rgba(0,0,0,0.75), 0 0 60px 4px  rgba(220, 40, 60, 0.95); }
}

/* Dominant pot value — Bodoni display, 56px, animated counter */
.pot-amount {
    font-family: var(--font-display);
    font-size: clamp(40px, 9vw, 64px);
    font-weight: 700;
    color: #f5d77e;
    line-height: 1;
    letter-spacing: -0.01em;
    text-shadow:
        0 2px 24px rgba(242, 202, 80, 0.55),
        0 0 1px rgba(0, 0, 0, 0.4);
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.pot-label {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 14px;
}
.pot-label small { letter-spacing: 0.04em; text-transform: none; opacity: 0.6; }

/* Countdown — the dramatic clock. Two-row layout: small label
   above, big tabular-num digits below with separators that pulse. */
.pot-timer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.pot-timer .timer-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
}
.pot-timer .timer-digits {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 6vw, 40px);
    color: var(--accent-hi, #f2ca50);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.pot-timer .timer-unit {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.pot-timer .timer-unit small {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-left: 1px;
}
.pot-timer .timer-sep {
    color: rgba(242, 202, 80, 0.6);
    animation: lottery-sep-blink 1s steps(2) infinite;
}
@keyframes lottery-sep-blink {
    0%   { opacity: 1; }
    50%  { opacity: 0.25; }
    100% { opacity: 1; }
}
.lottery-pot[data-state="critical"] .pot-timer .timer-digits { color: #ff9050; }
.lottery-pot[data-state="live"]     .pot-timer .timer-digits { color: #ff5060; }

.pot-timer .timer-drawing {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #ff5060;
    text-shadow: 0 0 12px rgba(220, 40, 60, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .lottery-pot[data-state] { animation: none !important; }
    .pot-timer .timer-sep { animation: none; opacity: 1; }
}

/* ─── "DRAWING NOW" full-screen overlay (within ±90s of draw) ──── */
.lottery-drawing-overlay {
    position: fixed;
    inset: 0;
    z-index: 4200;
    background:
        radial-gradient(circle at 50% 35%, rgba(220, 40, 60, 0.25), transparent 60%),
        rgba(8, 6, 6, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    animation: lottery-overlay-in 0.4s ease;
}
.lottery-drawing-overlay.is-active { display: flex; }
@keyframes lottery-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lottery-drawing-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-weight: 800;
    color: #ff8a8a;
}
.lottery-drawing-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 8vw, 56px);
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    text-shadow: 0 0 22px rgba(220, 40, 60, 0.75);
    animation: lottery-title-pulse 1.4s ease-in-out infinite;
}
@keyframes lottery-title-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

/* Lottery-balls "drum" — three concentric balls dance while the
   server picks winners. Pure CSS so it works without WebGL/canvas. */
.lottery-drum {
    position: relative;
    width: clamp(180px, 50vw, 260px);
    height: clamp(180px, 50vw, 260px);
}
.lottery-ball {
    position: absolute;
    top: 50%; left: 50%;
    width: 56px; height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%,
            rgba(255, 255, 255, 0.7),
            rgba(255, 220, 140, 0.4) 40%,
            rgba(180, 130, 30, 0.7) 75%,
            rgba(80, 50, 10, 1) 100%);
    box-shadow:
        0 0 16px rgba(242, 202, 80, 0.6),
        inset -4px -6px 12px rgba(0, 0, 0, 0.4),
        inset 2px 2px 6px rgba(255, 230, 160, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: #3c2f00;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: lottery-orbit var(--orbit-speed, 4s) linear infinite;
    transform-origin: 50% 0%;   /* spin pivots from above ball center */
}
.lottery-ball:nth-child(1) { --orbit-speed: 3.4s; --orbit-radius: 0%;   animation-delay: -0s;   }
.lottery-ball:nth-child(2) { --orbit-speed: 2.8s; --orbit-radius: 30%;  animation-delay: -1s;   }
.lottery-ball:nth-child(3) { --orbit-speed: 2.0s; --orbit-radius: 60%;  animation-delay: -1.5s; background:
    radial-gradient(circle at 35% 30%,
        rgba(255, 240, 240, 0.85),
        rgba(255, 180, 180, 0.6) 35%,
        rgba(180, 30, 50, 0.9) 75%,
        rgba(60, 10, 20, 1) 100%); }
@keyframes lottery-orbit {
    /* Each ball orbits at its own radius. We translate-Y by the
       radius (negative = above center) and rotate around the
       parent's pivot so the result is a clean circular motion. */
    from { transform: translate(-50%, calc(-50% - var(--orbit-radius, 0%) * 1.4)) rotate(0deg) translateY(calc(var(--orbit-radius, 0%) * 1.4)) rotate(0deg); }
    to   { transform: translate(-50%, calc(-50% - var(--orbit-radius, 0%) * 1.4)) rotate(360deg) translateY(calc(var(--orbit-radius, 0%) * 1.4)) rotate(-360deg); }
}
.lottery-drawing-sub {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    max-width: 320px;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .lottery-drawing-title { animation: none; }
    .lottery-ball { animation: none; }
}

.lottery-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.lottery-stat {
    background: rgba(18, 16, 10, 0.7);
    border: 1px solid rgba(212, 168, 65, 0.06);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
}

.stat-label {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.lottery-prizes {
    margin-bottom: 16px;
}

.prize-tier {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(18, 16, 10, 0.7);
    border: 1px solid rgba(212, 168, 65, 0.06);
    border-radius: 12px;
    margin-bottom: 6px;
    font-size: 14px;
}

.prize-tier span:last-child {
    color: var(--accent);
    font-weight: 600;
}

.lottery-buy {
    margin-bottom: 20px;
}

.lottery-cost {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 4px;
}

.lottery-history {
    margin-top: 20px;
}

.lottery-history h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

.draw-entry {
    background: var(--surface);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
}

.draw-date {
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

.draw-tier {
    font-size: 13px;
    padding: 2px 0;
}

/* ── Lottery: My Tickets ───────────────────────────────────────── */

.lottery-my-tickets {
    margin-top: 20px;
    margin-bottom: 10px;
}

.lottery-my-tickets h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

#lottery-my-tickets-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.no-tickets-msg {
    color: var(--faint);
    font-size: 13px;
    text-align: center;
    width: 100%;
    padding: 12px 0;
}

.mini-ticket {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: calc(50% - 5px);
    overflow: hidden;
    position: relative;
}

.mini-ticket-perforation {
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 5px,
        var(--border) 5px,
        var(--border) 10px
    );
}

.mini-ticket-body {
    padding: 10px 12px 8px;
}

.mini-ticket-id {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 1px;
}

.mini-ticket-date {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.mini-ticket-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.mini-ticket.ticket-active .mini-ticket-status { color: var(--accent); }
.mini-ticket.ticket-won .mini-ticket-status { color: var(--accent); }
.mini-ticket.ticket-lost .mini-ticket-status { color: var(--faint); }

.mini-ticket.ticket-won {
    border-color: color-mix(in oklch, var(--accent) 65%, var(--bg));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── Lottery: New Ticket Purchase Animation ────────────────────── */

.lottery-new-ticket-anim {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
    pointer-events: none;
}

.new-ticket-card {
    width: 160px;
    animation: ticketDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ticketDrop {
    0% { opacity: 0; transform: translateY(-60px) scale(0.7) rotate(-8deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.new-ticket-inner {
    background: linear-gradient(135deg, #1e1610, #141208);
    border: 2px solid color-mix(in oklch, var(--accent) 65%, var(--bg));
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
}

.new-ticket-header {
    background: color-mix(in oklch, var(--accent) 65%, var(--bg));
    color: #000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 6px;
}

.new-ticket-perforation {
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        transparent, transparent 6px,
        color-mix(in oklch, var(--accent) 65%, var(--bg)) 6px, color-mix(in oklch, var(--accent) 65%, var(--bg)) 12px
    );
}

.new-ticket-id {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: 900;
    color: var(--accent);
    padding: 12px 8px 4px;
    letter-spacing: 2px;
}

.new-ticket-date {
    font-size: 11px;
    color: var(--muted);
    padding-bottom: 4px;
}

.new-ticket-footer {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--accent);
    padding: 4px 0 8px;
}

/* ── Lottery: Draw History (expandable) ────────────────────────── */

.draw-entry {
    background: var(--surface);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}

.draw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.draw-header:active {
    background: rgba(255, 255, 255, 0.03);
}

.draw-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.draw-date-badge {
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: 6px;
    color: var(--text);
}

.draw-pool {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

.draw-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.draw-winners-preview {
    font-size: 11px;
    color: var(--muted);
}

.draw-chevron {
    font-size: 10px;
    color: var(--faint);
    transition: transform 0.25s;
}

.draw-detail {
    padding: 0 14px 12px;
}

.draw-no-winners {
    font-size: 12px;
    color: var(--faint);
    padding: 4px 0;
}

.draw-winner-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    flex-wrap: wrap;
}

.draw-tier-badge {
    font-size: 12px;
    font-weight: 700;
    min-width: 80px;
}

.draw-winner-ticket {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.draw-winner-name {
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
}

.draw-winner-name:active {
    opacity: 0.7;
}

.draw-winner-amount {
    color: var(--accent);
    font-weight: 700;
    margin-left: auto;
}

.no-draws-msg {
    color: var(--faint);
    font-size: 13px;
    text-align: center;
    padding: 12px 0;
}

.timer-label {
    font-size: 11px;
    color: var(--muted);
    display: block;
    margin-bottom: 4px;
}

.timer-digits {
    font-variant-numeric: tabular-nums;
}

.timer-unit {
    font-size: 16px;
    font-weight: 800;
}

.timer-unit small {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.6;
}

.timer-sep {
    opacity: 0.4;
    margin: 0 2px;
}

.timer-drawing {
    color: var(--accent);
    font-weight: 700;
    animation: crashBlink 1s infinite;
}

/* ── Crash Game ──────────────────────────────────────────────── */

.crash-game-area {
    background: rgba(18, 16, 10, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 168, 65, 0.1);
    border-radius: 18px;
    padding: 16px;
    text-align: center;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.crash-game-area.running {
    border-color: rgba(255, 200, 50, 0.3);
    box-shadow: 0 0 20px rgba(255, 200, 50, 0.05);
}
.crash-game-area.crashed {
    border-color: rgba(255, 68, 68, 0.4);
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.08);
}
@keyframes crashShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-6px) rotate(-0.5deg); }
    30% { transform: translateX(5px) rotate(0.5deg); }
    50% { transform: translateX(-4px); }
    70% { transform: translateX(3px); }
    90% { transform: translateX(-1px); }
}
.crash-game-area.shake { animation: crashShake 0.5s ease-out; }

.crash-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.crash-status-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
}
.crash-status-badge.betting { background: rgba(212, 160, 32, 0.15); color: var(--accent); }
.crash-status-badge.closing { background: rgba(255, 170, 0, 0.2); color: #ffaa00; animation: crashBlink 0.5s infinite; }
.crash-status-badge.closed { background: rgba(255, 68, 68, 0.15); color: var(--loss); }
.crash-status-badge.live { background: rgba(255, 193, 7, 0.15); color: var(--accent); animation: crashPulseDot 1s infinite; }
.crash-status-badge.crashed { background: rgba(255, 68, 68, 0.2); color: var(--loss); }

@keyframes crashBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes crashPulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.3); } 50% { box-shadow: 0 0 0 6px rgba(255,215,0,0); } }

.crash-countdown {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}
.crash-countdown.urgent { color: #ffaa00; animation: crashBlink 0.4s infinite; }
.crash-countdown.go { color: var(--accent); font-size: 48px; text-shadow: 0 0 20px rgba(255,215,0,0.6); animation: crashCountdownPop 0.4s ease-out; }
.crash-countdown.big-countdown {
    font-size: 64px;
    color: #ffaa00;
    text-shadow: 0 0 30px rgba(255,170,0,0.6), 0 0 60px rgba(255,170,0,0.3);
    animation: crashCountdownPop 0.7s ease-out;
    line-height: 1;
}
@keyframes crashCountdownPop {
    0% { transform: scale(1.8); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1.0); opacity: 1; }
}

.crash-countdown-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin-bottom: 10px;
    overflow: hidden;
}
.crash-countdown-bar-fill {
    height: 100%;
    background: color-mix(in oklch, var(--accent) 65%, var(--bg));
    border-radius: 2px;
    transition: width 0.8s linear;
}
.crash-countdown-bar-fill.urgent { background: #ffaa00; }

.crash-multiplier {
    font-family: var(--font-numeric);
    font-size: var(--fs-num-xl);
    font-weight: 900;
    color: var(--text);
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    transition: color 0.2s, text-shadow 0.2s;
}
.crash-multiplier.waiting { color: var(--faint); font-size: 44px; }
.crash-multiplier.live { color: var(--text); text-shadow: none; transition: color 0.3s, text-shadow 0.3s; }
.crash-multiplier.live.mult-medium { color: var(--accent); text-shadow: 0 0 20px rgba(212, 168, 65, 0.2); }
.crash-multiplier.live.mult-high { color: var(--accent-hi); text-shadow: 0 0 30px rgba(240, 201, 76, 0.3); }
.crash-multiplier.live.mult-intense { color: var(--accent-hi); text-shadow: 0 0 40px rgba(240, 201, 76, 0.5); font-size: 58px; }
.crash-multiplier.crashed { color: var(--loss); text-shadow: 0 0 20px rgba(194, 48, 40, 0.3); }

.crash-status-sub {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
}

.crash-canvas-wrap { position: relative; width: 100%; }

#crash-canvas {
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: #080804;
    display: block;
}

.crash-rocket-overlay {
    position: absolute;
    font-size: 28px;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.5));
    transform: rotate(-45deg);
    transition: left 0.05s linear, top 0.05s linear;
}

.crash-cashout-btn {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 16px;
    background: linear-gradient(135deg, #7A6325, var(--accent), #D4A841);
    color: #0a0a0a;
    font-weight: 900;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(212, 168, 65, 0.2);
    transition: transform 0.1s, box-shadow 0.1s;
}
.crash-cashout-btn:active { transform: scale(0.97); }
.crash-cashout-btn.pulse { animation: crashCashoutPulse 1.2s ease-in-out infinite; }
.crash-cashout-btn.cashing-out { opacity: 0.6; pointer-events: none; }
.crash-cashout-btn .cashout-label { font-size: 14px; letter-spacing: 1px; opacity: 0.8; }
.crash-cashout-btn .cashout-mult { font-size: 22px; font-weight: 900; }
@keyframes crashCashoutPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 4px 30px rgba(255,215,0,0.5); transform: scale(1.02); }
}

.crash-history-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 0;
    margin-bottom: 8px;
    scrollbar-width: none;
}
.crash-history-strip::-webkit-scrollbar { display: none; }

.crash-hist-green { background: rgba(255,215,0,0.12); color: var(--win); padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.crash-hist-yellow { background: rgba(255,170,0,0.12); color: #ffaa00; padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.crash-hist-red { background: rgba(255,68,68,0.12); color: var(--loss); padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

.crash-section-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--faint);
    margin: 14px 0 8px;
}

.crash-players { margin-bottom: 4px; max-height: 200px; overflow-y: auto; }

.crash-player {
    padding: 8px 12px;
    font-size: 13px;
    background: var(--surface);
    border-radius: 10px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crash-player .cp-name { font-weight: 600; flex-shrink: 0; }
.crash-player .cp-info { font-size: 12px; text-align: right; }
.crash-player .cp-arrow { opacity: 0.4; margin: 0 2px; }
.crash-player .cp-payout { color: var(--win); font-weight: 700; }
.crash-player .cp-mult { opacity: 0.6; font-size: 11px; }
.crash-player .cp-bet { font-size: 12px; color: var(--muted); }
.crash-player.cashed { border-left: 3px solid var(--win); }
.crash-player.active { color: var(--text); border-left: 3px solid color-mix(in oklch, var(--accent) 65%, var(--bg)); }
.crash-no-bets { color: var(--faint); font-size: 13px; text-align: center; padding: 16px; }

.crash-history-log { max-height: 300px; overflow-y: auto; margin-bottom: 16px; }

.crash-log-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 3px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.02);
}
.crash-log-row .log-num { width: 36px; font-size: 11px; color: var(--faint); flex-shrink: 0; }
.crash-log-row .log-mult { width: 55px; font-weight: 800; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.crash-log-row .log-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.crash-log-row .log-bar-fill { height: 100%; border-radius: 2px; }
.crash-log-row .log-time { font-size: 11px; color: var(--faint); flex-shrink: 0; width: 48px; text-align: right; }
.crash-log-row.log-green .log-mult { color: var(--win); }
.crash-log-row.log-green .log-bar-fill { background: var(--win); }
.crash-log-row.log-yellow .log-mult { color: #ffaa00; }
.crash-log-row.log-yellow .log-bar-fill { background: #ffaa00; }
.crash-log-row.log-red .log-mult { color: var(--loss); }
.crash-log-row.log-red .log-bar-fill { background: var(--loss); }
.crash-log-empty { color: var(--faint); font-size: 13px; text-align: center; padding: 16px; }

/* ── Profile ─────────────────────────────────────────────────── */
.profile-header {
    background: rgba(18, 16, 10, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 168, 65, 0.1);
    border-radius: 20px;
    padding: 28px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.profile-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: 0 0 20px rgba(212, 168, 65, 0.1);
}

.profile-avatar-fallback {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--raised);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--muted);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.avatar-upload-btn {
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
    margin-top: 6px;
}

.profile-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--text);
}

.profile-tg {
    font-size: 13px;
    color: var(--muted);
}

.profile-since {
    font-size: 12px;
    color: var(--faint);
    margin-top: 4px;
}

.profile-balance {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-hi);
    margin-top: 8px;
}

.profile-section {
    background: rgba(18, 16, 10, 0.7);
    border: 1px solid rgba(212, 168, 65, 0.06);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}

.profile-section label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 10px;
}

.profile-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.profile-input-row input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    outline: none;
}

.profile-input-row input:focus {
    border-color: var(--accent);
}

/* Color Picker */
.color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.15s;
}

.color-swatch.selected {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(212, 168, 65, 0.4);
}

.color-swatch:active {
    transform: scale(0.9);
}

/* Toggle Switch */
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.toggle-row span {
    font-size: 14px;
}

.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--bg);
    border-radius: 24px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--muted);
    border-radius: 50%;
    transition: 0.2s;
}

.toggle input:checked + .toggle-slider {
    background: color-mix(in oklch, var(--accent) 65%, var(--bg));
    border-color: var(--accent);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background: white;
}

/* Stat Cards */
.stat-card {
    background: rgba(12, 10, 6, 0.7);
    border: 1px solid rgba(212, 168, 65, 0.06);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
}

.stat-card-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--accent);
}

.stat-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    text-align: center;
}

.stat-num {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.stat-lbl {
    display: block;
    font-size: 10px;
    color: var(--faint);
}

.win-color { color: var(--win); }
.lose-color { color: var(--loss); }

/* ── Lobby ───────────────────────────────────────────────────── */
.lobby-table-card {
    background: rgba(18, 16, 10, 0.7);
    border: 1px solid rgba(212, 168, 65, 0.08);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.lobby-table-info {
    flex: 1;
}

.lobby-table-id {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.lobby-table-status {
    font-size: 12px;
    color: var(--muted);
}

.lobby-seats {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--faint);
}

.seat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.seat-dot.filled {
    background: var(--accent);
}

.seat-dot.empty {
    background: var(--bg);
    border: 1px solid var(--border);
}

/* ── Multiplayer Table ───────────────────────────────────────── */
.mp-phase-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.mp-phase-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
}

.mp-table-id {
    font-size: 12px;
    color: var(--faint);
}

.mp-dealer-area {
    background: linear-gradient(180deg, rgba(20, 18, 10, 0.8), rgba(26, 22, 16, 0.7));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mp-dealer-label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.mp-cards {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    min-height: 68px;
}

.mp-cards.mini .card {
    width: 36px;
    height: 50px;
    font-size: 11px;
}

.hand-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    margin-left: 6px;
}

.mp-empty-cards {
    color: var(--faint);
    font-size: 13px;
}

.mp-seats-area {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.mp-seat {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    min-height: 80px;
}

.mp-seat.occupied {
    border-color: var(--faint);
}

.mp-seat.active-turn {
    border-color: var(--accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.mp-seat.my-seat {
    background: rgba(212, 168, 65, 0.08);
}

.mp-seat-name {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-seat-bet {
    font-size: 11px;
    color: var(--accent);
}

.mp-seat-empty {
    color: var(--faint);
    font-size: 12px;
}

.mp-outcome {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
}

.mp-outcome.win, .mp-outcome.blackjack { color: var(--win); background: rgba(255,215,0,0.1); }
.mp-outcome.lose, .mp-outcome.bust { color: var(--loss); background: rgba(255,68,68,0.1); }
.mp-outcome.push { color: var(--accent); background: rgba(255,215,0,0.1); }

.mp-action-area {
    text-align: center;
    margin-bottom: 12px;
}

.mp-action-area .btn {
    margin: 0 4px;
}

.mp-action-area p {
    padding: 12px;
}

.text-muted {
    color: var(--faint);
    font-size: 13px;
}

.mp-footer {
    text-align: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════
   MP BLACKJACK — Premium Casino Table
   ══════════════════════════════════════════════════════════════ */

/* Override screen defaults for full-viewport */
#mp-bj-table-screen { padding: 0; overflow: hidden; }
#mp-bj-table-screen.active { display: block; }

/* Header */
.mpbj-header {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 100%);
    z-index: 30;
    pointer-events: none;
}
.mpbj-header > * { pointer-events: auto; }
.mpbj-header-btn {
    background: rgba(255,255,255,0.1); border: none; color: #fff;
    width: 36px; height: 36px; border-radius: 50%; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mpbj-header-title {
    font-size: 14px; font-weight: 700; color: #fff;
    flex: 1; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.mpbj-table-code {
    font-size: 10px; color: rgba(255,255,255,0.4);
    position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
}

/* Stage — full viewport */
.mpbj-stage {
    position: relative;
    width: 100%; height: 100vh;
    overflow: hidden;
}
.mpbj-stage-bg {
    position: absolute; inset: -6%;
    background: url('/static/images/blackjack/background.png') center center / cover no-repeat;
    filter: brightness(0.7) saturate(1.1);
    animation: bjBgDrift 24s ease-in-out infinite alternate;
    z-index: 1;
}
.mpbj-stage-vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%),
        linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
}

/* Freddy — smaller for MP */
.mpbj-freddy {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 40px;
    width: 36%; max-width: 200px;
    z-index: 9; pointer-events: none;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.8));
    user-select: none;
}
.mpbj-nameplate {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 175px;
    width: 16%; max-width: 90px;
    z-index: 8; pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(255,200,80,0.25));
    user-select: none;
}

/* Phase bar */
.mpbj-phase-bar {
    position: absolute;
    top: 195px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 20px;
    padding: 5px 16px;
    z-index: 12;
    white-space: nowrap;
}
.mpbj-phase-label {
    font-size: 12px; font-weight: 700; color: var(--accent);
}
.mpbj-phase-timer {
    font-size: 13px; font-weight: 700; color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Dealer area — above the felt */
.mpbj-dealer-area {
    position: absolute;
    top: 220px; left: 50%; transform: translateX(-50%);
    z-index: 10;
    display: flex; flex-direction: column; align-items: center;
}
.mpbj-dealer-cards {
    display: flex; gap: 4px; justify-content: center;
    min-height: 52px;
}
.mpbj-dealer-value {
    font-size: 12px; font-weight: 700; color: var(--accent);
    background: rgba(0,0,0,0.6); border-radius: 8px;
    padding: 1px 8px; margin-top: 2px;
    min-height: 16px;
}
.mpbj-dealer-area .card {
    width: 36px; height: 50px; font-size: 11px;
    border-radius: 4px;
}
.mpbj-dealer-area .card .card-rank { font-size: 12px; }
.mpbj-dealer-area .card .card-suit { font-size: 10px; }
.mpbj-dealer-area .card-face-down {
    width: 36px; height: 50px;
    background: linear-gradient(135deg, #1a3a5c, #0f2440);
    border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 4px;
}

/* ── Felt (semicircle) ─────────────────────────────────────── */
.mpbj-felt {
    position: absolute;
    bottom: -30%; left: 50%; transform: translateX(-50%);
    width: 150%; aspect-ratio: 2 / 1;
    border-radius: 50% 50% 0 0;
    background:
        radial-gradient(ellipse at 50% 90%, #1f7a3a 0%, #166830 30%, #0d4f20 60%, #082e14 100%);
    border: 5px solid #8b6914;
    border-bottom: none;
    box-shadow:
        inset 0 0 80px rgba(0,0,0,0.5),
        inset 0 20px 40px rgba(0,0,0,0.2),
        0 -8px 30px rgba(0,0,0,0.6);
    z-index: 4;
}
.mpbj-felt::before {
    content: '';
    position: absolute; inset: 4px; inset-bottom: 0;
    border-radius: 50% 50% 0 0;
    border: 2px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-bottom: none;
    pointer-events: none;
}

/* ── Seats on the felt arc ─────────────────────────────────── */
.mpbj-seat {
    position: absolute;
    width: 62px;
    text-align: center;
    transition: filter 0.3s, transform 0.3s;
    z-index: 5;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Positions on the semicircle arc (from left to right) */
.mpbj-seat[data-seat="1"] { left: 10%; top: 28%; }
.mpbj-seat[data-seat="2"] { left: 24%; top: 14%; }
.mpbj-seat[data-seat="3"] { left: 50%; top: 8%; transform: translateX(-50%); }
.mpbj-seat[data-seat="4"] { right: 24%; top: 14%; }
.mpbj-seat[data-seat="5"] { right: 10%; top: 28%; }

/* Betting spot circle */
.mpbj-seat-spot {
    width: 44px; height: 44px; margin: 0 auto;
    border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    background: rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: rgba(255,255,255,0.25);
    font-weight: 700;
    transition: all 0.3s;
}
.mpbj-seat.occupied .mpbj-seat-spot {
    border-color: rgba(212,168,65,0.5);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.mpbj-seat.my-seat .mpbj-seat-spot {
    border-color: var(--accent);
    border-style: solid;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.mpbj-seat.active-turn .mpbj-seat-spot {
    border-color: #fff;
    box-shadow: 0 0 16px rgba(255,255,255,0.4), 0 0 30px rgba(212,168,65,0.5);
    animation: mpbjTurnPulse 1.2s ease-in-out infinite;
}
@keyframes mpbjTurnPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255,255,255,0.3), 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); }
    50%      { box-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px color-mix(in srgb, var(--accent) 60%, transparent); }
}

/* Seat cards — fan above the spot */
.mpbj-seat-cards {
    display: flex; gap: 2px; justify-content: center;
    position: absolute;
    bottom: 100%; left: 50%; transform: translateX(-50%);
    margin-bottom: 4px;
    min-height: 38px;
}
.mpbj-seat-cards .card {
    width: 28px; height: 40px; font-size: 9px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.mpbj-seat-cards .card .card-rank { font-size: 10px; }
.mpbj-seat-cards .card .card-suit { font-size: 8px; }
.mpbj-seat-cards .card-face-down {
    width: 28px; height: 40px;
    background: linear-gradient(135deg, #1a3a5c, #0f2440);
    border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 3px;
}

/* My seat gets bigger cards */
.mpbj-seat.my-seat .mpbj-seat-cards .card {
    width: 34px; height: 48px; font-size: 10px;
}
.mpbj-seat.my-seat .mpbj-seat-cards .card .card-rank { font-size: 12px; }
.mpbj-seat.my-seat .mpbj-seat-cards .card .card-suit { font-size: 9px; }
.mpbj-seat.my-seat .mpbj-seat-cards .card-face-down {
    width: 34px; height: 48px;
}

/* Seat value badge */
.mpbj-seat-value {
    font-size: 10px; font-weight: 700; color: #fff;
    background: rgba(0,0,0,0.7); border-radius: 6px;
    padding: 0 5px; margin: 2px auto 0;
    display: inline-block;
    min-height: 0;
}
.mpbj-seat-value:empty { display: none; }

/* Chip stack on the spot */
.mpbj-seat-chips {
    position: absolute;
    top: 2px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px;
}
.mpbj-seat-chips .mpbj-chip-stack {
    position: relative; width: 30px; height: 30px;
}
.mpbj-seat-chips .mpbj-stack-chip {
    position: absolute; left: 0; bottom: 0;
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.5);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.mpbj-stack-chip.s-10   { background: radial-gradient(circle at 35% 35%, #5aa5e0, #2d7abf); }
.mpbj-stack-chip.s-25   { background: radial-gradient(circle at 35% 35%, #49c465, #2a8a42); }
.mpbj-stack-chip.s-50   { background: radial-gradient(circle at 35% 35%, #e85555, #b83232); }
.mpbj-stack-chip.s-100  { background: radial-gradient(circle at 35% 35%, #333, #111); }
.mpbj-stack-chip.s-500  { background: radial-gradient(circle at 35% 35%, #c78beb, #8e44ad); }

/* Seat info (name + bet) below the spot */
.mpbj-seat-info {
    font-size: 9px; color: rgba(255,255,255,0.7);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 62px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.mpbj-seat-info .mpbj-info-name {
    font-weight: 700; color: #fff;
}
.mpbj-seat-info .mpbj-info-bet {
    color: var(--accent); font-weight: 600;
}

/* Outcome badge */
.mpbj-seat-outcome {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 11px; font-weight: 800;
    padding: 3px 10px; border-radius: 8px;
    text-transform: uppercase; letter-spacing: 0.5px;
    z-index: 6;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.mpbj-seat-outcome.visible { opacity: 1; }
.mpbj-seat-outcome.win     { color: #fff; background: rgba(39,174,96,0.9); box-shadow: 0 0 12px rgba(39,174,96,0.5); }
.mpbj-seat-outcome.blackjack { color: #000; background: var(--win); box-shadow: 0 0 16px rgba(212,168,65,0.7); }
.mpbj-seat-outcome.lose    { color: #fff; background: rgba(231,76,60,0.9); }
.mpbj-seat-outcome.bust    { color: #fff; background: rgba(231,76,60,0.9); }
.mpbj-seat-outcome.push    { color: #fff; background: rgba(120,120,120,0.9); }

/* ── Controls (bottom overlay) ─────────────────────────────── */
.mpbj-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 12px 20px;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    z-index: 20;
    text-align: center;
}

/* Chip bar */
.mpbj-chip-bar {
    display: flex; gap: 6px; justify-content: center; margin-bottom: 8px;
}
.mpbj-chip {
    width: 42px; height: 42px; border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.5);
    background: radial-gradient(circle at 35% 35%, #e8b730, #b8860b);
    color: #fff; font-weight: 800; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s;
}
.mpbj-chip:active { transform: scale(0.9); }
.mpbj-chip-max {
    background: radial-gradient(circle at 35% 35%, #c78beb, #8e44ad);
    font-size: 10px;
}

/* Bet actions row */
.mpbj-bet-actions {
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.mpbj-bet-display {
    font-size: 15px; font-weight: 700; color: var(--accent);
    min-width: 80px; text-align: center;
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Seat tabs (when betting on multiple seats) */
.mpbj-seat-tabs {
    display: flex; gap: 6px; justify-content: center; margin-top: 6px;
}
.mpbj-seat-tab {
    padding: 3px 12px; border-radius: 12px;
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mpbj-seat-tab.active {
    color: #fff; background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-color: var(--accent);
}
.mpbj-seat-tab.bet-placed {
    color: rgba(255,255,255,0.4);
    text-decoration: line-through;
}

/* Buttons */
.mpbj-btn {
    padding: 10px 22px; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 800; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.5px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s, opacity 0.2s;
}
.mpbj-btn:active { transform: scale(0.95); }
.mpbj-btn-primary {
    background: linear-gradient(135deg, var(--accent), #c8a020);
    color: #000; box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.mpbj-btn-secondary {
    background: rgba(255,255,255,0.15); color: #fff;
}
.mpbj-btn-hit {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: #fff; box-shadow: 0 3px 12px rgba(39,174,96,0.4);
}
.mpbj-btn-stand {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff; box-shadow: 0 3px 12px rgba(231,76,60,0.4);
}
.mpbj-btn-double {
    background: linear-gradient(135deg, var(--accent), #c8a020);
    color: #000; box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

.mpbj-turn-label {
    font-size: 12px; color: var(--accent); margin-bottom: 8px;
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.mpbj-action-btns {
    display: flex; gap: 10px; justify-content: center;
}
.mpbj-ctrl-info {
    padding: 8px;
}
.mpbj-ctrl-info span {
    font-size: 13px; color: rgba(255,255,255,0.5);
}

/* Card dealing animation for MP */
.mpbj-seat-cards .bj-dealing,
.mpbj-dealer-cards .bj-dealing {
    animation: mpbjDealIn 0.4s cubic-bezier(0.22, 0.68, 0.32, 1.1) forwards;
}
@keyframes mpbjDealIn {
    0%   { opacity: 0; transform: translateY(-30px) scale(0.5); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Card flip for dealer reveal */
.mpbj-dealer-cards .bj-flipping {
    animation: mpbjFlip 0.4s ease-in-out;
}
@keyframes mpbjFlip {
    0%   { transform: rotateY(0); }
    50%  { transform: rotateY(90deg); }
    100% { transform: rotateY(0); }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 380px) {
    .mpbj-freddy { width: 32%; top: 35px; }
    .mpbj-nameplate { width: 14%; top: 165px; }
    .mpbj-phase-bar { top: 185px; padding: 4px 12px; }
    .mpbj-dealer-area { top: 210px; }
    .mpbj-seat { width: 56px; }
    .mpbj-seat-spot { width: 38px; height: 38px; }
    .mpbj-chip { width: 38px; height: 38px; font-size: 10px; }
}
@media (min-height: 750px) {
    .mpbj-freddy { top: 50px; }
    .mpbj-nameplate { top: 190px; }
    .mpbj-phase-bar { top: 210px; }
    .mpbj-dealer-area { top: 235px; }
}

/* MP Roulette */
.mp-phase-timer {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    min-width: 30px;
    text-align: right;
}

.mp-other-bets {
    margin-bottom: 8px;
}

.mp-other-bets-title {
    font-size: 12px;
    color: var(--faint);
    font-weight: 600;
    margin-bottom: 6px;
}

.mp-other-bet-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.mp-other-name {
    font-weight: 600;
    color: var(--text);
}

.mp-other-summary {
    color: var(--faint);
}

.r-cell-chip-confirmed {
    background: rgba(212, 160, 32, 0.85) !important;
    border-color: var(--accent) !important;
}

.mp-players-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px;
    background: var(--surface);
    border-radius: 10px;
    margin-bottom: 8px;
}

.mp-players-label {
    font-size: 12px;
    color: var(--faint);
    font-weight: 600;
}

.mp-player-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 12px;
}

.mp-player-chip.me {
    border-color: var(--accent);
    color: var(--accent);
}

.mp-my-bets {
    background: var(--surface);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
}

.mp-my-bets-label {
    font-size: 12px;
    color: var(--faint);
    margin-bottom: 6px;
}

.mp-bet-chip {
    display: inline-block;
    background: rgba(212, 168, 65, 0.1);
    border: 1px solid color-mix(in oklch, var(--accent) 65%, var(--bg));
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    margin-right: 4px;
    margin-bottom: 4px;
}

/* ── Provably Fair Modal ─────────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 250;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    position: relative;
    background: rgba(12, 12, 8, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    max-width: 420px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: var(--shadow-elevated), 0 0 30px rgba(212, 168, 65, 0.05);
}

.pf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pf-header h3 {
    font-size: 18px;
}

.pf-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 28px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.pf-section {
    margin-bottom: 16px;
}

.pf-section h4 {
    font-size: 14px;
    color: var(--accent);
    margin-bottom: 8px;
}

.pf-section p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.pf-table {
    background: var(--surface);
    border-radius: 8px;
    overflow: hidden;
}

.pf-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.pf-row:last-child {
    border-bottom: none;
}

.pf-row span:first-child {
    color: var(--muted);
}

.pf-row span:last-child {
    font-weight: 600;
}

.pf-detail {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.pf-detail label {
    color: var(--faint);
    font-size: 12px;
}

.pf-seed {
    margin-bottom: 8px;
}

.pf-seed label {
    display: block;
    font-size: 11px;
    color: var(--faint);
    margin-bottom: 2px;
}

.pf-seed code {
    display: block;
    background: var(--surface);
    border-radius: 6px;
    padding: 8px;
    font-size: 11px;
    word-break: break-all;
    color: var(--muted);
    font-family: monospace;
}

.pf-json {
    background: var(--surface);
    border-radius: 6px;
    padding: 10px;
    font-size: 11px;
    color: var(--muted);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: monospace;
}

/* ── N2: Provably-fair outcome verifier ─────────────────────────── */
.pf-seed-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    vertical-align: 1px;
    font-family: var(--font-body);
}
.pf-seed-tag--reveal {
    background: rgba(127, 207, 150, 0.14);
    color: #7fcf96;
}
.pf-verify-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}
.pf-verify-arrow {
    font-size: 14px;
    color: rgba(242, 202, 80, 0.5);
}
.pf-verify-step-2 {
    font-style: italic;
}
.pf-verify-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 0;
    border: 1px solid;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
}
.pf-verify-banner--ok {
    border-color: rgba(127, 207, 150, 0.4);
    background: rgba(127, 207, 150, 0.08);
    color: #a8dfb8;
}
.pf-verify-banner--bad {
    border-color: rgba(255, 100, 100, 0.5);
    background: rgba(255, 100, 100, 0.1);
    color: #ffb4ab;
}
.pf-verify-banner--neutral {
    border-color: rgba(242, 202, 80, 0.35);
    background: rgba(242, 202, 80, 0.06);
    color: #f2ca50;
}
.pf-verify-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: currentColor;
    color: #0a0906;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
}
.pf-verify-banner--ok .pf-verify-icon  { background: #7fcf96; color: #0a3a18; }
.pf-verify-banner--bad .pf-verify-icon { background: #ff6464; color: #2a0707; }
.pf-verify-banner--neutral .pf-verify-icon { background: #f2ca50; color: #3c2f00; }

.pf-verify-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pf-verify-step {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pf-verify-step label {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.pf-verify-step code {
    display: block;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    color: #e5e2e1;
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-all;
}
.pf-verify-mono {
    font-size: 11px !important;
    color: #f2ca50 !important;
}
.pf-verify-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 0;
    border: 1px solid;
    font-family: var(--font-body);
    font-size: 12px;
}
.pf-verify-row--missing {
    border-color: rgba(255, 100, 100, 0.3);
    background: rgba(255, 100, 100, 0.05);
    color: #ffb4ab;
}
.pf-verify-row--info {
    border-color: rgba(242, 202, 80, 0.25);
    background: rgba(242, 202, 80, 0.04);
    color: rgba(242, 202, 80, 0.85);
}

/* Standalone "verify by ID" prompt */
.pf-verify-input-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.pf-verify-input {
    flex: 1;
    min-width: 200px;
    padding: 11px 14px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(242, 202, 80, 0.25);
    border-radius: 2px;
    color: #e5e2e1;
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pf-verify-input:focus {
    border-color: rgba(242, 202, 80, 0.6);
    box-shadow: 0 0 0 2px rgba(242, 202, 80, 0.15);
}
.pf-verify-help {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Enhanced info modal sections */
.pf-description p {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    font-style: italic;
}
.pf-edge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pf-edge h4 { margin-bottom: 0 !important; }
.pf-edge-badge {
    background: rgba(39, 174, 96, 0.15);
    border: 1px solid rgba(39, 174, 96, 0.4);
    color: #7ef0a8;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}
.pf-rules-list, .pf-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pf-rules-list li, .pf-tips-list li {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    padding: 5px 0 5px 18px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pf-rules-list li:last-child, .pf-tips-list li:last-child {
    border-bottom: none;
}
.pf-rules-list li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}
.pf-tips-list li::before {
    content: '\2728';
    position: absolute;
    left: 0;
    font-size: 11px;
}
.pf-payout-val {
    color: #ffd97a !important;
}
.pf-provably {
    border-top: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    padding-top: 14px;
    margin-top: 8px;
}

/* ── BJ History Modal ────────────────────────────────────────── */
.bj-history-modal {
    max-height: 85vh;
}
.bj-hist-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bj-hist-empty {
    text-align: center;
    color: rgba(255,255,255,0.4);
    padding: 40px 0;
    font-size: 14px;
}
.bj-hist-row {
    display: grid;
    grid-template-columns: 50px 1fr auto 1fr 80px;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 0.15s;
}
.bj-hist-row:active {
    background: rgba(255,255,255,0.08);
}
.bj-hist-date {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    line-height: 1.3;
}
.bj-hist-date span {
    font-size: 9px;
    opacity: 0.65;
}
.bj-hist-cards-col {
    min-width: 0;
}
.bj-hist-hand-label {
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.bj-hist-hand {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.bj-hist-card {
    display: inline-block;
    padding: 2px 4px;
    background: #fff;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.bj-hist-card.red { color: #d32f2f; }
.bj-hist-card.black { color: #1a1a1a; }
.bj-hist-vs {
    font-size: 9px;
    color: rgba(255,255,255,0.25);
    text-align: center;
}
.bj-hist-result {
    text-align: right;
}
.bj-hist-outcome {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bj-hist-outcome.win { color: #7ef0a8; }
.bj-hist-outcome.lose { color: #ff8b8b; }
.bj-hist-outcome.push { color: rgba(255,255,255,0.5); }
.bj-hist-net {
    font-size: 10px;
    font-weight: 600;
}
.bj-hist-net.win { color: #7ef0a8; }
.bj-hist-net.lose { color: #ff8b8b; }
.bj-hist-net.push { color: rgba(255,255,255,0.4); }

/* Detail view */
.bj-detail-id {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 1px;
    margin-bottom: 14px;
    font-family: monospace;
}
.bj-detail-section {
    margin-bottom: 14px;
}
.bj-detail-label {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.bj-detail-cards {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bj-detail-cards .bj-hist-card {
    padding: 5px 7px;
    font-size: 14px;
    min-width: 28px;
    border-radius: 5px;
}
.bj-detail-result {
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    margin: 14px 0;
}
.bj-detail-result.win { background: rgba(39,174,96,0.12); border: 1px solid rgba(39,174,96,0.3); }
.bj-detail-result.lose { background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.3); }
.bj-detail-result.push { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); }
.bj-detail-outcome {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
}
.bj-detail-result.win .bj-detail-outcome { color: #7ef0a8; }
.bj-detail-result.lose .bj-detail-outcome { color: #ff8b8b; }
.bj-detail-result.push .bj-detail-outcome { color: rgba(255,255,255,0.6); }
.bj-detail-net {
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
}
.bj-detail-result.win .bj-detail-net { color: #7ef0a8; }
.bj-detail-result.lose .bj-detail-net { color: #ff8b8b; }
.bj-detail-ins {
    text-align: center;
    font-size: 12px;
    color: #5dade2;
    margin-bottom: 10px;
}
.bj-detail-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.bj-hist-back {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: #ffd97a;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.bj-hist-back:active { transform: scale(0.97); }

/* ── Bottom Nav ──────────────────────────────────────────────── */
#bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: rgba(6, 6, 8, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 100;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.5);
}

.nav-btn {
    background: none;
    border: none;
    color: var(--faint);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    position: relative;
}

.nav-btn.active {
    color: var(--accent);
}
.nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 8px rgba(212, 168, 65, 0.4);
}

.nav-icon {
    font-size: 22px;
    transition: transform 0.2s;
}
.nav-btn.active .nav-icon {
    transform: scale(1.05);
}

.nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ── Toast Notifications ─────────────────────────────────────── */
.toast {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    left: 16px;
    right: 16px;
    background: rgba(12, 12, 18, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: 14px 20px;
    font-weight: 600;
    font-size: 14px;
    z-index: 200;
    animation: slideDown 0.3s ease, slideUp 0.3s ease 2.5s forwards;
    text-align: center;
    box-shadow: var(--shadow-elevated);
}

.toast.success { border-color: rgba(212, 168, 65, 0.2); color: var(--accent-hi); }
.toast.error { border-color: rgba(194, 48, 40, 0.3); color: var(--loss); }
.toast.info { border-color: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}

/* Roulette Screen Background */
#roulette-screen,
#mp-roulette-table-screen {
    background: linear-gradient(135deg, #040302 0%, #0a0806 50%, #040302 100%);
    position: relative;
    overflow: hidden;
}

#roulette-screen::before,
#mp-roulette-table-screen::before {
    content: '$FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM';
    position: absolute;
    top: 0;
    left: -20px;
    right: -20px;
    bottom: 0;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 2.2;
    color: rgba(212, 168, 65, 0.015);
    pointer-events: none;
    z-index: 0;
    word-break: break-all;
    overflow: hidden;
    transform: rotate(-5deg) scale(1.1);
}

#roulette-screen > *,
#mp-roulette-table-screen > * {
    position: relative;
    z-index: 1;
}

/* Blackjack Screen Background */
#blackjack-screen {
    background: linear-gradient(135deg, #030302 0%, #080604 50%, #030302 100%);
    position: relative;
    overflow: hidden;
}

#blackjack-screen::before {
    content: '$FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM $FYM';
    position: absolute;
    top: 0;
    left: -20px;
    right: -20px;
    bottom: 0;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 2.2;
    color: rgba(212, 168, 65, 0.015);
    pointer-events: none;
    z-index: 0;
    word-break: break-all;
    overflow: hidden;
    transform: rotate(-5deg) scale(1.1);
}

#blackjack-screen > * {
    position: relative;
    z-index: 1;
}

/* ── Live Wins Ticker ──────────────────────────────────────── */
.live-wins-section {
    margin: 16px 0;
}
.live-wins-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}
.live-wins-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.live-wins-scroll::-webkit-scrollbar { display: none; }
.live-win-card {
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    min-width: 120px;
    text-align: center;
}
.live-win-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-win-game {
    font-size: 10px;
    color: var(--faint);
    margin-bottom: 4px;
}
.live-win-amount {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-hi);
}

/* ── Streak Banner ─────────────────────────────────────────── */
.streak-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-card);
}
.streak-banner.claimable {
    border-color: rgba(212, 168, 65, 0.2);
}
.streak-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.streak-fire {
    font-size: 28px;
}
.streak-text {
    display: flex;
    flex-direction: column;
}
.streak-day {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}
.streak-reward {
    font-size: 12px;
    color: var(--muted);
}

/* ── Session Stats ─────────────────────────────────────────── */

/* ── Featured Games (2x2 grid on home) ─────────────────────── */
.featured-games {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}
.featured-game-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}
.featured-game-card:active {
    transform: scale(0.96);
    border-color: color-mix(in srgb, var(--accent) 15%, transparent);
}
.featured-game-icon {
    font-size: 32px;
    margin-bottom: 6px;
}
.featured-game-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
}
.featured-game-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    opacity: 0.7;
}

/* ── Balance Count Animation ───────────────────────────────── */
@keyframes balanceCountUp {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.balance-pop {
    animation: balanceCountUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Win Celebrations ──────────────────────────────────────── */
.win-celebration {
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.win-celebration-amount {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 900;
    color: var(--accent-hi);
    text-shadow: 0 0 40px color-mix(in srgb, var(--accent-hi) 40%, transparent);
    animation: winPop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes winPop {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    80% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0; }
}

/* ── Streak Dots ─────────────────────────────────────────── */
.streak-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 6px 0 2px;
}
.streak-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--faint);
    transition: all 0.3s;
}
.streak-dot.active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: var(--accent);
    color: var(--accent-hi);
    box-shadow: 0 0 8px rgba(212, 168, 65, 0.2);
}

/* ── Session Stats ───────────────────────────────────────── */
.session-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    margin: 8px var(--space-md) 0;
    font-size: 12px;
}
.session-label {
    color: var(--faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.session-games {
    color: var(--muted);
}
.session-net {
    font-weight: 700;
    font-family: var(--font-mono);
}
.session-net.positive {
    color: var(--accent-hi);
}
.session-net.negative {
    color: #e74c3c;
}

/* ── Achievement Toast ───────────────────────────────────── */
.achievement-toast {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(212, 168, 65, 0.2), rgba(30, 30, 50, 0.95));
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 30%, transparent);
    transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(12px);
}
.achievement-toast.show {
    top: 20px;
}
.achievement-icon {
    font-size: 28px;
}
.achievement-info {
    display: flex;
    flex-direction: column;
}
.achievement-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    font-weight: 700;
}
.achievement-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

/* ── MP Active Badge ─────────────────────────────────────── */
.mp-active-badge {
    display: inline-block;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ── Achievement Cards (Profile) ─────────────────────────── */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.achievement-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 10px;
    text-align: center;
    transition: all 0.3s;
}
.achievement-card.unlocked {
    background: rgba(212, 168, 65, 0.08);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.achievement-card.locked {
    opacity: 0.4;
    filter: grayscale(1);
}
.achievement-card-icon {
    font-size: 24px;
    margin-bottom: 4px;
}
.achievement-card-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}
.achievement-card-desc {
    font-size: 10px;
    color: var(--faint);
    margin-top: 2px;
}

/* ── Modal Close Button ──────────────────────────────────── */
.modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--faint);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.modal-close:hover {
    color: var(--text);
}

/* ── Achievement Detail Modal ────────────────────────────── */
.achievement-detail-modal {
    max-width: 340px;
    text-align: center;
    padding: 28px 24px;
}
.achievement-detail-icon {
    font-size: 56px;
    margin-bottom: 8px;
}
.achievement-detail-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}
.achievement-detail-status {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 6px;
}
.achievement-detail-status.unlocked {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-hi);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.achievement-detail-status.locked {
    background: rgba(255, 255, 255, 0.05);
    color: var(--faint);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.achievement-detail-date {
    font-size: 11px;
    color: var(--faint);
    margin-bottom: 4px;
}
.achievement-detail-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 14px 0;
}
.achievement-detail-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--faint);
    font-weight: 700;
    margin-bottom: 4px;
}
.achievement-detail-desc {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 14px;
    line-height: 1.4;
}
.achievement-detail-howto {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    text-align: left;
}
.achievement-check {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    color: var(--accent-hi);
    font-weight: 900;
}
.achievement-card {
    position: relative;
    cursor: pointer;
}
.achievements-summary {
    font-size: 12px;
    color: var(--faint);
    margin-bottom: 8px;
    font-weight: 600;
}

/* ── Win Celebration Scaling ─────────────────────────────── */
.win-celebration.small .win-celebration-amount {
    font-size: 32px;
}
.win-celebration.big .win-celebration-amount {
    font-size: 56px;
    text-shadow: 0 0 60px rgba(240, 201, 76, 0.5);
}
.win-celebration.jackpot .win-celebration-amount {
    font-size: 64px;
    text-shadow: 0 0 80px color-mix(in srgb, var(--accent-hi) 60%, transparent);
    animation: jackpotPop 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes jackpotPop {
    0% { transform: scale(0.2) rotate(-5deg); opacity: 0; }
    40% { transform: scale(1.3) rotate(2deg); opacity: 1; }
    60% { transform: scale(0.95) rotate(-1deg); opacity: 1; }
    80% { transform: scale(1.05) rotate(0); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ADVANCED SLOT GAMES
   ═══════════════════════════════════════════════════════════════ */

/* ── Premium Game Cards ──────────────────────────────────────── */
.premium-grid {
    margin-bottom: 8px;
}
.game-card.premium {
    position: relative;
    border: 1px solid rgba(212, 168, 65, 0.2);
    background: linear-gradient(135deg, rgba(212, 168, 65, 0.06), rgba(0,0,0,0.4));
}
.game-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #060608;
    background: var(--accent);
    padding: 2px 6px;
    border-radius: var(--r-2);
}

/* ── Shared Slot Machine Frame ───────────────────────────────── */
.adv-slot-machine {
    margin: 0 var(--space-sm);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.adv-slot-frame {
    position: relative;
    padding: 8px 4px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.adv-slot-label {
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.5;
}
/* Banner image replacing text label */
.adv-slot-banner {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 6px;
}
.adv-slot-result {
    text-align: center;
    min-height: 24px;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 700;
}

/* ── Reel Container (shared engine) ──────────────────────────── */
.adv-slot-reels {
    width: 100%;
}

/* Engine-generated wrapper — must be position:relative for overlays */
.slot-machine {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.slot-reels-container {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 6px 3px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Individual reel column — flex-based sizing to fill available width */
.slot-reel {
    overflow: hidden;
    border-radius: 4px;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: auto;
    height: calc(var(--slot-cell-h, 64px) * var(--slot-rows, 3));
}

/* Reel strip (moves during spin via translateY) */
.slot-reel-strip {
    will-change: transform;
    display: flex;
    flex-direction: column;
}

/* Single symbol cell — fills reel width, fixed height */
.slot-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: var(--slot-cell-h, 64px);
    box-sizing: border-box;
}
.slot-symbol {
    font-size: 28px;
    line-height: 1;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}
.slot-symbol img,
.slot-symbol-img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    transition: transform 0.15s ease;
}
.slot-cell.slot-win-normal .slot-symbol-img,
.slot-cell.slot-win-big .slot-symbol-img,
.slot-cell.slot-win-jackpot .slot-symbol-img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent));
}
/* Low-tier letter symbols */
.slot-symbol-low {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 26px;
}
/* Hide text label when image asset is present */
.slot-symbol:has(.slot-symbol-img) .slot-symbol-label {
    display: none;
}
/* Theme-specific image glows */
.slot-theme-dark .slot-symbol-img {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)) drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 15%, transparent));
}
.slot-theme-emerald .slot-symbol-img {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)) drop-shadow(0 0 4px rgba(0,200,120,0.15));
}
.slot-theme-neon .slot-symbol-img {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)) drop-shadow(0 0 6px rgba(0,255,255,0.2));
}
/* Special symbol labels */
.slot-symbol-label {
    position: absolute;
    bottom: 2px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Payline Indicator (center row highlight) ───────────────── */
.slot-payline-indicator {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--slot-cell-h, 70px);
    pointer-events: none;
    z-index: 3;
    border-top: 1.5px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 15%, transparent);
    background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.slot-theme-emerald .slot-payline-indicator {
    border-color: rgba(46, 204, 113, 0.15);
    background: rgba(46, 204, 113, 0.03);
}
.slot-theme-neon .slot-payline-indicator {
    border-color: rgba(0, 212, 255, 0.15);
    background: rgba(0, 212, 255, 0.03);
}

/* ── Win Highlights ──────────────────────────────────────────── */
.slot-cell.slot-win-normal {
    animation: slotWinPulse 0.6s ease-in-out 2;
    box-shadow: inset 0 0 15px color-mix(in srgb, var(--accent) 30%, transparent);
}
.slot-cell.slot-win-big {
    animation: slotWinPulse 0.5s ease-in-out 3;
    box-shadow: inset 0 0 20px color-mix(in srgb, var(--accent-hi) 40%, transparent);
}
.slot-cell.slot-win-jackpot {
    animation: slotWinJackpot 0.4s ease-in-out 4;
    box-shadow: inset 0 0 25px color-mix(in srgb, var(--accent-hi) 60%, transparent);
}
@keyframes slotWinPulse {
    0%, 100% { background: transparent; }
    50% { background: color-mix(in srgb, var(--accent) 15%, transparent); }
}
@keyframes slotWinJackpot {
    0%, 100% { background: transparent; transform: scale(1); }
    50% { background: color-mix(in srgb, var(--accent-hi) 25%, transparent); transform: scale(1.05); }
}

/* ── Cascade Animation ───────────────────────────────────────── */
.slot-cell.cascade-removing {
    animation: cascadeShrink 0.3s ease-in forwards;
}
@keyframes cascadeShrink {
    to { transform: scale(0); opacity: 0; }
}

/* ── Big Win Overlay (positioned over the slot machine) ─────── */
.slot-bigwin-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.slot-bigwin-overlay.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.slot-bigwin-overlay.slot-bigwin-exit {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Win type label */
.slot-bigwin-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
    animation: bigWinFadeIn 0.4s ease-out;
}
.slot-bigwin-big_win .slot-bigwin-label,
.slot-bigwin-mega_win .slot-bigwin-label {
    font-size: 16px;
    letter-spacing: 5px;
}
.slot-bigwin-jackpot .slot-bigwin-label {
    font-size: 20px;
    letter-spacing: 6px;
    color: #ff4444;
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}
/* Count-up amount */
.slot-bigwin-amount {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 900;
    color: var(--accent-hi);
    text-shadow: 0 0 30px color-mix(in srgb, var(--accent-hi) 40%, transparent);
    animation: bigWinScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1.1;
}
.slot-bigwin-big_win .slot-bigwin-amount { font-size: 48px; }
.slot-bigwin-mega_win .slot-bigwin-amount { font-size: 52px; }
.slot-bigwin-jackpot .slot-bigwin-amount {
    font-size: 56px;
    color: #ff6b6b;
    text-shadow: 0 0 40px rgba(255, 68, 68, 0.5);
}
@keyframes bigWinFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes bigWinScale {
    0% { transform: scale(0.3); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
/* Particles */
.slot-bigwin-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 14px;
}
.slot-particle {
    position: absolute;
    font-size: 16px;
    left: calc(var(--px) * 100%);
    top: calc(var(--py) * 100%);
    animation: particleFloat var(--pd, 2s) ease-in-out infinite alternate;
    opacity: 0.8;
}
@keyframes particleFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-30px) rotate(180deg); opacity: 0.2; }
}
/* Screen shake */
.slot-shake {
    animation: slotShake 0.15s ease-in-out 3;
}
@keyframes slotShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px) rotate(-0.5deg); }
    75% { transform: translateX(3px) rotate(0.5deg); }
}
/* Theme-specific big win colors */
.slot-theme-emerald .slot-bigwin-label { color: #2ecc71; }
.slot-theme-emerald .slot-bigwin-amount {
    color: #5dff9e;
    text-shadow: 0 0 30px rgba(46, 204, 113, 0.4);
}
.slot-theme-neon .slot-bigwin-label { color: #00d4ff; }
.slot-theme-neon .slot-bigwin-amount {
    color: #00f0ff;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}

/* ── Controls ────────────────────────────────────────────────── */
.adv-slot-controls {
    padding: 10px var(--space-md) 0;
}
.adv-bet-section {
    margin-bottom: 10px;
}
.adv-bet-display {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-hi);
    margin-bottom: 6px;
    font-family: var(--font-mono);
}
.adv-chip-bar {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}
.adv-chip-bar .chip-btn {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
}
.adv-chip-bar .chip-btn.chip-active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: var(--accent);
    color: var(--accent-hi);
}
.adv-chip-bar .chip-btn.gold {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.adv-lines-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.adv-lines-label {
    font-size: 11px;
    color: var(--faint);
    font-weight: 600;
}
.line-btn {
    font-size: 11px;
    padding: 3px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
}
.line-btn.line-active {
    background: rgba(212, 168, 65, 0.12);
    border-color: var(--accent);
    color: var(--accent-hi);
}
.adv-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.adv-spin-btn {
    flex: 1;
    padding: 14px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: #060608;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklch, var(--accent) 65%, var(--bg)));
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(212, 168, 65, 0.2);
}
.adv-spin-btn:active {
    transform: scale(0.97);
}
.adv-spin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.adv-spin-btn.emerald {
    background: linear-gradient(135deg, #2ecc71, #1a9c55);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.2);
}
.adv-spin-btn.neon {
    background: linear-gradient(135deg, #00d4ff, #0088cc);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
}
.adv-side-btns {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.adv-turbo-btn, .adv-auto-btn {
    min-width: 56px;
    width: auto;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.adv-turbo-btn.active, .adv-auto-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212, 168, 65, 0.1);
}

/* ── THEME: DARK (Black Vault) ───────────────────────────────── */
.slot-theme-dark {
    background: linear-gradient(180deg, #0a0a0f, #050508);
    border: 1px solid rgba(212, 168, 65, 0.1);
    border-radius: 14px;
    padding: 2px;
}
.slot-theme-dark .slot-reels-container {
    background: linear-gradient(180deg, #0d0d14, #060609);
    border-color: rgba(212, 168, 65, 0.12);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 0 20px color-mix(in srgb, var(--accent) 5%, transparent);
}
.slot-theme-dark .adv-slot-label {
    color: var(--accent);
}
.slot-theme-dark .slot-reel {
    background: linear-gradient(180deg, rgba(15,15,20,0.9), rgba(5,5,8,0.95));
    border-color: rgba(212, 168, 65, 0.1);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
}
.slot-theme-dark .slot-reel + .slot-reel {
    border-left: 1px solid rgba(212, 168, 65, 0.06);
}
.slot-theme-dark .slot-cell {
    border-bottom: 1px solid rgba(212, 168, 65, 0.04);
}
.slot-theme-dark .slot-symbol-low {
    color: var(--accent);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ── THEME: EMERALD (High Roller) ────────────────────────────── */
.slot-theme-emerald {
    background: linear-gradient(180deg, #0a1a12, #050d08);
    border: 1px solid rgba(46, 204, 113, 0.12);
    border-radius: 14px;
    padding: 2px;
}
.slot-theme-emerald .slot-reels-container {
    background: linear-gradient(180deg, #0c1a10, #060d08);
    border-color: rgba(46, 204, 113, 0.1);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5), 0 0 20px rgba(46,204,113,0.04);
}
.slot-theme-emerald .adv-slot-label {
    color: #2ecc71;
}
.slot-theme-emerald .slot-reel {
    background: linear-gradient(180deg, rgba(0,25,12,0.8), rgba(0,15,8,0.9));
    border-color: rgba(46, 204, 113, 0.08);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.4);
}
.slot-theme-emerald .slot-reel + .slot-reel {
    border-left: 1px solid rgba(46, 204, 113, 0.06);
}
.slot-theme-emerald .slot-cell {
    border-bottom: 1px solid rgba(46, 204, 113, 0.03);
}
.slot-theme-emerald .slot-symbol-low {
    color: #a8d8b8;
    text-shadow: 0 0 6px rgba(46, 204, 113, 0.2);
}
/* ═══════════════════════════════════════════════════════════════
   HIGH ROLLER CLUB — Full UI (v2 — Premium Upgrade)
   ═══════════════════════════════════════════════════════════════ */

#high-roller-screen { padding: 0; overflow: hidden; }

/* ── Cinematic Loader ─────────────────────────────────────── */
.hr-loader {
    position: fixed; inset: 0; z-index: 99999;
    top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    min-width: 100vw; min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.hr-loader.hidden { display: none; }
.hr-loader-bg {
    position: absolute; inset: 0;
    background: url('/static/images/slots/high-roller/bg.png') center center / cover no-repeat;
}
.hr-loader-bg::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
}
.hr-loader-content {
    position: relative; z-index: 2;
    text-align: center;
    transition: opacity 0.5s;
}
.hr-loader-logo {
    font-size: 64px;
    animation: hrLoaderPulse 2s ease-in-out infinite;
}
@keyframes hrLoaderPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(46,204,113,0.4)); }
    50%      { transform: scale(1.1); filter: drop-shadow(0 0 40px rgba(46,204,113,0.7)); }
}
.hr-loader-title {
    font-size: 28px; font-weight: 900; color: #2ecc71;
    letter-spacing: 3px; margin-top: 12px;
    text-shadow: 0 0 20px rgba(46,204,113,0.5), 0 2px 4px rgba(0,0,0,0.8);
}
.hr-loader-sub {
    font-size: 12px; color: rgba(255,255,255,0.4);
    letter-spacing: 4px; text-transform: uppercase; margin-top: 4px;
}
.hr-loader-bar-wrap {
    width: 200px; height: 3px; margin: 20px auto 0;
    background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden;
}
.hr-loader-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #2ecc71, #d4a840);
    border-radius: 2px;
    transition: width 0.3s;
}
.hr-loader-pct {
    font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 6px;
}

/* Curtains — slower, more theatrical */
.hr-loader-curtain {
    position: absolute; top: 0; bottom: 0;
    width: 52%; z-index: 3;
    background: linear-gradient(180deg, #041a0d, #020d06);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.hr-curtain-left { left: 0; transform: translateX(-100%); }
.hr-curtain-right { right: 0; transform: translateX(100%); }
.hr-loader.curtains-in .hr-curtain-left { transform: translateX(0); }
.hr-loader.curtains-in .hr-curtain-right { transform: translateX(0); }
.hr-loader.curtains-out .hr-loader-content { opacity: 0; }
.hr-loader.curtains-out .hr-loader-bg { opacity: 0; transition: opacity 0.4s; }
.hr-loader.fade-out { opacity: 0; transition: opacity 0.5s; }

/* ── Intro Overlay (game explanation) ────────────────────── */
.hr-intro {
    position: fixed; inset: 0; z-index: 9998;
    background: radial-gradient(ellipse at 50% 30%, rgba(10,46,26,0.98), rgba(0,0,0,0.99));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 20px;
    animation: hrIntroIn 0.5s ease-out;
}
@keyframes hrIntroIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.hr-intro-glow {
    position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(46,204,113,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.hr-intro-crown {
    font-size: 48px;
    filter: drop-shadow(0 0 20px rgba(46,204,113,0.5));
    margin-bottom: 8px;
}
.hr-intro-tagline {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.35);
    letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 20px;
}

.hr-intro-cards {
    display: flex; flex-direction: column; gap: 10px;
    width: 100%; max-width: 340px;
}
.hr-intro-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: rgba(46,204,113,0.06);
    border: 1px solid rgba(46,204,113,0.12);
    border-radius: 12px;
}
.hr-intro-card-icon {
    font-size: 24px; flex-shrink: 0; width: 36px; text-align: center;
}
.hr-intro-card-text {
    font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.4;
}
.hr-intro-card-text b {
    display: block; font-size: 13px; color: #2ecc71;
    margin-bottom: 2px; letter-spacing: 0.5px;
}
.hr-intro-card-text em {
    color: #5dff9e; font-style: normal; font-weight: 700;
}

.hr-intro-skip {
    display: flex; align-items: center; gap: 8px;
    margin-top: 16px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hr-intro-skip-box {
    width: 16px; height: 16px; border-radius: 4px;
    border: 1.5px solid rgba(46,204,113,0.3);
    background: rgba(46,204,113,0.05);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}
.hr-intro-skip input { display: none; }
.hr-intro-skip input:checked + .hr-intro-skip-box {
    background: #2ecc71; border-color: #2ecc71;
}
.hr-intro-skip input:checked + .hr-intro-skip-box::after {
    content: '\2713'; color: #000; font-size: 11px; font-weight: 900;
}
.hr-intro-skip-label {
    font-size: 11px; color: rgba(255,255,255,0.35);
}

.hr-intro-enter {
    margin-top: 20px; padding: 14px 36px;
    background: linear-gradient(135deg, #2ecc71, #1a9e54);
    border: none; border-radius: 12px;
    color: #fff; font-size: 14px; font-weight: 800;
    letter-spacing: 2px; cursor: pointer;
    box-shadow: 0 4px 20px rgba(46,204,113,0.4), 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.hr-intro-enter:active { transform: scale(0.96); }
.hr-intro-enter-arrow {
    margin-left: 8px; font-size: 16px;
}

/* ── Floating Nav Buttons ─────────────────────────────────── */
.hr-nav-btn {
    position: absolute; z-index: 20;
    top: 10px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,0.5); border: 1px solid rgba(46,204,113,0.2);
    color: #2ecc71;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hr-nav-btn:active { background: rgba(46,204,113,0.2); }
.hr-nav-btn svg { display: block; }
.hr-nav-back { left: 10px; }
.hr-nav-info { right: 10px; }

/* ── Stage (full viewport background) ─────────────────────── */
.hr-stage {
    position: relative; width: 100%; height: 100vh;
    overflow: hidden;
    background: #010a04;
}
.hr-stage-bg {
    position: absolute; inset: 0;
    background: url('/static/images/slots/high-roller/bg.png') center top / cover no-repeat;
}
/* Soft vignette overlay */
.hr-stage-bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(0,0,0,0.4) 100%),
        linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}
/* Animated bokeh particles over the background */
.hr-stage-bokeh {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(3px 3px at 12% 20%, rgba(212,168,65,0.5), transparent 70%),
        radial-gradient(2px 2px at 78% 12%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
        radial-gradient(2.5px 2.5px at 50% 8%, rgba(46,204,113,0.35), transparent 70%),
        radial-gradient(2px 2px at 88% 30%, rgba(255,255,255,0.15), transparent 70%),
        radial-gradient(1.5px 1.5px at 22% 6%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
        radial-gradient(2px 2px at 65% 25%, rgba(46,204,113,0.25), transparent 70%),
        radial-gradient(1.5px 1.5px at 35% 18%, rgba(255,200,50,0.2), transparent 70%);
    animation: hrBokeh 10s ease-in-out infinite alternate;
}
/* Floating light shimmer */
.hr-stage-bokeh::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 5%, rgba(46,204,113,0.08) 0%, transparent 50%);
    animation: hrShimmer 6s ease-in-out infinite alternate;
}
@keyframes hrBokeh {
    0%   { opacity: 0.5; transform: translate(0, 0); }
    25%  { transform: translate(3px, -2px); }
    50%  { opacity: 0.9; transform: translate(-2px, 1px); }
    75%  { transform: translate(1px, 3px); }
    100% { opacity: 0.7; transform: translate(-1px, -2px); }
}
@keyframes hrShimmer {
    0%   { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.7; transform: scale(1.15); }
}

/* ── Machine Wrapper ──────────────────────────────────────── */
.hr-machine-wrap {
    position: absolute;
    top: -25px; left: 50%; transform: translateX(-50%);
    width: 92%; max-width: 380px;
}
.hr-banner {
    display: block;
    width: 90%;
    margin: 0 auto;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.7));
}
.hr-banner-wrap {
    position: relative;
    z-index: 3;
    margin-bottom: -47px;
}
.hr-machine-wrap .adv-slot-machine {
    border-radius: 0 0 16px 16px;
    box-shadow:
        0 0 40px rgba(46,204,113,0.08),
        0 8px 30px rgba(0,0,0,0.6);
}
/* Gold accent border on the machine frame — flush with banner */
.hr-machine-wrap .adv-slot-frame {
    padding: 0 4px 4px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-top: none;
    border-radius: 0 0 14px 14px;
    position: relative;
}
.hr-machine-wrap .adv-slot-machine {
    border-radius: 0 0 16px 16px;
}
.hr-machine-wrap .adv-slot-frame::before {
    content: ''; position: absolute; inset: -1px; border-radius: 0 0 14px 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 40%, transparent 60%, rgba(46,204,113,0.1));
    pointer-events: none; z-index: 0;
}
.hr-machine-wrap .adv-slot-label {
    display: none; /* replaced by banner image */
}

/* Result */
.hr-result {
    text-align: center; padding: 4px 0; min-height: 20px;
    font-size: 13px; font-weight: 700;
}
.hr-result.win { color: #2ecc71; }
.hr-result.lose { color: rgba(255,255,255,0.3); font-weight: 400; font-size: 11px; }
.hr-result .win-label { font-size: 11px; color: #2ecc71; letter-spacing: 1px; }
.hr-result .win-amount { font-size: 16px; color: #5dff9e; text-shadow: 0 0 12px rgba(93,255,158,0.4); }
.hr-result .game-id-text {
    font-size: 9px; color: rgba(255,255,255,0.25); cursor: pointer; margin-top: 2px;
}

/* ── Cascade Badge ────────────────────────────────────────── */
.hr-cascade-badge {
    position: absolute; top: 8px; right: 10px;
    font-family: var(--font-display);
    font-size: 22px; font-weight: 900; color: #2ecc71;
    text-shadow: 0 0 16px rgba(46,204,113,0.6);
    opacity: 0; transition: opacity 0.3s, transform 0.3s;
    transform: scale(0.8);
    z-index: 5;
}
.hr-cascade-badge.visible { opacity: 1; transform: scale(1); }

/* ── Status Meter (multiplier steps) ──────────────────────── */
.hr-status-meter {
    margin: 6px 4px 0;
    padding: 0;
}
.hr-status-steps {
    display: flex; justify-content: space-between; gap: 2px;
    margin-bottom: 3px;
}
.hr-step {
    flex: 1; text-align: center;
    font-size: 9px; font-weight: 800;
    color: rgba(255,255,255,0.2);
    padding: 2px 0;
    border-radius: 3px;
    background: rgba(255,255,255,0.03);
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}
.hr-step.active {
    color: #fff;
    background: linear-gradient(180deg, #2ecc71, #1a9e54);
    box-shadow: 0 0 8px rgba(46,204,113,0.5);
}
.hr-step.active.warm {
    background: linear-gradient(180deg, #e67e22, #d4a840);
    box-shadow: 0 0 8px rgba(230,126,34,0.5);
}
.hr-step.active.hot {
    background: linear-gradient(180deg, #e74c3c, #c0392b);
    box-shadow: 0 0 10px rgba(231,76,60,0.6);
    animation: hrStepPulse 0.6s ease-in-out infinite alternate;
}
@keyframes hrStepPulse {
    from { box-shadow: 0 0 8px rgba(231,76,60,0.4); }
    to   { box-shadow: 0 0 14px rgba(231,76,60,0.8); }
}
.hr-status-track {
    height: 3px; background: rgba(255,255,255,0.05);
    border-radius: 2px; overflow: hidden;
}
.hr-status-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #2ecc71, var(--accent));
    border-radius: 2px;
    transition: width 0.5s ease-out, background 0.3s;
}
.hr-status-fill.warm {
    background: linear-gradient(90deg, #d4a840, #e67e22);
}
.hr-status-fill.hot {
    background: linear-gradient(90deg, #e74c3c, #ff2d55);
    box-shadow: 0 0 8px rgba(231,76,60,0.5);
}

/* ── Running Total (during cascades) ─────────────────────── */
.hr-running-total {
    text-align: center; padding: 6px 0 2px;
    animation: hrRunningIn 0.3s ease-out;
}
@keyframes hrRunningIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hr-running-label {
    font-size: 9px; font-weight: 700; color: rgba(46,204,113,0.6);
    letter-spacing: 2px; display: block;
}
.hr-running-amount {
    font-size: 18px; font-weight: 900; color: #5dff9e;
    text-shadow: 0 0 16px rgba(93,255,158,0.4);
    font-family: var(--font-mono, monospace);
}

/* ── Per-cluster win popup ───────────────────────────────── */
.hr-cluster-popup {
    position: absolute;
    font-size: 12px; font-weight: 900;
    color: #5dff9e; white-space: nowrap;
    text-shadow: 0 0 8px rgba(93,255,158,0.6), 0 1px 3px rgba(0,0,0,0.8);
    pointer-events: none; z-index: 10;
    animation: hrPopupFloat 1.2s ease-out forwards;
}
@keyframes hrPopupFloat {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    70%  { opacity: 1; transform: translateY(-20px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-30px) scale(0.9); }
}

/* ── Controls (v2 — compact step-based) ──────────────────── */
.hr-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 8px 14px 20px;
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    z-index: 15;
}

/* Bet row */
.hr-bet-row {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-bottom: 10px;
}
.hr-bet-step {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.2);
    color: #2ecc71; display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.hr-bet-step:active { background: rgba(46,204,113,0.2); transform: scale(0.92); }
.hr-bet-step svg { display: block; }
.hr-bet-pill {
    min-width: 100px; text-align: center; padding: 6px 16px;
    background: rgba(46,204,113,0.06);
    border: 1px solid rgba(46,204,113,0.15);
    border-radius: 20px;
}
.hr-bet-value {
    font-size: 18px; font-weight: 800; color: #2ecc71;
    font-family: var(--font-mono, monospace);
    text-shadow: 0 0 8px rgba(46,204,113,0.3);
}
.hr-bet-currency {
    font-size: 10px; font-weight: 600; color: rgba(46,204,113,0.5);
    margin-left: 4px;
}
.hr-bet-max {
    padding: 6px 12px; border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: #d4a840; font-size: 11px; font-weight: 800;
    letter-spacing: 1px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.hr-bet-max:active { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Action row */
.hr-action-row {
    display: flex; align-items: center; justify-content: center; gap: 16px;
}

/* Spin button with ring */
.hr-spin-wrap {
    position: relative;
    width: 72px; height: 72px;
}
.hr-spin-ring {
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(46,204,113,0.15);
    animation: hrSpinRingIdle 4s linear infinite;
    pointer-events: none;
}
.hr-spin-ring::after {
    content: ''; position: absolute; top: -2px; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px rgba(46,204,113,0.6);
}
@keyframes hrSpinRingIdle {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.hr-spin-btn {
    width: 72px; height: 72px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #2ecc71, #1a9e54);
    border: 3px solid rgba(255,255,255,0.15);
    box-shadow: 0 0 24px rgba(46,204,113,0.4), 0 4px 12px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s, box-shadow 0.2s;
    position: relative; z-index: 1;
}
.hr-spin-btn:active { transform: scale(0.93); }
.hr-spin-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.hr-spin-btn:disabled ~ .hr-spin-ring { animation-play-state: paused; }
.hr-spin-chevrons { display: block; }

/* Side buttons (icon-based) */
.hr-side-btns { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.hr-icon-btn {
    position: relative;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.2);
    color: #2ecc71;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, border-color 0.2s;
}
.hr-icon-btn svg { display: block; }
.hr-icon-btn:active { background: rgba(46,204,113,0.2); }
.hr-icon-btn.active {
    background: rgba(46,204,113,0.25);
    border-color: #2ecc71;
    box-shadow: 0 0 8px rgba(46,204,113,0.3);
}

/* Auto-spin badge (inside button now) */
.hr-auto-badge {
    position: absolute; top: -4px; right: -4px;
    background: #2ecc71; color: #000; font-size: 8px; font-weight: 900;
    padding: 1px 4px; border-radius: 6px;
    line-height: 1.3;
}

/* Auto-spin menu */
.hr-autospin-menu {
    display: none; text-align: center;
    margin-top: 8px; padding: 8px;
    background: rgba(46,204,113,0.06); border-radius: 12px;
    border: 1px solid rgba(46,204,113,0.12);
}
.hr-autospin-menu.visible { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hr-autospin-menu button {
    background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.2);
    color: #2ecc71; padding: 6px 16px; border-radius: 8px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.hr-autospin-menu button:active { background: rgba(46,204,113,0.25); }
.hr-auto-check {
    display: flex; align-items: center; gap: 6px;
    width: 100%; justify-content: center;
    font-size: 11px; color: rgba(255,255,255,0.4);
    margin-top: 4px;
}
.hr-auto-check input { accent-color: #2ecc71; }
.hr-auto-stop {
    background: rgba(231,76,60,0.15) !important;
    border-color: rgba(231,76,60,0.3) !important;
    color: #e74c3c !important;
}

/* ══════════════════════════════════════════════════════════════
   VIP ROOM — Exclusive Free Spins Cinematic Experience
   ══════════════════════════════════════════════════════════════ */

/* ── Intro Overlay (the grand reveal) ──────────────────────── */
.hr-bonus-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    overflow: hidden;
}
.hr-bonus-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(40,25,0,0.95), rgba(5,2,0,0.99)),
        url('/static/images/slots/high-roller/bg.png') center/cover no-repeat;
    filter: brightness(0.3) saturate(1.3);
    z-index: -2;
}
.hr-bonus-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(255,215,0,0.06), transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(255,180,0,0.04), transparent 40%),
        radial-gradient(ellipse at 80% 20%, rgba(255,180,0,0.04), transparent 40%);
    z-index: -1;
    animation: vipAmbientGlow 4s ease-in-out infinite alternate;
}
@keyframes vipAmbientGlow {
    0%   { opacity: 0.6; }
    100% { opacity: 1; }
}
.hr-bonus-overlay.visible { opacity: 1; }
.hr-bonus-overlay.hr-bonus-exit { opacity: 0; transition: opacity 0.5s ease; }

/* ── VIP Doors Opening Animation ───────────────────────────── */
.vip-door-left, .vip-door-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 10;
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}
.vip-door-left {
    left: 0;
    background: linear-gradient(90deg, #0a0500, #1a0f00 80%, #2a1800);
    border-right: 2px solid rgba(255,215,0,0.3);
    transform: translateX(0);
}
.vip-door-right {
    right: 0;
    background: linear-gradient(-90deg, #0a0500, #1a0f00 80%, #2a1800);
    border-left: 2px solid rgba(255,215,0,0.3);
    transform: translateX(0);
}
.vip-doors-open .vip-door-left { transform: translateX(-105%); }
.vip-doors-open .vip-door-right { transform: translateX(105%); }

/* Door ornaments */
.vip-door-left::after, .vip-door-right::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 3px;
    height: 60px;
    margin-top: -30px;
    background: linear-gradient(180deg, transparent, rgba(255,215,0,0.4), transparent);
    border-radius: 2px;
}
.vip-door-left::after { right: 20px; }
.vip-door-right::after { left: 20px; }

/* ── Bonus Header ──────────────────────────────────────────── */
.hr-bonus-header {
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 5;
}
.hr-bonus-title {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 6px;
    background: linear-gradient(180deg, #fff 0%, #ffd700 30%, #d4a841 60%, #8b6914 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(255,215,0,0.4));
    animation: vipTitlePulse 3s ease-in-out infinite;
}
@keyframes vipTitlePulse {
    0%, 100% { filter: drop-shadow(0 2px 8px rgba(255,215,0,0.3)); transform: scale(1); }
    50%      { filter: drop-shadow(0 2px 20px rgba(255,215,0,0.6)); transform: scale(1.02); }
}
.hr-bonus-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-top: 10px;
    letter-spacing: 3px;
    opacity: 0;
    animation: vipSubtitleIn 0.6s 0.8s ease-out forwards;
}
@keyframes vipSubtitleIn {
    0%   { opacity: 0; transform: translateY(15px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Free spins count badge */
.hr-bonus-spins-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000;
    font-size: 24px;
    font-weight: 900;
    padding: 6px 20px;
    border-radius: 30px;
    margin-top: 12px;
    box-shadow: 0 4px 20px rgba(255,215,0,0.4), inset 0 2px 0 rgba(255,255,255,0.3);
    opacity: 0;
    animation: spinsBadgePop 0.5s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes spinsBadgePop {
    0%   { opacity: 0; transform: scale(0.3) rotate(-5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ── Bonus Status Bar ──────────────────────────────────────── */
.hr-bonus-status {
    display: flex;
    gap: 24px;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    position: relative;
    z-index: 5;
    margin-top: 16px;
    padding: 8px 20px;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    border: 1px solid rgba(255,215,0,0.1);
}
#hr-bonus-spin-num {
    letter-spacing: 1px;
}
#hr-bonus-running-win {
    color: #ffd700;
    font-weight: 800;
    letter-spacing: 1px;
}

/* ── VIP Floating Particles (ambient) ──────────────────────── */
.vip-ambient-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.vip-ambient-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255,215,0,0.4);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255,215,0,0.3);
    animation: vipParticleFloat var(--vd, 4s) var(--vdel, 0s) ease-in-out infinite;
}
@keyframes vipParticleFloat {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
    10%      { opacity: 0.6; }
    50%      { transform: translateY(var(--vy, -100px)) translateX(var(--vx, 20px)); opacity: 0.8; }
    90%      { opacity: 0.3; }
}

/* ── Per-spin win flash ────────────────────────────────────── */
.vip-spin-win-flash {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255,215,0,0.5);
    border-radius: 14px;
    z-index: 30;
    pointer-events: none;
    animation: vipWinFlash 0.5s ease-out forwards;
}
@keyframes vipWinFlash {
    0%   { box-shadow: inset 0 0 40px rgba(255,215,0,0.4); opacity: 1; }
    100% { box-shadow: inset 0 0 0 rgba(255,215,0,0); opacity: 0; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 380px) {
    .hr-machine-wrap { width: 96%; top: 4px; }
    .hr-banner { width: 84%; }
    .hr-spin-wrap, .hr-spin-btn { width: 64px; height: 64px; }
    .hr-bet-pill { min-width: 80px; }
    .hr-intro-cards { gap: 8px; }
    .hr-intro-card { padding: 8px 10px; }
    .hr-intro-enter { padding: 12px 28px; font-size: 13px; }
}
@media (min-height: 750px) {
    .hr-machine-wrap { top: 10px; }
}

/* ── THEME: NEON (Liquidation) ───────────────────────────────── */
.slot-theme-neon {
    background: linear-gradient(180deg, #050510, #02020a);
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 14px;
    padding: 2px;
}
.slot-theme-neon .slot-reels-container {
    background: linear-gradient(180deg, #06061a, #020210);
    border-color: rgba(0, 212, 255, 0.1);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 0 20px rgba(0,212,255,0.04);
}
.slot-theme-neon .adv-slot-label {
    color: #00d4ff;
}
.slot-theme-neon .slot-reel {
    background: linear-gradient(180deg, rgba(0,8,25,0.8), rgba(0,3,15,0.95));
    border-color: rgba(0, 212, 255, 0.08);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
}
.slot-theme-neon .slot-reel + .slot-reel {
    border-left: 1px solid rgba(0, 212, 255, 0.06);
}
.slot-theme-neon .slot-cell {
    border-bottom: 1px solid rgba(0, 212, 255, 0.03);
}
.slot-theme-neon .slot-symbol-low {
    color: #00d4ff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}
.lp-ways-display {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 800;
    color: #00d4ff;
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}
.lp-megaways .slot-reel {
    transition: height 0.4s ease-out;
}

/* ── Glitch Effect (Liquidation) ─────────────────────────────── */
.glitch-active {
    animation: glitchShake 0.3s linear;
}
@keyframes glitchShake {
    0%, 100% { transform: translate(0); filter: none; }
    20% { transform: translate(-2px, 1px); filter: hue-rotate(30deg); }
    40% { transform: translate(2px, -1px); filter: hue-rotate(-30deg); }
    60% { transform: translate(-1px, -1px); filter: hue-rotate(15deg); }
    80% { transform: translate(1px, 2px); filter: hue-rotate(-15deg); }
}

/* ── Vault Break Bonus Overlay ───────────────────────────────── */
.vault-break-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vault-break-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--accent);
    margin-bottom: 20px;
}
.vault-safes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    max-width: 280px;
}
.vault-safe {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: rgba(212, 168, 65, 0.08);
    border: 2px solid color-mix(in srgb, var(--accent) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: default;
    transition: all 0.4s;
}
.vault-safe.revealed {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.vault-safe.revealed .vault-safe-value {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    color: var(--accent-hi);
}
.vault-safe.not-picked {
    opacity: 0.3;
}
.vault-break-total {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 900;
    color: var(--accent-hi);
    text-shadow: 0 0 30px color-mix(in srgb, var(--accent-hi) 40%, transparent);
}
.vault-break-collect {
    margin-top: 16px;
    padding: 12px 40px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #060608;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
}

/* ── VIP Room Bonus Overlay ──────────────────────────────────── */
.vip-room-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 20, 10, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vip-room-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #2ecc71;
    margin-bottom: 8px;
}
.vip-room-spin-counter {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 16px;
}

/* ── Liquidation Mode Overlay ────────────────────────────────── */
.liquidation-mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(2, 2, 10, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.liquidation-mode-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #00d4ff;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    animation: glitchText 2s infinite;
}
@keyframes glitchText {
    0%, 90%, 100% { opacity: 1; transform: translate(0); }
    92% { opacity: 0.8; transform: translate(-2px, 1px); }
    94% { opacity: 1; transform: translate(1px, -1px); }
    96% { opacity: 0.9; transform: translate(-1px, 0); }
}

/* ── Wild Multiplier Badge ───────────────────────────────────── */
.wild-mult-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 9px;
    font-weight: 900;
    color: #060608;
    background: #00d4ff;
    padding: 1px 4px;
    border-radius: 4px 0 0 0;
}

/* ── Slot Paytable Modal ─────────────────────────────────────── */
.slot-paytable-modal .modal-content {
    max-height: 85vh;
}
.paytable-section {
    margin-bottom: 14px;
}
.paytable-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 6px;
}
.paytable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12px;
}
.paytable-symbol-name {
    display: flex;
    align-items: center;
    gap: 6px;
}
.paytable-multipliers {
    display: flex;
    gap: 10px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 11px;
}
.paytable-multipliers span {
    min-width: 40px;
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM SLOT UI ENHANCEMENTS
   Ambient glow, frame bevels, shine sweeps, idle animations
   ═══════════════════════════════════════════════════════════════ */

/* Outer machine frame — adds a luxurious bevel and ambient glow */
.adv-slot-machine {
    position: relative;
    padding: 3px;
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(0,0,0,0.4));
    box-shadow:
        0 8px 30px rgba(0,0,0,0.6),
        0 2px 10px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.08);
}
.adv-slot-machine::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(212,168,65,0.5), transparent 40%, transparent 60%, color-mix(in srgb, var(--accent) 30%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.slot-theme-emerald.adv-slot-machine::before {
    background: linear-gradient(135deg, rgba(46,204,113,0.5), transparent 40%, transparent 60%, rgba(46,204,113,0.3));
}
.slot-theme-neon.adv-slot-machine::before {
    background: linear-gradient(135deg, rgba(0,212,255,0.5), transparent 40%, transparent 60%, rgba(0,212,255,0.3));
}

/* Inner frame — glass-morphism look */
.adv-slot-frame {
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.04), transparent 70%),
                linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Ambient glow under the reels */
.adv-slot-frame::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 10%;
    right: 10%;
    height: 60px;
    background: radial-gradient(ellipse at center, rgba(212,168,65,0.18), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
.slot-theme-emerald .adv-slot-frame::after {
    background: radial-gradient(ellipse at center, rgba(46,204,113,0.18), transparent 70%);
}
.slot-theme-neon .adv-slot-frame::after {
    background: radial-gradient(ellipse at center, rgba(0,212,255,0.2), transparent 70%);
}

/* Reels container — add inner reflections & top/bottom shadow gradients */
.slot-reels-container {
    position: relative;
    box-shadow:
        inset 0 12px 20px -12px rgba(0,0,0,0.9),
        inset 0 -12px 20px -12px rgba(0,0,0,0.9),
        inset 0 0 0 1px rgba(255,255,255,0.03);
}
.slot-reels-container::before,
.slot-reels-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
    z-index: 4;
}
.slot-reels-container::before {
    top: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
    border-radius: 10px 10px 0 0;
}
.slot-reels-container::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
    border-radius: 0 0 10px 10px;
}

/* Individual reel: idle subtle breathing glow */
.slot-reel {
    transition: box-shadow 0.3s ease;
}
.slot-theme-dark .slot-reel {
    box-shadow:
        inset 0 1px 4px rgba(0,0,0,0.6),
        inset 0 0 0 1px rgba(212,168,65,0.04);
}
.slot-theme-emerald .slot-reel {
    box-shadow:
        inset 0 1px 4px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(46,204,113,0.04);
}
.slot-theme-neon .slot-reel {
    box-shadow:
        inset 0 1px 4px rgba(0,0,0,0.6),
        inset 0 0 0 1px rgba(0,212,255,0.05);
}

/* Spinning reel — blur effect */
.slot-reel.spinning .slot-symbol-img,
.slot-reel.spinning .slot-symbol {
    filter: blur(1.5px);
}

/* Symbol idle float animation */
.slot-symbol-img {
    animation: symbolIdleFloat 4s ease-in-out infinite;
}
@keyframes symbolIdleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
}
.slot-reel.spinning .slot-symbol-img {
    animation: none;
}

/* Win highlight — stronger golden pulse with rings */
.slot-cell.slot-win-normal,
.slot-cell.slot-win-big,
.slot-cell.slot-win-jackpot {
    position: relative;
    z-index: 5;
}
.slot-cell.slot-win-normal::before,
.slot-cell.slot-win-big::before,
.slot-cell.slot-win-jackpot::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    border: 2px solid var(--accent);
    box-shadow:
        0 0 20px color-mix(in srgb, var(--accent) 60%, transparent),
        inset 0 0 15px color-mix(in srgb, var(--accent) 30%, transparent);
    animation: winRingPulse 0.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 6;
}
.slot-theme-emerald .slot-cell.slot-win-normal::before,
.slot-theme-emerald .slot-cell.slot-win-big::before,
.slot-theme-emerald .slot-cell.slot-win-jackpot::before {
    border-color: #2ecc71;
    box-shadow: 0 0 20px rgba(46,204,113,0.6), inset 0 0 15px rgba(46,204,113,0.3);
}
.slot-theme-neon .slot-cell.slot-win-normal::before,
.slot-theme-neon .slot-cell.slot-win-big::before,
.slot-theme-neon .slot-cell.slot-win-jackpot::before {
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0,212,255,0.6), inset 0 0 15px rgba(0,212,255,0.3);
}
@keyframes winRingPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Winning symbol bounces */
.slot-cell.slot-win-normal .slot-symbol-img,
.slot-cell.slot-win-big .slot-symbol-img,
.slot-cell.slot-win-jackpot .slot-symbol-img {
    animation: winSymbolBounce 0.6s ease-in-out infinite !important;
}
@keyframes winSymbolBounce {
    0%, 100% { transform: scale(1.1); }
    50% { transform: scale(1.25) rotate(-2deg); }
}

/* Shine sweep across reels on spin start */
.slot-reels-container.shine-sweep::before {
    animation: shineSweep 0.8s ease-out;
}
@keyframes shineSweep {
    0% { background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent); }
    50% {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15) 50%, transparent),
                    linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
    }
    100% { background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent); }
}

/* ── SPIN BUTTON — Premium 3D look ──────────────────────────── */
.adv-spin-btn {
    position: relative;
    padding: 16px !important;
    font-size: 17px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    background: radial-gradient(ellipse at top, #f9d66a, var(--accent) 40%, color-mix(in oklch, var(--accent) 65%, var(--bg))) !important;
    box-shadow:
        0 6px 0 #8a6b2a,
        0 8px 20px rgba(212,168,65,0.45),
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -4px 8px rgba(0,0,0,0.25) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.25);
    overflow: hidden;
}
.adv-spin-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-25deg);
    animation: spinBtnShine 3.5s ease-in-out infinite;
}
@keyframes spinBtnShine {
    0%, 90%, 100% { left: -75%; }
    95% { left: 125%; }
}
.adv-spin-btn:active {
    transform: translateY(4px) !important;
    box-shadow:
        0 2px 0 #8a6b2a,
        0 4px 10px color-mix(in srgb, var(--accent) 40%, transparent),
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -2px 6px rgba(0,0,0,0.25) !important;
}
.adv-spin-btn:disabled {
    animation: spinBtnThinking 1.2s ease-in-out infinite;
}
@keyframes spinBtnThinking {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(0.75); }
}
.adv-spin-btn.emerald {
    background: radial-gradient(ellipse at top, #5dff9e, #2ecc71 40%, #1a9c55) !important;
    box-shadow:
        0 6px 0 #0f5c33,
        0 8px 20px rgba(46,204,113,0.45),
        inset 0 1px 2px rgba(255,255,255,0.5),
        inset 0 -4px 8px rgba(0,0,0,0.25) !important;
}
.adv-spin-btn.neon {
    background: radial-gradient(ellipse at top, #7df0ff, #00d4ff 40%, #0088cc) !important;
    box-shadow:
        0 6px 0 #00556b,
        0 8px 20px rgba(0,212,255,0.45),
        inset 0 1px 2px rgba(255,255,255,0.5),
        inset 0 -4px 8px rgba(0,0,0,0.25) !important;
}

/* ── CHIPS — Poker chip look ────────────────────────────────── */
.adv-chip-bar .chip-btn {
    min-width: 44px;
    min-height: 30px;
    border-radius: 50px !important;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), rgba(0,0,0,0.4)) !important;
    border: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent) !important;
    transition: transform 0.15s ease, border-color 0.2s;
    font-size: 12px !important;
}
.adv-chip-bar .chip-btn:active {
    transform: scale(0.92);
}
.adv-chip-bar .chip-btn.chip-active {
    background: radial-gradient(circle at 30% 30%, #f9d66a, color-mix(in oklch, var(--accent) 65%, var(--bg))) !important;
    border-style: solid !important;
    color: #1a1108 !important;
    box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 -2px 4px rgba(0,0,0,0.2);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.adv-chip-bar .chip-btn.gold {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
    color: var(--accent-hi) !important;
}

/* Turbo/auto side buttons */
.adv-turbo-btn, .adv-auto-btn {
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}
.adv-turbo-btn.active {
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent);
    text-shadow: 0 0 8px var(--accent-hi);
}
.adv-auto-btn.active {
    background: radial-gradient(circle, rgba(46,204,113,0.3), rgba(46,204,113,0.1)) !important;
    box-shadow: 0 0 12px rgba(46,204,113,0.4), inset 0 0 8px rgba(46,204,113,0.2);
    color: #5dff9e !important;
}

/* Line buttons */
.line-btn {
    transition: all 0.15s ease;
}
.line-btn.line-active {
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Bet display — monospaced LED look */
.adv-bet-display {
    background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    display: inline-block;
    margin: 0 auto 8px;
    letter-spacing: 1.5px;
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent-hi) 40%, transparent);
}
.adv-bet-section {
    text-align: center;
}
.slot-theme-emerald ~ .adv-slot-controls .adv-bet-display,
#high-roller-screen .adv-bet-display {
    border-color: rgba(46,204,113,0.15);
    color: #5dff9e;
    text-shadow: 0 0 8px rgba(46,204,113,0.4);
}
#liquidation-screen .adv-bet-display {
    border-color: rgba(0,212,255,0.15);
    color: #7df0ff;
    text-shadow: 0 0 8px rgba(0,212,255,0.4);
}

/* Result message — gold glow */
.adv-slot-result {
    color: var(--accent-hi);
    text-shadow: 0 0 10px rgba(240,201,76,0.3);
    letter-spacing: 1px;
    min-height: 30px !important;
    padding: 8px 0 !important;
    font-weight: 800 !important;
}

/* ── IMPROVED PAYLINE INDICATOR ────────────────────────────── */
.slot-payline-indicator {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--accent) 10%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── IMPROVED BIG WIN OVERLAY ──────────────────────────────── */
.slot-bigwin-overlay {
    background: radial-gradient(ellipse at center, rgba(20,10,0,0.92), rgba(0,0,0,0.95)) !important;
}
.slot-bigwin-label {
    position: relative;
    padding: 4px 20px;
}
.slot-bigwin-label::before,
.slot-bigwin-label::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
}
.slot-bigwin-label::before { left: -24px; }
.slot-bigwin-label::after {
    right: -24px;
    background: linear-gradient(-90deg, transparent, var(--accent));
}
.slot-bigwin-amount {
    position: relative;
    padding: 4px 0;
}
.slot-bigwin-amount::after {
    content: '$FYM';
    display: block;
    font-size: 0.35em;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--accent);
    margin-top: 4px;
    opacity: 0.8;
}

/* Mega Win / Jackpot: add rotating glow */
.slot-bigwin-mega_win .slot-bigwin-amount,
.slot-bigwin-jackpot .slot-bigwin-amount {
    animation: bigWinScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), megaWinGlow 2s ease-in-out infinite;
}
@keyframes megaWinGlow {
    0%, 100% { text-shadow: 0 0 30px color-mix(in srgb, var(--accent-hi) 40%, transparent); }
    50% { text-shadow: 0 0 60px rgba(240,201,76,0.9), 0 0 100px color-mix(in srgb, var(--accent-hi) 50%, transparent); }
}

/* ══════════════════════════════════════════════════════════════
   CINEMATIC WIN SYSTEM v2 — Tiered visual spectacles
   ══════════════════════════════════════════════════════════════ */

/* ── Grid shimmer sweep on normal wins ─────────────────────── */
.slot-win-shimmer-sweep {
    position: absolute;
    inset: 0;
    z-index: 35;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255,215,0,0.25) 48%, rgba(255,255,255,0.3) 50%, rgba(255,215,0,0.25) 52%, transparent 70%);
    background-size: 250% 100%;
    animation: shimmerSweep 0.8s ease-out forwards;
    border-radius: 14px;
}
@keyframes shimmerSweep {
    0%   { background-position: 150% 0; opacity: 1; }
    100% { background-position: -50% 0; opacity: 0; }
}

/* ── Winning cell bounce ──────────────────────────────────── */
.slot-cell.win-bounce {
    animation: winCellBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
}
@keyframes winCellBounce {
    0%   { transform: scale(1) translateY(0); }
    40%  { transform: scale(1.15) translateY(-6px); }
    70%  { transform: scale(0.95) translateY(1px); }
    100% { transform: scale(1) translateY(0); }
}

/* ── Coin Rain Container ──────────────────────────────────── */
.coin-rain-container {
    position: absolute;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    overflow: hidden;
    border-radius: 14px;
}
.coin-rain-particle {
    position: absolute;
    width: var(--cs, 18px);
    height: var(--cs, 18px);
    top: -30px;
    left: var(--cx, 50%);
    background: radial-gradient(circle at 35% 35%, #ffe878, #d4a841 50%, #8b6914);
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 -2px 4px rgba(139,105,20,0.5);
    animation: coinFall var(--cd, 1.5s) var(--delay, 0s) ease-in forwards;
    opacity: 0;
}
.coin-rain-particle::after {
    content: '$';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--cs, 18px) * 0.5);
    font-weight: 900;
    color: rgba(139,105,20,0.6);
}
@keyframes coinFall {
    0%   { transform: translateY(0) rotate(0deg) scale(0.5); opacity: 0; }
    10%  { opacity: 1; transform: translateY(20px) rotate(var(--cr, 30deg)) scale(1); }
    80%  { opacity: 1; }
    100% { transform: translateY(calc(100vh + 50px)) rotate(calc(var(--cr, 30deg) * 5)) scale(0.8); opacity: 0; }
}

/* ── Light Beams (radial from center) ─────────────────────── */
.win-light-beams {
    position: absolute;
    inset: -30%;
    z-index: 48;
    pointer-events: none;
    opacity: 0;
    animation: beamsFadeIn 0.6s 0.2s ease-out forwards;
}
.win-light-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 200%;
    background: linear-gradient(180deg, transparent, rgba(255,215,0,0.3) 30%, rgba(255,215,0,0.6) 50%, rgba(255,215,0,0.3) 70%, transparent);
    transform-origin: top center;
    transform: rotate(var(--angle, 0deg));
    filter: blur(2px);
    animation: beamPulse 1.5s ease-in-out infinite alternate;
}
@keyframes beamsFadeIn {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes beamPulse {
    0%   { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ── Letter-by-letter reveal for BIG WIN text ─────────────── */
.bigwin-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) scale(0.3);
    animation: letterReveal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--ld, 0s);
}
@keyframes letterReveal {
    0%   { opacity: 0; transform: translateY(30px) scale(0.3) rotate(-10deg); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.15) rotate(2deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* ── Pulsating Glow Ring (behind amount) ──────────────────── */
.win-glow-ring {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    border-radius: 50%;
    z-index: 47;
    pointer-events: none;
    animation: glowRingPulse 1.2s ease-in-out infinite;
}
.win-glow-ring.big { background: radial-gradient(circle, rgba(255,215,0,0.25), transparent 70%); }
.win-glow-ring.mega { background: radial-gradient(circle, rgba(255,180,0,0.35), rgba(255,100,0,0.1) 50%, transparent 70%); width: 260px; height: 260px; margin: -130px 0 0 -130px; }
.win-glow-ring.jackpot { background: radial-gradient(circle, rgba(255,100,50,0.4), rgba(255,50,0,0.15) 50%, transparent 70%); width: 320px; height: 320px; margin: -160px 0 0 -160px; }
@keyframes glowRingPulse {
    0%, 100% { transform: scale(0.85); opacity: 0.6; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* ── Shockwave Rings (Mega/Jackpot) ──────────────────────── */
.win-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 2px solid rgba(255,215,0,0.7);
    border-radius: 50%;
    z-index: 52;
    pointer-events: none;
    animation: shockwaveExpand 1s ease-out forwards;
    animation-delay: var(--sd, 0s);
}
@keyframes shockwaveExpand {
    0%   { transform: scale(0); opacity: 1; border-width: 3px; }
    100% { transform: scale(10); opacity: 0; border-width: 0.5px; }
}

/* ── Confetti System ──────────────────────────────────────── */
.confetti-container {
    position: absolute;
    inset: 0;
    z-index: 56;
    pointer-events: none;
    overflow: hidden;
    border-radius: 14px;
}
.confetti-piece {
    position: absolute;
    width: var(--cw, 8px);
    height: var(--ch, 12px);
    background: var(--cc, #ffd700);
    top: -20px;
    left: var(--cx, 50%);
    border-radius: 2px;
    animation: confettiFall var(--cd, 2.5s) var(--delay, 0s) ease-in forwards;
    opacity: 0;
}
@keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg) scale(0); opacity: 0; }
    8%   { opacity: 1; transform: translateY(10px) rotate(var(--cr, 90deg)) scale(1); }
    100% { transform: translateY(calc(100vh + 30px)) rotate(calc(var(--cr, 90deg) * 6)) scale(0.5); opacity: 0.3; }
}

/* ── Coin Vortex (spinning orbit for Mega) ────────────────── */
.coin-vortex-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 53;
    pointer-events: none;
}
.coin-vortex-item {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 35% 35%, #ffe878, #d4a841);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 6px rgba(255,215,0,0.5);
    animation: coinOrbit var(--od, 2s) linear infinite;
    animation-delay: var(--odel, 0s);
}
@keyframes coinOrbit {
    0%   { transform: rotate(0deg) translateX(var(--or, 80px)) rotate(0deg) scale(0.8); }
    50%  { transform: rotate(180deg) translateX(var(--or, 80px)) rotate(-180deg) scale(1.2); }
    100% { transform: rotate(360deg) translateX(var(--or, 80px)) rotate(-360deg) scale(0.8); }
}

/* ── Shimmer text effect (rainbow shift for MEGA WIN) ─────── */
.bigwin-shimmer-text {
    background: linear-gradient(90deg, #ffd700, #fff, #ffd700, #ff8c00, #ffd700);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerTextMove 2s linear infinite;
}
@keyframes shimmerTextMove {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ── Jackpot Flame Text ──────────────────────────────────── */
.bigwin-flame-text {
    background: linear-gradient(180deg, #fff 0%, #ffd700 20%, #ff8c00 50%, #ff4500 80%, #cc0000 100%);
    background-size: 100% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flameTextShift 1.5s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 12px rgba(255,100,0,0.6));
}
@keyframes flameTextShift {
    0%   { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

/* ── Strobe Flash (Jackpot pre-reveal) ────────────────────── */
.jackpot-strobe {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    background: white;
    opacity: 0;
    animation: strobeFlash 0.4s steps(1) forwards;
    border-radius: 14px;
}
@keyframes strobeFlash {
    0%   { opacity: 0.9; }
    12%  { opacity: 0; }
    25%  { opacity: 0.85; }
    37%  { opacity: 0; }
    50%  { opacity: 0.7; }
    62%  { opacity: 0; }
    100% { opacity: 0; }
}

/* ── Gem Rain (Jackpot variant of coin rain) ──────────────── */
.gem-rain-particle {
    position: absolute;
    top: -30px;
    left: var(--cx, 50%);
    font-size: var(--gs, 16px);
    animation: gemFall var(--cd, 2s) var(--delay, 0s) ease-in forwards;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.5));
    pointer-events: none;
    z-index: 55;
}
@keyframes gemFall {
    0%   { transform: translateY(0) rotate(0deg) scale(0.3); opacity: 0; }
    10%  { opacity: 1; transform: translateY(15px) rotate(var(--cr, 40deg)) scale(1); }
    85%  { opacity: 0.8; }
    100% { transform: translateY(calc(100vh + 30px)) rotate(calc(var(--cr, 40deg) * 4)); opacity: 0; }
}

/* ── Ambient Background Shift (Mega/Jackpot) ──────────────── */
.slot-bigwin-overlay.slot-bigwin-mega_win {
    background: radial-gradient(ellipse at center, rgba(50,30,0,0.95), rgba(10,5,0,0.98)) !important;
    animation: megaBgPulse 2s ease-in-out infinite;
}
@keyframes megaBgPulse {
    0%, 100% { background: radial-gradient(ellipse at center, rgba(50,30,0,0.95), rgba(10,5,0,0.98)); }
    50%      { background: radial-gradient(ellipse at center, rgba(70,40,0,0.95), rgba(20,10,0,0.98)); }
}
.slot-bigwin-overlay.slot-bigwin-jackpot {
    background: radial-gradient(ellipse at center, rgba(60,10,0,0.96), rgba(10,0,0,0.99)) !important;
    animation: jackpotBgPulse 1.5s ease-in-out infinite;
}
@keyframes jackpotBgPulse {
    0%, 100% { background: radial-gradient(ellipse at center, rgba(60,10,0,0.96), rgba(10,0,0,0.99)); }
    50%      { background: radial-gradient(ellipse at center, rgba(90,20,0,0.96), rgba(30,5,0,0.99)); }
}

/* ── Cascade Multiplier Popup (center screen) ─────────────── */
.cascade-mult-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    z-index: 45;
    pointer-events: none;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 900;
    color: var(--accent-hi);
    text-shadow: 0 0 20px rgba(255,215,0,0.6), 0 4px 12px rgba(0,0,0,0.8);
    opacity: 0;
    animation: multPopup 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.cascade-mult-popup.warm { color: #ff8c00; text-shadow: 0 0 20px rgba(255,140,0,0.6), 0 4px 12px rgba(0,0,0,0.8); }
.cascade-mult-popup.hot { color: #ff4444; text-shadow: 0 0 20px rgba(255,68,68,0.6), 0 4px 12px rgba(0,0,0,0.8); font-size: 56px; }
@keyframes multPopup {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    50%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    70%  { transform: translate(-50%, -50%) scale(0.95); }
    85%  { transform: translate(-50%, -50%) scale(1.02); }
    100% { transform: translate(-50%, -55%) scale(1); opacity: 0; }
}

/* ── Cascade Screen Pulse ─────────────────────────────────── */
.cascade-screen-pulse {
    animation: cascadePulse 0.3s ease-out;
}
@keyframes cascadePulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.015); }
    100% { transform: scale(1); }
}

/* ── Win Symbol Trail (particles fly from removed cells to multiplier) ── */
.win-trail-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,215,0,0.8);
    z-index: 40;
    pointer-events: none;
    animation: trailFly var(--td, 0.6s) ease-in forwards;
}
@keyframes trailFly {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, -100px)) scale(0.3); }
}

/* ═══════════════════════════════════════════════════════════════
   WIN BANNER — compact overlay for normal wins
   Shows ribbon + rays + floating coins over the reels
   ═══════════════════════════════════════════════════════════════ */
.slot-win-banner {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: hidden;
    border-radius: 10px;
}
.slot-win-banner.visible {
    opacity: 1;
}
.slot-win-banner.exit {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Rotating burst rays behind the ribbon */
.slot-win-rays {
    position: absolute;
    width: 260px;
    height: 260px;
    background:
        conic-gradient(
            from 0deg,
            rgba(240,201,76,0.35) 0deg 10deg,
            transparent 10deg 30deg,
            rgba(240,201,76,0.35) 30deg 40deg,
            transparent 40deg 60deg,
            rgba(240,201,76,0.35) 60deg 70deg,
            transparent 70deg 90deg,
            rgba(240,201,76,0.35) 90deg 100deg,
            transparent 100deg 120deg,
            rgba(240,201,76,0.35) 120deg 130deg,
            transparent 130deg 150deg,
            rgba(240,201,76,0.35) 150deg 160deg,
            transparent 160deg 180deg,
            rgba(240,201,76,0.35) 180deg 190deg,
            transparent 190deg 210deg,
            rgba(240,201,76,0.35) 210deg 220deg,
            transparent 220deg 240deg,
            rgba(240,201,76,0.35) 240deg 250deg,
            transparent 250deg 270deg,
            rgba(240,201,76,0.35) 270deg 280deg,
            transparent 280deg 300deg,
            rgba(240,201,76,0.35) 300deg 310deg,
            transparent 310deg 330deg,
            rgba(240,201,76,0.35) 330deg 340deg,
            transparent 340deg 360deg
        );
    border-radius: 50%;
    filter: blur(0.5px);
    opacity: 0;
    animation: raysSpinIn 2.2s ease-out forwards;
    -webkit-mask: radial-gradient(circle, black 20%, transparent 65%);
            mask: radial-gradient(circle, black 20%, transparent 65%);
}
@keyframes raysSpinIn {
    0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    20% { opacity: 0.9; transform: scale(1) rotate(60deg); }
    80% { opacity: 0.9; transform: scale(1.05) rotate(280deg); }
    100% { opacity: 0; transform: scale(1.2) rotate(360deg); }
}

/* Theme rays */
.slot-win-banner.slot-theme-emerald .slot-win-rays {
    background: conic-gradient(from 0deg,
        rgba(46,204,113,0.4) 0deg 10deg, transparent 10deg 30deg,
        rgba(46,204,113,0.4) 30deg 40deg, transparent 40deg 60deg,
        rgba(46,204,113,0.4) 60deg 70deg, transparent 70deg 90deg,
        rgba(46,204,113,0.4) 90deg 100deg, transparent 100deg 120deg,
        rgba(46,204,113,0.4) 120deg 130deg, transparent 130deg 150deg,
        rgba(46,204,113,0.4) 150deg 160deg, transparent 160deg 180deg,
        rgba(46,204,113,0.4) 180deg 190deg, transparent 190deg 210deg,
        rgba(46,204,113,0.4) 210deg 220deg, transparent 220deg 240deg,
        rgba(46,204,113,0.4) 240deg 250deg, transparent 250deg 270deg,
        rgba(46,204,113,0.4) 270deg 280deg, transparent 280deg 300deg,
        rgba(46,204,113,0.4) 300deg 310deg, transparent 310deg 330deg,
        rgba(46,204,113,0.4) 330deg 340deg, transparent 340deg 360deg);
}
.slot-win-banner.slot-theme-neon .slot-win-rays {
    background: conic-gradient(from 0deg,
        rgba(0,212,255,0.4) 0deg 10deg, transparent 10deg 30deg,
        rgba(0,212,255,0.4) 30deg 40deg, transparent 40deg 60deg,
        rgba(0,212,255,0.4) 60deg 70deg, transparent 70deg 90deg,
        rgba(0,212,255,0.4) 90deg 100deg, transparent 100deg 120deg,
        rgba(0,212,255,0.4) 120deg 130deg, transparent 130deg 150deg,
        rgba(0,212,255,0.4) 150deg 160deg, transparent 160deg 180deg,
        rgba(0,212,255,0.4) 180deg 190deg, transparent 190deg 210deg,
        rgba(0,212,255,0.4) 210deg 220deg, transparent 220deg 240deg,
        rgba(0,212,255,0.4) 240deg 250deg, transparent 250deg 270deg,
        rgba(0,212,255,0.4) 270deg 280deg, transparent 280deg 300deg,
        rgba(0,212,255,0.4) 300deg 310deg, transparent 310deg 330deg,
        rgba(0,212,255,0.4) 330deg 340deg, transparent 340deg 360deg);
}

/* Central ribbon */
.slot-win-ribbon {
    position: relative;
    padding: 12px 36px;
    background: linear-gradient(180deg, #f9d66a 0%, var(--accent) 45%, color-mix(in oklch, var(--accent) 65%, var(--bg)) 100%);
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 10px;
    box-shadow:
        0 8px 30px rgba(0,0,0,0.7),
        0 2px 0 rgba(0,0,0,0.4),
        inset 0 2px 0 rgba(255,255,255,0.5),
        inset 0 -3px 6px rgba(0,0,0,0.2);
    text-align: center;
    transform: scale(0.5) rotate(-8deg);
    animation: ribbonPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}
@keyframes ribbonPop {
    0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
    60% { transform: scale(1.1) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Ribbon tails (left & right) */
.slot-win-ribbon::before,
.slot-win-ribbon::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 24px;
    height: 100%;
    background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 65%, var(--bg)), #8a6b2a);
    transform: translateY(-50%);
    z-index: -1;
}
.slot-win-ribbon::before {
    left: -18px;
    clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
}
.slot-win-ribbon::after {
    right: -18px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20% 50%);
}

.slot-win-ribbon-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 4px;
    color: #1a1108;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    text-transform: uppercase;
    line-height: 1;
}
.slot-win-ribbon-amount {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 900;
    color: #1a1108;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    margin-top: 3px;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* Theme-specific ribbons */
.slot-win-banner.slot-theme-emerald .slot-win-ribbon {
    background: linear-gradient(180deg, #7df0a5 0%, #2ecc71 45%, #1a9c55 100%);
}
.slot-win-banner.slot-theme-emerald .slot-win-ribbon::before,
.slot-win-banner.slot-theme-emerald .slot-win-ribbon::after {
    background: linear-gradient(180deg, #1a9c55, #0f5c33);
}
.slot-win-banner.slot-theme-neon .slot-win-ribbon {
    background: linear-gradient(180deg, #7df0ff 0%, #00d4ff 45%, #0088cc 100%);
}
.slot-win-banner.slot-theme-neon .slot-win-ribbon::before,
.slot-win-banner.slot-theme-neon .slot-win-ribbon::after {
    background: linear-gradient(180deg, #0088cc, #00556b);
}

/* Floating coins */
.slot-win-coins {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.slot-win-coin {
    position: absolute;
    bottom: -30px;
    left: var(--cx, 50%);
    font-size: 22px;
    opacity: 0;
    animation: coinFloat 2s ease-out forwards;
    animation-delay: var(--cd, 0s);
    transform: rotate(var(--cr, 0deg));
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--accent-hi) 50%, transparent));
}
@keyframes coinFloat {
    0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.5); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-180px) rotate(540deg) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   GAME HEADER with LOGO image (replaces text title)
   ═══════════════════════════════════════════════════════════════ */
.game-header.game-header-logo {
    position: relative;
    margin-bottom: -52px; /* pull the slot machine up so the logo overlaps it */
    min-height: 150px;
    z-index: 5;
    overflow: visible;
}
.game-header-logo-img {
    flex: 1;
    max-height: 170px;
    width: auto;
    max-width: calc(100% - 88px);
    object-fit: contain;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.8)) drop-shadow(0 0 28px color-mix(in srgb, var(--accent) 30%, transparent));
    pointer-events: none;
}
/* Make sure the back/info buttons stay tappable above the big logo */
.game-header.game-header-logo .back-link,
.game-header.game-header-logo .info-link {
    position: relative;
    z-index: 6;
}

/* ═══════════════════════════════════════════════════════════════
   SLOT LOADER — Premium loading screen with logo
   ═══════════════════════════════════════════════════════════════ */
.slot-loader {
    position: fixed;
    inset: 0;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #12121a 0%, #050508 70%, #000 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.slot-loader.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}
.slot-loader.hiding {
    opacity: 0;
}

.slot-loader::before,
.slot-loader::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.slot-loader::before {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%);
    animation: loaderPulse 3s ease-in-out infinite;
}
.slot-loader::after {
    width: 300px;
    height: 300px;
    background: conic-gradient(from 0deg,
        transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent,
        color-mix(in srgb, var(--accent) 10%, transparent), transparent);
    animation: loaderSpin 8s linear infinite;
    -webkit-mask: radial-gradient(circle, transparent 40%, black 50%);
            mask: radial-gradient(circle, transparent 40%, black 50%);
}
@keyframes loaderPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}
@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}

.slot-loader-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30px;
    max-width: 90%;
}

.slot-loader-logo {
    width: auto;
    max-width: min(78vw, 300px);
    max-height: 30vh;
    height: auto;
    object-fit: contain;
    margin-bottom: 22px;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.7)) drop-shadow(0 0 30px rgba(212,168,65,0.25));
    animation: loaderLogoIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slot-loader-jackpot {
    width: min(86vw, 320px);
    padding: 14px 16px 16px;
    margin-bottom: 22px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(212,168,65,0.12), rgba(212,168,65,0.03));
    border: 1px solid rgba(212,168,65,0.35);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 1px 0 rgba(255,255,255,0.05);
    text-align: center;
    animation: loaderLogoIn 0.9s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.slot-loader-jackpot-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--accent-hi);
    text-transform: uppercase;
    margin-bottom: 8px;
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent-hi) 50%, transparent);
}
.slot-loader-jackpot-syms {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: 8px;
}
.slot-loader-jackpot-syms img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(240,201,76,0.55));
}
.slot-loader-jackpot-syms img + img {
    margin-left: -4px;
}
.slot-loader-jackpot-desc {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.3px;
}
.slot-loader-jackpot-desc b {
    color: var(--accent-hi);
    font-weight: 800;
}
@keyframes loaderLogoIn {
    0% { opacity: 0; transform: scale(0.7) translateY(-20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.slot-loader-bar {
    width: 240px;
    max-width: 80vw;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    margin-bottom: 14px;
}
.slot-loader-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 65%, var(--bg)), var(--accent-hi), color-mix(in oklch, var(--accent) 65%, var(--bg)));
    background-size: 200% 100%;
    border-radius: 4px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-hi) 50%, transparent);
    animation: loaderBarFill 3.6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
               loaderBarShimmer 1.2s linear infinite;
}
@keyframes loaderBarFill {
    0% { width: 0%; }
    40% { width: 45%; }
    70% { width: 75%; }
    100% { width: 100%; }
}
@keyframes loaderBarShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.slot-loader-text {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    text-shadow: 0 0 15px color-mix(in srgb, var(--accent) 40%, transparent);
    animation: loaderTextPulse 1.8s ease-in-out infinite;
}
@keyframes loaderTextPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Tighter letter spacing for $FYM letters in info modal */
.info-jackpot-symbols {
    gap: 0 !important;
}
.info-jackpot-symbols .info-sym-img + .info-sym-img {
    margin-left: -6px;
}

/* ═══════════════════════════════════════════════════════════════
   INFO MODAL (Paytable / Rules) — Clean, organized overlay
   ═══════════════════════════════════════════════════════════════ */
.info-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
}
.info-modal-overlay.visible {
    opacity: 1;
}

.info-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    background: linear-gradient(180deg, #12121a 0%, #08080c 100%);
    border-radius: var(--r-3);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    box-shadow:
        var(--shadow-elevated),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.info-modal-overlay.visible .info-modal {
    transform: scale(1) translateY(0);
}

.info-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
}
.info-modal-close:hover,
.info-modal-close:active {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: var(--accent);
    color: var(--accent-hi);
}

/* Header */
.info-modal-header {
    padding: 22px 18px 14px;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}
.info-modal-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--accent-hi);
    text-shadow: 0 0 20px color-mix(in srgb, var(--accent-hi) 40%, transparent);
    margin-bottom: 4px;
}
.info-modal-subtitle {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--faint);
    text-transform: uppercase;
}

/* Body - scrollable */
.info-modal-body {
    padding: 14px 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Section titles */
.info-section-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 18px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    text-align: center;
}
.info-section-title:first-child { margin-top: 0; }

/* $FYM Brand Jackpot box */
.info-jackpot-box {
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(30,20,5,0.6), rgba(10,6,2,0.8));
    border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 0 20px color-mix(in srgb, var(--accent) 5%, transparent);
}
.info-jackpot-box::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--accent-hi) 10%, transparent), transparent);
    animation: jackpotShimmer 4s linear infinite;
    pointer-events: none;
}
@keyframes jackpotShimmer {
    to { transform: rotate(360deg); }
}
.info-jackpot-label {
    position: relative;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--accent);
    font-weight: 800;
    margin-bottom: 8px;
}
.info-jackpot-symbols {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}
.info-jackpot-symbols .info-sym-img {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--accent-hi) 50%, transparent));
    animation: symbolIdleFloat 3s ease-in-out infinite;
}
.info-jackpot-symbols .info-sym-img:nth-child(2) { animation-delay: 0.2s; }
.info-jackpot-symbols .info-sym-img:nth-child(3) { animation-delay: 0.4s; }
.info-jackpot-symbols .info-sym-img:nth-child(4) { animation-delay: 0.6s; }
.info-jackpot-title {
    position: relative;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--accent-hi);
    text-shadow: 0 0 15px color-mix(in srgb, var(--accent-hi) 60%, transparent);
    margin-bottom: 4px;
}
.info-jackpot-desc {
    position: relative;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
}
.info-jackpot-desc b {
    color: var(--accent-hi);
    font-weight: 800;
}

/* Special symbols grid */
.info-specials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.info-special {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
}
.info-special-sym {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.info-special-sym .info-sym-img {
    width: 38px;
    height: 38px;
}
.info-special-info {
    flex: 1;
    min-width: 0;
}
.info-special-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-hi);
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.info-special-desc {
    font-size: 10px;
    color: var(--faint);
    line-height: 1.4;
}

/* Paytable rows */
.info-pay-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.info-pay-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.info-pay-sym {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-pay-sym .info-sym-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.info-sym-emoji {
    font-size: 24px;
}
.info-pay-label {
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.info-pay-mults {
    display: flex;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent);
    flex-shrink: 0;
}
.info-pay-mults span {
    min-width: 34px;
    text-align: right;
}
.info-pay-mults b {
    color: var(--faint);
    font-weight: 700;
    margin-right: 1px;
}

/* Rules list */
.info-rules {
    padding: 4px 4px;
}
.info-rule {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.7;
    padding: 2px 0;
}
.info-rule b {
    color: var(--accent-hi);
    font-weight: 800;
}

/* ── Spin History button & modal ─────────────────────────────── */
.adv-history-btn {
    background: linear-gradient(180deg, #2a2418, #1a1510);
    border: 1px solid rgba(212,168,65,0.35);
    color: var(--accent-hi);
    border-radius: 10px;
    padding: 0 10px;
    min-width: 46px;
    height: 42px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.5);
    transition: transform 0.15s, box-shadow 0.15s;
}
.adv-history-btn:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(212,168,65,0.25);
}
.adv-history-btn:active { transform: translateY(0); }

.history-body {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.history-loading,
.history-empty {
    padding: 30px 10px;
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
}
.history-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.9fr 1.1fr 0.7fr;
    align-items: center;
    gap: 8px;
    padding: 10px 6px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: background 0.15s;
}
.history-row:hover {
    background: rgba(212,168,65,0.06);
}
.history-row.history-head {
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-hi);
    cursor: default;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 10px 6px 8px;
}
.history-row.history-head:hover { background: transparent; }
.history-col-date { font-variant-numeric: tabular-nums; opacity: 0.8; }
.history-col-game { font-weight: 700; }
.history-col-bet { text-align: right; font-variant-numeric: tabular-nums; }
.history-net {
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.55);
}
.history-net.win { color: #7ef0a8; text-shadow: 0 0 8px rgba(126,240,168,0.25); }
.history-net.lose { color: #ff8b8b; }
.history-col-id {
    text-align: right;
    font-family: monospace;
    font-size: 10px;
    opacity: 0.55;
}

/* Hide any legacy inline game-id text below the slot */
.game-id-text { display: none !important; }


/* ──────────────────────────────────────────────────────────────
   Slot controls — minimal polish
   ────────────────────────────────────────────────────────────── */

/* Bet display: slightly larger, centered, soft gold */
.adv-bet-display {
    font-size: 14px !important;
    padding: 7px 18px !important;
    letter-spacing: 1.5px !important;
    font-variant-numeric: tabular-nums;
}

/* Chip bar — keep current shape, just tighten & add pressed feel */
.adv-chip-bar { gap: 6px !important; }
.adv-chip-bar .chip-btn {
    min-width: 46px;
    transition: transform 0.1s ease, border-color 0.15s, box-shadow 0.2s;
}
.adv-chip-bar .chip-btn:active { transform: scale(0.94); }

/* Lines — subtle grouping, nothing heavy */
.adv-lines-bar { gap: 8px !important; }

/* Side buttons — slightly taller, match chip height, no shadows stacked */
.adv-side-btns { gap: 6px !important; }
.adv-turbo-btn,
.adv-auto-btn,
.adv-history-btn {
    height: 36px !important;
    min-width: 50px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
}

/* Spin button — a touch more presence, no extra stacked shadows */
.adv-spin-btn {
    min-height: 56px;
    border-radius: 12px !important;
}


/* ──────────────────────────────────────────────────────────────
   Win result — centered pill instead of left-aligned text
   ────────────────────────────────────────────────────────────── */
.bv-result,
.adv-slot-result {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 10px auto 2px;
    min-height: 0;
    padding: 0 !important;
}
.bv-result:empty,
.adv-slot-result:empty { display: none; }

.bv-result.win,
.bv-result.big-win,
.bv-result.jackpot {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 9px 20px !important;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(240,201,76,0.16), rgba(240,201,76,0.04));
    border: 1px solid rgba(240,201,76,0.55);
    box-shadow:
        0 0 18px rgba(240,201,76,0.25),
        0 4px 14px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
    animation: bvResultPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: 10px auto 2px;
    max-width: 92%;
}
.bv-result.big-win {
    border-color: #ffd76a;
    box-shadow:
        0 0 24px rgba(255,215,106,0.4),
        0 6px 18px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.12);
}
.bv-result.jackpot {
    flex-direction: column;
    gap: 2px;
    padding: 12px 26px !important;
    border-radius: 16px;
    border-color: #ffe58a;
    background: linear-gradient(180deg, rgba(255,215,0,0.2), rgba(255,215,0,0.04));
    box-shadow:
        0 0 34px rgba(255,215,0,0.55),
        0 8px 22px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.15);
    animation: bvResultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
               bvJackpotPulse 1.4s ease-in-out infinite 0.5s;
}

.bv-win-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent-hi);
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent-hi) 50%, transparent);
    opacity: 0.9;
}
.bv-result.big-win .bv-win-label { font-size: 12px; letter-spacing: 3px; }

.bv-jackpot-text {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 4px;
    color: #fff3b0;
    text-shadow: 0 0 14px rgba(255,215,0,0.9);
}

.bv-win-amount {
    font-family: var(--font-mono, monospace);
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px rgba(240,201,76,0.7);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
.bv-result.big-win .bv-win-amount { font-size: 19px; }
.bv-result.jackpot .bv-win-amount { font-size: 22px; color: #fff8d5; text-shadow: 0 0 14px rgba(255,215,0,1); }

@keyframes bvResultPop {
    0%   { opacity: 0; transform: translateY(8px) scale(0.9); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bvJackpotPulse {
    0%, 100% { box-shadow: 0 0 34px rgba(255,215,0,0.55), 0 8px 22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15); }
    50%      { box-shadow: 0 0 48px rgba(255,215,0,0.85), 0 8px 22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2); }
}

/* Theme tints — just swap border/glow hue */
#high-roller-screen .bv-result.win,
#high-roller-screen .bv-result.big-win,
#high-roller-screen .adv-slot-result.win {
    border-color: rgba(93,255,158,0.6);
    background: linear-gradient(180deg, rgba(46,204,113,0.15), rgba(46,204,113,0.04));
    box-shadow: 0 0 20px rgba(46,204,113,0.3), 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
#high-roller-screen .bv-win-label { color: #7ef0a8; text-shadow: 0 0 10px rgba(126,240,168,0.5); }

#liquidation-screen .bv-result.win,
#liquidation-screen .bv-result.big-win,
#liquidation-screen .adv-slot-result.win {
    border-color: rgba(125,240,255,0.6);
    background: linear-gradient(180deg, rgba(0,212,255,0.14), rgba(0,212,255,0.04));
    box-shadow: 0 0 20px rgba(0,212,255,0.3), 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
#liquidation-screen .bv-win-label { color: #7df0ff; text-shadow: 0 0 10px rgba(125,240,255,0.5); }


/* ══════════════════════════════════════════════════════════════
   Black Vault — Centered Spin Wheel Layout
   ══════════════════════════════════════════════════════════════ */

.bv-controls {
    padding-top: 0 !important;
    padding-bottom: 18px !important;
}

/* ─────────────────────────────────────────────────────────────────
   Black Vault — Control layout (v3, matches reference screenshot)
   Row 1: [vertical lines pills] [spin wheel] [vertical icon stack]
   Row 2: [▲] [red bet pill] [▼]
   Row 3: "BET" label
   ───────────────────────────────────────────────────────────────── */
.bv-control-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 0;
    position: relative;
}
.bv-control-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────
   Black Vault — Professional casino controls
   Dark vault bezel framing a polished gold medallion. Multi-stop
   metallic gradient (light-top → mid → dark-bottom), engraved text,
   dark outer rim, bright inner rim — matches the logo + spin wheel.
   ───────────────────────────────────────────────────────────────── */
.bv-lines-stack, .bv-icon-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-self: center;
}

/* Shared medallion base */
.bv-line-pill, .bv-icon-btn, .bv-step-btn {
    position: relative;
    width: 62px;
    height: 52px;
    border-radius: 16px;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Deep vault bezel: very dark outer, lighter inner lip */
    background:
        /* top gloss sheen */
        linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%),
        /* polished gold face */
        linear-gradient(180deg,
            #f7dc82 0%,
            #d9a63a 18%,
            #8a5e14 50%,
            #4e3608 78%,
            #271a04 100%);
    color: #1a0f02;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.5px;
    /* Engraved text: bright top highlight + dark carved shadow */
    text-shadow:
        0 1px 0 rgba(255,240,180,0.55),
        0 -1px 0 rgba(0,0,0,0.6);
    /* Multi-layer: outer dark rim, bright inner rim, drop shadow, inner carved shadow */
    box-shadow:
        0 0 0 1.5px #050200,                          /* outer black rim */
        0 0 0 2.5px #8c6a22,                          /* dark gold frame */
        0 0 0 3.5px #050200,                          /* inner black line */
        0 0 0 4.5px rgba(255,220,120,0.4),            /* bright gold inner rim */
        0 6px 0 #030100,                              /* base shadow (press depth) */
        0 10px 22px rgba(0,0,0,0.75),                 /* ambient drop */
        inset 0 2px 1px rgba(255,255,220,0.55),       /* top inner highlight */
        inset 0 -3px 4px rgba(0,0,0,0.55),            /* bottom inner shadow */
        inset 0 0 12px rgba(120,70,0,0.35);           /* subtle inner vignette */
    transition: transform 0.1s ease, filter 0.2s, box-shadow 0.2s;
    overflow: visible;
    isolation: isolate;
}
/* Inner top half-ellipse of mirror-sheen */
.bv-line-pill::before, .bv-icon-btn::before, .bv-step-btn::before {
    content: '';
    position: absolute;
    top: 3px; left: 5px; right: 5px;
    height: 45%;
    border-radius: 12px 12px 50% 50% / 12px 12px 100% 100%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.45) 0%,
        rgba(255,255,255,0.12) 55%,
        rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 1;
}
/* Hairline gold outline above the sheen so it reads as glass-under-gold */
.bv-line-pill::after, .bv-icon-btn::after, .bv-step-btn::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 13px;
    border: 1px solid rgba(255,240,180,0.22);
    pointer-events: none;
    z-index: 2;
}

.bv-line-pill > *, .bv-icon-btn > *, .bv-step-btn > * {
    position: relative;
    z-index: 3;
}
.bv-icon-btn svg {
    position: relative;
    z-index: 3;
    color: #1a0f02;
    filter:
        drop-shadow(0 1px 0 rgba(255,240,180,0.6))
        drop-shadow(0 -1px 0 rgba(0,0,0,0.5));
}
.bv-icon-btn svg path { stroke: currentColor; }
.bv-icon-btn svg path[fill="currentColor"] { fill: currentColor; }

.bv-line-pill:hover, .bv-icon-btn:hover, .bv-step-btn:hover {
    filter: brightness(1.08) saturate(1.1);
}
.bv-line-pill:active, .bv-icon-btn:active, .bv-step-btn:active {
    transform: translateY(5px);
    box-shadow:
        0 0 0 1.5px #050200,
        0 0 0 2.5px #8c6a22,
        0 0 0 3.5px #050200,
        0 0 0 4.5px rgba(255,220,120,0.4),
        0 1px 0 #030100,
        0 3px 8px rgba(0,0,0,0.6),
        inset 0 2px 1px rgba(255,255,220,0.5),
        inset 0 -2px 3px rgba(0,0,0,0.5),
        inset 0 0 12px rgba(120,70,0,0.35);
}

/* Active (selected) state — glowing red vault light */
.bv-line-pill.active, .bv-icon-btn.active {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%),
        linear-gradient(180deg,
            #ffd23a 0%,
            #e89f10 18%,
            #a06408 50%,
            #5a3404 78%,
            #2a1802 100%);
    box-shadow:
        0 0 0 1.5px #050200,
        0 0 0 2.5px #d19c20,
        0 0 0 3.5px #050200,
        0 0 0 4.5px #ffe58a,
        0 0 24px rgba(255,210,80,0.85),
        0 6px 0 #030100,
        0 10px 22px rgba(0,0,0,0.75),
        inset 0 2px 1px rgba(255,255,220,0.7),
        inset 0 -3px 4px rgba(0,0,0,0.5),
        inset 0 0 16px rgba(255,180,40,0.4);
    text-shadow:
        0 1px 0 rgba(255,255,200,0.7),
        0 -1px 0 rgba(0,0,0,0.6);
}
.bv-icon-btn.active svg {
    filter:
        drop-shadow(0 1px 0 rgba(255,255,200,0.75))
        drop-shadow(0 -1px 0 rgba(0,0,0,0.55));
}

/* ── Bet row (▲ pill ▼) + BET label ────────────────────────────── */
.bv-bet-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
}
.bv-step-btn {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 18px;
    color: #1a0f02;
    line-height: 1;
}

/* Bet display — carved dark vault window framed in gold */
.bv-bet-pill {
    position: relative;
    min-width: 200px;
    max-width: 240px;
    height: 58px;
    padding: 0 26px;
    border-radius: 14px;
    /* Deep black carved vault glass */
    background:
        /* faint gold reflection from above */
        radial-gradient(ellipse at 50% -10%, rgba(255,220,120,0.22) 0%, transparent 55%),
        /* deep carved interior */
        linear-gradient(180deg, #000 0%, #0a0702 45%, #0e0a03 100%);
    color: #ffd866;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* LED-style glowing gold digits */
    text-shadow:
        0 0 4px rgba(255,210,90,0.9),
        0 0 10px rgba(255,180,40,0.65),
        0 0 20px rgba(255,160,20,0.35),
        0 1px 0 rgba(0,0,0,0.9);
    /* Gold bezel frame: outer dark → gold rim → inner dark line → inner gold glow */
    box-shadow:
        0 0 0 1.5px #050200,
        0 0 0 3px #8c6a22,
        0 0 0 4.5px #050200,
        0 0 0 5.5px rgba(255,220,120,0.35),
        0 6px 0 #030100,
        0 10px 22px rgba(0,0,0,0.75),
        inset 0 2px 3px rgba(0,0,0,0.85),
        inset 0 -1px 0 rgba(255,220,120,0.1),
        inset 0 0 30px rgba(0,0,0,0.7);
    overflow: visible;
    white-space: nowrap;
    line-height: 1;
}
/* Subtle scanline / reflection across the glass */
.bv-bet-pill::before {
    content: '';
    position: absolute;
    top: 3px; left: 10px; right: 10px;
    height: 38%;
    border-radius: 10px 10px 40% 40% / 10px 10px 100% 100%;
    background: linear-gradient(180deg, rgba(255,220,120,0.1), rgba(255,220,120,0));
    pointer-events: none;
}
/* Auto-shrink helpers — applied by JS based on character length */
.bv-bet-pill.fs-md { font-size: 24px; letter-spacing: 1.5px; }
.bv-bet-pill.fs-sm { font-size: 20px; letter-spacing: 1px; }
.bv-bet-pill.fs-xs { font-size: 16px; letter-spacing: 0; }

.bv-bet-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 5px;
    color: rgba(240,201,76,0.8);
    text-shadow:
        0 0 10px rgba(255,220,120,0.55),
        0 1px 0 rgba(0,0,0,0.8);
    margin-top: 6px;
    text-transform: uppercase;
}

/* ── Spin wheel + button ──────────────────────────────────────── */
.bv-spin-wrap {
    position: relative;
    width: 210px;
    height: 210px;
    margin-top: -40px; /* slight overlap — wheel sits mostly below grid */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.7));
    justify-self: center;
}
.bv-spin-wheel {
    position: absolute;
    inset: 0;
    background-image: url('/static/images/slots/black-vault/spin/wheel.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    transform-origin: center;
    transition: transform 0.3s ease;
}
.bv-spin-wrap:not(.spinning) .bv-spin-wheel {
    animation: bvWheelIdle 6s ease-in-out infinite;
}
@keyframes bvWheelIdle {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
}
.bv-spin-wrap.spinning .bv-spin-wheel {
    animation: bvWheelSpin 0.85s linear infinite;
}
@keyframes bvWheelSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.bv-spin-btn {
    position: relative;
    width: 132px !important;
    height: 132px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer;
    background: url('/static/images/slots/black-vault/spin/button.png') center/contain no-repeat !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease, filter 0.2s ease;
    z-index: 2;
    letter-spacing: 0 !important;
    flex: 0 0 auto;
    font-size: 0 !important;
}
.bv-spin-btn-label, .bv-spin-btn::before { display: none !important; content: none !important; }
.bv-spin-btn:hover { filter: brightness(1.08) drop-shadow(0 0 14px color-mix(in srgb, var(--accent-hi) 50%, transparent)); }
.bv-spin-btn:active { transform: scale(0.94) !important; }
.bv-spin-btn:disabled { cursor: wait; filter: brightness(0.9); animation: none !important; }

/* Narrow screens */
@media (max-width: 420px) {
    .bv-spin-wrap { width: 180px; height: 180px; margin-top: -30px; }
    .bv-spin-btn { width: 110px !important; height: 110px !important; }
    .bv-line-pill, .bv-icon-btn { width: 56px; height: 46px; font-size: 19px; }
    .bv-step-btn { width: 44px; height: 44px; font-size: 16px; }
    .bv-bet-pill { min-width: 170px; max-width: 210px; height: 52px; font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   Black Vault — Animated Background FX
   ══════════════════════════════════════════════════════════════ */
#black-vault-screen { position: relative; }

.bv-bg-fx {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
#black-vault-screen > *:not(.bv-bg-fx):not(.slot-loader) { position: relative; z-index: 1; }
#black-vault-screen > .slot-loader { z-index: 99999 !important; }

.bv-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    mix-blend-mode: screen;
}
.bv-bg-orb-1 {
    width: 60vw; height: 60vw;
    max-width: 520px; max-height: 520px;
    background: radial-gradient(circle, rgba(240,201,76,0.85), rgba(240,201,76,0) 70%);
    top: -15vh; left: -15vw;
    animation: bvOrbFloat1 14s ease-in-out infinite;
}
.bv-bg-orb-2 {
    width: 55vw; height: 55vw;
    max-width: 480px; max-height: 480px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent), rgba(212,168,65,0) 70%);
    bottom: -10vh; right: -12vw;
    animation: bvOrbFloat2 18s ease-in-out infinite;
}
.bv-bg-orb-3 {
    width: 45vw; height: 45vw;
    max-width: 360px; max-height: 360px;
    background: radial-gradient(circle, rgba(255,215,0,0.45), rgba(255,215,0,0) 70%);
    top: 30%; left: 25%;
    animation: bvOrbFloat3 22s ease-in-out infinite;
}
@keyframes bvOrbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 60px) scale(1.15); }
}
@keyframes bvOrbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50%      { transform: translate(-50px, -40px) scale(1.1); opacity: 0.5; }
}
@keyframes bvOrbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.25; }
    50%      { transform: translate(30px, -50px) scale(1.2); opacity: 0.45; }
}

.bv-bg-sparkles {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 10% 15%, rgba(255,215,0,0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 82% 22%, rgba(255,255,255,0.75), transparent 60%),
        radial-gradient(2px 2px at 22% 55%, rgba(240,201,76,0.7), transparent 60%),
        radial-gradient(1.5px 1.5px at 65% 75%, rgba(255,215,0,0.85), transparent 60%),
        radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,0.55), transparent 60%),
        radial-gradient(1.5px 1.5px at 45% 35%, rgba(240,201,76,0.7), transparent 60%),
        radial-gradient(2px 2px at 75% 10%, rgba(255,255,255,0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 5% 80%, rgba(255,215,0,0.8), transparent 60%);
    background-repeat: no-repeat;
    opacity: 0.7;
    animation: bvSparklesTwinkle 5s ease-in-out infinite;
}
@keyframes bvSparklesTwinkle {
    0%, 100% { opacity: 0.35; transform: translateY(0); }
    50%      { opacity: 0.85; transform: translateY(-6px); }
}


/* ══════════════════════════════════════════════════════════════
   Special-reel effects — next reel spins faster with gold wash,
   landed special symbol glows.
   ══════════════════════════════════════════════════════════════ */
/* ── Anticipation Reel (spinning with tension) ──────────── */
.slot-reel.reel-anticipation {
    position: relative;
}
.slot-reel.reel-anticipation::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,215,0,0.4), rgba(255,215,0,0.05) 40%, rgba(255,215,0,0.05) 60%, rgba(255,215,0,0.4)),
        repeating-linear-gradient(180deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 6px);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    animation: anticipationRush 0.2s linear infinite;
    border-radius: 6px;
    box-shadow: 0 0 30px rgba(255,215,0,0.8), inset 0 0 20px rgba(255,215,0,0.5);
}
/* Higher tension = faster rush + more intense glow */
.slot-reel.reel-anticipation[data-tension="2"]::before {
    box-shadow: 0 0 40px rgba(255,215,0,1), inset 0 0 25px rgba(255,215,0,0.7);
    animation-duration: 0.15s;
    background:
        linear-gradient(180deg, rgba(255,215,0,0.5), rgba(255,100,0,0.08) 40%, rgba(255,100,0,0.08) 60%, rgba(255,215,0,0.5)),
        repeating-linear-gradient(180deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 6px);
}
.slot-reel.reel-anticipation[data-tension="3"]::before {
    box-shadow: 0 0 50px rgba(255,50,50,0.8), 0 0 80px rgba(255,215,0,0.5), inset 0 0 30px rgba(255,215,0,0.8);
    animation-duration: 0.1s;
    background:
        linear-gradient(180deg, rgba(255,100,0,0.6), rgba(255,50,50,0.1) 40%, rgba(255,50,50,0.1) 60%, rgba(255,100,0,0.6)),
        repeating-linear-gradient(180deg, rgba(255,255,255,0.1) 0 2px, transparent 2px 5px);
}
@keyframes anticipationRush {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, 0 12px; }
}

/* Subtle vibration on anticipation-active — not a full shake */
.slot-reels-container.anticipation-active {
    animation: anticipationVibrate 0.12s linear infinite;
}
@keyframes anticipationVibrate {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-0.5px, 0.3px); }
    50%      { transform: translate(0.5px, -0.3px); }
    75%      { transform: translate(-0.3px, -0.5px); }
}

/* ── Reel Landed on Special ─────────────────────────────── */
.slot-reel.reel-has-special {
    animation: reelSpecialPulse 1.2s ease-in-out infinite;
}
@keyframes reelSpecialPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
    50%      { box-shadow: 0 0 30px rgba(255,215,0,0.6), inset 0 0 20px rgba(255,215,0,0.25); }
}

/* ── Special Symbol Glow ────────────────────────────────── */
.slot-cell.special-glow,
.special-glow {
    position: relative;
    z-index: 2;
    animation: specialGlow 0.8s ease-in-out infinite;
    border-radius: 10px;
}
@keyframes specialGlow {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(255,215,0,0.7),
            inset 0 0 12px rgba(255,215,0,0.35);
        filter: brightness(1.15);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 30px rgba(255,215,0,1),
            0 0 60px rgba(255,215,0,0.5),
            inset 0 0 20px rgba(255,215,0,0.6);
        filter: brightness(1.4);
        transform: scale(1.04);
    }
}

/* Extra intensity when anticipation is active (waiting for more scatters) */
.anticipation-active .slot-cell.special-glow {
    animation: specialGlowIntense 0.5s ease-in-out infinite;
}
@keyframes specialGlowIntense {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255,215,0,0.8),
            0 0 40px rgba(255,215,0,0.3),
            inset 0 0 14px rgba(255,215,0,0.4);
        filter: brightness(1.2);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 40px rgba(255,215,0,1),
            0 0 80px rgba(255,215,0,0.6),
            0 0 120px rgba(255,100,0,0.2),
            inset 0 0 25px rgba(255,215,0,0.7);
        filter: brightness(1.5);
        transform: scale(1.08);
    }
}

/* ══════════════════════════════════════════════════════════════
   ANTICIPATION V2 — Cinematic Scatter Effects
   ══════════════════════════════════════════════════════════════ */

/* ── Background Dim Overlay — subtle mood shift, NOT a blackout ── */
.slot-anticipation-dim {
    position: absolute;
    inset: -10px;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent 30%,
        rgba(0, 0, 0, 0.35) 100%
    );
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 14px;
}
.slot-anticipation-dim.active {
    opacity: 1;
}

/* Anticipation reel gets slight lift above the dim vignette */
.slot-reel.reel-anticipation {
    z-index: 10;
    filter: brightness(1.05);
}
/* Reel with special also rises above dim */
.slot-reel.reel-has-special {
    z-index: 8;
}

/* ── Scatter/Wild Bounce Landing ────────────────────────── */
.slot-cell.scatter-bounce {
    animation: scatterBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 15;
}
@keyframes scatterBounce {
    0%   { transform: scale(0.4) rotate(-10deg); opacity: 0.4; }
    35%  { transform: scale(1.35) rotate(3deg); opacity: 1; }
    55%  { transform: scale(0.9) rotate(-1deg); }
    70%  { transform: scale(1.12) rotate(0.5deg); }
    85%  { transform: scale(0.97); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ── Particle Burst Container ───────────────────────────── */
.scatter-particle-burst {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 20;
    pointer-events: none;
}
.scatter-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: scatterParticleExplode var(--pd, 0.8s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}
.scatter-particle.gold {
    background: radial-gradient(circle, #ffd700, #ffaa00);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
}
.scatter-particle.white {
    background: radial-gradient(circle, #fff, #ffeedd);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    width: 5px;
    height: 5px;
}
.scatter-particle.fire {
    background: radial-gradient(circle, #ff6600, #ff2200);
    box-shadow: 0 0 6px rgba(255, 100, 0, 0.8);
    width: 6px;
    height: 6px;
}
.scatter-particle.spark {
    background: #fff;
    width: 3px;
    height: 3px;
    box-shadow: 0 0 10px #ffd700, 0 0 20px rgba(255, 215, 0, 0.5);
}
@keyframes scatterParticleExplode {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    15% {
        opacity: 1;
        transform: translate(calc(var(--px) * 0.3), calc(var(--py) * 0.3)) scale(1.2);
    }
    100% {
        transform: translate(var(--px), var(--py)) scale(0);
        opacity: 0;
    }
}

/* Shimmer trail particles during anticipation spin */
.reel-shimmer-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    pointer-events: none;
    z-index: 4;
    animation: shimmerFloat var(--sd, 1s) ease-out forwards;
    opacity: 0;
}
@keyframes shimmerFloat {
    0%   { opacity: 0; transform: translateY(0) scale(0.5); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(var(--sy, -40px)) translateX(var(--sx, 10px)) scale(0); }
}

/* ── Frame Glow Escalation (per cumulative scatter count) ── */
.slot-reel.scatter-frame-1 {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), inset 0 0 8px rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
}
.slot-reel.scatter-frame-2 {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7), 0 0 50px rgba(255, 150, 0, 0.3), inset 0 0 12px rgba(255, 215, 0, 0.25);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    animation: frameGlow2 0.6s ease-in-out infinite;
}
@keyframes frameGlow2 {
    0%, 100% { box-shadow: 0 0 25px rgba(255,215,0,0.7), 0 0 50px rgba(255,150,0,0.3); }
    50%      { box-shadow: 0 0 35px rgba(255,215,0,1), 0 0 70px rgba(255,150,0,0.5); }
}
.slot-reel.scatter-frame-3 {
    box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 100, 0, 0.5), 0 0 120px rgba(255, 50, 0, 0.2);
    border: 2px solid rgba(255, 215, 0, 0.8);
    border-radius: 8px;
    animation: frameGlow3 0.4s ease-in-out infinite;
}
@keyframes frameGlow3 {
    0%, 100% { box-shadow: 0 0 40px rgba(255,215,0,1), 0 0 80px rgba(255,100,0,0.5); }
    50%      { box-shadow: 0 0 60px rgba(255,215,0,1), 0 0 100px rgba(255,100,0,0.7), 0 0 140px rgba(255,50,0,0.3); }
}

/* ── Big Trigger Sequence (3+ scatters) ────────────────── */
.slot-trigger-flash {
    position: absolute;
    inset: -40px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9), rgba(255, 215, 0, 0.5) 40%, transparent 70%);
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    animation: triggerFlash 0.6s ease-out forwards;
    border-radius: 14px;
}
@keyframes triggerFlash {
    0%   { opacity: 0; transform: scale(0.8); }
    15%  { opacity: 1; transform: scale(1.05); }
    40%  { opacity: 0.7; }
    100% { opacity: 0; transform: scale(1.2); }
}

/* Scatter connection lines (SVG overlay) */
.scatter-connection-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 18;
    pointer-events: none;
    overflow: visible;
}
.scatter-connection-line {
    stroke: rgba(255, 215, 0, 0.8);
    stroke-width: 2;
    fill: none;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawConnectionLine 0.5s ease-out forwards;
}
@keyframes drawConnectionLine {
    to { stroke-dashoffset: 0; }
}

/* Trigger zoom pulse on the whole machine */
.slot-trigger-zoom {
    animation: triggerZoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes triggerZoom {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.03); }
    60%  { transform: scale(0.99); }
    100% { transform: scale(1); }
}

/* ── Near-Miss Tease ──────────────────────────────────── */
.slot-reel.near-miss-tease {
    animation: nearMissTease 0.15s ease-in-out;
}
@keyframes nearMissTease {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-3px); }
    70%      { transform: translateY(1px); }
}

/* ── Anticipation Reel Streak Effect (subtle) ────────── */
.slot-reel.reel-anticipation .slot-reel-strip {
    filter: brightness(1.08);
}
.slot-reel.reel-anticipation[data-tension="2"] .slot-reel-strip {
    filter: blur(0.3px) brightness(1.1);
}
.slot-reel.reel-anticipation[data-tension="3"] .slot-reel-strip {
    filter: blur(0.5px) brightness(1.15);
}

/* ── Mega Burst (for trigger sequence) ──────────────── */
.mega-burst-container {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    overflow: visible;
}
.mega-burst-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid rgba(255, 215, 0, 0.8);
    border-radius: 50%;
    animation: megaBurstRing 0.8s ease-out forwards;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}
@keyframes megaBurstRing {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(15); opacity: 0; }
}
.mega-burst-ring:nth-child(2) { animation-delay: 0.1s; border-color: rgba(255, 150, 0, 0.6); }
.mega-burst-ring:nth-child(3) { animation-delay: 0.2s; border-color: rgba(255, 100, 0, 0.5); }

/* ══════════════════════════════════════════════════════════════
   VIP INVITATION REVEAL — Envelope cinematic (3+ scatters)
   Inspired by Black Vault golden key burst
   ══════════════════════════════════════════════════════════════ */

.hr-invite-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow: hidden;
}
.hr-invite-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(30,18,0,0.94), rgba(0,0,0,0.98));
    z-index: -1;
}
.hr-invite-overlay.visible { opacity: 1; }
.hr-invite-overlay.invite-exit {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Spinning rays (same style as BV key) */
.hr-invite-rays {
    position: absolute;
    width: 140%;
    height: 140%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.35) 4deg,
        transparent 10deg,
        transparent 26deg,
        rgba(255, 215, 0, 0.35) 30deg,
        transparent 36deg,
        transparent 52deg,
        rgba(255, 215, 0, 0.35) 56deg,
        transparent 62deg,
        transparent 78deg,
        rgba(255, 215, 0, 0.35) 82deg,
        transparent 88deg,
        transparent 104deg,
        rgba(255, 215, 0, 0.35) 108deg,
        transparent 114deg,
        transparent 130deg,
        rgba(255, 215, 0, 0.35) 134deg,
        transparent 140deg,
        transparent 156deg,
        rgba(255, 215, 0, 0.35) 160deg,
        transparent 166deg,
        transparent 180deg,
        transparent 360deg
    );
    filter: blur(10px);
    animation: inviteRaysSpin 8s linear infinite;
    mix-blend-mode: screen;
    opacity: 0;
}
.hr-invite-overlay.visible .hr-invite-rays {
    animation: inviteRaysFadeIn 0.8s ease-out forwards, inviteRaysSpin 8s linear infinite;
}
@keyframes inviteRaysSpin { to { transform: rotate(360deg); } }
@keyframes inviteRaysFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 0.7; }
}

/* Radial glow behind envelope */
.hr-invite-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.25), rgba(255,180,0,0.08) 50%, transparent 70%);
    animation: inviteGlowPulse 2s ease-in-out infinite;
    z-index: 0;
}
@keyframes inviteGlowPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* Envelope image */
.hr-invite-envelope {
    position: relative;
    z-index: 2;
    width: 55%;
    max-width: 220px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 30px rgba(255, 215, 0, 0.9))
        drop-shadow(0 0 60px color-mix(in srgb, var(--accent-hi) 60%, transparent))
        drop-shadow(0 8px 20px rgba(0,0,0,0.8));
    animation: inviteEnvelopeFloat 2.5s ease-in-out infinite;
    opacity: 0;
    transform: scale(0.4) rotate(-8deg);
}
.hr-invite-overlay.visible .hr-invite-envelope {
    animation: inviteEnvelopeIn 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, inviteEnvelopeFloat 2.5s 1s ease-in-out infinite;
}
@keyframes inviteEnvelopeIn {
    0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    60%  { opacity: 1; transform: scale(1.1) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes inviteEnvelopeFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-10px) rotate(3deg); }
}

/* Title text */
.hr-invite-title {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 5px;
    background: linear-gradient(180deg, #fff 0%, #ffd700 30%, #d4a841 70%, #8b6914 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.9)) drop-shadow(0 0 20px color-mix(in srgb, var(--accent-hi) 60%, transparent));
    opacity: 0;
    transform: translateY(20px);
}
.hr-invite-overlay.visible .hr-invite-title {
    animation: inviteTextIn 0.5s 0.6s ease-out forwards;
}
@keyframes inviteTextIn {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Subtitle */
.hr-invite-sub {
    position: relative;
    z-index: 2;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    color: rgba(255,215,0,0.7);
    text-shadow: 0 0 12px rgba(255,215,0,0.4);
    opacity: 0;
}
.hr-invite-overlay.visible .hr-invite-sub {
    animation: inviteTextIn 0.4s 0.9s ease-out forwards;
}

/* Spins badge */
.hr-invite-spins {
    position: relative;
    z-index: 2;
    margin-top: 14px;
    display: inline-block;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: #000;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    padding: 8px 28px;
    border-radius: 30px;
    box-shadow: 0 4px 25px rgba(255,215,0,0.5), inset 0 2px 0 rgba(255,255,255,0.3);
    letter-spacing: 2px;
    opacity: 0;
    transform: scale(0.3);
}
.hr-invite-overlay.visible .hr-invite-spins {
    animation: inviteSpinsBadge 0.5s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes inviteSpinsBadge {
    0%   { opacity: 0; transform: scale(0.3) rotate(-5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Accept button */
.hr-invite-accept {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    padding: 14px 48px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #000;
    background: linear-gradient(180deg, #ffd700, #d4a841);
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 6px 30px rgba(255,215,0,0.4), 0 2px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.15s, box-shadow 0.15s;
}
.hr-invite-overlay.visible .hr-invite-accept {
    animation: inviteAcceptIn 0.5s 1.6s ease-out forwards;
}
@keyframes inviteAcceptIn {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.hr-invite-accept:active {
    transform: translateY(2px) scale(0.97);
    box-shadow: 0 2px 15px rgba(255,215,0,0.3);
}

/* Floating ambient particles */
.hr-invite-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.hr-invite-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255,215,0,0.5);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,215,0,0.4);
    animation: inviteParticle var(--ipd, 3s) var(--ipdel, 0s) ease-in-out infinite;
}
@keyframes inviteParticle {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
    15%      { opacity: 0.7; }
    50%      { transform: translateY(var(--ipy, -80px)) translateX(var(--ipx, 15px)); opacity: 0.9; }
    85%      { opacity: 0.4; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   BLACK VAULT — Vault Break Bonus
   "Safe Deposit Room" — cinematic vault room with realistic boxes,
   keyholes, brass plates and dramatic lighting.
   ═══════════════════════════════════════════════════════════════════════════ */

.bv-bonus-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  padding: 16px;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}
.bv-bonus-overlay.visible { opacity: 1; pointer-events: auto; }

/* ── 3D vault room ────────────────────────────────────────────────────────── */
.bv-vault-room {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Brushed-steel back wall with marble panels */
.bv-vault-wall {
  position: absolute;
  inset: 0;
  background:
    /* Vignette */
    radial-gradient(ellipse 75% 60% at 50% 35%,
      transparent 0%,
      rgba(0,0,0,0.55) 70%,
      rgba(0,0,0,0.92) 100%),
    /* Faint horizontal seams (steel wall panels) */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 80px),
    /* Cool gradient — brushed gunmetal */
    linear-gradient(180deg,
      #1a1d24 0%,
      #14161c 35%,
      #0c0e13 70%,
      #06070a 100%);
}
.bv-vault-wall::before {
  /* Brushed metal grain */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.012) 0px,
    rgba(255,255,255,0.012) 1px,
    transparent 1px,
    transparent 3px);
  mix-blend-mode: overlay;
}
.bv-vault-wall::after {
  /* Marble band along the top, art-deco trim */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background:
    linear-gradient(180deg,
      #2a2e38 0%,
      #1c1f27 60%,
      transparent 100%),
    repeating-linear-gradient(90deg,
      rgba(240,201,76,0.04) 0px,
      rgba(240,201,76,0.04) 2px,
      transparent 2px,
      transparent 60px);
  border-bottom: 1px solid rgba(240,201,76,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.6);
}

/* Marble floor with perspective tiles */
.bv-vault-floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -10%;
  height: 55%;
  background:
    /* Tile lines */
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 64px,
      rgba(0,0,0,0.55) 64px,
      rgba(0,0,0,0.55) 66px),
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 64px,
      rgba(0,0,0,0.55) 64px,
      rgba(0,0,0,0.55) 66px),
    /* Gradient */
    linear-gradient(180deg,
      #15171d 0%,
      #0a0b10 50%,
      #050608 100%);
  transform: rotateX(64deg);
  transform-origin: 50% 0%;
  opacity: 0.85;
  box-shadow: 0 -40px 60px rgba(0,0,0,0.8) inset;
}

/* Spotlight cone from above */
.bv-vault-light {
  position: absolute;
  top: 0;
  left: 50%;
  width: 90%;
  height: 100%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 45% 70% at 50% 0%,
      rgba(255, 235, 180, 0.18) 0%,
      rgba(255, 220, 140, 0.10) 25%,
      rgba(240, 201, 76, 0.04) 50%,
      transparent 75%);
  filter: blur(2px);
  pointer-events: none;
  animation: bvVaultLightFlicker 5s ease-in-out infinite;
}
@keyframes bvVaultLightFlicker {
  0%, 100% { opacity: 1; }
  47%      { opacity: 0.96; }
  48%      { opacity: 0.78; }
  49%      { opacity: 0.98; }
  82%      { opacity: 0.92; }
  83%      { opacity: 0.7; }
  84%      { opacity: 1; }
}

/* Floating dust particles in the spotlight */
.bv-vault-dust {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1px at 20% 30%, rgba(255,235,180,0.6), transparent 100%),
    radial-gradient(circle 1px at 35% 60%, rgba(255,235,180,0.5), transparent 100%),
    radial-gradient(circle 1px at 50% 20%, rgba(255,235,180,0.7), transparent 100%),
    radial-gradient(circle 1px at 65% 75%, rgba(255,235,180,0.4), transparent 100%),
    radial-gradient(circle 1px at 80% 40%, rgba(255,235,180,0.6), transparent 100%),
    radial-gradient(circle 1px at 25% 80%, rgba(255,235,180,0.5), transparent 100%),
    radial-gradient(circle 1px at 75% 15%, rgba(255,235,180,0.5), transparent 100%);
  mix-blend-mode: screen;
  animation: bvVaultDust 18s linear infinite;
  pointer-events: none;
}
@keyframes bvVaultDust {
  from { transform: translateY(0) }
  to   { transform: translateY(-40px) }
}

/* ── Modal — the safe deposit cabinet ─────────────────────────────────────── */
.bv-bonus-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 22px 22px 22px;
  border-radius: 8px;
  /* Cabinet face: thick brushed steel */
  background:
    /* Inner shadow lighting */
    radial-gradient(ellipse 80% 100% at 50% 0%,
      rgba(255,235,180,0.10) 0%,
      transparent 60%),
    /* Steel grain */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 4px),
    linear-gradient(180deg,
      #2c303a 0%,
      #1c1f27 40%,
      #14161c 100%);
  border: 1px solid #3a3f4a;
  box-shadow:
    /* Outer chrome rim */
    0 0 0 2px #0a0b0e,
    0 0 0 4px #4a505c,
    0 0 0 5px #1a1c22,
    0 0 0 6px #2c303a,
    /* Drop into floor */
    0 30px 60px rgba(0,0,0,0.9),
    0 0 100px rgba(255, 220, 140, 0.18),
    /* Inner highlights */
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -3px 6px rgba(0,0,0,0.7),
    inset 0 0 30px rgba(0,0,0,0.4);
  transform: translateY(20px) scale(0.9);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bv-bonus-overlay.visible .bv-bonus-modal {
  transform: translateY(0) scale(1);
}

/* Cabinet plate header */
.bv-vault-plate {
  display: inline-block;
  margin: 0 auto 14px;
  padding: 5px 14px;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #1a0f00;
  background:
    linear-gradient(180deg, #d4a841 0%, #a07820 50%, #6c4e10 100%);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px #050200,
    0 0 0 2px #2a1c08,
    inset 0 1px 0 rgba(255,255,220,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.6);
  text-shadow: 0 1px 0 rgba(255,255,220,0.4);
}

.bv-bonus-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 6px;
  background: linear-gradient(180deg,
    #FFE8A0 0%,
    #F0C94C 35%,
    #B8860B 70%,
    #F0C94C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8))
          drop-shadow(0 0 14px color-mix(in srgb, var(--accent-hi) 60%, transparent));
  animation: bvBonusTitleGlow 2.6s ease-in-out infinite;
}
@keyframes bvBonusTitleGlow {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) drop-shadow(0 0 8px color-mix(in srgb, var(--accent-hi) 40%, transparent)); }
  50%      { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) drop-shadow(0 0 22px rgba(240,201,76,0.95)); }
}

.bv-bonus-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #FFD966;
  margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(240,201,76,0.55);
  min-height: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.92;
}

/* ── Safes grid — 2 rows × 3 columns of deposit boxes ─────────────────────── */
.bv-safes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  margin: 0 0 16px;
  border-radius: 6px;
  /* Recessed inner cabinet wall */
  background:
    radial-gradient(ellipse at 50% 30%,
      rgba(0,0,0,0.4) 0%,
      rgba(0,0,0,0.7) 100%),
    linear-gradient(180deg, #0a0b10 0%, #050608 100%);
  box-shadow:
    inset 0 0 0 1px #050608,
    inset 0 0 0 2px #2c303a,
    inset 0 4px 16px rgba(0,0,0,0.95),
    inset 0 -2px 6px rgba(0,0,0,0.7);
}

/* ── Individual safe deposit box ──────────────────────────────────────────── */
.bv-safe {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border-radius: 4px;
  /* Brushed steel door */
  background:
    /* Brushed grain */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 2px),
    linear-gradient(180deg,
      #4a505c 0%,
      #353a45 30%,
      #1c1f27 70%,
      #15171d 100%);
  box-shadow:
    /* Bezel rim */
    inset 0 0 0 1px #0a0b0e,
    inset 0 0 0 2px #6a7080,
    inset 0 0 0 3px #1a1c22,
    /* Subtle highlight */
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.7),
    /* External shadow into cabinet */
    0 2px 4px rgba(0,0,0,0.8),
    0 4px 10px rgba(0,0,0,0.6);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

/* ── Door details (hinges, plate, keyhole, rivets) ────────────────────────── */
.bv-safe-door {
  position: absolute;
  inset: 0;
  display: block;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1),
              opacity 0.4s ease 0.3s;
  transform-origin: left center;
  backface-visibility: hidden;
  z-index: 3;
}
.bv-safe-content { z-index: 1; }

/* Hinges on left edge */
.bv-safe-hinge {
  position: absolute;
  left: 1px;
  width: 5px;
  height: 8px;
  background:
    linear-gradient(90deg, #6a7080 0%, #2a2d35 100%);
  border-radius: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 1px 2px rgba(0,0,0,0.6);
}
.bv-safe-hinge-top { top: 14%; }
.bv-safe-hinge-bot { bottom: 14%; }

/* Brass number plate on top */
.bv-safe-plate {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #1a0f00;
  background:
    linear-gradient(180deg, #d4a841 0%, #a07820 50%, #6c4e10 100%);
  border-radius: 1px;
  box-shadow:
    0 0 0 1px #050200,
    inset 0 1px 0 rgba(255,255,220,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.7);
  text-shadow: 0 1px 0 rgba(255,255,220,0.4);
}

/* Keyhole — circle on top + slot below */
.bv-safe-keyhole {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 14px;
  height: 18px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.08));
}
.bv-safe-keyhole-hole {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%,
      #1a1c22 0%,
      #050608 50%,
      #000 100%);
  box-shadow:
    0 0 0 1px #6a7080,
    inset 0 2px 3px rgba(0,0,0,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.12);
}
.bv-safe-keyhole-slot {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 9px;
  background:
    linear-gradient(180deg, #050608 0%, #000 100%);
  border-radius: 0 0 1px 1px;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.95),
    0 0 0 1px #6a7080;
}

/* Small handle/dial on bottom-right */
.bv-safe-handle {
  position: absolute;
  right: 14%;
  bottom: 12%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #c0c5d0 0%,
      #6a7080 40%,
      #2a2d35 100%);
  box-shadow:
    0 0 0 1px #050608,
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 1px 2px rgba(0,0,0,0.7);
}

/* Corner rivets */
.bv-safe-rivet {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      #c0c5d0 0%, #6a7080 40%, #1a1c22 100%);
  box-shadow:
    0 0 0 0.5px #050608,
    inset 0 0.5px 0 rgba(255,255,255,0.4);
}
.bv-rivet-tl { top: 4px; left: 4px; }
.bv-rivet-tr { top: 4px; right: 4px; }
.bv-rivet-bl { bottom: 4px; left: 4px; }
.bv-rivet-br { bottom: 4px; right: 4px; }

/* ── Opening / Opened states ──────────────────────────────────────────────── */
.bv-safe.bv-safe-opening {
  animation: bvSafeShake 0.8s ease-in-out;
  box-shadow:
    inset 0 0 0 1px #0a0b0e,
    inset 0 0 0 2px #FFD966,
    inset 0 0 0 3px #1a1c22,
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.7),
    inset 0 0 18px color-mix(in srgb, var(--accent-hi) 50%, transparent),
    0 0 20px color-mix(in srgb, var(--accent-hi) 60%, transparent),
    0 4px 10px rgba(0,0,0,0.6);
}
@keyframes bvSafeShake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-2px); }
  30%     { transform: translateX(2px); }
  45%     { transform: translateX(-2px); }
  60%     { transform: translateX(2px); }
  75%     { transform: translateX(-1px); }
  90%     { transform: translateX(1px); }
}

.bv-safe.bv-safe-opened {
  background:
    /* Inside view: warm golden interior */
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 220, 140, 0.45) 0%,
      rgba(180, 120, 30, 0.25) 50%,
      #050200 100%),
    linear-gradient(180deg, #1a0f00 0%, #050200 100%);
  box-shadow:
    inset 0 0 0 1px #0a0b0e,
    inset 0 0 0 2px #FFD966,
    inset 0 0 0 3px #1a1c22,
    inset 0 0 30px rgba(255, 220, 140, 0.6),
    inset 0 0 60px rgba(0,0,0,0.7),
    0 0 32px rgba(255, 220, 140, 0.7),
    0 4px 10px rgba(0,0,0,0.6);
}

/* Door swings open */
.bv-safe.bv-safe-opened .bv-safe-door {
  transform: perspective(180px) rotateY(-118deg);
  opacity: 0;
}

/* ── Reveal contents inside box ───────────────────────────────────────────── */
.bv-safe-content {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.bv-safe.bv-safe-opened .bv-safe-content {
  display: flex;
}
@keyframes bvSafePop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

/* Soft golden glow inside the open box */
.bv-safe-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 235, 160, 0.55) 0%,
      color-mix(in srgb, var(--accent-hi) 25%, transparent) 35%,
      transparent 70%);
  animation: bvSafeGlowPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bvSafeGlowPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

.bv-safe-multiplier {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(180deg, #FFE8A0 0%, #F0C94C 50%, #B8860B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 14px rgba(240,201,76,0.9);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85));
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

/* ── Total bonus win ──────────────────────────────────────────────────────── */
.bv-bonus-total {
  margin-top: 8px;
  padding: 14px 14px;
  border-radius: 4px;
  /* Engraved brass plaque */
  background:
    linear-gradient(180deg,
      rgba(212, 168, 65, 0.18) 0%,
      rgba(108, 78, 16, 0.12) 100%),
    #0a0b10;
  box-shadow:
    inset 0 0 0 1px #050608,
    inset 0 0 0 2px rgba(212, 168, 65, 0.55),
    inset 0 0 0 3px #050608,
    inset 0 1px 0 rgba(255,255,220,0.15),
    inset 0 -2px 6px rgba(0,0,0,0.7),
    inset 0 0 22px rgba(240, 201, 76, 0.18),
    0 0 28px rgba(240, 201, 76, 0.35);
  animation: bvBonusTotalAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bvBonusTotalAppear {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

.bv-bonus-total-label {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 217, 102, 0.85);
  margin-bottom: 4px;
}

.bv-bonus-total-amount {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(180deg, #FFE8A0 0%, #F0C94C 50%, #B8860B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 24px rgba(240,201,76,0.7);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.85));
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  animation: bvBonusTotalGlow 1.8s ease-in-out infinite;
}
@keyframes bvBonusTotalGlow {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.85)) drop-shadow(0 0 8px color-mix(in srgb, var(--accent-hi) 50%, transparent)); }
  50%      { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.85)) drop-shadow(0 0 22px rgba(240,201,76,1)); }
}

/* ── Collect button ───────────────────────────────────────────────────────── */
.bv-bonus-close {
  margin-top: 14px;
  padding: 14px 38px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(180deg, #FFD966 0%, #F0C94C 50%, #C9A227 100%);
  color: #1a0f00;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 0 1px #050200,
    0 0 0 2px #6a4f1a,
    0 0 0 3px #050200,
    0 0 28px rgba(240, 201, 76, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  animation: bvBonusCollectPulse 1.2s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255,255,220,0.4);
}
@keyframes bvBonusCollectPulse {
  0%, 100% { box-shadow: 0 0 0 1px #050200, 0 0 0 2px #6a4f1a, 0 0 0 3px #050200, 0 0 28px rgba(240,201,76,0.55), inset 0 2px 0 rgba(255,255,255,0.55), inset 0 -3px 0 rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 0 0 1px #050200, 0 0 0 2px #6a4f1a, 0 0 0 3px #050200, 0 0 48px rgba(240,201,76,1), inset 0 2px 0 rgba(255,255,255,0.55), inset 0 -3px 0 rgba(0,0,0,0.3); }
}
.bv-bonus-close:hover  { transform: translateY(-2px); }
.bv-bonus-close:active { transform: translateY(1px); }

/* ── Interactive vault break: clickable boxes & loss reveal ───────────────── */
.bv-safe-clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bv-safe-clickable:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px #0a0b0e,
    inset 0 0 0 2px #FFD966,
    inset 0 0 0 3px #1a1c22,
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.7),
    inset 0 0 18px rgba(240,201,76,0.35),
    0 0 22px rgba(240,201,76,0.55),
    0 6px 14px rgba(0,0,0,0.7);
}
.bv-safe-clickable:hover .bv-safe-keyhole-hole {
  box-shadow:
    0 0 0 1px #FFD966,
    inset 0 2px 3px rgba(0,0,0,0.95),
    inset 0 -1px 0 rgba(255,217,102,0.45),
    0 0 8px rgba(255,217,102,0.6);
}
.bv-safe-clickable:active { transform: translateY(0); }

/* Auto-revealed losing boxes — dimmed, cooler tone, no pulsing glow */
.bv-safe.bv-safe-revealed-loss {
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(120, 120, 130, 0.18) 0%,
      rgba(40, 40, 50, 0.18) 50%,
      #050608 100%),
    linear-gradient(180deg, #15171d 0%, #050608 100%);
  box-shadow:
    inset 0 0 0 1px #0a0b0e,
    inset 0 0 0 2px #4a505c,
    inset 0 0 0 3px #1a1c22,
    inset 0 0 26px rgba(80, 80, 90, 0.4),
    inset 0 0 60px rgba(0,0,0,0.7),
    0 0 14px rgba(0,0,0,0.6),
    0 4px 10px rgba(0,0,0,0.6);
  opacity: 0.78;
}
.bv-safe.bv-safe-revealed-loss .bv-safe-multiplier {
  background: linear-gradient(180deg, #9aa0ac 0%, #5a606c 50%, #2a2d35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85));
  font-size: 18px;
}
.bv-safe.bv-safe-revealed-loss .bv-safe-glow {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VAULT BREAK — Golden Key cinematic
   ═══════════════════════════════════════════════════════════════════════════ */

/* The clicked box shakes more intensely when it holds the key */
.bv-safe.bv-safe-opening-key {
  animation: bvSafeShakeKey 0.8s ease-in-out;
  box-shadow:
    inset 0 0 0 1px #0a0b0e,
    inset 0 0 0 2px #FFE8A0,
    inset 0 0 0 3px #1a1c22,
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -2px 4px rgba(0,0,0,0.7),
    inset 0 0 22px rgba(255, 232, 160, 0.7),
    0 0 30px rgba(255, 232, 160, 0.9),
    0 4px 10px rgba(0,0,0,0.6);
}
@keyframes bvSafeShakeKey {
  0%,100% { transform: translateX(0) scale(1); }
  10%     { transform: translateX(-3px) scale(1.02); }
  25%     { transform: translateX(3px) scale(1.03); }
  40%     { transform: translateX(-3px) scale(1.04); }
  55%     { transform: translateX(3px) scale(1.03); }
  70%     { transform: translateX(-2px) scale(1.02); }
  85%     { transform: translateX(2px) scale(1.01); }
}

/* The key box after opening — brighter golden interior */
.bv-safe.bv-safe-key-box {
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 235, 160, 0.75) 0%,
      rgba(220, 170, 40, 0.4) 45%,
      #1a0f00 100%),
    linear-gradient(180deg, #2a1800 0%, #050200 100%);
  box-shadow:
    inset 0 0 0 1px #0a0b0e,
    inset 0 0 0 2px #FFE8A0,
    inset 0 0 0 3px #1a1c22,
    inset 0 0 40px rgba(255, 232, 160, 0.85),
    inset 0 0 80px rgba(240, 201, 76, 0.5),
    0 0 60px rgba(255, 232, 160, 1),
    0 4px 12px rgba(0,0,0,0.7);
  animation: bvKeyBoxPulse 1.6s ease-in-out infinite;
}
@keyframes bvKeyBoxPulse {
  0%,100% { box-shadow: inset 0 0 0 1px #0a0b0e, inset 0 0 0 2px #FFE8A0, inset 0 0 0 3px #1a1c22, inset 0 0 40px rgba(255,232,160,0.85), inset 0 0 80px color-mix(in srgb, var(--accent-hi) 50%, transparent), 0 0 60px rgba(255,232,160,1), 0 4px 12px rgba(0,0,0,0.7); }
  50%     { box-shadow: inset 0 0 0 1px #0a0b0e, inset 0 0 0 2px #FFE8A0, inset 0 0 0 3px #1a1c22, inset 0 0 50px rgba(255,232,160,1),    inset 0 0 100px rgba(240,201,76,0.75), 0 0 90px rgba(255,232,160,1), 0 4px 12px rgba(0,0,0,0.7); }
}

/* Key image inside the box */
.bv-safe-key-img {
  position: relative;
  z-index: 2;
  width: 85%;
  height: 85%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(255, 232, 160, 0.9))
    drop-shadow(0 2px 4px rgba(0,0,0,0.7));
  animation: bvKeyFloat 2.4s ease-in-out infinite;
}
@keyframes bvKeyFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-3px) rotate(3deg); }
}

.bv-safe-glow-key {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 245, 200, 0.95) 0%,
      rgba(255, 220, 120, 0.55) 30%,
      rgba(240, 201, 76, 0.2) 60%,
      transparent 80%);
  animation: bvKeyGlowPulse 1.4s ease-in-out infinite;
}
@keyframes bvKeyGlowPulse {
  0%,100% { opacity: 0.9; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.15); }
}

/* Boxes that were blown open BY the key — strong gold glow */
.bv-safe.bv-safe-opened-by-key {
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 220, 140, 0.6) 0%,
      rgba(180, 120, 30, 0.3) 50%,
      #050200 100%),
    linear-gradient(180deg, #1a0f00 0%, #050200 100%);
  box-shadow:
    inset 0 0 0 1px #0a0b0e,
    inset 0 0 0 2px #FFD966,
    inset 0 0 0 3px #1a1c22,
    inset 0 0 34px rgba(255, 220, 140, 0.75),
    inset 0 0 70px rgba(0,0,0,0.5),
    0 0 44px rgba(255, 220, 140, 0.9),
    0 4px 10px rgba(0,0,0,0.6);
  animation: bvSafeKeyBlast 0.9s ease-out;
}
@keyframes bvSafeKeyBlast {
  0%   { transform: scale(0.92); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.bv-safe.bv-safe-opened-by-key .bv-safe-door {
  transform: perspective(180px) rotateY(-118deg);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1),
              opacity 0.35s ease 0.25s;
}

/* Full-screen golden flash when key is found */
.bv-bonus-overlay.bv-key-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255, 245, 200, 0.7) 0%,
    rgba(255, 220, 140, 0.4) 25%,
    transparent 60%);
  animation: bvKeyFlash 0.8s ease-out;
  z-index: 50;
}
@keyframes bvKeyFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Golden Key burst — cinematic centre-screen reveal */
.bv-key-burst {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: bvKeyBurstIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.bv-key-burst.bv-key-burst-out {
  animation: bvKeyBurstOut 0.5s ease-in both;
}
@keyframes bvKeyBurstIn {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bvKeyBurstOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

.bv-key-burst-rays {
  position: absolute;
  width: 130%;
  height: 130%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 232, 160, 0.5) 5deg,
    transparent 12deg,
    transparent 28deg,
    rgba(255, 232, 160, 0.5) 33deg,
    transparent 40deg,
    transparent 56deg,
    rgba(255, 232, 160, 0.5) 61deg,
    transparent 68deg,
    transparent 84deg,
    rgba(255, 232, 160, 0.5) 89deg,
    transparent 96deg,
    transparent 112deg,
    rgba(255, 232, 160, 0.5) 117deg,
    transparent 124deg,
    transparent 140deg,
    rgba(255, 232, 160, 0.5) 145deg,
    transparent 152deg,
    transparent 168deg,
    rgba(255, 232, 160, 0.5) 173deg,
    transparent 180deg,
    transparent 360deg
  );
  filter: blur(8px);
  animation: bvKeyRaysSpin 6s linear infinite;
  mix-blend-mode: screen;
}
@keyframes bvKeyRaysSpin {
  to { transform: rotate(360deg); }
}

.bv-key-burst-img {
  position: relative;
  z-index: 2;
  width: 55%;
  max-width: 260px;
  max-height: 45vh;
  object-fit: contain;
  filter:
    drop-shadow(0 0 40px rgba(255, 232, 160, 1))
    drop-shadow(0 0 80px rgba(240, 201, 76, 0.8))
    drop-shadow(0 10px 30px rgba(0,0,0,0.8));
  animation: bvKeyBurstFloat 2s ease-in-out infinite;
}
@keyframes bvKeyBurstFloat {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%     { transform: translateY(-8px) rotate(5deg); }
}

.bv-key-burst-text {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 8px;
  background: linear-gradient(180deg, #FFE8A0 0%, #F0C94C 45%, #B8860B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,0.9))
    drop-shadow(0 0 24px rgba(240, 201, 76, 0.8));
  animation: bvKeyTextGlow 1.4s ease-in-out infinite;
}
@keyframes bvKeyTextGlow {
  0%,100% { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.9)) drop-shadow(0 0 14px color-mix(in srgb, var(--accent-hi) 60%, transparent)); }
  50%     { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.9)) drop-shadow(0 0 34px rgba(255, 232, 160, 1));  }
}

.bv-key-burst-sub {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #FFD966;
  text-shadow: 0 0 12px rgba(240, 201, 76, 0.7), 0 2px 3px rgba(0,0,0,0.9);
}

/* ── Golden Key info box in paytable modal ───────────────────────────────── */
.info-goldkey-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 232, 160, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #1a0f00 0%, #050200 100%);
  box-shadow:
    0 0 0 1px #050200,
    0 0 0 2px #8c6a22,
    0 0 0 3px #050200,
    0 0 28px rgba(240, 201, 76, 0.35),
    inset 0 1px 0 rgba(255, 232, 160, 0.2);
}
.info-goldkey-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(255, 232, 160, 0.85)) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  animation: bvKeyFloat 2.6s ease-in-out infinite;
}
.info-goldkey-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(180deg, #FFE8A0 0%, #F0C94C 50%, #B8860B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}
.info-goldkey-desc {
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 235, 200, 0.85);
}

/* ── "So close" — key was in an unpicked box ─────────────────────────────── */
.bv-safe.bv-safe-key-missed {
  animation: none;
  box-shadow:
    inset 0 0 0 1px #0a0b0e,
    inset 0 0 0 2px #a07820,
    inset 0 0 0 3px #1a1c22,
    inset 0 0 28px rgba(180, 130, 40, 0.5),
    inset 0 0 60px rgba(0,0,0,0.65),
    0 0 24px rgba(180, 130, 40, 0.45),
    0 4px 10px rgba(0,0,0,0.6);
  opacity: 0.85;
}
.bv-safe.bv-safe-key-missed .bv-safe-key-img {
  filter:
    drop-shadow(0 0 8px rgba(255, 232, 160, 0.55))
    drop-shadow(0 2px 4px rgba(0,0,0,0.7))
    saturate(0.85) brightness(0.85);
  animation: bvKeyFloat 3.5s ease-in-out infinite;
}
.bv-safe.bv-safe-key-missed .bv-safe-glow-key {
  opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLACK VAULT — Cinematic loading screen (vault door opens into the game)
   ═══════════════════════════════════════════════════════════════════════════ */

.bv-vault-loader {
  position: absolute;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 45%;
}
.bv-vault-loader.active { display: flex; }
.bv-vault-loader.hiding .bv-vault-door { animation: bvDoorSwingOpen 1.2s cubic-bezier(0.7, 0, 0.25, 1) forwards; }
.bv-vault-loader.hiding .bv-vault-loader-info { animation: bvInfoFadeOut 0.6s ease-out forwards; }
.bv-vault-loader.hiding { animation: bvLoaderFadeOut 1.2s ease-in-out forwards; }

@keyframes bvLoaderFadeOut {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes bvInfoFadeOut {
  to { opacity: 0; transform: translateY(20px); }
}

/* ── 3D vault room background ─────────────────────────────────────────────── */
.bv-vault-room-bg {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.bv-vault-room-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%,
      transparent 0%,
      rgba(0,0,0,0.6) 70%,
      rgba(0,0,0,0.95) 100%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 80px),
    linear-gradient(180deg, #1a1d24 0%, #14161c 40%, #0c0e13 80%, #06070a 100%);
}
.bv-vault-room-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.012) 0px,
    rgba(255,255,255,0.012) 1px,
    transparent 1px,
    transparent 3px);
  mix-blend-mode: overlay;
}
.bv-vault-room-floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -10%;
  height: 45%;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 64px,
      rgba(0,0,0,0.55) 64px,
      rgba(0,0,0,0.55) 66px),
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 64px,
      rgba(0,0,0,0.55) 64px,
      rgba(0,0,0,0.55) 66px),
    linear-gradient(180deg, #15171d 0%, #0a0b10 50%, #050608 100%);
  transform: rotateX(62deg);
  transform-origin: 50% 0%;
  opacity: 0.75;
}
.bv-vault-room-light {
  position: absolute;
  top: 0;
  left: 50%;
  width: 90%;
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 40% 70% at 50% 0%,
    rgba(255, 235, 180, 0.22) 0%,
    rgba(240, 201, 76, 0.08) 35%,
    transparent 70%);
  filter: blur(4px);
  animation: bvVaultLightFlicker 5s ease-in-out infinite;
}

/* ── The vault door ───────────────────────────────────────────────────────── */
.bv-vault-door {
  position: relative;
  width: min(68vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  /* slight pop-in */
  animation: bvDoorIdle 8s ease-in-out infinite;
  z-index: 5;
  margin-top: -6vh;
}
@keyframes bvDoorIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Frame ring around the door (embedded in the wall) */
.bv-vault-door-frame {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #6a7080 0%, #2a2d35 45%, #0a0b0e 100%);
  box-shadow:
    0 0 0 2px #050608,
    0 0 0 5px #3a3f4a,
    0 0 0 6px #050608,
    0 0 60px rgba(0,0,0,0.9),
    inset 0 0 40px rgba(0,0,0,0.8);
}
.bv-vault-rivet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c0c5d0 0%, #6a7080 40%, #1a1c22 100%);
  box-shadow:
    0 0 0 1px #050608,
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 3px rgba(0,0,0,0.7);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * (min(34vw, 170px) + 2px))) rotate(calc(-1 * var(--a)));
}

/* Door face (brushed steel disc) */
.bv-vault-door-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255, 235, 180, 0.18) 0%,
      transparent 35%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 3px),
    radial-gradient(circle at 50% 50%,
      #3a3f4a 0%,
      #2a2d35 40%,
      #1c1f27 75%,
      #14161c 100%);
  box-shadow:
    inset 0 0 0 2px #0a0b0e,
    inset 0 0 0 5px #6a7080,
    inset 0 0 0 7px #0a0b0e,
    inset 0 0 0 10px #4a505c,
    inset 0 0 0 12px #1a1c22,
    inset 0 6px 30px rgba(255,255,255,0.08),
    inset 0 -20px 60px rgba(0,0,0,0.7),
    0 20px 60px rgba(0,0,0,0.9),
    0 0 80px rgba(240, 201, 76, 0.12);
}

/* Logo ring engraved into the upper half */
.bv-vault-logo-ring {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 58%;
  height: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8))
          drop-shadow(0 0 14px rgba(240, 201, 76, 0.35));
}
.bv-vault-loader-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: bvVaultLogoGlow 3s ease-in-out infinite;
}
@keyframes bvVaultLogoGlow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(240,201,76,0.35)); }
  50%     { filter: drop-shadow(0 0 16px rgba(240,201,76,0.8));  }
}

/* The spinning combination wheel */
.bv-vault-wheel {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #8c9098 0%, #4a505c 40%, #1c1f27 100%);
  box-shadow:
    0 0 0 2px #050608,
    0 0 0 4px #6a7080,
    0 0 0 5px #050608,
    inset 0 0 18px rgba(0,0,0,0.8),
    inset 0 2px 2px rgba(255,255,255,0.4),
    0 8px 20px rgba(0,0,0,0.8);
  animation: bvVaultWheelSpin 3.5s linear infinite;
}
@keyframes bvVaultWheelSpin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Tick marks around the wheel */
.bv-vault-wheel-marks {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,0.35) 0deg,
      rgba(255,255,255,0.35) 1deg,
      transparent 1deg,
      transparent 15deg);
  mask: radial-gradient(circle, transparent 55%, #000 58%, #000 72%, transparent 75%);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 58%, #000 72%, transparent 75%);
  pointer-events: none;
}

.bv-vault-wheel-inner {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #c0c5d0 0%, #6a7080 35%, #2a2d35 100%);
  box-shadow:
    0 0 0 1px #050608,
    inset 0 1px 2px rgba(255,255,255,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.7);
}
.bv-vault-wheel-spoke {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 10%;
  transform-origin: center;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.5) 15%,
    rgba(255,255,255,0.3) 50%,
    rgba(0,0,0,0.5) 85%,
    transparent 100%);
  border-radius: 2px;
}
.bv-vault-wheel-spoke-1 { transform: translate(-50%, -50%) rotate(0deg); }
.bv-vault-wheel-spoke-2 { transform: translate(-50%, -50%) rotate(45deg); }
.bv-vault-wheel-spoke-3 { transform: translate(-50%, -50%) rotate(90deg); }
.bv-vault-wheel-spoke-4 { transform: translate(-50%, -50%) rotate(135deg); }
.bv-vault-wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28%;
  height: 28%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #FFE8A0 0%, #F0C94C 35%, #8c6a22 100%);
  box-shadow:
    0 0 0 1px #050200,
    0 0 0 2px #1a1c22,
    inset 0 1px 1px rgba(255,255,220,0.7),
    inset 0 -1px 2px rgba(0,0,0,0.6),
    0 0 14px rgba(240, 201, 76, 0.8);
}

/* Hinges on the left edge */
.bv-vault-hinge {
  position: absolute;
  left: -24px;
  width: 22px;
  height: 36px;
  background: linear-gradient(90deg, #4a505c 0%, #2a2d35 60%, #14161c 100%);
  border-radius: 2px 0 0 2px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -2px 3px rgba(0,0,0,0.7),
    0 0 0 1px #050608,
    -2px 4px 8px rgba(0,0,0,0.7);
}
.bv-vault-hinge::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, #c0c5d0 0%, #4a505c 50%, #14161c 100%);
  box-shadow: 0 0 0 1px #050608, inset 0 1px 0 rgba(255,255,255,0.5);
}
.bv-vault-hinge-top { top: 12%; }
.bv-vault-hinge-mid { top: 50%; transform: translateY(-50%); }
.bv-vault-hinge-bot { bottom: 12%; }

/* ── Door swing animation when loader hides ───────────────────────────────── */
@keyframes bvDoorSwingOpen {
  0%   { transform: translateY(0) perspective(1400px) rotateY(0deg); }
  15%  { transform: translateY(0) perspective(1400px) rotateY(-3deg); }
  100% { transform: translateY(0) perspective(1400px) rotateY(-120deg); }
}

/* ── Info panel (bonuses + progress) ──────────────────────────────────────── */
.bv-vault-loader-info {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 460px);
  text-align: center;
  z-index: 10;
  padding: 0 12px;
}

.bv-vault-loader-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 6px;
  background: linear-gradient(180deg, #FFE8A0 0%, #F0C94C 45%, #B8860B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8))
          drop-shadow(0 0 12px rgba(240, 201, 76, 0.5));
}

.bv-vault-loader-bonuses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

.bv-vault-loader-bonus {
  padding: 8px 10px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(240,201,76,0.08) 0%, rgba(0,0,0,0.6) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-hi) 25%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 6px rgba(0,0,0,0.6);
  text-align: left;
}

.bv-vault-loader-bonus-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #F0C94C;
  margin-bottom: 3px;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent-hi) 60%, transparent);
}

.bv-vault-loader-bonus-syms {
  display: flex;
  gap: 3px;
  margin-bottom: 3px;
}
.bv-vault-loader-bonus-syms img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-hi) 60%, transparent));
}

.bv-vault-loader-key-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255, 232, 160, 0.9));
}

.bv-vault-loader-bonus-desc {
  font-size: 9px;
  line-height: 1.35;
  color: rgba(255, 235, 200, 0.85);
}
.bv-vault-loader-bonus-desc b { color: #F0C94C; }

/* Progress bar */
.bv-vault-loader-bar {
  position: relative;
  width: 75%;
  max-width: 320px;
  height: 4px;
  margin: 0 auto 6px;
  background: rgba(0,0,0,0.7);
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--accent-hi) 25%, transparent);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.bv-vault-loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #B8860B 0%, #F0C94C 50%, #FFE8A0 100%);
  box-shadow: 0 0 10px rgba(240, 201, 76, 0.8);
  animation: bvVaultLoaderFill 3.6s ease-out forwards;
}
@keyframes bvVaultLoaderFill {
  0%   { width: 0%; }
  100% { width: 100%; }
}

.bv-vault-loader-text {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #F0C94C;
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent-hi) 60%, transparent);
  animation: bvVaultLoaderTextBlink 1.3s ease-in-out infinite;
}
@keyframes bvVaultLoaderTextBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.55; }
}

/* The door shows a warm light behind it as it opens */
.bv-vault-loader.hiding .bv-vault-door::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 235, 180, 0.85) 0%,
    rgba(240, 201, 76, 0.5) 30%,
    transparent 65%);
  animation: bvVaultLightReveal 1.2s ease-out forwards;
  pointer-events: none;
  z-index: -1;
}
@keyframes bvVaultLightReveal {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(2); }
}

/* ============ BLACK VAULT LOADER V2 — clean & minimal ============ */
.bv-loader-v2 {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 35%, #1a1410 0%, #0a0806 55%, #050403 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    overflow: hidden;
    transition: opacity 0.5s ease;
}
.bv-loader-v2.hiding { opacity: 0; }
.bv-loader-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 520px; height: 520px;
    transform: translate(-50%, -60%);
    background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.05) 35%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
    animation: bvLoaderPulse 3.2s ease-in-out infinite;
}
@keyframes bvLoaderPulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -60%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); }
}
.bv-loader-content {
    position: relative;
    width: 100%;
    max-width: 360px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    z-index: 1;
}
.bv-loader-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.bv-loader-ring {
    position: relative;
    width: 140px; height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bv-loader-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.bv-loader-ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 2;
}
.bv-loader-ring-fill {
    fill: none;
    stroke: url(#bvGoldGrad);
    stroke: #d4af37;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 339.292;
    filter: drop-shadow(0 0 6px rgba(212,175,55,0.6));
    animation: bvLoaderRingSpin 1.6s linear infinite, bvLoaderRingFill 3.8s ease-out forwards;
}
@keyframes bvLoaderRingSpin {
    0% { transform: rotate(0deg); transform-origin: center; }
    100% { transform: rotate(360deg); transform-origin: center; }
}
.bv-loader-ring-svg { animation: bvLoaderRingRotate 2.4s linear infinite; }
@keyframes bvLoaderRingRotate {
    0% { transform: rotate(-90deg); }
    100% { transform: rotate(270deg); }
}
@keyframes bvLoaderRingFill {
    0% { stroke-dashoffset: 339.292; }
    100% { stroke-dashoffset: 0; }
}
.bv-loader-logo {
    width: 96px; height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.8));
    animation: bvLoaderLogoFloat 3s ease-in-out infinite;
}
@keyframes bvLoaderLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.bv-loader-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 5px;
    background: linear-gradient(180deg, #f5d97a 0%, #d4af37 50%, #8a6d1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(212,175,55,0.25);
}
.bv-loader-sub {
    font-size: 9px;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: -6px;
}
.bv-loader-features {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bv-loader-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(8px);
    animation: bvLoaderFeatureIn 0.5s ease-out forwards;
}
.bv-loader-feature:nth-child(1) { animation-delay: 0.15s; }
.bv-loader-feature:nth-child(2) { animation-delay: 0.30s; }
.bv-loader-feature:nth-child(3) { animation-delay: 0.45s; }
.bv-loader-feature:nth-child(4) { animation-delay: 0.60s; }
@keyframes bvLoaderFeatureIn {
    to { opacity: 1; transform: translateY(0); }
}
.bv-loader-feature-icon {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 7px;
    flex-shrink: 0;
    color: #f5d97a;
}
.bv-loader-feature-icon img {
    width: 18px; height: 18px;
    object-fit: contain;
}
.bv-loader-feature-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.bv-loader-feature-text b {
    font-size: 12px;
    color: #f5d97a;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.bv-loader-feature-text span {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.3px;
}
.bv-loader-status {
    font-size: 10px;
    letter-spacing: 6px;
    color: rgba(212,175,55,0.7);
    font-weight: 600;
    margin-top: 4px;
    animation: bvLoaderStatusBlink 1.4s ease-in-out infinite;
}
@keyframes bvLoaderStatusBlink {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BLACK VAULT — REFINEMENTS (history detail, layout, slider, win FX, result)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── History: shorter date column + back button + detail card ─────────────── */
#bv-history-overlay .history-row {
    grid-template-columns: 1.35fr 0.95fr 0.75fr 1.05fr 0.6fr;
    font-size: 11px;
}
#bv-history-overlay .history-col-date {
    font-size: 11px;
    white-space: nowrap;
}
.bv-history-back {
    background: linear-gradient(180deg, rgba(212,168,65,0.22), color-mix(in srgb, var(--accent) 8%, transparent));
    border: 1px solid rgba(212,168,65,0.45);
    color: #f5d97a;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}
.bv-history-back:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), rgba(212,168,65,0.12)); }
.bv-detail-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(212,168,65,0.18);
    border-radius: 10px;
    padding: 14px 14px 10px;
}
.bv-detail-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #f5d97a;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.bv-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    font-size: 12px;
}
.bv-detail-label {
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    align-self: center;
}
.bv-detail-val {
    color: #fff;
    font-weight: 600;
    word-break: break-word;
}
.bv-detail-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.bv-detail-section-title {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(212,168,65,0.75);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.bv-detail-seed {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}
.bv-detail-seed > span {
    font-size: 9.5px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.bv-detail-seed > code {
    font-family: monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.75);
    background: rgba(0,0,0,0.4);
    padding: 6px 8px;
    border-radius: 5px;
    word-break: break-all;
}
.bv-detail-json {
    font-family: monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.4);
    padding: 8px 10px;
    border-radius: 5px;
    max-height: 180px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* ── Tighten vertical spacing at the top of the Black Vault screen ────────── */
#black-vault-screen { padding-top: 4px !important; }
#black-vault-screen .game-header.game-header-logo {
    margin-top: -18px;
    margin-bottom: -68px;
    min-height: 130px;
}
#black-vault-screen .game-header-logo-img {
    max-height: 150px;
}
.bv-machine-wrap {
    position: relative;
    padding-top: 10px;
}

/* ── WIN RESULT: framed "WON" pill at top of the slot machine ─────────────── */
.bv-result-top {
    position: relative;
    z-index: 25;
    margin: 0 auto -18px !important;     /* overlaps top of slot */
    padding: 0 !important;
    min-height: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.bv-result-top:empty { display: none !important; }
.bv-result-top.bv-result.win,
.bv-result-top.bv-result.big-win,
.bv-result-top.bv-result.jackpot {
    display: inline-flex !important;
    margin: 0 auto -18px !important;
    padding: 8px 22px !important;
    border-radius: 999px;
    background: linear-gradient(180deg, #1a1206 0%, #0a0602 100%);
    border: 1.5px solid rgba(240,201,76,0.75);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 0 22px rgba(240,201,76,0.55),
        0 6px 18px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -2px 4px rgba(0,0,0,0.6);
    animation: bvResultPop 0.45s cubic-bezier(0.34,1.56,0.64,1);
    align-self: center;
}
.bv-machine-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bv-result-top .bv-win-label::before {
    content: 'WON: ';
    color: #f5d97a;
    font-weight: 800;
    opacity: 0.85;
    margin-right: 2px;
}
.bv-result-top.jackpot {
    flex-direction: column !important;
    padding: 10px 26px !important;
    border-radius: 14px !important;
    border-color: #ffe58a !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 0 34px rgba(255,215,0,0.7),
        0 6px 18px rgba(0,0,0,0.75),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -2px 4px rgba(0,0,0,0.6);
}
.bv-result-top .bv-win-label {
    color: #f5d97a;
    font-size: 10.5px;
    letter-spacing: 2px;
}
.bv-result-top .bv-win-amount {
    color: #fff3b8;
    font-size: 17px;
    text-shadow: 0 0 10px rgba(255,215,80,0.7), 0 1px 0 rgba(0,0,0,0.7);
}

/* ── Hide old inline result under the machine (safety) ────────────────────── */
#bv-machine > .adv-slot-result { display: none !important; }

/* ── Spin button: 50% larger (132 → 198) while wheel stays 210 ────────────── */
.bv-spin-btn {
    width: 198px !important;
    height: 198px !important;
}
@media (max-width: 420px) {
    .bv-spin-btn { width: 165px !important; height: 165px !important; }
}

/* ── Bet row: smaller, cleaner pill + step buttons ────────────────────────── */
.bv-bet-row { gap: 10px !important; margin-top: 6px !important; }
.bv-step-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
}
.bv-bet-pill {
    min-width: 150px !important;
    max-width: 180px !important;
    height: 46px !important;
    padding: 0 18px !important;
    font-size: 22px !important;
    border-radius: 11px !important;
    letter-spacing: 1.2px !important;
}
.bv-bet-pill.fs-md { font-size: 19px !important; }
.bv-bet-pill.fs-sm { font-size: 16px !important; }
.bv-bet-pill.fs-xs { font-size: 13px !important; }
.bv-bet-label {
    font-size: 9.5px !important;
    letter-spacing: 4px !important;
    margin-top: 2px !important;
}

/* ── Vertical lines slider (replaces 1/5/10 buttons) ──────────────────────── */
.bv-lines-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-self: center;
    padding: 4px 0;
}
.bv-lines-readout {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 2px;
    padding: 7px 12px;
    min-width: 58px;
    border-radius: 10px;
    background: linear-gradient(180deg, #1a1206 0%, #050300 100%);
    box-shadow:
        0 0 0 1px #050200,
        0 0 0 2px #8c6a22,
        0 0 0 3px #050200,
        0 0 0 4px rgba(255,220,120,0.35),
        inset 0 2px 3px rgba(0,0,0,0.8),
        0 4px 12px rgba(0,0,0,0.6);
}
.bv-lines-readout > span {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: #ffd866;
    text-shadow:
        0 0 6px rgba(255,200,80,0.8),
        0 0 14px rgba(255,170,30,0.5);
}
.bv-lines-readout > small {
    font-size: 7px;
    letter-spacing: 1.5px;
    font-weight: 800;
    color: rgba(240,201,76,0.7);
    text-transform: uppercase;
}
.bv-lines-track {
    position: relative;
    width: 14px;
    height: 150px;
    border-radius: 10px;
    background: linear-gradient(180deg, #050300 0%, #100b03 50%, #050300 100%);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.8),
        inset 0 -1px 0 rgba(255,220,120,0.15),
        0 0 0 1px rgba(255,220,120,0.18),
        0 4px 10px rgba(0,0,0,0.6);
    overflow: visible;
}
.bv-lines-track-fill {
    position: absolute;
    left: 2px; right: 2px; bottom: 2px;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(180deg,
        rgba(255,220,120,0.9) 0%,
        rgba(240,180,40,0.85) 50%,
        rgba(180,120,20,0.75) 100%);
    box-shadow:
        0 0 12px rgba(255,200,80,0.55),
        inset 0 1px 0 rgba(255,255,220,0.4);
    transition: height 0.15s ease-out;
    pointer-events: none;
}
.bv-lines-range {
    position: absolute;
    /* Rotate horizontal range to vertical. Width becomes the vertical length. */
    width: 150px;
    height: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: ns-resize;
    margin: 0;
    padding: 0;
    outline: none;
}
.bv-lines-range::-webkit-slider-runnable-track {
    background: transparent;
    height: 30px;
    border: none;
}
.bv-lines-range::-moz-range-track {
    background: transparent;
    height: 30px;
    border: none;
}
.bv-lines-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff3b0 0%, #f0c94c 40%, #8a5e14 100%);
    border: 1.5px solid #050200;
    box-shadow:
        0 0 0 1px rgba(255,220,120,0.5),
        0 0 10px rgba(255,200,80,0.6),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -2px 3px rgba(0,0,0,0.4);
    cursor: ns-resize;
    margin-top: 4px;
}
.bv-lines-range::-moz-range-thumb {
    width: 24px;
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff3b0 0%, #f0c94c 40%, #8a5e14 100%);
    border: 1.5px solid #050200;
    box-shadow:
        0 0 0 1px rgba(255,220,120,0.5),
        0 0 10px rgba(255,200,80,0.6),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -2px 3px rgba(0,0,0,0.4);
    cursor: ns-resize;
}

/* ── Refined win highlight on reels (cleaner gold — no stain) ─────────────── */
.slot-theme-dark .slot-cell.slot-win-normal,
.slot-theme-dark .slot-cell.slot-win-big,
.slot-theme-dark .slot-cell.slot-win-jackpot {
    animation: none !important;
    background: transparent !important;
}
.slot-theme-dark .slot-cell.slot-win-normal::before,
.slot-theme-dark .slot-cell.slot-win-big::before,
.slot-theme-dark .slot-cell.slot-win-jackpot::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,220,120,0.85);
    background: radial-gradient(ellipse at center, rgba(255,200,80,0.12) 0%, rgba(255,200,80,0) 65%);
    box-shadow:
        0 0 14px rgba(255,200,80,0.55),
        0 0 30px rgba(255,160,30,0.35),
        inset 0 0 10px rgba(255,220,120,0.25);
    animation: bvCellWinPulse 0.9s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}
.slot-theme-dark .slot-cell.slot-win-jackpot::before {
    border-color: #fff3b0;
    box-shadow:
        0 0 22px rgba(255,230,130,0.85),
        0 0 44px rgba(255,180,40,0.55),
        inset 0 0 14px rgba(255,240,180,0.35);
}
@keyframes bvCellWinPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.04); }
}
.slot-theme-dark .slot-cell.slot-win-normal .slot-symbol-img,
.slot-theme-dark .slot-cell.slot-win-big .slot-symbol-img,
.slot-theme-dark .slot-cell.slot-win-jackpot .slot-symbol-img {
    animation: bvSymbolWinBob 1s ease-in-out infinite !important;
    filter: drop-shadow(0 0 8px rgba(255,200,80,0.65)) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
@keyframes bvSymbolWinBob {
    0%, 100% { transform: translateY(0) scale(1.04); }
    50%      { transform: translateY(-2px) scale(1.1); }
}

/* ── Particle / coin images for jackpot overlay & win banner ──────────────── */
.slot-particle-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255,200,80,0.7));
}
.slot-particle {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.slot-win-coin-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(255,200,80,0.55));
}
.slot-win-coin {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

/* ── Brand Jackpot M rendered same size as the others (bump up) ───────────── */
.info-jackpot-symbols .info-sym-img:nth-child(4),
.info-jackpot-symbols img:nth-child(4) {
    transform: scale(1.22);
    transform-origin: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   BLACK VAULT — FURTHER REFINEMENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Fixed-size "WON" box, always visible so layout never shifts ───────────── */
.bv-result-top {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 150px;
    height: 30px;
    padding: 0 16px !important;
    border-radius: 999px;
    background: linear-gradient(180deg, #130b03 0%, #060300 100%);
    border: 1px solid rgba(240,201,76,0.55);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.8),
        0 0 14px rgba(240,201,76,0.28),
        0 4px 12px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 2px rgba(0,0,0,0.6);
    margin: 0 auto -14px !important;
    align-self: center;
    position: relative;
    z-index: 25;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}
.bv-result-top:empty::before {
    content: 'WON —';
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: color-mix(in srgb, var(--accent-hi) 45%, transparent);
}
.bv-result-top:empty { display: inline-flex !important; }

/* Active states: override shape/size to stay in the fixed box */
.bv-result-top.bv-result.win,
.bv-result-top.bv-result.big-win,
.bv-result-top.bv-result.jackpot {
    flex-direction: row !important;
    padding: 0 16px !important;
    min-width: 150px !important;
    height: 30px !important;
    border-radius: 999px !important;
    gap: 6px;
    animation: bvResultPop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.bv-result-top .bv-win-label {
    font-size: 9.5px !important;
    letter-spacing: 1.5px !important;
    color: #f5d97a !important;
    line-height: 1;
}
.bv-result-top .bv-jackpot-text {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    color: #ffe89a !important;
    line-height: 1;
}
.bv-result-top .bv-win-amount {
    font-size: 13px !important;
    letter-spacing: 0.4px !important;
    color: #fff3b8 !important;
    text-shadow: 0 0 8px rgba(255,215,80,0.6), 0 1px 0 rgba(0,0,0,0.7) !important;
    line-height: 1;
}

/* Keep jackpot row rather than stacked */
.bv-result-top.jackpot {
    border-color: #ffe58a !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.85),
        0 0 22px rgba(255,215,80,0.55),
        0 4px 14px rgba(0,0,0,0.65),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 2px rgba(0,0,0,0.6) !important;
    animation: bvResultPop 0.35s cubic-bezier(0.34,1.56,0.64,1),
               bvJackpotPillPulse 1.6s ease-in-out infinite 0.4s !important;
}
@keyframes bvJackpotPillPulse {
    0%, 100% { box-shadow:
        0 0 0 1px rgba(0,0,0,0.85),
        0 0 22px rgba(255,215,80,0.55),
        0 4px 14px rgba(0,0,0,0.65),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 2px rgba(0,0,0,0.6); }
    50%      { box-shadow:
        0 0 0 1px rgba(0,0,0,0.85),
        0 0 32px rgba(255,220,100,0.9),
        0 4px 14px rgba(0,0,0,0.65),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 2px rgba(0,0,0,0.6); }
}

/* Prefix shown next to the amount */
.bv-result-top .bv-win-label::before { content: 'WON' !important; }
.bv-result-top .bv-win-label { font-size: 0 !important; }
.bv-result-top .bv-win-label::before {
    font-size: 9.5px;
    letter-spacing: 1.5px;
    color: #f5d97a;
    margin-right: 2px;
}

/* ── Cinematic jackpot overlay (fix pink/red) ─────────────────────────────── */
.slot-bigwin-jackpot .slot-bigwin-label {
    color: #fff3b0 !important;
    text-shadow:
        0 0 18px rgba(255,215,80,0.9),
        0 0 36px rgba(255,170,30,0.55),
        0 2px 0 rgba(0,0,0,0.6) !important;
    font-size: 22px !important;
    letter-spacing: 7px !important;
    background: linear-gradient(180deg, #fff6c2 0%, #f0c94c 45%, #8a5e14 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(255,210,80,0.7));
}
.slot-bigwin-jackpot .slot-bigwin-amount {
    color: #fff3b8 !important;
    background: linear-gradient(180deg, #fff6c2 0%, #ffd866 40%, #d19c20 80%, #8a5e14 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
    filter:
        drop-shadow(0 0 18px rgba(255,215,80,0.85))
        drop-shadow(0 0 38px rgba(255,170,30,0.55))
        drop-shadow(0 3px 0 rgba(0,0,0,0.55));
    font-size: 52px !important;
}
.slot-bigwin-mega_win .slot-bigwin-amount,
.slot-bigwin-big_win .slot-bigwin-amount {
    background: linear-gradient(180deg, #fff6c2 0%, #ffd866 45%, #b8831c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter:
        drop-shadow(0 0 14px rgba(255,200,80,0.7))
        drop-shadow(0 2px 0 rgba(0,0,0,0.5));
}

/* ── Bet controls (step buttons + pill): simple, flat, modern ─────────────── */
.bv-bet-row {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px !important;
    margin-top: 4px !important;
}
/* Reset and restyle step buttons */
.bv-step-btn {
    all: unset;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid color-mix(in srgb, var(--accent-hi) 40%, transparent) !important;
    color: #f5d97a !important;
    font-size: 13px !important;
    font-weight: 800;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
    box-shadow: none !important;
    text-shadow: none !important;
}
.bv-step-btn::before, .bv-step-btn::after { content: none !important; display: none !important; }
.bv-step-btn:hover {
    background: rgba(240,201,76,0.12) !important;
    border-color: rgba(240,201,76,0.65) !important;
}
.bv-step-btn:active {
    transform: scale(0.92) !important;
    background: rgba(240,201,76,0.18) !important;
}

/* Clean bet pill — dark glass, gold hairline, mono digits */
.bv-bet-pill {
    all: unset;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 138px;
    max-width: 160px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid color-mix(in srgb, var(--accent-hi) 40%, transparent);
    color: #fff3b8;
    font-family: var(--font-mono, monospace);
    font-size: 17px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 2px 8px rgba(0,0,0,0.5);
    text-shadow: 0 0 6px rgba(255,200,80,0.4);
}
.bv-bet-pill::before, .bv-bet-pill::after { content: none !important; display: none !important; }
.bv-bet-pill.fs-md { font-size: 15px !important; }
.bv-bet-pill.fs-sm { font-size: 13px !important; }
.bv-bet-pill.fs-xs { font-size: 11px !important; }

.bv-bet-label {
    font-size: 8.5px !important;
    letter-spacing: 3px !important;
    color: rgba(240,201,76,0.55) !important;
    margin-top: 0 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

/* ── Spin wheel up ~20px (lift into slot frame) ───────────────────────────── */
.bv-spin-wrap { margin-top: -62px !important; }
@media (max-width: 420px) {
    .bv-spin-wrap { margin-top: -50px !important; }
}
/* Hide inner labels ("WIN!", "JACKPOT!" etc.) inside the fixed box — show just "WON" */
.bv-result-top .bv-jackpot-text { font-size: 0 !important; }
.bv-result-top .bv-jackpot-text::before {
    content: 'JACKPOT';
    font-size: 10px;
    letter-spacing: 1.6px;
    color: #ffe89a;
    margin-right: 4px;
    text-shadow: 0 0 8px rgba(255,215,80,0.7);
}

/* ════════════════════════════════════════════════════════════════════════════
   BLACK VAULT — CALMER CONTROLS + CLEANER WIN BOX
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Smaller, thinner WON frame — just "+X $FYM" centered ─────────────────── */
.bv-result-top,
.bv-result-top.bv-result.win,
.bv-result-top.bv-result.big-win,
.bv-result-top.bv-result.jackpot {
    min-width: 110px !important;
    height: 24px !important;
    padding: 0 12px !important;
    border-width: 1px !important;
    border-color: color-mix(in srgb, var(--accent-hi) 45%, transparent) !important;
    border-radius: 6px !important;
    gap: 0 !important;
    margin: 0 auto -12px !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.55),
        0 2px 8px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.bv-result-top:empty::before {
    content: '—';
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(240,201,76,0.35);
}

/* Hide "WON"/"JACKPOT" labels entirely — only show the amount */
.bv-result-top .bv-win-label,
.bv-result-top .bv-win-label::before,
.bv-result-top .bv-jackpot-text,
.bv-result-top .bv-jackpot-text::before {
    display: none !important;
    content: none !important;
    font-size: 0 !important;
    margin: 0 !important;
}

.bv-result-top .bv-win-amount {
    font-family: var(--font-mono, monospace) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: #fff3b8 !important;
    text-shadow: 0 0 6px rgba(255,200,80,0.45) !important;
    margin: 0 auto !important;
}
.bv-result-top.jackpot .bv-win-amount {
    color: #fff8d0 !important;
    text-shadow:
        0 0 8px rgba(255,215,80,0.8),
        0 0 16px rgba(255,170,30,0.4) !important;
}
.bv-result-top.jackpot {
    border-color: rgba(255,215,80,0.7) !important;
    animation: bvResultPop 0.35s cubic-bezier(0.34,1.56,0.64,1),
               bvWonJpPulse 1.8s ease-in-out infinite 0.4s !important;
}
@keyframes bvWonJpPulse {
    0%, 100% { box-shadow:
        0 0 0 1px rgba(0,0,0,0.55),
        0 0 10px rgba(255,215,80,0.35),
        0 2px 8px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.06); }
    50%      { box-shadow:
        0 0 0 1px rgba(0,0,0,0.55),
        0 0 18px rgba(255,215,80,0.65),
        0 2px 8px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.1); }
}

/* ── Icon stack (turbo / auto / history) — flat + minimal, matches bet btns ─ */
.bv-icon-stack { gap: 10px !important; }
.bv-icon-btn {
    all: unset;
    position: relative;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(240,201,76,0.35) !important;
    color: #f5d97a !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    box-shadow: none !important;
    text-shadow: none !important;
}
.bv-icon-btn::before, .bv-icon-btn::after { content: none !important; display: none !important; }
.bv-icon-btn:hover {
    background: rgba(240,201,76,0.12) !important;
    border-color: color-mix(in srgb, var(--accent-hi) 60%, transparent) !important;
}
.bv-icon-btn:active { transform: scale(0.92) !important; }
.bv-icon-btn.active {
    background: rgba(240,201,76,0.18) !important;
    border-color: rgba(240,201,76,0.85) !important;
    box-shadow: 0 0 12px rgba(240,201,76,0.35) !important;
}
.bv-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
    color: #f5d97a !important;
    fill: none;
    stroke: currentColor;
    filter: none !important;
}
.bv-icon-btn svg path[fill="currentColor"] { fill: currentColor; stroke: none; }
.bv-icon-btn.active svg { color: #fff3b8 !important; filter: drop-shadow(0 0 4px rgba(255,215,80,0.6)) !important; }

/* ── Lines slider — minimal, no loud frames ───────────────────────────────── */
.bv-lines-slider { gap: 8px !important; padding: 0 !important; }
.bv-lines-readout {
    all: unset;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 2px;
    padding: 5px 10px !important;
    min-width: 44px;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(240,201,76,0.35) !important;
    box-shadow: none !important;
}
.bv-lines-readout > span {
    font-family: var(--font-mono, monospace) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff3b8 !important;
    text-shadow: 0 0 5px rgba(255,200,80,0.35) !important;
    letter-spacing: 0.3px;
}
.bv-lines-readout > small {
    font-size: 6.5px !important;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: color-mix(in srgb, var(--accent-hi) 50%, transparent) !important;
    text-transform: uppercase;
}
.bv-lines-track {
    width: 6px !important;
    height: 110px !important;
    border-radius: 3px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(240,201,76,0.25) !important;
    box-shadow: none !important;
    overflow: visible;
}
.bv-lines-track-fill {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, rgba(255,220,120,0.7), rgba(240,180,40,0.5)) !important;
    box-shadow: 0 0 6px rgba(255,200,80,0.35) !important;
}
.bv-lines-range { width: 110px !important; height: 24px !important; }
.bv-lines-range::-webkit-slider-thumb {
    width: 18px !important;
    height: 14px !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #fff3b0, #f0c94c 50%, #a07420) !important;
    border: 1px solid #050200 !important;
    box-shadow: 0 0 6px rgba(255,200,80,0.55), inset 0 1px 0 rgba(255,255,255,0.45) !important;
    margin-top: 5px !important;
}
.bv-lines-range::-moz-range-thumb {
    width: 16px !important;
    height: 14px !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #fff3b0, #f0c94c 50%, #a07420) !important;
    border: 1px solid #050200 !important;
    box-shadow: 0 0 6px rgba(255,200,80,0.55), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* ── Bet pill: calmer — tighter and quieter ───────────────────────────────── */
.bv-bet-pill {
    min-width: 124px !important;
    max-width: 150px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    border-color: rgba(240,201,76,0.35) !important;
}
.bv-step-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    border-color: rgba(240,201,76,0.35) !important;
}
.bv-bet-row { gap: 10px !important; }

/* ── Spin wheel: another +10px up ─────────────────────────────────────────── */
.bv-spin-wrap { margin-top: -72px !important; }
@media (max-width: 420px) {
    .bv-spin-wrap { margin-top: -60px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BLACK VAULT LOADER V3 — cinematic vault stage + info stage
   ════════════════════════════════════════════════════════════════════════════ */

/* Hide v2 loader markup entirely (safety — v2 rules neutralised below) */
.bv-loader-v3 .bv-loader-glow,
.bv-loader-v3 .bv-loader-content { display: none !important; }

.bv-loader-v3 {
    position: absolute;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at 50% 30%, #1a1108 0%, #0a0604 55%, #020100 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.5s ease;
}
.bv-loader-v3.hiding { opacity: 0; }

/* ── Shared cinematic backdrop ───────────────────────────────────────────── */
.bv-loader-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.bv-loader-room {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(60,40,15,0.55) 0%, rgba(20,12,4,0.8) 45%, rgba(0,0,0,1) 85%),
        repeating-linear-gradient(90deg, rgba(255,200,80,0.02) 0 40px, rgba(0,0,0,0) 40px 80px);
}
.bv-loader-spot {
    position: absolute;
    top: -10%; left: 50%;
    width: 700px; height: 700px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 0%, rgba(255,200,80,0.18), rgba(255,200,80,0.04) 40%, transparent 70%);
    filter: blur(14px);
    animation: bvSpotPulse 4.5s ease-in-out infinite;
}
@keyframes bvSpotPulse {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}
.bv-loader-floor {
    position: absolute;
    bottom: -4%; left: 50%;
    width: 120%; height: 180px;
    transform: translateX(-50%) perspective(600px) rotateX(62deg);
    transform-origin: top;
    background:
        repeating-linear-gradient(90deg, rgba(255,200,80,0.08) 0 2px, transparent 2px 70px),
        linear-gradient(180deg, rgba(40,26,10,0.8) 0%, rgba(0,0,0,0.95) 80%);
    opacity: 0.85;
}

/* ── Stage switching ─────────────────────────────────────────────────────── */
.bv-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    padding: 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.45s ease, transform 0.55s ease;
}
.bv-loader-v3 .bv-stage-loader { opacity: 1; }
.bv-loader-v3 .bv-stage-info {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, calc(-50% + 16px));
    opacity: 0;
    pointer-events: none;
}
.bv-loader-v3.show-info .bv-stage-loader {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
    pointer-events: none;
}
.bv-loader-v3.show-info .bv-stage-info {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* ═══════════════════ STAGE 1 — vault door ═══════════════════ */
.bv-vault-door-scene {
    position: relative;
    width: 240px;
    height: 240px;
    filter: drop-shadow(0 18px 35px rgba(0,0,0,0.9)) drop-shadow(0 0 40px rgba(255,170,40,0.22));
    animation: bvDoorFloat 4.5s ease-in-out infinite;
}
@keyframes bvDoorFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.bv-vault-door-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 35%, #1a1408 0%, #0a0603 60%, #050200 100%);
    box-shadow:
        0 0 0 3px #050200,
        0 0 0 5px #8c6a22,
        0 0 0 8px #050200,
        0 0 0 10px rgba(255,210,110,0.32),
        inset 0 6px 14px rgba(0,0,0,0.85),
        inset 0 -3px 8px rgba(255,210,110,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bv-vault-door-body {
    position: relative;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,220,140,0.18) 0%, transparent 45%),
        radial-gradient(circle at 50% 55%, #2a1d08 0%, #120a02 70%, #070300 100%);
    box-shadow:
        inset 0 0 0 2px rgba(255,210,110,0.35),
        inset 0 4px 12px rgba(0,0,0,0.85),
        inset 0 -4px 12px rgba(255,200,80,0.06);
}
/* Rivet ring */
.bv-vault-door-rivets span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f5d97a 0%, #a97d18 55%, #3a2604 100%);
    box-shadow:
        0 0 0 1px #050200,
        inset 0 1px 0 rgba(255,255,220,0.45),
        inset 0 -1px 1px rgba(0,0,0,0.7);
    transform: rotate(var(--a, 0deg)) translateY(-92px);
}
/* Spinning combination dial */
.bv-vault-door-dial {
    position: absolute;
    top: 50%; left: 50%;
    width: 120px; height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a2708 0%, #1a0f02 70%, #080400 100%);
    box-shadow:
        0 0 0 2px #050200,
        0 0 0 3.5px rgba(255,210,110,0.55),
        inset 0 3px 8px rgba(0,0,0,0.85),
        inset 0 -3px 10px rgba(255,200,80,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bv-vault-door-dial-ring {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,210,110,0.5);
    animation: bvDoorDialSpin 4s linear infinite;
}
.bv-vault-door-dial-marks {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255,210,110,0.55) 0deg 2deg, transparent 2deg 30deg,
        rgba(255,210,110,0.55) 30deg 32deg, transparent 32deg 60deg,
        rgba(255,210,110,0.55) 60deg 62deg, transparent 62deg 90deg,
        rgba(255,210,110,0.55) 90deg 92deg, transparent 92deg 120deg,
        rgba(255,210,110,0.55) 120deg 122deg, transparent 122deg 150deg,
        rgba(255,210,110,0.55) 150deg 152deg, transparent 152deg 180deg,
        rgba(255,210,110,0.55) 180deg 182deg, transparent 182deg 210deg,
        rgba(255,210,110,0.55) 210deg 212deg, transparent 212deg 240deg,
        rgba(255,210,110,0.55) 240deg 242deg, transparent 242deg 270deg,
        rgba(255,210,110,0.55) 270deg 272deg, transparent 272deg 300deg,
        rgba(255,210,110,0.55) 300deg 302deg, transparent 302deg 330deg,
        rgba(255,210,110,0.55) 330deg 332deg, transparent 332deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 48%, black 50%, black 52%, transparent 54%);
            mask: radial-gradient(circle, transparent 48%, black 50%, black 52%, transparent 54%);
    animation: bvDoorDialSpin 6s linear infinite reverse;
}
@keyframes bvDoorDialSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.bv-vault-door-logo {
    position: relative;
    z-index: 2;
    width: 78px;
    height: 78px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.9)) drop-shadow(0 0 18px rgba(255,200,80,0.5));
}
/* Massive turning handle (spokes) */
.bv-vault-door-handle {
    position: absolute;
    top: 50%; left: 50%;
    width: 180px; height: 180px;
    margin: -90px 0 0 -90px;
    pointer-events: none;
    animation: bvDoorHandleSpin 12s linear infinite;
}
.bv-vault-door-handle span {
    position: absolute;
    top: 50%; left: 50%;
    width: 170px;
    height: 6px;
    margin: -3px 0 0 -85px;
    border-radius: 3px;
    background: linear-gradient(180deg, #f5d97a 0%, #c79320 50%, #5a3a08 100%);
    box-shadow: 0 0 0 1px #050200, 0 1px 0 rgba(255,255,220,0.3) inset, 0 2px 4px rgba(0,0,0,0.7);
}
.bv-vault-door-handle span:nth-child(1) { transform: rotate(0deg); }
.bv-vault-door-handle span:nth-child(2) { transform: rotate(45deg); }
.bv-vault-door-handle span:nth-child(3) { transform: rotate(90deg); }
.bv-vault-door-handle span:nth-child(4) { transform: rotate(135deg); }
.bv-vault-door-handle i {
    position: absolute;
    top: 50%; left: 50%;
    width: 26px; height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe58a 0%, #c79320 55%, #3a2604 100%);
    box-shadow: 0 0 0 2px #050200, 0 0 10px rgba(255,200,80,0.5), inset 0 1px 2px rgba(255,255,220,0.6);
}
@keyframes bvDoorHandleSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* Hinges on the left side */
.bv-vault-door-hinge {
    position: absolute;
    left: -10px;
    width: 22px;
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(90deg, #5a3a08 0%, #c79320 40%, #f5d97a 60%, #5a3a08 100%);
    box-shadow: 0 0 0 1px #050200, inset 0 2px 0 rgba(255,255,220,0.3), 0 2px 4px rgba(0,0,0,0.7);
}
.bv-vault-door-hinge-top { top: 28px; }
.bv-vault-door-hinge-bot { bottom: 28px; }

/* Progress bar under the door */
.bv-loader-progress {
    margin-top: 28px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.bv-loader-progress-bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,210,110,0.25);
    overflow: hidden;
}
.bv-loader-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(255,220,120,0.9), rgba(255,180,40,0.9));
    box-shadow: 0 0 8px rgba(255,200,80,0.55);
    transition: width 0.25s ease-out;
}
.bv-loader-progress-text {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 4px;
    color: rgba(255,210,110,0.75);
    font-weight: 700;
    text-transform: uppercase;
    animation: bvLoaderStatusBlink 1.4s ease-in-out infinite;
}

/* ═══════════════════ STAGE 2 — info page ═══════════════════ */
.bv-info-logo {
    width: 180px;
    max-width: 70%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.85)) drop-shadow(0 0 32px rgba(255,200,80,0.35));
    margin-bottom: 4px;
    animation: bvInfoFadeUp 0.6s ease-out 0.1s backwards;
}
.bv-info-tagline {
    font-family: var(--font-display);
    font-size: 9.5px;
    letter-spacing: 4px;
    color: rgba(255,210,110,0.65);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 18px;
    animation: bvInfoFadeUp 0.6s ease-out 0.2s backwards;
}
.bv-info-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 18px;
}
.bv-info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: linear-gradient(135deg, rgba(255,200,80,0.06) 0%, rgba(255,200,80,0.02) 100%);
    border: 1px solid rgba(255,210,110,0.25);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(10px);
    animation: bvInfoFadeUp 0.5s ease-out forwards;
}
.bv-info-card:nth-child(1) { animation-delay: 0.25s; }
.bv-info-card:nth-child(2) { animation-delay: 0.35s; }
.bv-info-card:nth-child(3) { animation-delay: 0.45s; }
.bv-info-card:nth-child(4) { animation-delay: 0.55s; }
@keyframes bvInfoFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bv-info-card-icon {
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #f5d97a;
    background: rgba(255,200,80,0.1);
    border: 1px solid rgba(255,210,110,0.35);
    border-radius: 8px;
    flex-shrink: 0;
}
.bv-info-card-icon img {
    width: 22px; height: 22px;
    object-fit: contain;
}
.bv-info-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bv-info-card-text b {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #f5d97a;
    text-transform: uppercase;
}
.bv-info-card-text span {
    font-size: 10.5px;
    color: rgba(255,255,255,0.72);
    line-height: 1.35;
}
.bv-info-card-text em {
    color: #ffe89a;
    font-style: normal;
    font-weight: 700;
}

/* "Don't show again" */
.bv-info-skip {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 14px;
    opacity: 0;
    animation: bvInfoFadeUp 0.5s ease-out 0.65s forwards;
}
.bv-info-skip input { display: none; }
.bv-info-skip-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,210,110,0.5);
    position: relative;
    transition: background 0.15s;
}
.bv-info-skip input:checked + .bv-info-skip-box {
    background: linear-gradient(180deg, #ffe58a, #c79320);
    border-color: #fff3b0;
    box-shadow: 0 0 10px rgba(255,200,80,0.55);
}
.bv-info-skip input:checked + .bv-info-skip-box::after {
    content: '';
    position: absolute;
    top: 2px; left: 5px;
    width: 4px; height: 8px;
    border: solid #1a0f02;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bv-info-skip-label {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.65);
}

/* Continue button */
.bv-info-continue {
    width: 100%;
    padding: 14px 22px;
    border-radius: 11px;
    border: 1.5px solid rgba(255,220,120,0.75);
    background: linear-gradient(180deg,
        rgba(255,210,110,0.22) 0%,
        rgba(255,170,40,0.15) 50%,
        rgba(120,70,10,0.25) 100%);
    color: #fff3b8;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow:
        0 0 22px rgba(255,200,80,0.3),
        0 6px 18px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -2px 4px rgba(0,0,0,0.45);
    transition: transform 0.12s, box-shadow 0.18s, filter 0.18s;
    opacity: 0;
    animation: bvInfoFadeUp 0.55s ease-out 0.75s forwards,
               bvInfoContinuePulse 2.4s ease-in-out infinite 1.2s;
    text-shadow: 0 0 12px rgba(255,200,80,0.5);
}
.bv-info-continue:hover {
    filter: brightness(1.12);
    box-shadow:
        0 0 30px rgba(255,210,110,0.5),
        0 8px 20px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 4px rgba(0,0,0,0.45);
}
.bv-info-continue:active { transform: scale(0.98); }
.bv-info-continue-arrow {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s;
}
.bv-info-continue:hover .bv-info-continue-arrow { transform: translateX(3px); }
@keyframes bvInfoContinuePulse {
    0%, 100% { box-shadow:
        0 0 22px rgba(255,200,80,0.3),
        0 6px 18px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -2px 4px rgba(0,0,0,0.45); }
    50%      { box-shadow:
        0 0 34px rgba(255,210,110,0.55),
        0 6px 18px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 4px rgba(0,0,0,0.45); }
}

/* ════════════════════════════════════════════════════════════════════════════
   FINAL CONTROL TWEAKS — spin 10% smaller, icon stack lower, bet row higher
   ════════════════════════════════════════════════════════════════════════════ */

/* Spin wheel + button scaled down 10% (210→189, 198→178) */
.bv-spin-wrap {
    width: 189px !important;
    height: 189px !important;
    margin-top: -82px !important;
}
.bv-spin-btn {
    width: 178px !important;
    height: 178px !important;
}
@media (max-width: 420px) {
    .bv-spin-wrap { width: 162px !important; height: 162px !important; margin-top: -70px !important; }
    .bv-spin-btn  { width: 150px !important; height: 150px !important; }
}

/* Move icon stack a touch lower, nudge bet row higher */
.bv-icon-stack  { margin-top: 22px; }
.bv-lines-slider { margin-top: 22px; }
.bv-bet-row     { margin-top: -4px !important; }

/* ════════════════════════════════════════════════════════════════════════════
   FINAL NUDGES — bet row up, win box lower+centered, M size fix
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Bet row: move up + shorter pill ──────────────────────────────────────── */
.bv-bet-row { margin-top: -18px !important; gap: 8px !important; }
.bv-bet-pill {
    min-width: 100px !important;
    max-width: 120px !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
}
.bv-bet-pill.fs-md { font-size: 12px !important; }
.bv-bet-pill.fs-sm { font-size: 11px !important; }
.bv-bet-pill.fs-xs { font-size: 10px !important; }
.bv-step-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
}
.bv-bet-label {
    font-size: 8px !important;
    letter-spacing: 2.5px !important;
    margin-top: 0 !important;
}

/* ── Win box: lower + truly centered (vertical too) ───────────────────────── */
.bv-result-top,
.bv-result-top.bv-result.win,
.bv-result-top.bv-result.big-win,
.bv-result-top.bv-result.jackpot {
    margin: 12px auto 2px !important;   /* 12px down instead of -12 up */
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    height: 26px !important;
}
.bv-result-top .bv-win-amount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(0.5px) !important; /* optical centering */
}

/* Shrink the amount font when the string gets long */
.bv-result-top.amt-md .bv-win-amount { font-size: 11px !important; }
.bv-result-top.amt-sm .bv-win-amount { font-size: 10px !important; letter-spacing: 0 !important; }
.bv-result-top.amt-xs .bv-win-amount { font-size: 9px  !important; letter-spacing: -0.2px !important; }

/* ── Icon stack: match lines-readout vertical position ────────────────────── */
.bv-icon-stack { margin-top: 0 !important; align-self: flex-start; padding-top: 0; }
.bv-lines-slider { margin-top: 0 !important; align-self: flex-start; padding-top: 0; }
.bv-control-row { align-items: flex-start !important; }

/* ── Brand Jackpot symbols: make $ F Y M hit the same visual line ─────────── */
/* Kill the global float animation that fought our scale override */
.info-jackpot-symbols .info-sym-img {
    animation: none !important;
    width: 46px !important;
    height: 46px !important;
    object-fit: contain;
    display: block;
    transform-origin: center center;
}
/* Per-letter optical calibration (based on the transparent padding inside each PNG) */
.info-jackpot-symbols .info-sym-img:nth-child(1),  /* $ */
.info-jackpot-symbols img:nth-child(1) {
    transform: scale(1.0);
}
.info-jackpot-symbols .info-sym-img:nth-child(2),  /* F */
.info-jackpot-symbols img:nth-child(2) {
    transform: scale(1.0);
}
.info-jackpot-symbols .info-sym-img:nth-child(3),  /* Y */
.info-jackpot-symbols img:nth-child(3) {
    transform: scale(1.0);
}
.info-jackpot-symbols .info-sym-img:nth-child(4),  /* M — a touch larger to match the rest */
.info-jackpot-symbols img:nth-child(4) {
    transform: scale(1.22);
}
/* Subtle pulse using filter instead of transform so it doesn't reset scale */
.info-jackpot-symbols .info-sym-img {
    animation: bvJackpotSymPulse 2.4s ease-in-out infinite !important;
}
.info-jackpot-symbols .info-sym-img:nth-child(2) { animation-delay: 0.2s; }
.info-jackpot-symbols .info-sym-img:nth-child(3) { animation-delay: 0.4s; }
.info-jackpot-symbols .info-sym-img:nth-child(4) { animation-delay: 0.6s; }
@keyframes bvJackpotSymPulse {
    0%, 100% { filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--accent-hi) 45%, transparent)); }
    50%      { filter: drop-shadow(0 2px 12px rgba(255,215,80,0.85)); }
}

/* ════════════════════════════════════════════════════════════════════════════
   BLACK VAULT — TIGHT FULL-VIEWPORT LAYOUT (no scroll)
   Layout reference (screenshot):
     [BANNER]
     [WON pill]              ← own row, above slot
     [SLOT REELS]            ← stays compact
     [SPIN WHEEL overlapping top of controls panel]
       ↳ left:  vertical lines slider
       ↳ right: 3 icon buttons
     [BET PILL row below the wheel]
   ════════════════════════════════════════════════════════════════════════════ */

/* Make the screen fill the viewport without scrolling */
#black-vault-screen {
    padding-top: 2px !important;
    padding-bottom: 4px !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Tighten the banner area */
#black-vault-screen .game-header.game-header-logo {
    margin-top: -14px !important;
    margin-bottom: -78px !important;
    min-height: 118px !important;
    flex-shrink: 0;
}
#black-vault-screen .game-header-logo-img {
    max-height: 132px !important;
}

/* Wrap that holds the WON pill + slot machine */
.bv-machine-wrap {
    padding-top: 14px !important;
    flex-shrink: 0;
}

/* WON pill — its own row above the slot, with breathing room */
.bv-result-top,
.bv-result-top.bv-result.win,
.bv-result-top.bv-result.big-win,
.bv-result-top.bv-result.jackpot {
    margin: 0 auto 8px !important;
    height: 26px !important;
}

/* Compact slot machine */
#bv-machine.adv-slot-machine {
    margin-top: 0 !important;
    padding: 10px 10px 14px !important;
}

/* The whole controls strip — sits right under the slot */
.bv-controls {
    padding-top: 0 !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.bv-control-layout {
    width: 100%;
    gap: 4px !important;
    padding-top: 0 !important;
}
.bv-control-row {
    align-items: flex-start !important;
    width: 100%;
    gap: 4px !important;
}

/* Spin wheel — large, centered, overlapping the slot bottom edge */
.bv-spin-wrap {
    width: 200px !important;
    height: 200px !important;
    margin-top: -90px !important;
    z-index: 10;
}
.bv-spin-btn {
    width: 188px !important;
    height: 188px !important;
}

/* Lines (left) and icons (right) start at the top of the controls row */
.bv-lines-slider,
.bv-icon-stack {
    margin-top: 12px !important;
    align-self: flex-start !important;
    padding: 0 !important;
}

/* Compact lines control */
.bv-lines-track  { height: 96px !important; }
.bv-lines-range  { width: 96px !important; }
.bv-lines-readout { padding: 4px 9px !important; min-width: 40px; }
.bv-lines-readout > span { font-size: 13px !important; }
.bv-lines-readout > small { font-size: 6px !important; }

/* Compact icon stack */
.bv-icon-stack { gap: 8px !important; }
.bv-icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
}
.bv-icon-btn svg { width: 16px !important; height: 16px !important; }

/* Bet row — directly below the spin wheel, very tight */
.bv-bet-row {
    margin-top: -14px !important;
    gap: 8px !important;
    position: relative;
    z-index: 11;
}
.bv-bet-pill {
    min-width: 92px !important;
    max-width: 110px !important;
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}
.bv-step-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
}
.bv-bet-label {
    font-size: 7.5px !important;
    margin-top: 0 !important;
}

/* Scale slot cells slightly down so the whole machine fits comfortably */
#bv-machine .adv-slot-reels {
    --slot-cell-w: 60px !important;
    --slot-cell-h: 60px !important;
}
#bv-machine .slot-cell {
    width: 60px !important;
    height: 60px !important;
}

/* Narrow phones */
@media (max-width: 420px) {
    .bv-spin-wrap { width: 178px !important; height: 178px !important; margin-top: -78px !important; }
    .bv-spin-btn  { width: 168px !important; height: 168px !important; }
    .bv-lines-track { height: 84px !important; }
    .bv-lines-range { width: 84px !important; }
    #bv-machine .adv-slot-reels { --slot-cell-w: 54px !important; --slot-cell-h: 54px !important; }
    #bv-machine .slot-cell { width: 54px !important; height: 54px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FINAL POSITIONING — smaller wheel lower, WON pill aligned to slot top edge
   ════════════════════════════════════════════════════════════════════════════ */

/* WON pill: absolute, top of pill = top of slot frame */
.bv-machine-wrap { position: relative; padding-top: 0 !important; }
.bv-result-top,
.bv-result-top.bv-result.win,
.bv-result-top.bv-result.big-win,
.bv-result-top.bv-result.jackpot {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 30 !important;
}
/* When showing the pop animation, keep the X-centering transform */
.bv-result-top.bv-result.win,
.bv-result-top.bv-result.big-win,
.bv-result-top.bv-result.jackpot {
    animation: bvResultPopCentered 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.bv-result-top.jackpot {
    animation: bvResultPopCentered 0.35s cubic-bezier(0.34,1.56,0.64,1),
               bvWonJpPulse 1.8s ease-in-out infinite 0.4s !important;
}
@keyframes bvResultPopCentered {
    0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.9); }
    60%  { opacity: 1; transform: translate(-50%, -1px) scale(1.04); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Spin wheel: 20% smaller (200→160) and lifted lower into the controls area */
.bv-spin-wrap {
    width: 160px !important;
    height: 160px !important;
    margin-top: -52px !important;
}
.bv-spin-btn {
    width: 150px !important;
    height: 150px !important;
}
@media (max-width: 420px) {
    .bv-spin-wrap { width: 142px !important; height: 142px !important; margin-top: -42px !important; }
    .bv-spin-btn  { width: 134px !important; height: 134px !important; }
}

/* Re-center bet pill under the smaller wheel */
.bv-bet-row { margin-top: -6px !important; }

/* ════════════════════════════════════════════════════════════════════════════
   Pull slot + controls up so slot top sits right under the banner
   (banner stays as a layered overlay above)
   ════════════════════════════════════════════════════════════════════════════ */

#black-vault-screen .game-header.game-header-logo {
    margin-bottom: -110px !important;
    z-index: 20 !important;
    pointer-events: none;
}
#black-vault-screen .game-header.game-header-logo .back-link,
#black-vault-screen .game-header.game-header-logo .info-link {
    pointer-events: auto;
}
.bv-machine-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
    z-index: 1;
}
#bv-machine.adv-slot-machine { margin-top: 0 !important; }

/* Push slot + controls 20px lower (banner stays put) */
.bv-machine-wrap { margin-top: 20px !important; }

/* Push slot + controls a further 30px down (banner stays put) */
.bv-machine-wrap { margin-top: 50px !important; }

/* +20px more */
.bv-machine-wrap { margin-top: 70px !important; }

/* Hide WON pill entirely until a result is rendered */
.bv-result-top:empty { display: none !important; }
.bv-result-top:empty::before { content: none !important; }

/* Bet row: 40px up */
.bv-bet-row { margin-top: -46px !important; }

.bv-bet-row { margin-top: -36px !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Bug fix: only flex when active (otherwise BV leaks onto other screens)
   ────────────────────────────────────────────────────────────────────────── */
#black-vault-screen { display: none !important; min-height: 0 !important; }
#black-vault-screen.active {
    display: flex !important;
    flex-direction: column;
    min-height: 100vh;
}
/* Background FX should also only render when BV is the active screen */
#black-vault-screen:not(.active) .bv-bg-fx { display: none !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Align lines slider (left) and icon stack (right) with the slot's outer
   frame. Constrain the control row to the slot width and pin children to
   each edge.
   ────────────────────────────────────────────────────────────────────────── */
.bv-control-row {
    max-width: 360px;
    margin: 0 auto;
    grid-template-columns: auto 1fr auto !important;
    justify-items: stretch !important;
    padding: 0 6px;
}
.bv-lines-slider { justify-self: start !important; }
.bv-icon-stack   { justify-self: end !important; }
@media (max-width: 420px) {
    .bv-control-row { max-width: 320px; padding: 0 4px; }
}

/* Loader must cover the full viewport, not just the parent screen
   (parent uses flex/min-height which clipped the bottom ~25%) */
.bv-loader-v3 {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw;
    height: 100vh;
}

/* Shift loader stages upward so the Continue button is always visible */
.bv-loader-v3 {
    align-items: flex-start !important;
    padding-top: 6vh;
}
.bv-loader-v3 .bv-stage-info {
    top: 6vh !important;
    transform: translate(-50%, 0) !important;
}
.bv-loader-v3.show-info .bv-stage-info {
    transform: translate(-50%, 0) !important;
}

/* ═══════════════════════════════════════════════════════════════
   P0 DESIGN SYSTEM SWEEP — unified tokens + component kit
   Scoped to NOT affect Black Vault (BV uses heavy !important).

   beads-63d.2 — Originally this block declared its `--fs-*` /
   `--ease-out` / `--dur-*` variables in :root, but those names
   are UN-prefixed and silently overrode the global motion tokens
   defined in theme.css:53 (theme.css's `--ease-out:
   cubic-bezier(0.16,1,0.3,1)` was being shadowed by this block's
   `cubic-bezier(.2,.8,.2,1)` for every element on the page). Now
   split into two:
     • --fym-* casino palette → still :root (prefixed, no collision)
     • un-prefixed --fs-* / --ease-out / --dur-*  → scoped to any
       element whose class contains "fym-". Only the component kit
       sees them; theme.css's globals remain authoritative for the
       rest of the casino.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Casino palette — all --fym-* prefixed, safe at :root */
    --fym-bg:         #0a0b10;
    --fym-surface:    #14161f;
    --fym-surface-2:  #1b1e2a;
    --fym-border:     #262a38;
    --fym-text:       #e8ecf4;
    --fym-text-dim:   #8a91a6;
    --fym-gold:       #d4af37;
    --fym-gold-hi:    #f4d66b;
    --fym-gold-lo:    #8a6f1f;
    --fym-accent:     #2dd4a4;
    --fym-danger:     #ff5566;
    --fym-warn:       #ffb020;
}

/* Un-prefixed scale + motion — scoped to .fym-* component-kit
   classes only so they don't leak to global. Attribute-substring
   matcher [class*="fym-"] catches every .fym-card / .fym-pill /
   .fym-btn-* element below. Variable inheritance from the root
   keeps them available inside any descendant of those elements. */
[class*="fym-"] {
    /* Type scale */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 20px;
    --fs-xl: 28px;
    --fs-2xl: 40px;

    /* Motion */
    --ease-out: cubic-bezier(.2,.8,.2,1);
    --dur-fast: 150ms;
    --dur-base: 200ms;
}

/* Shared component kit (opt-in via class — won't touch existing BV) */
.fym-card {
    background: linear-gradient(180deg, var(--fym-surface-2), var(--fym-surface));
    border: 1px solid var(--fym-border);
    border-radius: 14px;
    padding: 14px 16px;
    color: var(--fym-text);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.fym-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--fym-surface-2);
    border: 1px solid var(--fym-border);
    font-size: var(--fs-sm);
    color: var(--fym-text);
}
.fym-pill.gold {
    background: linear-gradient(180deg, rgba(244,214,107,0.12), rgba(138,111,31,0.08));
    border-color: rgba(212,175,55,0.45);
    color: var(--fym-gold-hi);
}
.fym-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    min-height: 44px;
    border: 1px solid rgba(212,175,55,0.6);
    border-radius: 12px;
    background: linear-gradient(180deg, #f4d66b 0%, #d4af37 55%, #8a6f1f 100%);
    color: #1a1305;
    font-weight: 700;
    font-size: var(--fs-md);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    box-shadow: 0 4px 14px rgba(212,175,55,0.25);
}
.fym-btn-primary:active { transform: scale(0.96); }
.fym-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    min-height: 44px;
    border: 1px solid var(--fym-border);
    border-radius: 12px;
    background: var(--fym-surface);
    color: var(--fym-text);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.fym-btn-ghost:hover { border-color: var(--fym-gold); }
.fym-btn-ghost:active { transform: scale(0.96); }

/* Category accent bars for lobby tiles (opt-in) */
.fym-cat-slots   { box-shadow: inset 3px 0 0 var(--fym-gold); }
.fym-cat-table   { box-shadow: inset 3px 0 0 var(--fym-accent); }
.fym-cat-instant { box-shadow: inset 3px 0 0 #8b5cf6; }

/* Badges */
.fym-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fym-badge.new { background: var(--fym-accent); color: #012018; }
.fym-badge.hot { background: var(--fym-danger); color: #fff; }
.fym-badge.jackpot {
    background: linear-gradient(180deg, var(--fym-gold-hi), var(--fym-gold));
    color: #1a1305;
}

/* Podium for leaderboard (opt-in) */
.fym-podium {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 10px;
    align-items: end;
    padding: 16px 12px;
}
.fym-podium-slot {
    text-align: center;
    padding: 14px 8px;
    border-radius: 12px;
    background: var(--fym-surface);
    border: 1px solid var(--fym-border);
}
.fym-podium-slot.p1 {
    background: linear-gradient(180deg, rgba(244,214,107,0.18), rgba(138,111,31,0.1));
    border-color: rgba(212,175,55,0.6);
    transform: translateY(-8px);
}
.fym-podium-slot.p2 { border-color: #c0c0c0aa; }
.fym-podium-slot.p3 { border-color: #cd7f32aa; }

/* Universal tap feedback */
button, .btn, [role="button"] {
    transition: transform var(--dur-fast) var(--ease-out);
}
button:active, .btn:active, [role="button"]:active {
    transform: scale(0.97);
}

/* Bigger tap targets everywhere */
button, .btn { min-height: 40px; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .slot-particle, .slot-particle-img { display: none !important; }
}

/* Balance count-up pop (if not already defined) */
.balance-pop {
    animation: fymBalancePop 500ms var(--ease-out);
}
@keyframes fymBalancePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); color: var(--fym-gold-hi); }
    100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   P1 VISUAL RETHEME — Home / Lobby / Leaderboard / Profile
   Overrides existing classes. Black Vault is not affected
   (BV uses !important everywhere).
   ═══════════════════════════════════════════════════════════════ */

/* ── Header balance: bigger gold pill ─────────────────────────── */
#header .balance-display {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(244,214,107,0.18), rgba(138,111,31,0.10)) !important;
    border: 1px solid rgba(212,175,55,0.55) !important;
    color: var(--fym-gold-hi) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset,
                0 6px 18px rgba(212,175,55,0.18);
    position: relative;
    overflow: hidden;
}
#header .balance-display::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(244,214,107,0.22) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: fymShimmer 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes fymShimmer {
    0%, 100% { transform: translateX(-100%); }
    50%      { transform: translateX(100%); }
}

/* ── Home: Progression card ───────────────────────────────────── */
.home-prog-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    margin: 10px 14px;
    background: linear-gradient(135deg, #1b1e2a 0%, #14161f 70%);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.home-prog-card:active { transform: scale(0.98); }
.home-prog-rank-badge {
    --chip-color: #f5a623;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 60%),
                linear-gradient(135deg, var(--chip-color), rgba(0,0,0,0.3));
    border: 2px solid var(--chip-color);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    box-shadow: 0 0 14px color-mix(in srgb, var(--chip-color) 45%, transparent);
    flex-shrink: 0;
}
.home-prog-main { flex: 1; min-width: 0; }
.home-prog-top {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 6px;
}
.home-prog-level {
    color: var(--fym-gold-hi); font-weight: 800; font-size: 13px;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.home-prog-xp-text {
    color: var(--fym-text-dim); font-size: 11px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.home-prog-bar {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.home-prog-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f5a623, #fff3a8);
    border-radius: 4px;
    transition: width 400ms var(--ease-out);
    box-shadow: 0 0 8px rgba(245,166,35,0.45);
}
.home-prog-bottom {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: var(--fym-text-dim);
    font-weight: 700;
    letter-spacing: 0.03em;
}
.home-prog-chev {
    color: var(--fym-gold);
    font-size: 16px; font-weight: 800;
    line-height: 1;
}

/* ── Home: Quick actions row ──────────────────────────────────── */
.home-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 10px 14px 14px 14px;
}
.home-qa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    background: var(--fym-surface);
    border: 1px solid var(--fym-border);
    border-radius: 12px;
    color: var(--fym-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 150ms var(--ease-out);
}
.home-qa:active { transform: scale(0.94); }
.home-qa:hover {
    border-color: rgba(212,175,55,0.4);
    background: linear-gradient(180deg, rgba(244,214,107,0.06), rgba(138,111,31,0.02));
}
.home-qa-icon { font-size: 20px; line-height: 1; }
.home-qa-label {
    color: var(--fym-text-dim);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.08em;
}

/* ── Home: Streak banner upgrade ──────────────────────────────── */
#home-screen .streak-banner {
    background: linear-gradient(135deg, #1b1e2a 0%, #14161f 70%) !important;
    border: 1px solid rgba(212,175,55,0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45),
                inset 0 1px 0 rgba(255,255,255,0.04);
}
#home-screen .streak-banner .streak-day {
    color: var(--fym-gold-hi) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 12px;
}
#home-screen .streak-banner .streak-reward {
    color: var(--fym-text) !important;
    font-weight: 700;
    font-size: 16px;
}
#home-screen .streak-banner #daily-btn {
    background: linear-gradient(180deg, #f4d66b 0%, #d4af37 55%, #8a6f1f 100%) !important;
    color: #1a1305 !important;
    border: 1px solid rgba(212,175,55,0.6) !important;
    box-shadow: 0 4px 14px rgba(212,175,55,0.3) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
}

/* ── Home: Live wins feed ─────────────────────────────────────── */
.live-wins-section .live-wins-label {
    color: var(--fym-gold) !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 11px;
}
.live-wins-scroll .live-win-amount,
.live-wins-scroll [class*="amount"] {
    color: var(--fym-accent) !important;
    font-weight: 700;
}

/* ── Home: Featured games grid ────────────────────────────────── */
.section-heading {
    color: var(--fym-text) !important;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    position: relative;
    padding-left: 14px !important;
}
.section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--fym-gold-hi), var(--fym-gold-lo));
    transform: translateY(-50%);
}

.featured-game-card {
    background: linear-gradient(160deg, #1b1e2a 0%, #14161f 100%) !important;
    border: 1px solid var(--fym-border) !important;
    border-radius: 14px !important;
    transition: transform 200ms var(--ease-out),
                border-color 200ms,
                box-shadow 200ms !important;
    position: relative;
    overflow: hidden;
}
.featured-game-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, rgba(212,175,55,0.12), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms;
}
.featured-game-card:hover,
.featured-game-card:active {
    border-color: rgba(212,175,55,0.55) !important;
    transform: translateY(-2px) scale(0.99);
    box-shadow: 0 10px 28px rgba(0,0,0,0.5),
                0 0 0 1px rgba(212,175,55,0.2);
}
.featured-game-card:hover::after,
.featured-game-card:active::after { opacity: 1; }
.featured-game-card .featured-game-icon {
    color: var(--fym-gold) !important;
}
.featured-game-card .featured-game-name {
    color: var(--fym-text) !important;
    font-weight: 700;
}
.featured-game-card .featured-game-tag {
    color: var(--fym-text-dim) !important;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Games Lobby: category-accented tiles + hot badges ────────── */
#games-screen .game-card {
    background: linear-gradient(160deg, #1b1e2a 0%, #14161f 100%) !important;
    border: 1px solid var(--fym-border) !important;
    border-radius: 14px !important;
    transition: transform 200ms var(--ease-out), border-color 200ms, box-shadow 200ms !important;
    position: relative;
    overflow: hidden;
}
#games-screen .game-card::before {
    content: "";
    position: absolute;
    left: 0; top: 10%;
    width: 3px;
    height: 80%;
    border-radius: 0 2px 2px 0;
    background: var(--fym-gold);
    opacity: 0.7;
}
#games-screen .premium-grid .game-card::before {
    background: linear-gradient(180deg, var(--fym-gold-hi), var(--fym-gold-lo));
    box-shadow: 0 0 12px rgba(212,175,55,0.55);
}
/* Classic games accent = accent color */
#games-screen .game-grid:not(.premium-grid) .game-card::before {
    background: var(--fym-accent);
    opacity: 0.55;
}
/* Multiplayer section (last grid) = purple */
#games-screen .game-grid:last-of-type .game-card::before {
    background: #8b5cf6;
    opacity: 0.6;
}
#games-screen .game-card:hover,
#games-screen .game-card:active {
    border-color: rgba(212,175,55,0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
#games-screen .game-card .game-icon { color: var(--fym-gold) !important; }
#games-screen .game-card.premium .game-icon { color: var(--fym-gold-hi) !important; }
#games-screen .game-card .game-name {
    color: var(--fym-text) !important;
    font-weight: 700;
}
#games-screen .game-card .game-desc {
    color: var(--fym-text-dim) !important;
    font-size: 11px;
    letter-spacing: 0.04em;
}
#games-screen .game-badge {
    background: linear-gradient(180deg, var(--fym-gold-hi), var(--fym-gold)) !important;
    color: #1a1305 !important;
    border: none !important;
    font-weight: 800;
    font-size: 9px !important;
    letter-spacing: 0.1em;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(212,175,55,0.4);
}

/* ── Leaderboard: player search ────────────────────────────────── */
#leaderboard-screen .lb-search {
    position: relative;
    margin: 14px 14px 0 14px;
}
#leaderboard-screen .lb-search input {
    width: 100%;
    padding: 11px 14px;
    background: var(--fym-surface);
    border: 1px solid var(--fym-border);
    border-radius: 10px;
    color: var(--fym-text);
    font-size: 13px;
    outline: none;
    transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
#leaderboard-screen .lb-search input::placeholder { color: var(--fym-text-dim); }
#leaderboard-screen .lb-search input:focus {
    border-color: rgba(212,175,55,0.55);
    box-shadow: 0 0 0 2px rgba(212,175,55,0.12);
}
.lb-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--fym-surface);
    border: 1px solid var(--fym-border);
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.lb-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: background 120ms var(--ease-out);
}
.lb-search-row:last-child { border-bottom: none; }
.lb-search-row:hover { background: rgba(212,175,55,0.06); }
.lb-search-avatar { width: 36px; height: 36px; }
.lb-search-avatar .lb-avatar, .lb-search-avatar .lb-avatar-fallback {
    width: 36px !important; height: 36px !important;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    background: linear-gradient(135deg, #3a2f1a, #2a2014);
    color: var(--fym-gold-hi);
    object-fit: cover;
}
.lb-search-meta { flex: 1; min-width: 0; }
.lb-search-name {
    font-weight: 700; font-size: 14px; color: var(--fym-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-search-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin-top: 2px; }
.lb-search-empty { padding: 14px; text-align: center; color: var(--fym-text-dim); font-size: 13px; }

/* ── Leaderboard: podium for top 3 ────────────────────────────── */
#leaderboard-screen .lb-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    margin: 12px 14px;
    background: var(--fym-surface);
    border: 1px solid var(--fym-border);
    border-radius: 12px;
}
#leaderboard-screen .lb-tab {
    flex: 1;
    padding: 10px 12px !important;
    background: transparent !important;
    color: var(--fym-text-dim) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 200ms var(--ease-out);
}
#leaderboard-screen .lb-tab.active {
    background: linear-gradient(180deg, rgba(244,214,107,0.18), rgba(138,111,31,0.08)) !important;
    color: var(--fym-gold-hi) !important;
    box-shadow: inset 0 0 0 1px rgba(212,175,55,0.45);
}

/* Rows in leaderboard list — style first 3 as podium */
#leaderboard-list .lb-row,
#leaderboard-preview .lb-row {
    background: var(--fym-surface) !important;
    border: 1px solid var(--fym-border) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 200ms, transform 200ms var(--ease-out);
}
#leaderboard-list .lb-row:hover,
#leaderboard-preview .lb-row:hover {
    border-color: rgba(212,175,55,0.35) !important;
    transform: translateX(2px);
}
#leaderboard-list .lb-row:nth-child(1) {
    background: linear-gradient(90deg, rgba(244,214,107,0.18), rgba(138,111,31,0.05) 70%) !important;
    border-color: rgba(212,175,55,0.65) !important;
    box-shadow: 0 4px 18px rgba(212,175,55,0.18);
}
#leaderboard-list .lb-row:nth-child(1) .lb-rank { color: #f4d66b !important; }
#leaderboard-list .lb-row:nth-child(2) {
    background: linear-gradient(90deg, rgba(192,192,192,0.14), transparent 70%) !important;
    border-color: rgba(192,192,192,0.5) !important;
}
#leaderboard-list .lb-row:nth-child(2) .lb-rank { color: #d8d8d8 !important; }
#leaderboard-list .lb-row:nth-child(3) {
    background: linear-gradient(90deg, rgba(205,127,50,0.14), transparent 70%) !important;
    border-color: rgba(205,127,50,0.5) !important;
}
#leaderboard-list .lb-row:nth-child(3) .lb-rank { color: #e89b5e !important; }
#leaderboard-list .lb-rank,
#leaderboard-preview .lb-rank {
    font-size: 18px;
    font-weight: 800;
    min-width: 28px;
    color: var(--fym-text-dim);
}
#leaderboard-list .lb-name,
#leaderboard-preview .lb-name {
    flex: 1;
    color: var(--fym-text) !important;
    font-weight: 600;
}
#leaderboard-list .lb-balance,
#leaderboard-preview .lb-balance {
    color: var(--fym-gold-hi) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Profile: upgraded header + sections ──────────────────────── */
#profile-screen .profile-header {
    border-radius: 18px !important;
    padding: 20px 16px !important;
    border: 1px solid rgba(212,175,55,0.25) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45),
                inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}
#profile-screen .profile-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(212,175,55,0.15), transparent 60%);
    pointer-events: none;
}
#profile-screen .profile-name {
    color: var(--fym-text) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: 0.02em;
}
#profile-screen .profile-tg {
    color: var(--fym-text-dim) !important;
    font-size: 12px !important;
}
#profile-screen .profile-since {
    color: var(--fym-text-dim) !important;
    font-size: 11px !important;
    opacity: 0.8;
}
#profile-screen .profile-balance {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(244,214,107,0.18), rgba(138,111,31,0.1)) !important;
    border: 1px solid rgba(212,175,55,0.55);
    color: var(--fym-gold-hi) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    box-shadow: 0 4px 14px rgba(212,175,55,0.22);
}
#profile-screen .profile-section {
    background: var(--fym-surface) !important;
    border: 1px solid var(--fym-border) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin-top: 12px;
}
#profile-screen .profile-section h3,
#profile-screen .profile-section .section-label {
    color: var(--fym-gold) !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
#profile-screen .avatar-upload-btn,
#profile-screen .btn-primary {
    background: linear-gradient(180deg, #f4d66b 0%, #d4af37 55%, #8a6f1f 100%) !important;
    color: #1a1305 !important;
    border: 1px solid rgba(212,175,55,0.6) !important;
    font-weight: 700 !important;
}

/* Extra: stat row for profile (opt-in via .fym-stat-row wrapper or direct) */
#profile-screen .stats-grid,
#profile-screen .profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
#profile-screen .stat-tile {
    background: var(--fym-surface-2);
    border: 1px solid var(--fym-border);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}
#profile-screen .stat-tile .stat-value {
    color: var(--fym-gold-hi);
    font-weight: 800;
    font-size: 16px;
}
#profile-screen .stat-tile .stat-label {
    color: var(--fym-text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════
   P1.1 — Achievements + Live Wins upgrade
   ═══════════════════════════════════════════════════════════════ */

/* Section head with info button */
.profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ach-info-btn {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,0.55);
    background: linear-gradient(180deg, rgba(244,214,107,0.12), rgba(138,111,31,0.05));
    color: var(--fym-gold-hi);
    font-weight: 800;
    font-size: 12px;
    font-style: italic;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 22px;
}
.ach-info-btn:hover { background: rgba(212,175,55,0.2); }

/* Achievements summary + progress */
.achievements-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fym-text-dim);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.achievements-summary span { white-space: nowrap; color: var(--fym-gold-hi); font-weight: 700; }
.ach-progress {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--fym-surface-2);
    border: 1px solid var(--fym-border);
    overflow: hidden;
}
.ach-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fym-gold-lo), var(--fym-gold-hi));
    box-shadow: 0 0 10px rgba(212,175,55,0.5);
    transition: width 400ms var(--ease-out);
}

/* Achievements grid — tiers */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 360px) {
    .achievements-grid { grid-template-columns: repeat(2, 1fr); }
}
.achievement-card {
    position: relative;
    background: var(--fym-surface-2);
    border: 1px solid var(--fym-border);
    border-radius: 12px;
    padding: 12px 8px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 150ms var(--ease-out), border-color 150ms;
    overflow: hidden;
}
.achievement-card:hover { border-color: rgba(212,175,55,0.45); transform: translateY(-1px); }
.achievement-card.locked { opacity: 0.5; filter: grayscale(0.6); }
.achievement-card.locked .achievement-card-icon { filter: grayscale(1) brightness(0.6); }
.achievement-card-icon {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.achievement-card-name {
    color: var(--fym-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-bottom: 2px;
}
.achievement-card-desc {
    color: var(--fym-text-dim);
    font-size: 9px;
    line-height: 1.2;
    height: 22px;
    overflow: hidden;
}
.achievement-check {
    position: absolute;
    top: 6px; right: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--fym-accent);
    color: #012018;
    font-size: 10px;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.achievement-lock {
    position: absolute;
    top: 6px; right: 6px;
    font-size: 10px;
    opacity: 0.5;
}

/* Tier accents */
.achievement-card.tier-bronze.unlocked { border-color: rgba(205,127,50,0.55); box-shadow: 0 4px 14px rgba(205,127,50,0.18); }
.achievement-card.tier-silver.unlocked { border-color: rgba(192,192,192,0.55); box-shadow: 0 4px 14px rgba(192,192,192,0.18); }
.achievement-card.tier-gold.unlocked   {
    border-color: rgba(212,175,55,0.7);
    box-shadow: 0 4px 18px rgba(212,175,55,0.3);
    background: linear-gradient(180deg, rgba(244,214,107,0.12), var(--fym-surface-2));
}

/* Achievements info modal (reuse #achievement-modal) */
.ach-info-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--fym-gold-hi);
    letter-spacing: 0.04em;
    text-align: center;
    margin-bottom: 4px;
}
.ach-info-sub {
    text-align: center;
    color: var(--fym-text-dim);
    font-size: 11px;
    margin-bottom: 14px;
}
.ach-info-list {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}
.ach-info-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--fym-surface-2);
    border: 1px solid var(--fym-border);
    border-radius: 10px;
}
.ach-info-row.unlocked.tier-gold   { border-color: rgba(212,175,55,0.5); }
.ach-info-row.unlocked.tier-silver { border-color: rgba(192,192,192,0.4); }
.ach-info-row.unlocked.tier-bronze { border-color: rgba(205,127,50,0.45); }
.ach-info-row.locked { opacity: 0.55; }
.ach-info-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.ach-info-body { flex: 1; min-width: 0; }
.ach-info-name {
    color: var(--fym-text);
    font-weight: 700;
    font-size: 13px;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 2px;
}
.ach-info-tier {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--fym-surface);
    color: var(--fym-text-dim);
    border: 1px solid var(--fym-border);
}
.ach-info-howto {
    color: var(--fym-text-dim);
    font-size: 11px;
    line-height: 1.4;
}

/* ── Live Wins — narrower + avatar + clickable ──────────────── */
#home-screen .live-wins-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 14px 8px;
    scrollbar-width: none;
}
#home-screen .live-wins-scroll::-webkit-scrollbar { display: none; }

#home-screen .live-win-card {
    flex: 0 0 auto;
    min-width: 150px !important;
    max-width: 180px;
    display: grid !important;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px !important;
    background: linear-gradient(160deg, #1b1e2a, #14161f) !important;
    border: 1px solid var(--fym-border) !important;
    border-radius: 10px !important;
    transition: transform 150ms var(--ease-out), border-color 150ms;
}
#home-screen .live-win-card:hover {
    border-color: rgba(212,175,55,0.45) !important;
    transform: translateY(-1px);
}
.live-win-avatar,
.live-win-avatar-fb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(212,175,55,0.35);
    background: var(--fym-surface-2);
}
.live-win-avatar-fb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fym-gold-hi);
    font-weight: 800;
    font-size: 12px;
}
#home-screen .live-win-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
#home-screen .live-win-name {
    color: var(--fym-text) !important;
    font-size: 11px !important;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#home-screen .live-win-game {
    color: var(--fym-text-dim) !important;
    font-size: 9px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#home-screen .live-win-amount {
    color: var(--fym-accent) !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums;
    padding-left: 4px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   P1.2 — Notifications (bell, drawer, toast, modal)
   ═══════════════════════════════════════════════════════════════ */

#header .header-right { display: flex; align-items: center; gap: 8px; }
#header .header-left { display: flex; align-items: center; gap: 8px; }

.notif-bell {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--fym-surface-2);
    border: 1px solid var(--fym-border);
    color: var(--fym-gold-hi);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color 150ms, transform 150ms;
}
.notif-bell:hover { border-color: rgba(212,175,55,0.55); }
.notif-bell:active { transform: scale(0.93); }
.notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--fym-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fym-bg);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
    animation: fymBadgePulse 2.4s ease-in-out infinite;
}
@keyframes fymBadgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* Panel drawer */
.notif-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--ease-out);
    z-index: 998;
}
.notif-backdrop.open { opacity: 1; pointer-events: auto; }

.notif-panel {
    position: fixed;
    top: 56px;
    right: 8px;
    width: min(360px, calc(100vw - 16px));
    max-height: 70vh;
    background: linear-gradient(180deg, #1b1e2a, #14161f);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notif-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--fym-border);
}
.notif-panel-title {
    color: var(--fym-gold-hi);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.notif-mark-all {
    background: transparent;
    border: none;
    color: var(--fym-text-dim);
    font-size: 11px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    min-height: 28px;
}
.notif-mark-all:hover { color: var(--fym-gold-hi); background: rgba(212,175,55,0.1); }

.notif-panel-actions { display: flex; gap: 4px; align-items: center; }
.notif-clear-all {
    background: transparent;
    border: none;
    color: var(--fym-text-dim);
    font-size: 11px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    min-height: 28px;
}
.notif-clear-all:hover { color: #ff7676; background: rgba(255,90,90,0.1); }

.notif-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}
.notif-empty {
    color: var(--fym-text-dim);
    text-align: center;
    font-size: 12px;
    padding: 30px 10px;
}
.notif-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 150ms, transform 150ms;
    position: relative;
}
.notif-item:hover { background: rgba(212,175,55,0.08); }
.notif-item.unread {
    background: rgba(212,175,55,0.08);
    border-left: 2px solid var(--fym-gold);
}
.notif-item.read { opacity: 0.65; }
.notif-item-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fym-surface-2);
    border-radius: 50%;
    border: 1px solid var(--fym-border);
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
    color: var(--fym-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-time {
    color: var(--fym-text-dim);
    font-size: 10px;
    margin-top: 2px;
}
.notif-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fym-gold);
    box-shadow: 0 0 8px rgba(212,175,55,0.6);
    flex-shrink: 0;
}

/* Notification detail modal */
.fym-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}
.fym-modal.open { display: flex; }
.fym-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}
.fym-modal-card {
    position: relative;
    width: min(340px, calc(100vw - 32px));
    background: linear-gradient(180deg, #1b1e2a, #14161f);
    border: 1px solid rgba(212,175,55,0.5);
    border-radius: 16px;
    padding: 24px 20px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    animation: fymModalPop 250ms var(--ease-out);
}
@keyframes fymModalPop {
    0%   { opacity: 0; transform: translateY(12px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fym-modal-close {
    position: absolute;
    top: 8px; right: 10px;
    width: 28px; height: 28px;
    background: transparent;
    border: none;
    color: var(--fym-text-dim);
    font-size: 22px;
    cursor: pointer;
    min-height: 28px;
}
.fym-modal-close:hover { color: var(--fym-text); }
.notif-modal-icon {
    font-size: 44px;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 14px rgba(212,175,55,0.45));
}
.notif-modal-title {
    color: var(--fym-gold-hi);
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 10px;
}
.notif-modal-body {
    color: var(--fym-text);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.notif-modal-time {
    color: var(--fym-text-dim);
    font-size: 11px;
    margin-bottom: 16px;
}
.notif-modal-ok {
    width: 100%;
}

/* Toast stack (global achievement / notification toasts) */
.fym-toast-stack {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1002;
    pointer-events: none;
    width: min(340px, calc(100vw - 24px));
}
.fym-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #1b1e2a 0%, #14161f 100%);
    border: 1px solid rgba(212,175,55,0.55);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5),
                0 0 0 1px rgba(0,0,0,0.3),
                0 0 18px rgba(212,175,55,0.15);
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
    transition: opacity 300ms var(--ease-out),
                transform 300ms var(--ease-out);
    cursor: pointer;
}
.fym-toast.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.fym-toast.leaving {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
}
.fym-toast-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 10px rgba(212,175,55,0.5));
}
.fym-toast-body { flex: 1; min-width: 0; }
.fym-toast-title {
    color: var(--fym-gold-hi);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fym-toast-sub {
    color: var(--fym-text-dim);
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ──────────────────────────────────────────────────────────────
   Blackjack Rebrand v2 — photo background + table + dealer slot
   Overrides legacy .bj-felt styling. Keeps all .bj-* IDs intact
   so blackjack.js continues to work without modification.
   ────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   BLACKJACK V3 — Clean rebuild
   - Uses background.png + table.png (realistic) + Freddy dealer
   - Cards NEVER animate opacity → cannot disappear
   - Single state-machine drives all visuals
   ═══════════════════════════════════════════════════════════════ */

#blackjack-screen { background: #050402 !important; overflow: hidden; padding: 0 !important; }
#blackjack-screen.screen {
    position: relative;
    height: calc(100vh - 60px);
    min-height: calc(100vh - 60px);
    overflow: hidden !important;
}
#blackjack-screen::before { content: none !important; }
body.bj-active { overflow: hidden !important; }

/* Floating transparent header */
#blackjack-screen .game-header {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    background: transparent !important;
    border: none !important;
    padding: 12px 16px !important;
    z-index: 10;
}
#blackjack-screen .game-header h2 {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 0 18px rgba(0,0,0,0.6);
}
#blackjack-screen .game-header .back-link,
#blackjack-screen .game-header .info-link {
    background: rgba(0,0,0,0.45) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212,168,65,0.35) !important;
    color: #ffd97a !important;
}

/* ── Stage (scene layers) ───────────────────────────────── */
.bj-stage {
    position: relative;
    width: 100%;
    height: calc(100vh - 60px);
    min-height: 480px;
    overflow: hidden;
}
.bj-stage-bg {
    position: absolute; inset: -6%;
    background: url('/static/images/blackjack/background.png') center center / cover no-repeat;
    filter: brightness(0.8) saturate(1.05);
    animation: bjBgDrift 24s ease-in-out infinite alternate;
    z-index: 1;
}
@keyframes bjBgDrift {
    0%   { transform: scale(1.08) translate(0, 0); }
    50%  { transform: scale(1.10) translate(-1.2%, -0.6%); }
    100% { transform: scale(1.08) translate(1%, 0.4%); }
}
.bj-stage-vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background:
        radial-gradient(2px 2px at 12% 20%, rgba(255,210,120,0.55), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 14%, rgba(255,220,150,0.45), transparent 60%),
        radial-gradient(2px 2px at 35% 8%,  rgba(255,200,110,0.40), transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 32%, rgba(255,225,160,0.50), transparent 60%),
        radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0.85) 100%),
        linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
    animation: bjSparkle 6s ease-in-out infinite alternate;
}
@keyframes bjSparkle {
    0%   { opacity: 0.85; }
    100% { opacity: 1; }
}

/* ── Freddy dealer ──────────────────────────────────────── */
.bj-dealer-freddy {
    position: absolute;
    left: 50%;
    bottom: calc(36% + 155px);
    transform: translateX(-50%);
    width: 54.1%;
    max-width: 354px;
    z-index: 9;
    pointer-events: none;
    filter: drop-shadow(0 18px 22px rgba(0,0,0,0.75));
    animation: none;
    user-select: none;
}
@keyframes bjFreddyIdle {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-4px); }
}

/* ── Table ──────────────────────────────────────────────── */
#blackjack-screen .bj-table {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(20% - 50px);
    margin: 0 auto 0 -27.5%;
    transform: none;
    width: 155%; max-width: none;
    aspect-ratio: 3 / 2;
    /* no z-index — intentionally no stacking context so children can layer with .bj-stage siblings */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
}
.bj-table-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
    filter: drop-shadow(0 26px 34px rgba(0,0,0,0.8));
    user-select: none;
    z-index: 3;
}
.bj-table-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24% 24% 22%;
    z-index: 6;
    pointer-events: none;
}
.bj-table-overlay > * { pointer-events: auto; }

/* Hide legacy elements */
#blackjack-screen .bj-felt,
#blackjack-screen .bj-felt::before,
#blackjack-screen .bj-table-curve,
#blackjack-screen .bj-felt-text-top,
#blackjack-screen .bj-rule-line { display: none !important; }

/* ── Dealer + player sections ──────────────────────────── */
#blackjack-screen .bj-dealer-section,
#blackjack-screen .bj-player-section {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    text-align: center;
}
#blackjack-screen .bj-dealer-section { margin-bottom: auto !important; }
#blackjack-screen .bj-player-section { margin-top: auto !important; }

#blackjack-screen .bj-hand-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255,225,170,0.85);
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    text-transform: uppercase;
    margin: 3px 0;
}
#blackjack-screen .bj-value-badge {
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(212,168,65,0.55);
    color: #ffd97a;
    border-radius: 10px;
    padding: 1px 8px;
    margin-left: 6px;
    font-size: 11px;
    min-width: 0;
}
#blackjack-screen .bj-value-badge:empty { display: none; }

/* ── Cards (bulletproof) ────────────────────────────────
   CRITICAL: opacity fixed at 1, no transitions on the card itself,
   deal-in animation only touches transform. Cards physically
   cannot disappear.
   ──────────────────────────────────────────────────────── */
#blackjack-screen .bj-cards {
    display: flex;
    justify-content: center;
    gap: 3px;
    min-height: 62px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#blackjack-screen .bj-cards .card {
    width: 44px !important;
    height: 62px !important;
    font-size: 12px !important;
    border-radius: 5px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
    /* HARD LOCKED */
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    animation: none;
    transform: rotateX(42deg);
    transform-origin: center bottom;
    background: white;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#blackjack-screen .bj-cards .card .card-rank,
#blackjack-screen .bj-cards .card .card-suit {
    font-size: 12px;
    line-height: 1;
}
#blackjack-screen .bj-cards .card.red { color: #c0392b; }
#blackjack-screen .bj-cards .card.black { color: #1a1a1a; }

/* Deal-in animation: transform-only keyframes */
#blackjack-screen .bj-cards .card.bj-dealing {
    animation: bjDealIn 0.7s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
@keyframes bjDealIn {
    0%   { transform: translate(140px, -240px) rotate(-20deg) scale(0.55) rotateX(0deg); }
    60%  { transform: translate(8px, 6px) rotate(1deg) scale(1.03) rotateX(35deg); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1) rotateX(42deg); }
}

/* Face-down (red FYM back) */
#blackjack-screen .bj-cards .card.card-face-down {
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0 4px, transparent 4px 8px),
        radial-gradient(circle at 50% 50%, #b8242c 0%, #6b0d12 100%) !important;
    border: 2px solid rgba(255,215,140,0.5);
    color: transparent !important;
}
#blackjack-screen .bj-cards .card.card-face-down::after {
    content: 'FYM';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,235,180,0.95);
    font-family: var(--font-display, Georgia, serif);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 0 6px rgba(0,0,0,0.5);
}
#blackjack-screen .bj-cards .card.card-face-down .card-rank,
#blackjack-screen .bj-cards .card.card-face-down .card-suit {
    visibility: hidden;
}

/* Flip animation for reveal */
#blackjack-screen .bj-cards .card.bj-flipping {
    animation: bjFlip 0.6s cubic-bezier(0.2, 0.85, 0.3, 1) forwards;
}
@keyframes bjFlip {
    0%   { transform: rotateX(42deg) rotateY(0deg) scale(1); }
    50%  { transform: rotateX(42deg) rotateY(90deg) scale(1.08); }
    100% { transform: rotateX(42deg) rotateY(0deg) scale(1); }
}

/* ── On-table bet (left side) ───────────────────────────── */
#blackjack-screen .bj-table-bet {
    position: absolute !important;
    left: 18% !important;
    bottom: calc(32% + 35px) !important;
    transform: none !important;
    width: 54px; height: 54px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 11;
    display: flex !important;
}
.bj-chip-stack {
    position: absolute;
    inset: 0;
}
.bj-stack-chip {
    position: absolute;
    left: 50%;
    width: 42px; height: 11px;
    margin-left: -21px;
    border-radius: 50% / 40%;
    border: 2px dashed rgba(255,255,255,0.55);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 3px rgba(0,0,0,0.4);
}
.bj-stack-chip.stack-10  { background: linear-gradient(180deg,#3498db,#1f5d83); }
.bj-stack-chip.stack-25  { background: linear-gradient(180deg,#27ae60,#155d34); }
.bj-stack-chip.stack-50  { background: linear-gradient(180deg,#8e44ad,#5b2c70); }
.bj-stack-chip.stack-100 { background: linear-gradient(180deg,#c0392b,#751c14); }
.bj-stack-chip.stack-500 { background: linear-gradient(180deg,#2c3e50,#11181f); }

/* Double-down chip drop animation */
.bj-chip-double-anim {
    animation: chipDropIn 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.1) forwards;
}
@keyframes chipDropIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.8); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#blackjack-screen .bj-table-bet-amount {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    color: #ffd97a;
    font-family: var(--font-display, Georgia, serif);
    white-space: nowrap;
}

/* ── Bet controls (chip bar) ────────────────────────────── */
#blackjack-screen .bj-betting-controls {
    position: absolute !important;
    left: 0; right: 0; bottom: 72px;
    padding: 0 16px;
    background: transparent !important;
    z-index: 7;
}
#blackjack-screen .bj-chip-bar {
    display: flex;
    gap: 6px !important;
    justify-content: center;
    margin: 6px 0 6px !important;
}
#blackjack-screen .bj-chip {
    width: 40px !important;
    height: 40px !important;
    border-width: 2px !important;
    font-size: 10px !important;
    opacity: 0.9;
    backdrop-filter: blur(4px);
}
#blackjack-screen .bj-chip.active { opacity: 1; transform: scale(1.08); }

#blackjack-screen .bj-deal-btn {
    width: 72% !important;
    margin: 6px auto 0 !important;
    display: block !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    background: linear-gradient(135deg, rgba(122,99,37,0.6), rgba(212,168,65,0.75), color-mix(in srgb, var(--accent) 60%, transparent)) !important;
    border: 1px solid rgba(212,168,65,0.55) !important;
    border-radius: 999px !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.45) !important;
    color: #fff !important;
}

/* Bet tools (undo/clear/repeat) */
.bj-bet-tools {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 4px 0 2px;
}
.bj-tool-btn {
    width: 28px; height: 28px;
    padding: 0;
    font-size: 13px;
    border-radius: 50%;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: #ffd97a;
    cursor: pointer;
    font-weight: 700;
}
.bj-tool-btn:active { transform: scale(0.94); }

/* ── Action buttons (hit/stand/double) ──────────────────── */
#blackjack-screen .bj-actions {
    position: absolute !important;
    left: 0; right: 0; bottom: 78px;
    padding: 0 16px;
    display: flex;
    gap: 10px;
    justify-content: center;
    background: transparent !important;
    z-index: 7;
}
#blackjack-screen .bj-actions .bj-action-btn {
    backdrop-filter: blur(6px);
    background: rgba(20,16,8,0.6) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent) !important;
    color: #ffd97a !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Result banner ──────────────────────────────────────── */
#blackjack-screen .bj-result {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    font-family: var(--font-display, Georgia, serif);
    text-align: center;
    padding: 18px 36px;
    min-width: 220px;
    background: rgba(8,5,2,0.88);
    border: 1.5px solid rgba(212,168,65,0.5);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.7);
    display: none;
}
#blackjack-screen .bj-result.bj-result-show {
    display: block;
    animation: bjResultIn 0.6s cubic-bezier(0.2, 1.3, 0.3, 1) both;
}
#blackjack-screen .bj-result.bj-result-fade {
    animation: bjResultFade 0.5s ease-in forwards;
}
@keyframes bjResultIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes bjResultFade {
    to { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
}
#blackjack-screen .bj-result-headline {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(180deg, #FFE8A0 0%, #F0C94C 50%, #B8860B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.9));
}
#blackjack-screen .bj-result-amount {
    margin-top: 6px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffd97a;
}
#blackjack-screen .bj-result.win,
#blackjack-screen .bj-result.blackjack {
    border-color: rgba(255,217,122,0.8);
    box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 32px rgba(255,217,122,0.25);
}
#blackjack-screen .bj-result.lose {
    border-color: rgba(231,76,60,0.6);
    box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 24px rgba(231,76,60,0.18);
}
#blackjack-screen .bj-result.lose .bj-result-headline {
    background: linear-gradient(180deg, #ffb0a8 0%, #e74c3c 50%, #6b1a14 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
#blackjack-screen .bj-result.lose .bj-result-amount { color: #ff8a7a; }

/* ── Cinematic BLACKJACK overlay ────────────────────────── */
.bj-cinematic {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.96) 100%);
    animation: bjCinemaIn 0.5s ease-out both;
}
.bj-cinematic.bj-cinematic-out { animation: bjCinemaOut 0.6s ease-in both; }
@keyframes bjCinemaIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bjCinemaOut { from { opacity: 1; } to { opacity: 0; } }
.bj-cinematic-rays {
    position: absolute; width: 180%; height: 180%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255,232,160,0.5) 5deg, transparent 12deg,
        transparent 28deg, rgba(255,232,160,0.5) 33deg, transparent 40deg,
        transparent 56deg, rgba(255,232,160,0.5) 61deg, transparent 68deg,
        transparent 84deg, rgba(255,232,160,0.5) 89deg, transparent 96deg,
        transparent 112deg, rgba(255,232,160,0.5) 117deg, transparent 124deg,
        transparent 140deg, rgba(255,232,160,0.5) 145deg, transparent 152deg,
        transparent 168deg, rgba(255,232,160,0.5) 173deg, transparent 180deg,
        transparent 360deg);
    filter: blur(10px);
    animation: bvKeyRaysSpin 6s linear infinite;
    mix-blend-mode: screen;
}
.bj-cinematic-text {
    position: relative; z-index: 2;
    font-family: var(--font-display);
    font-size: 56px; font-weight: 900; letter-spacing: 8px;
    background: linear-gradient(180deg, #FFE8A0 0%, #F0C94C 45%, #B8860B 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.95)) drop-shadow(0 0 30px rgba(240,201,76,0.85));
    animation: bjCinemaPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bjCinemaPop {
    0%   { transform: scale(0.3) rotate(-8deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.bj-cinematic-sub {
    position: absolute; bottom: 32%;
    z-index: 2;
    font-family: 'Courier New', monospace;
    font-size: 14px; font-weight: 800; letter-spacing: 6px;
    color: #FFD966;
    text-shadow: 0 0 14px rgba(240,201,76,0.7), 0 2px 4px rgba(0,0,0,0.95);
}

@media (max-width: 420px) {
    #blackjack-screen .bj-cards .card {
        width: 40px !important;
        height: 56px !important;
    }
    .bj-dealer-freddy { width: 112%; }
}

/* BJ mute toggle in header */
#blackjack-screen .bj-mute-btn {
    position: absolute;
    top: 14px; right: 58px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212,168,65,0.35);
    color: #ffd97a;
    font-size: 16px;
    z-index: 11;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#blackjack-screen .bj-mute-btn:active { transform: scale(0.92); }
#blackjack-screen .bj-header-btn {
    position: absolute;
    top: 14px; right: 100px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212,168,65,0.35);
    color: #ffd97a;
    font-size: 16px;
    z-index: 11;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#blackjack-screen .bj-header-btn:active { transform: scale(0.92); }

/* Subtle warm glow behind Freddy */
.bj-freddy-glow {
    position: absolute;
    left: 50%;
    bottom: calc(36% + 120px);
    transform: translateX(-50%);
    width: 46%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    z-index: 8;
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgba(255, 210, 130, 0.35) 0%,
        rgba(255, 180, 90, 0.22) 25%,
        rgba(200, 130, 60, 0.12) 45%,
        transparent 70%);
    filter: blur(22px);
    animation: bjFreddyGlowPulse 5s ease-in-out infinite;
}
@keyframes bjFreddyGlowPulse {
    0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.08); }
}

/* Freddy gold nameplate — bottom-left of the table */
.bj-freddy-nameplate {
    position: absolute;
    left: calc(6% - 31px);
    bottom: calc(20% + 230px);
    width: 23.4%;
    max-width: 153px;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 12px rgba(255,200,80,0.25));
    user-select: none;
    animation: bjNameplateShine 6s ease-in-out infinite;
}
@keyframes bjNameplateShine {
    0%, 100% { filter: drop-shadow(0 8px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 12px rgba(255,200,80,0.25)); }
    50%      { filter: drop-shadow(0 8px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(255,220,120,0.55)); }
}
@media (max-width: 420px) {
    .bj-freddy-nameplate { width: 28.8%; left: calc(4% - 31px); }
}

/* ── TOS Modal ──────────────────────────────────────────── */
.tos-modal-card {
    width: min(420px, calc(100vw - 24px)) !important;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    text-align: left !important;
    padding: 0 !important;
}
.tos-modal-header {
    padding: 20px 20px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(212,175,55,0.2);
}
.tos-modal-logo {
    width: 48px; height: 48px; margin-bottom: 8px;
}
.tos-modal-header h2 {
    font-size: 18px; margin: 0 0 4px; color: #fff;
}
.tos-modal-version {
    font-size: 11px; color: rgba(212,175,55,0.7);
    font-family: monospace;
}
.tos-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    overflow-x: hidden;          /* lock horizontal pan */
    overscroll-behavior: contain;/* prevent body scroll chain on iOS */
    -webkit-overflow-scrolling: touch;
    flex: 1;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    max-height: 50vh;
    word-wrap: break-word;
    overflow-wrap: anywhere;     /* break very long URLs / code */
}
.tos-modal-body * { max-width: 100%; }
.tos-modal-body code,
.tos-modal-body pre {
    white-space: pre-wrap;
    word-break: break-word;
}
/* Scroll hint that appears below the body until the user has read to
   the bottom. Lives in the gap between body and footer so it doesn't
   sit on top of the agreement text. */
.tos-scroll-hint {
    padding: 8px 20px;
    font-size: 11.5px;
    color: rgba(212, 175, 55, 0.85);
    background: rgba(212, 175, 55, 0.08);
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    text-align: center;
    letter-spacing: 0.06em;
    animation: tosScrollHintBounce 1.6s ease-in-out infinite;
}
@keyframes tosScrollHintBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(2px); }
}
/* Visual locked state on the checkbox row until scroll-to-bottom. */
.tos-checkbox-label[data-locked="1"] {
    opacity: 0.5;
    cursor: not-allowed;
}
.tos-checkbox-label[data-locked="1"] input[type="checkbox"] {
    cursor: not-allowed;
}
.tos-modal-body h2 { font-size: 16px; margin: 14px 0 6px; color: #fff; }
.tos-modal-body h3 { font-size: 14px; margin: 10px 0 4px; color: #fff; }
.tos-modal-body h4 { font-size: 13px; margin: 8px 0 4px; color: #fff; }
.tos-modal-body p  { margin: 0 0 10px; }
.tos-modal-body ul, .tos-modal-body ol { padding-left: 18px; margin: 6px 0; }
.tos-modal-body li { margin: 3px 0; }
.tos-modal-body strong { color: #fff; }
.tos-modal-body em { color: rgba(255,255,255,0.92); font-style: italic; }
.tos-modal-body a { color: #d4af37; text-decoration: underline; }
.tos-modal-body code {
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
    padding: 1px 6px; border-radius: 4px; font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #e0c458;
}
.tos-modal-body hr {
    border: none; border-top: 1px solid rgba(212,175,55,0.25);
    margin: 14px 0;
}
.tos-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(212,175,55,0.2);
    background: rgba(0,0,0,0.2);
    border-radius: 0 0 16px 16px;
}
.tos-checkbox-label {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; color: rgba(255,255,255,0.7);
    margin-bottom: 12px; cursor: pointer;
}
.tos-checkbox-label input[type="checkbox"] {
    margin-top: 2px; accent-color: #d4af37;
}
.tos-accept-btn {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #d4af37, #b8962e);
    color: #000; font-weight: 700; font-size: 14px;
    cursor: pointer; transition: opacity 0.2s;
}
.tos-accept-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.tos-accept-btn:not(:disabled):hover {
    opacity: 0.9;
}

/* ══ Events & Tournaments ══ */

/* Home Banner — FIX-E: container styling now comes from the .ev-banner-card
   wrapper (bg-surface-container-low rounded-xl p-6 md:p-8). The inner
   row keeps a thin left-accent stripe coloured by event-type. */
#events-home-banner { margin-top: 0; margin-bottom: 0; }
.ev-banner-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 4px 0 4px 12px; border-radius: 0;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    cursor: pointer; transition: opacity .2s;
}
.ev-banner-inner:active { opacity: 0.85; }
.ev-banner-left { display: flex; align-items: center; gap: 12px; }
.ev-banner-icon { font-size: 1.6em; }
.ev-banner-title { font-weight: 700; font-size: .95em; color: var(--text); }
.ev-banner-sub { font-size: .8em; color: var(--faint); margin-top: 2px; }
.ev-banner-arrow { font-size: 1.2em; color: var(--accent); }
.ev-banner-more {
    text-align: center; font-size: .8em; color: var(--faint);
    padding: 4px 0; cursor: pointer;
}

/* Track C2.5.9 — medallion for major tournament banner
   (`.featured-event-banner__medallion` alias retained for plan-spec parity) */
.ev-banner-inner--major,
.featured-event-banner--major {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ev-banner-inner__medallion,
.featured-event-banner__medallion {
    position: absolute;
    right: -10%;
    top: 50%;
    transform: translateY(-50%);
    height: 140%;
    opacity: 0.30;
    z-index: -1;
    pointer-events: none;
    filter: blur(0.5px);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 60%);
            mask-image: linear-gradient(90deg, transparent, black 60%);
}

/* Events List */
.ev-loading, .ev-empty {
    text-align: center; padding: 40px 20px; color: var(--faint);
}
.ev-section-label {
    font-size: .8em; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--faint);
    padding: 12px 0 6px;
}

/* Event Card */
.ev-card {
    background: var(--surface);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all .2s;
}
.ev-card:active { transform: scale(0.98); opacity: 0.9; }
.ev-card-active { border-left: 3px solid var(--accent); }
.ev-card-upcoming { opacity: 0.8; }

.ev-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ev-card-type { display: flex; align-items: center; gap: 5px; font-size: .85em; font-weight: 600; }
.ev-card-type-label { font-size: .9em; }
.ev-card-time { font-size: .8em; color: var(--faint); display: flex; align-items: center; gap: 5px; }
.ev-live { color: #5cb85c; font-weight: 600; }
.ev-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #5cb85c; display: inline-block;
    animation: evPulse 1.5s infinite;
}
@keyframes evPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.ev-card-title { font-size: 1.05em; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ev-card-desc { font-size: .82em; color: var(--faint); margin-bottom: 8px; line-height: 1.3; }

.ev-card-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: .78em; color: var(--faint); margin-bottom: 8px;
}

.ev-card-standing {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; margin-bottom: 8px;
    background: rgba(212, 168, 65, 0.08);
    border-radius: 8px;
}
.ev-my-rank { font-size: 1.1em; font-weight: 800; color: var(--accent); }
.ev-my-score { font-size: .85em; color: var(--faint); }

.ev-card-actions { display: flex; gap: 8px; align-items: center; }
.ev-join-btn { font-size: .85em !important; padding: 6px 16px !important; }
.ev-detail-btn { font-size: .82em !important; padding: 6px 12px !important; }
.ev-joined-badge {
    font-size: .82em; color: #5cb85c; font-weight: 600;
    background: rgba(92, 184, 92, 0.1);
    padding: 4px 10px; border-radius: 8px;
}

.btn-ghost {
    background: transparent; border: 1px solid rgba(255,255,255,0.12);
    color: var(--faint); border-radius: 8px;
    cursor: pointer; transition: all .15s;
}
.btn-ghost:active { background: rgba(255,255,255,0.05); }

/* Event Detail */
.ev-back-btn {
    background: none; border: none; color: var(--faint);
    font-size: .9em; cursor: pointer; padding: 4px 0; margin-bottom: 12px;
}
.ev-back-btn:active { color: var(--accent); }

.ev-detail-header {
    padding: 16px; border-radius: 14px;
    background: var(--surface);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--accent);
    margin-bottom: 12px;
}
.ev-detail-type { font-size: .9em; font-weight: 600; margin-bottom: 4px; }
.ev-detail-title { font-size: 1.3em; font-weight: 800; margin: 4px 0 6px; color: var(--text); }
.ev-detail-desc { font-size: .88em; color: var(--faint); margin-bottom: 10px; line-height: 1.4; }

.ev-detail-info {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ev-info-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.03);
}
.ev-info-label { font-size: .72em; text-transform: uppercase; color: var(--faint); letter-spacing: .04em; }
.ev-info-value { font-size: .9em; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 4px; }
.ev-prize-value { color: var(--accent); }

.ev-detail-join {
    width: 100%; margin: 12px 0; padding: 12px;
    font-size: 1em; font-weight: 700; border-radius: 10px;
}
.ev-detail-joined {
    text-align: center; padding: 10px; margin: 12px 0;
    background: rgba(92, 184, 92, 0.08); border-radius: 10px;
    color: #5cb85c; font-weight: 600; font-size: .9em;
}

/* My Standing Card */
.ev-my-standing-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px; margin: 12px 0; border-radius: 12px;
    background: rgba(212, 168, 65, 0.06);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.ev-my-standing-rank {
    font-size: 1.8em; font-weight: 900; color: var(--accent);
    min-width: 50px; text-align: center;
}
.ev-my-standing-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .85em; }
.ev-my-standing-stats span { color: var(--faint); }

/* Progress Bar (Challenge/Race) */
.ev-progress-card {
    padding: 14px; margin: 12px 0; border-radius: 12px;
    background: var(--surface); border: 1px solid rgba(255,255,255,0.06);
}
.ev-progress-label { font-size: .9em; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.ev-progress-bar {
    height: 10px; border-radius: 5px;
    background: rgba(255,255,255,0.06); overflow: hidden;
}
.ev-progress-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--accent), #F59E0B);
    transition: width .5s ease;
}
.ev-progress-done { text-align: center; margin-top: 8px; font-weight: 700; color: #5cb85c; }

/* Prizes Section */
.ev-prizes-section { margin: 12px 0; }
.ev-prize-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-radius: 8px;
    background: var(--surface); border: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 4px; font-size: .9em;
}

/* Leaderboard */
.ev-lb-section { margin: 12px 0; }
.ev-lb-list { border-radius: 12px; overflow: hidden; }
.ev-lb-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: .88em;
}
.ev-lb-row:last-child { border-bottom: none; }
.ev-lb-me { background: rgba(212, 168, 65, 0.08); }
.ev-lb-pos { min-width: 28px; text-align: center; font-weight: 700; }
.ev-lb-rank { font-size: .85em; color: var(--faint); }
.ev-lb-name { flex: 1; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-lb-score { font-weight: 700; color: var(--accent); }

/* Past Events */
.ev-past-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0 8px; cursor: pointer; margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ev-past-toggle {
    font-size: .8em; color: var(--faint);
    transition: transform .2s;
}
.ev-past-toggle.expanded { color: var(--accent); }
.ev-past-list {
    max-height: 0; overflow: hidden;
    transition: max-height .4s ease;
}
.ev-past-list.expanded { max-height: 2000px; }

/* Completed Card */
.ev-card-completed {
    opacity: 0.85;
    border-left: 3px solid rgba(255,255,255,0.1);
}
.ev-card-participated {
    border-left: 3px solid var(--accent) !important;
    opacity: 1;
}
.ev-completed-badge {
    display: flex; align-items: center; gap: 6px;
}
.ev-you-badge {
    font-size: .72em; padding: 2px 6px; border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent);
    font-weight: 600;
}
.ev-ended-label {
    font-size: .75em; color: var(--faint);
}

/* Mini Winners List */
.ev-winners-mini {
    margin: 6px 0 8px; padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
}
.ev-winner-row-mini {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 0; font-size: .84em;
}
.ev-winner-medal { font-size: 1em; }
.ev-winner-name { flex: 1; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-winner-score { font-weight: 700; color: var(--accent); font-size: .9em; }

/* Winners Podium */
.ev-winners-podium { margin: 16px 0; }
.ev-podium-grid {
    display: flex; gap: 8px; justify-content: center;
    margin-top: 10px;
}
.ev-podium-item {
    flex: 1; max-width: 140px;
    padding: 16px 10px; border-radius: 14px;
    background: var(--surface);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
    transition: all .2s;
}
.ev-podium-1 {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background: rgba(212, 168, 65, 0.06);
    transform: scale(1.05);
}
.ev-podium-2 {
    border-color: rgba(192, 192, 192, 0.2);
    background: rgba(192, 192, 192, 0.04);
}
.ev-podium-3 {
    border-color: rgba(205, 127, 50, 0.2);
    background: rgba(205, 127, 50, 0.04);
}
.ev-podium-me {
    box-shadow: 0 0 12px rgba(212, 168, 65, 0.2);
    border-color: var(--accent) !important;
}
.ev-podium-medal { font-size: 2em; margin-bottom: 4px; }
.ev-podium-name {
    font-size: .85em; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 4px;
}
.ev-podium-score { font-size: .9em; font-weight: 800; color: var(--accent); }
.ev-podium-prize {
    font-size: .75em; color: #5cb85c; font-weight: 600;
    margin-top: 4px; padding: 2px 6px;
    background: rgba(92, 184, 92, 0.1); border-radius: 4px;
    display: inline-block;
}
.ev-podium-you {
    font-size: .7em; color: var(--accent); font-weight: 700;
    margin-top: 4px;
}

/* Detail completed */
.ev-detail-completed-you {
    background: rgba(212, 168, 65, 0.08) !important;
    color: var(--accent) !important;
}

/* You tag in leaderboard */
.ev-you-tag {
    font-size: .7em; padding: 1px 5px; border-radius: 3px;
    background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent);
    font-weight: 600; margin-left: 4px;
}

/* Section icon */
.ev-section-icon { margin-right: 4px; }

/* Loading spinner */
.ev-spinner {
    width: 24px; height: 24px; border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent); border-radius: 50%;
    animation: evSpin 0.6s linear infinite;
    margin: 0 auto 8px;
}
@keyframes evSpin { to { transform: rotate(360deg); } }

/* Claim Prize Card */
.ev-claim-card {
    margin: 12px 0;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(212, 168, 65, 0.12), rgba(245, 158, 11, 0.06));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    animation: evClaimPulse 2s infinite;
}
@keyframes evClaimPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 65, 0.2); }
    50% { box-shadow: 0 0 16px 4px color-mix(in srgb, var(--accent) 15%, transparent); }
}
.ev-claim-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.ev-claim-medal { font-size: 2.2em; }
.ev-claim-text { flex: 1; }
.ev-claim-title {
    font-size: .95em;
    font-weight: 700;
    color: var(--text);
}
.ev-claim-amount {
    font-size: 1.3em;
    font-weight: 900;
    color: var(--accent);
}
.ev-claim-btn {
    width: 100%;
    padding: 14px;
    font-size: 1.05em;
    font-weight: 800;
    border-radius: 10px;
    animation: evClaimBtnGlow 1.5s infinite alternate;
}
@keyframes evClaimBtnGlow {
    from { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
    to { box-shadow: 0 4px 20px rgba(212, 168, 65, 0.5); }
}
.ev-claim-done {
    animation: none;
    border-color: rgba(92, 184, 92, 0.3);
    background: rgba(92, 184, 92, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}
.ev-claim-done .ev-claim-title { color: #5cb85c; }
.ev-claim-done .ev-claim-amount { color: #5cb85c; font-size: 1em; }
.ev-claim-check { font-size: 1.5em; }

/* ────────────────────────────────────────────────────────────────
   Disabled games (feature flag off) — applied by applyDisabledGameUi()
   ──────────────────────────────────────────────────────────────── */
.game-card.game-unavailable,
.featured-game-card.game-unavailable {
    position: relative;
    opacity: 0.45;
    filter: grayscale(0.85);
    cursor: not-allowed !important;
    pointer-events: auto; /* keep clicks so toast fires via navigate() */
}
.game-card.game-unavailable::after,
.featured-game-card.game-unavailable::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.12) 0,
        rgba(0, 0, 0, 0.12) 8px,
        rgba(0, 0, 0, 0.22) 8px,
        rgba(0, 0, 0, 0.22) 16px
    );
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}
.game-unavailable-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #c0392b, #8e1e15);
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.45);
    pointer-events: none;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESSION — XP pill, level-up modal, XP toasts, detail panel
   ═══════════════════════════════════════════════════════════════════ */

.xp-pill {
    --xp-rank-color: #f5a623;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20,20,35,0.82), rgba(30,30,50,0.82));
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    color: #e8e8ef;
    margin-right: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    position: relative;
}
.xp-pill:hover { transform: translateY(-1px); border-color: var(--xp-rank-color); box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px var(--xp-rank-color)33; }
.xp-pill:active { transform: translateY(0); }

.xp-level-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--xp-rank-color);
    color: #0c0c18;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset;
    min-width: 34px;
    text-align: center;
}

.xp-bar {
    position: relative;
    width: 54px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.xp-bar-fill {
    position: absolute; inset: 0 auto 0 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--xp-rank-color), #fff);
    box-shadow: 0 0 6px var(--xp-rank-color);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 999px;
}

.xp-pill.is-max .xp-bar-fill {
    width: 100% !important;
    background: linear-gradient(90deg, #f5a623, #ff4d8d, #10b981, #5ab3ff);
    background-size: 300% 100%;
    animation: xpRainbow 4s linear infinite;
}
@keyframes xpRainbow { 0%{background-position:0 0;} 100%{background-position:300% 0;} }

.xp-rank-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--xp-rank-color);
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .xp-rank-text { display: none; }
    .xp-bar { width: 40px; }
}

/* ── XP toast stack (+XP popups) ─────────────────────────────────── */
.xp-toast-stack {
    position: fixed;
    right: 14px;
    bottom: 82px;
    z-index: 1800;
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    pointer-events: none;
}
.xp-toast {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20,20,35,0.95), rgba(30,30,50,0.95));
    border: 1px solid rgba(245,166,35,0.5);
    color: #f5a623;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 12px rgba(245,166,35,0.25);
    opacity: 0;
    transform: translateX(30px) scale(0.9);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.xp-toast.visible { opacity: 1; transform: translateX(0) scale(1); }
.xp-toast-icon { color: #fff; text-shadow: 0 0 8px #f5a623; }
.xp-toast-amount { color: #fff; }
.xp-toast-reason { font-size: 10px; font-weight: 600; opacity: 0.7; margin-left: 4px; }

/* ── Level-up modal ──────────────────────────────────────────────── */
.level-up-modal { z-index: 3100; }
.level-up-card {
    position: relative;
    max-width: 360px;
    width: calc(100% - 40px);
    padding: 36px 26px 22px;
    text-align: center;
    background: radial-gradient(circle at top, #1a1a35, #0d0d1e);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-3);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85) translateY(30px);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.level-up-modal.visible .level-up-card { opacity: 1; transform: scale(1) translateY(0); }
.level-up-modal.closing .level-up-card { opacity: 0; transform: scale(0.85) translateY(20px); }

.level-up-card[data-tier="1"] { --tier-color: #8a8f9e; }
.level-up-card[data-tier="2"] { --tier-color: #a87c4e; }
.level-up-card[data-tier="3"] { --tier-color: #5ab3ff; }
.level-up-card[data-tier="4"] { --tier-color: #c084fc; }
.level-up-card[data-tier="5"] { --tier-color: #f5a623; }
.level-up-card[data-tier="6"] { --tier-color: #10b981; }
.level-up-card[data-tier="7"] { --tier-color: #ff4d8d; }

.lu-burst {
    position: absolute; inset: -50% -50% auto auto;
    width: 200%; height: 200%;
    background: radial-gradient(circle, var(--tier-color, #f5a623)33 0%, transparent 55%);
    animation: luBurst 1.2s ease-out;
    pointer-events: none;
}
@keyframes luBurst { 0% {transform: scale(0); opacity: 1;} 100% {transform: scale(1); opacity: 0.2;} }

.lu-level-big {
    font-size: 92px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 24px var(--tier-color, #f5a623), 0 6px 30px rgba(0,0,0,0.6);
    letter-spacing: -0.02em;
    margin-top: 10px;
}
.lu-label {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.3em;
    color: var(--tier-color, #f5a623);
    margin-top: 2px;
    text-transform: uppercase;
}
.lu-rank-line {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-top: 12px;
    text-transform: uppercase;
}
.lu-rank-change {
    margin-top: 14px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
}
.lu-rank-old { color: #8a8f9e; text-decoration: line-through; opacity: 0.7; }
.lu-rank-arrow { color: #fff; opacity: 0.5; }
.lu-rank-new { text-shadow: 0 0 16px currentColor; }

.lu-unlocks {
    margin-top: 20px;
    padding: 14px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    text-align: left;
}
.lu-unlocks-title {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: var(--tier-color, #f5a623);
    margin-bottom: 8px;
    text-align: center;
}
.lu-unlocks-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lu-unlocks-list li {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #e8e8ef; font-weight: 600;
}
.lu-unlock-dot { color: var(--tier-color, #f5a623); font-size: 10px; }

.lu-continue-btn {
    margin-top: 18px;
    width: 100%;
    padding: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0c0c18;
    background: var(--tier-color, #f5a623);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.lu-continue-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.lu-continue-btn:active { transform: translateY(0); }

/* ──────────────────────────────────────────────────────────────────
   Progression detail panel — total renovation (2026-04-26)
   Goals:
     • High-contrast tab buttons that read clearly on dark BG
     • Sticky tabs so they stay visible while body scrolls
     • Refined header with rank-tinted aurora glow
     • Footer that doesn't overlap content
     • Mobile-safe heights with bottom safe-area inset
   ────────────────────────────────────────────────────────────────── */
.progression-panel {
    z-index: 3050;
    align-items: stretch;
    padding: max(env(safe-area-inset-top, 0px), 16px) 14px max(env(safe-area-inset-bottom, 0px), 16px);
}
.progression-card {
    --rank-color: #f5a623;
    max-width: 480px;
    width: 100%;
    margin: auto;
    max-height: min(88vh, 760px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    background:
        radial-gradient(120% 60% at 50% -20%, color-mix(in srgb, var(--rank-color) 22%, transparent), transparent 60%),
        linear-gradient(180deg, #14132a 0%, #0a0915 60%, #08070f 100%);
    border: 1px solid color-mix(in srgb, var(--rank-color) 22%, rgba(255,255,255,0.06));
    border-radius: 22px;
    box-shadow:
        0 30px 70px -20px rgba(0,0,0,0.7),
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 0 80px -30px color-mix(in srgb, var(--rank-color) 60%, transparent);
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.progression-panel.visible .progression-card { opacity: 1; transform: translateY(0) scale(1); }
.progression-panel.closing  .progression-card { opacity: 0; transform: translateY(20px) scale(0.98); }

.progression-card[data-tier="1"] { --rank-color: #8a8f9e; }
.progression-card[data-tier="2"] { --rank-color: #c08a52; }
.progression-card[data-tier="3"] { --rank-color: #5ab3ff; }
.progression-card[data-tier="4"] { --rank-color: #c084fc; }
.progression-card[data-tier="5"] { --rank-color: #f5a623; }
.progression-card[data-tier="6"] { --rank-color: #10b981; }
.progression-card[data-tier="7"] { --rank-color: #ff4d8d; }

/* ── Header — two-column eyebrow layout (Obsidian Vault) ────── */
.pp-head {
    position: relative;
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    /* Lock the header to its natural height. The progression-card is a
       capped-height flex column (head / tabs / body / footer); without
       this, when the body's intrinsic content is tall the flex layout
       shrinks ALL siblings proportionally — pulling the tab bar UP into
       the title row so the tabs ended up overlapping the rank name.
       Body still scrolls (it has flex:1 + overflow-y:auto); head/tabs/
       footer stay at their natural sizes. */
    flex-shrink: 0;
}
.pp-head::before {
    /* faint diagonal sheen — luxurious depth without taking over */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--rank-color) 10%, transparent) 0%,
        transparent 40%,
        transparent 60%,
        color-mix(in srgb, var(--rank-color) 5%, transparent) 100%);
    pointer-events: none;
}
.pp-head > * { position: relative; }

.pp-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(8, 7, 15, 0.6);
    color: #d0c5af;
    cursor: pointer;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s ease, border-color 0.18s ease,
                transform 0.25s ease, color 0.18s ease;
    z-index: 4;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pp-close:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(212, 175, 55, 0.4);
    transform: rotate(90deg);
    color: #f2ca50;
}

.pp-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    padding-right: 38px;        /* leave room for close button */
    margin-bottom: 16px;
}
.pp-head-col {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;               /* allow the chip+level to wrap if needed */
}
.pp-head-col--meta {
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
    max-width: 45%;
}
.pp-head-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #99907c;
    line-height: 1;
}

.pp-head-rank-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.pp-rank-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px;
    flex-shrink: 0;
}
.pp-rank-chip::before {
    content: '\2666';
    font-size: 8px;
    line-height: 1;
    color: currentColor;
    text-shadow: 0 0 6px currentColor;
}

.pp-level-big {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #e5e2e1;
    line-height: 1;
    text-shadow: 0 2px 18px color-mix(in srgb, var(--rank-color) 30%, transparent);
}

.pp-head-meta-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--rank-color, #f2ca50);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.pp-head-meta-value .pp-meta-suffix {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #99907c;
    margin-left: 4px;
    display: inline-block;
}
.pp-maxed {
    color: var(--rank-color, #f2ca50);
    font-weight: 700;
    letter-spacing: 0.18em;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 11.5px;
    white-space: nowrap;
}

/* XP progress block — thin bar + dual labels */
.pp-xp-progress {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pp-xp-bar {
    height: 4px;
    border-radius: 0;
    background: rgba(0,0,0,0.5);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.03);
}
.pp-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rank-color) 80%, white 0%),
        var(--rank-color) 50%,
        color-mix(in srgb, var(--rank-color) 65%, white 35%));
    box-shadow: 0 0 14px color-mix(in srgb, var(--rank-color) 70%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.45);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-xp-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #99907c;
    gap: 12px;
}
.pp-xp-progress-current { color: color-mix(in srgb, var(--rank-color) 75%, white 15%); }
.pp-xp-progress-total strong {
    color: #e5e2e1;
    font-family: var(--font-display);
    font-weight: 700;
    margin-left: 4px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* ── Tabs — clean underline navigation, high-contrast text ─── */
.pp-tabs {
    display: flex;
    gap: 0;
    padding: 0 12px;
    background: rgba(8, 7, 15, 0.92);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    z-index: 5;
}
.pp-tabs::-webkit-scrollbar { display: none; }

.pp-tab {
    flex: 1;
    min-width: 84px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #d0c5af;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 14px 8px 12px;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pp-tab .pp-tab-label {
    line-height: 1;
}
.pp-tab:hover {
    color: #f2ca50;
    background: linear-gradient(180deg,
        rgba(242, 202, 80, 0.04),
        transparent 80%);
}
.pp-tab:active { transform: scale(0.97); }

.pp-tab.active {
    color: #f2ca50;
    border-bottom-color: #f2ca50;
}
.pp-tab.active::after {
    /* soft glow under the underline so it reads as illuminated metal */
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -2px;
    height: 6px;
    background: radial-gradient(ellipse at center top,
        color-mix(in srgb, #f2ca50 50%, transparent),
        transparent 70%);
    pointer-events: none;
    filter: blur(1px);
}

.pp-tab .pp-tab-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff4d8d;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    font-family: var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 0 0 2px #08070f, 0 2px 8px rgba(255,77,141,0.5);
    position: static;
    margin: 0;
}

/* ── Body ───────────────────────────────────────────────────── */
.pp-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 18px 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.015), transparent 60%);
}
.pp-body::-webkit-scrollbar { width: 6px; }
.pp-body::-webkit-scrollbar-track { background: transparent; }
.pp-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}
.pp-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

.pp-loading, .pp-empty {
    padding: 36px 16px;
    text-align: center;
    color: #9b9486;
    font-size: 13px;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

.pp-section + .pp-section { margin-top: 18px; }
.pp-section-title {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: var(--rank-color, #f5a623);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.pp-section-title.next { color: #8a8f9e; }

.pp-perk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pp-perk {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    font-size: 13px;
    color: #e8e8ef;
    font-weight: 600;
}
.pp-perk.pending { opacity: 0.55; border-style: dashed; }
.pp-perk.muted { opacity: 0.6; font-style: italic; }
.pp-perk-dot { color: var(--rank-color, #f5a623); font-size: 8px; }

/* History */
.pp-history { display: grid; gap: 6px; }
.pp-history-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    font-size: 12px;
}
.pp-history-row.capped { opacity: 0.5; }
.pp-history-src { display: flex; align-items: center; gap: 8px; }
.pp-history-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    background: rgba(245,166,35,0.15);
    color: #f5a623;
}
.pp-history-badge.src-win_bonus { background: rgba(16,185,129,0.15); color: #10b981; }
.pp-history-badge.src-big_win { background: rgba(255,77,141,0.15); color: #ff4d8d; }
.pp-history-badge.src-mission { background: rgba(90,179,255,0.15); color: #5ab3ff; }
.pp-history-badge.src-event { background: rgba(192,132,252,0.15); color: #c084fc; }
.pp-history-badge.src-referral { background: rgba(245,166,35,0.15); color: #f5a623; }
.pp-history-badge.src-badge { background: rgba(255,255,255,0.1); color: #fff; }
.pp-history-badge.src-admin { background: rgba(200,200,200,0.15); color: #ccc; }
.pp-history-game { font-size: 10px; color: #8a8f9e; text-transform: uppercase; letter-spacing: 0.05em; }
.pp-history-amt { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-history-row.negative .pp-history-amt { color: #ff5b5b; }
.pp-history-time { color: #6a6f85; font-size: 10px; }

/* Breakdown */
.pp-breakdown-total {
    font-size: 12px; color: #8a8f9e;
    margin-bottom: 12px; font-weight: 600;
}
.pp-breakdown-total strong { color: #fff; font-weight: 800; }
.pp-bd-row {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    font-size: 12px;
}
.pp-bd-label { font-weight: 700; color: #e8e8ef; }
.pp-bd-bar {
    height: 8px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    overflow: hidden;
}
.pp-bd-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rank-color, #f5a623), #fff);
    border-radius: 999px;
    transition: width 0.6s ease;
}
.pp-bd-value { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-bd-value .muted { color: #8a8f9e; font-weight: 500; margin-left: 2px; }

/* Ranks */
.pp-ranks { display: grid; gap: 8px; }
.pp-rank-block {
    --rc: #f5a623;
    position: relative;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-left: 3px solid var(--rc);
    transition: background 0.15s ease;
}
.pp-rank-block.locked { opacity: 0.45; }
.pp-rank-block.current {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent);
    box-shadow: 0 0 0 1px var(--rc)44, 0 0 18px var(--rc)22;
}
.pp-rank-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.pp-rank-name {
    font-size: 14px; font-weight: 900;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--rc);
}
.pp-rank-levels { font-size: 10px; color: #8a8f9e; font-weight: 700; }
.pp-rank-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.pp-rank-perks li {
    font-size: 11px; color: #a0a0b8; padding-left: 8px; position: relative; font-weight: 600;
}
.pp-rank-perks li::before { content: "•"; position: absolute; left: 0; color: var(--rc); }

/* ═══════════════════════════════════════════════════════════════════
   Perks tab — visual upgrade.
   Hero band at top + colour-coded perk tiles in a 2-column grid. Each
   tile has a per-perk colour (gold/green/blue/purple/pink), a meter
   showing progress toward max-tier value, and a hover lift. Pending
   tiles use the same colour family but with a dashed border.
   ═══════════════════════════════════════════════════════════════════ */
.pp-perks-redesign {
    padding: 4px 2px 8px;
}
.pp-perk-hero {
    --rc: #f5a623;
    position: relative;
    overflow: hidden;
    margin: 0 0 18px;
    padding: 22px 22px 20px;
    border-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--rc) 28%, rgba(255,255,255,0.06));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--rc) 12%, #0e0e0e) 0%,
            #0e0e0e 75%);
    box-shadow:
        0 10px 28px color-mix(in srgb, var(--rc) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--rc) 22%, transparent);
}
.pp-perk-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top right,
            color-mix(in srgb, var(--rc) 22%, transparent) 0%,
            transparent 60%);
    pointer-events: none;
}
.pp-perk-hero-content {
    position: relative;
}
.pp-perk-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.pp-perk-hero-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.pp-perk-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    text-align: right;
}
.pp-perk-hero-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rc) 65%, white 20%);
    line-height: 1;
}
.pp-perk-hero-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    color: #e5e2e1;
    letter-spacing: 0.005em;
    line-height: 1.15;
}
.pp-perk-hero-title-sub {
    font-style: normal;
    color: #99907c;
    font-size: 14px;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.pp-perk-hero-bignum {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    color: var(--rc);
    text-shadow: 0 0 18px color-mix(in srgb, var(--rc) 50%, transparent);
    font-variant-numeric: tabular-nums;
}
.pp-perk-hero-bignum-label {
    font-family: var(--font-body);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #99907c;
    line-height: 1;
}

/* Progress block under the row */
.pp-perk-hero-progress {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 14px;
}
.pp-perk-hero-bar {
    height: 4px;
    background: rgba(0,0,0,0.5);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 9px;
    border: 1px solid rgba(255,255,255,0.03);
}
.pp-perk-hero-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rc) 80%, white 0%),
        var(--rc),
        color-mix(in srgb, var(--rc) 65%, white 35%));
    box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 60%, transparent);
    transition: width 600ms cubic-bezier(0.22, 0.8, 0.26, 1);
}
.pp-perk-hero-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #99907c;
}
.pp-perk-hero-progress-num {
    color: #e5e2e1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
}
.pp-perk-hero-pending {
    color: color-mix(in srgb, var(--rc) 75%, white 15%);
}
.pp-perk-hero-maxed {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 14px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rc);
}

/* Section headers — Inter caps with a fading gold rule on the right */
.pp-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 12px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #d0c5af;
}
.pp-section-header-label { white-space: nowrap; }
.pp-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(212, 175, 55, 0.35) 0%,
        rgba(212, 175, 55, 0.05) 60%,
        transparent 100%);
}
.pp-section-header:first-child { margin-top: 0; }

/* Empty perks state — locked vault privileges */
.pp-perk-empty-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    background: rgba(14, 14, 14, 0.6);
    border: 1px dashed rgba(77, 70, 53, 0.5);
    border-radius: 2px;
}
.pp-perk-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1c1b1b;
    border: 1px solid rgba(212, 175, 55, 0.18);
    display: flex; align-items: center; justify-content: center;
    color: #99907c;
    margin-bottom: 16px;
}
.pp-perk-empty-icon .material-symbols-outlined {
    font-size: 26px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.pp-perk-empty-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 17px;
    color: #e5e2e1;
    margin: 0 0 10px;
    line-height: 1.3;
}
.pp-perk-empty-body {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.55;
    color: #99907c;
    max-width: 320px;
    margin: 0 0 16px;
}
.pp-perk-empty-body strong {
    color: #f2ca50;
    font-weight: 700;
}
.pp-perk-empty-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(242, 202, 80, 0.06);
    border: 1px solid rgba(242, 202, 80, 0.22);
    color: #f2ca50;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.pp-perk-empty-tag .material-symbols-outlined {
    font-size: 14px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.pp-perk-tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 480px) {
    .pp-perk-tile-grid { grid-template-columns: 1fr 1fr; }
}
.pp-perk-tile {
    --pc: #e9c349;
    position: relative;
    overflow: hidden;
    padding: 14px 14px 13px;
    border-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--pc) 22%, rgba(255,255,255,0.04));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--pc) 6%, #1c1b1b) 0%,
            #0e0e0e 100%);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pp-perk-tile:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--pc) 45%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pc) 14%, transparent);
}
.pp-perk-tile.pending {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--pc) 30%, rgba(255,255,255,0.08));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pc) 4%, #1c1b1b) 0%,
        #0e0e0e 100%);
    opacity: 0.92;
}
.pp-perk-tile-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 55%;
    background:
        radial-gradient(ellipse at top right,
            color-mix(in srgb, var(--pc) 16%, transparent) 0%,
            transparent 70%);
    pointer-events: none;
}
.pp-perk-tile-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--pc) 12%, #0e0e0e);
    border: 1px solid color-mix(in srgb, var(--pc) 28%, transparent);
    border-radius: 2px;
    /* Clip any leaked text. If Material Symbols is slow to load
       (low-end network) a multi-word ligature like `slot_machines`
       can briefly render as the literal text "MACHINES" — which then
       overflowed the 40 px box. Both `overflow:hidden` and the
       max-width below ensure the worst case is a centered ellipsis,
       never an out-of-box character spill. */
    overflow: hidden;
}
.pp-perk-tile-icon {
    color: var(--pc);
    font-size: 22px !important;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pc) 50%, transparent));
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-perk-tile-body {
    position: relative;
    flex: 1;
    min-width: 0;
}
.pp-perk-tile-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #99907c;
    font-weight: 700;
    line-height: 1;
}
.pp-perk-tile-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--pc);
    letter-spacing: 0.01em;
    margin-top: 6px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px color-mix(in srgb, var(--pc) 35%, transparent);
}
.pp-perk-tile.pending .pp-perk-tile-value { color: color-mix(in srgb, var(--pc) 75%, white 25%); }
.pp-perk-tile-sub {
    font-family: var(--font-body);
    font-size: 10.5px;
    color: #99907c;
    margin-top: 4px;
    letter-spacing: 0.04em;
}
.pp-perk-tile-meter {
    margin-top: 11px;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.025);
}
.pp-perk-tile-meter-fill {
    height: 100%;
    transition: width 600ms cubic-bezier(0.22, 0.8, 0.26, 1);
    box-shadow: 0 0 6px color-mix(in srgb, var(--pc) 50%, transparent);
}
.pp-perk-tile-meter-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: #6e6a62;
    margin-top: 5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}
.pp-perk-tile-unlock .pp-perk-tile-value {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-shadow: none;
}
.pp-perk-tile-check {
    position: absolute;
    top: 10px; right: 10px;
    color: #7fcf96;
    font-size: 16px !important;
    opacity: 0.8;
    filter: drop-shadow(0 0 4px rgba(127, 207, 150, 0.5));
}

/* Legacy .pp-perk-grid kept for the old bullet-list path. */
.pp-perk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Ranks tab — vertical timeline (replaces the staircase indent).
   Each rank is a "station" on the journey: marker icon, vertical line
   connecting to the next station, card with perks. Current station
   has a "You are here" ribbon + pulsing marker. Reached stations
   show a small green check on the marker. Locked stations get a
   "Reach Lv X" pill.
   ═══════════════════════════════════════════════════════════════════ */
.pp-rank-timeline {
    position: relative;
    padding: 8px 0 16px;
}
.pp-rank-station {
    --rc: #f5a623;
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 22px;
}
.pp-rank-station:last-child { padding-bottom: 0; }
.pp-rank-line {
    position: absolute;
    top: 60px;
    left: 29px;
    width: 2px;
    bottom: -6px;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--rc) 30%, transparent) 0%,
        rgba(255, 255, 255, 0.06) 100%);
    z-index: 0;
}
.pp-rank-station.locked .pp-rank-line {
    background: rgba(255, 255, 255, 0.04);
}

.pp-rank-marker {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%,
            color-mix(in srgb, var(--rc) 28%, transparent),
            transparent 55%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--rc) 18%, #0a0906) 0%,
            #0a0906 70%);
    border: 1.5px solid color-mix(in srgb, var(--rc) 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 22px color-mix(in srgb, var(--rc) 32%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--rc) 25%, transparent),
        inset 0 -8px 14px rgba(0, 0, 0, 0.4);
    z-index: 1;
    overflow: hidden;
}
/* Gold filigree frame — subtle inner ring that gives the marker a
   "minted coin" quality consistent with the casino's gold palette. */
.pp-rank-marker-frame {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.06),
            transparent 60%);
}
.pp-rank-station.locked .pp-rank-marker {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    opacity: 0.55;
}
.pp-rank-station.locked .pp-rank-marker-frame {
    border-color: rgba(255, 255, 255, 0.06);
    background: none;
}
.pp-rank-marker-icon {
    position: relative;
    z-index: 2;
    color: var(--rc);
    font-size: 26px !important;
    font-variation-settings: 'FILL' 1;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 50%, transparent));
}
.pp-rank-marker-icon--svg {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-rank-marker-svg {
    width: 30px;
    height: 30px;
    color: var(--rc);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 50%, transparent));
}
.pp-rank-station.locked .pp-rank-marker-icon,
.pp-rank-station.locked .pp-rank-marker-svg {
    color: rgba(255, 255, 255, 0.25);
    font-variation-settings: 'FILL' 0;
    filter: none;
}
.pp-rank-marker-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--rc);
    animation: pp-rank-marker-pulse 2.4s ease-in-out infinite;
}
@keyframes pp-rank-marker-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 0;   transform: scale(1.25); }
}
.pp-rank-marker-check {
    position: absolute;
    bottom: -4px; right: -4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #7fcf96;
    color: #0a0906;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #0a0906;
}

.pp-rank-card-v2 {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(28, 27, 27, 0.7),
            rgba(14, 14, 14, 0.6));
    border: 1px solid color-mix(in srgb, var(--rc) 16%, rgba(255, 255, 255, 0.05));
    border-radius: 2px;
    padding: 16px 18px;
    transition: background 220ms ease, border-color 220ms ease,
                box-shadow 220ms ease;
}
.pp-rank-station.current .pp-rank-card-v2 {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--rc) 12%, #1c1b1b),
            #0e0e0e 75%);
    border-color: color-mix(in srgb, var(--rc) 70%, transparent);
    box-shadow:
        0 8px 26px color-mix(in srgb, var(--rc) 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--rc) 18%, transparent);
}
.pp-rank-station.locked .pp-rank-card-v2 {
    opacity: 0.5;
}
.pp-rank-here-ribbon {
    position: absolute;
    top: -10px; left: 14px;
    background: linear-gradient(135deg, #d4af37 0%, #f2ca50 100%);
    color: #3c2f00;
    padding: 4px 10px;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--rc) 60%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pp-rank-locked-pill {
    position: absolute;
    top: -10px; right: 14px;
    background: #1c1b1b;
    color: #99907c;
    padding: 4px 10px;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pp-rank-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.pp-rank-card-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.pp-rank-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--rc);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent);
}
.pp-rank-station.locked .pp-rank-card-title {
    color: #5a5651;
    text-shadow: none;
}
.pp-rank-card-range {
    font-family: var(--font-body);
    font-size: 9.5px;
    color: #99907c;
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
}
.pp-rank-card-prog {
    flex-shrink: 0;
    text-align: right;
}
.pp-rank-card-bar {
    margin-top: 12px;
    height: 3px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.03);
}
.pp-rank-card-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rc), color-mix(in srgb, var(--rc) 60%, white));
    box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 60%, transparent);
    transition: width 600ms cubic-bezier(0.22, 0.8, 0.26, 1);
}
.pp-rank-card-bar-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: #99907c;
    margin-top: 6px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
}
.pp-rank-card-perks {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.pp-rank-card-perks-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 9.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rc) 80%, white 20%);
    font-weight: 600;
    margin-bottom: 8px;
}
.pp-rank-card-perks-title::before,
.pp-rank-card-perks-title::after {
    content: '';
    height: 1px;
    width: 14px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--rc) 60%, transparent),
        transparent);
}
.pp-rank-card-perks {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.pp-rank-card-perks ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.pp-rank-card-perks li {
    font-family: var(--font-body);
    font-size: 11px;
    color: #d0c5af;
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}
.pp-rank-card-perks li::before {
    content: "\2666";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--rc);
    font-size: 9px;
}
.pp-rank-station.locked .pp-rank-card-perks li,
.pp-rank-station.locked .pp-rank-card-perks li::before { color: #5a5651; }

.pp-rank-tip {
    position: relative;
    margin: 24px 0 6px;
    padding: 16px 18px;
    background: rgba(14, 14, 14, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 11.5px;
    color: #d0c5af;
    line-height: 1.55;
    font-style: italic;
}
.pp-rank-tip::before {
    /* slim gold accent rule on the left edge */
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        transparent,
        rgba(242, 202, 80, 0.6),
        transparent);
}
.pp-rank-tip .material-symbols-outlined {
    font-size: 18px !important;
    color: #f2ca50;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Headline above the rank timeline */
.pp-ranks-headline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    text-align: center;
    padding: 0 8px 18px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #99907c;
}
.pp-ranks-headline-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: #f2ca50;
    text-shadow: 0 0 14px rgba(242, 202, 80, 0.4);
    line-height: 1;
}
.pp-ranks-headline-label {
    color: #99907c;
}
.pp-ranks-headline-tier {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-shadow: 0 0 12px currentColor;
}
.pp-ranks-headline--max {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #ff4d8d;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   Perks tab — icon-card grid (replaces the bullet-list version).
   Each perk shows a Material Symbols icon, label, and human-readable
   value (e.g. "+1,500 $FYM/day", "2.50% of net loss"). Pending perks
   (unlocking next level) are rendered with a dashed border + accent
   colour so they read as "soon" rather than "active now".
   ═══════════════════════════════════════════════════════════════════ */
.pp-perk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 4px 0;
}
@media (min-width: 480px) {
    .pp-perk-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.pp-perk-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: background 220ms ease, border-color 220ms ease;
}
.pp-perk-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(233, 195, 73, 0.18);
}
.pp-perk-card.pending {
    background: rgba(127, 182, 212, 0.05);
    border: 1px dashed rgba(127, 182, 212, 0.32);
}
.pp-perk-card-icon {
    flex-shrink: 0;
    color: #e9c349;
    font-size: 22px !important;
    font-variation-settings: 'FILL' 1;
}
.pp-perk-card.pending .pp-perk-card-icon {
    color: #7fb6d4;
}
.pp-perk-card-label {
    font-size: 11px;
    font-weight: 600;
    color: #e5e2e1;
    letter-spacing: 0.04em;
    line-height: 1.3;
}
.pp-perk-card-value {
    font-size: 11px;
    color: #bfb79c;
    margin-top: 2px;
    line-height: 1.3;
}
.pp-perk-card.pending .pp-perk-card-value {
    color: #7fb6d4;
}
.pp-perk-empty {
    grid-column: 1 / -1;
    padding: 24px 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   Ranks staircase — redesign of the legacy .pp-rank-block list.
   Staircase visual: top of the list = highest tier (Legend), bottom
   = lowest (Peasant), each row is indented progressively to give the
   "ladder" feel. Current rank gets a glow + "you are here" badge,
   reached ranks have a subtle check, locked ranks are dimmed.
   ═══════════════════════════════════════════════════════════════════ */
.pp-ranks-redesign {
    padding: 4px 2px 8px;
}
.pp-staircase {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 2px;
}
.pp-stair {
    --rc: #f5a623;
    position: relative;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--rc);
    transition: background 220ms ease, transform 220ms ease,
                box-shadow 220ms ease, border-color 220ms ease;
}
.pp-stair.locked {
    opacity: 0.45;
}
.pp-stair.reached:not(.current) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent);
}
.pp-stair.current {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent);
    border-color: var(--rc);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent),
        0 0 24px color-mix(in srgb, var(--rc) 22%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}
.pp-stair-here {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(180deg, var(--rc), color-mix(in srgb, var(--rc) 80%, black));
    color: #0a0906;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--rc) 35%, transparent);
    animation: pp-stair-here-pulse 2.4s ease-in-out infinite;
}
@keyframes pp-stair-here-pulse {
    0%, 100% { box-shadow: 0 4px 12px color-mix(in srgb, var(--rc) 35%, transparent); }
    50%      { box-shadow: 0 4px 18px color-mix(in srgb, var(--rc) 60%, transparent); }
}

.pp-stair-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.pp-stair-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 220ms ease;
}
.pp-stair-body {
    flex: 1;
    min-width: 0;
}
.pp-stair-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 1.2;
}
.pp-stair-range {
    font-size: 10px;
    color: #8a8f9e;
    font-weight: 600;
    margin-top: 2px;
    letter-spacing: 0.04em;
}
.pp-stair-progress {
    margin-top: 8px;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}
.pp-stair-progress-fill {
    height: 100%;
    transition: width 600ms cubic-bezier(0.22, 0.8, 0.26, 1);
    box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 40%, transparent);
}
.pp-stair-perks {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: grid;
    gap: 3px;
}
.pp-stair-perks li {
    font-size: 11px;
    color: #a0a0b8;
    padding-left: 12px;
    position: relative;
    line-height: 1.5;
}
.pp-stair-perks li::before {
    content: "◆";
    position: absolute;
    left: 0;
    color: var(--rc);
    font-size: 8px;
    top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Badge cabinet (progression panel tab)
   Note: .pp-tab base + .pp-tab-dot styling lives in the progression
   panel renovation block above. Don't redefine those here or it will
   clobber the segmented-control look.
   ═══════════════════════════════════════════════════════════════════ */

.pp-badges {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px 12px;
}
.pp-badges-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 6px;
    background: rgba(255,255,255,0.025);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}
.pp-badges-stat {
    text-align: center;
}
.pp-badges-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #f5a623;
    line-height: 1;
}
.pp-badges-stat.muted .pp-badges-stat-value { color: rgba(255,255,255,0.3); }
.pp-badges-stat-label {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

.pp-badge-group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 6px;
    padding-left: 4px;
}
.pp-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}
.pp-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s, border-color 0.15s;
    font: inherit;
}
.pp-badge:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-2px);
}
.pp-badge.owned {
    border-color: color-mix(in srgb, var(--br) 45%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--br) 18%, transparent), rgba(255,255,255,0.02));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--br) 25%, transparent),
                0 4px 18px -8px color-mix(in srgb, var(--br) 55%, transparent);
}
.pp-badge.locked {
    opacity: 0.45;
    filter: grayscale(0.7);
}
.pp-badge-icon {
    font-size: 32px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.pp-badge.locked .pp-badge-icon {
    filter: grayscale(1) brightness(0.7);
}
.pp-badge-name {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: rgba(255,255,255,0.85);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-badge.owned .pp-badge-name { color: #fff; }
.pp-badge-rarity {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Badge detail overlay */
.pp-badge-detail {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s;
    pointer-events: none;
}
.pp-badge-detail.visible {
    opacity: 1;
    pointer-events: auto;
}
.pp-bd-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
}
.pp-bd-card {
    position: relative;
    width: min(320px, 90vw);
    padding: 22px 20px 18px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--br) 18%, #161620) 0%,
        #14141c 60%);
    border: 1px solid color-mix(in srgb, var(--br) 35%, transparent);
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 20px 60px -20px color-mix(in srgb, var(--br) 65%, transparent),
                0 0 0 1px rgba(255,255,255,0.04) inset;
    transform: scale(0.94);
    transition: transform 0.22s cubic-bezier(0.2, 1, 0.3, 1);
}
.pp-badge-detail.visible .pp-bd-card { transform: scale(1); }
.pp-bd-close {
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
}
.pp-bd-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.pp-badge-detail.locked .pp-bd-icon {
    filter: grayscale(1) brightness(0.7);
    opacity: 0.6;
}
.pp-bd-rarity {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.pp-bd-name {
    font-size: 20px;
    font-weight: 800;
    margin-top: 4px;
    color: #fff;
}
.pp-bd-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    margin-top: 6px;
    line-height: 1.4;
}
.pp-bd-owned {
    margin-top: 12px;
    font-size: 12px;
    color: #10b981;
    font-weight: 700;
}
.pp-bd-checkmark {
    display: inline-block;
    width: 18px; height: 18px;
    line-height: 18px;
    background: #10b981;
    color: #000;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    margin-right: 4px;
}
.pp-bd-locked {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pp-bd-reward {
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(245, 166, 35, 0.15);
    border: 1px solid rgba(245, 166, 35, 0.35);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #f5a623;
    display: inline-block;
}

/* Badge-earned toast */
.badge-toast-stack {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    z-index: 1100;
    pointer-events: none;
}
.badge-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 10px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--br) 25%, #1a1a24) 0%,
        #10101a 100%);
    border: 1px solid color-mix(in srgb, var(--br) 50%, transparent);
    border-radius: 12px;
    box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--br) 55%, transparent),
                0 0 0 1px rgba(255,255,255,0.04) inset;
    min-width: 240px;
    max-width: 340px;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: opacity 0.28s, transform 0.28s cubic-bezier(0.2, 1, 0.3, 1);
    cursor: pointer;
    pointer-events: auto;
}
.badge-toast.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.badge-toast-icon {
    font-size: 32px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    flex-shrink: 0;
}
.badge-toast-body {
    flex: 1;
    min-width: 0;
}
.badge-toast-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.badge-toast-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.badge-toast-reward {
    font-size: 11px;
    color: #f5a623;
    font-weight: 700;
    margin-top: 2px;
}

/* Badge notif dot on XP pill */
#xp-pill.has-badge-notif::after {
    content: attr(data-badge-count);
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ff4d8d;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    border-radius: 8px;
    border: 2px solid var(--bg, #0e0e14);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
#xp-pill { position: relative; }

/* ─── Missions tab (Phase 6) ────────────────────────────────── */
.pp-missions-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.pp-mstat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}
.pp-mstat-v {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.pp-mstat-l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
}
.pp-streak-card {
    background: linear-gradient(135deg, rgba(245,166,35,0.12), rgba(255,77,141,0.08));
    border: 1px solid rgba(245,166,35,0.25);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.pp-streak-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pp-streak-label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.pp-streak-mult {
    font-size: 14px;
    font-weight: 700;
    color: #f5a623;
}
.pp-streak-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
}
.pp-missions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pp-mission {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--br, #5ab3ff);
    border-radius: 10px;
    transition: background 0.15s;
}
.pp-mission.completed {
    background: color-mix(in srgb, var(--br) 10%, rgba(255,255,255,0.03));
    border-color: var(--br);
}
.pp-mission.claimed {
    opacity: 0.55;
}
.pp-mission-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-mission-body {
    flex: 1;
    min-width: 0;
}
.pp-mission-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.pp-mission-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.pp-mission-diff {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border: 1px solid;
    border-radius: 4px;
    font-weight: 600;
    flex-shrink: 0;
}
.pp-mission-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 6px;
}
.pp-mission-reward {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 8px;
}
.pp-mission-xp {
    color: #5ab3ff;
    font-weight: 600;
}
.pp-mission-coin {
    color: #f5a623;
    font-weight: 600;
    margin-left: 6px;
}
.pp-mission-mult {
    color: #10b981;
    font-weight: 600;
    margin-left: 6px;
}
.pp-mission-progress {
    margin-top: 4px;
}
.pp-mission-bar {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.pp-mission-fill {
    height: 100%;
    background: var(--br, #5ab3ff);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.pp-mission-progress-text {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
    text-align: right;
}
.pp-mission-claim {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: var(--br, #10b981);
    color: #0a0a12;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s, filter 0.12s;
}
.pp-mission-claim:hover:not(:disabled) {
    filter: brightness(1.15);
    transform: translateY(-1px);
}
.pp-mission-claim:disabled {
    opacity: 0.6;
    cursor: wait;
}
.pp-mission-claimed {
    font-size: 12px;
    color: #10b981;
    font-weight: 600;
    padding: 4px 0;
}
.pp-mission-social {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: var(--br, #3b82f6);
    color: #0a0a12;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s, filter 0.12s;
}
.pp-mission-social:hover:not(:disabled) {
    filter: brightness(1.15);
    transform: translateY(-1px);
}
.pp-mission-social:disabled {
    opacity: 0.6;
    cursor: wait;
}
.pp-mission-dwell {
    padding: 4px 0;
}
.pp-mission-dwell .pp-mission-bar {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.pp-mission-dwell .pp-mission-fill {
    height: 100%;
    background: var(--br, #f59e0b);
    transition: width 0.6s linear;
}

/* ── Phantom Wallet screen ───────────────────────────────────── */
.wallet-tabs {
    display: flex;
    gap: 6px;
    margin: 10px 0 14px;
    overflow-x: auto;
}
.wallet-tab {
    flex: 1 1 0;
    background: #1a1a24;
    color: #9ea3b4;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    padding: 10px 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
}
.wallet-tab.active {
    background: linear-gradient(135deg, #ab9ff2, #7c3aed);
    color: #fff;
    border-color: transparent;
}
.wallet-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.wallet-card h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}
.wallet-status {
    padding: 8px 0;
    font-size: 13px;
}
.wallet-sub {
    font-size: 12px;
    color: #6a6f80;
    margin: 12px 0 6px;
}
.wallet-input {
    width: 100%;
    background: #0e0e16;
    border: 1px solid #2a2a3a;
    color: #eee;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    box-sizing: border-box;
}
.wallet-btn {
    background: #2a2a3a;
    color: #eee;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .12s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}
a.wallet-btn { color: #eee; }
.wallet-btn:hover:not(:disabled) { filter: brightness(1.15); }
.wallet-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wallet-btn-primary {
    background: linear-gradient(135deg, #ab9ff2, #7c3aed);
    color: #fff;
    width: 100%;
    margin-top: 10px;
}
.wallet-linked-row {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.wallet-linked-row:last-child { border-bottom: 0; }
.wallet-mint-row {
    background: rgba(255,255,255,0.04);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
}
.wallet-err {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.4);
    color: #fca5a5;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    margin-top: 10px;
}
.wallet-ok {
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.4);
    color: #6ee7b7;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    margin-top: 10px;
}
/* Continue-as-@username gate shown after Mini App logout */
#fym-continue-gate {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
#fym-continue-gate .fym-gate-backdrop {
    position: absolute; inset: 0;
    background: rgba(5,5,20,0.92);
    backdrop-filter: blur(8px);
}
#fym-continue-gate .fym-gate-card {
    position: relative;
    max-width: 360px;
    width: 100%;
    background: linear-gradient(160deg, #1a1a35, #111125);
    border: 1px solid rgba(139,92,246,0.35);
    border-radius: 16px;
    padding: 28px 22px 22px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#fym-continue-gate .fym-gate-logo {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 38px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wallet-treasury-card {
    background: rgba(139,92,246,0.08);
    border: 1px solid rgba(139,92,246,0.25);
    padding: 10px 12px;
    border-radius: 10px;
    margin-top: 10px;
}
.wallet-intro {
    font-size: 13px;
    line-height: 1.55;
    color: #bfc5d4;
    margin: 0 0 10px;
}
.wallet-deposit-form {
    margin-top: 14px;
    padding: 14px;
    background: linear-gradient(160deg, rgba(139,92,246,0.07), rgba(236,72,153,0.04));
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 12px;
}
.wallet-field-label {
    display: block;
    font-size: 11px;
    color: #9ea3b4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 8px;
}
.wallet-amount-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.wallet-amount-input-wrap {
    position: relative;
    flex: 1 1 180px;
    min-width: 160px;
}
.wallet-amount-input {
    width: 100%;
    padding: 14px 72px 14px 16px;
    border-radius: 12px;
    background: rgba(0,0,0,0.35);
    border: 1.5px solid rgba(255,255,255,0.08);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    -moz-appearance: textfield;
}
.wallet-amount-input:focus {
    outline: none;
    border-color: rgba(139,92,246,0.7);
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 0 4px rgba(139,92,246,0.15);
}
.wallet-amount-input::-webkit-inner-spin-button,
.wallet-amount-input::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}
.wallet-amount-input::placeholder { color: #4a4f60; font-weight: 500; }
.wallet-amount-suffix {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    color: #9ea3b4; font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; pointer-events: none;
}
.wallet-dep-gen-btn {
    flex: 0 0 auto;
    min-width: 140px;
    padding: 14px 18px !important;
    font-weight: 700;
}
.wallet-quick-amounts {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 10px;
}
.wallet-chip {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd0df;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.wallet-chip:hover {
    background: rgba(139,92,246,0.18);
    border-color: rgba(139,92,246,0.4);
    color: #fff;
}
.wallet-chip:disabled { opacity: 0.35; cursor: not-allowed; }

.wallet-deposit-intent {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 14px;
    border-radius: 12px;
}
.wallet-intent-grid {
    display: flex; gap: 16px; flex-wrap: wrap;
    align-items: flex-start; margin-top: 10px;
}
.wallet-qr-wrap { flex: 0 0 auto; }
.wallet-qr-img {
    width: 180px; height: 180px;
    background: #fff; padding: 8px; border-radius: 10px;
    display: block;
}
.wallet-intent-meta {
    flex: 1 1 200px; min-width: 200px; font-size: 13px;
}
.wallet-intent-meta .muted {
    font-size: 11px; color: #9ea3b4;
    text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 700;
}
.wallet-intent-amount { font-size: 17px; margin-top: 2px; }
.wallet-intent-actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px; margin-top: 14px;
}
.wallet-btn-ghost {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #cbd0df !important;
}
.wallet-btn-xs { padding: 5px 10px !important; font-size: 11px !important; min-width: 0 !important; }

.wallet-dep-status-bar {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    text-align: left;
    transition: background-color 280ms ease, border-color 280ms ease,
                box-shadow 280ms ease, transform 280ms ease;
    /* Defensive: keep the bar contained even when long titles or tx
       hashes try to push it sideways. The bar is always full-width of
       its parent column, never overflows or collapses. */
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.wallet-dep-status-bar > * { min-width: 0; }
.wallet-dep-status-bar.wallet-dep-flash {
    /* Fired briefly on manual "Check status" clicks so the player
       sees the bar acknowledge the click. */
    transform: scale(1.012);
    box-shadow: 0 0 0 2px rgba(233, 195, 73, 0.45);
}
/* Deposit-celebration popup — global keyframe so the inline <style>
   inside the modal HTML isn't relied upon. Plus reset for ancestor
   transforms (Telegram WebApp on iOS uses `transform: translate3d(0,0,0)`
   on the whole app shell). */
#fym-deposit-celebrate {
    /* All sizing handled inline; this exists so styles below can
       target it via .selector if needed. */
}
.fym-deposit-pop {
    animation: fym-deposit-pop 600ms cubic-bezier(0.22, 0.8, 0.26, 1.4);
}
@keyframes fym-deposit-pop {
    0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(4deg);  opacity: 1; }
    100% { transform: scale(1.0) rotate(0deg);   opacity: 1; }
}
@keyframes chatshare-trophy-pop {
    0%   { transform: scale(0.5) rotate(-15deg); opacity: 0; }
    60%  { transform: scale(1.2)  rotate(6deg);  opacity: 1; }
    100% { transform: scale(1.0)  rotate(0deg);  opacity: 1; }
}
.wallet-dep-status-bar.wallet-dep-waiting {
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}
.wallet-dep-status-bar.wallet-dep-matched {
    background: rgba(127, 182, 212, 0.08);
    border: 1px solid rgba(127, 182, 212, 0.35);
    color: #7fb6d4;
}
.wallet-dep-status-bar.wallet-dep-credited {
    background: rgba(127, 207, 150, 0.1);
    border: 1px solid rgba(127, 207, 150, 0.45);
    color: #7fcf96;
}
.wallet-dep-status-bar.wallet-dep-error {
    background: rgba(217, 119, 87, 0.08);
    border: 1px solid rgba(217, 119, 87, 0.35);
    color: #d97757;
}

/* Spinner: pulsing concentric ring while we wait for the chain. Stops
   spinning once we leave 'waiting' phase (matched/credited/error). */
.wallet-dep-spinner {
    display: inline-block;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: wallet-dep-spin 0.9s linear infinite;
    flex-shrink: 0;
}
.wallet-dep-credited .wallet-dep-spinner,
.wallet-dep-error .wallet-dep-spinner {
    animation: none;
    border-right-color: currentColor;
}
.wallet-dep-credited .wallet-dep-spinner::before {
    content: "✓";
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 14px; font-weight: 700;
    /* nudge the check up so it sits visually centered */
    line-height: 1;
}
@keyframes wallet-dep-spin {
    to { transform: rotate(360deg); }
}

/* Three-step pill row beneath the status header. Fills left-to-right
   as the deposit progresses through Sent → Confirming → Credited. */
.wallet-dep-step {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 10.5px; letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    transition: all 280ms ease;
}
.wallet-dep-step .wallet-dep-step-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
.wallet-dep-step.active {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}
.wallet-dep-step.active .wallet-dep-step-dot {
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
    animation: wallet-dep-pulse 1.4s infinite ease-in-out;
}
.wallet-dep-step.done {
    background: rgba(127, 207, 150, 0.08);
    border-color: rgba(127, 207, 150, 0.32);
    color: #7fcf96;
}
.wallet-dep-step.done .wallet-dep-step-dot {
    background: #7fcf96;
}
@keyframes wallet-dep-pulse {
    0%, 100% { opacity: 1.0; transform: scale(1.0); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

.wallet-empty-state {
    padding: 24px 12px;
    text-align: center;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 12px;
}
.wallet-empty-icon { font-size: 32px; margin-bottom: 6px; opacity: 0.7; }
.wallet-empty-title { font-size: 14px; font-weight: 700; color: #cbd0df; }
.wallet-empty-sub { font-size: 12px; color: #8a8f9f; margin-top: 4px; line-height: 1.5; }

.card-header-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.solscan-link {
    color: #a78bfa;
    text-decoration: none;
    border-bottom: 1px dotted rgba(167,139,250,0.35);
}
.solscan-link:hover { color: #c4b5fd; }
.wallet-hist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.wallet-hist-table th, .wallet-hist-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: left;
}
.wallet-hist-table th {
    color: #6a6f80;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ═══════════════════════════════════════════════════════════════════
   Progression panel — Referrals tab
   ═══════════════════════════════════════════════════════════════════ */
.pp-ref-hero {
    background: linear-gradient(135deg, rgba(245,166,35,0.14), rgba(255,77,141,0.08));
    border: 1px solid rgba(245,166,35,0.3);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
}
.pp-ref-hero-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pp-ref-code-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.pp-ref-code {
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #f5a623;
    padding: 6px 16px;
    background: rgba(0,0,0,0.35);
    border-radius: 8px;
    border: 1px dashed rgba(245,166,35,0.4);
}
.pp-ref-hero-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 10px;
}
.pp-ref-share-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.pp-ref-copy-btn,
.pp-ref-share-btn {
    background: rgba(245,166,35,0.15);
    border: 1px solid rgba(245,166,35,0.4);
    color: #f5a623;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pp-ref-share-btn {
    background: linear-gradient(135deg, #f5a623, #ff4d8d);
    color: #fff;
    border-color: transparent;
}
.pp-ref-copy-btn:hover,
.pp-ref-share-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}
.pp-milestones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.pp-milestone {
    background: rgba(107,140,255,0.08);
    border: 1px solid rgba(107,140,255,0.25);
    border-radius: 8px;
    padding: 8px 10px;
}
.pp-milestone-label {
    font-weight: 700;
    font-size: 12px;
    color: #8eaaff;
}
.pp-milestone-thr {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin: 2px 0 4px;
}
.pp-milestone-reward {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}
.pp-refs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pp-ref-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 10px;
}
.pp-ref-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.pp-ref-name { font-weight: 600; font-size: 13px; }
.pp-ref-status {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 700;
}
.pp-ref-status.active { background: rgba(54,194,125,0.18); color: #36c27d; }
.pp-ref-status.pending { background: rgba(201,164,58,0.18); color: #f0c054; }
.pp-ref-status.dq { background: rgba(193,77,77,0.2); color: #ff6b6b; }
.pp-ref-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}
.pp-ref-meta strong { color: #fff; }
.pp-ref-rewards-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pp-ref-reward-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    font-size: 12px;
}
.pp-rrr-right { color: #36c27d; font-weight: 700; }

/* ═══ Bonuses tab (progression panel) ═══ */
.pp-section-header {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pp-bonus-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-bonus-card {
    background: linear-gradient(135deg, rgba(255,186,0,0.06), rgba(255,123,0,0.04));
    border: 1px solid rgba(255,186,0,0.15);
    border-radius: 14px;
    padding: 14px;
}
.pp-bonus-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 10px;
}
.pp-bonus-icon {
    font-size: 32px;
    line-height: 1;
    padding-top: 2px;
}
.pp-bonus-info {
    min-width: 0;
}
.pp-bonus-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.pp-bonus-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
    line-height: 1.4;
}
.pp-bonus-amount {
    text-align: right;
    flex-shrink: 0;
}
.pp-bonus-coin {
    font-size: 16px;
    font-weight: 800;
    color: #ffba00;
    white-space: nowrap;
}
.pp-bonus-xp {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
}
.pp-bonus-wr {
    margin-top: 6px;
}
.pp-bonus-wr-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
}
.pp-bonus-wr-bar {
    height: 8px;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    overflow: hidden;
}
.pp-bonus-wr-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffba00, #ff7b00);
    transition: width 0.4s ease;
}
.pp-bonus-games,
.pp-bonus-expires {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-top: 6px;
}
.pp-bonus-claim-btn {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffba00, #ff7b00);
    color: #111;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.2s ease;
}
.pp-bonus-claim-btn:hover { transform: translateY(-1px); }
.pp-bonus-claim-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.pp-bonus-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pp-bonus-history-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-size: 12px;
}
.pp-bonus-history-name {
    color: rgba(255,255,255,0.85);
}
.pp-bonus-history-amount {
    color: #ffba00;
    font-weight: 600;
}
.pp-bonus-toast {
    background: linear-gradient(135deg, #ffba00, #ff7b00);
    color: #111;
}
.pp-bonus-toast .pp-mission-toast-title,
.pp-bonus-toast .pp-mission-toast-desc {
    color: #111;
}


/* ════════════════════════════════════════════════════════════════
   Track K — Progression panel redesign (May 2026)

   Tightens the popup that opens from the home XP/Level card. The
   home card itself stays unchanged. Goals:
     • Single focal point in the header (serif rank-name + level),
       not three competing columns.
     • Bigger, more confident tabs.
     • Section rows that act as a typographic anchor.
     • Badges overview = one donut + caption (was: three repetitive
       stat tiles).
   Distill / Layout / Typeset principles applied.
   ════════════════════════════════════════════════════════════════ */

/* ── New header: single typographic focus ───────────────────── */
.pp-head-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 4px 0 18px;
    padding-right: 38px;        /* room for the close button */
    font-family: var(--font-display);
    line-height: 1.05;
    color: #f4f1e4;
}
.pp-head-title .pp-head-rank {
    /* The marquee — Bodoni-italic, tinted toward the rank colour
       without going full gradient-text (banned anti-pattern). */
    font-style: italic;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.015em;
    color: color-mix(in srgb, var(--rc, #f5a623) 70%, #f4f1e4 30%);
    text-shadow: 0 2px 18px color-mix(in srgb, var(--rc, #f5a623) 25%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}
.pp-head-title .pp-head-sep {
    /* a thin vertical hairline between rank + level so the two
       feel related but not crowded. */
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    align-self: center;
}
.pp-head-title .pp-head-level {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: #d0c5af;
    font-feature-settings: 'tnum' 1;
    flex-shrink: 0;
}
@media (min-width: 380px) {
    .pp-head-title .pp-head-rank  { font-size: 32px; }
    .pp-head-title .pp-head-level { font-size: 20px; }
}

/* XP progress caption — single muted line below the bar */
.pp-xp-progress-caption {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #99907c;
    font-feature-settings: 'tnum' 1;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── Section row — header + count chip in one line ─────────── */
.pp-section-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 18px 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pp-section-row:first-child { margin-top: 12px; }
.pp-section-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    color: #f4f1e4;
    letter-spacing: -0.01em;
    margin: 0;
}
.pp-section-title--next {
    color: color-mix(in srgb, var(--rank-color, #f5a623) 70%, #f4f1e4 30%);
    font-size: 14px;
}
.pp-section-count {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #99907c;
    font-feature-settings: 'tnum' 1;
}
.pp-section-count--next {
    color: color-mix(in srgb, var(--rank-color, #f5a623) 65%, #99907c 35%);
}

/* ── Badges overview — donut + caption ──────────────────────── */
.pp-badges-overview {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 18px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pp-badges-ring {
    --ring: #e9c349;
    --pct: 0;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    /* conic-gradient renders the progress arc with a 4px inset for
       the inner circle. The variable --pct is set inline on the
       element by the renderer (0-100). */
    background:
        conic-gradient(
            color-mix(in srgb, var(--rank-color, #e9c349) 90%, transparent) calc(var(--pct) * 1%),
            rgba(255, 255, 255, 0.06) 0
        );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.pp-badges-ring::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: linear-gradient(180deg, #14132a 0%, #08070f 100%);
}
.pp-badges-ring-num {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    font-feature-settings: 'tnum' 1;
    color: color-mix(in srgb, var(--rank-color, #e9c349) 75%, #f4f1e4 25%);
}
.pp-badges-overview-text {
    flex: 1;
    min-width: 0;
}
.pp-badges-overview-headline {
    font-family: var(--font-body);
    font-size: 14px;
    color: #c9c2ad;
    line-height: 1.35;
}
.pp-badges-overview-headline strong {
    color: #f4f1e4;
    font-weight: 700;
    font-feature-settings: 'tnum' 1;
}
.pp-badges-overview-sub {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 11px;
    color: #8e877d;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* ── Perk tile: deposit-gated (Daily Missions until first deposit) ── */
.pp-perk-tile.deposit-locked {
    opacity: 0.62;
    filter: saturate(0.45);
}
.pp-perk-tile.deposit-locked .pp-perk-tile-value {
    color: #99907c;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.pp-perk-tile-lock {
    color: #99907c !important;
    filter: none !important;
}

/* ── Missions tab: locked-until-first-deposit empty state ──── */
.pp-missions-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px 36px;
    gap: 14px;
    color: #c9c2ad;
}
.pp-missions-locked-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(233, 195, 73, 0.08);
    border: 1px solid rgba(233, 195, 73, 0.28);
    color: #e9c349;
}
.pp-missions-locked-icon .material-symbols-outlined {
    font-size: 26px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.pp-missions-locked-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    color: #f4f1e4;
    letter-spacing: -0.005em;
}
.pp-missions-locked-body {
    font-family: var(--font-body);
    font-size: 13px;
    color: #99907c;
    line-height: 1.5;
    max-width: 320px;
    margin: 0;
}
.pp-missions-locked-cta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, #e9c349 0%, #c5a12a 100%);
    color: #3c2f00;
    border: 0;
    border-radius: 2px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 18px rgba(233, 195, 73, 0.18);
}
.pp-missions-locked-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(233, 195, 73, 0.28);
}
.pp-missions-locked-cta .material-symbols-outlined {
    font-size: 16px;
}


/* Profile Phantom Wallet card ───────────────────────────── */
.profile-wallet-card {
    background: linear-gradient(135deg, rgba(155, 81, 224, 0.08), rgba(80, 50, 150, 0.05));
    border: 1px solid rgba(155, 81, 224, 0.25);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-wallet-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(155, 81, 224, 0.2);
}
.profile-wallet-label {
    font-size: 11px;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.profile-wallet-balance {
    font-size: 20px;
    font-weight: 800;
    color: var(--fym-gold);
}
.profile-wallet-linked {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-wallet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 10px;
    border-radius: 8px;
}
.profile-wallet-addr {
    font-family: monospace;
    font-size: 12px;
    color: #d0c0f0;
}
.profile-wallet-primary {
    font-size: 10px;
    color: #ffba00;
    font-weight: 700;
}
.profile-wallet-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.profile-wallet-actions .btn {
    font-size: 12px;
    padding: 8px 10px;
}

/* ── Dual-balance mode pill (header) ─────────────────────────── */
/* Sits left of .balance-display. Cycles Play <-> Real on tap. */
.balance-mode-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 6px;
    background: rgba(120, 130, 160, 0.15);
    color: #a8aec0;
    border-color: rgba(120, 130, 160, 0.28);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.balance-mode-pill.mode-play {
    background: linear-gradient(135deg, rgba(100, 120, 160, 0.22), rgba(100, 120, 160, 0.10));
    color: #c7cde0;
    border-color: rgba(140, 160, 200, 0.35);
}
.balance-mode-pill.mode-real {
    background: linear-gradient(135deg, rgba(240, 180, 50, 0.25), rgba(240, 180, 50, 0.10));
    color: var(--accent-hi, #f0c94c);
    border-color: rgba(240, 180, 50, 0.45);
    box-shadow: 0 0 12px rgba(240, 180, 50, 0.15);
}
.balance-mode-pill:active { transform: scale(0.95); }
.balance-mode-pill.switching { opacity: 0.6; pointer-events: none; }

/* ── Transaction history: mobile-first card list ────────────
   Replaces the old 5-column table which was unreadable on
   narrow screens (tx signatures + addresses fought for width
   and overflowed). Each transaction is now a self-contained
   card with amount + status pill on top, tx/address/timestamp
   wrapped on a second line. No horizontal scroll, everything
   fits inside the viewport even at 320px wide. */
.wallet-hist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wallet-hist-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wallet-hist-card:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.1);
}
.wallet-hist-icon {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(74, 222, 128, 0.12);
    border-radius: 50%;
    flex: 0 0 auto;
}
.wallet-hist-icon-out {
    background: rgba(171, 159, 242, 0.12);
}
.wallet-hist-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wallet-hist-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wallet-hist-amount {
    font-size: 15px;
    font-weight: 600;
    color: #4ade80;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wallet-hist-amount-out { color: #ab9ff2; }
.wallet-hist-amount b { font-weight: 700; }
.wallet-hist-unit {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.6;
    letter-spacing: 0.04em;
}
.wallet-hist-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    min-width: 0;
}
.wallet-hist-meta .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
}
.wallet-hist-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(167, 139, 250, 0.1);
    border-bottom: none !important;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    transition: background 0.15s ease;
}
.wallet-hist-link:hover { background: rgba(167, 139, 250, 0.18); }
.wallet-hist-link-icon { font-size: 10px; opacity: 0.7; }
.wallet-hist-link-ext { font-size: 10px; opacity: 0.6; margin-left: 2px; }
.wallet-hist-muted { opacity: 0.5; font-size: 11px; }
.wallet-hist-time {
    margin-left: auto;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wallet-hist-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    margin-left: auto;
}
.wallet-hist-status.credited,
.wallet-hist-status.confirmed,
.wallet-hist-status.completed   { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.wallet-hist-status.broadcasting { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.wallet-hist-status.matched,
.wallet-hist-status.pending     { background: rgba(171, 159, 242, 0.15); color: #ab9ff2; }
.wallet-hist-status.pending_approval,
.wallet-hist-status.approved    { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.wallet-hist-status.refunded    { background: rgba(129, 140, 248, 0.15); color: #a5b4fc; }
.wallet-hist-status.rejected,
.wallet-hist-status.expired,
.wallet-hist-status.failed,
.wallet-hist-status.cancelled   { background: rgba(248, 113, 113, 0.15); color: #f87171; }

/* Very narrow screens: stack the meta row, keep tx hash on its own line */
@media (max-width: 360px) {
    .wallet-hist-card { grid-template-columns: 32px 1fr; gap: 8px; padding: 9px 10px; }
    .wallet-hist-icon { width: 32px; height: 32px; font-size: 16px; }
    .wallet-hist-amount { font-size: 14px; }
    .wallet-hist-time { width: 100%; margin-left: 0; }
}

/* ── Keyboard-open state: hide the fixed bottom nav so the
       soft keyboard doesn't overlap it ──────────────────────── */
body.keyboard-open #bottom-nav {
    transform: translateY(calc(var(--nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 20px));
    opacity: 0;
    pointer-events: none;
}
#bottom-nav {
    transition: transform 0.2s ease, opacity 0.2s ease;
}
body.keyboard-open {
    padding-bottom: 0 !important;
}

/* ── Wallet dual-balance cards ──────────────────────────────
   Play-money (fun chips) vs. Real $FYM (on-chain). Tap a card
   to switch the active mode — the active card glows brighter
   and the header balance pill mirrors whichever is active.
   ─────────────────────────────────────────────────────────── */
.wallet-balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0 6px;
}
.wallet-balance-card {
    position: relative;
    text-align: left;
    padding: 14px 14px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    font-family: inherit;
}
.wallet-balance-card:active { transform: scale(0.98); }
.wallet-balance-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.14;
    pointer-events: none;
}
.wallet-balance-play::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
}
.wallet-balance-real::before {
    background: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);
}
.wallet-balance-card .wallet-balance-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}
.wallet-balance-card .wallet-balance-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}
.wallet-balance-play .wallet-balance-dot { color: #a78bfa; }
.wallet-balance-real .wallet-balance-dot { color: #4ade80; }
.wallet-balance-card .wallet-balance-amount {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: #fff;
}
.wallet-balance-card .wallet-balance-unit {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 2px;
}
.wallet-balance-card .wallet-balance-sub {
    margin-top: 6px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
}
/* Highlight the currently active mode — sync'd via FYM_MODE.render()
   which toggles `active-mode` on the matching card. */
.wallet-balance-card.active-mode {
    border-color: rgba(171, 159, 242, 0.5);
    background: rgba(171, 159, 242, 0.07);
    box-shadow: 0 4px 20px -8px rgba(171, 159, 242, 0.35);
}
.wallet-balance-real.active-mode {
    border-color: rgba(74, 222, 128, 0.45);
    background: rgba(74, 222, 128, 0.06);
    box-shadow: 0 4px 20px -8px rgba(74, 222, 128, 0.35);
}
.wallet-balance-card.active-mode::after {
    content: "● ACTIVE";
    position: absolute;
    top: 10px; right: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ab9ff2;
    opacity: 0.9;
}
.wallet-balance-real.active-mode::after { color: #4ade80; }

.wallet-mode-hint {
    font-size: 11px;
    line-height: 1.5;
    margin: 0 2px 12px;
    color: rgba(255, 255, 255, 0.5);
}
.wallet-mode-hint #wallet-secondary-balance:not(:empty) {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
}


/* Optimistic pre-spin — applied the instant the SPIN button is
   clicked, before the server responds. Gives the reels a subtle blur
   so the user sees motion immediately, then the real animated spin
   takes over with the server-chosen symbols. The class is removed
   right before spinReels() starts.

   Keep the blur gentle — too much makes players think the UI froze. */
.reel-strip.reel-spinning-idle {
    animation: reelIdleBlur 420ms linear infinite;
    filter: blur(0.4px);
}
@keyframes reelIdleBlur {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

/* Track H.8 — Bonus Code section in Profile */
.profile-bonus-code {
    margin-top: 16px;
}
.profile-codes-divider {
    height: 1px;
    background: var(--border, #ffffff15);
    margin: 12px 0;
}
.profile-codes-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent, #d4a841);
    font-weight: 700;
    margin: 0 0 4px;
}
.profile-codes-hint {
    font-size: 11px;
    color: var(--muted, #ffffff99);
    margin: 0 0 12px;
    font-style: italic;
}
.profile-bonus-code__form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.profile-bonus-code__input {
    flex: 1;
    padding: 10px 12px;
    background: var(--raised, #ffffff08);
    border: 1px solid var(--border, #ffffff20);
    color: var(--text, #fff);
    font-family: var(--font-body), monospace;
    font-size: 14px;
    letter-spacing: 0.18em;
    border-radius: 6px;
}
.profile-bonus-code__input:focus {
    outline: none;
    border-color: var(--accent, #d4a841);
}
.profile-bonus-code__submit {
    padding: 10px 16px;
    background: var(--accent, #d4a841);
    color: var(--bg, #0c0c10);
    border: 0;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    cursor: pointer;
    transition: opacity 180ms ease;
}
.profile-bonus-code__submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.profile-bonus-code__last {
    margin-top: 10px;
    font-size: 11px;
    color: var(--muted, #ffffff99);
}