/* 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;
    text-shadow: none;
    letter-spacing: 4px;
}
/* GRANT = dollar green, RUSH = gold yellow (matches the in-game title banner) */
#loading-title .lt-grant,
#loading-title .lt-rush {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#loading-title .lt-grant {
    background-image: linear-gradient(180deg, #83ffb1 0%, #2fd873 42%, #0f7c43 100%);
}
#loading-title .lt-rush {
    background-image: linear-gradient(180deg, #fff6b8 0%, #ffd23f 38%, #b97910 100%);
}

.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;
    /* Tight gap so the receipt meter visually attaches to the reel cabinet
       — owner feedback: meter looked detached at the original 24px. */
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(18px, 2vw, 30px);
    transform: translate(0, -2rem);
}

#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;
}

/* Meter column: title + meter stacked vertically. Sits flush against the
   leftmost reel so the receipt-meter reads as part of the cabinet. */
#meter-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    /* Pull the meter closer to the reels — the canvas has natural left
       padding inside its own bounding box, this nudge sits the meter
       border right against the leftmost reel column. */
    margin-right: -2px;
    /* 2026-05-12 — Lock the column width. Without this, the meter's
       point counter ("0 / 100" → "65 / 100" → "100 / 100"), "Next: …"
       label, and the streak line all change character count between
       spins. The intrinsic width then bumps, steals flex space from
       #reel-section, and the canvas re-scales mid-animation. Fixed
       width = stable layout = wheels stay put. */
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    /* CSS containment isolates this subtree's layout calculation —
       text-content changes inside won't trigger reflows that propagate
       to siblings. */
    contain: layout style;
}

/* 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;
}

/* ── Receipt Meter (Desktop: in its own column) ── */
#receipt-meter {
    width: 64px;
    height: clamp(350px, 60vh, 650px);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--warm-gold);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
    backdrop-filter: blur(7px);
}

.meter-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.5rem;
    font-weight: 900;
    color: var(--gold);
    text-align: center;
    padding: 2px 0 3px 0;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
}

.meter-body {
    flex: 1;
    position: relative;
    margin: 2px;
    background: var(--cream);
    border-radius: 3px;
    overflow: hidden;
}

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

.zone-standard {
    bottom: 0;
    height: 30%;
    background: #CD853F;
    opacity: 0.08;
}

.zone-itemized {
    bottom: 30%;
    height: 35%;
    background: #C0C0C0;
    opacity: 0.08;
}

.zone-max {
    bottom: 65%;
    height: 35%;
    background: var(--gold);
    opacity: 0.08;
}

.meter-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(180deg, var(--money-green), var(--deep-green));
    transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 0 0 4px 4px;
    z-index: 1;
}

.receipt-collector {
    display: none;
}

body.theme-refund_rush #receipt-meter.receipt-collector-mode {
    width: 78px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.16), transparent 52%),
        linear-gradient(180deg, rgba(11, 18, 28, 0.86), rgba(7, 11, 18, 0.94));
    border-color: rgba(255, 215, 0, 0.72);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.36),
        inset 0 0 18px rgba(255, 215, 0, 0.13);
}

body.theme-refund_rush #receipt-meter.receipt-collector-mode .meter-body {
    margin: 4px 6px;
    background: transparent;
    border-radius: 10px 10px 16px 16px;
}

body.theme-refund_rush #receipt-meter.receipt-collector-mode .meter-zone,
body.theme-refund_rush #receipt-meter.receipt-collector-mode .meter-marker,
body.theme-refund_rush #receipt-meter.receipt-collector-mode .meter-fill {
    opacity: 0 !important;
}

body.theme-refund_rush #receipt-meter.receipt-collector-mode .receipt-collector {
    display: block;
    position: absolute;
    inset: 2px 3px 4px;
    z-index: 4;
    pointer-events: none;
}

.collector-glass {
    position: absolute;
    inset: 10px 4px 12px;
    border-radius: 14px 14px 22px 22px / 22px 22px 14px 14px;
    border: 2px solid rgba(255, 246, 204, 0.72);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.20), transparent 18%, transparent 74%, rgba(255,255,255,0.12)),
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.14),
        0 0 18px rgba(255, 215, 0, 0.18);
    overflow: hidden;
}

