/* Refund Rush — Game Styles */

:root {
    --money-green: #1B8C4E;
    --deep-green: #0D5C32;
    --gold: #FFD700;
    --warm-gold: #DAA520;
    --rose-gold: #E8B4B8;
    --vault-black: #1A1A2E;
    --charcoal: #2D2D3F;
    --slate: #4A4A5E;
    --white: #F5F5F5;
    --cream: #FFF8E7;
    --refund-red: #FF3B3B;
    --dd-blue: #2196F3;
    --bonus-purple: #9C27B0;
    --overtime-orange: #FF9800;
}

html {
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0D2818;
    color: var(--white);
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

#game-container {
    width: 100vw;
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    /* Background is theme-resolved at boot. The CSS variable defaults
       to the Refund Rush base; theme.js sets it via document.documentElement.style
       once the manifest loads. */
    background: var(--theme-bg, url('/assets/backgrounds/bg_casino_green.png?v=22')) center/cover no-repeat;
}

#game-container::before,
#game-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#game-container::before {
    background:
        radial-gradient(ellipse at 50% 18%, rgba(255, 228, 122, 0.16) 0%, rgba(255, 228, 122, 0.05) 32%, transparent 58%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.56), transparent 17%, transparent 83%, rgba(0, 0, 0, 0.56)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 24%, rgba(0, 0, 0, 0.58));
    mix-blend-mode: multiply;
}

#game-container::after {
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.018) 0 1px,
            transparent 1px 54px),
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.012) 0 1px,
            transparent 1px 42px);
    opacity: 0.32;
    mask-image: radial-gradient(ellipse at 50% 43%, black 0%, black 52%, transparent 82%);
}

/* ── Loading Screen ── */
#loading-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0D2818 0%, #071a0e 100%);
    z-index: 1000;
    transition: opacity 0.5s ease;
}

.loading-logo {
    text-align: center;
    margin-bottom: 40px;
}

#loading-logo-img {
    max-width: 400px;
    width: 80%;
    height: auto;
    margin-bottom: 16px;
}

#loading-title {
    font-family: 'Montserrat', 'Impact', sans-serif;
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 900;
    background: linear-gradient(180deg, var(--gold), var(--warm-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    letter-spacing: 4px;
}

.loading-bar-container {
    width: min(300px, 80vw);
    height: 6px;
    background: var(--charcoal);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--warm-gold);
}

.loading-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--money-green), var(--gold));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.loading-text {
    margin-top: 16px;
    color: var(--slate);
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* ── Game UI ── */
#bg-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 0;
    pointer-events: none;
}
#bg-overlay.active { opacity: 1; }

#cinematic-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.78;
    mix-blend-mode: screen;
}

#cinematic-ambient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.54) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.42));
    mix-blend-mode: multiply;
}

.ambient-sweep {
    position: absolute;
    top: -18vh;
    bottom: -18vh;
    width: 34vw;
    min-width: 320px;
    transform: skewX(-18deg) translateX(-65vw);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 244, 185, 0.00) 22%,
        rgba(255, 223, 92, 0.14) 48%,
        rgba(53, 231, 167, 0.08) 58%,
        rgba(255, 244, 185, 0.00) 78%,
        transparent 100%);
    filter: blur(10px);
    animation: ambientSweep 15s linear infinite;
}

.ambient-sweep-b {
    width: 26vw;
    min-width: 240px;
    animation-duration: 21s;
    animation-delay: -9s;
    opacity: 0.55;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.00) 25%,
        rgba(255, 215, 0, 0.13) 50%,
        rgba(255, 255, 255, 0.00) 75%,
        transparent 100%);
}

.ambient-scan {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg,
            rgba(255, 255, 255, 0.028) 0,
            rgba(255, 255, 255, 0.028) 1px,
            transparent 1px,
            transparent 7px);
    opacity: 0.18;
    transform: translateY(-7px);
    animation: ambientScan 3.6s linear infinite;
}

body.spin-active #cinematic-ambient {
    opacity: 1;
}

body.spin-active .ambient-sweep {
    animation-duration: 8s;
    filter: blur(8px) saturate(1.22);
}

body.anticipation-active #cinematic-ambient {
    opacity: 1;
}

body.anticipation-active .ambient-sweep {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.00) 18%,
        rgba(255, 215, 0, 0.26) 46%,
        rgba(255, 91, 47, 0.10) 58%,
        rgba(255, 255, 255, 0.00) 80%,
        transparent 100%);
    animation-duration: 6s;
}

body.jackpot-payoff-active #cinematic-ambient {
    opacity: 1;
    mix-blend-mode: screen;
}

body.jackpot-payoff-active .ambient-sweep {
    animation-duration: 4.8s;
    filter: blur(7px) saturate(1.45);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.00) 14%,
        rgba(255, 235, 130, 0.34) 42%,
        rgba(255, 80, 40, 0.16) 55%,
        rgba(39, 216, 96, 0.12) 66%,
        rgba(255, 255, 255, 0.00) 84%,
        transparent 100%);
}

@keyframes ambientSweep {
    0% { transform: skewX(-18deg) translateX(-70vw); }
    100% { transform: skewX(-18deg) translateX(140vw); }
}

@keyframes ambientScan {
    0% { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}

#game-ui {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 1;
}

/* ── Progressive Jackpot Display ── */
#progressive-display {
    flex-shrink: 0;
    background: linear-gradient(180deg, #0f0f20, var(--vault-black));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    padding: 6px 12px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

#jp-containers {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
}

/* Each tile: image left, text right */
.jp-tile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
}

.jp-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Image container (square, holds empty+full overlay) */
.jp-tile-img {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #2D2D3F;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.jp-container-empty,
.jp-container-full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jp-container-full {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

/* Text block (label + value) */
.jp-tile-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.jp-label {
    display: block;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.2;
    white-space: nowrap;
}

.jp-value {
    display: block;
    font-family: 'Montserrat', monospace;
    font-size: 1rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 215, 0, 0.25);
    line-height: 1.2;
    white-space: nowrap;
}

/* ── Title Banner (between progressives and reels) ── */
#game-title-banner {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.5vw, 16px);
    padding: 4px 20px 2px;
    margin-left: calc(56px + 24px);
}

.title-logo {
    height: clamp(60px, 9vh, 110px);
    width: auto;
    max-height: 110px;
    max-width: 110px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(34, 197, 94, 0.3));
    flex-shrink: 0;
}

#title-text {
    display: flex;
    align-items: baseline;
    gap: clamp(6px, 1.5vw, 16px);
    line-height: 1;
    font-family: 'Montserrat', 'Impact', 'Arial Black', sans-serif;
}

#title-refund {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 900;
    letter-spacing: clamp(3px, 0.8vw, 8px);
    color: #22c55e;
    -webkit-text-stroke: clamp(1px, 0.2vw, 2.5px) #000;
    paint-order: stroke fill;
    text-shadow:
        0 0 12px rgba(34, 197, 94, 0.6),
        0 0 30px rgba(34, 197, 94, 0.2),
        0 2px 0 #0a3d1a,
        0 3px 0 #072e14,
        0 4px 8px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}

#title-rush {
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: clamp(4px, 1vw, 10px);
    color: #FFD700;
    -webkit-text-stroke: clamp(1px, 0.25vw, 3px) #000;
    paint-order: stroke fill;
    text-shadow:
        0 0 15px rgba(255, 215, 0, 0.7),
        0 0 40px rgba(255, 215, 0, 0.25),
        0 2px 0 #8B6914,
        0 3px 0 #6B4F10,
        0 4px 0 #4A370B,
        0 5px 10px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}

/* ── Tier-specific styles ── */
.jp-tile-mini {
    border-color: rgba(205, 133, 63, 0.4);
}
.jp-tile-mini .jp-value { color: #CD853F; text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 8px rgba(205,133,63,0.3); }

.jp-tile-minor {
    border-color: rgba(192, 192, 192, 0.4);
}
.jp-tile-minor .jp-value { color: #CBD5E0; text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 8px rgba(192,192,192,0.3); }

.jp-tile-major {
    border-color: rgba(255, 215, 0, 0.45);
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.15);
    animation: majorPulse 4s ease infinite;
}
.jp-tile-major .jp-value { color: var(--gold); font-size: 1.05rem; }

@keyframes majorPulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(255, 215, 0, 0.15); }
    50% { box-shadow: 0 2px 18px rgba(255, 215, 0, 0.35); }
}

.jp-tile-grand {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: grandShimmer 3s ease infinite;
    background: rgba(255, 215, 0, 0.05);
}
.jp-tile-grand .jp-tile-img { width: 62px; height: 62px; }
.jp-tile-grand .jp-value {
    /* v2: $250K cap can render as "$249,876.42" — needs the extra room. */
    font-size: 1.25rem;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: -0.3px;
}

@keyframes grandShimmer {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 215, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.3); }
    50% { box-shadow: 0 0 24px rgba(255, 215, 0, 0.45), 0 2px 14px rgba(0, 0, 0, 0.3); }
}

/* 2.3 — Must-Hit-By near-cap urgency pulse (yellow → red glow + jitter).
   .urgent: 1.5s loop, fires when pool ≥ 95% of cap.
   .urgent.imminent: faster 0.6s loop + brighter red, fires at ≥ 99%. */
@keyframes jpTileUrgent {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.35), 0 0 4px rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 215, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 80, 80, 0.7), 0 0 8px rgba(255, 80, 80, 0.4);
        border-color: rgba(255, 80, 80, 0.85);
    }
}

@keyframes jpTileImminent {
    0%, 100% {
        box-shadow: 0 0 14px rgba(255, 80, 80, 0.6), 0 0 6px rgba(255, 80, 80, 0.3);
        border-color: rgba(255, 80, 80, 0.9);
        transform: translate(0, 0);
    }
    25% { transform: translate(-1px, 0); }
    50% {
        box-shadow: 0 0 28px rgba(255, 30, 30, 1.0), 0 0 12px rgba(255, 30, 30, 0.6);
        border-color: rgba(255, 30, 30, 1.0);
        transform: translate(1px, 0);
    }
    75% { transform: translate(-1px, 0); }
}

.jp-tile.urgent {
    animation: jpTileUrgent 1.5s ease-in-out infinite;
}
.jp-tile.urgent.imminent {
    animation: jpTileImminent 0.6s ease-in-out infinite;
}
.jp-tile.urgent .jp-mhb {
    color: #FFD700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}
.jp-tile.urgent.imminent .jp-mhb {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 80, 80, 0.8);
    font-weight: 900;
}

/* ── Reel Row (meter column + slots column side by side) ── */
#reel-row {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(18px, 2vw, 30px);
    transform: translate(0, 0);
}

#reel-row::before {
    content: '';
    position: absolute;
    left: max(8px, 2vw);
    right: max(8px, 2vw);
    top: 50%;
    height: min(70vh, 760px);
    transform: translateY(-50%);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 230, 130, 0.13), rgba(0, 0, 0, 0.08) 18%, rgba(0, 0, 0, 0.32)),
        radial-gradient(ellipse at 50% 8%, rgba(255, 215, 0, 0.18), transparent 52%);
    border: 1px solid rgba(255, 215, 0, 0.18);
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 44px rgba(255, 215, 0, 0.05);
    pointer-events: none;
}

/* Slots column: paylines + reel-area + paylines in a row */
#reel-section {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    min-height: 0;
    position: relative;
    overflow: visible;
}

.meter-zone {
    position: absolute;
    left: 0;
    right: 0;
    transition: opacity 0.4s ease;
}

/* 3.7 — Marker proximity glow. Fires when the meter is within 5 points
   of an unreached threshold so the player sees the approach. */
@keyframes meterMarkerProximity {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.95));
        transform: scale(1.04);
    }
}

@keyframes meterProgressPulse {
    0%   { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    35%  { box-shadow: 0 0 18px rgba(255, 215, 0, 0.52); }
    100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
}

/* ── v2 cold-streak feedback ── */
/* "Even your cold spins are stacking your refund" — surfaced as live text */
.meter-streak {
    margin-top: 8px;
    padding: 6px 4px;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 215, 0, 0.85);
    font-family: 'Courier Prime', 'Courier New', monospace;
    line-height: 1.3;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 4px;
    transition: opacity 0.4s ease, border-color 0.4s ease;
}
.meter-streak[hidden] { display: none; }
.meter-streak .streak-count {
    color: #fff;
    font-weight: 800;
}
.meter-streak .streak-receipts {
    color: var(--money-green);
    font-weight: 800;
}
.meter-streak .streak-sep {
    color: rgba(255, 255, 255, 0.4);
    margin: 0 4px;
}
.meter-streak .streak-pitch {
    margin-top: 3px;
    font-size: 0.55rem;
    font-style: italic;
    color: rgba(255, 215, 0, 0.6);
    text-transform: none;
}
/* Cold-streak intensifies after 10+ dry spins — the moment the player most needs the message */
.meter-streak.cold {
    border-color: rgba(255, 215, 0, 0.45);
    background: rgba(0, 0, 0, 0.4);
    animation: streak-pulse 2s ease-in-out infinite;
}
@keyframes streak-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    50%      { box-shadow: 0 0 8px rgba(255, 215, 0, 0.35); }
}

/* ── Reel Area ── */
#reel-area {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    /* Transparent — the page background shows through the inter-reel
       column gaps. Canvas itself is also transparent. The page (or
       parent) is responsible for whatever the player sees BETWEEN
       reels — that's the "physical wheels mounted on the cabinet"
       aesthetic from the genre. */
    background: transparent;
    /* 2026-05-12 — Containment so the absolute-positioned overlays
       (#win-overlay, #feature-overlay) inside this element can't
       trigger parent-layout calcs. Without it, the cinematic rays/burst
       gradients were enough to invalidate sibling layout on mobile. */
    contain: layout paint;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.06) 18%, rgba(0,0,0,0.16)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.09), transparent 54%);
    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 215, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 -22px 42px rgba(0, 0, 0, 0.32);
}

/* 2026-09-19 Item 5: free-spins reel differentiation. During FS the reel
   area gets a gold/purple glow frame so the bonus reels are visibly
   distinct from the base game (wilds also carry xN badges). */
#reel-area.fs-active {
    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.42),
        0 0 0 2px rgba(255, 215, 0, 0.85),
        0 0 28px rgba(255, 215, 0, 0.45),
        0 0 64px rgba(156, 39, 176, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 -22px 42px rgba(0, 0, 0, 0.32);
}

#reel-area::before,
#reel-area::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
}

#reel-area::before {
    background:
        linear-gradient(110deg,
            transparent 0%,
            rgba(255, 255, 255, 0.00) 27%,
            rgba(255, 255, 255, 0.13) 38%,
            rgba(255, 255, 255, 0.03) 50%,
            transparent 62%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.10) 0%,
            transparent 18%,
            transparent 74%,
            rgba(0, 0, 0, 0.22) 100%);
    mix-blend-mode: screen;
    opacity: 0.62;
}

#reel-area::after {
    inset: 6px;
    border: 1px solid rgba(255, 236, 166, 0.18);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.34),
        inset 0 0 38px rgba(255, 215, 0, 0.05);
}

body.spin-active #reel-area::before {
    animation: reelGlassSweep 1.2s ease-in-out infinite;
}

@keyframes reelGlassSweep {
    0% { opacity: 0.34; transform: translateX(-2.5%); }
    50% { opacity: 0.72; transform: translateX(2.5%); }
    100% { opacity: 0.34; transform: translateX(-2.5%); }
}

#reel-canvas {
    display: block;
    transform-origin: center center;
    image-rendering: auto;
}

#win-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center,
        rgba(0,0,0,0.50) 0%,
        rgba(0,0,0,0.78) 60%,
        rgba(0,0,0,0.92) 100%);
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
    perspective: 1000px;
}

#win-overlay.hidden { display: none; }

/* Big-win share row (retention/marketing loop). The overlay is
   pointer-events:none so the buttons opt back in. */
#win-share-row {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    pointer-events: auto;
}
#win-share-row.hidden { display: none; }
#win-share-btn,
#win-link-btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: #1a1206;
    background: linear-gradient(180deg, #ffe44d 0%, #ffb700 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(255, 200, 40, 0.45);
}
#win-share-btn:active,
#win-link-btn:active { transform: scale(0.96); }
#win-share-feedback {
    font-size: 0.75rem;
    color: #ffe44d;
    min-width: 8ch;
}

/* Rotating sunburst rays behind the wordmark. Conic gradient with 18
   alternating gold/transparent wedges creates the "spinning radial light"
   effect at zero asset cost. Drives the cinematic feel — visible difference
   vs the old flat-background overlay. */
#win-rays {
    position: absolute;
    width: 180vmax;
    height: 180vmax;
    left: 50%;
    top: 50%;
    margin-left: -90vmax;
    margin-top: -90vmax;
    background: conic-gradient(from 0deg,
        rgba(255, 215, 0, 0.28) 0deg, transparent 10deg,
        rgba(255, 215, 0, 0.28) 20deg, transparent 30deg,
        rgba(255, 215, 0, 0.28) 40deg, transparent 50deg,
        rgba(255, 215, 0, 0.28) 60deg, transparent 70deg,
        rgba(255, 215, 0, 0.28) 80deg, transparent 90deg,
        rgba(255, 215, 0, 0.28) 100deg, transparent 110deg,
        rgba(255, 215, 0, 0.28) 120deg, transparent 130deg,
        rgba(255, 215, 0, 0.28) 140deg, transparent 150deg,
        rgba(255, 215, 0, 0.28) 160deg, transparent 170deg,
        rgba(255, 215, 0, 0.28) 180deg, transparent 190deg,
        rgba(255, 215, 0, 0.28) 200deg, transparent 210deg,
        rgba(255, 215, 0, 0.28) 220deg, transparent 230deg,
        rgba(255, 215, 0, 0.28) 240deg, transparent 250deg,
        rgba(255, 215, 0, 0.28) 260deg, transparent 270deg,
        rgba(255, 215, 0, 0.28) 280deg, transparent 290deg,
        rgba(255, 215, 0, 0.28) 300deg, transparent 310deg,
        rgba(255, 215, 0, 0.28) 320deg, transparent 330deg,
        rgba(255, 215, 0, 0.28) 340deg, transparent 350deg);
    opacity: 0;
    transform-origin: center;
    filter: blur(0.5px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

#win-overlay.tier-3 #win-rays,
#win-overlay.tier-4 #win-rays {
    background: conic-gradient(from 0deg,
        rgba(255, 200, 60, 0.45) 0deg, transparent 8deg,
        rgba(255, 100, 50, 0.40) 16deg, transparent 24deg,
        rgba(255, 215, 0, 0.45) 32deg, transparent 40deg,
        rgba(255, 100, 50, 0.40) 48deg, transparent 56deg,
        rgba(255, 215, 0, 0.45) 64deg, transparent 72deg,
        rgba(255, 100, 50, 0.40) 80deg, transparent 88deg,
        rgba(255, 215, 0, 0.45) 96deg, transparent 104deg,
        rgba(255, 100, 50, 0.40) 112deg, transparent 120deg,
        rgba(255, 215, 0, 0.45) 128deg, transparent 136deg,
        rgba(255, 100, 50, 0.40) 144deg, transparent 152deg,
        rgba(255, 215, 0, 0.45) 160deg, transparent 168deg,
        rgba(255, 100, 50, 0.40) 176deg, transparent 184deg,
        rgba(255, 215, 0, 0.45) 192deg, transparent 200deg,
        rgba(255, 100, 50, 0.40) 208deg, transparent 216deg,
        rgba(255, 215, 0, 0.45) 224deg, transparent 232deg,
        rgba(255, 100, 50, 0.40) 240deg, transparent 248deg,
        rgba(255, 215, 0, 0.45) 256deg, transparent 264deg,
        rgba(255, 100, 50, 0.40) 272deg, transparent 280deg,
        rgba(255, 215, 0, 0.45) 288deg, transparent 296deg,
        rgba(255, 100, 50, 0.40) 304deg, transparent 312deg,
        rgba(255, 215, 0, 0.45) 320deg, transparent 328deg,
        rgba(255, 100, 50, 0.40) 336deg, transparent 344deg);
}

