/* 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. */
    /* Bottom-fade scrim layered OVER the theme image (behind all game UI):
       on tall/letterboxed windows the cabinet image's central vault archway
       gets exposed below the reels and reads as a stray framed "box". This
       fades the lower background to the dark theme tone so it blends away.
       On normal aspects the fade sits behind the controls and is invisible. */
    background:
        linear-gradient(to bottom,
            transparent 0%, transparent 50%,
            rgba(7, 18, 12, 0.55) 62%,
            rgba(7, 18, 12, 0.92) 78%,
            rgba(7, 18, 12, 0.99) 90%),
        var(--theme-bg, url('/assets/backgrounds/bg_casino_green.webp?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;
}
/* First word = dollar green, remaining title text = gold yellow. */
#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;
}

.loading-error-panel {
    width: min(440px, calc(100vw - 40px));
    margin-top: 22px;
    padding: 18px 20px 16px;
    border: 1px solid rgba(255, 215, 0, 0.52);
    border-radius: 8px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.12), transparent 64%),
        rgba(8, 14, 22, 0.88);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.loading-error-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    color: #FFD700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loading-error-copy {
    margin-top: 8px;
    color: rgba(255, 248, 231, 0.84);
    font-size: 0.86rem;
    line-height: 1.45;
}

.loading-error-retry {
    margin-top: 14px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 215, 0, 0.72);
    border-radius: 6px;
    background: linear-gradient(180deg, #FFE44D, #D99A1E);
    color: #1c1200;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 165, 0, 0.26);
}

.loading-error-footnote {
    margin-top: 10px;
    color: rgba(231, 234, 244, 0.56);
    font-size: 0.72rem;
    line-height: 1.35;
}

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

/* ── Base background LIFE (game-feel juice 2026-06-09) ──
   The base scene was a frozen photo. #bg-drift paints the same theme
   background as #game-container and slow-pans/breathes it (Ken-Burns) so the
   room feels alive between spins. Sits behind every overlay; never reflows. */
#bg-drift {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--theme-bg, url('/assets/backgrounds/bg_casino_green.webp?v=22')) center/cover no-repeat;
    /* Slightly oversize so the drift never exposes a hard edge. */
    transform-origin: 52% 46%;
    will-change: transform;
    animation: bgKenBurns 54s ease-in-out infinite;
    /* GPU-isolate so the looping transform can't invalidate sibling layout. */
    contain: strict;
}

@keyframes bgKenBurns {
    0% {
        transform: scale(1.06) translate3d(-0.8%, -0.5%, 0);
    }
    50% {
        transform: scale(1.11) translate3d(0.9%, 0.6%, 0);
    }
    100% {
        transform: scale(1.06) translate3d(-0.8%, -0.5%, 0);
    }
}

/* Ambient "breathing" — a barely-there brightness swell layered on top of the
   drift so the scene gently pulses like neon room light. Different period from
   the pan keeps the motion organic (no obvious loop point). */
#bg-drift::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 38%, rgba(255, 236, 150, 0.10), transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.5;
    animation: bgBreathe 17s ease-in-out infinite;
}

@keyframes bgBreathe {
    0%, 100% { opacity: 0.34; }
    50%      { opacity: 0.74; }
}

/* ── Reactive scene LIGHTING (game-feel juice 2026-06-09) ──
   A radial spotlight that brightens + tightens on the reels while tension
   builds (body.anticipation-active), so the room visibly "leans in." Idle it
   is invisible; it ramps in over ~0.5s and settles when tension resolves. */
#scene-light {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    background:
        radial-gradient(ellipse 60% 52% at 50% 46%,
            rgba(255, 238, 170, 0.34) 0%,
            rgba(255, 220, 110, 0.14) 34%,
            transparent 66%),
        radial-gradient(ellipse 120% 100% at 50% 46%,
            transparent 52%,
            rgba(0, 0, 0, 0.34) 100%);
    transition: opacity 0.55s ease, filter 0.55s ease;
    will-change: opacity;
}

body.anticipation-active #scene-light {
    opacity: 1;
    animation: sceneLightThrob 1.5s ease-in-out infinite;
}

/* Jackpot payoff keeps the room hot. */
body.jackpot-payoff-active #scene-light {
    opacity: 1;
    animation: sceneLightThrob 1.1s ease-in-out infinite;
    filter: brightness(1.2) saturate(1.15);
}

@keyframes sceneLightThrob {
    0%, 100% { filter: brightness(1) saturate(1); }
    50%      { filter: brightness(1.16) saturate(1.12); }
}

#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;
    position: relative;
    background: linear-gradient(180deg, #0f0f20, var(--vault-black));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.jackpot-strip-label {
    position: absolute;
    left: max(12px, calc(50vw - 590px));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.62);
    font: 600 0.48rem/1.25 'Montserrat', sans-serif;
    letter-spacing: 0.03em;
}

.jackpot-strip-label strong {
    color: rgba(255, 215, 0, 0.88);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
}

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

/* Each tile: image left, text right */
.jp-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 3px;
    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;
    overflow: hidden;
    isolation: isolate;
}

.jp-tile::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,0.11), transparent 30%),
        radial-gradient(circle at 86% 74%, rgba(255,215,0,0.09), transparent 36%);
    opacity: 0.34;
    pointer-events: none;
    z-index: 0;
    animation: none;
}

.jp-tile::after {
    content: '';
    position: absolute;
    top: -18%;
    bottom: -18%;
    left: -48%;
    width: 34%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: none;
}

.jp-tile-img,
.jp-tile-text {
    position: relative;
    z-index: 2;
}

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

@keyframes jackpotTileAlive {
    0%, 100% { opacity: 0.24; filter: brightness(1); }
    50% { opacity: 0.48; filter: brightness(1.08); }
}

@keyframes jackpotTileGlint {
    0%, 55%, 100% { opacity: 0; transform: translateX(0) skewX(-18deg); }
    67% { opacity: 0.42; }
    78% { opacity: 0; transform: translateX(520%) skewX(-18deg); }
}

.jp-tile-minor .jp-value,
.jp-tile-grand .jp-value { animation: none; }

@keyframes jackpotPoolValueBreathe {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.14); }
}

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

@media (max-width: 980px) {
    .jackpot-strip-label { display: none; }
}

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

#core-rule-strip {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 34px 6px;
    padding: 6px 14px;
    border: 1px solid rgba(31, 116, 73, 0.42);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,250,224,.96), rgba(222,246,226,.96));
    color: #263b30;
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 5px 16px rgba(7,45,27,.16);
    font: 700 0.7rem/1.3 'Montserrat', sans-serif;
    text-align: center;
}

.core-rule-line,
.core-goal-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.core-goal-line {
    border-left: 1px solid rgba(31, 116, 73, 0.28);
}

.core-rule-line span,
.core-rule-line b {
    flex: 1 1 0;
    min-width: 0;
}

#core-rule-strip strong {
    color: #075638;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

#core-rule-strip b {
    color: #7a4d00;
    font-weight: 800;
    white-space: normal;
}

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

body.theme-space_wins #game-title-banner {
    min-height: 58px;
    padding: 2px 20px 0;
}

body.theme-space_wins #title-text {
    gap: 14px;
    align-items: center;
}

body.theme-space_wins #title-refund,
body.theme-space_wins #title-rush {
    font-size: 3rem;
    letter-spacing: 0;
    line-height: 0.92;
    -webkit-text-stroke: 2px #000;
}

/* The desktop Cosmic Cashout marquee has a 58px minimum. On phones, match the
   shared compact identity bar so branding does not displace rules and reels. */
body.device-mobile.theme-space_wins #game-title-banner {
    min-height: 30px;
    height: 30px;
    padding: 3px 10px;
}

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

/* Pool-life state: presentation-only ambient creep from real server/config
   values. game.js writes data-pool-life and --pool-life from pool fill ratio;
   no displayed jackpot amount is invented between server updates. */
.jp-tile.pool-creep {
    --pool-life: 0.35;
}
.jp-tile.pool-creep .jp-tile-img::after {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 5px;
    height: max(3px, calc(var(--pool-life) * 10px));
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(203, 213, 224, 0.25),
        rgba(255, 215, 0, calc(0.32 + var(--pool-life) * 0.48)),
        rgba(34, 197, 94, 0.28));
    box-shadow: 0 0 calc(8px + var(--pool-life) * 16px) rgba(255, 215, 0, calc(0.22 + var(--pool-life) * 0.36));
    opacity: 0.78;
    transform-origin: center bottom;
    animation: jackpotPoolCreepRail 3.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}
.jp-tile.pool-creep .jp-value {
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.65),
        0 0 calc(8px + var(--pool-life) * 16px) rgba(255, 215, 0, calc(0.2 + var(--pool-life) * 0.32));
}
.jp-tile.pool-creep-hot {
    border-color: rgba(255, 215, 0, 0.58);
}
.jp-tile.pool-creep-hot .jp-label::after {
    content: ' LIVE';
    color: rgba(255, 236, 166, 0.9);
    font-size: 0.46rem;
    font-weight: 900;
}
.jp-tile.pool-creep-ready .jp-tile-img::after {
    animation-duration: 2.1s;
    background: linear-gradient(90deg, rgba(255, 245, 200, 0.42), rgba(255, 215, 0, 0.9), rgba(255, 112, 67, 0.42));
}

@keyframes jackpotPoolCreepRail {
    0%, 100% {
        transform: scaleX(0.92);
        filter: brightness(1);
    }
    50% {
        transform: scaleX(1.04);
        filter: brightness(1.2);
    }
}

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

#mobile-award-chamber {
    display: 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;
    /* Legibility bump (game-feel juice 2026-06-09, punch-list #33). */
    font-size: 0.58rem;
    font-weight: 900;
    color: var(--gold);
    text-align: center;
    padding: 3px 0 3px 0;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.4);
    line-height: 1.15;
    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: var(--meter-standard-pct, 30%);
    background: #CD853F;
    opacity: 0.08;
}

.zone-itemized {
    bottom: var(--meter-standard-pct, 30%);
    height: calc(var(--meter-itemized-pct, 65%) - var(--meter-standard-pct, 30%));
    background: #C0C0C0;
    opacity: 0.08;
}

.zone-max {
    bottom: var(--meter-itemized-pct, 65%);
    height: calc(100% - var(--meter-itemized-pct, 65%));
    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 {
    /* Restored (game-feel juice 2026-06-09, punch-list #33) — the qualitative
       state caption ("Collecting" / "Hot" / "Ready") gives the meter a voice
       between the numeric points and the "Next:" target. Legible by default. */
    display: block;
    text-align: center;
    padding: 1px 2px 2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 248, 231, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 1.1;
}

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: -9px;
    width: 58px;
    /* Legibility bump (game-feel juice 2026-06-09, punch-list #33) — these
       0.38rem labels were near-unreadable over the meter fill. */
    font-size: 0.47rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.04;
    white-space: normal;
    text-align: center;
    color: #1a1a1a;
    /* Stronger halo so dark text survives over both the cream track and the
       hot gold/green fill. */
    text-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 1px 1px rgba(255, 255, 255, 0.9);
}