.collector-glass::before {
    content: '';
    position: absolute;
    inset: 5px 9px auto 9px;
    height: 28%;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.28), transparent 70%);
    opacity: 0.58;
}

.collector-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(-12deg,
            transparent 0 18px,
            rgba(255,255,255,0.08) 18px 22px,
            transparent 22px 42px);
    opacity: 0.32;
    animation: collectorGlassSheen 5.6s linear infinite;
}

.collector-lip {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 5px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff4b8, #d4a82a 60%, #7d5610);
    box-shadow: 0 2px 8px rgba(0,0,0,0.42), 0 0 10px rgba(255,215,0,0.38);
}

.receipt-pile {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--receipt-level, 0%);
    min-height: 18%;
    transition: height 0.75s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.receipt-pile::before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 0;
    height: 100%;
    border-radius: 8px 8px 18px 18px;
    background:
        repeating-linear-gradient(8deg, rgba(255,249,220,0.92) 0 7px, rgba(226,198,130,0.95) 7px 10px),
        linear-gradient(180deg, rgba(255,215,0,0.14), rgba(125,86,16,0.38));
    box-shadow: inset 0 7px 12px rgba(255,255,255,0.18);
}

.receipt-pile::after {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7%;
    height: 86%;
    border-radius: 8px 8px 16px 16px;
    background:
        repeating-linear-gradient(-16deg,
            transparent 0 12px,
            rgba(89, 55, 14, 0.20) 12px 14px,
            transparent 14px 26px);
    opacity: 0.7;
}

.collector-receipt {
    position: absolute;
    width: 34px;
    height: 20px;
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(26,58,82,0.34) 0 10%, transparent 10%),
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(26,58,82,0.18) 4px 5px),
        linear-gradient(90deg, transparent 0 62%, rgba(185, 58, 34, 0.28) 62% 70%, transparent 70%),
        linear-gradient(180deg, #fff9dc, #ecd187);
    border: 1px solid rgba(98, 62, 16, 0.28);
    box-shadow: 0 1px 2px rgba(0,0,0,0.26);
    transform-origin: 50% 75%;
}

.collector-shine {
    position: absolute;
    left: 9px;
    top: 20px;
    width: 9px;
    height: 68%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.03));
    opacity: 0.58;
}

.meter-state-label {
    display: none;
}

body.theme-refund_rush #receipt-meter.receipt-collector-mode .meter-points {
    display: none;
}

body.theme-refund_rush #receipt-meter.receipt-collector-mode .meter-next {
    min-height: 26px;
    font-size: 0.42rem;
}

body.theme-refund_rush #receipt-meter.receipt-collector-mode.receipt-added,
body.theme-refund_rush #receipt-meter.receipt-collector-mode.receipt-caught {
    animation: meterProgressPulse 0.55s ease-out;
}

body.theme-refund_rush #receipt-meter.receipt-collector-mode[data-collector-state="hot"] .collector-glass,
body.theme-refund_rush #receipt-meter.receipt-collector-mode[data-collector-state="ready"] .collector-glass {
    box-shadow:
        inset 0 0 22px rgba(255,255,255,0.18),
        0 0 24px rgba(255, 215, 0, 0.34);
}

body.device-mobile.theme-refund_rush #receipt-meter.receipt-collector-mode {
    width: 100%;
    height: 46px;
}

body.device-mobile.theme-refund_rush #receipt-meter.receipt-collector-mode .meter-body {
    margin: 3px 56px 3px 6px;
}

body.device-mobile.theme-refund_rush #receipt-meter.receipt-collector-mode .receipt-collector {
    inset: 1px 2px 2px;
}

body.device-mobile.theme-refund_rush #receipt-meter.receipt-collector-mode .collector-glass {
    inset: 10px 8px 7px;
    border-radius: 999px;
}

body.device-mobile.theme-refund_rush #receipt-meter.receipt-collector-mode .collector-lip {
    left: 14px;
    right: auto;
    top: 7px;
    width: 64px;
}

body.device-mobile.theme-refund_rush #receipt-meter.receipt-collector-mode .meter-next {
    position: absolute;
    right: 6px;
    top: 8px;
    width: 50px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.34rem;
    line-height: 1.05;
}