/* Radial "burst" — sits between rays and wordmark, brightens the
   immediate halo around the win text without washing out the whole frame. */
#win-burst-bg {
    position: absolute;
    width: 90vmin;
    height: 90vmin;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(255, 215, 0, 0.45) 0%,
        rgba(255, 165, 0, 0.22) 30%,
        rgba(255, 0, 80, 0.10) 55%,
        transparent 75%);
    opacity: 0;
    filter: blur(8px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

/* Stage wraps the wordmark + amount and gets a unified scale-in transform
   so they zoom together for the cinematic moment. */
#win-stage {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform-style: preserve-3d;
    will-change: transform;
}

#win-kicker {
    min-height: 1.1rem;
    padding: 5px 14px;
    border: 1px solid rgba(255, 215, 0, 0.36);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.36);
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.68rem, 1.7vw, 0.86rem);
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

#win-kicker.hidden {
    display: none;
}

#win-type {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 900;
    background: linear-gradient(180deg, var(--gold), var(--warm-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    letter-spacing: 4px;
    text-transform: uppercase;
}

#win-amount {
    font-family: 'Montserrat', monospace;
    font-size: clamp(1.8rem, 6vw, 3.5rem);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5);
}

#win-multiplier {
    display: none;
    margin-top: -4px;
    padding: 5px 16px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.16), rgba(0, 0, 0, 0.28));
    color: rgba(255, 248, 220, 0.94);
    font-family: 'Courier Prime', monospace;
    font-size: clamp(0.82rem, 2vw, 1.1rem);
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.10);
}

#win-multiplier.visible {
    display: block;
}

#win-tier-ladder {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

#win-tier-ladder.visible {
    display: flex;
}

#win-tier-ladder span {
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.58rem, 1.4vw, 0.78rem);
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transform: translateY(0);
    transition: color 0.22s ease, border-color 0.22s ease,
        background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

#win-tier-ladder span.lit {
    color: #10130f;
    border-color: rgba(255, 255, 255, 0.72);
    background: linear-gradient(180deg, #FFF0A6, #D9A928);
    box-shadow:
        0 0 18px rgba(255, 215, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
    transform: translateY(-2px);
}

#win-tier-ladder span.current {
    color: #FFFFFF;
    border-color: rgba(255, 228, 77, 0.94);
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.36), transparent 58%),
        linear-gradient(180deg, #FFB02E, #B33A20);
    box-shadow:
        0 0 26px rgba(255, 215, 0, 0.72),
        0 0 42px rgba(255, 86, 43, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.46);
    transform: translateY(-4px) scale(1.06);
}

#win-dream-line {
    display: none;
    margin-top: 4px;
    padding: 7px 18px;
    border: 1px solid rgba(255, 215, 0, 0.42);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.72rem, 1.8vw, 0.95rem);
    font-weight: 900;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.48);
}

#win-dream-line:not(.hidden) {
    display: block;
}

#win-recovery-line {
    min-height: 1.05rem;
    margin-top: 2px;
    color: rgba(245, 245, 245, 0.82);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.64rem, 1.6vw, 0.82rem);
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
}

#win-recovery-line.visible {
    opacity: 1;
    transform: translateY(0);
}

body.jackpot-airdrop #win-overlay {
    background: radial-gradient(ellipse at center,
        rgba(0,0,0,0.66) 0%,
        rgba(0,0,0,0.88) 58%,
        rgba(0,0,0,0.96) 100%);
}

body.jackpot-airdrop #win-rays,
body.jackpot-airdrop #win-burst-bg {
    opacity: 0 !important;
}

/* Per-combo breakdown beneath the win amount. Each list item explains
   ONE paying combo — symbol + count + ways + payout. Lets the player
   read WHY they won, not just the total. 2026-05-12 — added per R3
   audit feedback "I hit $200 but I don't know why." */
#win-breakdown {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: min(560px, 88vw);
    opacity: 0;
    transition: opacity 0.45s ease 0.6s;
    pointer-events: none;
}
#win-breakdown.visible {
    opacity: 1;
}
#win-breakdown li {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.78rem, 1.8vw, 0.95rem);
    font-weight: 600;
    color: rgba(245, 245, 245, 0.92);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    background: linear-gradient(90deg,
        rgba(15, 18, 32, 0.55),
        rgba(15, 18, 32, 0.85),
        rgba(15, 18, 32, 0.55));
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 6px;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    letter-spacing: 0.4px;
}
#win-breakdown li .wb-symbol {
    color: var(--gold);
    font-weight: 800;
}
#win-breakdown li .wb-payout {
    color: rgba(220, 255, 220, 0.95);
    font-weight: 800;
    white-space: nowrap;
}
/* QA C2 (2026-09-13): the per-combo breakdown now renders for any win
   >= 1x bet. Tier-0 (small) wins get it in a quiet style rather than
   hidden — players couldn't tell WHICH combos paid. Wins under 1x still
   get the count-up only. */
.win-tier-0 ~ #win-breakdown:not(.quiet),
#win-overlay:not(.tier-1):not(.tier-2):not(.tier-3):not(.tier-4) #win-breakdown:not(.quiet) {
    display: none;
}
.win-tier-0 ~ #win-breakdown.quiet {
    opacity: 0.78;
    font-size: 0.82em;
    max-width: min(440px, 80vw);
}

/* QA C1 (2026-09-13): compact per-step win breakdown during free spins.
   Populated by game.js _showFSStepBreakdown(), cleared on the next step
   and at feature settle. */
#fs-step-breakdown {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 118px;
    z-index: 70;
    list-style: none;
    margin: 0;
    padding: 8px 14px;
    display: none;
    flex-direction: column;
    gap: 3px;
    background: rgba(8, 8, 18, 0.85);
    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 10px;
    pointer-events: none;
    font-size: 0.8rem;
    max-width: min(480px, 92vw);
}
#fs-step-breakdown.visible {
    display: flex;
}
#fs-step-breakdown li {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: #FFF8E7;
    white-space: nowrap;
}
#fs-step-breakdown .wb-payout {
    color: #FFD700;
    font-weight: 700;
}

/* 2.4 — Per-tier overlay text styling. _showWin() sets win-tier-N on the
   #win-type element (tier 1..4 = BIG / MEGA / EPIC / JACKPOT). Each tier
   scales the size + glow so the visual escalation matches the SFX/VFX. */
#win-type.win-tier-1 {
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    letter-spacing: 4px;
}
#win-type.win-tier-2 {
    font-size: clamp(2rem, 6vw, 3.2rem);
    letter-spacing: 6px;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
}
#win-type.win-tier-3 {
    font-size: clamp(2.4rem, 7vw, 4rem);
    letter-spacing: 8px;
    background: linear-gradient(180deg, #FFE44D, #FFA500, #FF6B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 14px rgba(255, 165, 0, 0.6));
}
#win-type.win-tier-4 {
    font-size: clamp(2.8rem, 8vw, 4.8rem);
    letter-spacing: 10px;
    background: linear-gradient(180deg, #FFFFFF, #FFE44D 30%, #FFA500 70%, #FF3B3B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 22px rgba(255, 215, 0, 0.85));
    text-transform: uppercase;
}

/* ── Effects Canvas Overlay ── */
#effects-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 35;
}

/* ── Feature Overlay ── */
#feature-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 30;
}

#feature-overlay.hidden { display: none; }

#feature-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    letter-spacing: 6px;
    margin-bottom: 20px;
}

#feature-content {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    color: var(--white);
    text-align: center;
}

.feature-beat {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.38);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.12), rgba(0, 0, 0, 0.35));
    color: #FFD700;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.66rem, 2.2vw, 0.9rem);
    font-weight: 900;
    letter-spacing: 1.4px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.45);
    box-shadow: inset 0 0 16px rgba(255, 215, 0, 0.08);
}

/* ── Bottom Controls ── */
#controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(0deg, #08081a 0%, #0f0f24 50%, var(--vault-black) 100%);
    border-top: 3px solid;
    border-image: linear-gradient(90deg, rgba(218,165,32,0.1), rgba(255,215,0,0.6), rgba(218,165,32,0.1)) 1;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    gap: 8px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-group.center {
    gap: 12px;
}

.display-panel {
    background: linear-gradient(180deg, rgba(13, 92, 50, 0.25), rgba(8, 60, 32, 0.35));
    border: 1px solid rgba(27, 140, 78, 0.4);
    border-radius: 6px;
    padding: 6px 16px;
    text-align: center;
    min-width: 100px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* 2026-09-21 Item 9: player-visible wallet-mode indicator. A tiny badge
   pinned to the balance panel's corner, bound to the server-authoritative
   wallet_mode from /init (GC = play money, SC = sweeps coins). */
.wallet-badge {
    position: absolute;
    top: -9px;
    right: -7px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 1px 7px;
    border-radius: 999px;
    color: #0b1f14;
    background: linear-gradient(180deg, #ffe27a, #f5b301);
    border: 1px solid rgba(255, 215, 0, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    cursor: help;
    z-index: 5;
}
.wallet-badge[data-mode="SC"] {
    background: linear-gradient(180deg, #9fd8ff, #2f9be8);
    border-color: rgba(159, 216, 255, 0.9);
}
.wallet-badge[data-mode="CASH"] {
    background: linear-gradient(180deg, #b6f0c0, #3fae5f);
    border-color: rgba(182, 240, 192, 0.9);
}
.wallet-badge.hidden { display: none; }

.bet-display {
    background: linear-gradient(180deg, rgba(218, 165, 32, 0.12), rgba(139, 105, 20, 0.18));
    border-color: rgba(218, 165, 32, 0.35);
    /* v2 — keep wide enough for "$25,000.00" total bet at the upper end of
       the high-roller ladder (denom 25¢ × multiplier 5 = $625; max
       theoretical $5/line × 50 × 5 = $1,250, but server caps at $25,000). */
    min-width: 110px;
}

.bet-display .display-label {
    /* The "5¢ × 3" copy reads as a header, not a generic label — bump
       contrast a touch above the default green/uppercase treatment. */
    text-transform: none;
    color: rgba(255, 215, 0, 0.9);
    letter-spacing: 0.5px;
    font-weight: 800;
    font-size: clamp(0.55rem, 1.4vw, 0.7rem);
    margin-bottom: 1px;
}

/* Server-suggested play-time hint below the total-bet value. */

#balance-panel {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}
#balance-panel:hover {
    border-color: rgba(255, 215, 0, 0.6);
    background: rgba(13, 92, 50, 0.35);
}
#balance-panel::after {
    content: '+';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.6rem;
    font-weight: 900;
    color: rgba(255, 215, 0, 0.5);
    line-height: 1;
}

/* Top-up popup */
#topup-popup {
    position: absolute;
    bottom: 70px;
    left: 12px;
    background: rgba(10, 10, 20, 0.95);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 10px;
    padding: 12px 16px;
    z-index: 60;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.1);
}

.topup-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--gold);
    text-align: center;
    margin-bottom: 10px;
}

.topup-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.topup-option {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #F5F5F5;
    background: linear-gradient(135deg, rgba(27, 140, 78, 0.3), rgba(13, 92, 50, 0.5));
    border: 1px solid rgba(27, 140, 78, 0.5);
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 80px;
}

.topup-option:hover {
    background: linear-gradient(135deg, rgba(27, 140, 78, 0.5), rgba(13, 92, 50, 0.7));
    border-color: var(--gold);
    color: var(--gold);
    transform: scale(1.05);
}

.display-label {
    display: block;
    font-size: clamp(0.4rem, 1.2vw, 0.55rem);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--money-green);
    text-transform: uppercase;
}

.display-value {
    display: block;
    font-family: 'Montserrat', monospace;
    font-size: clamp(0.8rem, 2vw, 1.1rem);
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4), 0 0 16px rgba(255, 215, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Info button */
.info-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--warm-gold);
    border-radius: 50%;
    background: var(--charcoal);
    color: var(--gold);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Georgia', serif;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-btn:hover {
    background: rgba(218, 165, 32, 0.2);
    transform: scale(1.05);
}

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

/* Sound toggle */
.sound-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--warm-gold);
    border-radius: 4px;
    background: var(--charcoal);
    color: var(--gold);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.sound-btn:hover {
    background: rgba(218, 165, 32, 0.2);
}

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

.sound-btn.muted {
    opacity: 0.5;
}

/* ── Volume Slider Popup ── */
#volume-popup {
    position: absolute;
    bottom: 70px;
    left: 12px;
    background: rgba(10, 10, 20, 0.97);
    border: 1px solid var(--warm-gold);
    border-radius: 10px;
    z-index: 60;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 240px;
    overflow: hidden;
}

/* Per-channel block — Music or Effects, each with its own slider + mute */
#volume-popup .volume-channel {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#volume-popup .volume-channel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#volume-popup .volume-channel-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #F5F5F5;
    flex: 1;
    letter-spacing: 0.5px;
}

#volume-popup .volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    background: transparent;
    outline: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

#volume-popup .volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--slate);
}

#volume-popup .volume-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--slate);
}

#volume-popup .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
    margin-top: -5px;
}

#volume-popup .volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

#volume-popup .volume-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 1px;
}

#volume-popup .volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#volume-popup .volume-icon {
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

#volume-popup .volume-pct {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--gold);
    min-width: 30px;
    text-align: right;
}

#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 14px;
    background: transparent;
    outline: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

#volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--slate);
}

#volume-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--slate);
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
    margin-top: -5px;
}

#volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.bet-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--warm-gold);
    border-radius: 4px;
    background: var(--charcoal);
    color: var(--gold);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bet-btn:hover {
    background: rgba(218, 165, 32, 0.2);
}

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

.bet-minmax {
    width: 42px;
    font-size: 0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
}

/* ── v2 Bet Selector — Denomination × Multiplier ──
   Two-row stacked layout: top row is the denom dropdown ("DENOM" label +
   <select>), bottom row is the multiplier ladder. Both rows hide
   themselves automatically when the operator restricts the list to a
   single option. Total bet renders in the adjacent .bet-display panel. */
.bet-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    min-width: 168px;
}

.bet-selector.disabled {
    opacity: 0.55;
    pointer-events: none;
}

.bet-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bet-row-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: rgba(218, 165, 32, 0.85);
    text-transform: uppercase;
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}

.denom-select {
    flex: 1;
    height: 28px;
    padding: 0 26px 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(218, 165, 32, 0.45);
    background:
        linear-gradient(180deg, rgba(218, 165, 32, 0.18), rgba(139, 105, 20, 0.22)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23FFD700'><path d='M6 8L0 0h12z'/></svg>") no-repeat right 8px center / 8px 6px;
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.denom-select:hover,
.denom-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    outline: none;
}

.denom-select option {
    background: #1a1a2a;
    color: var(--gold);
}

.mult-buttons {
    flex: 1;
    display: flex;
    gap: 4px;
}

.mult-btn {
    flex: 1;
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(218, 165, 32, 0.4);
    background: var(--charcoal);
    color: rgba(255, 215, 0, 0.65);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 0;
}

.mult-btn:hover:not(.active):not(:disabled) {
    background: rgba(218, 165, 32, 0.18);
    color: var(--gold);
}

.mult-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.mult-btn.active {
    background: linear-gradient(180deg, var(--gold), var(--warm-gold));
    color: #1a1a2a;
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.mult-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* (.bet-display .display-label rules consolidated under the .bet-display
    block above — see "v2" min-width / color comments.) */

.spin-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2aad60, var(--money-green), var(--deep-green));
    border: 3px solid var(--gold);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 0 15px rgba(27, 140, 78, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    flex-shrink: 0;
}

.spin-btn:hover {
    box-shadow: 0 0 25px rgba(27, 140, 78, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.spin-btn:active {
    transform: scale(0.95);
    background: radial-gradient(circle at 50% 50%, var(--deep-green), #0a3d1a);
    box-shadow: 0 0 10px rgba(27, 140, 78, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.spin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    animation: none;
}

/* 1.2 — Spin Button Idle Pulse */
@keyframes spinIdlePulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(27, 140, 78, 0.4), 0 0 30px rgba(27, 140, 78, 0.2),
                    0 0 10px rgba(255, 215, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: scale(1.0);
    }
    50% {
        box-shadow: 0 0 20px rgba(27, 140, 78, 0.6), 0 0 40px rgba(27, 140, 78, 0.3),
                    0 0 20px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: scale(1.03);
    }
}

.spin-btn:not(:disabled) {
    animation: spinIdlePulse 2s ease-in-out infinite;
}

.spin-btn:active {
    animation: none;
}

.spin-arrow {
    color: var(--gold);
    font-size: 1.4rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Slam-stop: while the reels spin, the spin button shows a stop
   affordance (amber tint + square glyph swapped in by JS). */
.spin-btn.is-spinning {
    background: radial-gradient(circle at 35% 35%, #b07a1e, #7a4d0f, #4a2f08);
    border-color: #ffd700;
}

/* ── Turbo & Auto Buttons ── */
.turbo-btn, .auto-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--charcoal);
    border: 2px solid var(--slate);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.turbo-btn {
    font-size: 1.1rem;
}

.turbo-btn:hover, .auto-btn:hover {
    border-color: var(--warm-gold);
    background: rgba(255, 215, 0, 0.1);
}

.turbo-btn.active {
    background: rgba(255, 152, 0, 0.2);
    border-color: #FF9800;
    color: #FF9800;
    box-shadow: 0 0 12px rgba(255, 152, 0, 0.3);
}

.auto-btn.active {
    background: rgba(33, 150, 243, 0.2);
    border-color: #2196F3;
    color: #2196F3;
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.3);
    animation: autoPulse 1.2s ease infinite;
}

@keyframes autoPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(33, 150, 243, 0.3); }
    50% { box-shadow: 0 0 20px rgba(33, 150, 243, 0.6); }
}

/* ── History Button ── */
.history-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--warm-gold);
    border-radius: 50%;
    background: var(--charcoal);
    color: var(--gold);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.history-btn:hover {
    background: rgba(218, 165, 32, 0.2);
    transform: scale(1.05);
}

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

/* ── History Panel ── */
#history-panel {
    position: absolute;
    bottom: 70px;
    left: 12px;
    width: 280px;
    max-height: 360px;
    background: rgba(10, 10, 20, 0.97);
    border: 1px solid var(--warm-gold);
    border-radius: 10px;
    z-index: 60;
    overflow-y: auto;
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
}