.marker-standard { bottom: var(--meter-standard-pct, 30%); border-top: 2px solid #CD853F; }
.marker-itemized { bottom: var(--meter-itemized-pct, 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: 3px 2px 4px;
    color: rgba(255, 224, 130, 0.95);
    font-family: 'Montserrat', sans-serif;
    /* Legibility bump (game-feel juice 2026-06-09, punch-list #33). */
    font-size: 0.54rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 215, 0, 0.22);
}

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

/* ── Reel Area ── */
/* Immediate cabinet response while the authoritative result is in flight.
   Landed symbols remain unchanged; this is only a short mechanical ignition
   cue so network latency never looks like a missed Spin press. */
body.spin-awaiting-result #reel-area canvas {
    animation: pendingResultIgnition 0.18s linear infinite alternate;
    filter: blur(1.2px) saturate(1.08) brightness(0.94);
}

@keyframes pendingResultIgnition {
    from { transform: translateY(-2px) scaleY(1.008); }
    to { transform: translateY(2px) scaleY(0.992); }
}

body.reduced-stimulation.spin-awaiting-result #reel-area canvas {
    animation: none;
    filter: brightness(0.94);
}

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

/* Presentation-only reel velocity cue.
   PIXI BlurFilter remains opt-in because it can stall software GL on weak
   machines. These faint vertical bands animate on the static cabinet layer,
   not the symbol sprites, so they sell speed without touching outcome
   positions or adding per-frame GPU filters. */
body.spin-active #reel-area {
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.00) 0,
            rgba(255, 255, 255, 0.00) 10px,
            rgba(255, 236, 166, 0.055) 12px,
            rgba(255, 236, 166, 0.00) 20px),
        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%);
    background-position: 0 0, 0 0, 0 0;
    animation: reelVelocityBands 0.24s linear 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%); }
}

@keyframes reelVelocityBands {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 0 24px, 0 0, 0 0; }
}

body.reduced-stimulation.spin-active #reel-area {
    animation: none;
    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%);
}

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

/* Demo-only short-session story prototype. It gives showroom players a
   beginning, choice, and recap without changing or implying monetary value. */
#session-run {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    z-index: 8;
    width: 244px;
    padding: 8px 12px 9px;
    border: 1px solid rgba(255, 224, 104, 0.72);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(17, 27, 38, 0.94), rgba(7, 13, 21, 0.90));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.12);
    pointer-events: auto;
}
.run-head { display:flex; flex-direction:column; align-items:flex-start; gap:2px; font-size:0.68rem; letter-spacing:0.1em; }
.run-head strong { color:#ffe368; font-size:0.78rem; }
.run-head span { color:#b8c6d8; font-size:0.54rem; }
.run-track { display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; margin:6px 0 5px; }
.run-track i { height:7px; border-radius:9px; background:#293646; box-shadow:inset 0 1px 2px #05080c; }
.run-track i.done { background:#5f809b; }
.run-track i.win { background:#ffd84d; box-shadow:0 0 8px rgba(255,216,77,.72); }
.run-track i.feature { background:#d578ff; box-shadow:0 0 9px rgba(213,120,255,.85); }
#session-run.focus-treasure { border-color:#ffbd47; background:linear-gradient(180deg,rgba(55,34,12,.96),rgba(18,12,7,.93)); }
#session-run.focus-bonus { border-color:#cb82ff; background:linear-gradient(180deg,rgba(42,20,62,.96),rgba(14,8,24,.93)); }
#session-run.focus-treasure .run-track i.focus-hit { background:#ff9e2f; box-shadow:0 0 10px rgba(255,158,47,.92); }
#session-run.focus-bonus .run-track i.focus-hit { background:#dc78ff; box-shadow:0 0 10px rgba(220,120,255,.94); }
#session-run.focus-treasure .run-head strong { color:#ffc966; }
#session-run.focus-bonus .run-head strong { color:#e2a3ff; }
.run-copy { color:#eef6ff; font-size:0.66rem; text-align:center; }
.run-copy strong { color:#ffe368; }
.run-choice { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; margin-top:6px; color:#cbd7e5; font-size:0.61rem; }
.run-choice.hidden { display:none; }
.run-choice button, .run-reset { border:1px solid #ffe368; border-radius:8px; background:#223044; color:#fff3a8; padding:4px 8px; font:700 0.59rem Montserrat,Arial; cursor:pointer; }
.run-choice button.selected, .run-choice button:hover, .run-reset:hover { background:#ffe368; color:#121821; }
#session-run.complete { border-color:#fff0a2; animation:runCompletePulse .75s ease-out 2; }
@keyframes runCompletePulse { 50% { box-shadow:0 0 28px rgba(255,224,104,.8); transform:translateY(-50%) scale(1.02); } }
body:not(.device-mobile) #session-run + canvas { padding-top:0; }
body.device-mobile.orient-portrait #session-run {
    display: block;
    top: 24.5%;
    left: 12px;
    width: calc(100% - 24px);
    transform: none;
    padding: 7px 10px 8px;
}
body.device-mobile.orient-portrait .run-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
body.device-mobile.orient-portrait .run-choice { margin-top: 5px; }
body.device-mobile.orient-landscape #session-run {
    display: block;
    top: 53%;
    left: 10px;
    width: 220px;
    transform: translateY(-50%);
    padding: 6px 9px 7px;
}
body.device-mobile.orient-landscape .run-head span { display: none; }

#win-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center,
        rgba(255, 250, 221, 0.16) 0%,
        rgba(33, 86, 58, 0.34) 58%,
        rgba(10, 36, 27, 0.68) 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;
}

/* Bright payout card: keeps the winning grid visible and makes a real award
   feel like a prize, not a warning screen. The tier wordmark and rays still
   carry escalation while the amount remains the clearest object. */
#win-stage::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(88vw, 720px);
    height: clamp(116px, 22vw, 188px);
    transform: translate(-50%, -42%);
    border-radius: 18px;
    border: 2px solid rgba(255, 219, 95, 0.86);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.96), transparent 58%),
        linear-gradient(145deg, rgba(255, 252, 224, 0.98), rgba(205, 255, 222, 0.96));
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.92),
        inset 0 -8px 20px rgba(42, 151, 94, 0.12),
        0 16px 38px rgba(4, 30, 20, 0.34),
        0 0 38px rgba(255, 215, 0, 0.34);
    opacity: 0.96;
    pointer-events: none;
}

#win-stage::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 18%;
    width: min(78vw, 620px);
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 248, 210, 0.9), transparent);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.42);
    opacity: 0.72;
    pointer-events: none;
}

#win-kicker {
    position: relative;
    z-index: 2;
    min-height: 1.1rem;
    padding: 5px 14px;
    border: 1px solid rgba(255, 215, 0, 0.36);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.74);
    color: #17472f;
    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: none;
}

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

#win-type {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 900;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FFF0A6 18%, #D89A1D 52%, #6F3E08 53%, #FFE680 76%, #B77B12 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    letter-spacing: 4px;
    text-transform: uppercase;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22))
        drop-shadow(0 3px 0 rgba(58, 31, 4, 0.80))
        drop-shadow(0 0 18px rgba(255, 215, 0, 0.42));
}

#win-amount {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', monospace;
    font-size: clamp(1.8rem, 6vw, 3.5rem);
    font-weight: 900;
    min-width: min(86vw, 560px);
    padding: 7px 18px 9px;
    border-radius: 8px;
    border: 2px solid rgba(36, 126, 74, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 255, 239, 0.92));
    color: #12552f;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 #FFFFFF, 0 0 16px rgba(255, 205, 47, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -8px 18px rgba(42, 151, 94, 0.10),
        0 0 24px rgba(255, 215, 0, 0.28);
}

#win-multiplier {
    position: relative;
    z-index: 2;
    display: none;
    margin-top: -4px;
    padding: 5px 16px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #5a3d08;
    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-multiplier.big-tier {
    border-color: rgba(124, 255, 176, 0.52);
    background: linear-gradient(180deg, #EFFFF1, #C9F4D5);
    color: #145332;
    box-shadow:
        inset 0 0 12px rgba(124, 255, 176, 0.12),
        0 0 18px rgba(124, 255, 176, 0.18);
}

#win-tier-ladder {
    position: relative;
    z-index: 2;
    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 {
    position: relative;
    z-index: 2;
    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 {
    position: relative;
    z-index: 2;
    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;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22))
        drop-shadow(0 3px 0 rgba(35, 77, 24, 0.78))
        drop-shadow(0 0 18px rgba(124, 255, 176, 0.36));
}
#win-type.win-tier-2 {
    font-size: clamp(2rem, 6vw, 3.2rem);
    letter-spacing: 6px;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.24))
        drop-shadow(0 3px 0 rgba(58, 31, 4, 0.82))
        drop-shadow(0 0 22px rgba(255, 215, 0, 0.56));
}
#win-type.win-tier-3 {
    font-size: clamp(2.4rem, 7vw, 4rem);
    letter-spacing: 8px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FFE44D 20%, #FFA500 48%, #8B2E00 49%, #FFB02E 74%, #FF6B00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.26))
        drop-shadow(0 4px 0 rgba(70, 18, 0, 0.84))
        drop-shadow(0 0 28px rgba(255, 165, 0, 0.74));
}
#win-type.win-tier-4 {
    font-size: clamp(2.8rem, 8vw, 4.8rem);
    letter-spacing: 10px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FFF5C7 14%, #FFE44D 32%, #B33A20 33%, #FFA500 62%, #FF3B3B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.30))
        drop-shadow(0 5px 0 rgba(66, 4, 4, 0.88))
        drop-shadow(0 0 34px rgba(255, 215, 0, 0.92))
        drop-shadow(0 0 54px rgba(255, 59, 59, 0.32));
    text-transform: uppercase;
}

/* ── Small-win readout (2026-06-09; restrained 2026-06-27) ──
   TIER-0 wins below the BIG threshold do not get the cinematic overlay.
   Sub-2x returns stay quick: HUD count-up + cell highlights only. 2x-5x wins
   get this compact chip so Nice/Great still feel like progress without making
   routine tiny returns feel ceremonial. Injected and removed by
   game.js _showSmallWinReadout(); presentation only. */
.small-win-readout {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 19; /* below #win-overlay (20), above the canvas */
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.6);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 235, 150, 0.22), transparent 70%),
        linear-gradient(180deg, rgba(28, 22, 6, 0.92), rgba(10, 8, 4, 0.94));
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(255, 215, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    pointer-events: none;
    white-space: nowrap;
}
.small-win-readout .swr-label {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.6rem, 1.5vw, 0.78rem);
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 240, 190, 0.9);
}
.small-win-readout .swr-amount {
    font-family: 'Montserrat', monospace;
    font-size: clamp(0.95rem, 2.6vw, 1.35rem);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Reduced-stimulation: keep it informative, drop the glow. */
.small-win-readout.reduced {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, rgba(22, 18, 6, 0.94), rgba(10, 8, 4, 0.96));
}
.small-win-readout.reduced .swr-amount {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ── Pending-cash treatment (2026-06-09) ──
   The renderer paints a gold $ value pill on every landed DOLLAR symbol. In the
   BASE game those values pay NOTHING unless Direct Deposit triggers (6+ $), but
   a bold "62.50" looks exactly like a win — players think they won money they
   didn't. We can't restyle the canvas pills (renderer-owned), so when base-game
   $ values are on the board with no trigger, game.js flags #reel-area.cash-pending
   and we (a) lay a faint scrim over the board so the gold pills read as DIMMED /
   pending potential rather than collected cash, and (b) surface a clear
   "COLLECT IN DEPOSIT" lock hint. The flag is NOT set during Direct Deposit, so
   the locked values there still read as collected/won. */
.cash-pending-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 18; /* above canvas, below small-win chip (19) + overlay (20) */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px dashed rgba(255, 215, 0, 0.5);
    background: rgba(8, 10, 18, 0.82);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    white-space: nowrap;
}
/* Pure-CSS padlock so the lock glyph never depends on an emoji font being
   present. Body = small rounded gold rectangle; ::before = the shackle arc. */