/* 2026-05-12 — Drain-direction meter (Trucker Tom theme = fuel-gauge
   metaphor). Same math underneath: meter.points still climbs 0 → 100,
   but the visual fill represents "fuel remaining" and shrinks as points
   accumulate. Hitting 100 points = empty tank = "FUEL STOP" bonus
   (same DD trigger). meter.js applies `.drain` to #meter-fill when the
   active theme declares `meter.direction = "drain"`. */
.meter-fill.drain {
    background: linear-gradient(180deg,
        #ff6b35 0%,    /* hot at top — about to be empty */
        #ff9b35 35%,
        #ffd700 70%,
        #27d860 100%); /* green at bottom — plenty of fuel */
    border-radius: 4px 4px 0 0;
}
.meter-body.drain {
    /* In drain mode the fill anchors to the TOP and shrinks downward
       (the depleting fuel stripe). Tank-style readout. */
    background: rgba(255, 255, 255, 0.04);
}
.meter-body.drain .meter-fill {
    top: 0;
    bottom: auto;
}

.meter-marker {
    position: absolute;
    right: 0;
    left: 0;
    height: 2px;
    pointer-events: none;
    z-index: 2;
}

.meter-marker span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -8px;
    width: 54px;
    font-size: 0.38rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.05;
    white-space: normal;
    text-align: center;
    color: var(--charcoal);
    text-shadow: 0 0 3px white;
}

.marker-standard { bottom: 30%; border-top: 2px solid #CD853F; }
.marker-itemized { bottom: 65%; border-top: 2px solid #C0C0C0; }
.marker-maximum { bottom: 100%; border-top: 2px solid var(--gold); }
.marker-maximum span { top: 3px; }

.meter-marker.reached span { color: var(--gold); }

/* 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);
    }
}
.meter-marker.proximity {
    animation: meterMarkerProximity 0.9s ease-in-out infinite;
}
.meter-marker.proximity span {
    color: var(--gold);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.85), 0 0 2px white;
    font-weight: 900;
}

.meter-points {
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 2px;
    color: var(--money-green);
    font-family: 'Courier Prime', 'Courier New', monospace;
    line-height: 1.1;
}

.meter-next {
    min-height: 20px;
    padding: 2px 2px 4px;
    color: rgba(255, 215, 0, 0.82);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.46rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.36);
    border-top: 1px solid rgba(255, 215, 0, 0.16);
}

.meter-next.ready {
    color: #FFFFFF;
    background: rgba(255, 215, 0, 0.24);
}

.meter-next[data-gain]::after {
    content: attr(data-gain);
    display: block;
    margin-top: 1px;
    color: var(--money-green);
    font-family: 'Courier Prime', monospace;
    font-size: 0.58rem;
    animation: meterGainFloat 0.75s ease-out forwards;
}

#receipt-meter.meter-progressed {
    animation: meterProgressPulse 0.55s ease-out;
}

@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); }
}

@keyframes collectorGlassSheen {
    0% { transform: translateY(-18%); opacity: 0.18; }
    45% { opacity: 0.34; }
    100% { transform: translateY(18%); opacity: 0.18; }
}

@keyframes meterGainFloat {
    0%   { opacity: 0; transform: translateY(3px); }
    25%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}

/* ── 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);
}

#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; }

/* 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;
}
/* Hide breakdown on tier-0 — small wins get the count-up only, no
   per-combo essay (would feel ceremonial for a $0.20 win). */
.win-tier-0 ~ #win-breakdown,
#win-overlay:not(.tier-1):not(.tier-2):not(.tier-3):not(.tier-4) #win-breakdown {
    display: none;
}

/* 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);
}

.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. */
.bet-time-hint {
    display: block;
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.1;
    min-height: 0.7rem;
    text-align: center;
}
.bet-time-hint:empty { display: none; }

#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);
}