#history-panel .history-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--gold);
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

#history-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.history-entry .h-replay,
.history-entry .h-share {
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.1);
    color: var(--gold);
    font-size: 0.58rem;
    font-weight: 800;
    padding: 3px 6px;
    cursor: pointer;
}

#replay-viewer {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
}

.replay-card {
    width: min(420px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 48px));
    overflow: auto;
    background: rgba(15, 18, 32, 0.96);
    border: 1px solid rgba(255, 215, 0, 0.34);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.62);
    padding: 18px;
    color: var(--paper);
}

.replay-close {
    float: right;
    border: 0;
    background: transparent;
    color: var(--paper);
    font-size: 1.3rem;
    cursor: pointer;
}

.replay-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 2px;
}

.replay-meta {
    margin-top: 4px;
    color: var(--slate);
    font-size: 0.72rem;
}

.replay-events {
    margin: 14px 0 0;
    padding-left: 0;
    list-style: none;
}

.replay-events li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
}

.replay-events span {
    color: var(--slate);
}

.history-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.7rem;
}

.history-entry .h-num {
    color: var(--slate);
    font-weight: 700;
    min-width: 28px;
}

.history-entry .h-bet {
    color: var(--white);
    min-width: 50px;
}

.history-entry .h-win {
    min-width: 58px;
    font-weight: 700;
}

.history-entry .h-win.win-positive {
    color: #4CAF50;
}

.history-entry .h-win.win-zero {
    color: var(--slate);
}

.history-entry .h-feature {
    color: var(--bonus-purple);
    font-weight: 700;
    font-size: 0.6rem;
}

/* ── Autoplay Settings Panel ── */
#autoplay-panel {
    position: absolute;
    bottom: 70px;
    right: 50%;
    transform: translateX(50%);
    width: 290px;
    background: rgba(10, 10, 20, 0.97);
    border: 1px solid var(--warm-gold);
    border-radius: 10px;
    z-index: 60;
    padding: 14px 16px;
    font-family: 'Montserrat', sans-serif;
}

.autoplay-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--gold);
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.autoplay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.autoplay-row label {
    font-size: 0.65rem;
    color: var(--white);
    font-weight: 600;
}

.autoplay-input {
    width: 80px;
    background: rgba(30, 30, 50, 0.9);
    border: 1px solid var(--slate);
    border-radius: 4px;
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 8px;
    text-align: right;
    outline: none;
}

.autoplay-input:focus {
    border-color: var(--warm-gold);
}

.autoplay-select {
    width: 100px;
    background: rgba(30, 30, 50, 0.9);
    border: 1px solid var(--slate);
    border-radius: 4px;
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 8px;
    outline: none;
}

.autoplay-select:focus {
    border-color: var(--warm-gold);
}

.autoplay-checkbox {
    accent-color: var(--gold);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.autoplay-buttons {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.autoplay-start-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(180deg, #2aad60, var(--deep-green));
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.autoplay-start-btn:hover {
    filter: brightness(1.15);
}

.autoplay-cancel-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--slate);
    border-radius: 6px;
    background: transparent;
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.autoplay-cancel-btn:hover {
    border-color: var(--warm-gold);
}

/* ── Win Animations ── */
@keyframes winPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.win-active #win-panel {
    animation: winPulse 0.5s ease infinite;
    border-color: var(--gold);
    background: rgba(255, 215, 0, 0.15);
}

/* ── Info Modal ── */
#info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#info-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.info-modal {
    width: min(95vw, 800px);
    height: min(85vh, 700px);
    background: linear-gradient(180deg, #1e1e38, var(--vault-black));
    border: 1px solid var(--warm-gold);
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.1);
}

.info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    flex-shrink: 0;
    /* 2026-09-21 QA follow-up: anchor the absolutely-positioned close
       button to the header itself and keep the title text clear of it. */
    position: relative;
    z-index: 2;
}

.info-modal-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 3vw, 1.4rem);
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 2px;
    /* 2026-09-21 QA follow-up: title text never slides under the ×. */
    padding-right: 48px;
}

.info-close-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    /* P2 fix: pin the close button above the header so the title/banner
       can never overlap it and steal clicks. */
    position: absolute;
    top: 12px;
    right: 16px;
    /* 2026-09-21 QA follow-up: keep the × above any header artwork so it
       is always visible and clickable. */
    z-index: 50;
    pointer-events: auto;
    border-radius: 50%;
    border: 1px solid var(--slate);
    background: var(--charcoal);
    color: var(--white);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.info-close-btn:hover {
    background: var(--refund-red);
    border-color: var(--refund-red);
}

.info-pages-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* QA round 2 (info dialog blank-after-scroll): the GSAP page-transition
   transform on .info-page promoted the scroll container to a composited
   layer that painted blank once scrolled. Scrolling now lives on an
   inner .info-page-scroll that NEVER receives a transform, so scrolled
   content repaints normally. */
.info-page {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(100%);
    transition: none;
}

.info-page-scroll {
    position: absolute;
    inset: 0;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.info-page.active {
    opacity: 1;
    transform: translateX(0);
}

.info-page h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.info-page p, .info-page li {
    font-size: clamp(0.75rem, 2vw, 0.88rem);
    line-height: 1.6;
    color: var(--white);
    opacity: 0.85;
}

.info-page ul {
    list-style: none;
    padding-left: 0;
}

.info-page ul li {
    padding: 4px 0 4px 16px;
    position: relative;
}

.info-page ul li::before {
    content: '\25B8';
    position: absolute;
    left: 0;
    /* QA P3: explicit vertical anchor + no pointer interference so the
       marker can't drift over wrapped text on narrow modals. */
    top: 4px;
    line-height: 1.4;
    color: var(--money-green);
    pointer-events: none;
}

.info-page .paytable-grid {
    display: grid;
    /* auto-fit + smaller min so columns don't overflow on tablet-ish modal
       widths (Cowork bug 11.4: rightmost column was being clipped). */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.paytable-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    /* min-width:0 lets the grid item shrink below intrinsic content width
       so a long .sym-pays string can't push the column past 1fr. */
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.paytable-item .sym-icon {
    /* QA P3: the onerror fallback tile — same footprint as the image so a
       missing symbol asset degrades to a tidy tile, never a tiny box. */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--warm-gold);
    background: rgba(255, 215, 0, 0.07);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 6px;
}

.paytable-item .sym-icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin: 0 auto 4px;
    image-rendering: auto;
    /* QA P3: tile backdrop so a slow/failed image doesn't render as a
       bare white rectangle while loading. */
    background: rgba(255, 215, 0, 0.06);
    border-radius: 6px;
}

.paytable-item .sym-name {
    font-size: 0.65rem;
    color: var(--warm-gold);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    /* QA P3: long names wrap instead of clipping out of the tile. */
    white-space: normal;
    overflow-wrap: break-word;
}

.paytable-item .sym-pays {
    font-size: 0.7rem;
    color: var(--white);
    opacity: 0.8;
    line-height: 1.4;
    display: block;
    /* QA P3: "3: NO PAY • 4: 0.12x • 5: 0.35x" wraps inside the tile
       instead of clipping past its edge. */
    white-space: normal;
    overflow-wrap: break-word;
}

.info-section {
    margin-bottom: 20px;
}

.info-section:last-child {
    margin-bottom: 0;
}

/* ── Vault Crack Pick Grid ── */
.vault-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.vault-door {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #2D2D3F, #1A1A2E);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    perspective: 600px;
}

.vault-door:hover:not(.revealed) {
    transform: scale(1.08);
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.vault-door.revealed {
    cursor: default;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    opacity: 0.7;
}

.vault-door-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: 'Montserrat', sans-serif;
    color: #F5F5F5;
}

.vault-prize {
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
}

/* ── Match 3 Tracker ── */
.match-tracker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.match-tracker-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
}

.match-tracker-item.hot {
    border-color: #FF3B3B;
    background: rgba(255, 59, 59, 0.15);
    box-shadow: 0 0 12px rgba(255, 59, 59, 0.4);
    animation: hotPulse 0.8s ease infinite;
}

@keyframes hotPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 59, 59, 0.4); }
    50% { box-shadow: 0 0 24px rgba(255, 59, 59, 0.7); }
}

.match-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #F5F5F5;
    letter-spacing: 0.5px;
    min-width: 30px;
}

.match-dots {
    display: flex;
    gap: 3px;
}

.match-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.match-dot.filled {
    background: #FFD700;
    border-color: #FFD700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.match-tracker-item.hot .match-dot.filled {
    background: #FF3B3B;
    border-color: #FF3B3B;
    box-shadow: 0 0 8px rgba(255, 59, 59, 0.6);
}

.match-count {
    font-size: 0.55rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    min-width: 18px;
    text-align: right;
}

.match-tracker-item.hot .match-count {
    color: #FF3B3B;
}

.vault-door.matched {
    border-color: #FFD700 !important;
    opacity: 1 !important;
}

.feature-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.feature-card h4 {
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 6px;
}

.feature-card p {
    font-size: clamp(0.7rem, 1.8vw, 0.82rem);
    opacity: 0.8;
}

.info-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.15);
    flex-shrink: 0;
}

.info-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--slate);
    background: var(--charcoal);
    color: var(--white);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-nav-btn:hover {
    background: rgba(218, 165, 32, 0.2);
    border-color: var(--warm-gold);
}

.info-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.info-dots {
    display: flex;
    gap: 8px;
}

.info-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--slate);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}

.info-dot.active {
    background: var(--gold);
    transform: scale(1.3);
}

/* ── v2: Payline number columns retired (lines→ways migration). ──
   Selectors retained as no-display safety net in case cached HTML
   from before the v2 push still has the markup. The active reel-section
   layout no longer references these classes. */
.payline-col-left, .payline-col-right { display: none !important; }
.payline-num { display: none !important; }

/* ── 3.8 Win Border Glow ── */
@keyframes borderGlow {
    0%, 100% { box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.1), 0 0 15px rgba(255, 215, 0, 0.1); }
    50% { box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.25), 0 0 30px rgba(255, 215, 0, 0.2); }
}

.win-border-glow {
    animation: borderGlow 1s ease-in-out infinite;
}

.win-border-glow-mega {
    animation: borderGlow 0.6s ease-in-out infinite;
}

/* ── Reel Anticipation ──
   Fires when 2+ scatters land on reels 1-2. Glowing gold inset with a
   rapid pulse + tiny jitter sells the "will-it-land" tension. */
@keyframes reelAnticipation {
    0%, 100% { box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.2), 0 0 40px rgba(255, 215, 0, 0.3); }
    50%      { box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.55), 0 0 80px rgba(255, 215, 0, 0.6); }
}
@keyframes reelAnticipationJitter {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-1.5px, 1px); }
    50%      { transform: translate(1.5px, -1px); }
    75%      { transform: translate(-1px, -1px); }
}

#reel-area.anticipation {
    animation:
        reelAnticipation 0.45s ease-in-out infinite,
        reelAnticipationJitter 0.12s linear infinite;
    border-radius: 8px;
}

/* ── Animation Director v1: outcome-backed motion cues ── */
@keyframes spinStartPulse {
    0%   { filter: saturate(1) brightness(1); }
    28%  { filter: saturate(1.2) brightness(1.08); }
    100% { filter: saturate(1) brightness(1); }
}

@keyframes reelStopImpact {
    0%   { box-shadow: inset 0 0 0 rgba(255, 215, 0, 0); }
    35%  { box-shadow: inset 0 0 34px rgba(255, 215, 0, 0.32), 0 0 20px rgba(255, 215, 0, 0.18); }
    100% { box-shadow: inset 0 0 0 rgba(255, 215, 0, 0); }
}

@keyframes symbolLandImpact {
    0%   { filter: brightness(1); }
    40%  { filter: brightness(1.18) saturate(1.24); }
    100% { filter: brightness(1); }
}

@keyframes anticipationResolved {
    0%   { filter: brightness(1.14) saturate(1.18); }
    46%  { filter: brightness(0.92) saturate(0.9); }
    100% { filter: brightness(1) saturate(1); }
}

@keyframes anticipationRecoveryNote {
    0% {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.92);
    }
    22% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -68%) scale(0.96);
    }
}

@keyframes symbolLandingStamp {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-15deg) scale(1.42);
        filter: blur(2px);
    }
    22% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-7deg) scale(1);
        filter: blur(0);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -61%) rotate(-7deg) scale(0.96);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -74%) rotate(-7deg) scale(0.86);
    }
}

@keyframes featureTriggerCharge {
    0%   { box-shadow: inset 0 0 0 rgba(255, 215, 0, 0); filter: brightness(1); }
    45%  { box-shadow: inset 0 0 90px rgba(255, 215, 0, 0.28), 0 0 70px rgba(39, 216, 96, 0.18); filter: brightness(1.14); }
    100% { box-shadow: inset 0 0 0 rgba(255, 215, 0, 0); filter: brightness(1); }
}

@keyframes countupCompletePop {
    0%   { transform: scale(1); }
    42%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

body.spin-start-pulse #game-container {
    animation: spinStartPulse 0.42s ease-out both;
}

body.reel-stop-impact #reel-area {
    animation: reelStopImpact 0.18s ease-out both;
}

body.symbol-land-impact #reel-area {
    animation: symbolLandImpact 0.28s ease-out both;
}

body.anticipation-resolved #reel-area {
    animation: anticipationResolved 0.52s ease-out both;
}

.anticipation-recovery-note {
    position: fixed;
    z-index: 87;
    transform: translate(-50%, -50%);
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(8, 12, 20, 0.84);
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.62rem, 1.7vw, 0.82rem);
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    animation: anticipationRecoveryNote 0.72s ease-out forwards;
}

.symbol-landing-stamp {
    position: fixed;
    z-index: 88;
    transform: translate(-50%, -50%) rotate(-7deg);
    padding: 5px 9px;
    border: 2px solid rgba(255, 215, 0, 0.88);
    border-radius: 5px;
    background:
        repeating-linear-gradient(-7deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 8px),
        linear-gradient(180deg, rgba(43, 30, 10, 0.96), rgba(102, 61, 13, 0.96));
    color: #FFEFA8;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.58rem, 1.5vw, 0.78rem);
    font-weight: 1000;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    box-shadow:
        0 0 18px rgba(255, 215, 0, 0.52),
        inset 0 0 12px rgba(255, 255, 255, 0.12);
    animation: symbolLandingStamp 0.78s cubic-bezier(0.16, 0.88, 0.28, 1) forwards;
}

body.feature-trigger-charge #reel-area {
    animation: featureTriggerCharge 0.9s ease-out both;
}

body.countup-climbing #win-panel,
body.countup-climbing #win-value {
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.55));
}

body.countup-complete-pop #win-panel {
    animation: countupCompletePop 0.52s cubic-bezier(0.2, 0.9, 0.2, 1.25) both;
}

body.win-line-impact[data-win-tier="2"] #reel-area,
body.win-line-impact[data-win-tier="3"] #reel-area,
body.win-line-impact[data-win-tier="4"] #reel-area {
    box-shadow: 0 0 54px rgba(255, 215, 0, 0.34);
}

body.reduced-stimulation.spin-start-pulse #game-container,
body.reduced-stimulation.reel-stop-impact #reel-area,
body.reduced-stimulation.symbol-land-impact #reel-area,
body.reduced-stimulation.feature-trigger-charge #reel-area,
body.reduced-stimulation.countup-complete-pop #win-panel {
    animation: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* ── Screen Shake ── */
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-3px, 2px); }
    20% { transform: translate(3px, -2px); }
    30% { transform: translate(-2px, 3px); }
    40% { transform: translate(2px, -1px); }
    50% { transform: translate(-1px, 2px); }
    60% { transform: translate(1px, -1px); }
    70% { transform: translate(-2px, 1px); }
    80% { transform: translate(1px, -2px); }
    90% { transform: translate(-1px, 1px); }
}

html.screen-shake-active {
    overflow: hidden !important;
}

.screen-shake {
    animation: screenShake 0.6s ease;
    overflow: hidden !important;
}