.cash-pending-hint .cph-lock {
    position: relative;
    display: inline-block;
    width: 9px;
    height: 8px;
    margin-top: 4px;
    border-radius: 2px;
    background: rgba(255, 215, 0, 0.92);
    opacity: 0.95;
    /* hide any text node (we ship a glyph fallback for screen-reader-off envs) */
    font-size: 0;
    color: transparent;
}
.cash-pending-hint .cph-lock::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 6px;
    height: 6px;
    transform: translateX(-50%);
    border: 1.5px solid rgba(255, 215, 0, 0.92);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.cash-pending-hint .cph-text {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.56rem, 1.4vw, 0.72rem);
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 224, 130, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Soften the board's gold edge-glow while values are pending so the whole
   panel reads "potential" rather than "paid". The dimming pass is a faint
   inner vignette layered through #reel-area's existing ::after frame slot via
   an added inset shadow — gentle, on-theme, no canvas access required. */
#reel-area.cash-pending::after {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.34),
        inset 0 0 38px rgba(255, 215, 0, 0.05),
        inset 0 0 0 2000px rgba(6, 8, 16, 0.22);
    border-color: rgba(255, 236, 166, 0.12);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* ── 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 {
    text-transform: uppercase;
    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;
}

.bet-formula {
    display: block;
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.58);
    font-size: clamp(0.46rem, 1vw, 0.58rem);
    line-height: 1.05;
    white-space: nowrap;
}

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

/* ── Readout hierarchy (game-feel juice 2026-06-09) ──
   BALANCE / BET / WIN previously read at identical weight, so the eye had no
   anchor. Genre machines make WIN the hero. Reorder by prominence:
     WIN  → biggest, ignites gold on win (the payoff readout)
     BAL  → neutral cream/white (your bankroll — calm, always present)
     BET  → smallest (config, recedes once set). */

/* WIN: the dominant value. */
#win-panel .display-value {
    font-size: clamp(1.0rem, 2.7vw, 1.55rem);
    color: #FFE680;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.55),
        0 0 22px rgba(255, 215, 0, 0.28),
        0 1px 2px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.5px;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
#win-panel .display-label {
    color: var(--gold);
    opacity: 0.92;
}
#win-panel {
    border-color: rgba(255, 215, 0, 0.5);
}

.win-reason {
    display: none;
    max-width: 190px;
    margin-top: 2px;
    color: rgba(238, 244, 238, 0.72);
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.46rem, 1vw, 0.58rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: normal;
}
.win-reason.visible { display: block; }
.win-reason.below-bet { color: rgba(220, 224, 226, 0.62); }
.win-reason.no-return { color: rgba(231, 234, 244, 0.78); font-weight: 600; }

/* WIN ignites — fully molten gold while a win is live (matches the existing
   .win-active ancestor toggle used by #win-panel above). */
.win-active #win-panel .display-value {
    color: #FFF4C2;
    text-shadow:
        0 0 14px rgba(255, 215, 0, 0.85),
        0 0 30px rgba(255, 200, 60, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.6);
}

/* BALANCE: neutral — your bankroll reads calm, not as another jackpot. */
#balance-panel .display-value {
    font-size: clamp(0.82rem, 2vw, 1.12rem);
    color: #EFF3EE;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 6px rgba(120, 200, 150, 0.18);
}
#balance-panel .display-label {
    color: rgba(255, 255, 255, 0.62);
}

/* MONEY LANDS — after a win count-up, the deferred balance animation gets its
   own short cabinet pulse so the player sees the refund arrive in the bank.
   The text is data-only presentation from game.js; settlement remains
   server-authoritative. */
#balance-panel.balance-landed {
    animation: balanceRefundLanded 0.72s cubic-bezier(0.2, 0.85, 0.2, 1.15) both;
    border-color: rgba(255, 236, 166, 0.82);
}
#balance-panel.balance-landed::before {
    content: attr(data-landed-amount) " landed";
    position: absolute;
    left: 50%;
    top: -24px;
    transform: translateX(-50%);
    min-width: max-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 248, 210, 0.96), rgba(255, 215, 0, 0.88));
    color: #17220d;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32), 0 0 18px rgba(255, 215, 0, 0.42);
    pointer-events: none;
    animation: balanceLandedChip 0.72s cubic-bezier(0.2, 0.85, 0.2, 1.15) both;
}
#balance-panel.balance-landed .display-value {
    color: #FFF4C2;
    text-shadow:
        0 0 12px rgba(255, 215, 0, 0.72),
        0 0 24px rgba(27, 140, 78, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.65);
}

@keyframes balanceRefundLanded {
    0%   { transform: translateY(0) scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.4); }
    38%  { transform: translateY(-2px) scale(1.045); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 22px rgba(255,215,0,0.5), 0 8px 18px rgba(0,0,0,0.45); }
    100% { transform: translateY(0) scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.4); }
}

@keyframes balanceLandedChip {
    0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.92); }
    28%  { opacity: 1; transform: translate(-50%, -2px) scale(1.03); }
    100% { opacity: 0; transform: translate(-50%, -16px) scale(1); }
}

body.reduced-stimulation #balance-panel.balance-landed,
body.reduced-stimulation #balance-panel.balance-landed::before {
    animation: none !important;
}

#session-high-win-badge {
    position: absolute;
    right: clamp(12px, 2.4vw, 28px);
    top: clamp(104px, 15vh, 168px);
    z-index: 34;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 236, 166, 0.58);
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.16), transparent 34%),
        linear-gradient(180deg, rgba(23, 30, 17, 0.92), rgba(8, 10, 7, 0.94));
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(255, 215, 0, 0.25);
    color: #fff7d1;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

#session-high-win-badge.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: sessionHighWinGlow 1.9s ease-in-out infinite;
}

#session-high-win-badge .shw-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 236, 166, 0.86);
    white-space: nowrap;
}

#session-high-win-badge .shw-value {
    font-family: 'Montserrat', monospace;
    font-size: clamp(0.82rem, 1.7vw, 1.05rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.58);
    white-space: nowrap;
}

@keyframes sessionHighWinGlow {
    0%, 100% { box-shadow: 0 10px 24px rgba(0,0,0,0.42), 0 0 18px rgba(255,215,0,0.25); }
    50% { box-shadow: 0 12px 26px rgba(0,0,0,0.44), 0 0 30px rgba(255,215,0,0.44); }
}

body.reduced-stimulation #session-high-win-badge.visible {
    animation: none !important;
}

/* BET: smallest — recedes once chosen. */
#bet-display .display-value {
    font-size: clamp(0.72rem, 1.7vw, 0.95rem);
    color: rgba(255, 215, 0, 0.82);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Info button */
.info-btn {
    width: 52px;
    height: 36px;
    border: 1px solid var(--warm-gold);
    border-radius: 18px;
    background: var(--charcoal);
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    letter-spacing: 0.7px;
    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: 54px;
    height: 36px;
    border: 1px solid var(--warm-gold);
    border-radius: 18px;
    background: var(--charcoal);
    color: var(--gold);
    font: 700 0.58rem/1 'Montserrat', sans-serif;
    letter-spacing: 0.6px;
    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 {
    min-width: 30px;
    padding: 2px 4px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.32);
    color: var(--gold);
    font: 700 0.52rem/1 'Montserrat', sans-serif;
    cursor: pointer;
    flex-shrink: 0;
    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: 72px;
    height: 72px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.32), transparent 22%),
        radial-gradient(circle at 50% 62%, #33d879 0%, var(--money-green) 48%, var(--deep-green) 100%);
    border: 4px solid var(--gold);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow:
        0 0 18px rgba(27, 140, 78, 0.52),
        0 0 32px rgba(255, 215, 0, 0.22),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -5px 10px rgba(0, 0, 0, 0.28);
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: visible;
}

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

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

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

.spin-arrow {
    color: var(--gold);
    font-size: 1.35rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    /* Allow the arrow to spin while a spin is in flight (see .spinning). */
    display: inline-block;
    transition: transform 0.2s ease;
    transform: translateY(-5px);
}

.spin-action-label {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    color: #fff6bf;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 215, 0, 0.35);
    pointer-events: none;
    line-height: 1;
}

/* ── Spin button — active states (game-feel juice 2026-06-09) ──
   .spinning: a sweeping conic ring rotates around the button + the arrow
   spins, reading as live kinetic motion (and an implicit STOP affordance,
   since a second tap slam-stops). game.js toggles .spinning for a spin.
   .dd-armed: the "you're one tap from the feature" gold CTA — already
   toggled in game.js (~3090) but previously had no styling. */
.spin-btn.spinning {
    /* Hold the live state steady — the idle breathing pulse fights the ring. */
    animation: none;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28), transparent 22%),
        radial-gradient(circle at 50% 62%, #ffd76b 0%, #d25d32 52%, #7b1f19 100%);
    border-color: #fff2a8;
}
.spin-btn.spinning::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.0) 200deg,
        rgba(255, 215, 0, 0.85) 320deg,
        rgba(255, 255, 255, 0.95) 358deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    pointer-events: none;
    z-index: 2;
    animation: spinRingSweep 0.7s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}
.spin-btn.spinning .spin-arrow {
    animation: spinArrowTurn 0.7s linear infinite;
}
.spin-btn.stop-ready .spin-action-label {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 80, 56, 0.8), 0 1px 2px rgba(0, 0, 0, 0.8);
}
.spin-btn.slam-stopping .spin-action-label {
    font-size: 0.46rem;
    letter-spacing: 0.04em;
}
.spin-btn.feature-playing .spin-action-label { font-size: 0.44rem; letter-spacing: 0.03em; }
@keyframes spinRingSweep {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes spinArrowTurn {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* dd-armed: gold cabinet CTA — molten gradient, tighter/faster pulse, halo. */
.spin-btn.dd-armed {
    background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 46%, #b97910);
    border-color: #fff3b0;
}
.spin-btn.dd-armed .spin-arrow {
    color: #2a1a05;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
.spin-btn.dd-armed .spin-action-label {
    width: 86px;
    bottom: 10px;
    font-size: 0.43rem;
    letter-spacing: 0.025em;
    white-space: nowrap;
}
.spin-btn.dd-armed:not(:disabled) {
    animation: spinArmedPulse 0.85s ease-in-out infinite;
}
.spin-btn.dd-armed::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.55);
    pointer-events: none;
    z-index: 1;
    animation: spinArmedHalo 0.85s ease-out infinite;
}
@keyframes spinArmedPulse {
    0%, 100% {
        box-shadow: 0 0 18px rgba(255, 215, 0, 0.55), 0 0 34px rgba(255, 152, 0, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.85), 0 0 56px rgba(255, 152, 0, 0.45),
                    inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
}
@keyframes spinArmedHalo {
    0%   { opacity: 0.8; transform: scale(0.92); }
    100% { opacity: 0;   transform: scale(1.32); }
}
/* dd-armed visual takes priority over .spinning ring while armed. */
.spin-btn.dd-armed.spinning::before { display: none; }

/* Reduced-stimulation: honor the user's calm preference — no spin motion. */
body.reduced-stimulation .spin-btn.spinning::before,
body.reduced-stimulation .spin-btn.spinning .spin-arrow,
body.reduced-stimulation .spin-btn.dd-armed::after {
    animation: none !important;
}
body.reduced-stimulation .spin-btn.dd-armed:not(:disabled) {
    animation: none !important;
}

/* ── Turbo & Auto Buttons ── */
.turbo-btn, .auto-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(45, 45, 63, 0.76);
    border: 2px solid var(--slate);
    color: rgba(245, 245, 245, 0.82);
    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: 0.4rem;
    letter-spacing: -0.2px;
    padding: 0;
}

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

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

/* Quick Play is offered once, after the three-spin learning window. It makes
   the buried mobile Turbo control discoverable without crowding the opening
   screen or suggesting that animation speed changes the result. */
#quick-play-offer {
    position: fixed;
    left: 50%;
    bottom: max(82px, calc(env(safe-area-inset-bottom, 0px) + 72px));
    z-index: 96;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 2px solid #e4b936;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff4bd, #dff3d1);
    box-shadow: 0 10px 28px rgba(10, 57, 34, 0.3), inset 0 1px #fff;
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.96);
    transition: opacity 180ms ease, transform 180ms ease;
    font-family: var(--font-display);
}