/* ── 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: 40;
    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;
}

.info-modal-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 3vw, 1.4rem);
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 2px;
}

.info-close-btn {
    width: 32px;
    height: 32px;
    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;
}

.info-page {
    position: absolute;
    inset: 0;
    padding: 20px;
    overflow-y: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: none;
    -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;
    color: var(--money-green);
}

.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 {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 4px;
}

.paytable-item .sym-icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin: 0 auto 4px;
    image-rendering: auto;
}

.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;
}

.paytable-item .sym-pays {
    font-size: 0.7rem;
    color: var(--white);
    opacity: 0.8;
    line-height: 1.4;
}

.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;
    }

    #meter-column {
        flex-direction: row;
        align-items: center;
        align-self: auto;
        gap: 6px;
        padding: 0;
        /* Override the 78px desktop lock — on mobile/tablet the meter
           is horizontal and spans full width above the reels. */
        width: 100%;
        min-width: 0;
        max-width: none;
    }

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

    #receipt-meter {
        width: 100%;
        height: 52px;
        flex: 1;
        flex-direction: row;
        border-radius: 0;
    }

    .meter-title {
        padding: 1px 8px;
        font-size: 0.5rem;
        white-space: nowrap;
    }

    .meter-body {
        flex: 1;
        margin: 6px 4px;
    }

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

    .zone-standard {
        left: 0;
        bottom: auto;
        width: 30%;
        height: 100%;
    }

    .zone-itemized {
        left: 30%;
        bottom: auto;
        width: 35%;
        height: 100%;
    }

    .zone-max {
        left: 65%;
        bottom: auto;
        width: 35%;
        height: 100%;
    }

    .meter-fill {
        width: 0%;
        height: 100%;
        bottom: auto;
        left: 0;
        right: auto;
        top: 0;
        transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        border-radius: 4px 0 0 4px;
        background: linear-gradient(90deg, var(--deep-green), var(--money-green));
    }

    .meter-marker {
        bottom: auto !important;
        top: 0;
        height: 100%;
        width: 2px;
    }

    .meter-marker span {
        top: -14px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.5rem;
    }

    .marker-standard { left: 30%; bottom: auto !important; border-top: none; border-left: 2px solid #CD853F; }
    .marker-itemized { left: 65%; bottom: auto !important; border-top: none; border-left: 2px solid #C0C0C0; }
    .marker-maximum { left: auto; right: 0; bottom: auto !important; border-top: none; border-left: 2px solid var(--gold); }

    .meter-points {
        writing-mode: horizontal-tb;
        padding: 4px 8px;
        font-size: 0.65rem;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    #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 {
        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%);
    }

    #meter-column {
        flex-direction: row;
        align-items: center;
        align-self: auto;
        gap: 6px;
        padding: 0;
        /* Override the 78px desktop lock — on mobile/tablet the meter
           is horizontal and spans full width above the reels. */
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    #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;
    }

    #receipt-meter {
        width: 100%;
        height: 52px;
        flex: 1;
        flex-direction: row;
        border-radius: 0;
    }

    .meter-title {
        padding: 1px 10px;
        font-size: 0.5rem;
        white-space: nowrap;
    }

    .meter-body {
        flex: 1;
        margin: 6px 4px;
    }

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

    .zone-standard {
        left: 0;
        bottom: auto;
        width: 30%;
        height: 100%;
    }

    .zone-itemized {
        left: 30%;
        bottom: auto;
        width: 35%;
        height: 100%;
    }

    .zone-max {
        left: 65%;
        bottom: auto;
        width: 35%;
        height: 100%;
    }

    .meter-fill {
        width: 0%;
        height: 100%;
        bottom: auto;
        left: 0;
        right: auto;
        top: 0;
        transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        border-radius: 4px 0 0 4px;
        background: linear-gradient(90deg, var(--deep-green), var(--money-green));
    }

    .meter-marker {
        bottom: auto !important;
        top: 0;
        height: 100%;
        width: 2px;
    }

    .meter-marker span {
        top: -14px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.5rem;
    }

    .marker-standard { left: 30%; bottom: auto !important; border-top: none; border-left: 2px solid #CD853F; }
    .marker-itemized { left: 65%; bottom: auto !important; border-top: none; border-left: 2px solid #C0C0C0; }
    .marker-maximum { left: auto; right: 0; bottom: auto !important; border-top: none; border-left: 2px solid var(--gold); }

    .meter-points {
        padding: 4px 10px;
        font-size: 0.65rem;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    #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. Touch-target
       still meets the 36px iOS / 40px Android minimum. */
    .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;
    }
    /* Keep the meter readable on compact desktop without letting long
       threshold labels clip against the left viewport edge. */
    #meter-column {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
    }
    #receipt-meter {
        width: 56px;
    }
    .meter-marker span {
        width: 48px;
        font-size: 0.34rem;
    }
}