/* ── Responsive — Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    #reel-row {
        flex: 0 0 auto;
        flex-direction: column;
        gap: 0;
        padding: 0;
        transform: none;
        justify-content: flex-start;
    }

    #reel-row::before {
        top: 0;
        bottom: 0;
        height: auto;
        transform: none;
        border-radius: 10px;
    }

    #reel-row::after {
        content: '';
        position: absolute;
        left: 5%;
        right: 5%;
        top: 300px;
        bottom: 18px;
        z-index: 0;
        pointer-events: none;
        border-radius: 14px;
        background:
            radial-gradient(ellipse at 50% 18%, rgba(255, 215, 0, 0.16), transparent 52%),
            linear-gradient(180deg, rgba(255,255,255,0.035), transparent 20%),
            repeating-linear-gradient(90deg, transparent 0 28px, rgba(255, 215, 0, 0.035) 28px 29px, transparent 29px 58px);
        opacity: 0.86;
        mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 88%, transparent 100%);
    }

    body.theme-refund_rush #reel-row::after {
        background:
            radial-gradient(ellipse at 50% 28%, rgba(255, 215, 0, 0.24), transparent 58%),
            url('/themes/refund_rush/characters/mascot/master.png?v=2026-04-25') center 34% / min(62vw, 230px) auto no-repeat,
            linear-gradient(180deg, rgba(255,255,255,0.035), transparent 22%),
            repeating-linear-gradient(90deg, transparent 0 28px, rgba(255, 215, 0, 0.035) 28px 29px, transparent 29px 58px);
        opacity: 0.56;
    }

    body.theme-trucker_tom #reel-row::after {
        background:
            radial-gradient(ellipse at 50% 28%, rgba(139, 228, 255, 0.20), transparent 58%),
            url('/themes/trucker_tom/characters/mascot/thumbs_up_01.png') center 34% / min(62vw, 230px) auto no-repeat,
            linear-gradient(180deg, rgba(255,255,255,0.035), transparent 22%),
            repeating-linear-gradient(90deg, transparent 0 32px, rgba(139, 228, 255, 0.032) 32px 33px, transparent 33px 64px);
        opacity: 0.56;
    }

    #reel-section {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: min(58vw, 230px);
        max-height: 230px;
        min-height: 0;
    }

    .meter-zone {
        top: 0;
        bottom: 0;
        height: 100%;
        width: auto;
    }

    #controls {
        flex-wrap: wrap;
        padding: 6px 8px;
        gap: 4px;
        width: 100%;
        margin-left: 0;
    }
    .control-group.left {
        order: 1;
        flex: 1 1 auto;
        gap: 6px;
    }
    .control-group.right {
        order: 2;
        flex: 0 0 auto;
    }
    .control-group.center {
        order: 3;
        flex: 1 0 100%;
        justify-content: center;
        gap: 4px;
    }

    #progressive-display {
        padding: 3px 4px;
        width: 100%;
        margin-left: 0;
    }

    #jp-containers {
        flex-wrap: wrap;
        gap: 3px;
    }

    /* Mobile — all 4 jp-tiles on one row (not 2x2) to give reels
       more vertical space. */
    .jp-tile {
        flex: 1 1 calc(25% - 3px);
        padding: 3px 4px;
        gap: 3px;
        border-radius: 5px;
        min-width: 0;
    }

    .jp-tile-img {
        width: 24px;
        height: 24px;
    }

    .jp-tile-grand .jp-tile-img { width: 26px; height: 26px; }

    .jp-label { font-size: 0.32rem; letter-spacing: 0.2px; }
    .jp-value { font-size: 0.6rem; }
    .jp-tile-major .jp-value { font-size: 0.6rem; }
    .jp-tile-grand .jp-value { font-size: 0.65rem; }

    /* Hide the decorative title banner on mobile — its logo + text
       duplicate the progressive display's branding and eat ~45px of
       precious vertical space. */
    #game-title-banner { display: none; }

    .display-panel {
        min-width: 0;
        padding: 3px 6px;
        flex: 1;
    }
    .display-value {
        font-size: clamp(0.7rem, 1.8vw, 0.9rem);
    }

    .bet-btn {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    .bet-minmax {
        width: 32px;
        font-size: 0.5rem;
    }

    /* v2 Bet selector on mobile — compress denom + multiplier rows. */
    .bet-selector { min-width: 0; flex: 1 1 auto; gap: 2px; }
    .bet-row { gap: 4px; }
    .bet-row-label { width: 28px; font-size: 0.4rem; letter-spacing: 0.8px; }
    .denom-select { height: 24px; font-size: 0.65rem; padding: 0 22px 0 6px; }
    .mult-btn { height: 24px; min-width: 22px; font-size: 0.6rem; }

    .payline-col-left, .payline-col-right {
        display: none;
    }

    .spin-btn:not(:disabled) {
        animation-name: spinIdlePulseMobile;
    }

    @keyframes spinIdlePulseMobile {
        0%, 100% {
            box-shadow: 0 0 15px rgba(27, 140, 78, 0.4), 0 0 10px rgba(255, 215, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transform: scale(1.0);
        }
        50% {
            box-shadow: 0 0 20px rgba(27, 140, 78, 0.6), 0 0 20px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transform: scale(1.02);
        }
    }

    .spin-btn {
        width: 44px;
        height: 44px;
        border-width: 2px;
    }

    .spin-arrow {
        font-size: 0.95rem;
    }

    .turbo-btn, .auto-btn {
        width: 30px;
        height: 30px;
        font-size: 0.6rem;
    }
    .turbo-btn { font-size: 0.9rem; }

    .info-btn, .sound-btn, .history-btn {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    #history-panel {
        width: 260px;
        max-height: 300px;
        bottom: 100px;
    }

    #volume-popup {
        bottom: 100px;
    }

    #autoplay-panel {
        min-width: 240px;
        max-width: 90vw;
        bottom: 100px;
    }

    #topup-popup {
        bottom: 100px;
    }

    .info-page-scroll {
        padding: 14px;
    }

    .paytable-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    }}

/* ── Responsive — Tablet (481–1024px) ── */
/* Tablet: 481-900px stacks vertically. 901-1199 uses desktop horizontal
   layout; many laptops report 1280-1366 width and got incorrectly flipped
   to the column-stacked tablet layout when the cutoff was 1024, which
   shrank the reels. Pushed boundary to 900 so tablets only when truly
   tablet-shaped. */
@media (min-width: 481px) and (max-width: 900px) {
    #reel-row {
        flex: 0 0 auto;
        flex-direction: column;
        gap: 0;
        padding: 0;
        justify-content: flex-start;
    }

    #reel-row::before {
        top: 0;
        bottom: 0;
        height: auto;
        transform: none;
        border-radius: 12px;
    }

    #reel-row::after {
        content: '';
        position: absolute;
        left: 8%;
        right: 8%;
        top: min(62vw, 450px);
        bottom: 24px;
        z-index: 0;
        pointer-events: none;
        border-radius: 18px;
        background:
            radial-gradient(ellipse at 50% 14%, rgba(255, 215, 0, 0.16), transparent 54%),
            repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 215, 0, 0.032) 42px 43px, transparent 43px 86px);
        opacity: 0.6;
        mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 88%, transparent 100%);
    }

    #reel-section {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: min(58vw, 420px);
        max-height: 420px;
        min-height: 0;
    }

    .payline-col-left, .payline-col-right {
        display: none;
    }

    .meter-zone {
        top: 0;
        bottom: 0;
        height: 100%;
        width: auto;
    }

    #controls {
        padding: 10px 16px;
    }

    #jp-containers {
        gap: 6px;
    }

    .jp-tile {
        padding: 3px 8px 3px 3px;
        gap: 5px;
    }

    .jp-tile-img {
        width: 42px;
        height: 42px;
    }

    .jp-label { font-size: 0.4rem; }
    .jp-value { font-size: 0.85rem; }
    .jp-tile-major .jp-value { font-size: 0.9rem; }
    .jp-tile-grand .jp-value { font-size: 1rem; }

    #game-title-banner { padding: 3px 12px 1px; margin-left: 0; }
    .title-logo { height: 56px; max-height: 56px; max-width: 56px; }

    .display-panel {
        min-width: 90px;
    }}

/* ── Responsive — Desktop (>1024px) ── */
/* Desktop / large tablet: ≥901px gets the full horizontal layout with
   payline columns flanking the reels. (Was ≥1025; shrunk to capture
   common laptop sizes that were getting tablet-stacked.) */
@media (min-width: 901px) {
    #game-container {
        justify-content: center;
    }

    #game-ui {
        max-width: 1400px;     /* was 1200; allow wider reels on big screens */
        width: 100%;
    }}

/* ── Compact Desktop (901-1199px) — small laptops / split-screen ──
   R4-D fix (2026-05-12). The default desktop controls bar adds up to
   ~1080-1100px of horizontal content (left buttons + balance + bet
   selector + bet display + spin + turbo + auto + buy-bonus + win
   panel + gaps). At 1024 / 1100 viewports the row was overflowing or
   squishing buttons into illegible 30px squares. Solution: a tighter
   variant — drop secondary buttons, trim padding, shrink display
   panels. Keep all PRIMARY functions (spin, bet, balance, win) at
   readable size. */
@media (min-width: 901px) and (max-width: 1199px) {
    /* Drop the Receipts Album button from this band — it's a
       collection meta-loop button, not core play. Same gesture is
       available via the info modal "Receipts Album" tab on narrow
       screens, so no functionality is lost. */
    .album-btn.desktop-only {
        display: none !important;
    }
    /* Tighten the controls bar so it fits without overflow. */
    #controls {
        padding: 8px 12px;
        gap: 6px;
    }
    .control-group {
        gap: 6px;
    }
    .control-group.center {
        gap: 8px;
    }
    /* Smaller display panels — still readable at this viewport size.
       The values shown (BALANCE $2,500.00 / WIN $12.50) fit comfortably
       at this min-width. */
    .display-panel {
        min-width: 84px;
        padding: 5px 10px;
    }
    .bet-display {
        min-width: 92px;
    }
    /* Action buttons sized down ~12% so the row fits.
       2026-09-24 — this comment used to claim the result "still meets the
       36px iOS / 40px Android minimum." Both numbers are wrong: Apple's HIG
       specifies 44x44pt and Material specifies 48x48dp. The row was shrunk
       against a standard that does not exist, and the visual sizes below are
       kept only because the row is genuinely tight. The 44px hit areas are
       restored by the ::after blocks at the end of this file. */
    .info-btn, .history-btn, .sound-btn, .menu-btn {
        width: 38px !important;
        height: 38px !important;
    }
    .turbo-btn, .auto-btn {
        min-height: 38px;
        padding: 0 10px;
        font-size: 0.78rem;
    }
    .buy-bonus-btn {
        min-height: 38px;
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    .spin-btn {
        width: 62px !important;
        height: 62px !important;
    }
    /* Tighten the bet selector so it doesn't crowd the spin button. */
    .bet-selector {
        gap: 4px;
    }
    .bet-row-label {
        font-size: 0.65rem;
    }}

/* ── Large Desktop (>1600px) ── */
@media (min-width: 1600px) {

    .jp-tile-img {
        width: 60px;
        height: 60px;
    }

    .jp-tile-grand .jp-tile-img { width: 66px; height: 66px; }

    .jp-label { font-size: 0.55rem; }
    .jp-value { font-size: 1.15rem; }
    .jp-tile-major .jp-value { font-size: 1.2rem; }
    .jp-tile-grand .jp-value { font-size: 1.35rem; }

    #game-title-banner { padding: 8px 20px 6px; margin-left: calc(66px + 24px); }
    .title-logo { height: 110px; max-height: 110px; max-width: 110px; }}

/* ── Refund Rush premium cabinet pass ──
   The original screen had better assets than composition: the title was a
   flat billboard, the vault background competed with symbols, and the stage
   lacked a physical cabinet read. These overrides keep layout contracts
   stable while moving the surface toward a casino-grade machine. */
body.theme-refund_rush #game-container::before {
    background:
        radial-gradient(ellipse at 50% 28%, rgba(255, 220, 112, 0.14) 0%, rgba(255, 220, 112, 0.05) 25%, transparent 54%),
        radial-gradient(ellipse at 50% 70%, rgba(18, 151, 93, 0.12), transparent 44%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.18) 22%, rgba(0, 0, 0, 0.18) 78%, rgba(0, 0, 0, 0.72)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.30), transparent 28%, rgba(0, 0, 0, 0.72));
    mix-blend-mode: normal;
}

body.theme-refund_rush #game-container::after {
    background:
        linear-gradient(90deg,
            transparent 0 13%,
            rgba(255, 216, 95, 0.06) 13.2% 13.6%,
            transparent 13.8% 86%,
            rgba(255, 216, 95, 0.06) 86.2% 86.6%,
            transparent 86.8%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 62px);
    opacity: 0.42;
    mask-image: radial-gradient(ellipse at 50% 48%, black 0%, black 55%, transparent 83%);
}

body.theme-refund_rush #game-title-banner {
    position: relative;
    z-index: 3;
    width: min(520px, 48vw);
    min-height: 54px;
    margin: 6px auto 2px;
    padding: 8px 22px 10px;
    gap: 12px;
    border-radius: 14px 14px 28px 28px;
    background:
        linear-gradient(180deg, rgba(255, 235, 150, 0.18), transparent 28%),
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.28), transparent 60%),
        linear-gradient(180deg, rgba(13, 20, 30, 0.92), rgba(5, 8, 14, 0.86));
    border: 1px solid rgba(255, 222, 116, 0.55);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.32),
        0 0 34px rgba(255, 210, 80, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -16px 28px rgba(0, 0, 0, 0.44);
}

body.theme-refund_rush #game-title-banner::before,
body.theme-refund_rush #game-title-banner::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

body.theme-refund_rush #game-title-banner::before {
    left: 22px;
    right: 22px;
    top: 7px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 248, 201, 0.82), transparent);
}

body.theme-refund_rush #game-title-banner::after {
    left: 50%;
    bottom: -8px;
    width: 72%;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.24), transparent 68%);
    filter: blur(4px);
}

body.theme-refund_rush #game-title-banner .title-logo {
    display: none;
}

body.theme-refund_rush #title-text {
    position: relative;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

#game-title-banner {
    flex-wrap: wrap;
    row-gap: 0;
}
#title-tagline {
    flex: 0 0 100%;
    order: -1;
    font-family: 'Inter', sans-serif;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.32em;
    color: rgba(255, 238, 170, 0.72);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.28);
    white-space: nowrap;
    text-align: center;
}
#title-tagline:empty {
    display: none;
}

body.theme-refund_rush #title-refund,
body.theme-refund_rush #title-rush {
    font-size: clamp(1.45rem, 3.4vw, 2.75rem);
    letter-spacing: 0.08em;
    -webkit-text-stroke: 0;
    paint-order: normal;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.54));
}

body.theme-refund_rush #title-refund {
    background-image: linear-gradient(180deg, #83ffb1 0%, #2fd873 42%, #0f7c43 100%);
    text-shadow: 0 0 18px rgba(39, 216, 96, 0.30);
}

body.theme-refund_rush #title-rush {
    background-image: linear-gradient(180deg, #fff6b8 0%, #ffd23f 38%, #b97910 100%);
    text-shadow: 0 0 24px rgba(255, 215, 0, 0.38);
}

body.theme-refund_rush #reel-row {
    z-index: 2;
    transform: translateY(0);
    gap: 10px;
}

body.theme-refund_rush #reel-row::before {
    left: max(14px, 2.6vw);
    right: max(14px, 2.6vw);
    top: 51%;
    height: min(68vh, 700px);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 230, 137, 0.16), rgba(0, 0, 0, 0.20) 17%, rgba(0, 0, 0, 0.48)),
        radial-gradient(ellipse at 50% 8%, rgba(255, 215, 0, 0.17), transparent 48%),
        linear-gradient(90deg, rgba(6, 13, 24, 0.74), rgba(8, 17, 27, 0.36) 24%, rgba(8, 17, 27, 0.36) 76%, rgba(6, 13, 24, 0.74));
    border: 1px solid rgba(255, 224, 132, 0.30);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 64px rgba(255, 215, 0, 0.06);
}

body.theme-refund_rush #reel-row::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 6%;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.52), transparent 68%);
    filter: blur(9px);
    pointer-events: none;
}

body.theme-refund_rush #reel-area {
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.05) 18%, rgba(0, 0, 0, 0.22)),
        radial-gradient(ellipse at 50% -4%, rgba(255, 231, 138, 0.16), transparent 50%),
        linear-gradient(90deg, rgba(3, 8, 16, 0.72), rgba(8, 22, 38, 0.16) 16%, rgba(8, 22, 38, 0.16) 84%, rgba(3, 8, 16, 0.72));
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.54),
        0 0 0 2px rgba(255, 214, 86, 0.52),
        0 0 0 7px rgba(10, 11, 20, 0.84),
        0 0 32px rgba(255, 215, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -28px 46px rgba(0, 0, 0, 0.42);
}

body.theme-refund_rush #reel-area::before {
    background:
        linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.00) 22%, rgba(255,255,255,0.18) 34%, rgba(255,255,255,0.04) 45%, transparent 57%),
        radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.13), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 18%, transparent 72%, rgba(0,0,0,0.28) 100%);
    opacity: 0.78;
}

body.theme-refund_rush #reel-area::after {
    inset: 7px;
    border: 1px solid rgba(255, 239, 178, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.42),
        inset 0 0 44px rgba(255, 215, 0, 0.07);
}

body.theme-refund_rush .jp-tile {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(13, 18, 30, 0.90), rgba(6, 8, 16, 0.82));
    border-radius: 10px;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

body.theme-refund_rush #controls {
    background:
        linear-gradient(180deg, rgba(20, 25, 42, 0.92), rgba(5, 7, 15, 0.94)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.08), transparent 60%);
    border-top: 1px solid rgba(255, 215, 0, 0.30);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.36);
}

/* ── A11y / mobile / motion-sensitivity ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }}

body.reduced-stimulation .feature-prime-rays,
body.reduced-stimulation .feature-prime-burst,
body.reduced-stimulation .feature-prime-route,
body.reduced-stimulation #win-rays,
body.reduced-stimulation #win-burst-bg,
body.reduced-stimulation #cinematic-ambient,
body.reduced-stimulation #win-dream-line {
    display: none !important;
}

body.reduced-stimulation #effects-canvas {
    opacity: 0.38;
}

/* Larger touch targets on small screens (WCAG min 44x44 effective) */
@media (max-width: 480px) {
    .bet-btn,
    .bet-btn.bet-minmax {
        min-width: 44px;
        min-height: 44px;
        padding: 8px 10px;
    }
    .info-btn,
    .history-btn,
    .sound-btn,
    .turbo-btn,
    .auto-btn {
        min-width: 44px;
        min-height: 44px;
    }}

/* Visible focus indicator for keyboard users. 2026-05-12 — extended
   coverage to inputs / selects / anchors so WCAG 2.1 SC 2.4.7 ("Focus
   Visible") is satisfied across every interactive widget. The gold-on-
   dark ring also meets WCAG SC 1.4.11 contrast (≥3:1 against the navy
   cabinet bg). */