#quick-play-offer.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
#quick-play-offer.leaving { opacity: 0; transform: translate(-50%, 8px) scale(0.97); }

.quick-play-accept,
.quick-play-dismiss {
    border: 0;
    background: transparent;
    color: #174d35;
    cursor: pointer;
}

.quick-play-accept {
    display: grid;
    gap: 1px;
    min-height: 48px;
    padding: 7px 14px 6px 18px;
    text-align: left;
}

.quick-play-accept strong { color: #075638; font-size: 0.72rem; letter-spacing: 0.1em; }
.quick-play-accept span { font: 800 0.61rem/1.15 Inter, sans-serif; }
.quick-play-dismiss { min-width: 42px; border-left: 1px solid rgba(23,77,53,0.2); font-size: 1.25rem; }
.quick-play-accept:focus-visible,
.quick-play-dismiss:focus-visible { outline: 3px solid #075638; outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
    #quick-play-offer { transition: none; }
}

.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: 62px;
    height: 36px;
    border: 1px solid var(--warm-gold);
    border-radius: 18px;
    background: var(--charcoal);
    color: var(--gold);
    font: 700 0.56rem/1 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
    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: block;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.7rem;
}

.history-state { padding: 12px 6px; color: var(--slate); font-size: 0.68rem; text-align: center; }
.history-warning { color: #f6c86b; }
.h-summary, .h-money { display: flex; align-items: baseline; gap: 8px; }
.h-summary strong { flex: 1; color: var(--paper); }
.h-summary time { color: var(--slate); font-size: 0.56rem; }
.h-money { margin-top: 4px; font-size: 0.64rem; color: rgba(255,255,255,0.78); }
.h-money b { margin-left: auto; }
.net-positive { color: #63d48b; }
.net-negative { color: #d5b1b1; }
.h-status { margin-top: 4px; color: var(--slate); font-size: 0.55rem; overflow-wrap: anywhere; }
.history-entry details { margin-top: 6px; font-size: 0.6rem; }
.history-entry summary { cursor: pointer; color: var(--gold); }
.history-entry pre { max-height: 150px; margin-top: 5px; overflow: auto; white-space: pre-wrap; user-select: text; }

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

/* Refund Rush history is a player statement, not a developer console. Keep
   exact outcome data available while presenting the primary ledger on bright
   receipt paper with dark, high-contrast financial labels. */
body.theme-refund_rush #history-panel {
    background-color: #fff8dc;
    background-image: linear-gradient(155deg, #fffdf0 0%, #eef6d8 100%);
    color: #1f4633;
    border: 2px solid #d6a928;
    box-shadow: 0 18px 48px rgba(12, 48, 30, 0.3), inset 0 1px #fff;
}

body.theme-refund_rush #history-panel .history-title { color: #075638; }
body.theme-refund_rush #history-panel .history-state { color: #52655a; }
body.theme-refund_rush #history-panel .history-warning { color: #7a4d00; }
body.theme-refund_rush #history-panel .history-entry {
    margin-bottom: 6px;
    border: 1px solid rgba(31, 116, 73, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.58);
}
body.theme-refund_rush #history-panel .h-summary strong { color: #173f2e; }
body.theme-refund_rush #history-panel .h-summary time,
body.theme-refund_rush #history-panel .h-num,
body.theme-refund_rush #history-panel .h-status { color: #59675f; }
body.theme-refund_rush #history-panel .h-money { color: #34483c; }
body.theme-refund_rush #history-panel .net-positive { color: #075638; }
body.theme-refund_rush #history-panel .net-negative { color: #8c2f39; }
body.theme-refund_rush #history-panel .history-entry summary {
    color: #684900;
    font-weight: 800;
}
body.theme-refund_rush #history-panel .history-entry pre {
    padding: 7px;
    border: 1px solid rgba(31, 116, 73, 0.22);
    border-radius: 6px;
    background: #f4efd6;
    color: #263b30;
}
body.theme-refund_rush #history-panel .h-replay,
body.theme-refund_rush #history-panel .h-share {
    border-color: rgba(7, 86, 56, 0.38);
    background: rgba(31, 116, 73, 0.1);
    color: #075638;
}

/* First-session progressive disclosure keeps the opening control row about
   one decision: confirm Total Bet and Spin. */
body.first-session-focus #album-btn,
body.first-session-focus #turbo-btn,
body.first-session-focus #auto-btn,
body.first-session-focus #buy-bonus-btn {
    display: none !important;
}


/* ── 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(14, 67, 48, 0.74);
    backdrop-filter: blur(5px) saturate(0.85);
    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(155deg, #fffaf0, #e8f4e9 62%, #fff4ce);
    border: 2px solid #d6a928;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 70px rgba(4, 24, 16, 0.48), inset 0 1px #fff;
}

.info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(27, 108, 67, 0.24);
    background: rgba(255,255,255,.48);
    flex-shrink: 0;
}

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

.info-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #7b9b87;
    background: #fff;
    color: #24513a;
    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: #12613b;
    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: #263b30;
    opacity: 1;
}

.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 {
    position: relative;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(27, 108, 67, 0.24);
    border-radius: 10px;
    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: #6e4808;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.paytable-item .sym-pays {
    font-size: 0.7rem;
    color: #284034;
    opacity: 1;
    line-height: 1.4;
}

.value-tier-badge {
    display:inline-block; margin-bottom:4px; padding:2px 7px; border-radius:999px;
    background:#e7eee8; color:#526158; font:900 .52rem/1.25 Montserrat,sans-serif;
    letter-spacing:.08em;
}
.paytable-item[data-value-tier="FEATURE"] { background:linear-gradient(145deg,#effff5,#d8f4e2); border-color:#57aa76; }
.paytable-item[data-value-tier="FEATURE"] .value-tier-badge { background:#167044; color:#fff; }
.paytable-item[data-value-tier="TOP"] { background:linear-gradient(145deg,#fff9d9,#ffe7a2); border-color:#d29c18; }
.paytable-item[data-value-tier="TOP"] .value-tier-badge { background:#8b5a06; color:#fff5bd; }
.paytable-item[data-value-tier="HIGH"] .value-tier-badge { background:#b36b16; color:#fff; }
.paytable-item[data-value-tier="MID"] .value-tier-badge { background:#19744d; color:#fff; }

.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.68);
    border: 1px solid rgba(27, 108, 67, 0.22);
    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);
    color: #263b30;
    opacity: 1;
}

/* The information pages used to be a dark panel. A few legacy inline
   colors survived the paper redesign and became washed out on ivory. Keep
   the learning surface consistently readable and make feature names feel
   like choices, not disabled controls. */
.info-page [style*="color:#9C9CB0"] {
    color: #506259 !important;
}

.info-page [style*="color:#FFD700"],
.info-page [style*="color:#DAA520"] {
    color: #765006 !important;
}

.info-page [style*="color:#2196F3"] {
    color: #075f8f !important;
}

.info-page [style*="color:#9C27B0"] {
    color: #7b287f !important;
}

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

.info-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #7b9b87;
    background: #fff;
    color: #24513a;
    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: 2px;
}

.info-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    border: none;
    padding: 0;
    position: relative;
}

.info-dot::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--slate);
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, background 0.2s ease;
}