/* ── Large Desktop (>1600px) ── */
@media (min-width: 1600px) {
    #receipt-meter {
        width: 66px;
    }

    .meter-title {
        font-size: 0.6rem;
    }

    .meter-marker span {
        font-size: 0.55rem;
    }

    .meter-points {
        font-size: 0.7rem;
    }

    .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;
}

body.theme-refund_rush #title-text::before {
    content: 'STACK THE RECEIPTS';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    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;
}

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 #receipt-meter.receipt-collector-mode {
    width: 86px;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 231, 128, 0.22), transparent 50%),
        linear-gradient(180deg, rgba(12, 20, 31, 0.92), rgba(5, 8, 14, 0.95));
    border-color: rgba(255, 226, 128, 0.78);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.42),
        0 0 20px rgba(255, 215, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.theme-refund_rush #receipt-meter.receipt-collector-mode .collector-glass {
    inset: 13px 5px 14px;
    border-radius: 20px 20px 28px 28px / 28px 28px 18px 18px;
    border-color: rgba(255, 249, 220, 0.84);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.26), transparent 18%, transparent 70%, rgba(255,255,255,0.16)),
        radial-gradient(ellipse at 50% 100%, rgba(255, 215, 0, 0.16), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.025));
}

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;
}

.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);
}

/* ── Ledger Ladder (Direct Deposit) — 5 rungs, +1 per column drop ── */
.dd-ledger-ladder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

.dd-rung {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 46px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.22));
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    line-height: 1;
    transition: color 0.2s ease, border-color 0.2s ease,
        background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dd-rung-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}

.dd-rung.lit {
    border-color: rgba(255, 215, 0, 0.75);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.24), rgba(27, 140, 78, 0.16));
    color: #FFFFFF;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.28);
}

.dd-rung.lit .dd-rung-dot {
    background: #FFD700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

.dd-rung.current {
    transform: translateY(-1px) scale(1.07);
    border-color: rgba(255, 215, 0, 0.95);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(27, 140, 78, 0.18);
}

@keyframes ddRungPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}
.dd-rung-pop { animation: ddRungPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Statement Total banner (Federal Review reveal) */
.dd-statement-banner span {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 3px;
    opacity: 0.85;
}
.dd-statement-banner strong {
    display: block;
    font-size: clamp(1.6rem, 5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

/* Avalanche falling-check + banked-cell seal + additive consolidated tag are
   styled inline in game.js (positions are computed per-cell at runtime). */

.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;
}

/* Receipt meter on mobile — transparent + slimmer. Was rgba(0,0,0,0.6)
   solid + 52px tall horizontal bar = looked like a giant black band
   dominating the middle frame. Now nearly invisible until it fills. */
body.device-mobile #receipt-meter {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 6px;
    height: 36px;
}

body.device-mobile .meter-title {
    background: transparent;
    color: rgba(255, 215, 0, 0.7);
}

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 #meter-column {
    flex: 0 0 auto;
    flex-direction: column !important;
    width: 50px !important;
    padding: 0 4px !important;
}

body.device-mobile.orient-landscape #meter-column .meter-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.55rem;
    padding: 4px 0;
}

body.device-mobile.orient-landscape #receipt-meter {
    flex-direction: column !important;
    width: 38px !important;
    height: auto !important;
    flex: 1;
}

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.theme-refund_rush #meter-column.meter-docked {
    display: none !important;
}