button:focus-visible,
[role="button"]:focus-visible,
.vault-door:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
    /* Defensive box-shadow as a 2nd indicator — some Pixi-overlay buttons
       have rounded corners + custom backgrounds where outline rendering
       gets clipped. The shadow always paints regardless. */
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4);
}

/* ── Vault Crack — refined tracker + uniform door grid ─────────────── */

.vault-tracker-header,
.vault-grid-header {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.65rem, 1.6vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 2px;
    color: #9C9CB0;
    text-align: center;
    margin: 4px 0 8px 0;
    text-transform: uppercase;
}

.vault-tracker-sub {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.6rem, 1.4vw, 0.7rem);
    color: #FFD700;
    text-align: center;
    margin: -4px 0 8px 0;
    opacity: 0.75;
    font-style: italic;
}

.vault-grid-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 215, 0, 0.18);
}

/* Match tracker items: keep height stable so the panel doesn't reflow
   as picks reveal categories. 2-column grid so 8 categories fit in
   4 rows instead of 8 — leaves vertical room for the 12 vault doors. */
.match-tracker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 6px;
    max-width: 480px;
    margin: 0 auto;
}

/* Single column on narrow screens where 2-col labels would overflow. */
@media (max-width: 420px) {
    .match-tracker { grid-template-columns: 1fr; max-width: 320px; }}

.match-tracker-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    border: 1px solid rgba(255, 215, 0, 0.08);
    min-height: 22px;
    transition: border-color 0.25s, background 0.25s;
}

.match-tracker-item.hot {
    border-color: rgba(255, 59, 59, 0.6);
    background: rgba(255, 59, 59, 0.06);
}

.match-tracker-item.winner {
    border-color: rgba(255, 215, 0, 0.85);
    background: rgba(255, 215, 0, 0.10);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.22);
}

.match-tracker-item .match-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #F5F5F5;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.match-tracker-item .match-count {
    font-size: 0.62rem;
    color: #9C9CB0;
    font-weight: 700;
    min-width: 22px;
    text-align: right;
}

.match-dots {
    display: flex;
    gap: 3px;
}

.match-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.25s, box-shadow 0.25s;
}

.match-dot.filled {
    background: #FFD700;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.55);
}

/* Revealed-door label rendering — multi-word labels stack on lines so they
   fit the small uniform door without overflow. Single-line multipliers
   ("25x") get a bigger value font for impact. */
.vault-revealed-inner {
    padding: 3px 2px;
    gap: 1px;
    line-height: 1;
}
.vault-prize-line {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.4px;
    text-shadow: 0 0 6px currentColor;
}
.vault-prize-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    text-shadow: 0 0 10px currentColor;
}
@media (max-height: 720px) {
    .vault-prize-line { font-size: 0.52rem; }
    .vault-prize-value { font-size: 0.85rem; }}

/* Doors: uniform aspect-ratio so reveals don't change layout.
   Cap door size so all 3 rows fit comfortably even with the tracker above. */
.vault-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(56px, 78px));
    gap: 5px;
    max-width: 340px;
    margin: 0 auto;
    justify-content: center;
}

/* Compact section spacing to give doors more vertical room. */
.vault-grid-section {
    margin-top: 10px;
    padding-top: 8px;
}
.vault-tracker-header,
.vault-grid-header {
    margin: 2px 0 6px 0;
}

/* Short viewports: shrink everything a bit more so 3 rows always fit. */
@media (max-height: 720px) {
    .vault-grid {
        grid-template-columns: repeat(4, minmax(48px, 64px));
        gap: 4px;
        max-width: 280px;
    }
    .match-tracker-item { min-height: 20px; padding: 2px 6px; }
    .match-tracker-item .match-label { font-size: 0.66rem; }
    .match-dot { width: 7px; height: 7px; }}

.vault-door {
    aspect-ratio: 1 / 1;
    background: linear-gradient(145deg, #2a2a3e, #15151f);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-door:hover:not(.revealed) {
    border-color: #FFD700;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
}

.vault-door.revealed {
    cursor: default;
    background: linear-gradient(145deg, #1a1a26, #0a0a14);
    border-color: rgba(255, 215, 0, 0.5);
}

.vault-door-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── Buy Bonus button + popup ────────────────────────────────────── */

.buy-bonus-btn {
    background: linear-gradient(145deg, #FFD700, #B8860B);
    color: #1a1a2a;
    border: 2px solid #FFE44D;
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    line-height: 1;
    min-width: 56px;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
    transition: transform 0.15s, box-shadow 0.2s;
}
.buy-bonus-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.7);
}
.buy-bonus-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
.buy-bonus-btn .bb-label {
    font-size: 0.65rem;
    letter-spacing: 1px;
}
.buy-bonus-btn .bb-sub {
    font-size: 0.85rem;
    letter-spacing: 1px;
}

@media (max-width: 480px) {
    .buy-bonus-btn { min-width: 44px; padding: 4px 8px; }
    .buy-bonus-btn .bb-label { font-size: 0.55rem; }
    .buy-bonus-btn .bb-sub { font-size: 0.7rem; }}

#buy-bonus-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
    font-family: 'Inter', sans-serif;
}
#buy-bonus-popup .bb-card {
    background: linear-gradient(160deg, #1a1d2e, #0a0c18);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
#buy-bonus-popup .bb-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: #FFD700;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 6px;
}
#buy-bonus-popup .bb-sub {
    font-size: 0.85rem;
    color: #9C9CB0;
    text-align: center;
    margin-bottom: 20px;
}
#buy-bonus-popup .bb-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#buy-bonus-popup .bb-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    color: #F5F5F5;
}
#buy-bonus-popup .bb-option:hover:not(.disabled) {
    background: rgba(255, 215, 0, 0.1);
    border-color: #FFD700;
}
#buy-bonus-popup .bb-option.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
#buy-bonus-popup .bb-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.9rem;
    color: white;
}
#buy-bonus-popup .bb-icon.dd { background: #2196F3; }
#buy-bonus-popup .bb-icon.fs { background: #9C27B0; }
#buy-bonus-popup .bb-icon.vc { background: #FFD700; color: #1a1a2a; }
#buy-bonus-popup .bb-option-label {
    font-weight: 700;
    font-size: 0.95rem;
}
#buy-bonus-popup .bb-option-desc {
    font-size: 0.72rem;
    color: #9C9CB0;
    margin-top: 2px;
}
#buy-bonus-popup .bb-cost {
    font-weight: 800;
    color: #FFD700;
    font-size: 0.95rem;
    text-align: right;
    line-height: 1.2;
}
#buy-bonus-popup .bb-cost-mult {
    font-size: 0.65rem;
    color: #9C9CB0;
    font-weight: 600;
}
#buy-bonus-popup .bb-close {
    display: block;
    margin: 18px auto 0;
    background: transparent;
    color: #9C9CB0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}
#buy-bonus-popup .bb-disabled-notice {
    font-size: 0.7rem;
    color: #f87171;
    text-align: center;
    margin-top: 14px;
    font-style: italic;
}

/* ── Refund Rick (mascot) ────────────────────────────────────────── */
#refund-rick {
    width: 140px;
    transition: transform 0.5s cubic-bezier(0.4, 1.6, 0.6, 1);
}
.rick-svg { width: 100%; height: auto; display: block; }

.rick-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 30px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
}

@media (max-width: 480px) {
    #refund-rick {
        width: 96px;
        bottom: 100px;
        right: 6px;
    }
    .rick-bubble {
        font-size: 0.7rem !important;
        max-width: 150px !important;
        padding: 7px 10px !important;
    }}

/* Keep Rick out of the way of the feature/prize-wheel overlays */
@media (max-height: 620px) {
    #refund-rick { display: none; }}

/* ── Must-Hit-By urgency label ─────────────────────────────────── */
.jp-tile {
    position: relative;
}
.jp-mhb {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(145deg, #FFD700, #B8860B);
    color: #1a1a2a;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 0.55rem;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    animation: mhb-pulse 1.5s ease-in-out infinite;
    z-index: 2;
    display: none;
}
@keyframes mhb-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); transform: translateX(-50%) scale(1); }
    50%      { box-shadow: 0 0 20px rgba(255, 215, 0, 1);    transform: translateX(-50%) scale(1.05); }
}

/* ---------------------------------------------------------------- */
/* DD end-of-bonus running-total HUD (Dragon Link style)            */
/* ---------------------------------------------------------------- */

#dd-rollup {
    position: fixed;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    padding: 14px 36px;
    background: linear-gradient(135deg, rgba(15, 18, 32, 0.96), rgba(30, 25, 10, 0.96));
    border: 2.5px solid #FFD700;
    border-radius: 14px;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.55),
        0 0 60px rgba(255, 215, 0, 0.25),
        0 8px 30px rgba(0, 0, 0, 0.7);
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    pointer-events: none;
    animation: ddRollupAppear 0.4s ease-out;
}
#dd-rollup.hidden { display: none; }

#dd-rollup .dd-rollup-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #FFD700;
    letter-spacing: 3px;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
    margin-bottom: 4px;
}

#dd-rollup .dd-rollup-value {
    font-family: 'Courier Prime', monospace;
    font-size: 2.4rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 1.5px;
    text-shadow:
        0 0 12px rgba(255, 215, 0, 0.85),
        0 0 24px rgba(255, 215, 0, 0.4);
    line-height: 1;
}

#dd-rollup .dd-rollup-value.tick {
    animation: ddRollupTick 0.18s ease-out;
}

#dd-rollup .dd-rollup-value.flash {
    animation: ddRollupFlash 0.6s ease-in-out;
}

.dd-lock-arrival {
    position: fixed;
    z-index: 86;
    transform: translate(-50%, -50%);
    padding: 6px 10px;
    border: 2px solid rgba(255, 215, 0, 0.9);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(255, 245, 190, 0.96), rgba(214, 151, 34, 0.94));
    color: #221306;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.64rem, 1.8vw, 0.82rem);
    font-weight: 1000;
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow:
        0 0 22px rgba(255, 215, 0, 0.62),
        0 8px 24px rgba(0, 0, 0, 0.5);
    animation: ddLockArrival 900ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.dd-reset-stamp {
    position: fixed;
    left: 50%;
    top: clamp(96px, 14vh, 150px);
    z-index: 94;
    min-width: min(78vw, 360px);
    transform: translateX(-50%) rotate(-5deg);
    padding: 11px 22px;
    border: 4px double #FFD700;
    border-radius: 8px;
    background:
        repeating-linear-gradient(-5deg, rgba(255, 255, 255, 0.07) 0 4px, transparent 4px 11px),
        linear-gradient(180deg, rgba(31, 33, 21, 0.96), rgba(89, 55, 14, 0.96));
    color: #FFD700;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.55),
        inset 0 0 18px rgba(255, 255, 255, 0.14);
}

.dd-reset-stamp span,
.dd-paid-stamp span {
    display: block;
    font-size: clamp(0.68rem, 2vw, 0.9rem);
    font-weight: 900;
    letter-spacing: 2.2px;
}

.dd-reset-stamp strong {
    display: block;
    margin-top: 2px;
    color: #FFFFFF;
    font-size: clamp(1.45rem, 5vw, 2.35rem);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.78);
}

.dd-paid-stamp {
    position: fixed;
    left: 50%;
    top: 43%;
    z-index: 97;
    min-width: min(82vw, 520px);
    transform: translate(-50%, -50%) rotate(-9deg);
    padding: clamp(18px, 4vw, 30px) clamp(26px, 6vw, 54px);
    border: clamp(6px, 1vw, 9px) double #27D860;
    border-radius: 14px;
    background:
        repeating-linear-gradient(-9deg, rgba(255, 255, 255, 0.06) 0 5px, transparent 5px 14px),
        radial-gradient(circle at 50% 50%, rgba(39, 216, 96, 0.22), rgba(7, 22, 12, 0.96) 68%);
    color: #C8FFD8;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow:
        0 0 44px rgba(39, 216, 96, 0.58),
        inset 0 0 28px rgba(255, 255, 255, 0.13);
}

.dd-paid-stamp strong {
    display: block;
    margin: 5px 0;
    color: #FFFFFF;
    font-family: 'Courier Prime', monospace;
    font-size: clamp(2rem, 8vw, 4.4rem);
    line-height: 0.95;
    letter-spacing: 1px;
    text-shadow:
        0 0 18px rgba(39, 216, 96, 0.95),
        0 0 34px rgba(255, 215, 0, 0.35);
}

.dd-paid-stamp em {
    display: inline-block;
    padding: 3px 18px;
    border: 2px solid currentColor;
    border-radius: 999px;
    color: #FFD700;
    font-style: normal;
    font-size: clamp(1rem, 3.4vw, 1.55rem);
    font-weight: 1000;
    letter-spacing: 4px;
    box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.18);
}

.approval-stamp-overlay {
    position: fixed;
    inset: 0;
    z-index: 93;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(circle at 50% 48%,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.26) 52%,
        rgba(0, 0, 0, 0.44) 100%);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.approval-stamp-overlay[data-waiting="start"] {
    z-index: 95;
    pointer-events: auto;
    cursor: pointer;
}

.approval-stamp-overlay.out {
    opacity: 0;
    transform: scale(1.04);
}

.approval-stamp-sweep {
    position: absolute;
    left: -15vw;
    top: 50%;
    width: 130vw;
    height: clamp(86px, 15vh, 150px);
    transform: translateY(-50%) rotate(-11deg);
    opacity: 0;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.12) 18%,
            rgba(255, 255, 255, 0.62) 48%,
            rgba(255, 255, 255, 0.12) 78%,
            transparent 100%);
    filter: blur(0.5px);
    mix-blend-mode: screen;
}

.approval-stamp-mark {
    position: relative;
    min-width: min(78vw, 620px);
    max-width: 86vw;
    padding: clamp(18px, 4vw, 34px) clamp(28px, 7vw, 72px);
    transform: rotate(-11deg);
    border: clamp(6px, 1vw, 10px) double currentColor;
    border-radius: 18px;
    color: #d7e3f5;
    background:
        repeating-linear-gradient(-11deg,
            rgba(255, 255, 255, 0.04) 0 3px,
            transparent 3px 9px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 68%);
    box-shadow:
        0 0 34px rgba(215, 227, 245, 0.48),
        inset 0 0 32px rgba(255, 255, 255, 0.14);
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    will-change: transform, opacity, filter;
}

.approval-stamp-mark::before,
.approval-stamp-mark::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid currentColor;
    border-radius: 10px;
    opacity: 0.42;
}

.approval-stamp-mark::after {
    inset: 18px;
    opacity: 0.22;
}

.approval-stamp-kicker,
.approval-stamp-title,
.approval-stamp-subtitle,
.approval-stamp-start {
    position: relative;
    z-index: 1;
    display: block;
    letter-spacing: 0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.38);
}

.approval-stamp-kicker {
    font: 800 clamp(0.72rem, 1.6vw, 1rem) 'Montserrat', sans-serif;
    opacity: 0.86;
}

.approval-stamp-title {
    margin-top: 4px;
    font: 900 clamp(2.1rem, 7vw, 5.4rem) 'Montserrat', sans-serif;
    line-height: 0.95;
}

.approval-stamp-subtitle {
    margin-top: 8px;
    font: 800 clamp(0.85rem, 2vw, 1.2rem) 'Montserrat', sans-serif;
    opacity: 0.9;
}

.approval-stamp-start {
    margin-top: clamp(14px, 2.6vw, 24px);
    font: 900 clamp(0.74rem, 1.8vw, 1rem) 'Montserrat', sans-serif;
    color: #ffffff;
    opacity: 0.86;
    animation: approvalStampStartPulse 1.25s ease-in-out infinite;
}

@keyframes approvalStampStartPulse {
    0%, 100% { opacity: 0.52; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.045); }
}

.approval-stamp-overlay[data-tier="silver"] .approval-stamp-mark {
    color: #d7e3f5;
}

.approval-stamp-overlay[data-tier="gold"] .approval-stamp-mark {
    color: #ffd75a;
    box-shadow:
        0 0 46px rgba(255, 215, 90, 0.68),
        inset 0 0 40px rgba(255, 215, 90, 0.22);
}

.approval-stamp-overlay[data-tier="grand"] {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 215, 90, 0.24), transparent 44%),
        radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.76));
}

.approval-stamp-overlay[data-tier="grand"] .approval-stamp-mark {
    color: #ffe46f;
    min-width: min(82vw, 760px);
    border-width: clamp(8px, 1.2vw, 12px);
    background:
        repeating-linear-gradient(-11deg,
            rgba(255, 236, 150, 0.10) 0 4px,
            transparent 4px 11px),
        radial-gradient(circle at 50% 50%, rgba(255, 236, 150, 0.28), transparent 72%);
    box-shadow:
        0 0 74px rgba(255, 215, 90, 0.86),
        0 0 130px rgba(255, 103, 64, 0.28),
        inset 0 0 52px rgba(255, 236, 150, 0.32);
}

body.device-mobile .approval-stamp-mark {
    min-width: 84vw;
    max-width: 90vw;
    border-radius: 12px;
}

.feature-prime {
    position: fixed;
    inset: 0;
    z-index: 94;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgba(0, 0, 0, 0.50) 0%,
        rgba(0, 0, 0, 0.82) 60%,
        rgba(0, 0, 0, 0.96) 100%);
    overflow: hidden;
}

.feature-prime::before,
.feature-prime::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.feature-prime::before {
    background:
        repeating-linear-gradient(-8deg,
            transparent 0 44px,
            rgba(255, 255, 255, 0.035) 44px 46px,
            transparent 46px 92px),
        radial-gradient(ellipse at 50% 12%, rgba(255, 236, 166, 0.18), transparent 52%);
    opacity: 0.68;
}

.feature-prime::after {
    inset: 7vh 8vw;
    border: 1px solid rgba(255, 215, 0, 0.16);
    border-radius: 22px;
    box-shadow:
        inset 0 0 60px rgba(255, 215, 0, 0.08),
        0 0 90px rgba(0, 0, 0, 0.34);
}

.feature-prime[data-theme="refund_rush"][data-feature="direct_deposit"] {
    background:
        radial-gradient(circle at 50% 42%, rgba(39, 216, 96, 0.22), transparent 38%),
        linear-gradient(180deg, rgba(10, 16, 18, 0.80), rgba(3, 9, 7, 0.97));
}

.feature-prime[data-theme="refund_rush"][data-feature="free_spins"] {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 60, 80, 0.20), transparent 40%),
        linear-gradient(180deg, rgba(18, 10, 18, 0.82), rgba(8, 5, 12, 0.97));
}