.info-dot.active::before {
    background: var(--gold);
    transform: translate(-50%, -50%) 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 pulse sells the
   "will-it-land" tension. The dead reelAnticipationJitter keyframe was removed
   2026-06-09 along with the jitter (owner hated the shaking rectangle).

   game-feel juice 2026-06-09: the glow now ESCALATES with tension. game.js
   sets --anticipation-intensity (0..1) on #reel-area as more cash/scatter
   stacks up; the keyframe scales its blur radius + alpha by that property, so
   a weak tease glows softly and a near-miss roars. Defaults to a mid value so
   the cue still reads if JS never sets it. */
@keyframes reelAnticipation {
    0%, 100% {
        box-shadow:
            inset 0 0 calc(22px + 18px * var(--anticipation-intensity, 0.5)) rgba(255, 215, 0, calc(0.14 + 0.18 * var(--anticipation-intensity, 0.5))),
            0 0 calc(28px + 34px * var(--anticipation-intensity, 0.5)) rgba(255, 215, 0, calc(0.2 + 0.24 * var(--anticipation-intensity, 0.5)));
    }
    50% {
        box-shadow:
            inset 0 0 calc(44px + 34px * var(--anticipation-intensity, 0.5)) rgba(255, 215, 0, calc(0.4 + 0.34 * var(--anticipation-intensity, 0.5))),
            0 0 calc(56px + 56px * var(--anticipation-intensity, 0.5)) rgba(255, 170, 40, calc(0.42 + 0.34 * var(--anticipation-intensity, 0.5)));
    }
}

#reel-area.anticipation {
    /* Jitter removed 2026-06-09 (owner: "I especially hate the shaking
       rectangle around the wheels"). Keep the glow pulse for tension; the
       reels no longer physically shake. Pulse speeds up slightly as intensity
       climbs (0.52s calm → ~0.34s when maxed). */
    animation: reelAnticipation calc(0.52s - 0.18s * var(--anticipation-intensity, 0.5)) ease-in-out 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% 24%, rgba(255, 238, 150, 0.28), transparent 34%),
            radial-gradient(ellipse at 50% 72%, rgba(39, 216, 96, 0.22), transparent 32%),
            linear-gradient(180deg, rgba(255,255,255,0.055), transparent 18%, rgba(0,0,0,0.30) 100%),
            repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 215, 0, 0.052) 22px 23px, transparent 23px 46px),
            repeating-linear-gradient(0deg, transparent 0 38px, rgba(39, 216, 96, 0.035) 38px 39px, transparent 39px 76px);
        opacity: 0.78;
    }

    body.theme-trucker_tom #reel-row::after {
        background:
            radial-gradient(ellipse at 50% 26%, rgba(255, 198, 92, 0.24), transparent 38%),
            radial-gradient(ellipse at 18% 72%, rgba(255, 112, 44, 0.24), transparent 18%),
            radial-gradient(ellipse at 82% 72%, rgba(139, 228, 255, 0.16), transparent 18%),
            linear-gradient(90deg, rgba(155, 62, 25, 0.30) 0 4px, transparent 4px calc(100% - 4px), rgba(155, 62, 25, 0.30) calc(100% - 4px)),
            linear-gradient(180deg, rgba(255,255,255,0.055), transparent 18%, rgba(0,0,0,0.34) 100%),
            repeating-linear-gradient(90deg, transparent 0 30px, rgba(139, 228, 255, 0.038) 30px 31px, transparent 31px 60px),
            repeating-linear-gradient(0deg, rgba(255, 198, 92, 0.038) 0 1px, transparent 1px 42px);
        opacity: 0.82;
    }

    body.theme-diner_dough #reel-row::after {
        background:
            radial-gradient(ellipse at 50% 28%, rgba(255, 238, 168, 0.25), transparent 36%),
            radial-gradient(ellipse at 24% 74%, rgba(255, 64, 42, 0.16), transparent 18%),
            radial-gradient(ellipse at 76% 74%, rgba(54, 214, 120, 0.14), transparent 18%),
            linear-gradient(180deg, rgba(255,255,255,0.050), transparent 16%, rgba(0,0,0,0.32) 100%),
            repeating-linear-gradient(45deg, rgba(255,255,255,0.034) 0 16px, transparent 16px 32px),
            repeating-linear-gradient(-45deg, rgba(0,0,0,0.115) 0 16px, transparent 16px 32px),
            linear-gradient(90deg, rgba(168, 40, 28, 0.12), transparent 32%, transparent 68%, rgba(38, 150, 82, 0.12));
        opacity: 0.82;
    }

    body.theme-dealers_choice #reel-row::after {
        background:
            radial-gradient(ellipse at 50% 28%, rgba(255, 215, 0, 0.22), transparent 36%),
            radial-gradient(ellipse at 50% 82%, rgba(16, 130, 72, 0.22), transparent 34%),
            radial-gradient(ellipse at 18% 74%, rgba(184, 24, 44, 0.16), transparent 18%),
            radial-gradient(ellipse at 82% 74%, rgba(34, 48, 62, 0.28), transparent 18%),
            linear-gradient(180deg, rgba(255,255,255,0.045), transparent 16%, rgba(0,0,0,0.36) 100%),
            repeating-linear-gradient(90deg, transparent 0 30px, rgba(255, 215, 0, 0.045) 30px 31px, transparent 31px 60px),
            repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 255, 255, 0.025) 34px 35px, transparent 35px 70px);
        opacity: 0.84;
    }

    body.theme-space_wins #reel-row::after {
        background:
            radial-gradient(ellipse at 50% 20%, rgba(255, 185, 80, 0.20), transparent 32%),
            radial-gradient(ellipse at 50% 78%, rgba(66, 177, 255, 0.18), transparent 30%),
            radial-gradient(ellipse at 20% 70%, rgba(132, 102, 255, 0.14), transparent 17%),
            radial-gradient(ellipse at 80% 72%, rgba(255, 215, 0, 0.12), transparent 18%),
            linear-gradient(180deg, rgba(255,255,255,0.040), transparent 16%, rgba(0,0,0,0.42) 100%),
            repeating-linear-gradient(90deg, transparent 0 26px, rgba(66, 177, 255, 0.052) 26px 27px, transparent 27px 52px),
            repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 215, 0, 0.026) 34px 35px, transparent 35px 68px);
        opacity: 0.86;
    }

    #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: var(--meter-standard-pct, 30%);
        height: 100%;
    }

    .zone-itemized {
        left: var(--meter-standard-pct, 30%);
        bottom: auto;
        width: calc(var(--meter-itemized-pct, 65%) - var(--meter-standard-pct, 30%));
        height: 100%;
    }

    .zone-max {
        left: var(--meter-itemized-pct, 65%);
        bottom: auto;
        width: calc(100% - var(--meter-itemized-pct, 65%));
        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: var(--meter-standard-pct, 30%); bottom: auto !important; border-top: none; border-left: 2px solid #CD853F; }
    .marker-itemized { left: var(--meter-itemized-pct, 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);
    }
    /* Keep the WIN-biggest / BET-smallest hierarchy on phones, scaled down to
       fit the tight control bar (game-feel juice 2026-06-09). */
    #win-panel .display-value {
        font-size: clamp(0.84rem, 3.4vw, 1.05rem);
        letter-spacing: 0.3px;
    }
    #balance-panel .display-value {
        font-size: clamp(0.72rem, 1.9vw, 0.92rem);
    }
    #bet-display .display-value {
        font-size: clamp(0.64rem, 1.6vw, 0.82rem);
    }

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

    .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: var(--meter-standard-pct, 30%);
        height: 100%;
    }

    .zone-itemized {
        left: var(--meter-standard-pct, 30%);
        bottom: auto;
        width: calc(var(--meter-itemized-pct, 65%) - var(--meter-standard-pct, 30%));
        height: 100%;
    }

    .zone-max {
        left: var(--meter-itemized-pct, 65%);
        bottom: auto;
        width: calc(100% - var(--meter-itemized-pct, 65%));
        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: var(--meter-standard-pct, 30%); bottom: auto !important; border-top: none; border-left: 2px solid #CD853F; }
    .marker-itemized { left: var(--meter-itemized-pct, 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) {
    /* Keep the required optional-award disclosure clear of the first jackpot
       tile. Four tiles still fit when aligned to the right edge in this band. */
    #jp-containers {
        justify-content: flex-end;
    }
    /* 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;
    }
    .info-btn {
        width: 52px !important;
    }
    .history-btn {
        width: 62px !important;
    }
    .sound-btn {
        width: 54px !important;
    }
    .turbo-btn, .auto-btn {
        min-height: 38px;
        padding: 0 10px;
        font-size: 0.78rem;
    }
    .turbo-btn {
        padding: 0;
        font-size: 0.4rem;
    }
    .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.55rem;
        letter-spacing: 1px;
    }
    /* 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;
    }
}

/* Once advanced actions unlock, the 901–1023px desktop row cannot contain
   three utility pills plus Turbo, Auto, Buy Bonus, wager, Spin, and Return.
   Keep the primary row intact and expose advanced actions through Menu. */
@media (min-width: 901px) and (max-width: 1023px) {
    body.device-desktop:not(.first-session-focus) .menu-btn.mobile-only {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 52px !important;
        height: 38px !important;
        padding: 0 8px;
        border: 1px solid rgba(255, 215, 0, 0.5);
        border-radius: 19px;
        background: var(--charcoal);
        color: var(--gold);
        font: 700 0.58rem/1 'Montserrat', sans-serif;
        letter-spacing: 0.6px;
        cursor: pointer;
    }

    body.device-desktop:not(.first-session-focus) #turbo-btn,
    body.device-desktop:not(.first-session-focus) #auto-btn,
    body.device-desktop:not(.first-session-focus) #buy-bonus-btn {
        display: none !important;
    }
}

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

/* game-feel juice 2026-06-09 — calm the living-scene layers for the
   reduced-stimulation preference: keep the static art, drop the motion. */
body.reduced-stimulation #bg-drift,
body.reduced-stimulation #bg-drift::after,
body.reduced-stimulation #scene-light {
    animation: none !important;
    transform: none !important;
}
body.reduced-stimulation #scene-light {
    opacity: 0 !important;
}

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

body.reduced-stimulation .jp-tile::before,
body.reduced-stimulation .jp-tile::after,
body.reduced-stimulation .jp-tile.pool-creep .jp-tile-img::after,
body.reduced-stimulation .jp-tile-minor .jp-value,
body.reduced-stimulation .jp-tile-grand .jp-value {
    animation: none !important;
}

/* 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(180deg, rgba(218, 165, 32, 0.22), rgba(80, 58, 18, 0.58));
    color: rgba(255, 236, 166, 0.92);
    border: 2px solid rgba(218, 165, 32, 0.55);
    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 4px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.15s, box-shadow 0.2s;
}
.buy-bonus-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.72);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.34), 0 0 12px rgba(255, 215, 0, 0.22);
}
.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 {
    width: max-content;
    max-width: 100%;
    margin: clamp(14px, 2.6vw, 24px) auto 0;
    padding: 10px 18px;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: rgba(8, 78, 49, 0.88);
    box-shadow: 0 5px 0 rgba(3, 38, 24, 0.72), 0 0 22px rgba(255, 215, 0, 0.34);
    font: 900 clamp(0.74rem, 1.8vw, 1rem) 'Montserrat', sans-serif;
    color: #ffffff;
    opacity: 1;
    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-recovery-toast {
    position: fixed;
    top: clamp(74px, 9vh, 104px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    padding: 9px 14px;
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 6px;
    background: rgba(16, 20, 28, 0.92);
    color: #fde68a;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34), 0 0 24px rgba(245, 158, 11, 0.22);
    pointer-events: none;
}

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

    /* The mobile win overlay lives inside the short reel window. Keep its hero
       read to award → amount → multiplier; the desktop ladder and supporting
       slogans otherwise push the actual BIG/MEGA headline above the viewport. */
    #win-stage {
        gap: 5px;
    }

    #win-kicker,
    #win-tier-ladder,
    #win-dream-line,
    #win-recovery-line,
    #win-breakdown {
        display: none !important;
    }

    #win-stage::before {
        height: 142px;
        transform: translate(-50%, -50%);
    }

    #win-stage::after {
        top: 12%;
    }

    #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);
        padding-block: 4px 6px;
    }

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

/* Casino/operator showroom mode (?showroom=1): keep the cabinet-like demo
   clean by hiding secondary session tools while preserving money, bet, win,
   spin, sound, info, and demo-mode disclosure. Pure presentation only. */
body.showroom-mode .history-btn,
body.showroom-mode .album-btn,
body.showroom-mode .auto-btn,
body.showroom-mode #mp-history {
    display: none !important;
}

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

/* Compact identity bar: preserve the game name without taking reel space from
   short phones after the loading screen has already established the brand. */
body.device-mobile #game-title-banner {
    display: flex !important;
    padding: 3px 10px !important;
    margin-left: 0 !important;
    height: 30px;
    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: 7px;
}
body.device-mobile #game-title-banner .title-logo {
    height: 20px !important;
    max-height: 20px !important;
    max-width: 20px !important;
}
body.device-mobile #game-title-banner #title-text {
    font-size: 1rem !important;
    letter-spacing: 2px !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: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
}

body.device-mobile #core-rule-strip {
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0;
    padding: 4px 8px;
    border-width: 0 0 1px;
    border-radius: 0;
    font-size: 0.75rem;
    line-height: 1.25;
}

body.device-mobile .core-rule-line,
body.device-mobile .core-goal-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    align-items: center;
    text-align: center;
}

body.device-mobile .core-goal-line {
    border-left: 0;
    border-top: 1px solid rgba(31, 116, 73, 0.24);
    padding-top: 2px;
}

body.device-mobile.first-session-focus .core-goal-line {
    display: none;
}

.core-mobile-summary {
    display: none;
}

/* The first phone frame must teach both the ordinary win and the two feature
   doors without five stacked prose lines. Replace the verbose desktop rows
   with one compact value map; desktop/tablet and later-session layouts retain
   the full explanatory copy above. */