body.theme-refund_rush .title-receipt-dock {
    width: clamp(118px, 10vw, 154px);
    height: clamp(64px, 8vh, 90px);
    position: absolute;
    right: clamp(76px, 11vw, 166px);
    top: 50%;
    transform: translateY(-46%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.44));
    pointer-events: none;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode {
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .meter-body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: visible;
    background: transparent;
    border-radius: 0;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .meter-next,
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .meter-points {
    display: none !important;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .receipt-collector {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-glass {
    inset: 15% 8% 10%;
    border-radius: 12px 12px 28px 28px / 12px 12px 24px 24px;
    border: 2px solid rgba(255, 246, 204, 0.72);
    border-top-color: rgba(255, 246, 204, 0.26);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.24), transparent 18%, transparent 74%, rgba(255,255,255,0.14)),
        radial-gradient(120% 82% at 50% 104%, rgba(255, 215, 0, 0.18), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.02));
    box-shadow:
        inset 0 0 16px rgba(255,255,255,0.16),
        inset 0 -14px 16px rgba(89, 54, 13, 0.24),
        0 0 18px rgba(255, 215, 0, 0.18);
    transform: perspective(140px) rotateX(3deg);
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-lip {
    left: 5%;
    right: 5%;
    top: 4%;
    height: 19%;
    min-height: 9px;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at 50% 28%, rgba(255,255,255,0.55), transparent 38%),
        linear-gradient(180deg, #fff4b8, #d4a82a 62%, #7d5610);
    box-shadow:
        0 2px 8px rgba(0,0,0,0.44),
        inset 0 -2px 5px rgba(83, 50, 8, 0.42),
        0 0 11px rgba(255,215,0,0.34);
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-lip::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 34%;
    height: 33%;
    border-radius: 999px;
    background: rgba(74, 48, 12, 0.36);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.28);
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .receipt-pile::before {
    left: 5%;
    right: 5%;
    border-radius: 8px 8px 22px 22px;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-receipt {
    width: 36%;
    height: 27%;
    min-width: 23px;
    min-height: 14px;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .receipt-pile {
    min-height: 27%;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-receipt:nth-child(3n) {
    filter: brightness(1.07) saturate(1.02);
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-receipt:nth-child(4n) {
    background:
        linear-gradient(90deg, rgba(26,58,82,0.28) 0 9%, transparent 9%),
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(26,58,82,0.14) 4px 5px),
        linear-gradient(180deg, #fff6cf, #e5c372);
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-receipt-landing {
    top: 8%;
    bottom: auto;
    z-index: 20;
    opacity: 0;
    transform: translateY(-18px) rotate(var(--landing-rot, 12deg)) scale(1.1);
    animation: collectorReceiptLanding 0.72s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-shine {
    left: 16%;
    top: 28%;
    width: 8%;
    height: 52%;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode.receipt-added,
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode.receipt-caught {
    animation: receiptCaseCatch 0.55s ease-out;
}

.receipt-handoff-slip {
    position: fixed;
    z-index: 101;
    width: 54px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(82, 49, 9, 0.48);
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(26,58,82,0.35) 0 10%, transparent 10%),
        repeating-linear-gradient(0deg, transparent 0 6px, rgba(26,58,82,0.16) 6px 7px),
        linear-gradient(180deg, #fffbe2 0%, #e8c76f 100%);
    color: #1c2a3a;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.54rem;
    font-weight: 1000;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    box-shadow:
        0 0 16px rgba(255, 215, 0, 0.52),
        0 7px 18px rgba(0, 0, 0, 0.38);
    transform: translate(0, 0) rotate(-13deg) scale(1);
    animation: receiptHandoffSlip 0.92s cubic-bezier(0.2, 0.82, 0.2, 1) forwards;
}

@keyframes receiptCaseCatch {
    0% { transform: translateY(0) scale(1); }
    36% { transform: translateY(-2px) scale(1.045); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes receiptHandoffSlip {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-18deg) scale(0.76);
    }
    18% {
        opacity: 1;
        transform: translate(-18px, -18px) rotate(-8deg) scale(1.05);
    }
    72% {
        opacity: 1;
        transform: translate(calc(var(--to-x) * 0.86), calc(var(--to-y) * 0.9)) rotate(16deg) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(var(--to-x), var(--to-y)) rotate(22deg) scale(0.62);
    }
}

@keyframes collectorReceiptLanding {
    0% {
        opacity: 0;
        transform: translateY(-20px) rotate(calc(var(--landing-rot, 12deg) - 14deg)) scale(1.14);
    }
    42% {
        opacity: 1;
        transform: translateY(8px) rotate(calc(var(--landing-rot, 12deg) + 8deg)) scale(1.0);
    }
    72% {
        opacity: 1;
        transform: translateY(15px) rotate(var(--landing-rot, 12deg)) scale(0.94);
    }
    100% {
        opacity: 0;
        transform: translateY(19px) rotate(var(--landing-rot, 12deg)) scale(0.88);
    }
}

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

body.device-mobile.theme-refund_rush .title-receipt-dock {
    width: 76px;
    height: 44px;
    right: 9px;
    top: 50%;
    transform: translateY(-48%);
}

body.device-mobile.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode {
    width: 76px;
    height: 44px;
}

body.device-mobile.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .meter-body {
    margin: 0;
}

body.device-mobile.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-glass {
    inset: 16% 8% 10%;
    border-radius: 10px 10px 22px 22px / 10px 10px 20px 20px;
}

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 .title-receipt-dock {
    width: 74px;
    height: 42px;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
}

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 .title-receipt-dock {
        right: 18px;
        width: clamp(110px, 9vw, 136px);
        height: clamp(58px, 7vh, 78px);
        transform: translateY(-50%);
    }

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

/* Trucker Tom: the fuel gauge should read as dashboard instrumentation, not
   as a placeholder bar beside the reels. Desktop docks it into the title
   chrome and gives the reels the full cabinet width. */
body.theme-trucker_tom #meter-column.meter-docked {
    display: none !important;
}

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

body.theme-trucker_tom .title-meter-dock {
    position: absolute;
    left: clamp(28px, 4vw, 74px);
    top: 50%;
    transform: translateY(-42%);
    width: clamp(178px, 17vw, 260px);
    height: 48px;
    z-index: 6;
    pointer-events: none;
}

body.theme-trucker_tom #game-title-banner #receipt-meter {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    flex-direction: row;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.58);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.10), transparent 12%, transparent 88%, rgba(255,255,255,0.06)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.16), transparent 62%),
        linear-gradient(180deg, rgba(36, 25, 11, 0.92), rgba(10, 8, 7, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 0 16px rgba(255, 215, 0, 0.10),
        0 8px 22px rgba(0, 0, 0, 0.42),
        0 0 16px rgba(224, 160, 32, 0.10);
    overflow: visible;
}

body.theme-trucker_tom #game-title-banner #receipt-meter .meter-title {
    padding: 0;
    font-size: 0.48rem;
    line-height: 1.05;
    color: rgba(255, 215, 0, 0.92);
}

body.theme-trucker_tom #game-title-banner #receipt-meter .meter-body {
    height: 18px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.52);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.24)),
        rgba(0, 0, 0, 0.54);
    overflow: hidden;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.72),
        0 0 10px rgba(255, 215, 0, 0.12);
}

body.theme-trucker_tom #game-title-banner #receipt-meter .meter-fill {
    height: 100% !important;
    width: 100%;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.36), transparent 46%, rgba(0,0,0,0.16)),
        linear-gradient(90deg, #27d860 0%, #ffd700 62%, #ff7b31 100%);
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.34);
}

body.theme-trucker_tom #game-title-banner #receipt-meter .meter-marker {
    top: 0;
    bottom: auto !important;
    height: 100%;
    width: 2px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.52);
}

body.theme-trucker_tom #game-title-banner #receipt-meter .marker-standard { left: 30%; }
body.theme-trucker_tom #game-title-banner #receipt-meter .marker-itemized { left: 65%; }
body.theme-trucker_tom #game-title-banner #receipt-meter .marker-maximum {
    left: auto;
    right: 0;
}

body.theme-trucker_tom #game-title-banner #receipt-meter .meter-marker span {
    display: none;
}

body.theme-trucker_tom #game-title-banner #receipt-meter .meter-points {
    padding: 0;
    min-width: 42px;
    font-size: 0.52rem;
    color: #27d860;
}

body.theme-trucker_tom #game-title-banner #receipt-meter .meter-next {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -15px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.42rem;
    color: rgba(255, 215, 0, 0.84);
}

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

/* ── 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; }
}
#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); }