.feature-prime.out .feature-prime-card { transform: scale(1.08); opacity: 0; }
.feature-prime.out .feature-prime-rays { opacity: 0; }
.feature-prime.out .feature-prime-burst { opacity: 0; }
.feature-prime.out .feature-prime-route { opacity: 0; }

/* Theme-coloured rotating sunburst. DD gets gold + green (tax stamp);
   FS gets gold + red (bonus headline). */
.feature-prime-rays {
    position: absolute;
    width: 180vmax;
    height: 180vmax;
    left: 50%;
    top: 50%;
    margin-left: -90vmax;
    margin-top: -90vmax;
    opacity: 0;
    mix-blend-mode: screen;
    filter: blur(0.5px);
    will-change: transform, opacity;
}
.feature-prime[data-feature="direct_deposit"] .feature-prime-rays {
    background: conic-gradient(from 0deg,
        rgba(255, 215, 0, 0.36) 0deg, transparent 12deg,
        rgba(60, 200, 90, 0.32) 24deg, transparent 36deg,
        rgba(255, 215, 0, 0.36) 48deg, transparent 60deg,
        rgba(60, 200, 90, 0.32) 72deg, transparent 84deg,
        rgba(255, 215, 0, 0.36) 96deg, transparent 108deg,
        rgba(60, 200, 90, 0.32) 120deg, transparent 132deg,
        rgba(255, 215, 0, 0.36) 144deg, transparent 156deg,
        rgba(60, 200, 90, 0.32) 168deg, transparent 180deg,
        rgba(255, 215, 0, 0.36) 192deg, transparent 204deg,
        rgba(60, 200, 90, 0.32) 216deg, transparent 228deg,
        rgba(255, 215, 0, 0.36) 240deg, transparent 252deg,
        rgba(60, 200, 90, 0.32) 264deg, transparent 276deg,
        rgba(255, 215, 0, 0.36) 288deg, transparent 300deg,
        rgba(60, 200, 90, 0.32) 312deg, transparent 324deg,
        rgba(255, 215, 0, 0.36) 336deg, transparent 348deg);
}
.feature-prime[data-feature="free_spins"] .feature-prime-rays {
    background: conic-gradient(from 0deg,
        rgba(255, 215, 0, 0.40) 0deg, transparent 12deg,
        rgba(255, 60, 80, 0.32) 24deg, transparent 36deg,
        rgba(255, 215, 0, 0.40) 48deg, transparent 60deg,
        rgba(255, 60, 80, 0.32) 72deg, transparent 84deg,
        rgba(255, 215, 0, 0.40) 96deg, transparent 108deg,
        rgba(255, 60, 80, 0.32) 120deg, transparent 132deg,
        rgba(255, 215, 0, 0.40) 144deg, transparent 156deg,
        rgba(255, 60, 80, 0.32) 168deg, transparent 180deg,
        rgba(255, 215, 0, 0.40) 192deg, transparent 204deg,
        rgba(255, 60, 80, 0.32) 216deg, transparent 228deg,
        rgba(255, 215, 0, 0.40) 240deg, transparent 252deg,
        rgba(255, 60, 80, 0.32) 264deg, transparent 276deg,
        rgba(255, 215, 0, 0.40) 288deg, transparent 300deg,
        rgba(255, 60, 80, 0.32) 312deg, transparent 324deg,
        rgba(255, 215, 0, 0.40) 336deg, transparent 348deg);
}

.feature-prime[data-theme="trucker_tom"] {
    background:
        radial-gradient(circle at 50% 45%, rgba(224, 160, 32, 0.22) 0%, rgba(0, 0, 0, 0.28) 36%, transparent 58%),
        linear-gradient(180deg, rgba(10, 18, 24, 0.78), rgba(12, 9, 7, 0.96));
}

.feature-prime[data-theme="trucker_tom"] .feature-prime-rays {
    background: conic-gradient(from 0deg,
        rgba(255, 210, 94, 0.36) 0deg, transparent 13deg,
        rgba(62, 179, 255, 0.26) 28deg, transparent 42deg,
        rgba(255, 210, 94, 0.36) 58deg, transparent 72deg,
        rgba(39, 216, 96, 0.20) 92deg, transparent 108deg,
        rgba(255, 210, 94, 0.36) 132deg, transparent 148deg,
        rgba(62, 179, 255, 0.24) 168deg, transparent 184deg,
        rgba(255, 210, 94, 0.34) 212deg, transparent 228deg,
        rgba(39, 216, 96, 0.20) 252deg, transparent 268deg,
        rgba(255, 210, 94, 0.36) 292deg, transparent 308deg,
        rgba(62, 179, 255, 0.24) 332deg, transparent 348deg);
}

.feature-prime-burst {
    position: absolute;
    width: 75vmin;
    height: 75vmin;
    border-radius: 50%;
    opacity: 0;
    mix-blend-mode: screen;
    filter: blur(8px);
    will-change: transform, opacity;
}
.feature-prime[data-feature="direct_deposit"] .feature-prime-burst {
    background: radial-gradient(circle at center,
        rgba(255, 215, 0, 0.55) 0%,
        rgba(60, 200, 90, 0.25) 40%,
        transparent 75%);
}
.feature-prime[data-feature="free_spins"] .feature-prime-burst {
    background: radial-gradient(circle at center,
        rgba(255, 215, 0, 0.55) 0%,
        rgba(255, 60, 80, 0.25) 40%,
        transparent 75%);
}

.feature-prime[data-theme="trucker_tom"] .feature-prime-burst {
    background: radial-gradient(circle at center,
        rgba(255, 213, 91, 0.54) 0%,
        rgba(62, 179, 255, 0.28) 34%,
        rgba(39, 216, 96, 0.16) 52%,
        transparent 76%);
}

.feature-prime-route {
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    opacity: 0.72;
    perspective: 520px;
    overflow: hidden;
    transition: opacity 0.35s ease;
}

.feature-prime-route::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -34%;
    width: min(70vw, 780px);
    height: 140%;
    transform: translateX(-50%) rotateX(68deg);
    transform-origin: 50% 100%;
    background:
        linear-gradient(90deg,
            transparent 0 14%,
            rgba(255, 255, 255, 0.22) 14.6% 15.4%,
            transparent 16% 47%,
            rgba(255, 228, 77, 0.90) 47.6% 52.4%,
            transparent 53% 84%,
            rgba(255, 255, 255, 0.22) 84.6% 85.4%,
            transparent 86% 100%),
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.00) 0 24px,
            rgba(255, 255, 255, 0.20) 24px 58px,
            rgba(255, 255, 255, 0.00) 58px 90px);
    filter: blur(0.2px);
    animation: featurePrimeRoad 1.1s linear infinite;
}

.feature-prime-route span {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 52px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 228, 77, 0.68);
    box-shadow: 0 0 24px rgba(255, 228, 77, 0.55);
    animation: featurePrimeMarker 1.8s ease-in-out infinite;
}

.feature-prime-route span:nth-child(1) { transform: translateX(-290px) rotate(-8deg); animation-delay: -0.2s; }
.feature-prime-route span:nth-child(2) { transform: translateX(235px) rotate(7deg); animation-delay: -0.8s; }
.feature-prime-route span:nth-child(3) { transform: translateX(-44px); animation-delay: -1.25s; }

.feature-prime-card {
    position: relative;
    z-index: 2;
    padding: 36px 60px;
    border-radius: 16px;
    border: 3px solid rgba(255, 215, 0, 0.85);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.08), transparent 10%, transparent 90%, rgba(255,255,255,0.06)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 236, 166, 0.22), transparent 58%),
        linear-gradient(180deg, rgba(15, 18, 32, 0.94), rgba(42, 32, 4, 0.90));
    box-shadow:
        0 0 80px rgba(255, 215, 0, 0.55),
        0 24px 90px rgba(0, 0, 0, 0.58),
        inset 0 0 40px rgba(255, 215, 0, 0.18),
        inset 0 2px 0 rgba(255, 255, 255, 0.18);
    text-align: center;
    transform-origin: center;
    will-change: transform, opacity;
}

.feature-prime-card::before,
.feature-prime-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.feature-prime-card::before {
    inset: 10px;
    border: 1px solid rgba(255, 236, 166, 0.26);
    border-radius: 10px;
}

.feature-prime-card::after {
    left: 12%;
    right: 12%;
    top: -2px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
    opacity: 0.62;
    filter: blur(0.2px);
}

.feature-prime[data-theme="trucker_tom"] .feature-prime-card {
    border-color: rgba(255, 200, 82, 0.90);
    background:
        linear-gradient(180deg, rgba(18, 27, 31, 0.94), rgba(47, 35, 13, 0.90)),
        linear-gradient(90deg, rgba(62, 179, 255, 0.12), rgba(255, 228, 77, 0.10));
    box-shadow:
        0 0 76px rgba(255, 178, 50, 0.42),
        0 18px 80px rgba(16, 120, 180, 0.24),
        inset 0 0 34px rgba(255, 215, 0, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.16);
}

.feature-prime-kicker {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

.feature-prime-title {
    margin-top: 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.4rem, 9vw, 6rem);
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(180deg, #FFE44D, #FFA500 70%, #FF6B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 18px rgba(255, 165, 0, 0.6));
    text-transform: uppercase;
}

/* TT pass (2026-09-13): tap gate on the feature prime. Pulsing prompt
   appended to the prime card when waitForStart is used. */
.feature-prime-tap {
    margin-top: 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.85rem, 2.4vw, 1.05rem);
    font-weight: 800;
    letter-spacing: 4px;
    color: #FFE44D;
    text-shadow: 0 0 14px rgba(255, 200, 60, 0.65);
}

.feature-prime-title::after {
    content: '';
    display: block;
    width: min(72%, 420px);
    height: 3px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.92), transparent);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.56);
}

.feature-prime[data-theme="trucker_tom"] .feature-prime-title {
    background: linear-gradient(180deg, #FFFFFF, #FFE44D 46%, #E0A020 74%, #8BE4FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 18px rgba(224, 160, 32, 0.62));
}

.feature-prime-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.feature-prime-steps span {
    min-width: 92px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.18), rgba(0, 0, 0, 0.18));
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.64rem, 1.5vw, 0.82rem);
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
    box-shadow: inset 0 0 14px rgba(255, 215, 0, 0.12);
}

.feature-prime-steps span.active-beat {
    color: #10130f;
    background: linear-gradient(180deg, #FFF2A8, #D9A928);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow:
        0 0 18px rgba(255, 215, 0, 0.54),
        inset 0 1px 0 rgba(255,255,255,0.55);
}

.feature-prime .feature-prime-steps span,
.feature-prime .feature-prime-explainer span {
    opacity: 1 !important;
}

.feature-prime-explainer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.feature-prime-explainer span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.18));
    color: rgba(255, 255, 255, 0.86);
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.68rem, 1.5vw, 0.82rem);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

.feature-prime-explainer b {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.22);
    color: #FFE44D;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.16);
}

.feature-prime[data-feature="direct_deposit"] .feature-prime-steps span {
    border-color: rgba(39, 216, 96, 0.68);
    background: linear-gradient(180deg, rgba(39, 216, 96, 0.24), rgba(0, 0, 0, 0.20));
}

.feature-prime[data-feature="direct_deposit"] .feature-prime-explainer b {
    background: rgba(39, 216, 96, 0.24);
    color: #8DFFAD;
}

.feature-prime[data-theme="trucker_tom"] .feature-prime-steps span {
    border-color: rgba(139, 228, 255, 0.62);
    background: linear-gradient(180deg, rgba(62, 179, 255, 0.22), rgba(224, 160, 32, 0.12));
    box-shadow:
        inset 0 0 14px rgba(139, 228, 255, 0.12),
        0 0 16px rgba(224, 160, 32, 0.16);
}

.feature-prime[data-theme="trucker_tom"] .feature-prime-explainer span {
    border-color: rgba(139, 228, 255, 0.22);
    background: linear-gradient(180deg, rgba(62, 179, 255, 0.12), rgba(224, 160, 32, 0.10));
}

.feature-prime[data-theme="trucker_tom"] .feature-prime-explainer b {
    background: rgba(139, 228, 255, 0.18);
    color: #8BE4FF;
}

@keyframes featurePrimeRoad {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 0, 0 90px; }
}

.anticipation-cue {
    position: fixed;
    left: 50%;
    top: clamp(108px, 16vh, 150px);
    z-index: 88;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: min(88vw, 520px);
    padding: 10px 18px;
    border: 1px solid rgba(255, 215, 0, 0.56);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 215, 0, 0.18), transparent 76%),
        linear-gradient(180deg, rgba(12, 12, 22, 0.92), rgba(0, 0, 0, 0.78));
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow:
        0 0 28px rgba(255, 215, 0, 0.24),
        inset 0 0 18px rgba(255, 215, 0, 0.10);
    backdrop-filter: blur(7px);
}

.anticipation-cue[data-strong="true"] {
    border-color: rgba(255, 228, 77, 0.84);
    box-shadow:
        0 0 36px rgba(255, 215, 0, 0.38),
        0 0 72px rgba(255, 80, 80, 0.12),
        inset 0 0 22px rgba(255, 215, 0, 0.14);
}

.anticipation-cue[data-theme="trucker_tom"] {
    border-color: rgba(139, 228, 255, 0.58);
    background:
        radial-gradient(circle at 50% 0%, rgba(139, 228, 255, 0.15), transparent 74%),
        linear-gradient(180deg, rgba(17, 25, 29, 0.93), rgba(22, 13, 5, 0.82));
    box-shadow:
        0 0 30px rgba(139, 228, 255, 0.18),
        inset 0 0 18px rgba(224, 160, 32, 0.10);
}

.anticipation-cue-kicker {
    color: #FFE44D;
    font-size: clamp(0.68rem, 1.6vw, 0.86rem);
    font-weight: 900;
    letter-spacing: 2.4px;
}

.anticipation-cue[data-theme="trucker_tom"] .anticipation-cue-kicker {
    color: #8BE4FF;
}

.anticipation-cue-line {
    color: rgba(255, 255, 255, 0.78);
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.62rem, 1.4vw, 0.78rem);
    font-weight: 800;
    letter-spacing: 1.2px;
}

@keyframes featurePrimeMarker {
    0%, 100% { opacity: 0.18; filter: blur(1px); }
    42%      { opacity: 0.92; filter: blur(0); }
}

.dd-pressure {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dd-pressure-step {
    min-width: 22px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.dd-pressure-step.active {
    border-color: rgba(39, 216, 96, 0.9);
    background: rgba(39, 216, 96, 0.24);
    color: #FFFFFF;
    box-shadow: 0 0 10px rgba(39, 216, 96, 0.42);
}

.fs-stage-rail {
    height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px;
}

.fs-stage {
    position: relative;
    min-width: 42px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.20));
    color: rgba(255,255,255,0.68);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    line-height: 1;
    transition: color 0.18s ease, border-color 0.18s ease,
        background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.fs-stage-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.32);
    box-shadow: none;
}

.fs-stage.active {
    border-color: rgba(255, 215, 0, 0.70);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.22), rgba(156, 39, 176, 0.18));
    color: #FFFFFF;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.22);
}

.fs-stage.active .fs-stage-dot {
    background: #FFD700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.65);
}

.fs-stage.current {
    transform: translateY(-1px) scale(1.06);
    border-color: rgba(255, 80, 80, 0.85);
    box-shadow: 0 0 16px rgba(255, 80, 80, 0.34), inset 0 0 12px rgba(255, 215, 0, 0.12);
}

.fs-ladder-climb {
    position: fixed;
    left: 50%;
    top: 44%;
    z-index: 95;
    transform: translate(-50%, -50%);
    min-width: min(78vw, 360px);
    padding: 20px 30px;
    border: 2px solid rgba(255, 215, 0, 0.78);
    border-radius: 10px;
    background:
        radial-gradient(circle at center, rgba(255, 215, 0, 0.24), transparent 70%),
        linear-gradient(180deg, rgba(24, 17, 40, 0.92), rgba(54, 16, 16, 0.88));
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    pointer-events: none;
    box-shadow:
        0 0 58px rgba(255, 215, 0, 0.42),
        inset 0 0 24px rgba(255, 215, 0, 0.14);
}

.fs-ladder-climb-title {
    color: rgba(255,255,255,0.82);
    font-size: clamp(0.72rem, 2vw, 0.92rem);
    font-weight: 900;
    letter-spacing: 3px;
}