body.device-mobile.first-session-focus #core-rule-strip {
    padding: 5px 7px 6px;
}

body.device-mobile.first-session-focus .core-rule-line,
body.device-mobile.first-session-focus .core-goal-line {
    display: none;
}

body.device-mobile.first-session-focus .core-mobile-summary {
    display: grid;
    gap: 3px;
    margin: 1px 4px;
    padding: 6px 9px;
    border: 2px solid #e4b936;
    border-radius: 9px;
    background: linear-gradient(135deg, #fff4bd, #e8f6d7);
    box-shadow: inset 0 1px #fff, 0 4px 12px rgba(15, 72, 43, 0.2);
    text-align: center;
    color: #173f2e;
    font-family: var(--font-display);
    line-height: 1.2;
}

body.device-mobile.first-session-focus .core-mobile-summary > strong {
    color: #075638;
    font-size: 0.76rem;
    letter-spacing: 0.09em;
}

body.device-mobile.first-session-focus .core-mobile-summary > span {
    color: #345744;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

body.device-mobile.first-session-focus .core-mobile-summary b {
    color: #7a4d00;
    font-weight: 900;
}

body.device-mobile.first-session-focus .core-mobile-value-summary {
    padding-top: 3px;
    border-top: 1px solid rgba(31, 116, 73, 0.24);
    color: #365c47;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    white-space: nowrap;
}

body.device-mobile.first-session-focus #meter-column {
    display: none !important;
}

body.device-mobile #core-rule-strip strong {
    font-size: inherit;
    grid-column: 1;
    grid-row: auto;
}

body.device-mobile #core-rule-strip span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

body.device-mobile #core-rule-strip b {
    grid-column: 1;
    white-space: normal;
}

body.device-mobile #progressive-display {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ── 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);
    /* Portrait screens are substantially taller than the fixed 5×3 reel
       aspect. Center the cabinet group inside the available stage instead of
       pinning it to the title and leaving one large unfinished void below. */
    justify-content: center;
    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);
}

/* Outcome reconstruction is core information, not microcopy. Keep the full
   Bet · Return · Net · Reason ledger readable on compact touch screens. */
body.device-mobile .win-reason {
    max-width: min(190px, 45vw);
    font-size: 0.75rem;
    line-height: 1.25;
}

/* 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;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: calc(100% - 8px) !important;
    margin: 2px 4px !important;
    padding: 2px 4px !important;
    gap: 4px !important;
    transform: none !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-containers {
    flex-wrap: nowrap;
    gap: 3px;
}

body.device-mobile.orient-landscape .jp-tile {
    flex: 1 1 calc(25% - 2px);
    padding: 2px 4px 2px 2px;
    gap: 3px;
    border-radius: 5px;
}

body.device-mobile.orient-landscape .jp-tile-img,
body.device-mobile.orient-landscape .jp-tile-grand .jp-tile-img {
    width: 24px;
    height: 24px;
}

body.device-mobile.orient-landscape .jp-label {
    font-size: 0.32rem;
}

body.device-mobile.orient-landscape .jp-value,
body.device-mobile.orient-landscape .jp-tile-major .jp-value,
body.device-mobile.orient-landscape .jp-tile-grand .jp-value {
    font-size: 0.65rem;
}

body.device-mobile.orient-landscape #controls {
    padding: 3px 6px;
    gap: 4px;
    flex-wrap: nowrap;
    width: 100%;
    margin-left: 0;
}

body.device-mobile.orient-landscape #controls .control-group {
    gap: 4px;
}

body.device-mobile.orient-landscape .control-group.right:has(.win-reason.visible) {
    flex: 0 1 clamp(150px, 28vw, 190px);
    min-width: 0;
}

body.device-mobile.orient-landscape #win-panel:has(.win-reason.visible) .win-reason {
    font-size: 0.6rem;
    line-height: 1.15;
}

body.device-mobile.orient-landscape #controls .display-panel {
    min-width: 78px;
    padding: 2px 6px;
}

body.device-mobile.orient-landscape #controls .bet-display {
    min-width: 88px;
}

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

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

body.device-mobile.orient-landscape #reel-section {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
}

body.device-mobile.orient-landscape #reel-area {
    max-width: 100%;
    max-height: 100%;
}

body.device-mobile.orient-landscape #mobile-award-chamber {
    display: none !important;
}

body.device-mobile.orient-landscape #helpline-strip {
    padding-top: 2px;
    padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
    font-size: 0.52rem;
    line-height: 1.2;
}

/* 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 calc(14px + 18px * var(--collector-glow, 0.2)) rgba(255, 215, 0, calc(0.14 + 0.34 * var(--collector-glow, 0.2)));
    transform: perspective(140px) rotateX(3deg);
    animation: awardJarIdleBreath 4.8s ease-in-out infinite;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-glass::before {
    opacity: calc(0.46 + 0.28 * var(--collector-glow, 0.2));
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-glass::after {
    opacity: calc(0.22 + 0.28 * var(--collector-glow, 0.2));
    animation-duration: calc(6.4s - 2.2s * var(--collector-glow, 0.2));
}

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-core {
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 10%;
    height: calc(20% + 42% * var(--collector-glow, 0.12));
    border-radius: 999px 999px 18px 18px;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, 0.72), transparent 34%),
        radial-gradient(ellipse at 50% 74%, rgba(56, 255, 142, 0.52), transparent 66%),
        linear-gradient(180deg, rgba(255, 240, 132, 0.46), rgba(23, 151, 76, 0.12));
    opacity: calc(0.18 + 0.54 * var(--collector-glow, 0.12));
    mix-blend-mode: screen;
    filter: blur(0.2px) saturate(calc(1 + 0.28 * var(--collector-glow, 0.12)));
    animation: awardJarCorePulse 2.8s ease-in-out infinite;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-particles {
    position: absolute;
    inset: 18% 12% 12%;
    overflow: hidden;
    pointer-events: none;
    opacity: calc(0.14 + 0.72 * var(--collector-glow, 0.12));
    mix-blend-mode: screen;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-particles span {
    position: absolute;
    bottom: 4%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 242, 150, 0.88);
    box-shadow:
        0 0 7px rgba(255, 215, 0, 0.9),
        0 0 13px rgba(61, 255, 145, 0.32);
    animation: awardJarParticleRise 2.9s ease-in-out infinite;
    animation-delay: var(--particle-delay, 0s);
    left: var(--particle-x, 50%);
    transform: translateY(0) scale(var(--particle-scale, 1));
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-particles span:nth-child(1) { --particle-x: 22%; --particle-delay: 0s; --particle-scale: 0.9; }
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-particles span:nth-child(2) { --particle-x: 38%; --particle-delay: -1.1s; --particle-scale: 0.72; }
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-particles span:nth-child(3) { --particle-x: 54%; --particle-delay: -0.45s; --particle-scale: 1.05; }
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-particles span:nth-child(4) { --particle-x: 68%; --particle-delay: -1.8s; --particle-scale: 0.8; }
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode .collector-particles span:nth-child(5) { --particle-x: 81%; --particle-delay: -0.8s; --particle-scale: 0.66; }

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%;
    animation: awardJarShineSweep 3.8s ease-in-out infinite;
}

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

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode.receipt-surge {
    animation: receiptCaseSurge 0.72s cubic-bezier(0.16, 0.9, 0.2, 1) both;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-collector-delta="stack"] .collector-glass,
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-collector-delta="surge"] .collector-glass {
    filter: brightness(calc(1.04 + 0.12 * var(--collector-delta, 0.3))) saturate(1.08);
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="building"] .collector-glass {
    border-color: rgba(147, 255, 185, 0.76);
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="hot"] .collector-glass {
    border-color: rgba(255, 229, 120, 0.94);
    animation-duration: 3.1s;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="hot"] .collector-particles span,
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="close"] .collector-particles span,
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="ready"] .collector-particles span {
    animation-duration: calc(2.6s - 0.9s * var(--collector-tension, 0.2));
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="close"] .collector-glass {
    border-color: rgba(255, 246, 178, 0.98);
    box-shadow:
        inset 0 0 19px rgba(255,255,255,0.22),
        inset 0 -14px 18px rgba(89, 54, 13, 0.23),
        0 0 calc(25px + 18px * var(--collector-tension, 0.6)) rgba(255, 215, 0, calc(0.42 + 0.2 * var(--collector-tension, 0.6))),
        0 0 34px rgba(45, 255, 137, 0.18);
    animation-duration: 2.35s;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="ready"] .collector-glass {
    border-color: rgba(255, 255, 255, 0.98);
    box-shadow:
        inset 0 0 22px rgba(255,255,255,0.28),
        inset 0 -14px 18px rgba(89, 54, 13, 0.22),
        0 0 34px rgba(255, 215, 0, 0.76),
        0 0 58px rgba(45, 255, 137, 0.26);
    animation-duration: 1.8s;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="ready"] .collector-core {
    opacity: 0.86;
    animation-duration: 1.45s;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="hot"] .receipt-pile::after,
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="close"] .receipt-pile::after,
body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="ready"] .receipt-pile::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: -8%;
    height: 20%;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255, 246, 160, 0.52), transparent 68%);
    opacity: calc(0.34 + 0.48 * var(--collector-glow, 0.4));
    animation: awardJarParticleFlicker 1.25s ease-in-out infinite;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-fill-band="close"] .receipt-pile::after {
    height: 30%;
    top: -15%;
    opacity: calc(0.58 + 0.32 * var(--collector-tension, 0.7));
    animation-duration: 0.92s;
}

body.theme-refund_rush #game-title-banner #receipt-meter.receipt-collector-mode[data-collector-delta="surge"] .receipt-pile::after {
    background:
        radial-gradient(circle at 18% 44%, rgba(255,255,255,0.92) 0 2px, transparent 3px),
        radial-gradient(circle at 42% 18%, rgba(147,255,185,0.86) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 54%, rgba(255,235,130,0.86) 0 2px, transparent 3px),
        radial-gradient(ellipse at center, rgba(255, 246, 160, 0.58), transparent 70%);
    height: 34%;
    top: -18%;
    opacity: 0.9;
    animation: awardJarSurgeSpark 0.72s ease-out both;
}

@keyframes awardJarIdleBreath {
    0%, 100% { transform: perspective(140px) rotateX(3deg) scale(1); filter: brightness(1); }
    50% { transform: perspective(140px) rotateX(3deg) scale(1.025); filter: brightness(1.08); }
}

@keyframes awardJarShineSweep {
    0%, 100% { opacity: 0.22; transform: translateX(-12%) skewX(-10deg); }
    45% { opacity: 0.72; transform: translateX(190%) skewX(-10deg); }
    60% { opacity: 0.0; transform: translateX(210%) skewX(-10deg); }
}

@keyframes awardJarCorePulse {
    0%, 100% {
        transform: translateY(0) scaleX(0.92);
        filter: blur(0.2px) brightness(1);
    }
    50% {
        transform: translateY(-3px) scaleX(1.03);
        filter: blur(0.2px) brightness(1.18);
    }
}

@keyframes awardJarParticleRise {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(var(--particle-scale, 1));
    }
    18% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translateY(-68px) scale(calc(var(--particle-scale, 1) * 0.65));
    }
}

@keyframes awardJarParticleFlicker {
    0%, 100% { transform: translateY(0) scaleX(0.82); opacity: 0.28; }
    50% { transform: translateY(-5px) scaleX(1.08); opacity: 0.75; }
}

@keyframes awardJarSurgeSpark {
    0% { transform: translateY(6px) scale(0.86); opacity: 0; }
    22% { transform: translateY(-2px) scale(1.06); opacity: 1; }
    100% { transform: translateY(-18px) scale(1.22); opacity: 0; }
}

/* Creative Director polish pass: existing mechanics get separate emotional
   identities. Side Hustle is quick green extra cash; Year-End is slower gold
   ceremony. These are body-class atmospheres triggered by game.js only after
   server-authoritative awards. */