.fs-ladder-climb-mult {
    margin-top: 5px;
    font-size: clamp(2.4rem, 9vw, 5rem);
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 0.98;
    background: linear-gradient(180deg, #FFFFFF, #FFE44D 38%, #FF8A00 70%, #FF3B3B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 18px rgba(255, 80, 40, 0.65));
}

.fs-ladder-climb-sub {
    margin-top: 6px;
    color: rgba(255,255,255,0.72);
    font-size: clamp(0.66rem, 1.7vw, 0.82rem);
    font-weight: 800;
    letter-spacing: 2px;
}

.symbol-stack-reel-glow {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 27;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--stack-color, #FFD700) 34%, transparent) 46%,
            color-mix(in srgb, var(--stack-color, #FFD700) 44%, transparent) 54%,
            transparent 100%);
    border-left: 1px solid color-mix(in srgb, var(--stack-color, #FFD700) 48%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--stack-color, #FFD700) 48%, transparent);
    box-shadow:
        inset 0 0 28px color-mix(in srgb, var(--stack-color, #FFD700) 30%, transparent),
        0 0 20px color-mix(in srgb, var(--stack-color, #FFD700) 24%, transparent);
    opacity: 0;
    transform-origin: 50% 50%;
}

.symbol-stack-stamp {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 72;
    transform: translate(-50%, -50%) rotate(-8deg);
    min-width: min(72vw, 420px);
    padding: 18px 30px;
    border: 5px solid var(--stack-color, #FFD700);
    border-radius: 10px;
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.78)),
        linear-gradient(180deg,
            color-mix(in srgb, var(--stack-color, #FFD700) 18%, rgba(20, 20, 20, 0.92)),
            rgba(0, 0, 0, 0.88));
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    pointer-events: none;
    box-shadow:
        0 0 54px color-mix(in srgb, var(--stack-color, #FFD700) 56%, transparent),
        inset 0 0 24px color-mix(in srgb, var(--stack-color, #FFD700) 24%, transparent);
    text-transform: uppercase;
}

.symbol-stack-stamp-main {
    font-size: clamp(1.8rem, 7vw, 4.4rem);
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 0.95;
    color: var(--stack-color, #FFD700);
    text-shadow:
        0 0 18px color-mix(in srgb, var(--stack-color, #FFD700) 76%, transparent),
        0 2px 0 rgba(0, 0, 0, 0.45);
}

.symbol-stack-stamp-sub {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.62rem, 1.7vw, 0.82rem);
    font-weight: 900;
    letter-spacing: 2.4px;
}

.feature-prime-tagline {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.85rem, 2.2vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    body.spin-active #cinematic-ambient,
    body.anticipation-active #cinematic-ambient,
    body.jackpot-payoff-active #cinematic-ambient {
        opacity: 0.44;
    }

    .ambient-sweep {
        width: 30vw;
        filter: blur(6px);
    }

    body.anticipation-active .ambient-sweep,
    body.jackpot-payoff-active .ambient-sweep {
        animation-duration: 6.8s;
    }

    #win-overlay {
        padding: 14px;
    }

    #win-rays {
        width: 132vmax;
        height: 132vmax;
        margin-left: -66vmax;
        margin-top: -66vmax;
        opacity: 0.62;
    }

    #win-burst-bg {
        width: 76vmin;
        height: 76vmin;
        filter: blur(10px);
    }

    #win-type {
        font-size: clamp(1.25rem, 9vw, 2.2rem);
        letter-spacing: 2.2px;
    }

    #win-amount {
        font-size: clamp(1.8rem, 12vw, 3.1rem);
    }

    #win-dream-line {
        max-width: min(92vw, 340px);
        padding: 7px 12px;
        font-size: clamp(0.62rem, 3vw, 0.78rem);
        letter-spacing: 1.5px;
        text-align: center;
    }

    .feature-prime {
        align-items: center;
        padding: 18px;
    }

    .feature-prime-rays {
        width: 132vmax;
        height: 132vmax;
        margin-left: -66vmax;
        margin-top: -66vmax;
        filter: blur(1px);
    }

    .feature-prime-burst {
        width: 72vmin;
        height: 72vmin;
        filter: blur(10px);
    }

    .feature-prime-route {
        height: 34%;
        opacity: 0.54;
    }

    .feature-prime-route::before {
        width: min(92vw, 420px);
        height: 128%;
    }

    .feature-prime-route span {
        width: 36px;
        height: 8px;
    }

    .feature-prime-route span:nth-child(1) { transform: translateX(-132px) rotate(-8deg); }
    .feature-prime-route span:nth-child(2) { transform: translateX(104px) rotate(7deg); }
    .feature-prime-route span:nth-child(3) { transform: translateX(-20px); }

    .feature-prime-card {
        width: min(100%, 360px);
        padding: 22px 16px;
        border-radius: 10px;
        border-width: 2px;
        box-shadow:
            0 0 42px rgba(255, 215, 0, 0.36),
            inset 0 0 24px rgba(255, 215, 0, 0.14);
    }

    .feature-prime-kicker {
        font-size: 0.68rem;
        letter-spacing: 2.2px;
    }

    .feature-prime-title {
        margin-top: 10px;
        font-size: clamp(1.8rem, 12vw, 3.15rem);
        letter-spacing: 1.8px;
    }

    .feature-prime-steps {
        gap: 6px;
        margin-top: 13px;
    }

    .feature-prime-steps span {
        min-width: 0;
        padding: 5px 7px;
        font-size: clamp(0.54rem, 2.5vw, 0.66rem);
        letter-spacing: 0.8px;
    }

    .feature-prime-explainer {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 12px;
    }

    .feature-prime-explainer span {
        min-height: 30px;
        padding: 6px 8px;
        font-size: clamp(0.58rem, 2.9vw, 0.70rem);
    }

    .feature-prime-tagline {
        margin-top: 10px;
        font-size: clamp(0.66rem, 3.2vw, 0.86rem);
        letter-spacing: 1.1px;
        line-height: 1.35;
    }

    .anticipation-cue {
        top: 96px;
        width: min(92vw, 350px);
        padding: 8px 12px;
    }

    #feature-hud {
        min-height: 44px !important;
        height: auto !important;
        gap: 6px 10px !important;
        padding: 4px 8px !important;
        font-size: 0.62rem !important;
    }

    .fs-stage-rail {
        order: 4;
        width: 100%;
        justify-content: center;
        gap: 5px;
    }

    .fs-stage {
        min-width: 38px;
        height: 20px;
        font-size: 0.56rem;
    }

    .fs-ladder-climb {
        top: 42%;
        min-width: min(88vw, 320px);
        padding: 16px 20px;
    }}

@keyframes featurePrimeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes featurePrimeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.02); }
}

@keyframes ddRollupAppear {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.95); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes ddRollupTick {
    0%, 100% { transform: scale(1); color: #FFFFFF; }
    50%      { transform: scale(1.12); color: #FFD700; }
}

@keyframes ddLockArrival {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.55) rotate(-6deg);
        filter: blur(2px);
    }
    24% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12) rotate(-6deg);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -82%) scale(0.82) rotate(-6deg);
        filter: blur(0.5px);
    }
}

@keyframes ddRollupFlash {
    0%, 100% { color: #FFFFFF; text-shadow: 0 0 12px rgba(255, 215, 0, 0.85); }
    25%      { color: #FFD700; text-shadow: 0 0 24px rgba(255, 215, 0, 1), 0 0 48px rgba(255, 255, 255, 0.6); transform: scale(1.18); }
    50%      { color: #FFFFFF; text-shadow: 0 0 36px rgba(255, 215, 0, 1); transform: scale(1.05); }
    75%      { color: #FFD700; text-shadow: 0 0 24px rgba(255, 215, 0, 1); transform: scale(1.12); }
}

/* ---------------------------------------------------------------- */
/* Demo banner + QA HUD (testing utilities)                         */
/* ---------------------------------------------------------------- */

/* Cowork bug 11.5 (proper fix): demo banner is now inline at the top of
   #game-ui's flex column. Adds vertical space when present, takes none when
   hidden — no overlap with the progressive jackpot row by construction. */
#demo-banner {
    flex-shrink: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 4px 12px;
    text-align: center;
    background: rgba(15, 18, 32, 0.92);
    color: #FFD700;
    border-bottom: 1px solid rgba(255, 215, 0, 0.45);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.2;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
    animation: demoBannerPulse 4s ease-in-out infinite;
    pointer-events: none;
}
#demo-banner.hidden { display: none; }

body.device-mobile #demo-banner {
    padding: 2px 8px;
    font-size: 0.55rem;
    letter-spacing: 0.8px;
    border-bottom-width: 0.5px;
    background: rgba(15, 18, 32, 0.85);
    text-shadow: none;
}

@keyframes demoBannerPulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1.0; }
}

#qa-hud {
    position: fixed;
    bottom: 8px;
    left: 8px;
    z-index: 80;
    padding: 6px 10px;
    background: rgba(15, 18, 32, 0.85);
    color: #cfd8e3;
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 6px;
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    line-height: 1.4;
    min-width: 170px;
    pointer-events: none;
    user-select: text;
}
#qa-hud.hidden { display: none; }
#qa-hud .qa-hud-row { display: flex; gap: 8px; }
#qa-hud .qa-hud-label {
    color: #FFD700;
    font-weight: 700;
    width: 50px;
    display: inline-block;
}
#qa-hud .qa-hud-hint {
    color: #6b7280;
    font-size: 0.55rem;
    font-style: italic;
    margin-top: 2px;
    letter-spacing: 0.5px;
}
#qa-hud-round {
    font-size: 0.6rem;
    color: #9CA3AF;
    word-break: break-all;
}
@media (max-width: 640px) {
    #qa-hud { font-size: 0.6rem; min-width: 130px; bottom: 4px; left: 4px; }}

/* 3.9 — Daily streak indicator. Top-right corner badge that grows in
   intensity as the streak length increases (tier-1 ≤2, tier-2 3-6,
   tier-3 7+). Click opens a small breakdown popup. Hidden on tiny
   viewports so it doesn't crowd controls. */
.streak-indicator {
    position: fixed;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 107, 0, 0.85), rgba(255, 60, 0, 0.85));
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    z-index: 65;
    cursor: pointer;
    border: 1.5px solid rgba(255, 200, 100, 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 130, 0, 0.5);
    user-select: none;
    transition: transform 0.15s ease;
}
.streak-indicator:hover {
    transform: translateY(-1px);
}
.streak-indicator .streak-icon {
    font-size: 0.95rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.8));
}
.streak-indicator.tier-2 {
    background: linear-gradient(145deg, rgba(255, 140, 0, 0.9), rgba(255, 30, 30, 0.9));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 100, 0, 0.65);
}
.streak-indicator.tier-3 {
    background: linear-gradient(145deg, #FFD700, #FF6B00);
    color: #1a1a2a;
    border-color: rgba(255, 215, 0, 0.9);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 215, 0, 0.8);
    animation: streakGlow 2.4s ease-in-out infinite;
}
@keyframes streakGlow {
    0%, 100% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 215, 0, 0.8); }
    50%      { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.6), 0 0 28px rgba(255, 215, 0, 1); }
}
@media (max-width: 480px) {
    .streak-indicator {
        font-size: 0.65rem;
        padding: 4px 8px;
        top: 8px;
        right: 8px;
    }}

/* 3.3 — Pool ticker contribution micro-pulse.
   Brief glow + scale on the tile when its pool value goes up. Tile already
   has its own urgent/imminent animations; this is layered via filter so it
   doesn't fight them. */
@keyframes jpContribPulse {
    0%   { filter: brightness(1)    drop-shadow(0 0 0 transparent); }
    40%  { filter: brightness(1.25) drop-shadow(0 0 8px rgba(255,215,0,0.6)); }
    100% { filter: brightness(1)    drop-shadow(0 0 0 transparent); }
}
.jp-tile.contributing .jp-value {
    animation: jpContribPulse 0.22s ease-out 1;
}
.jp-tile.contributing .jp-tile-img {
    animation: jpContribPulse 0.22s ease-out 1;
}

/* ============================================================== */
/* Device-distinct layouts (set by JS via body class)              */
/* device-mobile : ≤480px or touch device with viewport ≤768px     */
/* device-tablet : 481-1024px non-touch                            */
/* device-desktop: ≥1025px                                         */
/* Plus orient-portrait / orient-landscape, device-touch / pointer */
/* ============================================================== */

/* ── MOBILE (phone) — maximize reel real estate ── */
body.device-mobile #game-container {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.device-mobile #reel-row {
    flex: 3 1 auto;        /* dominate vertical space — reels are the star */
    min-height: 0;
}

body.device-mobile #progressive-display {
    flex: 0 0 auto;
    padding: 4px 6px;
}

body.device-mobile #controls {
    flex: 0 0 auto;
    padding: 6px 8px;
    padding-left: max(8px, env(safe-area-inset-left, 8px));
    padding-right: max(8px, env(safe-area-inset-right, 8px));
}

/* Always-visible region-correct helpline strip — UKGC §4.1.2 + AGCO +
   MGA all require prominent display. Sits below the controls bar and
   absorbs the safe-area-inset-bottom so the iOS Home indicator + Android
   gesture bar don't cover the controls OR the helpline. */
#helpline-strip {
    flex: 0 0 auto;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(0deg, #050511 0%, #0a0a18 100%);
    border-top: 1px solid rgba(255, 215, 0, 0.18);
    color: rgba(220, 220, 235, 0.85);
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    line-height: 1.4;
    letter-spacing: 0.4px;
    text-align: center;
    padding: 4px 12px calc(4px + env(safe-area-inset-bottom, 0px));
}
#helpline-strip a {
    color: rgba(255, 215, 0, 0.85);
    text-decoration: underline;
    margin-left: 6px;
}
body.device-mobile #helpline-strip {
    font-size: 0.58rem;
    padding: 3px 8px calc(3px + env(safe-area-inset-bottom, 0px));
}

/* Mobile brand bar — bigger title so REFUND RUSH actually reads
   as a brand on phones (was too small to see vs the demo banner). */
body.device-mobile #game-title-banner {
    display: flex !important;
    padding: 6px 12px !important;
    margin-left: 0 !important;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #0a0a14, #15101f);
    border-bottom: 1px solid rgba(255, 215, 0, 0.35);
    align-items: center;
    justify-content: center;
    gap: 10px;
}
body.device-mobile #game-title-banner .title-logo {
    height: 30px !important;
    max-height: 30px !important;
    max-width: 30px !important;
}
body.device-mobile #game-title-banner #title-text {
    font-size: 1.4rem !important;
    letter-spacing: 3px !important;
    line-height: 1 !important;
    display: flex;
    gap: 4px;
}
body.device-mobile #game-title-banner #title-refund,
body.device-mobile #game-title-banner #title-rush {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
}

/* ── 3-frame mobile structure: Top / Spinner / Bottom ──
   Each section gets a distinct visual frame so the player perceives
   the layout as 3 deliberate panels (not one monolithic screen).
   "Cabinet" aesthetic — separate panes with gold edges. */
body.device-mobile #progressive-display {
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 0 0 10px 10px;
    border-top: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    margin: 0 4px;
    width: calc(100% - 8px);
}

body.device-mobile #reel-row {
    /* Frame around the spinner — middle of 3 frames. Subtle border
       only; transparent background lets the page behind show through
       (so the cabinet feels integrated, not a black void). */
    margin: 4px;
    padding: 2px 0 6px;
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.08);
    width: calc(100% - 8px);
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

body.device-mobile .meter-zone {
    opacity: 0.4;
}

body.device-mobile #controls {
    /* Bottom frame — third pane */
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    background: linear-gradient(180deg, #15111d 0%, #0a0612 100%);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
    margin: 0 4px;
    width: calc(100% - 8px);
}

/* Reels FULL-WIDTH on mobile — let the canvas span side-to-side
   inside its frame. The ResizeObserver scaling handles the rest. */
body.device-mobile #reel-section {
    width: 100% !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
}

body.device-mobile #reel-area {
    margin: 0 auto !important;
    /* Subtle vignette frame inside the spinner panel */
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 8px;
    overflow: hidden;
}

/* Touch-friendly tap targets — bigger spin button on phones */
body.device-mobile.device-touch .spin-btn {
    width: 64px;
    height: 64px;
}

/* Mascot smaller on phones so it doesn't dominate */
body.device-mobile #refund-rick {
    width: 130px !important;
    height: 200px !important;
    bottom: 80px !important;
}

/* Mascot bubble shorter copy on phones */
body.device-mobile .mascot-bubble {
    font-size: 0.78rem !important;
    max-width: 180px !important;
    padding: 8px 12px !important;
}

/* ── MOBILE LANDSCAPE — give reels horizontal advantage ── */
body.device-mobile.orient-landscape #reel-row {
    flex-direction: row !important;
}

body.device-mobile.orient-landscape #progressive-display {
    padding: 2px 4px;
}

body.device-mobile.orient-landscape .jp-tile {
    flex: 1 1 calc(25% - 2px);
}

body.device-mobile.orient-landscape #controls {
    padding: 3px 6px;
}

body.device-mobile.orient-landscape .spin-btn {
    width: 50px;
    height: 50px;
}

body.device-mobile.orient-landscape #game-title-banner {
    display: none;
}

/* Refund Rush receipt collector v2: this is a cabinet prop, not a side
   meter. The open case docks beside the title so the reels regain the
   horizontal space previously consumed by the left meter column. */
body.theme-refund_rush #game-title-banner {
    margin-left: 0;
    position: relative;
    overflow: visible;
}

body.device-mobile.theme-refund_rush #game-title-banner {
    gap: 6px;
    height: 48px;
}

body.device-mobile.theme-refund_rush #game-title-banner {
    width: calc(100% - 8px) !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 4px !important;
    padding: 6px 88px 6px 12px !important;
    justify-content: flex-start !important;
    overflow: hidden;
}

body.device-mobile.theme-refund_rush #title-text {
    justify-content: flex-start !important;
    gap: 4px !important;
}

body.device-mobile.theme-refund_rush #title-text::before {
    top: -3px;
    left: 0;
    transform: none;
    font-size: 0.38rem;
    letter-spacing: 0.24em;
}

body.device-mobile.theme-refund_rush #game-title-banner #title-refund,
body.device-mobile.theme-refund_rush #game-title-banner #title-rush {
    font-size: clamp(1.05rem, 7vw, 1.45rem) !important;
    letter-spacing: 0.08em !important;
}

body.device-mobile.theme-refund_rush #reel-row {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 3px !important;
    align-items: center !important;
    justify-content: center !important;
}

body.device-mobile.theme-refund_rush #reel-row::before,
body.device-mobile.theme-refund_rush #reel-row::after {
    display: none !important;
}

@media (min-width: 901px) {
    body.theme-refund_rush #reel-row {
        transform: translate(0, -1rem);
    }}

/* Final desktop composition override for the receipt-docked title. This block
   intentionally sits after the dock rules above, because those rules move the
   meter into the title banner and otherwise pull the marquee hard left. */
@media (min-width: 901px) {
    body.theme-refund_rush #game-title-banner {
        width: min(760px, 70vw);
        min-height: 64px;
        margin: 6px auto 8px !important;
        padding: 9px 150px 10px 34px;
        justify-content: flex-start;
    }

    body.theme-refund_rush #title-text {
        justify-content: flex-start;
    }

    body.theme-refund_rush #title-refund,
    body.theme-refund_rush #title-rush {
        font-size: clamp(1.55rem, 3.2vw, 3rem);
    }

    body.theme-refund_rush #reel-row {
        transform: translate(0, 0);
    }}

body.theme-trucker_tom #game-title-banner {
    margin-left: 0;
    position: relative;
    overflow: visible;
    padding-bottom: 8px;
}

@media (min-width: 901px) {
    body.theme-trucker_tom #reel-row {
        transform: translate(0, 0);
    }}

/* ── TABLET — balanced hybrid ── */
body.device-tablet #refund-rick {
    width: 200px !important;
    height: 290px !important;
}

body.device-tablet .spin-btn {
    width: 70px;
    height: 70px;
}

/* ── DESKTOP — full chrome, hover affordances ── */
body.device-desktop {
    /* Subtle pillars on either side of the game container — premium
       cabinet feel for the larger screen */
}

body.device-desktop #game-container::before,
body.device-desktop #game-container::after {
    content: '';
    position: fixed;
    top: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(180deg,
        rgba(15, 18, 32, 0.6) 0%,
        rgba(0, 0, 0, 0.85) 100%);
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(255, 215, 0, 0.08);
}

body.device-desktop #game-container::before { left: 0; border-right-width: 0; }
body.device-desktop #game-container::after { right: 0; border-left-width: 0; }

@media (max-width: 1400px) {
    body.device-desktop #game-container::before,
    body.device-desktop #game-container::after {
        display: none;
    }}

/* Hover-only affordances (only meaningful on pointer devices) */
body.device-pointer .spin-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6),
                0 0 40px rgba(27, 140, 78, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.device-pointer .bet-btn:hover,
body.device-pointer .denom-select:hover,
body.device-pointer .mult-btn:hover {
    background: rgba(255, 215, 0, 0.18);
    border-color: rgba(255, 215, 0, 0.55);
}

/* iOS-specific tweaks (notch / safe area) */
body.device-ios #game-container {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Mobile-only / Desktop-only visibility helpers ── */
.mobile-only { display: none !important; }
body.device-mobile .mobile-only { display: inline-flex !important; }
body.device-mobile .desktop-only { display: none !important; }

/* Mobile menu button (hamburger) + bet button (compact $) */
body.device-mobile .menu-btn,
body.device-mobile .mobile-bet-btn {
    height: 36px;
    padding: 4px 10px;
    background: linear-gradient(180deg, #2a2438, #1a1525);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

body.device-mobile .menu-btn { width: 36px; }

body.device-mobile .mobile-bet-btn .mbb-label {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

body.device-mobile .menu-btn:active,
body.device-mobile .mobile-bet-btn:active {
    transform: scale(0.95);
    background: linear-gradient(180deg, #1a1525, #2a2438);
}

/* Mobile popovers — slide up from the bottom controls bar */
.mobile-popover {
    position: fixed;
    bottom: 110px;          /* above the controls bar */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    min-width: 220px;
    max-width: 92vw;
    background: linear-gradient(180deg, rgba(20, 22, 38, 0.98), rgba(10, 12, 22, 0.98));
    border: 1.5px solid rgba(255, 215, 0, 0.55);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 22px rgba(255, 215, 0, 0.2);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-popover.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mobile-popover.hidden { display: none; }

/* Menu items stacked */
.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    margin: 2px 0;
    background: transparent;
    color: #F5F5F5;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
}

.mobile-menu-item:active {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.35);
}

.mobile-menu-item .mp-icon {
    font-size: 1.2rem;
    color: #FFD700;
    width: 24px;
    text-align: center;
}

.mobile-menu-item .mp-label {
    flex: 1;
}

/* Bet popover sections */
.mobile-bet-section {
    padding: 8px 6px;
}

.mobile-bet-section + .mobile-bet-section {
    border-top: 1px solid rgba(255, 215, 0, 0.18);
}

.mobile-bet-section-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.65rem;
    letter-spacing: 1.2px;
    color: #FFD700;
    margin-bottom: 6px;
    text-transform: uppercase;
}

#mobile-bet-popover .denom-select {
    width: 100%;
    height: 38px;
    font-size: 0.95rem;
}

#mobile-bet-popover .mult-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

#mobile-bet-popover .mult-btn {
    flex: 1 1 calc(25% - 4px);
    height: 36px;
    min-width: 50px;
    font-size: 0.85rem;
}

/* v3 (2026-04-27) — Respin counter reset punch. Triggered by .respin-reset-pop
   class on #hud-respins whenever respins_remaining ticks UP (any new DD $
   landing resets the counter to 3). One-shot 600ms scale + gold flash. */
@keyframes rr-respin-reset-pop {
    0%   { transform: scale(1.0); color: inherit; text-shadow: none; }
    25%  { transform: scale(1.65); color: #FFD700;
           text-shadow: 0 0 12px rgba(255, 215, 0, 0.95),
                        0 0 24px rgba(255, 215, 0, 0.55); }
    100% { transform: scale(1.0); color: inherit; text-shadow: none; }
}
/* 2026-09-21 - DD respin affordance: while the game waits for the
   player's SPIN tap before each respin, pulse the spin button gold and show
   a TAP SPIN prompt in the feature HUD. (A real-browser pass mistook the
   silent wait for a frozen bonus.) */
@keyframes ddRespinPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(27, 140, 78, 0.4), 0 0 10px rgba(255, 215, 0, 0.35),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: scale(1.0);
    }
    50% {
        box-shadow: 0 0 28px rgba(255, 215, 0, 0.85), 0 0 46px rgba(255, 215, 0, 0.45),
                    inset 0 1px 0 rgba(255, 255, 255, 0.25);
        transform: scale(1.1);
    }
}
.spin-btn.dd-awaiting-respin:not(:disabled) {
    animation: ddRespinPulse 0.9s ease-in-out infinite;
    border-color: #ffd700;
}
#dd-tap-prompt {
    color: #FFD700;
    font-weight: 900;
    letter-spacing: 2px;
    animation: ddPromptBlink 1s steps(2, jump-none) infinite;
}
@keyframes ddPromptBlink { 50% { opacity: 0.35; } }
body.reduced-stimulation .spin-btn.dd-awaiting-respin:not(:disabled) {
    animation: none;
    border-color: #ffd700;
}
body.reduced-stimulation #dd-tap-prompt { animation: none; }

#hud-respins.respin-reset-pop {
    display: inline-block;
    animation: rr-respin-reset-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

/* ────────────────────────────────────────────────────────────────────────
   Buy-Bonus modal v2 (2026-05-11)
   Side-by-side priced cards with trigger-rate stats + custom confirm.
   ──────────────────────────────────────────────────────────────────────── */
.bb-popup-v2 {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 24px;
}
.bb-popup-v2 .bb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
}
.bb-card-v2 {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: linear-gradient(180deg, #0e1424 0%, #14182a 100%);
    border: 2px solid rgba(255, 215, 0, 0.55);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 28px 32px 26px;
    pointer-events: auto;
    color: #e7eaf4;
    font-family: 'Montserrat', system-ui, sans-serif;
}
.bb-header {
    text-align: center;
    margin-bottom: 22px;
}
.bb-header .bb-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #FFD700;
    text-transform: uppercase;
}
.bb-header .bb-title {
    margin-top: 6px;
    font-size: clamp(1.6rem, 4.4vw, 2.4rem);
    font-weight: 900;
    background: linear-gradient(180deg, #FFE44D, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
}
.bb-header .bb-sub {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(231, 234, 244, 0.7);
}
.bb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.bb-feature {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(20, 26, 48, 0.95), rgba(15, 19, 36, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.20);
    border-radius: 12px;
    padding: 18px 18px 16px;
    transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
}
.bb-feature:not(.disabled):not(.unaffordable):hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 8px 28px rgba(255, 215, 0, 0.15);
}
.bb-feature.disabled,
.bb-feature.unaffordable { opacity: 0.55; }

.bb-feature-head { margin-bottom: 12px; }
.bb-feature-name {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #FFD700;
}
.bb-feature.fs .bb-feature-name { color: #FF9466; }
.bb-feature-tagline {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(231, 234, 244, 0.62);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bb-bullets {
    list-style: none;
    padding: 0;
    margin: 12px 0 14px;
    flex: 1 0 auto;
}
.bb-bullets li {
    position: relative;
    font-size: 13px;
    color: rgba(231, 234, 244, 0.88);
    padding-left: 18px;
    margin-bottom: 6px;
    line-height: 1.4;
}
.bb-bullets li::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(255, 215, 0, 0.7);
}

.bb-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 215, 0, 0.12);
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
    margin-bottom: 14px;
}
.bb-stat-label {
    font-size: 9px;
    color: rgba(231, 234, 244, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}
.bb-stat-val {
    font-size: 11px;
    color: rgba(231, 234, 244, 0.92);
    font-weight: 600;
}

.bb-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bb-price-amt {
    font-size: 1.6rem;
    font-weight: 900;
    color: #FFD700;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}
.bb-price-mult {
    margin-top: 2px;
    font-size: 10px;
    color: rgba(231, 234, 244, 0.55);
    letter-spacing: 1px;
}
.bb-buy-btn {
    flex: 0 0 auto;
    border: none;
    background: linear-gradient(180deg, #FFE44D, #FFA500);
    color: #1a1300;
    font-family: inherit;
    font-weight: 900;
    font-size: 13px;
    padding: 12px 22px;
    border-radius: 8px;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
    box-shadow: 0 4px 14px rgba(255, 165, 0, 0.4);
    animation: bb-buy-pulse 2.4s ease-in-out infinite;
}
.bb-buy-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(255, 165, 0, 0.55);
    filter: brightness(1.06);
}
.bb-buy-btn:disabled {
    background: linear-gradient(180deg, #3a4055, #25293a);
    color: rgba(231, 234, 244, 0.45);
    box-shadow: none;
    animation: none;
    cursor: not-allowed;
}
@keyframes bb-buy-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(255, 165, 0, 0.4); }
    50%      { box-shadow: 0 4px 22px rgba(255, 215, 0, 0.7); }
}

.bb-disclosure {
    margin: 4px 0 16px;
    padding: 12px 14px;
    background: rgba(255, 215, 0, 0.06);
    border-left: 3px solid rgba(255, 215, 0, 0.55);
    border-radius: 6px;
    font-size: 11px;
    color: rgba(231, 234, 244, 0.72);
    line-height: 1.5;
}
.bb-disclosure strong { color: #FFD700; }
.bb-disabled-line { color: rgba(255, 60, 80, 0.85); }

.bb-cancel {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(231, 234, 244, 0.2);
    color: rgba(231, 234, 244, 0.7);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 11px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.12s;
}
.bb-cancel:hover {
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.4);
}

/* ── Confirmation modal step ───────────────────────────────────────── */
.bb-confirm-wrap {
    position: fixed;
    inset: 0;
    z-index: 97;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.bb-confirm-wrap .bb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}
.bb-confirm-card {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #0e1424, #14182a);
    border: 2px solid rgba(255, 215, 0, 0.7);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    padding: 28px 36px 22px;
    text-align: center;
    pointer-events: auto;
    font-family: 'Montserrat', sans-serif;
    color: #e7eaf4;
    min-width: 320px;
    max-width: 420px;
}
.bb-confirm-kicker {
    font-size: 10px;
    font-weight: 800;
    color: #FFD700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.bb-confirm-title {
    margin-top: 8px;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #FFD700;
}
.bb-confirm-amount {
    margin-top: 14px;
    font-size: 2rem;
    font-weight: 900;
    color: #FFE44D;
    font-family: 'JetBrains Mono', monospace;
}
.bb-confirm-after {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(231, 234, 244, 0.65);
}
.bb-confirm-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}
.bb-confirm-cancel,
.bb-confirm-buy {
    flex: 1;
    border: none;
    font-family: inherit;
    font-weight: 800;
    font-size: 12px;
    padding: 11px 18px;
    border-radius: 6px;
    letter-spacing: 1.5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: filter 0.12s;
}
.bb-confirm-cancel {
    background: transparent;
    color: rgba(231, 234, 244, 0.72);
    border: 1px solid rgba(231, 234, 244, 0.2);
}
.bb-confirm-cancel:hover { color: #FFD700; border-color: rgba(255, 215, 0, 0.4); }
.bb-confirm-buy {
    background: linear-gradient(180deg, #FFE44D, #FFA500);
    color: #1a1300;
}
.bb-confirm-buy:hover { filter: brightness(1.08); }

/* ── Game-feel pass (2026-09-13): scene-dip overlay ────────────────────
   Quick dip-to-black used as a "scene change" beat on base↔feature
   transitions. Driven from effects.js sceneDip(); starts transparent and
   is faded via inline styles. */
.fx-scene-dip {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 200;
}

/* ── Jackpot Slam celebration (all five themes) ────────────────────────── */
.jackpot-slam-overlay {
    position: fixed;
    inset: 0;
    z-index: 93;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.55) 55%,
        rgba(0, 0, 0, 0.85) 100%);
    opacity: 0;
    animation: jackpot-slam-fadein 0.28s ease forwards;
}
.jackpot-slam-overlay.out { animation: jackpot-slam-fadeout 0.25s ease forwards; }
@keyframes jackpot-slam-fadein { to { opacity: 1; } }
@keyframes jackpot-slam-fadeout { to { opacity: 0; } }

.jackpot-slam-rays {
    position: absolute;
    width: 160vmax;
    height: 160vmax;
    background: repeating-conic-gradient(from 0deg,
        rgba(255, 214, 90, 0.14) 0deg 7deg,
        transparent 7deg 15deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
    mask-image: radial-gradient(circle, #000 0%, transparent 62%);
    animation: jackpot-slam-spin 16s linear infinite;
}
.jackpot-slam-overlay[data-tier="grand"] .jackpot-slam-rays {
    background: repeating-conic-gradient(from 0deg,
        rgba(255, 240, 200, 0.22) 0deg 6deg,
        transparent 6deg 12deg);
    animation-duration: 7s;
}
@keyframes jackpot-slam-spin { to { transform: rotate(360deg); } }

.jackpot-slam-shockwave {
    position: absolute;
    width: 46vmin;
    height: 46vmin;
    border-radius: 50%;
    border: 6px solid currentColor;
    color: #ffd76a;
    opacity: 0;
}

.jackpot-slam-mark {
    position: relative;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-8deg);
    padding: clamp(20px, 4vw, 36px) clamp(30px, 7vw, 76px);
    border: clamp(6px, 1vw, 10px) double currentColor;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 60px currentColor, inset 0 0 40px rgba(255, 255, 255, 0.08);
    opacity: 0;
}
.jackpot-slam-kicker {
    display: block;
    font-size: clamp(0.9rem, 2.6vw, 1.5rem);
    letter-spacing: 0.55em;
    font-weight: 700;
    opacity: 0.9;
    margin-bottom: 0.4em;
}
.jackpot-slam-title {
    display: block;
    font-weight: 900;
    font-size: clamp(2.6rem, 11vw, 6.5rem);
    line-height: 1.02;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 30px currentColor;
}
.jackpot-slam-amount {
    display: block;
    margin-top: 0.35em;
    font-weight: 800;
    font-size: clamp(1.8rem, 7vw, 4rem);
    letter-spacing: 0.04em;
    background: linear-gradient(100deg, #fff6d8 20%, #ffd76a 40%, #fff6d8 60%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: jackpot-slam-shimmer 2.2s linear infinite;
    filter: drop-shadow(0 2px 14px rgba(255, 200, 80, 0.55));
}
@keyframes jackpot-slam-shimmer { to { background-position: -200% 0; } }

/* Tier colors */
.jackpot-slam-overlay[data-tier="mini"] .jackpot-slam-mark { color: #cfe4ff; }
.jackpot-slam-overlay[data-tier="minor"] .jackpot-slam-mark { color: #ffd34d; }
.jackpot-slam-overlay[data-tier="major"] .jackpot-slam-mark { color: #ffab2e; }
.jackpot-slam-overlay[data-tier="grand"] .jackpot-slam-mark {
    color: #fff8e6;
    border-color: #ffe9a8;
    animation: jackpot-slam-grandpulse 1.1s ease-in-out infinite;
}
@keyframes jackpot-slam-grandpulse {
    50% { box-shadow: 0 0 110px #ffe9a8, inset 0 0 60px rgba(255, 255, 255, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
    .jackpot-slam-rays,
    .jackpot-slam-amount,
    .jackpot-slam-overlay[data-tier="grand"] .jackpot-slam-mark { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Touch targets — 2026-09-24

   Measured at 390x844 / DPR 3 on all five games: 17 interactive controls
   render under 44px on at least one axis, identically across themes (shared
   markup, not per-theme). No horizontal overflow anywhere, so the responsive
   layout itself is sound — only the hit areas are short.

   The cause is a comment at game.css:3271, which sized the action row down
   ~12% and justified it as "still meets the 36px iOS / 40px Android minimum."
   Both figures are wrong: Apple's HIG specifies 44x44pt and Material
   specifies 48x48dp. The row was shrunk against a standard that does not
   exist. (Corrected in place where it sits.)

   Two techniques, chosen per control:

   1. RESIZE, where the control cannot reflow anything — absolutely
      positioned, or inside a modal with room to spare.
   2. EXPAND THE HIT AREA ONLY, via a centred ::after, where the control
      lives in the packed bottom action row. The visual button is untouched;
      clicks on the invisible box hit the parent. This is deliberate: the
      owner's standing instruction is not to change the visual theme, and
      widening that row risks the wrap it was shrunk to avoid.

   The three controls left alone, on purpose:
     .info-dot        8x8 pagination indicators with adjacent prev/next
                      buttons. Padding them to 44 would push the dot row
                      wider for no real gain in reachability.
     .helpline-strip-link  45x11 — a text link, not a button.
     .A (inline anchor)    text inside a paragraph.
   Inflating inline text to button size is not an accessibility win; WCAG
   2.5.8 exempts inline links for exactly this reason.
   ───────────────────────────────────────────────────────────────────── */

/* (1) RESIZE — cannot reflow: absolutely positioned above the modal header. */
.info-close-btn {
    width: 44px;
    height: 44px;
}

/* (1) RESIZE — modal footer nav; its row already carries 341px-wide
   siblings, so 36 -> 44 has room. */
.info-nav-btn {
    width: 44px;
    height: 44px;
}

/* (2) HIT AREA ONLY — the bottom action row. Visual size unchanged. */
.info-btn,
.history-btn,
.sound-btn,
.menu-btn,
.turbo-btn,
.auto-btn,
.buy-bonus-btn,
body.device-mobile .mobile-bet-btn {
    position: relative;
}

.info-btn::after,
.history-btn::after,
.sound-btn::after,
.menu-btn::after,
.turbo-btn::after,
.auto-btn::after,
.buy-bonus-btn::after,
body.device-mobile .mobile-bet-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* Transparent, so it changes nothing visually. Deliberately NOT
       z-index: -1 — that paints the box behind the parent's background, and
       where an ancestor is opaque the protruding edge stops receiving the
       clicks it exists to catch. Painted in flow, a click anywhere on it
       targets the button, because the pseudo-element IS the button. */
    background: none;
    border: 0;
}

/* .buy-bonus-btn and .mobile-bet-btn are wider than 44px already; they only
   need the vertical reach, and a fixed 44px wide ::after would be narrower
   than the button itself. Match the button's own width instead. */
.buy-bonus-btn::after,
body.device-mobile .mobile-bet-btn::after {
    width: 100%;
    min-width: 44px;
}