body.side-hustle-award #scene-light,
body.coin-jar-award #scene-light {
    opacity: 1;
    background:
        radial-gradient(ellipse 52% 44% at 50% 44%, rgba(68, 255, 151, 0.32), rgba(38, 167, 91, 0.12) 38%, transparent 68%),
        radial-gradient(ellipse 110% 90% at 50% 46%, transparent 50%, rgba(0, 0, 0, 0.28) 100%);
    animation: sideHustlePop 0.58s ease-out 2;
}

body.year-end-award #scene-light {
    opacity: 1;
    background:
        radial-gradient(ellipse 62% 50% at 50% 40%, rgba(255, 236, 146, 0.46), rgba(204, 143, 33, 0.18) 42%, transparent 70%),
        radial-gradient(ellipse 130% 100% at 50% 46%, transparent 46%, rgba(44, 24, 4, 0.42) 100%);
    animation: yearEndGlow 1.1s ease-in-out 2;
}

body.legendary-award #scene-light {
    opacity: 1;
    filter: brightness(1.26) saturate(1.22);
}

body.feature-entry-direct-deposit #game-container,
body.feature-entry-year-end #game-container {
    animation: bonusWorldShift 1.05s cubic-bezier(0.2, 0.86, 0.2, 1);
}

body.feature-entry-direct-deposit #scene-light {
    opacity: 1;
    background:
        radial-gradient(ellipse 58% 48% at 50% 44%, rgba(60, 185, 255, 0.42), rgba(18, 76, 142, 0.16) 42%, transparent 68%),
        radial-gradient(ellipse 110% 95% at 50% 48%, transparent 46%, rgba(0, 0, 0, 0.46) 100%);
}

body.feature-entry-direct-deposit #reel-area {
    animation: directDepositCabinetRush 0.92s cubic-bezier(0.16, 0.88, 0.2, 1) both;
}

body.feature-entry-direct-deposit #game-title-banner {
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.32),
        0 0 42px rgba(56, 255, 147, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -16px 28px rgba(0, 0, 0, 0.44);
}

body.feature-entry-year-end #scene-light {
    opacity: 1;
    background:
        radial-gradient(ellipse 62% 48% at 50% 42%, rgba(255, 218, 88, 0.46), rgba(156, 39, 176, 0.13) 42%, transparent 70%),
        radial-gradient(ellipse 120% 96% at 50% 48%, transparent 44%, rgba(0, 0, 0, 0.48) 100%);
}

body.feature-entry-year-end #reel-area {
    animation: yearEndCabinetCeremony 1.35s cubic-bezier(0.2, 0.82, 0.18, 1) both;
}

body.feature-entry-year-end #game-title-banner {
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.32),
        0 0 48px rgba(255, 204, 89, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -16px 28px rgba(0, 0, 0, 0.44);
}

@keyframes sideHustlePop {
    0% { filter: brightness(1); transform: scale(1); }
    45% { filter: brightness(1.22); transform: scale(1.006); }
    100% { filter: brightness(1); transform: scale(1); }
}

@keyframes yearEndGlow {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.24) saturate(1.18); }
}

@keyframes bonusWorldShift {
    0% { filter: brightness(1); transform: scale(1); }
    45% { filter: brightness(1.18); transform: scale(1.012); }
    100% { filter: brightness(1); transform: scale(1); }
}

@keyframes directDepositCabinetRush {
    0% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 rgba(56, 255, 147, 0);
    }
    38% {
        filter: brightness(1.22) saturate(1.16);
        box-shadow:
            0 0 28px rgba(56, 255, 147, 0.36),
            0 0 52px rgba(60, 185, 255, 0.22);
    }
    100% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 rgba(56, 255, 147, 0);
    }
}

@keyframes yearEndCabinetCeremony {
    0% {
        filter: brightness(0.98) saturate(1);
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    32% {
        filter: brightness(1.1) saturate(1.08);
        box-shadow:
            0 0 22px rgba(255, 215, 0, 0.28),
            0 0 46px rgba(156, 39, 176, 0.16);
    }
    64% {
        filter: brightness(1.22) saturate(1.16);
        box-shadow:
            0 0 36px rgba(255, 215, 0, 0.38),
            0 0 62px rgba(255, 146, 65, 0.22);
    }
    100% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
}

.small-win-readout.nice-win {
    border-color: rgba(58, 255, 143, 0.48);
    box-shadow: 0 0 16px rgba(50, 220, 120, 0.26);
}

.small-win-readout.great-win {
    border-color: rgba(255, 215, 0, 0.62);
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.36);
}

#reel-area.great-win-shimmer::before {
    animation: greatWinBoardShimmer 0.86s cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

@keyframes greatWinBoardShimmer {
    0% {
        opacity: 0.35;
        transform: translateX(-5%);
    }
    42% {
        opacity: 0.92;
        transform: translateX(5%);
    }
    100% {
        opacity: 0.42;
        transform: translateX(0);
    }
}

body.reduced-stimulation #reel-area.great-win-shimmer::before {
    animation: none !important;
}

.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 receiptCaseSurge {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    24% { transform: translateY(-4px) scale(1.07); filter: brightness(1.18); }
    58% { transform: translateY(1px) scale(0.985); filter: brightness(1.06); }
    100% { transform: translateY(0) scale(1); filter: brightness(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: 4px;
    height: 36px;
}

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

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

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: 36px !important;
    height: 36px !important;
    margin: 4px !important;
    padding: 3px 70px 3px 10px !important;
    justify-content: flex-start !important;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 246, 184, 0.24), transparent 34%),
        linear-gradient(135deg, #268e62 0%, #247d70 56%, #498d67 100%) !important;
    border-color: #e7bc42 !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,0.34),
        inset 0 -8px 14px rgba(6,65,48,0.24),
        0 3px 10px rgba(20,87,61,0.24) !important;
}

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(0.85rem, 5vw, 1.05rem) !important;
    letter-spacing: 0.08em !important;
}

/* Chromium can intermittently drop clipped text gradients during the mobile
   launch resize. Use explicit solid premium colors here so the game name can
   never render transparent in a captured or player-visible first frame. */
body.device-mobile.theme-refund_rush #game-title-banner #title-refund {
    color: #e9fff0;
    background: none;
    -webkit-text-fill-color: #e9fff0;
    text-shadow: 0 0 12px rgba(210, 255, 226, 0.34), 0 2px 0 #0b5b31;
}

body.device-mobile.theme-refund_rush #game-title-banner #title-rush {
    color: #ffd84d;
    background: none;
    -webkit-text-fill-color: #ffd84d;
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.42), 0 2px 0 #75500c;
}

body.device-mobile.theme-refund_rush .title-receipt-dock {
    width: 62px;
    height: 32px;
    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;
    background:
        linear-gradient(180deg,
            rgba(8, 12, 18, 0.06) 0%,
            rgba(8, 18, 13, 0.10) 34%,
            rgba(6, 13, 11, 0.70) 57%,
            rgba(3, 6, 6, 0.98) 100%),
        radial-gradient(ellipse at 50% 70%, rgba(255, 215, 0, 0.16), transparent 42%),
        radial-gradient(ellipse at 50% 94%, rgba(39, 216, 96, 0.22), transparent 56%),
        linear-gradient(90deg, rgba(255, 215, 0, 0.08), transparent 18%, transparent 82%, rgba(255, 215, 0, 0.08));
    border-color: rgba(255, 215, 0, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 170, 0.12),
        inset 0 -32px 70px rgba(0, 0, 0, 0.58),
        0 0 14px rgba(255, 215, 0, 0.10) !important;
}

body.device-mobile.theme-refund_rush #reel-row::before {
    display: none !important;
    content: '';
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 7%;
    height: 34%;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 72%, rgba(255, 241, 166, 0.34), transparent 10%),
        radial-gradient(ellipse at 20% 62%, rgba(255, 215, 0, 0.18), transparent 9%),
        radial-gradient(ellipse at 78% 58%, rgba(39, 216, 96, 0.16), transparent 11%),
        radial-gradient(ellipse at 50% 54%, rgba(255, 215, 0, 0.16), transparent 34%),
        linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.18), transparent);
    opacity: 1;
    filter: blur(0.2px);
}

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

body.device-mobile.theme-refund_rush #mobile-award-chamber {
    display: grid;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    flex: 0 0 auto;
    width: 92%;
    margin: clamp(30px, 5.5vh, 46px) auto 0;
    z-index: 1;
    grid-template-columns: 1fr auto;
    gap: 7px 12px;
    padding: 14px 15px 13px;
    border: 2px solid #e4b936;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(255,255,255,0.9), transparent 46%),
        linear-gradient(135deg, #fff3b8 0%, #e7f7d6 55%, #c8edd0 100%);
    box-shadow: inset 0 1px #fff, 0 10px 24px rgba(15,72,43,0.24), 0 0 20px rgba(255,215,0,0.18);
    font-family: var(--font-display);
    pointer-events: none;
}

body.device-mobile.theme-refund_rush .award-chamber-kicker {
    color: #185c3f;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

body.device-mobile.theme-refund_rush .award-chamber-state {
    color: #064b31;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-shadow: 0 1px rgba(255,255,255,0.8);
}

body.device-mobile.theme-refund_rush .award-chamber-track {
    position: relative;
    grid-column: 1 / -1;
    height: 18px;
    margin: 8px 2px 25px;
    border: 2px solid rgba(24, 108, 70, 0.72);
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    box-shadow: inset 0 2px 5px rgba(28,89,57,0.16);
}

body.device-mobile.theme-refund_rush .award-chamber-fill {
    display: block;
    width: var(--award-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #129b50, #5dea85 58%, #ffe16b);
    box-shadow: 0 0 14px rgba(62,239,126,0.46), inset 0 1px rgba(255,255,255,0.44);
    transition: width 560ms cubic-bezier(0.22, 0.8, 0.22, 1);
}

body.device-mobile.theme-refund_rush .award-chamber-mark {
    position: absolute;
    top: 24px;
    transform: translateX(-50%);
    color: #4d451d;
    font-size: 0.42rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

body.device-mobile.theme-refund_rush .award-chamber-mark::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 2px;
    height: 22px;
    background: rgba(45,112,73,0.55);
}

body.device-mobile.theme-refund_rush .award-chamber-mark.mark-standard { left: var(--meter-standard-pct, 30%); }
body.device-mobile.theme-refund_rush .award-chamber-mark.mark-itemized {
    left: var(--meter-itemized-pct, 65%);
    top: 34px;
}
body.device-mobile.theme-refund_rush .award-chamber-mark.mark-grand { left: 94%; }

body.device-mobile.theme-refund_rush .award-chamber-copy {
    grid-column: 1 / -1;
    margin-top: 5px;
    color: #173f2e;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
}

/* Empty/early progress should inform, not dominate. Keep the exact state and
   next-threshold copy, but defer the full tier ruler until progress is building. */
body.device-mobile.theme-refund_rush #mobile-award-chamber:is(
    [data-fill-band="empty"],
    [data-fill-band="collecting"]
) {
    margin-top: 16px;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    padding: 9px 11px 8px;
}

body.device-mobile.theme-refund_rush #mobile-award-chamber:is(
    [data-fill-band="empty"],
    [data-fill-band="collecting"]
) .award-chamber-state {
    text-align: right;
}

body.device-mobile.theme-refund_rush #mobile-award-chamber:is(
    [data-fill-band="empty"],
    [data-fill-band="collecting"]
) .award-chamber-track {
    grid-column: 1 / -1;
    height: 14px;
    margin: 3px 0 0;
}

body.device-mobile.theme-refund_rush #mobile-award-chamber:is(
    [data-fill-band="empty"],
    [data-fill-band="collecting"]
) .award-chamber-mark {
    display: none;
}

body.device-mobile.theme-refund_rush #mobile-award-chamber:is(
    [data-fill-band="empty"],
    [data-fill-band="collecting"]
) .award-chamber-copy {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.66rem;
    line-height: 1.2;
    white-space: normal;
}

/* Once the complete ledger is visible it already contains Return. Remove the
   duplicate headline/value on mobile and give those pixels back to play. */
body.device-mobile #win-panel:has(.win-reason.visible) > .display-label,
body.device-mobile #win-panel:has(.win-reason.visible) > .display-value {
    display: none;
}

body.device-mobile .control-group.right:has(.win-reason.visible) {
    flex: 1 0 100%;
}

body.device-mobile #win-panel:has(.win-reason.visible) {
    width: 100%;
}

body.device-mobile #win-panel:has(.win-reason.visible) .win-reason {
    max-width: none;
    margin-top: 0;
}

body.device-mobile.theme-refund_rush #reel-section {
    position: relative;
    z-index: 1;
}

/* Put the reason to continue in the first playable frame. The previous
   onboarding hid the Award Jar for three spins, leaving a large empty stage
   and asking new players to discover the game's main chase later. Start with
   a compact goal ticket, then let the existing full meter appear once the
   opening result flow is familiar. */
body.device-mobile.theme-refund_rush.first-session-focus #mobile-award-chamber {
    display: grid !important;
    width: 92%;
    grid-template-columns: auto 1fr;
    gap: 3px 8px;
    margin: 12px auto 0;
    padding: 8px 11px;
    border-radius: 10px;
}

body.device-mobile.theme-refund_rush.first-session-focus .award-chamber-state {
    text-align: right;
}

body.device-mobile.theme-refund_rush.first-session-focus .award-chamber-track {
    display: none;
}

body.device-mobile.theme-refund_rush.first-session-focus .award-chamber-copy {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.66rem;
    line-height: 1.2;
}

/* Final short-phone overrides must follow the Refund Rush title/Award Jar
   declarations above. The theme-specific portrait marquee otherwise wins the
   cascade after the generic landscape rule and steals 48px from the reels. */
body.device-mobile.orient-landscape #game-title-banner {
    display: none !important;
}

@media (max-height: 700px) and (orientation: portrait) {
    body.device-mobile.theme-refund_rush #mobile-award-chamber {
        margin-top: 24px;
    }
}

@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: var(--meter-standard-pct, 30%); }
body.theme-trucker_tom #game-title-banner #receipt-meter .marker-itemized { left: var(--meter-itemized-pct, 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 */
}

/* The renderer must measure the allocated reel row, not the canvas's intrinsic
   height. Otherwise short desktop viewports center a taller cabinet across the
   rules and controls. The 2px inset keeps cabinet borders from touching HUD. */
body.device-desktop #reel-section {
    height: calc(100% - 2px);
    max-height: calc(100% - 2px);
    align-items: center;
}

body.device-desktop #reel-row {
    transform: none;
}

body.device-desktop.theme-trucker_tom #reel-row {
    transform: translateY(-0.35rem);
}

body.device-desktop #meter-column:not(.meter-docked) {
    height: calc(100% - 2px);
    max-height: calc(100% - 2px);
    min-height: 0;
    justify-content: center;
}

body.device-desktop #meter-column:not(.meter-docked) #receipt-meter {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: 100%;
}

/* Keep the decorative cabinet backing inside its owning row. Its former 68vh
   height spilled above and below the row, dimming rules and financial controls. */
body.device-desktop.theme-refund_rush #reel-row::before {
    top: 0;
    bottom: 0;
    height: auto;
    transform: none;
}

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

/* The mobile bet button already displays and edits Total Bet. Suppress the
   duplicate desktop readout so Balance, Return, Bet, and Spin each appear once. */
body.device-mobile #bet-display {
    display: none !important;
}

/* Advanced actions remain available through Menu without competing with the
   two primary mobile decisions: choose Bet and press Spin. */
body.device-mobile #turbo-btn,
body.device-mobile #auto-btn,
body.device-mobile #buy-bonus-btn {
    display: none !important;
}

/* Spin is the primary decision, not merely another minimum-size toolbar
   control. Apply this to every portrait phone, including narrow desktop
   browsers and embedded webviews that report a pointer instead of touch. */
body.device-mobile.orient-portrait .spin-btn {
    width: 56px !important;
    height: 56px !important;
    border-width: 3px;
}

/* On short portrait phones the flex stack can extend the mandatory helpline
   below the clipped 100dvh cabinet. Pin it to the viewport and reserve its
   measured line height so financial controls never sit underneath it. */
@media (max-height: 620px) and (orientation: portrait) {
    body.device-mobile #helpline-strip {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 80;
        margin: 0;
    }

    body.device-mobile #controls {
        position: fixed;
        left: 4px;
        right: 4px;
        bottom: 33px;
        z-index: 79;
        width: calc(100% - 8px);
        margin: 0;
    }

    body.device-mobile.first-session-focus #core-rule-strip {
        padding: 2px 5px 3px;
    }

    body.device-mobile.first-session-focus .core-mobile-summary {
        gap: 1px;
        margin: 0 3px;
        padding: 3px 7px;
    }

    body.device-mobile.first-session-focus .core-mobile-summary > strong {
        font-size: 0.69rem;
    }

    body.device-mobile.first-session-focus .core-mobile-summary > span {
        font-size: 0.58rem;
    }

    body.device-mobile.first-session-focus .core-mobile-value-summary {
        padding-top: 1px;
        font-size: 0.44rem;
    }

    body.device-mobile.theme-refund_rush #reel-section,
    body.device-mobile.theme-refund_rush #mobile-award-chamber {
        position: relative;
        top: -24px;
    }

    body.device-mobile #reel-row:has(#round-verdict.visible) #mobile-award-chamber {
        visibility: hidden;
    }

    body.device-mobile #round-verdict.visible {
        bottom: 84px !important;
    }

    /* Large accessibility text intentionally switches the cabinet to document
       scrolling. Restore normal flow there so wrapped helpline copy defines
       its own height instead of being covered by fixed controls. */
    body.device-mobile.round-clarity-large-text #helpline-strip,
    body.device-mobile.round-clarity-large-text #controls {
        position: static;
        inset: auto;
    }

    body.device-mobile.round-clarity-large-text #controls {
        width: calc(100% - 8px);
        margin: 0 4px;
    }

    body.device-mobile.round-clarity-large-text #reel-section,
    body.device-mobile.round-clarity-large-text #mobile-award-chamber {
        top: 0;
    }

    body.device-mobile.round-clarity-large-text #mobile-award-chamber {
        visibility: visible !important;
    }

    body.device-mobile.round-clarity-large-text #round-verdict.visible {
        bottom: 7px !important;
    }
}

body.first-session-focus .advanced-mobile-menu-item {
    display: none !important;
}

/* The current server-backed card pack is explicitly Refund Rush themed
   (Receipts Album, Coffee Run, tax-season cards). Do not leak that presentation
   into portfolio games until each has an authoritative themed collection pack. */
body:not(.theme-refund_rush) #album-btn,
body:not(.theme-refund_rush) #mp-album {
    display: none !important;
}

/* Mobile menu button (hamburger) + bet button (compact $) */
body.device-mobile .menu-btn,
body.device-mobile .mobile-bet-btn {
    min-height: 44px;
    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: 44px; position: relative; }

body.device-mobile .menu-btn.has-active-option::after {
    content: attr(data-active-count);
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #FFD700;
    color: #17121f;
    font-size: 0.62rem;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.72);
}

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-label {
    flex: 1;
}

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

.mobile-bet-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 3px 12px;
    margin: 2px 4px 6px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 215, 0, 0.34);
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.08);
}
.mobile-bet-summary span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
}
.mobile-bet-summary strong {
    color: #FFD700;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
}
.mobile-bet-summary small {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.7rem;
}

.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:
        radial-gradient(ellipse 48% 42% at 28% 48%, rgba(43, 255, 139, 0.16), transparent 68%),
        radial-gradient(ellipse 52% 44% at 72% 43%, rgba(255, 189, 77, 0.18), transparent 70%),
        rgba(0, 0, 0, 0.74);
    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(90deg, rgba(49, 255, 147, 0.07), transparent 32%, transparent 68%, rgba(255, 184, 65, 0.08)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.13), transparent 55%),
        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 {
    position: relative;
    overflow: hidden;
    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::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.72;
    background:
        radial-gradient(ellipse 120% 70% at 50% -12%, var(--bb-accent-soft, rgba(255, 215, 0, 0.12)), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,0.055), transparent 28%);
}
.bb-feature::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--bb-accent, #FFD700), transparent);
    box-shadow: 0 0 18px var(--bb-accent-soft, rgba(255, 215, 0, 0.18));
}
.bb-feature > * {
    position: relative;
    z-index: 1;
}
.bb-feature.dd {
    --bb-accent: #38ff93;
    --bb-accent-soft: rgba(56, 255, 147, 0.17);
    border-color: rgba(56, 255, 147, 0.28);
}
.bb-feature.fs {
    --bb-accent: #ffcf63;
    --bb-accent-soft: rgba(255, 183, 77, 0.18);
    border-color: rgba(255, 184, 65, 0.30);
}
.bb-feature:not(.disabled):not(.unaffordable):hover {
    transform: translateY(-2px);
    border-color: var(--bb-accent, #FFD700);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.34),
        0 0 28px var(--bb-accent-soft, 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.dd .bb-feature-name { color: #8cffbf; }
.bb-feature.fs .bb-feature-name { color: #ffd36e; }
.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: var(--bb-accent, 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-feature.dd .bb-buy-btn {
    background: linear-gradient(180deg, #8affbd, #24c96d);
    color: #031d0e;
    box-shadow: 0 4px 16px rgba(56, 255, 147, 0.34);
}
.bb-feature.fs .bb-buy-btn {
    background: linear-gradient(180deg, #ffe08a, #e58431);
    color: #211000;
    box-shadow: 0 4px 16px rgba(255, 184, 65, 0.38);
}
.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); }

/* Final narrow-phone boundary override. This must follow all shared and
   theme-specific mobile reel rules so the renderer measures the inset width. */
@media (max-width: 340px) {
    body.device-mobile #reel-section {
        width: calc(100% - 16px) !important;
    }
}