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

        :root {
            --bg:       #0a0a0a;
            --surface:  #161618;
            --surface2: #222226;
            --border:   #2c2c2e;
            --correct:  #0041cc;
            --present:  #cc9900;
            --absent:   #3a3a3c;
            --text:     #f0f0f0;
            --muted:    #f0f0f0;
            --accent:   #bf5af2;
            --green:    #30d158;
            --red:      #ec0abb;
            --yellow:   #ffcc00;
            --kbd:      #636366;
            --modal-bg: rgba(0,0,0,0.97);
            --action-bg:       #1a001a;
            --action-bg-hover: #2a0030;
            --fade-rgb: 10,10,10;
        }

        html, body {
            overflow-x: hidden;
            overflow-anchor: none;
        }

        body {
            background: transparent;
            color: var(--text);
            font-family: 'Segoe UI', system-ui, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            min-height: 100dvh;
            padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
            gap: 8px;
            user-select: none;
            transition: background-color 0.3s, color 0.3s;
        }
        #intro-underlay {
            position: fixed;
            inset: 0;
            z-index: 50;
            /* Keep the planet/moon intro from showing the board, but do NOT cover the sky.
               The board/keyboard are hidden separately below while body.intro-active is on. */
            background: transparent;
            opacity: 0;
            pointer-events: none;
            transition: visibility 0s linear 0.38s;
            visibility: hidden;
        }
        body.intro-active #intro-underlay {
            opacity: 1;
            visibility: visible;
            transition-delay: 0s;
        }
        body.intro-active #capture-zone,
        body.intro-active #keyboard,
        body.intro-active #dev-bar-wrap,
        body.intro-active #fx {
            visibility: hidden;
            pointer-events: none;
        }
        #capture-zone {
            display: flex; flex-direction: column; align-items: center;
            overflow-anchor: none;
            width: 100%; max-width: 420px;
            gap: 6px; padding: 10px 8px 20px;
            box-sizing: border-box;
            border: 1px solid;
        }
        #capture-zone::before,
        #capture-zone::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }
        #capture-zone::before { left: 4px; }
        #capture-zone::after { right: 4px; }
        #capture-zone .cabinet-corner {
            display: none;
        }
        #capture-zone > * {
            position: relative;
            z-index: 1;
        }
        @media (max-width: 480px) {
            #capture-zone {
                padding: 8px 6px 12px;
                border-radius: 11px;
            }
            #slot-machine {
                padding: 9px 7px 11px;
            }
        }
        #capture-zone.phase-complete-tremor {
            animation: phaseCompleteTremor 1.48s cubic-bezier(.16, 1, .3, 1) both;
        }
        #capture-zone.phase-complete-tremor #board-wrap {
            animation: phaseBoardGlow 1.48s ease both;
        }
        #capture-zone.phase3-swap-out {
            animation: phase3SwapOut 0.24s ease both;
            pointer-events: none;
        }
        #capture-zone.phase3-swap-in {
            animation: phase3SwapIn 0.34s cubic-bezier(.16, 1, .3, 1) both;
        }
        #capture-zone.phase3-presenting #board-wrap {
            animation: phase3PresentationGlow 2.8s ease-out both;
        }
        #capture-zone.phase3-presenting #clue-banner {
            animation: phase3ClueGlow 2.8s ease-out both;
        }
        #capture-zone.phase3-presenting #category-banner {
            animation: mojiMoonFluid 9s ease-in-out infinite, phase3BannerPresent 2.8s ease-out both;
        }
        /* The mobile header has already completed its transport presentation.
           Replaying a separate banner entrance as the return glow ends reads
           like a brief header reload, so keep that fixed plate stable. */
        @media (max-width: 480px) {
            #capture-zone.phase3-presenting #category-banner {
                animation: none !important;
            }
        }
        #capture-zone.phase1-presenting #board-wrap {
            animation: phase1PresentationGlow 2.05s ease-out both;
        }
        #capture-zone.phase1-presenting #category-banner {
            animation: mojiMoonFluid 9s ease-in-out infinite, phase1BannerPresent 2.05s ease-out both;
        }
        body[data-console-skin="white"] #capture-zone.phase3-presenting #board-wrap {
            animation: phase3PresentationGlowWhite 2.8s ease-out both;
        }
        body[data-console-skin="white"] #capture-zone.phase3-presenting #category-banner {
            animation: mojiMoonFluid 9s ease-in-out infinite, phase3BannerPresentWhite 2.8s ease-out both;
        }
        body[data-console-skin="white"] #capture-zone.phase1-presenting #board-wrap {
            animation: phase1PresentationGlowWhite 2.05s ease-out both;
        }
        body[data-console-skin="white"] #capture-zone.phase1-presenting #category-banner {
            animation: mojiMoonFluid 9s ease-in-out infinite, phase1BannerPresentWhite 2.05s ease-out both;
        }
        #capture-zone.console-transport-prep:not(.console-teleport-in) {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        body.mobile-ui #capture-zone.console-teleport-in,
    body.android-app #capture-zone.console-teleport-in {
            animation: consoleTransportShell 2.95s linear both;
            pointer-events: none;
            transform-origin: center top;
        }
        #capture-zone.console-teleport-in::before {
            width: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 0;
            z-index: 8;
            background:
                repeating-linear-gradient(90deg,
                    transparent 0 17px,
                    rgba(98,255,121,0.18) 18px 19px,
                    transparent 20px 37px),
                linear-gradient(180deg,
                    transparent 0%,
                    rgba(98,255,121,0.24) 42%,
                    rgba(255,255,255,0.52) 50%,
                    rgba(255,75,174,0.20) 58%,
                    transparent 100%);
            transform: translateY(-112%);
            mix-blend-mode: screen;
            animation: boardTransportBeam 2.95s linear both;
        }
        #capture-zone.console-teleport-in::after {
            width: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 0;
            z-index: 9;
            background:
                radial-gradient(circle at 12% 18%, rgba(255,255,255,0.88) 0 1px, transparent 2px),
                radial-gradient(circle at 31% 72%, rgba(98,255,121,0.78) 0 1px, transparent 2px),
                radial-gradient(circle at 58% 28%, rgba(255,75,174,0.72) 0 1px, transparent 2px),
                radial-gradient(circle at 84% 64%, rgba(255,255,255,0.82) 0 1px, transparent 2px);
            background-size: 42px 42px, 58px 58px, 64px 64px, 46px 46px;
            filter: blur(0.2px);
            transform: scaleY(0.18);
            animation: boardTransportSparks 2.95s linear both;
        }
        #capture-zone.console-teleport-in > * {
            animation: consoleTransportPartIn 2.75s linear both;
            animation-delay: calc(var(--console-i, 0) * 22ms);
        }
        #capture-zone.console-teleport-in #board-wrap {
            animation: boardTransportShell 2.85s linear both;
        }
        #capture-zone.console-teleport-in #category-banner {
            animation: consoleTransportPartIn 2.75s linear both;
            animation-delay: calc(var(--console-i, 0) * 22ms);
        }
        #capture-zone.console-teleport-in * {
            animation-play-state: paused !important;
        }
        #capture-zone.console-teleport-in,
        #capture-zone.console-teleport-in::before,
        #capture-zone.console-teleport-in::after,
        #capture-zone.console-teleport-in > *,
        #capture-zone.console-teleport-in #board-wrap,
        #capture-zone.console-teleport-in #category-banner {
            animation-play-state: running !important;
        }
        #capture-zone.console-teleport-in .moji-title-letter,
        #capture-zone.console-teleport-in #category-banner .lcd-text,
        #capture-zone.console-teleport-in .tile,
        #capture-zone.console-teleport-in .sbox,
        #capture-zone.console-teleport-in .sbox *,
        #capture-zone.console-teleport-in #clue-banner,
        #capture-zone.console-teleport-in #phase-ready-prompt {
            animation: none !important;
        }
        #capture-zone.console-transport-shimmer {
            animation: consoleTransportAfterglow 0.26s linear both;
        }
        #capture-zone.console-transport-shimmer::before {
            width: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 0;
            z-index: 8;
            pointer-events: none;
            background:
                linear-gradient(180deg, transparent 0%, rgba(98,255,121,0.16) 42%, rgba(255,255,255,0.34) 50%, rgba(255,75,174,0.13) 58%, transparent 100%);
            mix-blend-mode: screen;
            animation: consoleTransportResidualBeam 0.26s linear both;
        }
        #capture-zone.console-transport-shimmer::after {
            width: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 0;
            z-index: 9;
            pointer-events: none;
            background:
                radial-gradient(circle at 20% 34%, rgba(255,255,255,0.58) 0 1px, transparent 2px),
                radial-gradient(circle at 47% 68%, rgba(98,255,121,0.52) 0 1px, transparent 2px),
                radial-gradient(circle at 74% 42%, rgba(255,75,174,0.48) 0 1px, transparent 2px);
            background-size: 52px 52px, 68px 68px, 58px 58px;
            animation: consoleTransportResidualSparks 0.26s linear both;
        }

        /* ── DECORATIVE WAKE-UP: smooth banner/edge life after transporter ── */
        #capture-zone.console-decor-wake::before,
        #capture-zone.console-decor-wake::after {
            animation: consoleDecorEdgeWake 1.05s ease-out both;
        }
        #capture-zone.console-decor-wake #category-banner {
            animation: mojiMoonFluid 9s ease-in-out infinite, consoleDecorBannerWake 1.12s ease-out both !important;
        }
        #capture-zone.console-typewriter-hold .moji-title-letter {
            animation: none !important;
            color: #26262a;
            -webkit-text-fill-color: #26262a;
            opacity: 0.86;
            filter: none;
            text-shadow: none;
        }
        /* POST-MOON MASTER LOCK: keep the console visually inert until the transporter
           and board have completely settled. The transporter itself is still allowed to run
           by the existing console-teleport-in allow-list above. */
        #capture-zone.console-postmoon-lock:not(.console-teleport-in) #category-banner,
        #capture-zone.console-postmoon-lock:not(.console-teleport-in) .moji-title-letter,
        #capture-zone.console-postmoon-lock:not(.console-teleport-in) #category-subtitle-box,
        #capture-zone.console-postmoon-lock:not(.console-teleport-in) #category-subtitle-box .lcd-text {
            animation: none !important;
            transition: none !important;
        }
        #capture-zone.console-postmoon-lock #category-subtitle-box:not(.type-on) .lcd-text {
            opacity: 0;
        }
        /* MOJI-LOJI stays neutral until the post-moon LCD/typewriter and edge wake are finished.
           Do not restart letter color animations here; restarting causes the visible blink. */
        @keyframes consoleDecorEdgeWake {
            0% { opacity: 0.18; filter: brightness(0.78) saturate(0.82); }
            42% { opacity: 0.34; filter: brightness(0.92) saturate(0.94); }
            100% { opacity: 0.52; filter: brightness(1) saturate(1); }
        }
        @keyframes consoleDecorBannerWake {
            0% {
                filter: brightness(0.72) saturate(0.72);
                box-shadow:
                    inset 0 2px 0 rgba(255,255,255,0.08),
                    inset 0 -14px 20px rgba(46,15,22,0.24),
                    inset 0 0 10px rgba(255,218,120,0.03),
                    0 4px 0 rgba(32,10,16,0.78),
                    0 0 4px rgba(255,204,0,0.04);
            }
            48% {
                filter: brightness(0.9) saturate(0.9);
                box-shadow:
                    inset 0 2px 0 rgba(255,255,255,0.16),
                    inset 0 -14px 20px rgba(46,15,22,0.30),
                    inset 0 0 14px rgba(255,218,120,0.05),
                    0 4px 0 rgba(32,10,16,0.78),
                    0 0 9px rgba(255,204,0,0.10);
            }
            100% {
                filter: brightness(1) saturate(1);
                box-shadow:
                    inset 0 2px 0 rgba(255,255,255,0.24),
                    inset 0 -14px 20px rgba(46,15,22,0.34),
                    inset 0 0 18px rgba(255,218,120,0.08),
                    0 4px 0 rgba(32,10,16,0.78),
                    0 0 14px rgba(255,204,0,0.18);
            }
        }
        @keyframes mojiLetterWake {
            0% { opacity: 0.72; filter: brightness(0.72) saturate(0.72) drop-shadow(0 1px 0 rgba(55,18,37,0.45)); }
            55% { opacity: 0.9; filter: brightness(0.92) saturate(0.92) drop-shadow(0 1px 0 rgba(55,18,37,0.62)); }
            100% { opacity: 1; filter: brightness(1) saturate(1) drop-shadow(0 2px 0 rgba(55,18,37,0.74)); }
        }

        /* ── TRANSPORTER EASTER EGG: 7-TAP MAINTENANCE CYCLE ── */
        #capture-zone.console-easter-egg {
            pointer-events: none;
            transform-origin: center top;
        }
        #capture-zone.console-easter-egg * {
            animation-play-state: paused !important;
        }
        #capture-zone.console-easter-egg .moji-title-letter,
        #capture-zone.console-easter-egg #category-banner .lcd-text,
        #capture-zone.console-easter-egg .tile,
        #capture-zone.console-easter-egg .sbox,
        #capture-zone.console-easter-egg .sbox *,
        #capture-zone.console-easter-egg #clue-banner,
        #capture-zone.console-easter-egg #phase-ready-prompt {
            animation: none !important;
        }
        #capture-zone.console-easter-egg::before,
        #capture-zone.console-easter-egg::after {
            width: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: inherit;
            pointer-events: none;
        }
        #capture-zone.console-easter-egg::before {
            z-index: 8;
            opacity: 0;
            background:
                repeating-linear-gradient(90deg,
                    transparent 0 10px,
                    rgba(98,255,121,0.24) 11px 12px,
                    transparent 13px 24px),
                repeating-linear-gradient(90deg,
                    transparent 0 23px,
                    rgba(255,255,255,0.14) 24px 25px,
                    transparent 26px 46px),
                linear-gradient(180deg,
                    transparent 0%,
                    rgba(98,255,121,0.34) 39%,
                    rgba(255,255,255,0.68) 50%,
                    rgba(255,75,174,0.28) 61%,
                    transparent 100%);
            mix-blend-mode: screen;
        }
        #capture-zone.console-easter-egg::after {
            z-index: 9;
            opacity: 0;
            background:
                radial-gradient(circle at 10% 18%, rgba(255,255,255,0.94) 0 1px, transparent 2px),
                radial-gradient(circle at 23% 46%, rgba(98,255,121,0.84) 0 1px, transparent 2px),
                radial-gradient(circle at 36% 74%, rgba(255,255,255,0.86) 0 1px, transparent 2px),
                radial-gradient(circle at 52% 26%, rgba(255,75,174,0.78) 0 1px, transparent 2px),
                radial-gradient(circle at 66% 58%, rgba(98,255,121,0.76) 0 1px, transparent 2px),
                radial-gradient(circle at 82% 36%, rgba(255,255,255,0.9) 0 1px, transparent 2px),
                radial-gradient(circle at 92% 76%, rgba(255,75,174,0.68) 0 1px, transparent 2px);
            background-size: 30px 30px, 38px 38px, 46px 46px, 54px 54px, 62px 62px, 42px 42px, 70px 70px;
            filter: blur(0.12px) brightness(1.08);
        }
        #capture-zone.console-easter-egg.egg-dematerialize {
            animation: eggTransportDematShell 0.64s linear both;
        }
        #capture-zone.console-easter-egg.egg-dematerialize::before {
            animation: eggTransportBeamDown 0.64s linear both;
        }
        #capture-zone.console-easter-egg.egg-dematerialize::after {
            animation: eggTransportSparksDown 0.64s linear both;
        }
        #capture-zone.console-easter-egg.egg-rematerialize {
            animation: eggTransportRematShell 0.84s linear both;
        }
        #capture-zone.console-easter-egg.egg-rematerialize::before {
            animation: eggTransportBeamDown 0.84s linear both;
        }
        #capture-zone.console-easter-egg.egg-rematerialize::after {
            animation: eggTransportSparksDown 0.84s linear both;
        }
        #capture-zone.console-easter-egg.phase3-easter-slow.egg-dematerialize {
            animation-duration: 0.72s;
        }
        #capture-zone.console-easter-egg.phase3-easter-slow.egg-dematerialize::before,
        #capture-zone.console-easter-egg.phase3-easter-slow.egg-dematerialize::after {
            animation-duration: 0.72s;
        }
        #capture-zone.console-easter-egg.phase3-easter-slow.egg-rematerialize {
            animation-duration: 0.92s;
        }
        #capture-zone.console-easter-egg.phase3-easter-slow.egg-rematerialize::before,
        #capture-zone.console-easter-egg.phase3-easter-slow.egg-rematerialize::after {
            animation-duration: 0.92s;
        }
        @keyframes eggTransportDematShell {
            0%   { opacity: 1; filter: brightness(1) saturate(1); clip-path: inset(0 0 0 0); }
            18%  { opacity: 1; filter: brightness(1.28) saturate(1.12); clip-path: inset(0 0 0 0); }
            100% { opacity: 0; filter: brightness(1.7) saturate(1.25) blur(0.8px); clip-path: inset(100% 0 0 0); }
        }
        @keyframes eggTransportRematShell {
            0%   { opacity: 0; filter: brightness(1.65) saturate(1.22) blur(0.8px); clip-path: inset(100% 0 0 0); }
            14%  { opacity: 0.28; }
            82%  { opacity: 1; filter: brightness(1.18) saturate(1.08) blur(0.15px); clip-path: inset(0 0 0 0); }
            100% { opacity: 1; filter: brightness(1) saturate(1) blur(0); clip-path: inset(0 0 0 0); }
        }
        @keyframes eggTransportBeamDown {
            0%   { opacity: 0; transform: translateY(-112%); }
            10%  { opacity: 0.86; }
            88%  { opacity: 0.78; transform: translateY(112%); }
            100% { opacity: 0; transform: translateY(124%); }
        }
        @keyframes eggTransportSparksDown {
            0%   { opacity: 0; transform: translateY(-10%) scaleY(0.18); background-position: 0 0, 0 0, 0 0, 0 0; }
            12%  { opacity: 0.78; }
            82%  { opacity: 0.72; transform: translateY(42%) scaleY(1.05); background-position: 18px 70px, -22px 92px, 26px 82px, -16px 62px; }
            100% { opacity: 0; transform: translateY(70%) scaleY(0.18); background-position: 28px 112px, -34px 148px, 42px 132px, -24px 96px; }
        }

        #phase-ready-prompt {
            display: none;
            height: 64px;
            min-height: 64px;
            width: 100%;
            max-width: 420px;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--yellow);
            font-family: 'Courier New', monospace;
            font-size: clamp(0.92rem, 3.6vw, 1.18rem);
            font-weight: 400;
            letter-spacing: 2px;
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 10px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.18), transparent 54%),
                rgba(28,28,32,0.72);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 0 12px rgba(255,204,0,0.08);
            text-shadow: 0 0 12px rgba(255,204,0,0.45);
        }
        .phase-ready-title {
            display: block;
            color: #fff;
            font-size: clamp(0.82rem, 3vw, 1rem);
            letter-spacing: 2px;
            margin-bottom: 4px;
            text-shadow: 0 0 10px rgba(255,75,174,0.55);
        }
        .phase-ready-cta {
            display: block;
            border: none;
            background: transparent;
            color: var(--yellow);
            font: inherit;
            letter-spacing: inherit;
            cursor: pointer;
            padding: 0;
            text-shadow: inherit;
        }
        .phase-ready-cta:focus-visible {
            outline: 1px solid rgba(255,204,0,0.62);
            outline-offset: 4px;
        }
        #phase-ready-prompt.on {
            display: flex;
            flex-direction: column;
            animation: phaseReadyMonitorPulse 1.4s ease-out both;
        }
        #phase-ready-prompt.on .phase-ready-title {
            animation: phaseReadyFlipText 0.86s steps(7, end) both;
        }
        #phase-ready-prompt.on .phase-ready-cta {
            animation: phaseReadyFlipText 0.92s steps(8, end) 0.16s both, readyPromptBlink 1.05s ease-in-out 1.2s infinite;
        }

        /* ── TITLE ── */
        #console-info-bay {
            position: relative;
            width: 100%;
            max-width: 420px;
            height: 70px;
            min-height: 70px;
            overflow: hidden;
        }
        #console-info-bay > * {
            position: absolute;
            inset: 0;
            width: 100%;
            max-width: 420px;
            margin: 0;
        }
        #game-title {
            display: none;
            font-size: clamp(1.3rem, 5vw, 1.9rem); font-weight: 900; letter-spacing: clamp(4px, 2vw, 8px);
            color: var(--accent); text-shadow: 0 0 18px #bf5af255;
            font-family: 'Courier New', monospace;
            text-align: center; width: 100%;
        }

        /* ── DEV BAR ── */
        #dev-bar-wrap {
            width: 100%; max-width: 420px;
            margin-top: 60px; margin-bottom: 140px;
            padding-top: 12px; border-top: 1px dashed var(--border);
            display: flex; flex-direction: column; align-items: center; gap: 6px;
        }
        #dev-bar-wrap[hidden] { display: none !important; }
        #dev-bar-label { font-family: 'Courier New', monospace; font-size: 0.65rem; letter-spacing: 2px; color: var(--text); opacity: 0.6; }
        #dev-bar { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; padding: 8px 0; width: 100%; }
        #dev-phase-bar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: 100%; }
        .dev-btn {
            background: var(--surface); border: 1px solid var(--border);
            color: var(--muted); width: 30px; height: 30px;
            border-radius: 5px; font-size: 0.8rem; font-weight: 400; cursor: pointer;
            transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
        }
        .dev-phase-btn {
            width: auto;
            min-width: 44px;
            padding: 0 9px;
            font-size: 0.68rem;
            letter-spacing: 0.5px;
        }
        .dev-btn:hover  { border-color: var(--accent); color: var(--accent); }
        .dev-btn.active { border-color: var(--accent); color: var(--accent); background: #1a001a; }

        .dev-day-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 6px;
            width: 100%;
            margin-top: 2px;
        }
        .dev-day-label {
            flex-basis: 100%;
            text-align: center;
            font-family: 'Courier New', monospace;
            font-size: 0.64rem;
            letter-spacing: 1px;
            color: var(--yellow);
            opacity: 0.9;
        }
        .dev-day-btn {
            width: auto;
            min-width: 78px;
            padding: 0 8px;
            font-size: 0.64rem;
            letter-spacing: 0.4px;
        }

        /* ── CATEGORY ── */
        #category-banner {
            position: relative;
            width: 100%; max-width: 420px; text-align: center;
            min-height: 56px;
            padding: 6px 9px; border: 1px solid rgba(255,204,0,0.48); border-radius: 9px;
            background:
                radial-gradient(circle at 27% 24%, rgba(255,244,208,0.32) 0%, transparent 18%),
                radial-gradient(circle at 78% 28%, rgba(255,204,0,0.50) 0%, transparent 22%),
                radial-gradient(circle at 34% 76%, rgba(213,40,168,0.62) 0%, transparent 48%),
                radial-gradient(circle at 68% 66%, rgba(178,74,194,0.46) 0%, transparent 46%),
                radial-gradient(circle at 48% 48%, #c94dc0 0%, #8a347f 54%, #3a183e 100%);
            background-size: 180% 180%, 150% 150%, 205% 205%, 190% 190%, 165% 165%;
            font-family: 'Courier New', monospace;
            font-weight: 400; font-size: clamp(1rem, 4vw, 1.45rem); color: var(--yellow); letter-spacing: 2px;
            line-height: 1.3; word-break: break-word;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
            overflow: hidden;
            box-shadow:
                inset 0 2px 0 rgba(255,255,255,0.24),
                inset 0 -14px 20px rgba(46,15,22,0.34),
                inset 0 0 18px rgba(255,218,120,0.08),
                0 4px 0 rgba(32,10,16,0.78),
                0 0 14px rgba(255,204,0,0.18);
            animation: mojiMoonFluid 9s ease-in-out infinite;
            text-shadow:
                0 0 4px rgba(0,0,0,0.9),
                0 0 12px rgba(255,204,0,0.22);
        }
        #category-banner .banner-shine {
            display: none;
        }
        #category-banner::before {
            content: "MOJI-LOJI";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scaleX(1.08);
            z-index: 1;
            color: rgba(255,250,236,0.88);
            font-family: 'Courier New', monospace;
            font-size: clamp(2.38rem, 11.2vw, 3.4rem);
            font-weight: 900;
            letter-spacing: clamp(2px, 1.2vw, 5px);
            line-height: 0.9;
            white-space: nowrap;
            pointer-events: none;
            display: none;
        }
        .moji-title {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(1px, 0.35vw, 4px);
            pointer-events: none;
            white-space: nowrap;
        }
        .moji-title-letter {
            display: inline-block;
            color: #26262a;
            -webkit-text-fill-color: #26262a;
            font-family: 'Courier New', monospace;
            font-size: clamp(2.38rem, 11.2vw, 3.4rem);
            font-weight: 900;
            line-height: 0.9;
            transform: scaleX(1.05);
            text-shadow: none;
            filter: none;
            opacity: 0.86;
            animation: mojiTitleLetterGlow 3.2s ease-in-out infinite;
            animation-delay: calc(var(--i, 0) * 0.17s);
            animation-fill-mode: both;
        }
        .moji-title-letter.space {
            width: clamp(0.22rem, 1.1vw, 0.46rem);
            transform: none;
        }
        @keyframes mojiLetterBacklight {
            0%, 58%, 67%, 100% {
                color: rgba(255,250,236,0.94);
                text-shadow:
                    0 1px 0 rgba(255,255,255,0.9),
                    0 -1px 0 rgba(105,42,73,0.72),
                    1px 0 0 rgba(255,255,255,0.38),
                    -1px 0 0 rgba(42,12,34,0.72),
                    0 3px 2px rgba(32,10,24,0.64),
                    0 0 12px rgba(255,245,210,0.22);
            }
            60% {
                color: #ff8fdc;
                text-shadow:
                    0 1px 0 rgba(255,255,255,0.88),
                    0 -1px 0 rgba(90,8,70,0.8),
                    0 3px 2px rgba(32,10,24,0.64),
                    0 0 18px rgba(255,75,174,0.86),
                    0 0 28px rgba(255,75,174,0.42);
            }
            61.8% {
                color: #ffe879;
                text-shadow:
                    0 1px 0 rgba(255,255,255,0.92),
                    0 -1px 0 rgba(96,68,0,0.82),
                    0 3px 2px rgba(32,10,24,0.64),
                    0 0 18px rgba(255,224,104,0.92),
                    0 0 30px rgba(255,204,0,0.45);
            }
            63.6% {
                color: #8dd7ff;
                text-shadow:
                    0 1px 0 rgba(255,255,255,0.92),
                    0 -1px 0 rgba(0,54,84,0.82),
                    0 3px 2px rgba(32,10,24,0.64),
                    0 0 18px rgba(90,180,255,0.9),
                    0 0 30px rgba(90,180,255,0.42);
            }
            65.4% {
                color: #baff9a;
                text-shadow:
                    0 1px 0 rgba(255,255,255,0.9),
                    0 -1px 0 rgba(25,84,0,0.82),
                    0 3px 2px rgba(32,10,24,0.64),
                    0 0 18px rgba(132,255,112,0.82),
                    0 0 28px rgba(132,255,112,0.35);
            }
            66.6% {
                color: rgba(255,250,236,0.98);
                text-shadow:
                    0 1px 0 rgba(255,255,255,0.95),
                    0 -1px 0 rgba(105,42,73,0.72),
                    0 3px 2px rgba(32,10,24,0.64),
                    0 0 20px rgba(255,245,210,0.72);
            }
        }
        .category-title-line {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            color: var(--accent);
            font-size: clamp(1rem, 4vw, 1.34rem);
            font-weight: 900;
            letter-spacing: clamp(3px, 1.5vw, 7px);
            line-height: 1.05;
            text-shadow: 0 0 18px #bf5af255;
        }
        .category-title-line > span {
            white-space: nowrap;
        }
        .category-subtitle {
            color: var(--yellow);
            font-size: clamp(0.72rem, 2.8vw, 0.92rem);
            letter-spacing: 2px;
            line-height: 1.1;
            margin-top: 2px;
        }
        .category-theme {
            position: relative;
            z-index: 1;
            color: var(--yellow);
            font-family: 'Courier New', monospace;
            font-size: clamp(0.78rem, 3vw, 0.98rem);
            font-weight: 400;
            letter-spacing: 1.4px;
            line-height: 1.15;
        }
        #category-subtitle-box {
            width: 100%;
            max-width: 420px;
            margin-top: -5px;
            height: 32px;
            min-height: 32px;
            box-sizing: border-box;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 0 10px 2px;
            border: none;
            border-radius: 2px;
            background:
                linear-gradient(90deg, rgba(255,255,255,0.035), transparent 16%, transparent 84%, rgba(0,0,0,0.34)),
                repeating-linear-gradient(90deg, rgba(145,175,150,0.28) 0 1px, transparent 1px 39px),
                repeating-linear-gradient(0deg, rgba(145,175,150,0.24) 0 1px, transparent 1px 8px),
                linear-gradient(180deg, #141817, #090d0c 48%, #030504);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.035),
                inset 0 0 0 1px rgba(0,0,0,0.62),
                0 1px 0 rgba(0,0,0,0.58);
            text-align: center;
            overflow: hidden;
        }
        #category-subtitle-box .lcd-text {
            width: 100%;
            min-height: 0;
            font-family: 'Courier New', monospace;
            color: #9dff7a;
            font-size: clamp(0.72rem, 2.75vw, 0.92rem);
            font-weight: 700;
            letter-spacing: 1.1px;
            line-height: 1.12;
            transform: translateY(1px);
            text-shadow:
                0 0 3px rgba(218,255,180,0.95),
                0 0 8px rgba(157,255,122,0.88),
                0 0 18px rgba(98,255,64,0.50),
                0 0 30px rgba(98,255,64,0.24);
            text-transform: uppercase;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        #category-subtitle-box.type-on .lcd-text,
        #lcd-panel.type-on #msg {
            display: inline-block;
            width: auto;
            max-width: 100%;
            white-space: nowrap;
            animation: categoryTypeOn 1.35s steps(34, end) both;
        }
        #category-subtitle-box.instruction {
            align-items: flex-end;
        }
        #category-subtitle-box.instruction .lcd-text {
            display: block;
            transform: translateY(1px);
            color: #ff6f93;
            text-shadow:
                0 0 5px rgba(255,116,136,0.75),
                0 0 12px rgba(255,75,174,0.38);
            animation: categoryInstructionBlink 0.62s steps(2, end) infinite;
        }
        @keyframes categoryInstructionBlink {
            0%, 100% { opacity: 1; filter: brightness(1.2) saturate(1.15); }
            50% { opacity: 0.46; filter: brightness(1.9) saturate(1.45); }
        }
        @keyframes categoryTypeOn {
            from {
                clip-path: inset(0 100% 0 0);
                opacity: 0.42;
            }
            to {
                clip-path: inset(0 0 0 0);
                opacity: 1;
            }
        }
        @keyframes categoryFluidSwirl {
            0%   { background-position: 0% 0%,   100% 0%,  50% 100%, 0% 50%, 0 0; }
            35%  { background-position: 42% 70%, 70% 25%,  12% 72%,  72% 34%, 0 0; }
            70%  { background-position: 78% 18%, 22% 78%,  86% 30%,  38% 80%, 0 0; }
            100% { background-position: 0% 0%,   100% 0%,  50% 100%, 0% 50%, 0 0; }
        }

        /* ── CLUE BANNER (phase 3) ── */
        #clue-banner {
            display: none; width: 100%; max-width: 420px;
            flex-direction: column; align-items: center; justify-content: center;
            height: 64px;
            min-height: 64px;
            gap: 4px; padding: 8px 16px;
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 10px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.16), transparent 54%),
                rgba(28,28,32,0.72);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 3px 0 rgba(0,0,0,0.5),
                0 0 12px rgba(255,204,0,0.08);
        }
        #clue-banner.on {
            display: flex;
            animation: slideDownFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        #clue-banner.on.no-slide {
            animation: none;
        }
        #console-info-bay.phase3-active #clue-banner {
            inset: 0 auto auto 50%;
            width: min(100%, 328px);
            max-width: 328px;
            transform: translateX(-50%);
            border-radius: 12px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.16), transparent 54%),
                rgba(18,18,21,0.86);
        }
        @keyframes slideDownFade {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        #clue-label { font-size: clamp(0.62rem, 2.4vw, 0.78rem); color: var(--text); font-family: 'Courier New', monospace; letter-spacing: 1px; }
        #clue-line2  {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(4px, 1.4vw, 8px);
            width: 100%;
            min-width: 0;
            overflow: hidden;
        }
        #clue-word  {
            min-width: 0;
            font-weight: 400;
            color: var(--correct);
            font-size: clamp(1.04rem, 4.2vw, 1.36rem);
            letter-spacing: clamp(1px, 0.8vw, 3px);
            font-family: 'Courier New', monospace;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #clue-emoji {
            flex: 0 0 clamp(30px, 9vw, 42px);
            width: clamp(30px, 9vw, 42px);
            font-size: clamp(1.45rem, 7vw, 2rem);
            line-height: 1;
            text-align: center;
        }
        #clue-answer { font-weight: 400; font-size: clamp(1.04rem, 4.2vw, 1.36rem); color: var(--text); font-family: 'Courier New', monospace; letter-spacing: 1px; }
        .clue-sep { color: var(--text); font-family: 'Courier New', monospace; font-size: clamp(0.84rem, 3vw, 1.08rem); opacity: 0.7; }

        /* ── MUTE BUTTON ── */
        #quick-menu-btn {
            position: fixed; top: 120px; right: 12px; z-index: 200;
            width: 28px; height: 28px;
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.78);
            border-radius: 999px;
            color: #fff;
            font-family: 'Courier New', monospace;
            font-size: 1rem;
            line-height: 1;
            cursor: pointer;
            opacity: 0.78;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.22),
                inset 0 -6px 12px rgba(0,0,0,0.30),
                0 0 12px rgba(255,255,255,0.16);
            transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }
        #quick-menu-btn:hover,
        #quick-menu-btn[aria-expanded="true"] {
            opacity: 1;
            transform: translateY(-1px);
            border-color: #fff;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.26),
                inset 0 -6px 12px rgba(0,0,0,0.30),
                0 0 16px rgba(255,255,255,0.28);
        }
        #quick-menu-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 205;
            pointer-events: none;
        }
        #quick-menu-modal.on {
            display: block;
            pointer-events: auto;
        }
        #quick-menu-box {
            position: fixed;
            top: 118px;
            right: 48px;
            width: min(190px, calc(100vw - 72px));
            display: flex;
            flex-direction: column;
            gap: 7px;
            padding: 10px;
            border: 1px solid rgba(236,10,187,0.62);
            border-radius: 12px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025) 38%, rgba(0,0,0,0.28) 100%),
                radial-gradient(circle at 50% 112%, rgba(236,10,187,0.26), transparent 56%),
                rgba(12,0,14,0.94);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.18),
                inset 0 -10px 18px rgba(0,0,0,0.38),
                0 4px 0 rgba(0,0,0,0.48),
                0 0 22px rgba(236,10,187,0.24);
            animation: quickMenuPop 0.18s ease both;
        }
        .quick-menu-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            padding: 5px 13px;
            border: 1px solid rgba(236,10,187,0.58);
            border-radius: 999px;
            background: transparent;
            color: #f0f0f0;
            font-family: 'Courier New', monospace;
            font-size: 0.72rem;
            font-weight: 400;
            letter-spacing: 1px;
            line-height: 1.1;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.16),
                inset 0 -6px 12px rgba(0,0,0,0.26);
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
        }
        .quick-menu-pill:hover,
        .quick-menu-pill:focus-visible {
            background: rgba(236,10,187,0.18);
            border-color: #ff75ff;
            color: #fff;
            outline: none;
            transform: translateY(-1px);
        }
        .quick-menu-pill.quick-menu-disabled,
        .quick-menu-pill.quick-menu-disabled:hover,
        .quick-menu-pill.quick-menu-disabled:focus-visible {
            opacity: 0.34;
            filter: grayscale(1) saturate(0.25);
            pointer-events: none;
            cursor: not-allowed;
            transform: none;
        }
        @keyframes quickMenuPop {
            from { opacity: 0; transform: translateY(-4px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        #help-modal,
        #about-modal {
            display: none; position: fixed; inset: 0; z-index: 210;
            align-items: center; justify-content: center;
            background: #050005; padding: 20px;
        }
        #help-modal.on,
        #about-modal.on { display: flex; }
        #help-modal.leaving,
        #about-modal.leaving { display: flex; animation: fadeOut 0.55s ease forwards; }
        #help-modal-box,
        #about-modal-box {
            background: var(--surface); border: 2px solid var(--accent);
            border-radius: 14px; padding: 26px 22px; max-width: 360px; width: 100%;
            max-height: 80vh; overflow-y: auto;
            text-align: center; display: flex; flex-direction: column; gap: 14px;
            animation: slideUp 0.4s cubic-bezier(.175,.885,.32,1.275);
        }
        #help-modal-title,
        #about-modal-title { font-size: 0.92rem; font-weight: 400; color: var(--accent); font-family: 'Courier New', monospace; letter-spacing: 2px; }
        #about-modal-copy { font-family: 'Courier New', monospace; font-size: 0.82rem; color: var(--text); line-height: 1.65; display: flex; flex-direction: column; gap: 4px; }
        #about-modal-copy .about-tagline { color: var(--yellow); }
        #about-modal-copy strong { color: var(--text); }
        #about-version { color: var(--yellow); font-size: 0.76rem; }
        #about-modal-copy .about-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin-top: 4px; }
        #about-modal-copy .about-links a { color: var(--accent); font-weight: 700; text-decoration: none; }
        #about-modal-copy .about-links a:hover,
        #about-modal-copy .about-links a:focus-visible { color: var(--yellow); text-decoration: underline; }
        .tips-list { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
        .tips-list li { font-size: 0.82rem; color: var(--text); line-height: 1.42; }
        .tips-closer { font-size: 0.72rem; color: var(--yellow); font-style: italic; line-height: 1.38; }

        /* ── SHARE MODAL ── */
        #share-modal {
            display: none; position: fixed; inset: 0; z-index: 150;
            align-items: center; justify-content: center;
            background: rgba(0,0,0,0.85); padding: 16px;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: manipulation;
        }
        #share-modal.on { display: flex; }
        #share-modal.leaving { display: flex; animation: fadeOut 0.55s ease forwards; }
        #share-panel {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 20px; width: 100%; max-width: 480px;
            padding: 24px 20px 36px; display: flex; flex-direction: column;
            gap: 16px; animation: slideUp 0.4s cubic-bezier(.175,.885,.32,1.275);
            max-height: min(84dvh, 720px); overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        #share-panel h3 {
            text-align: center; font-family: 'Courier New', monospace;
            font-size: 0.85rem; letter-spacing: 3px; color: var(--muted);
        }
        .share-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
        .share-btn {
            display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
            background: var(--surface2); border: 1px solid var(--border);
            border-radius: 999px; padding: 8px 12px; min-height: 38px; cursor: pointer;
            font-family: 'Courier New', monospace; font-size: 0.74rem;
            color: var(--text); letter-spacing: 1px; white-space: nowrap; transition: border-color 0.15s, background 0.15s;
        }
        .share-btn:hover { border-color: var(--accent); background: #1a001a; color: var(--text); }
        .share-btn .sicon { font-size: 1rem; line-height: 1; }
        .share-cancel {
            background: transparent; border: 1px solid var(--border);
            color: var(--text); border-radius: 10px; padding: 12px;
            font-family: 'Courier New', monospace; font-size: 0.82rem;
            cursor: pointer; letter-spacing: 1px; transition: border-color 0.15s;
        }
        .share-cancel:hover { border-color: var(--red); color: var(--red); }

        /* ── TOAST ── */
        #toast {
            position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
            background: var(--surface); border: 1px solid var(--accent);
            color: var(--text); font-family: 'Courier New', monospace;
            font-size: 0.82rem; padding: 10px 20px; border-radius: 20px;
            z-index: 300; opacity: 0; pointer-events: none;
            transition: opacity 0.3s; white-space: nowrap;
        }
        #toast.show { opacity: 1; }
        #toast.vault-message {
            width: min(88vw, 420px);
            white-space: normal;
            text-align: center;
            line-height: 1.35;
        }

        /* ── REPLAY LOCK ── */
        #replay-lock {
            display: none; position: fixed; inset: 0; z-index: 90;
            background: var(--bg); align-items: center; justify-content: center;
            flex-direction: column; gap: 20px; text-align: center; padding: 30px;
        }
        #replay-lock.on { display: flex; }
        #replay-lock h2 { font-family: 'Courier New', monospace; color: var(--accent); font-size: 1.1rem; letter-spacing: 3px; }
        #replay-lock p { color: var(--text); font-family: 'Courier New', monospace; font-size: 0.82rem; line-height: 1.8; }
        #replay-lock .replay-lock-links { display: flex; flex-direction: column; gap: 12px; width: min(280px, 100%); }
        #replay-lock .replay-lock-links .action-btn { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }

        #replay-lock .replay-lock-social-heading {
            color: #ffe27a;
            font: 700 0.68rem/1.2 'Courier New', monospace;
            letter-spacing: 0.18em;
            text-shadow: 0 0 12px rgba(255,204,0,0.34);
        }
        #replay-lock .replay-lock-socials {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 9px;
            width: min(460px, 100%);
        }
        #replay-lock .replay-social-btn {
            display: flex;
            min-width: 0;
            min-height: 62px;
            align-items: center;
            gap: 9px;
            padding: 9px 11px;
            border: 1px solid rgba(206,220,255,0.24);
            border-radius: 13px;
            background: linear-gradient(145deg, rgba(50,57,78,0.96), rgba(20,23,36,0.96));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 14px rgba(0,0,0,0.24);
            color: #fff;
            text-align: left;
            text-decoration: none;
            transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
        }
        #replay-lock .replay-social-btn:hover,
        #replay-lock .replay-social-btn:focus-visible {
            transform: translateY(-2px);
            border-color: rgba(255,226,122,0.76);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 20px rgba(0,0,0,0.34), 0 0 14px rgba(255,204,0,0.12);
            outline: none;
        }
        #replay-lock .replay-social-icon {
            display: grid;
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
            place-items: center;
            border-radius: 10px;
            background: rgba(255,255,255,0.12);
            color: #fff;
            font: 800 0.9rem/1 'Segoe UI', sans-serif;
            text-align: center;
        }
        #replay-lock .replay-social-btn.instagram .replay-social-icon { background: linear-gradient(135deg, #7248c9, #e1306c 58%, #ff9a44); }
        #replay-lock .replay-social-btn.facebook .replay-social-icon { background: #1877f2; font-size: 1.35rem; }
        #replay-lock .replay-social-btn.tiktok .replay-social-icon { background: #11151d; color: #fff; text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55; font-size: 1.1rem; }
        #replay-lock .replay-social-btn.youtube .replay-social-icon { background: #ff3038; font-size: 0.85rem; }
        #replay-lock .replay-social-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
        #replay-lock .replay-social-copy strong { font: 800 0.64rem/1 'Courier New', monospace; letter-spacing: 0.08em; }
        #replay-lock .replay-social-copy small { color: #c5cada; font: 600 0.48rem/1.1 'Courier New', monospace; letter-spacing: 0.04em; }

        @media (max-width: 520px), (max-height: 640px) {
            #replay-lock { gap: 13px; padding: 18px max(16px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-bottom)); }
            #replay-lock .replay-lock-links { gap: 8px; }
            #replay-lock .replay-lock-socials { gap: 7px; }
            #replay-lock .replay-social-btn { min-height: 56px; gap: 7px; padding: 7px; }
            #replay-lock .replay-social-icon { flex-basis: 28px; width: 28px; height: 28px; }
            #replay-lock .replay-social-copy strong { font-size: 0.59rem; }
            #replay-lock .replay-social-copy small { font-size: 0.43rem; }
        }

        /* ── DONATE BOX FIX ── */
        #share-nudge {
            max-width: 320px; text-align: center;
            color: var(--muted); line-height: 1.8; padding: 18px 20px;
            border: 1px solid var(--accent); border-radius: 10px;
            display: flex; flex-direction: column; align-items: center; gap: 14px;
        }
        #share-nudge .donate-text { font-size: 1rem; font-family: 'Courier New', monospace; letter-spacing: 1px; line-height: 1.7; }
        #share-nudge b { color: var(--yellow); font-size: 1.05rem; }
        #hint-offer {
            display: none; width: 100%; max-width: 420px;
            text-align: center; padding: 8px 14px;
            font-family: 'Courier New', monospace; font-size: 0.8rem;
            color: var(--yellow); cursor: pointer;
            animation: popIn 0.4s ease;
        }
        #hint-offer.on { display: block; }
        #hint-offer span { text-decoration: underline; }
        #hint-offer-inline {
            min-height: 36px !important;
            height: 36px !important;
            max-height: 36px !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1 !important;
            border: 1px solid rgba(0,0,0,0.68) !important;
            border-radius: 9px !important;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.018) 38%, rgba(0,0,0,0.34) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.18), transparent 54%),
                rgba(28,28,32,0.72) !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.08),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 3px 0 rgba(0,0,0,0.5),
                0 0 12px rgba(255,204,0,0.08) !important;
            text-shadow:
                0 0 5px rgba(0,0,0,0.95),
                0 0 14px rgba(255,204,0,0.32);
            transform: translateY(0);
            transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
            touch-action: manipulation;
            animation: none !important;
        }
        #hint-offer-inline,
        #hint-offer-inline * {
            line-height: 1 !important;
        }
        #hint-offer-inline:active {
            transform: translateY(4px);
            filter: brightness(0.92);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.18),
                inset 0 -5px 12px rgba(0,0,0,0.46),
                0 1px 0 rgba(0,0,0,0.62),
                0 3px 8px rgba(0,0,0,0.20) !important;
        }

        /* ── DICT HINT MODAL ── */
        #hint-offer-inline.solved-banner {
            cursor: default !important;
            color: #f4fbff !important;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            text-shadow:
                0 0 6px rgba(244,251,255,0.72),
                0 0 14px rgba(126,210,255,0.24),
                0 1px 0 rgba(0,0,0,0.88) !important;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018) 38%, rgba(0,0,0,0.38) 100%),
                radial-gradient(circle at 50% 112%, rgba(230,248,255,0.12), transparent 54%),
                rgba(18,24,28,0.78) !important;
        }
        #hint-offer-inline.solved-banner:active {
            transform: none;
            filter: none;
        }
        #hint-offer-inline.typing-banner::after {
            content: "";
            width: 0.62em;
            height: 1.1em;
            margin-left: 3px;
            border-right: 2px solid currentColor;
            animation: hintSolvedCursor 0.72s steps(1, end) infinite;
        }
        @keyframes hintSolvedCursor {
            0%, 48% { opacity: 1; }
            49%, 100% { opacity: 0; }
        }

        #dict-hint-modal {
            display: none; position: fixed; inset: 0; z-index: 81;
            align-items: center; justify-content: center;
            background: var(--modal-bg); padding: 20px;
        }
        #dict-hint-modal.on { display: flex; }
        #dict-hint-modal.leaving { display: flex; animation: fadeOut 0.55s ease forwards; }
        #dict-hint-modal-box {
            background: var(--surface); border: 2px solid var(--accent);
            border-radius: 14px; padding: 24px 20px; max-width: 340px; width: 100%;
            text-align: center; display: flex; flex-direction: column; gap: 14px;
            animation: slideUp 0.4s cubic-bezier(.175,.885,.32,1.275);
        }
        #dict-hint-title { font-size: 0.9rem; font-weight: 400; color: var(--accent); font-family: 'Courier New', monospace; letter-spacing: 2px; line-height: 1.5; }
        #dict-hint-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
        .dict-word-chip {
            background: var(--surface2); border: 1px solid var(--border);
            border-radius: 6px; padding: 8px 14px;
            font-family: 'Courier New', monospace; font-size: 1.1rem;
            font-weight: 400; color: var(--text); letter-spacing: 3px;
            filter: blur(6px); transition: filter 0.5s ease;
            user-select: none;
        }
        .dict-word-chip.revealed { filter: blur(0); }
        .emoji-hint-preview {
            min-width: 140px;
            padding: 12px 16px;
            border-radius: 8px;
            background: var(--surface2);
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .emoji-hint-preview-icon {
            font-size: clamp(3rem, 16vw, 4.8rem);
            line-height: 1;
            filter: blur(12px);
            transition: filter 0.5s ease;
        }
        .emoji-hint-preview.revealed .emoji-hint-preview-icon {
            filter: blur(0);
        }
        .emoji-hint-preview-label {
            color: var(--yellow);
            font-family: 'Courier New', monospace;
            font-size: 0.72rem;
            line-height: 1.15;
            letter-spacing: 1px;
            text-transform: uppercase;
            filter: blur(5px);
            transition: filter 0.5s ease;
        }
        .emoji-hint-preview.revealed .emoji-hint-preview-label {
            filter: blur(0);
        }
        #dict-hint-cost { font-size: 0.72rem; color: var(--muted); font-family: 'Courier New', monospace; }
        #dict-hint-accept-row { display: flex; gap: 10px; justify-content: center; }
        #dict-hint-accept-row.hidden { display: none; }
        #dict-hint-close-row { display: none; justify-content: center; }
        #dict-hint-close-row.visible { display: flex; }
        #clue-dict-hint {
            cursor: pointer; font-size: 1.2rem;
            opacity: 0.45; transition: opacity 0.2s;
            display: none;
            animation: hintPulse 2.5s ease-in-out infinite;
        }
        #clue-dict-hint:hover { opacity: 1; }
        #clue-dict-hint.on { display: inline; }
        #clue-dict-hint.emoji-hint-revealed {
            opacity: 1;
            font-size: 1.5rem;
            filter: drop-shadow(0 0 7px rgba(255,204,0,0.52));
            animation: emojiHintPulse 1.45s ease-in-out infinite;
        }
        @keyframes hintPulse {
            0%, 100% { opacity: 0.45; transform: scale(1); }
            50% { opacity: 0.9; transform: scale(1.2); }
        }
        @keyframes emojiHintPulse {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255,204,0,0.42)); }
            50% { transform: scale(1.18); filter: drop-shadow(0 0 12px rgba(255,204,0,0.78)); }
        }
        #hint-modal {
            display: none; position: fixed; inset: 0; z-index: 80;
            align-items: center; justify-content: center;
            background: var(--modal-bg); padding: 20px;
        }
        #hint-modal.on { display: flex; }
        #hint-modal.leaving { display: flex; animation: fadeOut 0.55s ease forwards; }
        #hint-modal-box {
            background: var(--surface); border: 2px solid var(--yellow);
            border-radius: 14px; padding: 28px 24px; max-width: 340px; width: 100%;
            text-align: center; display: flex; flex-direction: column; gap: 16px;
            animation: slideUp 0.4s cubic-bezier(.175,.885,.32,1.275);
        }
        #hint-modal-title { font-size: 1rem; font-weight: 400; color: var(--yellow); font-family: 'Courier New', monospace; letter-spacing: 2px; }
        #hint-modal-text  { font-size: 0.9rem; color: var(--text); line-height: 1.6; font-style: italic; }
        #hint-modal-cost  { font-size: 0.75rem; color: var(--muted); font-family: 'Courier New', monospace; }
        .hint-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: 100%; }
        .hint-btn-yes,
        .hint-btn-no,
        .got-it-btn,
        .emoji-gotit-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            max-width: 100%;
            min-height: 42px;
            border-radius: 8px;
            padding: 10px 22px;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: 1px;
            text-align: center;
            white-space: normal;
            overflow-wrap: anywhere;
            cursor: pointer;
        }
        .hint-btn-yes { background: var(--yellow); color: #000; border: none; }
        .hint-btn-no  { background: transparent; color: var(--muted); border: 1px solid var(--border); font-weight: 400; }
        #status-panel {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            align-items: stretch;
            box-sizing: border-box;
            scrollbar-width: none;
            perspective: 700px;
        }
        #status-panel::-webkit-scrollbar { display: none; }
        #status-panel.phase3-handoff {
            grid-template-columns: 1fr;
            justify-items: center;
            padding-left: 0;
            padding-right: 0;
            border-color: transparent;
            background: transparent;
            box-shadow: none;
        }
        #status-panel.phase3-handoff .sbox {
            width: min(100%, 328px);
            max-width: 328px;
        }
        #status-panel.phase3-handoff .sbox:not(:nth-child(2)) {
            display: none;
        }
        .sbox {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            box-sizing: border-box;
            min-width: 0; width: 100%;
            height: 100%;
            gap: 2px;
            position: relative;
            transform-origin: center top;
            backface-visibility: hidden;
        }
        .sbox::before {
            content: "";
            position: absolute;
            z-index: 0;
            pointer-events: none;
        }
        .sbox.dead {
            animation: none;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 35%, rgba(0,0,0,0.36) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,255,255,0.10), transparent 55%),
                rgba(34,34,38,0.88);
            border-color: rgba(255,255,255,0.12);
            opacity: 0.92;
        }
        .sbox.dead::before {
            content: "";
            width: 74%;
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04));
            box-shadow: 0 13px 18px rgba(255,204,0,0.05);
        }
        .sbox-ltr { font-weight: 400; font-size: 0.82rem; color: var(--yellow); font-family: 'Courier New', monospace; letter-spacing: 1px; line-height: 1; }
        .sbox-ltr.done { color: var(--correct); }
        .sbox-emojis { display: flex; gap: 4px; font-size: 1.08rem; line-height: 1; }
        .sbox.reeling .sbox-ltr,
        .sbox.reeling .sbox-emojis {
            animation: slotContentSettle 1.22s ease both;
        }
        .sbox-reel {
            position: absolute;
            inset: 5px 8px;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 6px;
            pointer-events: none;
            animation: slotReelHide 1.18s ease both;
        }
        .sbox-reel-track {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            font-size: 1.35rem;
            line-height: 1;
            animation: slotReelSpin 1.08s cubic-bezier(.12,.7,.18,1) both;
            filter: blur(0.2px);
        }
        .sem.out { opacity: 0.18; text-decoration: line-through; }
        .sem.win { font-size: 1.3rem; }
        .sbox.choice-monitor {
            cursor: pointer;
            color: var(--text);
            transition: filter 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
        }
        .sbox.choice-monitor .choice-emoji,
        .sbox.choice-monitor .choice-label {
            animation: crtChoiceContentIn 0.92s cubic-bezier(0.18, 0.86, 0.2, 1) both;
        }
        .sbox.choice-monitor .choice-label {
            animation-delay: 0.08s;
        }
        .sbox.choice-monitor:hover:not(:disabled) {
            filter: brightness(1.12);
            border-color: rgba(255,204,0,0.58);
        }
        .sbox.choice-monitor:disabled {
            cursor: default;
        }
        .sbox.choice-monitor.miss {
            filter: brightness(0.84) saturate(1.05);
        }
        .sbox.choice-monitor.hit .choice-emoji,
        .sbox.choice-monitor.hit .choice-label {
            animation: crtInternalHit 0.72s steps(4,end) both;
        }
        .sbox.choice-monitor.miss .choice-emoji,
        .sbox.choice-monitor.miss .choice-label {
            animation: crtInternalMiss 0.72s steps(4,end) both;
        }
        .choice-emoji {
            font-size: clamp(1.48rem, 5.8vw, 2.05rem);
            line-height: 1;
            filter: drop-shadow(0 2px 2px rgba(0,0,0,0.48));
        }
        .choice-label {
            max-width: 100%;
            color: var(--yellow);
            font-family: 'Courier New', monospace;
            font-size: clamp(0.52rem, 1.9vw, 0.66rem);
            line-height: 1;
            letter-spacing: 0.6px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 0 6px rgba(0,0,0,0.9);
        }
        .choice-monitor.hit .choice-label { color: #62ff79; }
        .choice-monitor.miss .choice-label { color: #ff8fa0; }
        .naughty-console {
            justify-content: center;
        }
        .naughty-console .choice-emoji {
            font-size: clamp(1.35rem, 5.2vw, 1.85rem);
        }
        .naughty-console .naughty-final-emoji {
            animation: none;
            filter: drop-shadow(0 0 12px rgba(255,75,174,0.72)) drop-shadow(0 2px 2px rgba(0,0,0,0.5));
        }
        .naughty-console .choice-label {
            display: none;
        }
        @keyframes naughtyEmojiBounce {
            0%, 100% { transform: translateY(0) scale(1); }
            42% { transform: translateY(-5px) scale(1.08); }
            64% { transform: translateY(1px) scale(0.98); }
        }
        @keyframes crtInternalHit {
            0%, 100% { filter: brightness(1); }
            25% { filter: brightness(1.32) saturate(1.16); }
            50% { filter: brightness(0.88) saturate(1.05); }
            75% { filter: brightness(1.18) saturate(1.1); }
        }
        @keyframes crtInternalMiss {
            0%, 100% { filter: brightness(0.84) saturate(1.05); }
            25% { filter: brightness(1.08) saturate(1.2); }
            50% { filter: brightness(0.68) saturate(0.9); }
            75% { filter: brightness(0.96) saturate(1.1); }
        }
        @keyframes crtChoiceContentIn {
            0% { opacity: 0; transform: translateY(-14px) scale(0.96); filter: blur(1.2px) brightness(1.34); }
            28% { opacity: 1; transform: translateY(4px) scale(1.015); filter: blur(0.55px) brightness(1.08); }
            58% { transform: translateY(-1.5px) scale(1.006); filter: blur(0.2px) brightness(1.04); }
            100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
        }
        @keyframes slotCardFlipIn {
            0% {
                opacity: 0;
                transform: perspective(700px) rotateX(-82deg) translateY(-8px) scale(0.96);
                filter: brightness(1.35);
            }
            48% {
                opacity: 1;
                transform: perspective(700px) rotateX(16deg) translateY(1px) scale(1.01);
                filter: brightness(1.08);
            }
            100% {
                opacity: 1;
                transform: perspective(700px) rotateX(0deg) translateY(0) scale(1);
                filter: brightness(1);
            }
        }
        @keyframes slotContentSettle {
            0%, 68% { opacity: 0; transform: translateY(6px); filter: blur(1px); }
            100% { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
        @keyframes slotReelSpin {
            0% { transform: translateY(34px); opacity: 0; filter: blur(1px); }
            12% { opacity: 1; }
            100% { transform: translateY(-118px); opacity: 1; filter: blur(0); }
        }
        @keyframes slotReelHide {
            0%, 78% { opacity: 1; }
            100% { opacity: 0; }
        }

        /* ── SCORE ── */
        #slot-machine {
            position: relative;
            width: 100%;
            max-width: 432px;
            padding: 9px 8px 11px;
            border: 1px solid rgba(255,204,0,0.28);
            border-radius: 12px;
            background:
                linear-gradient(90deg, rgba(255,204,0,0.12), transparent 10%, transparent 90%, rgba(255,204,0,0.12)),
                linear-gradient(180deg, rgba(255,255,255,0.08), rgba(10,10,10,0.18)),
                rgba(18, 8, 22, 0.38);
            box-shadow:
                inset 0 0 16px rgba(255,255,255,0.05),
                inset 0 0 30px rgba(191,90,242,0.12),
                0 0 14px rgba(191,90,242,0.12);
            overflow: hidden;
        }
        #slot-machine::before,
        #slot-machine::after {
            content: "";
            position: absolute;
            top: 9px;
            bottom: 11px;
            width: 5px;
            border-radius: 999px;
            background:
                linear-gradient(180deg, rgba(255,239,160,0.78), rgba(255,204,0,0.18), rgba(191,90,242,0.38));
            opacity: 0.72;
            pointer-events: none;
        }
        #slot-machine::before { left: 4px; }
        #slot-machine::after { right: 4px; }
        #score-bar { position: relative; z-index: 9; display: flex; gap: 10px; width: 100%; max-width: 420px; font-family: 'Courier New', monospace; }
        .score-side {
            flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
            padding: 8px 10px; border-radius: 10px; font-size: 0.85rem; border: 1px solid;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.18),
                inset 0 -8px 14px rgba(0,0,0,0.24),
                0 2px 0 rgba(0,0,0,0.44);
        }
        .score-side .score-label { font-size: 0.68rem; letter-spacing: 1px; opacity: 1; font-weight: 400; }
        .score-side .score-amt { display: flex; align-items: center; gap: 4px; }
        .score-side .score-amt b { font-size: 1rem; }
        .score-you   {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 40%, rgba(0,0,0,0.22)),
                rgba(191,90,242,0.16);
            border-color: rgba(191,90,242,0.62); color: var(--accent);
        }
        .score-you b { color: var(--text); }
        .score-house {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 40%, rgba(0,0,0,0.22)),
                rgba(236,10,187,0.10);
            border-color: rgba(236,10,187,0.58); color: var(--red);
        }
        .score-house b { color: var(--red); }
        @keyframes scoreLightUp {
            0%, 100% {
                filter: brightness(1);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.18),
                    inset 0 -8px 14px rgba(0,0,0,0.24),
                    inset 0 0 0 rgba(255,204,0,0),
                    0 2px 0 rgba(0,0,0,0.44);
            }
            28% {
                filter: brightness(1.28);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.28),
                    inset 0 -8px 14px rgba(0,0,0,0.24),
                    inset 0 0 22px currentColor,
                    0 2px 0 rgba(0,0,0,0.44);
            }
            56% {
                filter: brightness(0.88);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.14),
                    inset 0 -8px 14px rgba(0,0,0,0.28),
                    inset 0 0 10px currentColor,
                    0 2px 0 rgba(0,0,0,0.44);
            }
        }
        .score-side.flash { animation: scoreLightUp 0.72s steps(4,end); }
        @keyframes coinSpin {
            0%, 100% { opacity: 1; filter: brightness(1); }
            25% { opacity: 0.38; filter: brightness(1.45); }
            50% { opacity: 1; filter: brightness(0.82); }
            75% { opacity: 0.58; filter: brightness(1.25); }
        }
        .coin-emoji.spin { display: inline-block; animation: coinSpin 0.58s steps(4,end); }

        /* ── BOARD ── */
        #board-wrap {
            width: 100%; max-width: 420px;
            height: calc(clamp(48px, 13vw, 70px) * 3 + 12px);
            overflow: hidden; position: relative;
            margin-top: 6px;
            border: none;
            border-radius: 10px;
            background:
                radial-gradient(circle at 50% 0%, rgba(255,255,255,0.06), transparent 42%),
                rgba(0,0,0,0.22);
            box-shadow:
                inset 0 0 18px rgba(0,0,0,0.48),
                inset 0 0 24px rgba(191,90,242,0.1);
        }
        #board-wrap::before,
        #board-wrap::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 6;
            opacity: 0;
            pointer-events: none;
        }
        #board-wrap::before {
            background:
                repeating-linear-gradient(90deg,
                    transparent 0 17px,
                    rgba(98,255,121,0.18) 18px 19px,
                    transparent 20px 37px),
                linear-gradient(180deg,
                    transparent 0%,
                    rgba(98,255,121,0.26) 42%,
                    rgba(255,255,255,0.55) 50%,
                    rgba(255,75,174,0.22) 58%,
                    transparent 100%);
            transform: translateY(-112%);
            mix-blend-mode: screen;
        }
        #board-wrap::after {
            background:
                radial-gradient(circle at 18% 26%, rgba(255,255,255,0.9) 0 1px, transparent 2px),
                radial-gradient(circle at 42% 64%, rgba(98,255,121,0.78) 0 1px, transparent 2px),
                radial-gradient(circle at 73% 34%, rgba(255,75,174,0.72) 0 1px, transparent 2px),
                radial-gradient(circle at 88% 76%, rgba(255,255,255,0.8) 0 1px, transparent 2px);
            background-size: 42px 42px, 58px 58px, 64px 64px, 46px 46px;
            filter: blur(0.2px);
            transform: scaleY(0.18);
        }
        #board-wrap.board-teleport-in {
            animation: boardTransportShell 2.65s linear both;
        }
        #board-wrap.board-teleport-in::before {
            animation: none !important;
            opacity: 0 !important;
        }
        #board-wrap.board-teleport-in::after {
            animation: none !important;
            opacity: 0 !important;
        }
        #board-wrap.board-teleport-in .tile {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }
        #board-wrap.phase3 {
            max-width: 420px;
            height: auto;
        }
        #board-wrap.board-mech-hide .tile {
            animation: tileMechHide 1.2s cubic-bezier(.2,.8,.18,1) both;
        }
        #board-wrap.board-mech-show:not(.board-teleport-in) .tile {
            animation: tileMechShow 1.45s cubic-bezier(.16,1,.3,1) both;
        }
        #board-wrap.board-mech-show:not(.board-teleport-in) .row:nth-child(2) .tile { animation-delay: 0.12s; }
        #board-wrap.board-mech-show:not(.board-teleport-in) .row:nth-child(3) .tile { animation-delay: 0.24s; }
        #board-wrap.board-mech-hide .row:nth-child(2) .tile { animation-delay: 0.08s; }
        #board-wrap.board-mech-hide .row:nth-child(3) .tile { animation-delay: 0.16s; }
        @keyframes tileMechHide {
            0% { transform: rotateX(0) translateY(0) scale(1); opacity: 1; filter: brightness(1); }
            38% { transform: rotateX(72deg) translateY(2px) scaleY(0.62); opacity: 0.9; filter: brightness(1.22); }
            100% { transform: rotateX(92deg) translateY(-8px) scaleY(0.42); opacity: 0; filter: brightness(0.7); }
        }
        @keyframes tileMechShow {
            0% { transform: rotateX(-92deg) translateY(10px) scaleY(0.42); opacity: 0; filter: brightness(0.78); }
            48% { transform: rotateX(14deg) translateY(-1px) scaleY(1.04); opacity: 1; filter: brightness(1.18); }
            74% { transform: rotateX(-5deg) translateY(0) scaleY(0.99); }
            100% { transform: rotateX(0) translateY(0) scaleY(1); opacity: 1; filter: brightness(1); }
        }
        @keyframes boardTransportShell {
            0% { opacity: 0; transform: translateY(-10px); filter: brightness(1.85) saturate(1.35) blur(1.2px); }
            30% { opacity: 0.52; transform: translateY(-5px); filter: brightness(1.55) saturate(1.28) blur(0.72px); }
            62% { opacity: 0.88; transform: translateY(-1px); filter: brightness(1.22) saturate(1.12) blur(0.22px); }
            86% { opacity: 1; transform: translateY(0); filter: brightness(1.07) saturate(1.04) blur(0.06px); }
            100% { opacity: 1; transform: translateY(0); filter: brightness(1) saturate(1) blur(0); }
        }
        @keyframes consoleTransportShell {
            0% {
                opacity: 0;
                transform: translateY(-10px);
                filter: brightness(2) saturate(1.42) blur(1.2px);
                box-shadow:
                    inset 0 0 24px rgba(98,255,121,0.22),
                    inset 0 0 34px rgba(255,75,174,0.14),
                    0 0 0 rgba(98,255,121,0);
            }
            24% {
                opacity: 0.48;
                transform: translateY(-6px);
                filter: brightness(1.78) saturate(1.34) blur(0.8px);
                box-shadow:
                    inset 0 0 30px rgba(98,255,121,0.24),
                    inset 0 0 44px rgba(255,75,174,0.18),
                    0 0 22px rgba(98,255,121,0.14);
            }
            58% {
                opacity: 1;
                transform: translateY(0);
                filter: brightness(1.25) saturate(1.14) blur(0.15px);
                box-shadow:
                    inset 0 0 26px rgba(98,255,121,0.18),
                    inset 0 0 38px rgba(255,75,174,0.14),
                    0 0 22px rgba(98,255,121,0.12);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
                filter: brightness(1) saturate(1) blur(0);
            }
        }
        @keyframes consoleTransportPartIn {
            0% { opacity: 0; transform: translateY(-14px); filter: brightness(1.8) blur(1px); }
            25% { opacity: 0.34; transform: translateY(-9px); filter: brightness(1.58) blur(0.7px); }
            55% { opacity: 0.78; transform: translateY(-3px); filter: brightness(1.3) blur(0.28px); }
            82% { opacity: 1; transform: translateY(0); filter: brightness(1.08) blur(0.08px); }
            100% { opacity: 1; transform: translateY(0); filter: brightness(1) blur(0); }
        }
        @keyframes boardTransportBeam {
            0% { opacity: 0; transform: translateY(-118%); filter: blur(1.2px) brightness(1.2); }
            5% { opacity: 0.38; transform: translateY(-105%); filter: blur(0.8px) brightness(1.35); }
            12% { opacity: 0.92; transform: translateY(-88%); filter: blur(0.25px) brightness(1.08); }
            50% { opacity: 0.96; transform: translateY(0%); filter: blur(0.15px) brightness(1); }
            88% { opacity: 0.78; transform: translateY(90%); filter: blur(0.24px) brightness(0.98); }
            96% { opacity: 0.34; transform: translateY(110%); filter: blur(0.65px) brightness(1.14); }
            100% { opacity: 0; transform: translateY(122%); filter: blur(1.1px) brightness(1.28); }
        }
        @keyframes boardTransportSparks {
            0% { opacity: 0; transform: scaleY(0.12) translateY(-4%); filter: blur(0.7px) brightness(1.45); }
            8% { opacity: 0.58; transform: scaleY(0.28) translateY(-2%); filter: blur(0.35px) brightness(1.2); }
            16% { opacity: 1; transform: scaleY(0.42) translateY(-1%); filter: blur(0.16px) brightness(1); }
            52% { opacity: 0.9; transform: scaleY(0.78) translateY(0); filter: blur(0.12px) brightness(1); }
            86% { opacity: 0.7; transform: scaleY(0.98) translateY(1%); filter: blur(0.18px) brightness(1.04); }
            96% { opacity: 0.28; transform: scaleY(1.02) translateY(1%); filter: blur(0.4px) brightness(1.22); }
            100% { opacity: 0; transform: scaleY(1.03) translateY(1%); filter: blur(0.8px) brightness(1.35); }
        }
        @keyframes consoleTransportAfterglow {
            0% { filter: brightness(1.08) saturate(1.04); }
            100% { filter: brightness(1) saturate(1); }
        }
        @keyframes consoleTransportResidualBeam {
            0% { opacity: 0.42; transform: translateY(-8%); filter: blur(0.18px); }
            100% { opacity: 0; transform: translateY(12%); filter: blur(0.85px); }
        }
        @keyframes consoleTransportResidualSparks {
            0% { opacity: 0.46; transform: scaleY(1); filter: blur(0.12px) brightness(1.1); }
            100% { opacity: 0; transform: scaleY(1.02); filter: blur(0.9px) brightness(1.35); }
        }
        @keyframes tileTransportIn {
            0% { opacity: 0; transform: translateY(-28px) scaleY(0.2); filter: brightness(2.3) blur(1.4px); }
            30% { opacity: 0.45; transform: translateY(-12px) scaleY(0.56); filter: brightness(1.9) blur(0.8px); }
            68% { opacity: 1; transform: translateY(0) scaleY(1); filter: brightness(1.22) blur(0.15px); }
            100% { opacity: 1; transform: translateY(0) scaleY(1); filter: brightness(1) blur(0); }
        }
        #game-board { display: flex; flex-direction: column; gap: 6px; width: 100%; }
        .row { display: grid; gap: clamp(3px, 1.2vw, 6px); height: clamp(48px, 13vw, 70px); flex-shrink: 0; }
        .tile {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.18), transparent 54%),
                rgba(28,28,32,0.72);
            border: 1px solid rgba(255,255,255,0.16);
            color: var(--text); font-size: clamp(1.3rem, 5.5vw, 2.2rem); font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            border-radius: 8px; text-transform: uppercase;
            font-family: 'Courier New', monospace; position: relative;
            overflow: hidden;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 3px 0 rgba(0,0,0,0.5),
                0 0 12px rgba(255,204,0,0.08);
            backdrop-filter: blur(1px);
            transition: border-color 0.15s, box-shadow 0.15s, filter 0.15s;
        }
        .tile::before {
            content: '';
            position: absolute;
            left: 10%;
            right: 10%;
            top: 8%;
            height: 24%;
            z-index: 0;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0));
            opacity: 0.55;
            pointer-events: none;
        }
        .tile::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            background: rgba(255,255,255,0.18);
            transform: scaleX(0);
            transform-origin: left center;
            pointer-events: none;
            mix-blend-mode: screen;
        }
        .tile.slide::after {
            animation: tileColorSweep 0.78s ease-out both;
        }
        .tile.typing  {
            border-color: rgba(255,255,255,0.32);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.32),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 3px 0 rgba(0,0,0,0.5),
                0 0 14px rgba(255,204,0,0.14);
        }
        .tile.correct {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 38%, rgba(0,0,0,0.2) 100%),
                radial-gradient(circle at 50% 112%, rgba(111,180,255,0.36), transparent 54%),
                var(--correct);
            border-color: rgba(132,190,255,0.55); color: #fff;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -9px 18px rgba(0,0,0,0.28), 0 3px 0 rgba(0,27,78,0.72), 0 0 14px rgba(0,82,204,0.34);
        }
        .tile.present {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 38%, rgba(0,0,0,0.18) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,239,160,0.52), transparent 54%),
                var(--present);
            border-color: rgba(255,224,104,0.62); color: #000;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -9px 18px rgba(0,0,0,0.2), 0 3px 0 rgba(84,62,0,0.78), 0 0 14px rgba(255,204,0,0.3);
        }
        .tile.absent  {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 38%, rgba(0,0,0,0.28) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,255,255,0.1), transparent 54%),
                var(--absent);
            border-color: rgba(255,255,255,0.12);
        }
        .tile.locked  {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 38%, rgba(0,0,0,0.2) 100%),
                radial-gradient(circle at 50% 112%, rgba(111,180,255,0.36), transparent 54%),
                var(--correct);
            border-color: rgba(20, 8, 187, 0.55); color: #fff;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -9px 18px rgba(0,0,0,0.28), 0 3px 0 rgba(0,27,78,0.72), 0 0 14px rgba(0,82,204,0.34);
        }
        .tile.joker-locked {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(224,160,255,0.42), transparent 56%),
                var(--accent);
            border-color: rgba(224,160,255,0.55); color: #fff;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -9px 18px rgba(0,0,0,0.30), 0 3px 0 rgba(48,0,70,0.72), 0 0 14px rgba(191,90,242,0.34);
        }
        .tile.carried-confirm {
            animation: carriedConfirmPulse 0.34s ease-out both;
        }
        .tile.carried-ghost {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.025) 38%, rgba(0,0,0,0.30) 100%),
                radial-gradient(circle at 50% 112%, rgba(92,174,255,0.16), transparent 54%),
                rgba(22,34,54,0.70);
            border-color: rgba(126,210,255,0.30);
            color: rgba(126,210,255,0.64);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.20),
                inset 0 -9px 18px rgba(0,0,0,0.38),
                0 3px 0 rgba(0,18,48,0.58),
                0 0 13px rgba(82,168,255,0.18);
        }
        .tile.lock-drop { animation: lockDropIn 0.48s cubic-bezier(.16,1,.3,1) both; }
        .corner { display: none; }
        .tile.slide { animation: slideIn 0.45s cubic-bezier(.175,.885,.32,1.275) both; }
        @keyframes slideIn { from { transform: translateY(40%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes carriedConfirmPulse {
            0%   { filter: brightness(1); }
            36%  { filter: brightness(1.34) saturate(1.16); }
            100% { filter: brightness(1); }
        }
        @keyframes tileColorSweep {
            0%   { transform: scaleX(0); opacity: 0.9; }
            65%  { transform: scaleX(1); opacity: 0.18; }
            100% { transform: scaleX(1); opacity: 0; }
        }
        #board-wrap.phase-complete-showcase {
            perspective: 900px;
            animation: none;
        }
        #game-board.phase-complete-showcase {
            gap: 6px;
        }
        .tile.phase-complete-blank,
        .tile.phase-complete-crt,
        .tile.phase-complete-plus,
        .tile.phase-complete-word,
        .tile.phase-complete-gotit {
            transform-style: preserve-3d;
            animation: none;
            animation-delay: calc(var(--pc-i, 0) * 52ms);
            transform: none;
            opacity: 1;
            filter: none;
        }
        .tile.phase-complete-crt {
            animation: none;
        }
        .tile.phase-complete-blank {
            color: transparent;
            border-color: rgba(255,255,255,0.16);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.18), transparent 54%),
                rgba(28,28,32,0.72);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 3px 0 rgba(0,0,0,0.5),
                0 0 12px rgba(255,204,0,0.08);
        }
        .tile.phase-complete-crt {
            border-color: rgba(255,255,255,0.20);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.022) 38%, rgba(0,0,0,0.34) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.10), transparent 54%),
                rgba(15,15,18,0.88);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.20),
                inset 0 -10px 20px rgba(0,0,0,0.48),
                0 0 10px rgba(255,204,0,0.07);
        }
        .tile.phase-complete-crt .phase-complete-emoji {
            display: inline-block;
            font-size: clamp(1.18rem, 4.8vw, 2rem);
            transform-origin: center bottom;
            animation:
                phaseCompleteRewardDrop 0.72s cubic-bezier(.18, .88, .24, 1.16) both,
                phaseCompleteRewardCelebrate 1.85s ease-in-out infinite;
            animation-delay:
                calc(var(--reward-delay, 0ms) + (var(--pc-i, 0) * 24ms)),
                calc(var(--reward-delay, 0ms) + (var(--pc-i, 0) * 24ms) + 0.72s);
            filter: drop-shadow(0 0 9px rgba(255,204,0,0.42));
        }
        .tile.phase-complete-plus {
            color: #62ff79;
            border-color: rgba(98,255,121,0.30);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 38%, rgba(0,0,0,0.28) 100%),
                radial-gradient(circle at 50% 112%, rgba(98,255,121,0.14), transparent 54%),
                rgba(18,22,20,0.68);
            font-family: 'Courier New', monospace;
            font-size: clamp(1.05rem, 4.2vw, 1.72rem);
            font-weight: 900;
            text-shadow:
                0 0 7px rgba(98,255,121,0.56),
                0 0 14px rgba(98,255,121,0.18);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.18),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 0 10px rgba(98,255,121,0.10);
        }
        .tile.phase-complete-word {
            color: #dff3ff;
            border-color: rgba(93,174,255,0.78);
            background:
                linear-gradient(180deg, rgba(120,194,255,0.20), rgba(0,82,204,0.40) 48%, rgba(0,22,64,0.86)),
                radial-gradient(circle at 50% 112%, rgba(93,174,255,0.45), transparent 58%),
                #004cae;
            font-size: clamp(1.38rem, 5.8vw, 2.35rem);
            text-shadow:
                0 0 8px rgba(208,241,255,0.95),
                0 0 18px rgba(93,174,255,0.82),
                0 0 30px rgba(0,82,204,0.78);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.34),
                inset 0 -9px 18px rgba(0,0,0,0.24),
                0 0 18px rgba(93,174,255,0.58);
        }
        .tile.phase-complete-word.joker-locked {
            color: #fff3ff;
            border-color: rgba(224,160,255,0.55);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.20), rgba(191,90,242,0.42) 48%, rgba(48,0,70,0.86)),
                radial-gradient(circle at 50% 112%, rgba(224,160,255,0.48), transparent 58%),
                var(--accent);
            text-shadow:
                0 0 8px rgba(255,236,255,0.95),
                0 0 18px rgba(224,160,255,0.82),
                0 0 30px rgba(191,90,242,0.72);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.34),
                inset 0 -9px 18px rgba(0,0,0,0.26),
                0 0 18px rgba(191,90,242,0.54);
        }
        .tile.phase-complete-word .phase-complete-letter {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transform: translateZ(0);
            animation-name: phaseCompleteWordTextWake, phaseCompleteWordGlow;
            animation-duration: 0.56s, 1.1s;
            animation-timing-function: steps(3, end), ease-in-out;
            animation-fill-mode: both, both;
            animation-iteration-count: 1, infinite;
            animation-delay: calc(var(--pc-i, 0) * 52ms), 0.86s;
        }
        .tile.phase-complete-word.joker-locked .phase-complete-letter {
            animation-name: phaseCompleteJokerWordTextWake, phaseCompleteJokerWordGlow;
        }
        .tile.phase-complete-gotit {
            cursor: pointer;
            color: #62ff79;
            border-color: rgba(98,255,121,0.52);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(98,255,121,0.24), transparent 54%),
                rgba(28,28,32,0.72);
            font-size: clamp(0.62rem, 2.4vw, 0.86rem);
            letter-spacing: 1px;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            text-shadow:
                0 0 5px rgba(98,255,121,0.74),
                0 0 12px rgba(98,255,121,0.28);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 0 18px rgba(98,255,121,0.24);
            animation-name: phaseCompleteWordTextWake, readyPromptBlink;
            animation-duration: 0.56s, 1.05s;
            animation-timing-function: steps(3, end), ease-in-out;
            animation-fill-mode: both, both;
            animation-iteration-count: 1, infinite;
            animation-delay: calc(var(--pc-i, 0) * 52ms), 0.95s;
        }
        .tile.phase-complete-blank::before,
        .tile.phase-complete-crt::before,
        .tile.phase-complete-word::before,
        .tile.phase-complete-gotit::before {
            opacity: 0.18;
        }
        .tile.phase-complete-word::after {
            opacity: 0.22;
            animation: phaseCompleteCrtScreenWake 0.72s steps(4, end) both;
            animation-delay: calc(var(--pc-i, 0) * 42ms);
        }
        @keyframes phaseCompleteBoardFlip {
            0%, 100% { transform: none; filter: none; }
        }
        @keyframes phaseCompleteTileFlip {
            0%, 100% { transform: none; opacity: 1; filter: none; }
        }
        @keyframes phaseCompleteRewardDrop {
            0% {
                opacity: 0;
                transform: translate3d(var(--reward-drift, 0px), -128%, 0) rotate(var(--reward-tilt, 0deg)) scale(0.82);
                filter: blur(0.9px) brightness(0.82) saturate(0.9);
            }
            48% {
                opacity: 1;
                transform: translate3d(0, 12%, 0) rotate(calc(var(--reward-tilt, 0deg) * -0.55)) scale(1.08);
                filter: blur(0.18px) brightness(1.24) saturate(1.08);
            }
            66% {
                transform: translate3d(0, -8%, 0) rotate(calc(var(--reward-tilt, 0deg) * 0.22)) scale(0.98);
                filter: blur(0) brightness(1.08) saturate(1.04);
            }
            82% {
                transform: translate3d(0, 4%, 0) rotate(0deg) scale(1.02);
            }
            100% {
                opacity: 0.94;
                transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
                filter: blur(0) brightness(1) saturate(1);
            }
        }
        @keyframes phaseCompleteRewardCelebrate {
            0%, 100% {
                transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
                filter: brightness(1) saturate(1);
            }
            28% {
                transform: translate3d(0, -5%, 0) rotate(calc(var(--reward-tilt, 0deg) * 0.18)) scale(1.035);
                filter: brightness(1.16) saturate(1.12);
            }
            58% {
                transform: translate3d(0, 2%, 0) rotate(calc(var(--reward-tilt, 0deg) * -0.12)) scale(0.99);
                filter: brightness(1.04) saturate(1.04);
            }
        }
        @keyframes phaseCompleteCrtScreenWake {
            0% { opacity: 0.08; transform: translateY(-100%); }
            22% { opacity: 0.62; transform: translateY(-18%); }
            52% { opacity: 0.36; transform: translateY(18%); }
            100% { opacity: 0.28; transform: translateY(100%); }
        }
        @keyframes phaseCompleteWordTextWake {
            0% {
                text-shadow: 0 0 2px rgba(93,174,255,0.18);
            }
            42% {
                text-shadow:
                    0 0 10px rgba(208,241,255,1),
                    0 0 24px rgba(93,174,255,0.9);
            }
            100% {
                text-shadow:
                    0 0 8px rgba(208,241,255,0.95),
                    0 0 18px rgba(93,174,255,0.82),
                    0 0 30px rgba(0,82,204,0.78);
            }
        }
        @keyframes phaseCompleteCrtFadeIn {
            0%, 100% { opacity: 1; filter: none; transform: none; }
        }
        #status-panel.phase-ready-flip-out .sbox {
            transform-origin: center bottom;
            animation: phaseReadyCrtFadeOut 0.34s ease both !important;
        }
        #status-panel.phase-ready-flip-out .sbox:nth-child(2) {
            animation-delay: 35ms !important;
        }
        #status-panel.phase-ready-flip-out .sbox:nth-child(3) {
            animation-delay: 70ms !important;
        }
        @keyframes phaseReadyCrtFlipOut {
            0% { transform: rotateX(0deg) translateY(0); opacity: 1; filter: brightness(1); }
            58% { transform: rotateX(-72deg) translateY(5px) scaleY(0.72); opacity: 0.82; filter: brightness(1.28); }
            100% { transform: rotateX(-92deg) translateY(10px) scaleY(0.56); opacity: 0; filter: brightness(0.72); }
        }
        @keyframes phaseReadyCrtFadeOut {
            0% { transform: translateY(0); opacity: 1; filter: brightness(1); }
            58% { transform: translateY(1px); opacity: 0.72; filter: brightness(1.18); }
            100% { transform: translateY(2px); opacity: 0; filter: brightness(0.82); }
        }
        @keyframes phaseCompleteEmojiSpin {
            0%, 100% { transform: translate3d(0, 0, 0); }
        }
        @keyframes phaseCompleteWordGlow {
            0%, 100% {
                text-shadow:
                    0 0 8px rgba(208,241,255,0.95),
                    0 0 18px rgba(93,174,255,0.82),
                    0 0 30px rgba(0,82,204,0.78);
            }
            50% {
                text-shadow:
                    0 0 11px rgba(232,248,255,1),
                    0 0 25px rgba(93,174,255,0.94),
                    0 0 38px rgba(0,82,204,0.82);
            }
        }
        @keyframes phaseCompleteJokerWordTextWake {
            0% {
                text-shadow: 0 0 2px rgba(224,160,255,0.18);
            }
            42% {
                text-shadow:
                    0 0 10px rgba(255,236,255,1),
                    0 0 24px rgba(224,160,255,0.9);
            }
            100% {
                text-shadow:
                    0 0 8px rgba(255,236,255,0.95),
                    0 0 18px rgba(224,160,255,0.82),
                    0 0 30px rgba(191,90,242,0.72);
            }
        }
        @keyframes phaseCompleteJokerWordGlow {
            0%, 100% {
                text-shadow:
                    0 0 8px rgba(255,236,255,0.95),
                    0 0 18px rgba(224,160,255,0.82),
                    0 0 30px rgba(191,90,242,0.72);
            }
            50% {
                text-shadow:
                    0 0 11px rgba(255,246,255,1),
                    0 0 25px rgba(224,160,255,0.94),
                    0 0 38px rgba(191,90,242,0.78);
            }
        }
#game-board.magic-complete-showcase .magic-win-glow-row,
#game-board.magic-complete-showcase .magic-win-word-row {
    position: relative;
    isolation: isolate;
    /* Phase 3 must remain a tile grid, not a rounded three-cell slab. */
    overflow: visible;
    border-radius: 0;
}

        #game-board.magic-complete-showcase .magic-win-glow-row::before {
            content: none;
        }

        #game-board.magic-complete-showcase .tile {
            position: relative;
            z-index: 1;
        }

        #game-board.magic-complete-showcase .magic-rainbow-cell,
        #game-board.magic-complete-showcase .magic-win-word-row .phase-complete-blank {
            color: transparent !important;
            border-color: transparent !important;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025) 40%, rgba(0,0,0,0.34)),
                rgba(14,12,24,0.82) !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.16),
                inset 0 -9px 16px rgba(0,0,0,0.46),
                0 0 8px rgba(255,255,255,0.035) !important;
        }

        #game-board.magic-complete-showcase .magic-rainbow-cell {
            color: #2b073f !important;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 40%, rgba(0,0,0,0.42)),
                linear-gradient(90deg,
                    rgba(255,82,203,0.48),
                    rgba(89,168,255,0.50),
                    rgba(98,255,121,0.44),
                    rgba(255,218,74,0.48),
                    rgba(255,126,70,0.44),
                    rgba(190,112,255,0.50),
                    rgba(255,82,203,0.48)) !important;
            background-size: 100% 100%, var(--rainbow-line-width, 900px) 100% !important;
            background-position: 0 0, var(--rainbow-line-x, 0px) 50% !important;
            animation: magicWinTileRainbowPulse 1.3s steps(4, end) infinite;
            font-family: 'Courier New', monospace;
            font-size: clamp(0.76rem, 3.05vw, 1.08rem);
            font-weight: 800;
            letter-spacing: 0;
            line-height: 1;
            text-shadow:
                0 1px 0 rgba(255,255,255,0.20),
                0 0 5px rgba(43,7,63,0.34);
        }

        @media (min-width: 700px) {
            #game-board.magic-complete-showcase .magic-rainbow-cell {
                font-size: clamp(1.2rem, 2vw, 1.62rem);
            }
        }

        @keyframes magicWinRainbowFlush {
            0% { background-position: 0% 50%; filter: brightness(1.02) saturate(1.18); }
            50% { background-position: 100% 50%; filter: brightness(1.22) saturate(1.42); }
            100% { background-position: 0% 50%; filter: brightness(1.02) saturate(1.18); }
        }
        @keyframes magicWinTileRainbowPulse {
            0%, 100% { filter: brightness(0.86) saturate(1.05); }
            50% { filter: brightness(1.04) saturate(1.22); }
        }
        #capture-zone.capture-stable #board-wrap.phase-complete-showcase,
        #capture-zone.capture-stable .tile.phase-complete-blank,
        #capture-zone.capture-stable .tile.phase-complete-crt,
        #capture-zone.capture-stable .tile.phase-complete-plus,
        #capture-zone.capture-stable .tile.phase-complete-word,
        #capture-zone.capture-stable .tile.phase-complete-gotit,
        #capture-zone.capture-stable .tile.phase-complete-crt .phase-complete-emoji {
            animation: none !important;
        }
        @keyframes phaseCompleteTremor {
            0%, 100% { transform: translate3d(0, 0, 0); }
            6% { transform: translate3d(-2px, 1px, 0); }
            12% { transform: translate3d(3px, -1px, 0); }
            18% { transform: translate3d(-3px, 2px, 0); }
            24% { transform: translate3d(2px, -2px, 0); }
            30% { transform: translate3d(-1px, 1px, 0); }
            38% { transform: translate3d(1px, 0, 0); }
            48% { transform: translate3d(0, 0, 0); }
        }
        @keyframes phaseBoardGlow {
            0%, 100% { filter: drop-shadow(0 0 0 rgba(191,90,242,0)); }
            20% { filter: drop-shadow(0 0 14px rgba(255,204,0,0.35)); }
            46% { filter: drop-shadow(0 0 22px rgba(191,90,242,0.42)); }
            76% { filter: drop-shadow(0 0 18px rgba(191,90,242,0.26)); }
        }
        @keyframes phase3SwapOut {
            0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
            100% { opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(1px); }
        }
        @keyframes phase3SwapIn {
            0% { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(1px); }
            58% { opacity: 1; transform: translateY(-2px) scale(1.002); filter: blur(0); }
            100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }
        @keyframes phase3PresentationGlow {
            0% { filter: drop-shadow(0 0 0 rgba(230,248,255,0)); }
            18% { filter: drop-shadow(0 0 14px rgba(230,248,255,0.30)); }
            46% { filter: drop-shadow(0 0 28px rgba(210,242,255,0.42)) drop-shadow(0 0 44px rgba(126,210,255,0.18)); }
            72% { filter: drop-shadow(0 0 18px rgba(230,248,255,0.22)); }
            100% { filter: drop-shadow(0 0 0 rgba(230,248,255,0)); }
        }
        @keyframes phase3ClueGlow {
            0% { filter: brightness(1) saturate(1); }
            42% { filter: brightness(1.16) saturate(1.12); }
            100% { filter: brightness(1) saturate(1); }
        }
        @keyframes phase3BannerPresent {
            0% { box-shadow: inset 0 0 18px rgba(255,255,255,0.04), 0 0 18px rgba(126,210,255,0.12); }
            48% { box-shadow: inset 0 0 24px rgba(255,255,255,0.10), 0 0 26px rgba(230,248,255,0.20), 0 0 34px rgba(126,210,255,0.20); }
            100% { box-shadow: inset 0 0 18px rgba(255,255,255,0.04), 0 0 18px rgba(126,210,255,0.12); }
        }
        @keyframes phase1PresentationGlow {
            0% { filter: drop-shadow(0 0 0 rgba(230,248,255,0)); }
            18% { filter: drop-shadow(0 0 12px rgba(230,248,255,0.28)); }
            48% { filter: drop-shadow(0 0 22px rgba(210,242,255,0.38)) drop-shadow(0 0 36px rgba(126,210,255,0.18)); }
            76% { filter: drop-shadow(0 0 14px rgba(230,248,255,0.20)); }
            100% { filter: drop-shadow(0 0 0 rgba(230,248,255,0)); }
        }
        @keyframes phase1BannerPresent {
            0% { box-shadow: inset 0 0 18px rgba(255,255,255,0.04), 0 0 18px rgba(126,210,255,0.12); }
            46% { box-shadow: inset 0 0 24px rgba(255,255,255,0.10), 0 0 24px rgba(230,248,255,0.20), 0 0 34px rgba(126,210,255,0.20); }
            100% { box-shadow: inset 0 0 18px rgba(255,255,255,0.04), 0 0 18px rgba(126,210,255,0.12); }
        }
        @keyframes phase3PresentationGlowWhite {
            0% { filter: drop-shadow(0 0 0 rgba(255,117,255,0)); }
            18% { filter: drop-shadow(0 0 14px rgba(255,190,245,0.32)); }
            46% { filter: drop-shadow(0 0 28px rgba(255,117,255,0.44)) drop-shadow(0 0 44px rgba(236,10,187,0.18)); }
            72% { filter: drop-shadow(0 0 18px rgba(255,190,245,0.24)); }
            100% { filter: drop-shadow(0 0 0 rgba(255,117,255,0)); }
        }
        @keyframes phase3BannerPresentWhite {
            0% { box-shadow: inset 0 0 18px rgba(255,255,255,0.05), 0 0 18px rgba(255,117,255,0.12); }
            48% { box-shadow: inset 0 0 24px rgba(255,255,255,0.12), 0 0 26px rgba(255,190,245,0.24), 0 0 34px rgba(255,117,255,0.24); }
            100% { box-shadow: inset 0 0 18px rgba(255,255,255,0.05), 0 0 18px rgba(255,117,255,0.12); }
        }
        @keyframes phase1PresentationGlowWhite {
            0% { filter: drop-shadow(0 0 0 rgba(255,117,255,0)); }
            18% { filter: drop-shadow(0 0 12px rgba(255,190,245,0.30)); }
            48% { filter: drop-shadow(0 0 22px rgba(255,117,255,0.40)) drop-shadow(0 0 36px rgba(236,10,187,0.18)); }
            76% { filter: drop-shadow(0 0 14px rgba(255,190,245,0.22)); }
            100% { filter: drop-shadow(0 0 0 rgba(255,117,255,0)); }
        }
        @keyframes phase1BannerPresentWhite {
            0% { box-shadow: inset 0 0 18px rgba(255,255,255,0.05), 0 0 18px rgba(255,117,255,0.12); }
            46% { box-shadow: inset 0 0 24px rgba(255,255,255,0.12), 0 0 24px rgba(255,190,245,0.24), 0 0 34px rgba(255,117,255,0.24); }
            100% { box-shadow: inset 0 0 18px rgba(255,255,255,0.05), 0 0 18px rgba(255,117,255,0.12); }
        }
        @keyframes readyPromptBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.38; }
        }
        @keyframes phaseReadyMonitorPulse {
            0% {
                filter: brightness(1.35);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.28),
                    inset 0 -9px 18px rgba(0,0,0,0.34),
                    0 3px 0 rgba(0,0,0,0.5),
                    0 0 0 rgba(255,204,0,0);
            }
            42% {
                filter: brightness(1.08);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.28),
                    inset 0 -9px 18px rgba(0,0,0,0.34),
                    0 3px 0 rgba(0,0,0,0.5),
                    0 0 18px rgba(255,204,0,0.26);
            }
            100% { filter: brightness(1); }
        }
        @keyframes phaseReadyFlipText {
            0%   { opacity: 0; transform: perspective(700px) rotateX(-88deg) translateY(-8px); filter: blur(2px); }
            18%  { opacity: 1; transform: perspective(700px) rotateX(64deg) translateY(3px); }
            34%  { transform: perspective(700px) rotateX(-42deg) translateY(-2px); }
            50%  { transform: perspective(700px) rotateX(28deg) translateY(1px); }
            66%  { transform: perspective(700px) rotateX(-14deg); filter: blur(0.5px); }
            82%  { transform: perspective(700px) rotateX(6deg); }
            100% { opacity: 1; transform: perspective(700px) rotateX(0deg) translateY(0); filter: blur(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            #capture-zone.phase-complete-tremor {
                animation: none;
            }
            #capture-zone.phase-complete-tremor #board-wrap {
                animation: phaseBoardGlow 1.48s ease both;
            }
            #capture-zone.phase3-swap-out,
            #capture-zone.phase3-swap-in,
            #capture-zone.phase1-presenting #board-wrap,
            #capture-zone.phase1-presenting #category-banner,
            #capture-zone.phase3-presenting #clue-banner,
            #capture-zone.phase3-presenting #board-wrap,
            #capture-zone.phase3-presenting #category-banner {
                animation: none;
            }
            #phase-ready-prompt.on {
                animation: none;
            }
        }
        @keyframes lockDropIn {
            0%   { transform: translateY(-34px); opacity: 0; filter: brightness(1.35); }
            72%  { transform: translateY(3px); opacity: 1; filter: brightness(1.12); }
            100% { transform: translateY(0); opacity: 1; filter: brightness(1); }
        }
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
        @keyframes bounceFlipped { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-12px); } }
        @keyframes tileLetterBlink { 0%,100%{color:inherit;text-shadow:none} 18%,54%,86%{color:#fff;text-shadow:0 0 8px rgba(255,255,255,0.72)} 34%,70%{color:#000;text-shadow:none} }
        .row.shake .tile { animation: tileLetterBlink 0.72s steps(1, end) both; }
        .row.flash-invalid .tile {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 38%, rgba(0,0,0,0.22) 100%),
                radial-gradient(circle at 50% 112%, rgba(112,255,132,0.34), transparent 56%),
                rgba(58,128,64,0.9) !important;
            border-color: rgba(98,255,121,0.56) !important;
            color: #161100 !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -9px 18px rgba(0,0,0,0.26), 0 3px 0 rgba(0,58,10,0.72), 0 0 14px rgba(98,255,121,0.22) !important;
        }
        .row.flash-replay .tile {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 38%, rgba(0,0,0,0.26) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,120,142,0.34), transparent 56%),
                rgba(168,28,48,0.92) !important;
            border-color: rgba(255,108,132,0.72) !important;
            color: #fff !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -9px 18px rgba(0,0,0,0.28), 0 3px 0 rgba(84,0,14,0.78), 0 0 14px rgba(255,69,97,0.28) !important;
        }
        /* ── OLD popup-zone kept for phase3 hide logic ── */
        #popup-zone { display: none; }
        #popup-zone.phase3 { display: none; }

        /* ── EMOJI PICKER MODAL ── */
        #emoji-modal {
            display: none; position: fixed; inset: 0; z-index: 75;
            align-items: center; justify-content: center;
            background: var(--modal-bg);
            padding: 16px;
        }
        #emoji-modal.on { display: flex; }
        #emoji-modal.leaving { display: flex; animation: fadeOut 0.55s ease forwards; }
        #emoji-modal-box {
            background: var(--surface);
            border: 2px solid var(--accent);
            border-radius: 18px;
            padding: 20px 18px 18px;
            width: 100%; max-width: 340px;
            min-height: 465px;
            display: flex; flex-direction: column; align-items: center; gap: 12px;
            animation: slideUp 0.4s cubic-bezier(.175,.885,.32,1.275);
            max-height: 92vh;
            overflow: hidden;
        }
        #emoji-modal-q {
            font-size: clamp(0.95rem, 3.5vw, 1.05rem);
            font-weight: 400; color: var(--yellow);
            font-family: 'Courier New', monospace;
            text-align: center; letter-spacing: 1px;
        }

        /* ── Score mini-bar inside modal ── */
        #emoji-modal-score {
            display: flex; gap: 10px; width: 100%;
        }
        .em-score-side {
            flex: 1; display: flex; flex-direction: column;
            align-items: center; gap: 2px;
            padding: 7px 8px; border-radius: 10px; border: 1px solid;
            font-family: 'Courier New', monospace;
        }
        .em-score-label { font-size: 0.62rem; letter-spacing: 1px; font-weight: 400; }
        .em-score-amt   { font-size: 1rem; font-weight: 400; }
        .em-score-you   { background: rgba(191,90,242,0.14); border-color: var(--accent); color: var(--accent); }
        .em-score-you .em-score-amt { color: var(--text); }
        .em-score-house { background: rgba(236,10,187,0.10); border-color: var(--red); color: var(--red); }
        .em-score-house .em-score-amt { color: var(--red); }
        @keyframes emScoreFlash {
            0%, 100% { filter: brightness(1); box-shadow: inset 0 0 0 currentColor; }
            40% { filter: brightness(1.28); box-shadow: inset 0 0 16px currentColor; }
            70% { filter: brightness(0.9); box-shadow: inset 0 0 8px currentColor; }
        }
        .em-score-side.flash { animation: emScoreFlash 0.6s steps(4,end); }

        /* ── Emoji choice cards ── */
        .echoices {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
        }
        .ecwrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 7px;
            width: 86px;
            min-width: 86px;
            transition: opacity 0.22s ease;
        }
        .ecbtn {
            background: var(--absent); border: 2px solid #555;
            border-radius: 10px;
            font-size: 2rem;
            padding: 0;
            cursor: pointer; transition: border-color 0.15s, background 0.15s;
            line-height: 1; flex-shrink: 0;
            width: 76px;
            height: 76px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .ecbtn:hover:not(:disabled) { border-color: var(--yellow); }
        .ecbtn:disabled { opacity: 0.2; cursor: default; }
        .ecbtn.hit  { background: #0a2a0a; border-color: var(--green); }
        .ecbtn.miss { background: #2a0a0a; border-color: var(--red); }
        .eclabel {
            font-size: 0.76rem;
            color: var(--text);
            font-weight: 400; font-family: 'Courier New', monospace;
            letter-spacing: 0.5px; line-height: 1.2;
            text-align: center;
            width: 100%;
            max-width: 86px;
            overflow-wrap: anywhere;
        }
        #emoji-modal-fb {
            font-size: 0.86rem; font-weight: 400;
            height: 74px;
            min-height: 74px; text-align: center;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 6px;
            overflow: hidden;
        }
        #emoji-modal-fb.tip-text {
            color: var(--text); font-weight: 400;
            font-style: italic; font-size: 0.85rem;
            line-height: 1.5;
        }
        /* keep emoji modal stable while preserving the intended letter-to-letter tray swap */
        #emoji-modal-box {
            height: 386px;
            min-height: 386px;
            padding: 16px 16px 14px;
            gap: 9px;
            overflow: hidden;
            transition: none;
        }
        #emoji-modal-q {
            min-height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #echoices-modal {
            height: 142px;
            min-height: 142px;
            justify-content: center;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            will-change: transform, opacity;
        }
        .emoji-gotit-btn {
            margin-top: 2px;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text);
            outline: none;
            min-height: 32px;
            padding: 6px 14px;
            font-size: 0.72rem;
            border-radius: 7px;
            text-transform: uppercase;
        }
        .emoji-gotit-btn:disabled {
            opacity: 0;
            pointer-events: none;
        }
        .emoji-gotit-btn:hover {
            background: var(--surface2);
            border-color: var(--accent);
            color: var(--text);
        }

        /* compact layout when the House claims the last remaining emoji */
        #emoji-modal-box.single-whiff #echoices-modal {
            height: 104px;
            min-height: 104px;
            justify-content: center;
        }
        #emoji-modal-box.single-whiff #emoji-modal-fb {
            height: 126px;
            min-height: 126px;
            overflow: visible;
            font-size: 0.9rem;
            line-height: 1.35;
        }
        #emoji-modal-box.single-whiff .emoji-gotit-btn {
            margin-top: 4px;
            min-height: 32px;
            padding: 6px 14px;
            font-size: 0.72rem;
        }
        @media (max-width: 480px) {
            #emoji-modal-box.single-whiff #echoices-modal { height: 96px; min-height: 96px; }
            #emoji-modal-box.single-whiff #emoji-modal-fb { height: 118px; min-height: 118px; font-size: 0.82rem; }
        }

        /* playful moon poke reactions */
        .moji-moon {
            pointer-events: auto;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .moji-moon.poke-tremor { animation: moonPokeTremor 0.38s ease, mojiMoonFluid 9s ease-in-out infinite; }
        .moji-moon.poke-slide  { animation: moonPokeSlide 0.54s cubic-bezier(.175,.885,.32,1.275), mojiMoonFluid 9s ease-in-out infinite; }
        .moji-moon.poke-puff   { animation: moonPokePuff 0.68s cubic-bezier(.175,.885,.32,1.275), mojiMoonFluid 9s ease-in-out infinite; }
        .moon-zap,
        .moon-swoosh,
        .moon-puff {
            position: absolute;
            left: 50%;
            top: 50%;
            pointer-events: none;
            z-index: 8;
            opacity: 0;
        }
        .moon-zap {
            width: 140px;
            height: 140px;
            margin-left: -70px;
            margin-top: -70px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 52% 3%, rgba(255,255,255,0.95) 0 3px, transparent 8px),
                radial-gradient(circle at 91% 33%, rgba(255,204,0,0.92) 0 4px, transparent 10px),
                radial-gradient(circle at 80% 88%, rgba(236,10,187,0.88) 0 3px, transparent 9px),
                radial-gradient(circle at 12% 68%, rgba(191,90,242,0.9) 0 4px, transparent 10px),
                radial-gradient(circle at 20% 15%, rgba(255,255,255,0.85) 0 3px, transparent 8px);
            filter: drop-shadow(0 0 10px rgba(255,204,0,0.8));
            animation: moonZapCrackle 0.44s ease-out forwards;
        }
        .moon-zap::before {
            content: '';
            position: absolute;
            inset: 18px;
            border-radius: 44% 56% 48% 52%;
            border: 3px dashed rgba(255,255,255,0.62);
            box-shadow: 0 0 18px rgba(191,90,242,0.68);
            animation: moonZapRing 0.44s ease-out forwards;
        }
        .moon-swoosh {
            width: 190px;
            height: 92px;
            margin-left: -112px;
            margin-top: -46px;
            border-radius: 999px;
            background:
                radial-gradient(ellipse at 92% 50%, rgba(255,255,255,0.88) 0 7%, transparent 18%),
                linear-gradient(90deg, transparent 0%, rgba(191,90,242,0.10) 16%, rgba(255,204,0,0.34) 48%, rgba(236,10,187,0.72) 76%, transparent 100%);
            filter: blur(0.4px) drop-shadow(0 0 12px rgba(236,10,187,0.72));
            transform-origin: 82% 50%;
            animation: moonSwooshTrail 0.58s ease-out forwards;
        }
        .moon-swoosh::before,
        .moon-swoosh::after {
            content: '';
            position: absolute;
            right: 18px;
            width: 72px;
            height: 3px;
            border-radius: 999px;
            background: rgba(255,255,255,0.84);
            box-shadow: 0 0 12px rgba(255,255,255,0.72);
        }
        .moon-swoosh::before { top: 28px; transform: rotate(-11deg); }
        .moon-swoosh::after  { top: 58px; transform: rotate(10deg); opacity: 0.72; }
        .moon-puff {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 158px;
            height: 158px;
            margin-left: -79px;
            margin-top: -79px;
            pointer-events: none;
            border-radius: 50%;
            z-index: 8;
            opacity: 0;
            background:
                radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(255,255,255,0.95) 37% 39%, transparent 42%),
                radial-gradient(circle at 26% 22%, rgba(255,255,255,0.92) 0 5px, transparent 12px),
                radial-gradient(circle at 76% 24%, rgba(255,204,0,0.9) 0 5px, transparent 13px),
                radial-gradient(circle at 88% 62%, rgba(236,10,187,0.82) 0 4px, transparent 12px),
                radial-gradient(circle at 36% 86%, rgba(191,90,242,0.88) 0 5px, transparent 13px),
                radial-gradient(circle at 10% 58%, rgba(255,255,255,0.8) 0 4px, transparent 12px);
            filter: drop-shadow(0 0 10px rgba(191,90,242,0.85));
            animation: moonPuffBurst 0.72s ease-out forwards;
        }
        .moon-puff::before,
        .moon-puff::after {
            content: '';
            position: absolute;
            inset: 20px;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.58);
            box-shadow: 0 0 22px rgba(255,204,0,0.45), inset 0 0 18px rgba(191,90,242,0.35);
        }
        .moon-puff::after {
            inset: 34px;
            border-color: rgba(236,10,187,0.46);
            animation: moonPuffRing 0.72s ease-out forwards;
        }
        .moon-sparkles {
            position: absolute;
            left: 50%; top: 50%;
            width: 124px; height: 124px;
            margin-left: -62px; margin-top: -62px;
            pointer-events: none;
            border-radius: 50%;
            opacity: 0;
            z-index: 6;
            animation: moonSparkleHalo 0.72s ease forwards;
        }
        .moon-sparkles::before,
        .moon-sparkles::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background:
                radial-gradient(circle at 50% 4%,  rgba(255,255,255,0.95) 0 2px, transparent 5px),
                radial-gradient(circle at 84% 20%, rgba(255,204,0,0.88) 0 2px, transparent 6px),
                radial-gradient(circle at 96% 54%, rgba(255,255,255,0.85) 0 1.5px, transparent 5px),
                radial-gradient(circle at 78% 88%, rgba(236,10,187,0.82) 0 2px, transparent 6px),
                radial-gradient(circle at 26% 92%, rgba(255,255,255,0.8) 0 1.5px, transparent 5px),
                radial-gradient(circle at 5% 58%,  rgba(191,90,242,0.9) 0 2px, transparent 6px),
                radial-gradient(circle at 15% 18%, rgba(255,255,255,0.78) 0 1.5px, transparent 5px);
            filter: drop-shadow(0 0 7px rgba(191,90,242,0.95));
        }
        .moon-sparkles::after {
            transform: rotate(28deg) scale(0.82);
            opacity: 0.7;
            filter: drop-shadow(0 0 9px rgba(255,204,0,0.65));
        }
        @keyframes moonPokeTremor {
            0%,100% { transform: translateX(0) rotate(0deg) scale(1); }
            16% { transform: translateX(-5px) rotate(-4deg) scale(1.04); }
            32% { transform: translateX(5px) rotate(4deg) scale(0.98); }
            48% { transform: translateX(-4px) rotate(-3deg) scale(1.03); }
            66% { transform: translateX(3px) rotate(2deg) scale(0.99); }
            82% { transform: translateX(-1px) rotate(-1deg) scale(1.01); }
        }
        @keyframes moonPokeSlide {
            0%,100% { transform: translateX(0) scale(1); }
            18% { transform: translateX(-5px) scale(0.94, 1.06); }
            52% { transform: translateX(24px) scale(1.08, 0.94); }
            76% { transform: translateX(-4px) scale(0.98, 1.02); }
        }
        @keyframes moonPokePuff {
            0%,100% { transform: translateY(0) scale(1); }
            18% { transform: translateY(2px) scale(0.88, 1.12); }
            45% { transform: translateY(-8px) scale(1.16, 0.9); }
            68% { transform: translateY(1px) scale(0.96, 1.04); }
        }
        @keyframes moonPuffBurst {
            0%   { opacity: 0; transform: scale(0.46); filter: blur(2px) drop-shadow(0 0 8px rgba(191,90,242,0.85)); }
            24%  { opacity: 1; }
            100% { opacity: 0; transform: scale(1.38); filter: blur(0) drop-shadow(0 0 18px rgba(255,204,0,0.55)); }
        }
        @keyframes moonPuffRing {
            0%   { transform: scale(0.72); opacity: 0.85; }
            100% { transform: scale(1.52); opacity: 0; }
        }
        @keyframes moonZapCrackle {
            0%   { opacity: 0; transform: scale(0.7) rotate(-18deg); }
            20%  { opacity: 1; }
            100% { opacity: 0; transform: scale(1.18) rotate(24deg); }
        }
        @keyframes moonZapRing {
            0%   { transform: scale(0.72) rotate(0deg); opacity: 0.9; }
            100% { transform: scale(1.28) rotate(70deg); opacity: 0; }
        }
        @keyframes moonSwooshTrail {
            0%   { opacity: 0; transform: translateX(-18px) scaleX(0.55); }
            22%  { opacity: 0.95; }
            100% { opacity: 0; transform: translateX(34px) scaleX(1.18); }
        }
        @keyframes moonSparkleHalo {
            0%   { opacity: 0; transform: scale(0.82) rotate(-10deg); }
            22%  { opacity: 1; }
            100% { opacity: 0; transform: scale(1.08) rotate(18deg); }
        }
        @media (max-width: 480px) {
            #status-panel {
                height: 60px;
                min-height: 60px;
                justify-content: center;
                padding: 5px 6px;
            }
            .sbox {
                padding: 4px 6px;
            }
            .sbox-ltr { font-size: 0.76rem; }
            .sbox-emojis { font-size: 1rem; gap: 3px; }
            .sem.win { font-size: 1.18rem; }
            #phase-ready-prompt {
                height: 60px;
                min-height: 60px;
            }
            #clue-banner {
                height: 60px;
                min-height: 60px;
            }
            #console-info-bay.status-active + #lcd-panel,
            #console-info-bay.phase-ready-active + #lcd-panel,
            #console-info-bay.phase3-active + #lcd-panel {
                margin-top: -15px;
            }
            #emoji-modal-box {
                height: 360px;
                min-height: 360px;
                padding: 14px 12px 12px;
                gap: 8px;
                max-width: 340px;
            }
            #emoji-modal-q {
                min-height: 32px;
                font-size: 0.9rem;
            }
            #emoji-modal-score { gap: 8px; }
            .em-score-side { padding: 6px 7px; }
            #echoices-modal {
                height: 130px;
                min-height: 130px;
                gap: 7px;
            }
            .ecwrap {
                width: 74px;
                min-width: 74px;
                gap: 6px;
            }
            .ecbtn {
                width: 64px;
                height: 64px;
                font-size: 1.72rem;
                border-radius: 9px;
            }
            .eclabel {
                max-width: 74px;
                font-size: 0.66rem;
                letter-spacing: 0.2px;
            }
            #emoji-modal-fb {
                height: 68px;
                min-height: 68px;
                font-size: 0.78rem;
                line-height: 1.35;
            }
            #emoji-modal-fb.tip-text {
                font-size: 0.76rem;
                line-height: 1.35;
            }
        }

        /* intended serving animation: old choices lift away, new letter drops in */
        #echoices-modal.queue-slide-out {
            transform: translateY(-30px);
            opacity: 0;
            transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
        }
        #echoices-modal.queue-slide-in {
            transform: translateY(30px);
            opacity: 0;
            transition: none;
        }
        #echoices-modal.queue-slide-ready {
            transform: translateY(0);
            opacity: 1;
            transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
        }

        /* keep old ids working for JS compat */
        #popup-q { display: none; }
        #echoices { display: none; }
        #popup-fb { display: none; }

        /* ── KEYBOARD ── */
        #keyboard {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: clamp(3px, 1vw, 5px);
            width: 100%;
            max-width: 500px;
        }
        .krow { display: flex; justify-content: center; gap: clamp(3px, 1vw, 4px); }
        .key {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 40%, rgba(0,0,0,0.28)),
                radial-gradient(circle at 50% 110%, rgba(255,204,0,0.12), transparent 60%),
                var(--kbd);
            color: #fff; border: 1px solid rgba(255,204,0,0.16); border-radius: 7px;
            padding: clamp(10px, 3.5vw, 18px) 0;
            height: clamp(40px, 11vw, 58px);
            font-weight: 400; cursor: pointer; flex: 1;
            text-align: center;
            font-size: clamp(0.7rem, 2.8vw, 1rem);
            text-transform: uppercase;
            transition: background 0.2s;
            max-width: clamp(28px, 8vw, 36px);
            display: flex; align-items: center; justify-content: center;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.22),
                inset 0 -8px 12px rgba(0,0,0,0.25),
                0 2px 0 rgba(0,0,0,0.46);
        }
        .key.wide    { flex: 1.55; max-width: clamp(44px, 12vw, 54px); font-size: clamp(0.6rem, 2.2vw, 0.8rem); }
        .key.joker-key {
            color: #ff75ff !important;
            text-shadow:
                0 0 4px rgba(255,117,255,0.95),
                0 0 12px rgba(236,10,187,0.54),
                0 1px 0 rgba(0,0,0,0.72) !important;
        }
        .key[data-k="J"] {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            touch-action: manipulation;
        }
        .key.joker-key.joker-holding {
            filter: brightness(1.25);
            transform: translateY(1px) scale(0.98);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.38),
                inset 0 -8px 12px rgba(0,0,0,0.28),
                0 2px 0 rgba(0,0,0,0.46),
                0 0 14px rgba(255,117,255,0.54),
                0 0 24px rgba(236,10,187,0.28) !important;
        }
        .key.correct {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 40%, rgba(0,0,0,0.24)),
                var(--correct);
            border-color: rgba(132,190,255,0.5);
        }
        .key.present {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 40%, rgba(0,0,0,0.18)),
                var(--present);
            color: #000;
            border-color: rgba(255,224,104,0.55);
        }
        .key.absent  {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 40%, rgba(0,0,0,0.28)),
                var(--absent);
            opacity: 0.58;
        }

        /* ── OVERLAYS ── */
        /* cabinet panels inherit the same 3D language as the letter tiles */
        #category-banner,
        #status-panel,
        #slot-machine,
        #clue-banner,
        #phase-ready-prompt,
        .score-side,
        .key {
            border-color: rgba(255,255,255,0.16);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 3px 0 rgba(0,0,0,0.5),
                0 0 12px rgba(255,204,0,0.08);
        }
        #category-banner,
        #clue-banner,
        #phase-ready-prompt,
        .score-side,
        .key {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.18), transparent 54%),
                rgba(28,28,32,0.72);
        }
        #category-banner {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.18), transparent 54%),
                radial-gradient(circle at 78% 28%, rgba(255,204,0,0.46) 0%, transparent 22%),
                radial-gradient(circle at 34% 76%, rgba(213,40,168,0.58) 0%, transparent 48%),
                radial-gradient(circle at 48% 48%, #c94dc0 0%, #8a347f 54%, #3a183e 100%);
            background-size: 100% 100%, 100% 100%, 150% 150%, 205% 205%, 165% 165%;
        }
        #category-subtitle-box {
            border: none;
            background:
                linear-gradient(90deg, rgba(255,255,255,0.035), transparent 16%, transparent 84%, rgba(0,0,0,0.34)),
                repeating-linear-gradient(90deg, rgba(145,175,150,0.28) 0 1px, transparent 1px 39px),
                repeating-linear-gradient(0deg, rgba(145,175,150,0.24) 0 1px, transparent 1px 8px),
                linear-gradient(180deg, #141817, #090d0c 48%, #030504);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.035),
                inset 0 0 0 1px rgba(0,0,0,0.62),
                0 1px 0 rgba(0,0,0,0.58);
        }
        .key.correct,
        .key.present,
        .key.absent {
            text-shadow: 0 1px 0 rgba(0,0,0,0.72);
            transition: filter 0.18s, transform 0.18s, background 0.18s;
        }
        .key.correct {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05) 38%, rgba(0,0,0,0.26) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,255,255,0.22), transparent 56%),
                var(--correct);
            border-color: rgba(126,184,255,0.64);
            color: #eef7ff;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 14px rgba(0,0,0,0.30), 0 2px 0 rgba(0,0,0,0.56), 0 0 12px rgba(255,255,255,0.16);
        }
        .key.present {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.045) 38%, rgba(0,0,0,0.22) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,226,104,0.46), transparent 56%),
                rgba(166,122,0,0.90);
            border-color: rgba(255,224,104,0.66);
            color: #120b00;
            text-shadow: 0 1px 0 rgba(255,239,160,0.26);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -8px 14px rgba(0,0,0,0.24), 0 2px 0 rgba(76,55,0,0.75), 0 0 12px rgba(255,204,0,0.22);
        }
        .key.absent {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 38%, rgba(0,0,0,0.26) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,255,255,0.18), transparent 58%),
                rgba(84,87,96,0.92);
            border-color: rgba(255,255,255,0.24);
            color: rgba(255,255,255,0.74);
            opacity: 1;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -8px 14px rgba(0,0,0,0.34), 0 2px 0 rgba(0,0,0,0.58), 0 0 10px rgba(255,255,255,0.08);
        }
        #lcd-panel {
            width: 100%;
            max-width: 420px;
            margin-top: -5px;
            height: 32px;
            min-height: 32px;
            box-sizing: border-box;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 0 10px 2px;
            border: none;
            border-radius: 2px;
            background:
                linear-gradient(90deg, rgba(255,255,255,0.035), transparent 16%, transparent 84%, rgba(0,0,0,0.34)),
                repeating-linear-gradient(90deg, rgba(145,175,150,0.28) 0 1px, transparent 1px 39px),
                repeating-linear-gradient(0deg, rgba(145,175,150,0.24) 0 1px, transparent 1px 8px),
                linear-gradient(180deg, #141817, #090d0c 48%, #030504);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.035),
                inset 0 0 0 1px rgba(0,0,0,0.62),
                0 1px 0 rgba(0,0,0,0.58);
            overflow: hidden;
        }
        #console-info-bay.status-active + #lcd-panel,
        #console-info-bay.phase-ready-active + #lcd-panel,
        #console-info-bay.phase3-active + #lcd-panel {
            margin-top: -11px;
        }
        #lcd-panel #msg {
            min-height: 0;
            width: 100%;
            text-align: center;
            font-family: 'Courier New', monospace;
            font-size: clamp(0.72rem, 2.75vw, 0.92rem);
            font-weight: 700;
            letter-spacing: 1.1px;
            line-height: 1.12;
            color: rgba(31,52,45,0.72);
            text-transform: uppercase;
            text-shadow: 0 1px 0 rgba(190,210,180,0.10);
            opacity: 0.42;
            transform: translateY(1px);
            transition: opacity 0.18s ease, color 0.18s ease, text-shadow 0.18s ease;
        }
        #lcd-panel.on #msg {
            opacity: 1;
            display: inline-block;
            width: 100%;
            max-width: 100%;
            white-space: normal;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            animation: lcdTypeOn 1.05s steps(32, end) both;
        }
        #lcd-panel.lcd-invalid {
            border: none;
            background:
                linear-gradient(90deg, rgba(255,255,255,0.035), transparent 16%, transparent 84%, rgba(0,0,0,0.34)),
                repeating-linear-gradient(90deg, rgba(145,175,150,0.28) 0 1px, transparent 1px 39px),
                repeating-linear-gradient(0deg, rgba(145,175,150,0.24) 0 1px, transparent 1px 8px),
                linear-gradient(180deg, #141817, #090d0c 48%, #030504);
        }
        #lcd-panel.lcd-invalid #msg {
            color: #9dff7a;
            text-shadow:
                0 0 3px rgba(218,255,180,0.95),
                0 0 8px rgba(157,255,122,0.88),
                0 0 18px rgba(98,255,64,0.50),
                0 0 30px rgba(98,255,64,0.24);
        }
        #lcd-panel.lcd-replay {
            border: none;
            background:
                linear-gradient(90deg, rgba(255,255,255,0.035), transparent 16%, transparent 84%, rgba(0,0,0,0.34)),
                repeating-linear-gradient(90deg, rgba(145,175,150,0.28) 0 1px, transparent 1px 39px),
                repeating-linear-gradient(0deg, rgba(145,175,150,0.24) 0 1px, transparent 1px 8px),
                linear-gradient(180deg, #141817, #090d0c 48%, #030504);
        }
        #lcd-panel.lcd-replay #msg {
            color: #ff8fa0;
            text-shadow:
                0 0 4px rgba(255,116,136,0.82),
                0 0 10px rgba(255,116,136,0.40),
                0 0 18px rgba(255,116,136,0.16);
        }
        @keyframes lcdTypeOn {
            0% { clip-path: inset(0 100% 0 0); opacity: 0.35; }
            10% { opacity: 1; }
            100% { clip-path: inset(0 0 0 0); opacity: 1; }
        }        .overlay { display: none; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 20px; }
        .overlay.on { display: flex; }
        .overlay.leaving { display: flex; animation: fadeOut 0.55s ease forwards; }

        /* Phase transition */
        #phase-overlay { background: var(--modal-bg); text-align: center; gap: 18px; }
        #phase-overlay.on {
            display: flex;
            background: var(--modal-bg);
            position: fixed;
            inset: 0;
            z-index: 70;
            align-items: center;
            justify-content: center;
        }
        #phase-modal {
            background: var(--surface);
            border: 2px solid var(--accent);
            border-radius: 15px;
            padding: 28px 24px;
            max-width: 360px;
            width: 90%;
            text-align: center;
            animation: slideUp 0.4s cubic-bezier(.175,.885,.32,1.275);
        }
        #phase-modal.handoff-freeze {
            animation: none;
            transform: translate3d(0, 0, 0);
            will-change: opacity;
        }
        #phase-modal.word-flip-out {
            animation: wordModalFlipOut 0.32s ease-in forwards;
            transform-origin: center center;
            backface-visibility: hidden;
        }
        #emoji-modal.word-flip-in #emoji-modal-box {
            animation: emojiModalFlipIn 0.42s cubic-bezier(.16, 1, .3, 1) both;
            transform-origin: center center;
            backface-visibility: hidden;
        }
        #emoji-modal.naughty-flip-out #emoji-modal-box {
            animation: wordModalFlipOut 0.32s ease-in forwards;
            transform-origin: center center;
            backface-visibility: hidden;
        }
        #naughty-modal.naughty-flip-in #naughty-modal-content {
            animation: emojiModalFlipIn 0.42s cubic-bezier(.16, 1, .3, 1) both;
            transform-origin: center center;
            backface-visibility: hidden;
        }
        #naughty-modal.naughty-return-out #naughty-modal-content {
            animation: wordModalFlipOut 0.32s ease-in forwards;
            transform-origin: center center;
            backface-visibility: hidden;
        }
        #emoji-modal.naughty-flip-back-in #emoji-modal-box {
            animation: emojiModalFlipIn 0.42s cubic-bezier(.16, 1, .3, 1) both;
            transform-origin: center center;
            backface-visibility: hidden;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
        @keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes wordModalFlipOut {
            0% { opacity: 1; transform: perspective(700px) rotateY(0deg) scale(1); }
            100% { opacity: 0; transform: perspective(700px) rotateY(88deg) scale(0.92); }
        }
        @keyframes emojiModalFlipIn {
            0% { opacity: 0; transform: perspective(700px) rotateY(-88deg) scale(0.92); }
            100% { opacity: 1; transform: perspective(700px) rotateY(0deg) scale(1); }
        }
        #phase-title { font-size: 1.4rem; font-weight: 400; color: var(--yellow); font-family: 'Courier New', monospace; letter-spacing: 2px; line-height: 1.4; }
        #phase-sub   { font-size: 0.9rem; color: var(--text); max-width: 320px; line-height: 1.6; }
        #phase-secret-reveal { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
        #phase-secret-word  { font-size: 1.8rem; font-weight: 400; color: var(--correct); letter-spacing: 6px; font-family: 'Courier New', monospace; text-align: center; }
        #phase-secret-emoji { font-size: 2.8rem; animation: spin 0.8s ease; }
        #phase-secret-emoji:empty { display: none; }
        @keyframes spin { from { transform: rotate(0deg) scale(0); } to { transform: rotate(360deg) scale(1); } }

        /* Win */
        #win-overlay { overflow-y: auto; justify-content: flex-start; padding-top: 24px; }
        #win-overlay.on {
            display: flex;
            animation: fadeIn 0.3s ease;
        }
        #win-header { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 2.2rem; }
        #win-header > span { flex-shrink: 0; }
        #win-title { font-size: clamp(1.3rem, 7vw, 2rem); white-space: nowrap; font-weight: 400; color: var(--accent); font-family: 'Courier New', monospace; letter-spacing: 4px; animation: glow 1.2s infinite alternate; }
        @keyframes glow { from { text-shadow: 0 0 8px #bf5af2; } to { text-shadow: 0 0 28px #bf5af2, 0 0 55px #bf5af255; } }
        @keyframes popIn { 0%{transform:scale(0.5);opacity:0} 100%{transform:scale(1);opacity:1} }

        #share-nudge {
            width: 100%;
            max-width: 340px;
            text-align: center;
            font-size: 0.82rem;
            color: var(--text);
            line-height: 1.28;
            padding: 10px 18px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
            font-family: 'Courier New', monospace;
        }
        #share-nudge .donate-text {
            margin: 0;
            line-height: 1.28;
            letter-spacing: 0.5px;
        }
        #share-nudge b { color: var(--yellow); font-weight: 400; }
        #donate-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 2px 0;
            padding: 7px 16px;
            min-height: 34px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--yellow);
            font-family: 'Courier New', monospace;
            font-size: 0.74rem;
            font-weight: 400;
            letter-spacing: 1px;
            text-transform: uppercase;
            text-decoration: none;
        }
        #donate-btn:hover {
            background: var(--surface2);
            border-color: var(--accent);
            color: var(--text);
        }

        /* ── NAUGHTY MODAL ── */
        #naughty-modal {
            display: none; position: fixed; inset: 0; z-index: 85;
            align-items: center; justify-content: center;
            background: var(--modal-bg);
            padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        }
        #naughty-modal.show { display: flex; }
        #naughty-modal.leaving { display: flex; animation: fadeOut 0.55s ease forwards; }
        #naughty-modal-content {
            background: var(--surface);
            border: 2px solid var(--accent);
            border-radius: 15px;
            padding: clamp(14px, 4vw, 24px) clamp(14px, 5vw, 28px);
            text-align: center;
            width: min(300px, 100%);
            max-width: 300px;
            max-height: calc(100dvh - 28px);
            overflow: hidden;
            animation: slideUp 0.4s cubic-bezier(.175,.885,.32,1.275);
        }
        #naughty-emoji-display {
            font-size: clamp(2.1rem, 12vw, 3.2rem);
            margin-bottom: clamp(6px, 2.4vw, 12px);
            display: inline-block;
        }
        @keyframes flip3D {
            0% { transform: translateY(-22px) rotateX(-76deg) scale(0.86); opacity: 0; filter: blur(1px) brightness(1.42); }
            38% { transform: translateY(1px) rotateX(10deg) scale(1.06); opacity: 1; filter: blur(0) brightness(1.16); }
            56% { transform: translateY(-5px) rotateX(-3deg) scale(1.04); opacity: 1; filter: blur(0) brightness(1.08); }
            76% { transform: translateY(1px) rotateX(0deg) scale(0.99); opacity: 1; filter: blur(0) brightness(1.02); }
            100% { transform: translateY(0) rotateX(0deg) scale(1); opacity: 1; filter: blur(0) brightness(1); }
        }
        .naughty-flip {
            animation: flip3D 1.18s cubic-bezier(0.18, 0.82, 0.24, 1) forwards;
            transform-origin: center top;
        }
        #naughty-text {
            font-size: 1.1rem;
            font-weight: 400;
            color: var(--accent);
            font-family: 'Courier New', monospace;
            letter-spacing: 1px;
            line-height: 1.4;
        }

canvas#fx { position: fixed; inset: 0; pointer-events: none; z-index: 61; }

/* Mobile victory fireworks: four tiny compositor bursts rather than a
   full-screen canvas particle simulation. */
.mobile-win-burst {
    position: fixed;
    left: var(--burst-x);
    top: var(--burst-y);
    width: 148px;
    height: 148px;
    z-index: 61;
    pointer-events: none;
    border-radius: 50%;
    opacity: 1;
    background:
        radial-gradient(circle at center, #fff 0 5px, var(--burst-color) 6px 10px, rgba(255,255,255,.42) 11px 15px, transparent 17px);
    box-shadow: 0 0 14px var(--burst-color), 0 0 30px rgba(255,255,255,.34);
    transform: translate(-50%, -50%) scale(.12);
    animation: mobileWinBurst 1180ms cubic-bezier(.16,.78,.28,1) both;
    will-change: transform, opacity;
}

.mobile-win-burst::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 5%, #fff 0 2px, var(--burst-color) 3px 4px, transparent 5px),
        radial-gradient(circle at 74% 10%, var(--burst-color) 0 3px, transparent 4px),
        radial-gradient(circle at 92% 28%, #fff 0 2px, var(--burst-color) 3px 4px, transparent 5px),
        radial-gradient(circle at 96% 55%, var(--burst-color) 0 3px, transparent 4px),
        radial-gradient(circle at 84% 82%, #fff 0 2px, var(--burst-color) 3px 4px, transparent 5px),
        radial-gradient(circle at 58% 96%, var(--burst-color) 0 3px, transparent 4px),
        radial-gradient(circle at 28% 91%, #fff 0 2px, var(--burst-color) 3px 4px, transparent 5px),
        radial-gradient(circle at 6% 66%, var(--burst-color) 0 3px, transparent 4px),
        radial-gradient(circle at 9% 34%, #fff 0 2px, var(--burst-color) 3px 4px, transparent 5px),
        radial-gradient(circle at 27% 10%, var(--burst-color) 0 3px, transparent 4px);
}

.mobile-win-burst::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    opacity: .94;
    background: repeating-conic-gradient(from 8deg, var(--burst-color) 0 3deg, transparent 3deg 18deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 19%, #000 23% 71%, transparent 75%);
    mask-image: radial-gradient(circle, transparent 0 19%, #000 23% 71%, transparent 75%);
}

@keyframes mobileWinBurst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
    22% { opacity: 1; }
    72% { opacity: .76; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

        /* ── WELCOME SCREEN ── */
        .modal-overlay {
            display: none; position: fixed; inset: 0;
            z-index: 100; align-items: center; justify-content: center;
            padding: 20px; background: var(--modal-bg);
        }
        .modal-overlay.on { display: flex; }
        .modal-wrapper {
            position: relative;
            display: flex; flex-direction: column; align-items: center; gap: 20px;
            margin-top: -80px;
        }
        .modal-content {
            position: relative;
            background: var(--surface);
            border-radius: 50%;
            width: 400px; height: 400px;
            text-align: center; display: flex;
            flex-direction: column; align-items: center; justify-content: center; gap: 14px;
            padding: 46px 34px;
            box-shadow: 0 0 60px rgba(191,90,242,0.3);
            overflow: hidden;
            z-index: 1;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .modal-content::before {
            content: '';
            position: absolute;
            top: -14px; left: -14px; right: -14px; bottom: -14px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 45%),
                radial-gradient(circle at 70% 40%, var(--yellow) 0%, transparent 45%),
                radial-gradient(circle at 50% 75%, var(--red) 0%, transparent 45%);
            background-size: 220% 220%;
            filter: blur(16px) saturate(1.5);
            z-index: -1;
            animation: fluidSwirl 11s ease-in-out infinite;
        }
        .modal-content > *:not(.planet-ripple) {
            position: relative;
            z-index: 2;
        }
        .modal-content.planet-poked {
            animation: planetPokeSquish 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
            transform-origin: 50% 50%;
        }
        #welcome-screen.on .modal-wrapper:not(.welcome-transitioning) .modal-content:not(.planet-poked) {
            animation: planetSpaceFloat 8.5s ease-in-out infinite;
        }
        #welcome-screen.on .modal-wrapper:not(.welcome-transitioning) #lojiro-welcome-balance {
            animation: balanceSpaceFloat 7.2s ease-in-out infinite alternate;
        }
        .planet-ripple {
            position: absolute;
            left: var(--ripple-x);
            top: var(--ripple-y);
            width: 28px;
            height: 28px;
            margin-left: -14px;
            margin-top: -14px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
            border: 3px solid rgba(255,255,255,0.72);
            box-shadow:
                0 0 18px rgba(255,204,0,0.58),
                inset 0 0 16px rgba(191,90,242,0.42);
            background: radial-gradient(circle, rgba(255,255,255,0.32) 0%, rgba(191,90,242,0.16) 38%, transparent 68%);
            animation: planetRipple 0.82s ease-out forwards;
        }
        @keyframes planetPokeSquish {
            0%   { transform: scale(1); }
            18%  { transform: scale(0.982, 1.018); }
            42%  { transform: scale(1.014, 0.99); }
            68%  { transform: scale(0.996, 1.004); }
            100% { transform: scale(1.0001); }
        }
        @keyframes planetRipple {
            0%   { opacity: 0.95; transform: scale(0.25); filter: blur(0); }
            72%  { opacity: 0.56; }
            100% { opacity: 0; transform: scale(14); filter: blur(1.8px); }
        }
        @keyframes planetSpaceFloat {
            0%,100% { transform: translate3d(0, 0, 0) scale(1); }
            50%     { transform: translate3d(0, -6px, 0) scale(1.006); }
        }
        @keyframes balanceSpaceFloat {
            from { transform: translate3d(-50%, -1px, 0); }
            to   { transform: translate3d(-50%, 3px, 0); }
        }
        @keyframes fluidSwirl {
            0%   { background-position: 0% 0%,   100% 0%,  50% 100%; }
            25%  { background-position: 35% 65%, 65% 25%,  15% 75%; }
            50%  { background-position: 65% 15%, 25% 70%,  80% 35%; }
            75%  { background-position: 15% 80%, 55% 55%,  40% 5%;  }
            100% { background-position: 0% 0%,   100% 0%,  50% 100%; }
        }
        .modal-content h2 {
            font-size: 1.05rem; font-weight: 400; color: #ffffff;
            font-family: 'Courier New', monospace; letter-spacing: 1px; line-height: 1.4;
            max-width: 310px;
            margin: -4px 0 0;
        }
        #enter-game-btn {
            width: min(255px, 100%);
            white-space: normal;
            line-height: 1.12;
            font-size: 0.82rem;
            padding: 8px 20px 10px;
            margin-top: 34px;
            border-radius: 58% 58% 999px 999px;
            background: rgba(18,0,25,0.88);
            box-shadow:
                inset 0 8px 16px rgba(255,255,255,0.06),
                inset 0 -6px 14px rgba(0,0,0,0.18),
                0 0 14px rgba(191,90,242,0.32);
        }
        #enter-game-btn .enter-text,
        #enter-game-btn .enter-emojis {
            display: block;
            text-align: center;
        }
        #enter-game-btn .enter-text {
            color: #fff7e8;
        }
        #enter-game-btn .enter-emojis {
            margin-top: 3px;
            font-size: 1rem;
            letter-spacing: 10px;
            text-indent: 10px;
        }
        #welcome-date-outside {
            position: fixed;
            left: 50%;
            bottom: max(18px, env(safe-area-inset-bottom));
            transform: translateX(-50%);
            width: min(92vw, 420px);
            font-family: 'Courier New', monospace; font-size: 1rem;
            font-weight: 400; color: var(--muted); letter-spacing: 2px;
            text-align: center; line-height: 1.6;
            animation: fadeIn 0.6s ease;
            z-index: 2;
        }
        #welcome-screen.on .modal-wrapper:not(.welcome-transitioning) #welcome-date-outside {
            animation: fadeIn 0.6s ease, dateSpaceFloat 9s ease-in-out 0.6s infinite alternate;
        }
        @keyframes dateSpaceFloat {
            from { transform: translate3d(-50%, 2px, 0); }
            to   { transform: translate3d(-50%, -3px, 0); }
        }
        .streak-badge {
            background: var(--surface2); border: 1px solid var(--yellow);
            border-radius: 12px; padding: 9px 16px;
            font-family: 'Courier New', monospace; font-size: 1rem;
            font-weight: 400; color: var(--yellow); letter-spacing: 1px;
            line-height: 1.35; text-align: center; width: min(330px, 100%);
            margin-top: -18px;
            margin-bottom: -2px;
        }
        .streak-sub {
            display: block;
            margin-top: 2px;
            color: #fff;
            letter-spacing: 0.5px;
            font-size: 0.86rem;
        }
        .action-btn {
            background: var(--action-bg); border: 2px solid var(--accent); color: var(--accent);
            padding: 9px 20px; border-radius: 50px; font-size: 0.82rem;
            font-weight: 400; cursor: pointer; font-family: 'Courier New', monospace;
            letter-spacing: 1px; transition: background 0.2s; white-space: nowrap;
        }
        .action-btn:hover { background: var(--action-bg-hover); }

        /* ── MOJI-LOJI ROUND ORBIT MOON ── */
        .orbit-moon {
            position: absolute;
            top: -42px;
            left: 50%;
            width: 500px;
            height: 500px;
            margin-left: -250px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 4;
            animation: mojiMoonOrbit 22s linear infinite;
            transform-origin: 50% 50%;
        }

        .moji-moon {
            position: absolute;
            top: -50px;
            left: 50%;
            width: 92px;
            height: 92px;
            margin-left: -46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
            background:
                radial-gradient(circle at 28% 26%, rgba(255,255,255,0.55) 0%, transparent 20%),
                radial-gradient(circle at 72% 34%, var(--yellow) 0%, transparent 38%),
                radial-gradient(circle at 34% 75%, var(--red) 0%, transparent 42%),
                radial-gradient(circle at 48% 48%, var(--accent) 0%, #5b1378 72%);
            background-size: 180% 180%, 190% 190%, 200% 200%, 160% 160%;
            border: none;
            box-shadow:
                0 0 14px rgba(191,90,242,0.95),
                0 0 36px rgba(191,90,242,0.58),
                inset 0 0 18px rgba(255,255,255,0.18);
            animation: mojiMoonFluid 9s ease-in-out infinite;
        }

        .moji-moon span {
            position: relative;
            z-index: 10;
            display: block;
            width: 100%;
            color: #fff;
            font-family: 'Courier New', monospace;
            font-weight: 400;
            font-size: 1.58rem;
            letter-spacing: -2px;
            line-height: 0.72;
            text-align: center;
            text-shadow:
                0 0 4px rgba(0,0,0,1),
                0 0 9px rgba(0,0,0,0.95);
            white-space: normal;
            animation: mojiMoonCounterOrbit 22s linear infinite;
        }

        /* soft comet tail: no separate dots, just fading dust */
        .moji-moon::before {
            content: '';
            position: absolute;
            right: 76%;
            top: 48%;
            width: 230px;
            height: 74px;
            transform: translateY(-50%) rotate(-10deg);
            transform-origin: right center;
            border-radius: 999px 40% 40% 999px;
            background:
                radial-gradient(ellipse at 96% 50%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.30) 16%, transparent 38%),
                radial-gradient(ellipse at 70% 46%, rgba(191,90,242,0.42) 0%, rgba(191,90,242,0.20) 30%, transparent 62%),
                radial-gradient(ellipse at 45% 58%, rgba(255,204,0,0.16) 0%, transparent 50%),
                linear-gradient(90deg,
                    rgba(255,255,255,0.00) 0%,
                    rgba(191,90,242,0.06) 20%,
                    rgba(191,90,242,0.16) 48%,
                    rgba(255,255,255,0.34) 100%);
            filter: blur(13px);
            opacity: 0.52;
            z-index: -2;
            animation: cometTailBreathe 3.8s ease-in-out infinite;
        }

        /* fine dust haze, blurred into the tail instead of hard dots */
        .moji-moon::after {
            content: '';
            position: absolute;
            right: 94%;
            top: 36%;
            width: 175px;
            height: 70px;
            transform: rotate(-13deg);
            border-radius: 50%;
            background:
                radial-gradient(circle at 84% 45%, rgba(255,255,255,0.34) 0 1px, transparent 4px),
                radial-gradient(circle at 68% 30%, rgba(191,90,242,0.28) 0 1px, transparent 5px),
                radial-gradient(circle at 52% 58%, rgba(255,255,255,0.18) 0 1px, transparent 6px),
                radial-gradient(circle at 34% 40%, rgba(191,90,242,0.16) 0 1px, transparent 7px),
                radial-gradient(circle at 18% 62%, rgba(255,204,0,0.10) 0 1px, transparent 8px);
            filter: blur(2.4px);
            opacity: 0.36;
            z-index: -3;
            animation: dustFade 2.8s ease-in-out infinite alternate;
        }

        @keyframes mojiMoonOrbit {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }

        @keyframes mojiMoonCounterOrbit {
            from { transform: rotate(0deg); }
            to   { transform: rotate(-360deg); }
        }

        @keyframes mojiMoonFluid {
            0%   { background-position: 0% 0%, 100% 0%, 40% 90%, 50% 50%; }
            50%  { background-position: 35% 60%, 55% 20%, 75% 35%, 40% 60%; }
            100% { background-position: 0% 0%, 100% 0%, 40% 90%, 50% 50%; }
        }

        @keyframes cometTailBreathe {
            0%,100% { opacity: 0.42; transform: translateY(-50%) rotate(-10deg) scaleX(0.92); }
            50%     { opacity: 0.62; transform: translateY(-50%) rotate(-10deg) scaleX(1.05); }
        }

        @keyframes dustFade {
            from { opacity: 0.18; transform: rotate(-13deg) translateX(0); }
            to   { opacity: 0.42; transform: rotate(-13deg) translateX(-8px); }
        }

        @media (max-width: 480px) {
            .modal-content {
                width: 340px;
                height: 340px;
                padding: 40px 28px;
                gap: 10px;
            }
            .modal-content h2 {
                font-size: 0.9rem;
                line-height: 1.32;
                max-width: 270px;
                margin-top: -2px;
            }
            #enter-game-btn {
                width: min(230px, 100%);
                font-size: 0.74rem;
                padding: 7px 16px 9px;
                margin-top: 24px;
            }
            #enter-game-btn .enter-emojis {
                font-size: 0.9rem;
                letter-spacing: 8px;
                text-indent: 8px;
            }
            .streak-badge {
                width: min(280px, 100%);
                font-size: 0.84rem;
                padding: 8px 12px;
                margin-top: -10px;
            }
            .streak-line { gap: 5px; }
            .streak-rule {
                flex-basis: 24px;
                max-width: 42px;
            }
            .streak-sub { font-size: 0.74rem; }
            #lojiro-welcome-balance {
                bottom: 44px;
                font-size: 0.66rem;
                line-height: 1.05;
            }
            .orbit-moon {
                width: 390px;
                height: 390px;
                margin-left: -195px;
                top: 5px;
            }
            .moji-moon {
                width: 78px;
                height: 78px;
                margin-left: -39px;
                top: -43px;
            }
            .moji-moon span {
                font-size: 1.32rem;
                letter-spacing: -2px;
                line-height: 0.72;
            }
            .moji-moon::before {
                width: 185px;
                height: 58px;
                filter: blur(11px);
                right: 74%;
            }
            .moji-moon::after {
                width: 135px;
                height: 54px;
                filter: blur(2.2px);
                right: 94%;
            }
        }


        /* ── LOJIRO / THEME CURRENCY ── */
        #category-banner { position: relative; }
        #category-currency-badge {
            position: static;
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 4px;
            padding: 3px 7px;
            border-radius: 999px;
            border: 1px solid var(--accent);
            background: rgba(10,10,10,0.55);
            color: var(--yellow);
            font-family: 'Courier New', monospace;
            font-size: 0.72rem;
            font-weight: 400;
            letter-spacing: 1px;
            box-shadow: 0 0 10px rgba(191,90,242,0.28);
        }
        #lojiro-welcome-balance {
            position: absolute;
            bottom: 54px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            color: #62ff79;
            font-family: 'Courier New', monospace;
            font-size: 0.74rem;
            font-weight: 400;
            letter-spacing: 1px;
            line-height: 1.08;
            text-align: center;
            text-shadow:
                0 0 4px rgba(98,255,121,0.86),
                0 0 10px rgba(98,255,121,0.34),
                0 1px 0 rgba(0,0,0,0.82);
            opacity: 0.96;
            pointer-events: none;
            white-space: normal;
        }
        #lojiro-welcome-balance .wallet-label,
        #lojiro-welcome-balance .wallet-values {
            display: block;
        }
        #lojiro-welcome-balance .wallet-values {
            font-size: 0.68rem;
        }
        #currency-intro-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 101;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: #050005;
        }
        #currency-intro-box {
            width: 100%;
            max-width: 340px;
            border-radius: 18px;
            border: 2px solid var(--accent);
            background: var(--surface);
            box-shadow: 0 0 40px rgba(191,90,242,0.35);
            padding: 24px 22px;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 14px;
            animation: slideUp 0.4s cubic-bezier(.175,.885,.32,1.275);
        }
        #currency-intro-title {
            color: var(--yellow);
            font-family: 'Courier New', monospace;
            font-size: 0.82rem;
            font-weight: 400;
            letter-spacing: 2px;
        }
        #currency-intro-category {
            color: var(--accent);
            font-family: 'Courier New', monospace;
            font-size: 1.25rem;
            font-weight: 400;
            letter-spacing: 2px;
            line-height: 1.2;
        }
        #currency-intro-icon {
            font-size: 3.4rem;
            line-height: 1;
            filter: drop-shadow(0 0 12px rgba(191,90,242,0.55));
        }
        #currency-intro-text {
            color: var(--text);
            font-family: 'Courier New', monospace;
            font-size: 0.92rem;
            line-height: 1.6;
        }
        #currency-intro-text b {
            color: var(--yellow);
        }
        .lojiro-line {
            color: var(--accent);
            font-weight: 400;
        }


        /* ── WELCOME → LOJIRO BRIEFING TRANSITION ── */
        .modal-wrapper.welcome-transitioning .modal-content {
            animation: planetMoveAway 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .modal-wrapper.welcome-transitioning .orbit-moon {
            animation: moonToBriefing 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .modal-wrapper.welcome-transitioning #welcome-date-outside,
        .modal-wrapper.welcome-transitioning .moji-moon::before,
        .modal-wrapper.welcome-transitioning .moji-moon::after {
            opacity: 0;
            transition: opacity 0.55s ease;
        }
        @keyframes planetMoveAway {
            0%   { transform: scale(1); opacity: 1; filter: blur(0); }
            100% { transform: scale(0.62); opacity: 0; filter: blur(10px); }
        }
        @keyframes moonToBriefing {
            0%   { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.55); opacity: 0; }
        }

        /* circular moon-style briefing modal */
        #currency-intro-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 101;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: var(--modal-bg);
            overflow: hidden;
        }
        #currency-intro-modal.on { display: flex; animation: fadeIn 0.32s ease; }
        #currency-intro-modal.leaving { animation: fadeOut 0.55s ease forwards; }
        #currency-intro-modal::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.72;
            background:
                radial-gradient(circle at 12% 18%, rgba(255,255,255,0.78) 0 1px, transparent 3px),
                radial-gradient(circle at 18% 72%, rgba(191,90,242,0.58) 0 1px, transparent 4px),
                radial-gradient(circle at 28% 30%, rgba(255,204,0,0.62) 0 1.5px, transparent 5px),
                radial-gradient(circle at 42% 84%, rgba(255,255,255,0.7) 0 1px, transparent 3px),
                radial-gradient(circle at 62% 16%, rgba(236,10,187,0.52) 0 1.5px, transparent 5px),
                radial-gradient(circle at 78% 38%, rgba(255,255,255,0.78) 0 1px, transparent 3px),
                radial-gradient(circle at 88% 76%, rgba(255,204,0,0.54) 0 1.5px, transparent 5px),
                radial-gradient(ellipse at 20% 75%, rgba(191,90,242,0.16) 0%, transparent 32%),
                radial-gradient(ellipse at 82% 24%, rgba(255,204,0,0.12) 0%, transparent 30%),
                radial-gradient(ellipse at 54% 52%, rgba(236,10,187,0.12) 0%, transparent 36%);
            filter: drop-shadow(0 0 5px rgba(255,255,255,0.45));
            animation: galaxyDrift 14s ease-in-out infinite alternate;
        }
        #currency-intro-box {
            width: 330px;
            height: 330px;
            max-width: calc(100vw - 36px);
            max-height: calc(100vw - 36px);
            border-radius: 50%;
            border: none;
            background:
                radial-gradient(circle at 27% 24%, rgba(255,255,255,0.46) 0%, transparent 18%),
                radial-gradient(circle at 78% 28%, rgba(255,204,0,0.58) 0%, transparent 18%),
                radial-gradient(circle at 34% 76%, rgba(236,10,187,0.72) 0%, transparent 46%),
                radial-gradient(circle at 68% 66%, rgba(144,60,255,0.58) 0%, transparent 44%),
                radial-gradient(circle at 48% 48%, #bf5af2 0%, #6f1d93 54%, #3a0754 100%);
            background-size: 180% 180%, 150% 150%, 205% 205%, 190% 190%, 165% 165%;
            box-shadow:
                0 0 24px rgba(191,90,242,0.98),
                0 0 68px rgba(236,10,187,0.48),
                inset 0 0 28px rgba(255,255,255,0.16);
            padding: 34px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            overflow: hidden;
            animation: briefingMoonBirth 0.82s cubic-bezier(0.16, 1, 0.3, 1), mojiMoonFluid 9s ease-in-out infinite;
            transform-origin: 50% 20%;
            position: relative;
            z-index: 1;
        }
        @keyframes galaxyDrift {
            from { transform: translate3d(-8px, -6px, 0) scale(1); }
            to   { transform: translate3d(8px, 7px, 0) scale(1.025); }
        }
        @keyframes briefingMoonBirth {
            0%   { transform: translateY(-150px) scale(0.74); opacity: 0; }
            45%  { opacity: 1; }
            78%  { transform: translateY(8px) scale(1.02); opacity: 1; }
            100% { transform: translateY(0) scale(1); opacity: 1; }
        }
        #currency-intro-title {
            color: #fff;
            font-family: 'Courier New', monospace;
            font-size: 1rem;
            font-weight: 400;
            letter-spacing: 1px;
            line-height: 1.25;
            text-shadow: 0 0 7px rgba(0,0,0,0.95);
        }
        #currency-intro-title b {
            color: var(--yellow);
            font-weight: 400;
        }
        #currency-intro-category:empty {
            display: none;
        }
        #currency-intro-category,
        #currency-intro-currency {
            color: #fff;
            font-family: 'Courier New', monospace;
            font-size: 0.98rem;
            font-weight: 400;
            letter-spacing: 0;
            line-height: 1.28;
            text-shadow: 0 0 7px rgba(0,0,0,0.95);
        }
        #currency-intro-category b,
        #currency-intro-currency b {
            color: var(--yellow);
        }
        #currency-intro-icon {
            font-size: 3.4rem;
            line-height: 1;
            filter: drop-shadow(0 0 12px rgba(0,0,0,0.65));
            margin: 2px 0;
        }
        .currency-intro-kicker {
            font-size: 0.78rem;
            opacity: 0.92;
        }
        .currency-intro-main {
            margin-top: 2px;
            font-size: 1.02rem;
        }
        #currency-intro-text {
            color: #fff;
            font-family: 'Courier New', monospace;
            font-size: 0.96rem;
            font-weight: 400;
            line-height: 1.25;
            max-width: 258px;
            text-shadow: 0 0 7px rgba(0,0,0,0.95);
        }
        #currency-intro-text b {
            color: var(--yellow);
            font-weight: 400;
        }
        #currency-intro-btn {
            margin: 2px 0;
            min-width: 84px;
            justify-content: center;
            background: rgba(10,10,10,0.10);
            color: #000;
            border-color: rgba(0,0,0,0.58);
            font-size: 0.86rem;
            padding: 5px 16px;
            box-shadow: 0 0 12px rgba(0,0,0,0.16);
        }
        @media (max-width: 480px) {
            #currency-intro-box {
                width: 300px;
                height: 300px;
                padding: 28px;
                gap: 7px;
            }
            #currency-intro-icon { font-size: 3rem; }
            #currency-intro-category,
            #currency-intro-currency { font-size: 0.88rem; }
            .currency-intro-kicker { font-size: 0.7rem; }
            .currency-intro-main { font-size: 0.92rem; }
            #currency-intro-text { font-size: 0.84rem; max-width: 226px; }
        }



        #replay-lock.on ~ #dev-bar,
        #win-overlay.on ~ #dev-bar {
            display: none !important;
        }

        /* ── MAGIC WIN CELEBRATION BAR ── */
        /* ── FLOATING STATS BUTTON ── */
        .floating-btn {
            position: fixed; bottom: 80px; right: 16px;
            background: var(--accent); color: #fff; border: none;
            border-radius: 50px; padding: 10px 18px; font-size: 0.82rem;
            font-weight: 400; cursor: pointer; font-family: 'Courier New', monospace;
            letter-spacing: 1px; z-index: 62;
            box-shadow: 0 4px 20px rgba(191,90,242,0.45);
            transition: transform 0.2s, box-shadow 0.2s;
            animation: popIn 0.3s ease;
        }
        .floating-btn:hover { transform: scale(1.07); box-shadow: 0 6px 28px rgba(191,90,242,0.65); }


        /* ── MOON → TRANSPORTER EMITTER HANDOFF ──
           Experimental: the briefing moon powers up and becomes the source of the
           console transporter instead of simply fading away. Core console transporter
           timing remains untouched. */
        #currency-intro-modal.transporter-emitting {
            display: flex;
            animation: none !important;
            background: #020207 !important;
        }
        #currency-intro-modal.transporter-emitting::before {
            animation: scopedStarTwinkle 0.9s ease-in-out both !important;
            opacity: 0.92;
            filter: brightness(1.2) saturate(1.12);
        }
        #currency-intro-modal.transporter-emitting::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: min(360px, 82vw);
            height: 118vh;
            z-index: 0;
            pointer-events: none;
            opacity: 0;
            transform: translate(-50%, -58%) scaleY(0.05);
            transform-origin: 50% 88%;
            border-radius: 999px;
            background:
                radial-gradient(circle at 46% 10%, rgba(255,255,255,0.92) 0 1.5px, transparent 3.5px),
                radial-gradient(circle at 54% 18%, rgba(98,255,121,0.86) 0 1.4px, transparent 3.8px),
                radial-gradient(circle at 42% 28%, rgba(255,75,174,0.74) 0 1.3px, transparent 3.5px),
                radial-gradient(circle at 58% 40%, rgba(191,90,242,0.78) 0 1.5px, transparent 4px),
                radial-gradient(circle at 48% 54%, rgba(255,255,255,0.78) 0 1.2px, transparent 3.5px),
                radial-gradient(circle at 55% 66%, rgba(98,255,121,0.72) 0 1.3px, transparent 3.8px),
                radial-gradient(circle at 44% 78%, rgba(255,204,0,0.64) 0 1.2px, transparent 3.5px),
                radial-gradient(circle at 50% 6%, rgba(120,225,255,0.82) 0 1.4px, transparent 3.6px),
                radial-gradient(circle at 52% 50%, rgba(255,140,40,0.74) 0 1.3px, transparent 3.6px),
                radial-gradient(circle at 47% 88%, rgba(255,40,200,0.84) 0 1.6px, transparent 4.2px),
                repeating-linear-gradient(90deg,
                    transparent 0 14px,
                    rgba(98,255,121,0.16) 15px 16px,
                    transparent 17px 30px),
                linear-gradient(0deg,
                    rgba(255,255,255,0.00) 0%,
                    rgba(255,255,255,0.66) 12%,
                    rgba(98,255,121,0.42) 24%,
                    rgba(255,75,174,0.28) 48%,
                    rgba(255,255,255,0.24) 70%,
                    rgba(255,255,255,0.00) 100%);
            background-size:
                58px 132px, 72px 156px, 66px 148px, 82px 172px,
                62px 138px, 76px 160px, 70px 152px,
                64px 144px, 74px 150px, 60px 136px,
                auto, auto;
            background-position:
                50% -18%, 50% -10%, 50% 0%, 50% 8%,
                50% 16%, 50% 24%, 50% 32%,
                50% 40%, 50% 48%, 50% 56%,
                0 0, 0 0;
            mix-blend-mode: screen;
            filter: blur(0.2px) drop-shadow(0 0 22px rgba(98,255,121,0.55));
            animation: moonEmitterBeam 1.05s linear both;
        }
        #currency-intro-modal.transporter-emitting #currency-intro-box {
            animation: moonEmitterCore 1.05s linear both !important;
            pointer-events: none;
        }
        #currency-intro-modal.transporter-emitting #currency-intro-box::before,
        #currency-intro-modal.transporter-emitting #currency-intro-box::after {
            content: '';
            position: absolute;
            inset: -34px;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            z-index: -1;
            background:
                radial-gradient(circle at 50% 4%, rgba(255,255,255,0.98) 0 2px, transparent 5px),
                radial-gradient(circle at 82% 20%, rgba(98,255,121,0.9) 0 2px, transparent 6px),
                radial-gradient(circle at 96% 52%, rgba(255,255,255,0.88) 0 1.5px, transparent 5px),
                radial-gradient(circle at 76% 86%, rgba(255,75,174,0.82) 0 2px, transparent 6px),
                radial-gradient(circle at 28% 92%, rgba(255,255,255,0.84) 0 1.5px, transparent 5px),
                radial-gradient(circle at 6% 58%, rgba(191,90,242,0.86) 0 2px, transparent 6px),
                radial-gradient(circle at 16% 18%, rgba(255,204,0,0.82) 0 1.5px, transparent 5px),
                radial-gradient(circle at 35% 8%, rgba(120,225,255,0.86) 0 1.6px, transparent 5px),
                radial-gradient(circle at 64% 68%, rgba(255,140,40,0.8) 0 1.6px, transparent 5.5px),
                radial-gradient(circle at 12% 38%, rgba(255,40,200,0.85) 0 1.8px, transparent 6px);
            filter: drop-shadow(0 0 12px rgba(98,255,121,0.9));
            animation: moonEmitterRimSparks 1.05s linear both;
        }
        #currency-intro-modal.transporter-emitting #currency-intro-box::after {
            inset: -58px;
            transform: rotate(24deg) scale(0.84);
            animation-duration: 1.05s;
            animation-delay: 0.06s;
        }
        #currency-intro-modal.transporter-emitting #currency-intro-title,
        #currency-intro-modal.transporter-emitting #currency-intro-currency,
        #currency-intro-modal.transporter-emitting #currency-intro-icon,
        #currency-intro-modal.transporter-emitting #currency-intro-text,
        #currency-intro-modal.transporter-emitting #currency-intro-btn {
            animation: moonEmitterContentVanish 0.48s linear both;
        }
        @keyframes moonEmitterContentVanish {
            0% { opacity: 1; filter: blur(0) brightness(1); transform: translateY(0); }
            100% { opacity: 0; filter: blur(3px) brightness(1.6); transform: translateY(-14px); }
        }
        @keyframes moonEmitterCore {
            0% {
                opacity: 1;
                transform: scale(1);
                filter: brightness(1) saturate(1);
                box-shadow:
                    0 0 24px rgba(191,90,242,0.98),
                    0 0 68px rgba(236,10,187,0.48),
                    inset 0 0 28px rgba(255,255,255,0.16);
            }
            28% {
                opacity: 1;
                transform: scale(1.03);
                filter: brightness(1.28) saturate(1.18);
                box-shadow:
                    0 0 32px rgba(255,255,255,0.72),
                    0 0 84px rgba(98,255,121,0.44),
                    0 0 120px rgba(191,90,242,0.36),
                    inset 0 0 36px rgba(255,255,255,0.28);
            }
            58% {
                opacity: 0.96;
                transform: translateY(-8px) scale(0.94, 1.08);
                filter: brightness(1.62) saturate(1.28) blur(0.4px);
            }
            82% {
                opacity: 0.46;
                transform: translateY(-24px) scale(0.42, 1.34);
                filter: brightness(2.15) saturate(1.35) blur(1.2px);
            }
            100% {
                opacity: 0;
                transform: translateY(-42px) scale(0.12, 1.72);
                filter: brightness(2.4) saturate(1.2) blur(2.4px);
            }
        }
        @keyframes moonEmitterBeam {
            0% {
                opacity: 0;
                transform: translate(-50%, -58%) scaleY(0.05);
                background-position:
                    50% 126%, 50% 120%, 50% 112%, 50% 104%,
                    50% 96%, 50% 88%, 50% 80%,
                    50% 72%, 50% 64%, 50% 56%,
                    0 0, 0 0;
            }
            18% {
                opacity: 0.28;
                transform: translate(-50%, -62%) scaleY(0.18);
            }
            42% {
                opacity: 0.85;
                transform: translate(-50%, -70%) scaleY(0.52);
            }
            76% {
                opacity: 1;
                transform: translate(-50%, -84%) scaleY(0.92);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -92%) scaleY(1.08);
                background-position:
                    50% 16%, 50% 2%, 50% -10%, 50% -24%,
                    50% -38%, 50% -50%, 50% -64%,
                    50% -78%, 50% -92%, 50% -106%,
                    0 0, 0 0;
            }
        }
        @keyframes moonEmitterRimSparks {
            0% { opacity: 0; transform: translateY(8px) rotate(0deg) scale(0.82); }
            22% { opacity: 0.8; transform: translateY(-2px) rotate(18deg) scale(1); }
            55% { opacity: 1; transform: translateY(-20px) rotate(54deg) scale(1.12); }
            82% { opacity: 0.85; transform: translateY(-46px) rotate(92deg) scale(1.22); }
            100% { opacity: 0; transform: translateY(-82px) rotate(116deg) scale(1.36); }
        }

        /* ── REAL GOT IT BUTTONS ── */
        .got-it-btn {
            margin: 18px auto 0;
            min-width: 118px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--muted);
            font-size: 0.85rem;
            text-transform: uppercase;
        }
        .got-it-btn:hover {
            background: var(--surface2);
            border-color: var(--accent);
            color: var(--text);
        }
        #exchange-stats-btn,
        #stats-back-btn,
        #share-stats-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--muted);
            box-shadow: none;
            border-radius: 8px;
            padding: 10px 22px;
            min-height: 42px;
            min-width: 118px;
            font-size: 0.85rem;
            font-weight: 400;
            text-transform: uppercase;
        }
        #exchange-stats-btn:hover,
        #stats-back-btn:hover,
        #share-stats-btn:hover {
            background: var(--surface2);
            border-color: var(--accent);
            color: var(--text);
        }
        #phase-modal .got-it-btn,
        #naughty-modal-content .got-it-btn,
        #dict-hint-modal-box .got-it-btn,
        #hint-modal-box .got-it-btn,
        #help-modal-box .got-it-btn {
            position: static;
        }

        /* retro console skin for core modals */
        #phase-modal,
        #emoji-modal-box,
        #naughty-modal-content {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.18), transparent 54%),
                rgba(28,28,32,0.82);
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 12px;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 3px 0 rgba(0,0,0,0.5),
                0 0 22px rgba(255,204,0,0.10),
                0 0 34px rgba(191,90,242,0.16);
        }
        #emoji-modal-box {
            border-radius: 14px;
        }
        #emoji-modal-q,
        #emoji-modal-fb,
        #naughty-text,
        #phase-title,
        #phase-sub {
            text-shadow:
                0 0 5px rgba(0,0,0,0.95),
                0 0 12px rgba(255,204,0,0.16);
        }
        .em-score-side,
        .ecbtn,
        #phase-secret-reveal,
        #naughty-emoji-display {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.18), transparent 54%),
                rgba(28,28,32,0.72);
            border: 1px solid rgba(255,255,255,0.16);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 3px 0 rgba(0,0,0,0.5),
                0 0 12px rgba(255,204,0,0.08);
        }
        .ecbtn,
        #naughty-emoji-display {
            border-radius: 10px;
        }
        #naughty-emoji-display {
            min-width: clamp(62px, 22vw, 82px);
            min-height: clamp(54px, 18vw, 70px);
            max-width: 100%;
            max-height: 28dvh;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: clamp(5px, 2vw, 8px) clamp(8px, 3vw, 12px);
            line-height: 1;
        }
        .modal-content,
        #currency-intro-box {
            border: 1px solid rgba(255,204,0,0.36);
            box-shadow:
                inset 0 2px 0 rgba(255,255,255,0.22),
                inset 0 -18px 30px rgba(0,0,0,0.22),
                0 4px 0 rgba(0,0,0,0.42),
                0 0 34px rgba(255,204,0,0.16),
                0 0 68px rgba(191,90,242,0.28);
        }
        .modal-content h2,
        .streak-badge,
        #currency-intro-title,
        #currency-intro-currency,
        #currency-intro-text {
            text-shadow:
                0 0 5px rgba(0,0,0,0.95),
                0 0 12px rgba(255,204,0,0.18);
        }
        .streak-badge,
        #enter-game-btn,
        #currency-intro-btn,
        .got-it-btn,
        .emoji-gotit-btn {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.24) 100%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.18), transparent 54%),
                rgba(28,28,32,0.72);
            border: 1px solid rgba(255,255,255,0.16);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -9px 18px rgba(0,0,0,0.34),
                0 3px 0 rgba(0,0,0,0.5),
                0 0 12px rgba(255,204,0,0.08);
        }
        #currency-intro-btn {
            color: #fff;
        }

/* V29 scoped starfield: welcome + moon briefing */
#welcome-screen,
#currency-intro-modal {
    overflow: hidden;
}
#win-overlay {
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
}
#win-overlay.on {
    transition-delay: 0s;
}
#welcome-screen::before,
#currency-intro-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .84;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 10%, rgba(255,255,255,.95) 0 1px, transparent 2px),
        radial-gradient(circle at 14% 72%, rgba(255,255,255,.85) 0 1px, transparent 2px),
        radial-gradient(circle at 22% 32%, rgba(255,204,0,.75) 0 1.5px, transparent 3px),
        radial-gradient(circle at 31% 86%, rgba(255,255,255,.9) 0 1px, transparent 2px),
        radial-gradient(circle at 39% 18%, rgba(191,90,242,.85) 0 1.5px, transparent 3px),
        radial-gradient(circle at 48% 62%, rgba(255,255,255,.9) 0 1px, transparent 2px),
        radial-gradient(circle at 58% 24%, rgba(255,204,0,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 68% 78%, rgba(255,255,255,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 36%, rgba(255,255,255,1) 0 1.5px, transparent 3px),
        radial-gradient(circle at 84% 12%, rgba(191,90,242,.75) 0 1.5px, transparent 3px),
        radial-gradient(circle at 91% 66%, rgba(255,204,0,.85) 0 1px, transparent 2px),
        radial-gradient(circle at 96% 28%, rgba(255,255,255,.95) 0 1px, transparent 2px),
        radial-gradient(ellipse at 28% 44%, rgba(191,90,242,.22) 0%, transparent 34%),
        radial-gradient(ellipse at 72% 38%, rgba(255,204,0,.12) 0%, transparent 28%),
        radial-gradient(ellipse at 58% 76%, rgba(191,90,242,.18) 0%, transparent 32%),
        #020207;
    background-size:
        240px 240px, 310px 310px, 370px 370px, 290px 290px,
        430px 430px, 340px 340px, 270px 270px, 390px 390px,
        260px 260px, 360px 360px, 300px 300px, 420px 420px,
        100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: scopedStarTwinkle 16s ease-in-out infinite alternate;
}
#welcome-screen::after,
#currency-intro-modal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .56;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 22%, rgba(255,255,255,.72) 0 1px, transparent 2px),
        radial-gradient(circle at 24% 68%, rgba(255,75,174,.55) 0 1px, transparent 3px),
        radial-gradient(circle at 40% 12%, rgba(255,255,255,.62) 0 1px, transparent 2px),
        radial-gradient(circle at 64% 72%, rgba(191,90,242,.58) 0 1px, transparent 3px),
        radial-gradient(circle at 82% 28%, rgba(255,204,0,.5) 0 1px, transparent 2px),
        radial-gradient(circle at 92% 88%, rgba(255,255,255,.52) 0 1px, transparent 2px),
        radial-gradient(ellipse at 52% 48%, rgba(255,75,174,.1) 0%, transparent 38%),
        transparent;
    background-size:
        520px 520px, 610px 610px, 470px 470px,
        680px 680px, 560px 560px, 640px 640px, 100% 100%, 100% 100%;
    animation: scopedStarDrift 18s ease-in-out infinite;
}
#welcome-screen > *,
#currency-intro-modal > * {
    position: relative;
    z-index: 1;
}
@keyframes scopedStarTwinkle {
    0% {
        filter: brightness(.9);
        opacity: .72;
    }
    100% {
        filter: brightness(1.2);
        opacity: .9;
    }
}
@keyframes scopedStarDrift {
    0% {
        background-position:
            0 0, 0 0, 0 0, 0 0,
            0 0, 0 0, 0 0, 0 0;
        filter: brightness(.92);
    }
    50% {
        background-position:
            42px 24px, -36px 34px, 28px -40px, -46px -22px,
            34px 48px, -44px 20px, 0 0, 0 0;
        filter: brightness(1.24);
    }
    100% {
        background-position:
            0 0, 0 0, 0 0, 0 0,
            0 0, 0 0, 0 0, 0 0;
        filter: brightness(.92);
    }
}
@media (prefers-reduced-motion: reduce) {
    body,
    #welcome-screen::before,
    #welcome-screen::after,
    #currency-intro-modal::before,
    #currency-intro-modal::after,
    #win-overlay,
    #category-banner,
    #welcome-screen.on .modal-wrapper:not(.welcome-transitioning) .modal-content:not(.planet-poked),
    #welcome-screen.on .modal-wrapper:not(.welcome-transitioning) #lojiro-welcome-balance {
        animation: none;
    }
    #welcome-screen.on .modal-wrapper:not(.welcome-transitioning) #welcome-date-outside {
        animation: fadeIn 0.6s ease;
    }
}


        /* ── PHASE 3 CRT CLUE MONITOR ── */
        #console-info-bay.phase3-active #clue-banner {
            inset: 0 auto auto 50%;
            width: min(100%, 420px);
            max-width: 420px;
            height: 66px;
            min-height: 66px;
            transform: translateX(-50%);
            border-radius: 10px;
            padding: 7px 14px 8px;
            border: 1px solid rgba(98,255,121,0.24);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 34%, rgba(0,0,0,0.34) 100%),
                radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.08), transparent 42%),
                radial-gradient(ellipse at 50% 74%, rgba(98,255,121,0.13), transparent 58%),
                radial-gradient(circle at 50% 112%, rgba(255,204,0,0.14), transparent 55%),
                rgba(24,24,27,0.86) !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.05),
                inset 0 0 0 1px rgba(0,0,0,0.7),
                inset 0 -10px 22px rgba(0,0,0,0.46),
                inset 0 0 18px rgba(98,255,121,0.08),
                0 2px 0 rgba(0,0,0,0.58),
                0 0 12px rgba(98,255,121,0.10) !important;
            overflow: hidden;
        }
        #console-info-bay.phase3-active #clue-banner::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.18), transparent 34%),
                linear-gradient(180deg, rgba(255,255,255,0.07), transparent 30%, transparent 70%, rgba(0,0,0,0.30));
            opacity: 0.56;
            mix-blend-mode: screen;
        }
        #console-info-bay.phase3-active #clue-banner > * {
            position: relative;
            z-index: 1;
        }
        #console-info-bay.phase3-active #clue-label {
            color: #62ff79;
            font-size: clamp(0.58rem, 2.2vw, 0.72rem);
            letter-spacing: 1.4px;
            text-shadow: 0 0 6px rgba(98,255,121,0.46);
        }
        #console-info-bay.phase3-active #clue-line2 {
            gap: clamp(5px, 1.5vw, 9px);
        }
        #console-info-bay.phase3-active #clue-word,
        #console-info-bay.phase3-active #clue-answer {
            color: #62ff79;
            text-shadow: 0 0 7px rgba(98,255,121,0.42);
        }
        #console-info-bay.phase3-active #clue-emoji {
            filter: drop-shadow(0 0 5px rgba(98,255,121,0.18));
        }
        #console-info-bay.phase3-active .clue-sep {
            color: var(--yellow);
            opacity: 0.9;
            text-shadow: 0 0 7px rgba(255,204,0,0.35);
        }
        @media (max-width: 480px) {
            #console-info-bay.phase3-active #clue-banner {
                height: 62px;
                min-height: 62px;
                padding-left: 10px;
                padding-right: 10px;
            }
        }

        /* Keep CRT shells neutral so Edge does not colorize the outside rim.
           The live feedback now comes from the screen content and inset light. */
        .sbox.choice-monitor,
        .tile.phase-complete-blank,
        .tile.phase-complete-crt,
        #category-subtitle-box,
        #lcd-panel,
        #console-info-bay.phase3-active #clue-banner {
            border-color: rgba(255,255,255,0.14) !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.18),
                inset 0 -10px 20px rgba(0,0,0,0.42),
                inset 0 0 20px rgba(255,255,255,0.035),
                0 2px 0 rgba(0,0,0,0.58) !important;
        }

        .sbox.choice-monitor::after,
        .tile.phase-complete-crt::after,
        #category-subtitle-box::after,
        #lcd-panel::after,
        #console-info-bay.phase3-active #clue-banner::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0.62;
            background:
                radial-gradient(circle at 50% 46%, var(--crt-inner-glow, rgba(255,204,0,0.16)), transparent 54%),
                radial-gradient(circle at 50% 78%, rgba(255,255,255,0.055), transparent 48%);
            mix-blend-mode: screen;
        }

        #category-subtitle-box,
        #lcd-panel {
            position: relative;
        }

        #category-subtitle-box .lcd-text,
        #lcd-panel #msg {
            position: relative;
            z-index: 1;
        }

        .sbox.choice-monitor.hit {
            --crt-inner-glow: rgba(126,210,255,0.26);
            border-color: rgba(255,255,255,0.16) !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.20),
                inset 0 -10px 20px rgba(0,0,0,0.44),
                inset 0 0 24px rgba(126,210,255,0.20),
                0 2px 0 rgba(0,0,0,0.58) !important;
        }

        .sbox.choice-monitor.miss {
            --crt-inner-glow: rgba(255,116,136,0.20);
            border-color: rgba(255,255,255,0.14) !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.16),
                inset 0 -10px 20px rgba(0,0,0,0.46),
                inset 0 0 24px rgba(255,116,136,0.15),
                0 2px 0 rgba(0,0,0,0.58) !important;
        }

        .choice-monitor.hit .choice-emoji {
            filter: drop-shadow(0 0 8px rgba(126,210,255,0.38)) drop-shadow(0 2px 2px rgba(0,0,0,0.5));
        }

        .choice-monitor.miss .choice-emoji {
            filter: drop-shadow(0 0 8px rgba(255,116,136,0.30)) drop-shadow(0 2px 2px rgba(0,0,0,0.5));
        }

        .choice-monitor.hit .choice-label {
            text-shadow:
                0 0 5px rgba(98,255,121,0.68),
                0 0 11px rgba(98,255,121,0.24);
        }

        .choice-monitor.miss .choice-label {
            text-shadow:
                0 0 5px rgba(255,116,136,0.58),
                0 0 11px rgba(255,116,136,0.22);
        }

        .tile.phase-complete-crt {
            --crt-inner-glow: rgba(255,204,0,0.10);
        }

        .tile.phase-complete-crt .phase-complete-emoji {
            filter:
                drop-shadow(0 0 6px rgba(255,204,0,0.34))
                drop-shadow(0 0 12px rgba(255,204,0,0.16));
        }

        #category-subtitle-box,
        #lcd-panel,
        #console-info-bay.phase3-active #clue-banner {
            --crt-inner-glow: rgba(98,255,121,0.13);
        }

        #console-info-bay.phase3-active #clue-label,
        #console-info-bay.phase3-active #clue-word,
        #console-info-bay.phase3-active #clue-answer {
            text-shadow:
                0 0 5px rgba(98,255,121,0.54),
                0 0 12px rgba(98,255,121,0.20);
        }

        #console-info-bay.phase3-active #clue-emoji {
            filter:
                drop-shadow(0 0 6px rgba(98,255,121,0.28))
                drop-shadow(0 0 12px rgba(98,255,121,0.12));
        }

        /* CRT content rule: symbols live inside the tube, not on top of it. */
        .sbox.choice-monitor::after,
        .tile.phase-complete-crt::after,
        #category-subtitle-box::after,
        #lcd-panel::after,
        #console-info-bay.phase3-active #clue-banner::after {
            z-index: 2;
            opacity: 0.48;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.055), transparent 20%, transparent 74%, rgba(0,0,0,0.22)),
                repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 4px),
                radial-gradient(circle at 50% 46%, var(--crt-inner-glow, rgba(255,204,0,0.14)), transparent 56%);
        }

        .tile.phase-complete-crt::after {
            opacity: 0.28;
            animation: phaseCompleteCrtScreenWake 0.72s steps(4, end) both;
            animation-delay: calc(var(--pc-i, 0) * 38ms);
        }

        .sbox.choice-monitor > *,
        .tile.phase-complete-crt > *,
        #category-subtitle-box > *,
        #lcd-panel > *,
        #console-info-bay.phase3-active #clue-banner > * {
            position: relative;
            z-index: 1;
        }

        .choice-emoji,
        .sbox-emojis,
        .sem,
        .tile.phase-complete-crt .phase-complete-emoji,
        #clue-emoji {
            opacity: 0.92;
            transform: translateZ(0);
            mix-blend-mode: screen;
            filter:
                saturate(0.92)
                contrast(0.96)
                brightness(1.04)
                drop-shadow(0 0 4px rgba(255,224,126,0.22))
                drop-shadow(0 0 10px rgba(255,204,0,0.10));
        }

        .choice-label,
        .sbox-ltr,
        #category-subtitle-box .lcd-text,
        #lcd-panel #msg,
        #console-info-bay.phase3-active #clue-label,
        #console-info-bay.phase3-active #clue-word,
        #console-info-bay.phase3-active #clue-answer,
        #console-info-bay.phase3-active .clue-sep {
            opacity: 0.94;
            mix-blend-mode: screen;
            -webkit-font-smoothing: antialiased;
            text-shadow:
                0 0 4px currentColor,
                0 0 12px color-mix(in srgb, currentColor 54%, transparent),
                0 0 22px color-mix(in srgb, currentColor 24%, transparent),
                0 1px 0 rgba(0,0,0,0.42);
        }

        .choice-monitor.hit .choice-emoji,
        .choice-monitor.hit .choice-label,
        .sbox-ltr.done {
            filter:
                saturate(0.95)
                contrast(0.95)
                brightness(1.08)
                drop-shadow(0 0 5px rgba(98,255,121,0.32))
                drop-shadow(0 0 12px rgba(98,255,121,0.14));
            text-shadow:
                0 0 4px rgba(98,255,121,0.72),
                0 0 12px rgba(98,255,121,0.26);
        }

        .choice-monitor.miss .choice-emoji,
        .choice-monitor.miss .choice-label {
            filter:
                saturate(0.9)
                contrast(0.92)
                brightness(0.98)
                drop-shadow(0 0 5px rgba(255,116,136,0.30))
                drop-shadow(0 0 12px rgba(255,116,136,0.12));
            text-shadow:
                0 0 4px rgba(255,116,136,0.62),
                0 0 12px rgba(255,116,136,0.22);
        }

        /* Phase 3 turns into a compact CRT unit with stereo speakers. */
        #console-info-bay.phase3-active {
            overflow: hidden;
            background:
                linear-gradient(90deg,
                    transparent 0,
                    transparent clamp(50px, 13vw, 66px),
                    rgba(12,8,10,0.72) clamp(64px, 17vw, 84px),
                    rgba(48,36,26,0.42) 42%,
                    rgba(48,36,26,0.42) 58%,
                    rgba(12,8,10,0.72) calc(100% - clamp(64px, 17vw, 84px)),
                    transparent calc(100% - clamp(66px, 13vw, 50px)),
                    transparent 100%),
                linear-gradient(180deg, rgba(255,255,255,0.05), transparent 44%, rgba(0,0,0,0.18)),
                rgba(18,10,22,0.78) !important;
            background-size: 100% 10px, 100% 100%, 100% 100% !important;
            background-position: 0 50%, 0 0, 0 0 !important;
            background-repeat: no-repeat !important;
        }

        #console-info-bay.phase3-active::before,
        #console-info-bay.phase3-active::after {
            content: "";
            position: absolute;
            top: 50%;
            z-index: 1;
            width: clamp(38px, 10.6vw, 48px);
            height: clamp(38px, 10.6vw, 48px);
            border-radius: 50%;
            transform: translateY(-50%);
            border: 1px solid rgba(255,255,255,0.16);
            background:
                radial-gradient(circle at 50% 50%, rgba(255,204,0,0.18) 0 5%, rgba(0,0,0,0.92) 6% 12%, transparent 13%),
                conic-gradient(from 0deg,
                    rgba(255,232,132,0.20) 0 7deg,
                    transparent 7deg 54deg,
                    rgba(126,210,255,0.18) 54deg 62deg,
                    transparent 62deg 118deg,
                    rgba(255,82,203,0.18) 118deg 126deg,
                    transparent 126deg 180deg,
                    rgba(255,232,132,0.16) 180deg 188deg,
                    transparent 188deg 242deg,
                    rgba(126,210,255,0.14) 242deg 250deg,
                    transparent 250deg 306deg,
                    rgba(255,82,203,0.16) 306deg 314deg,
                    transparent 314deg 360deg),
                repeating-radial-gradient(circle, rgba(255,255,255,0.13) 0 1px, transparent 1px 4px),
                radial-gradient(circle at 50% 50%, rgba(0,0,0,0.92) 0 27%, rgba(53,37,26,0.78) 28% 52%, rgba(7,7,9,0.94) 53% 100%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.20),
                inset 0 -8px 14px rgba(0,0,0,0.42),
                0 2px 0 rgba(0,0,0,0.58);
            opacity: 0.96;
            pointer-events: none;
            animation: cassetteReelSpin 6.2s linear infinite;
        }

        #console-info-bay.phase3-active::before {
            left: clamp(9px, 3vw, 18px);
        }

        #console-info-bay.phase3-active::after {
            right: clamp(9px, 3vw, 18px);
            animation-direction: reverse;
            animation-duration: 5.4s;
        }

        #console-info-bay.phase3-active.speaker-poked-left::before,
        #console-info-bay.phase3-active.speaker-poked-right::after {
            animation: speakerPokeThump 0.92s cubic-bezier(.16, 1, .3, 1) both;
        }

        #console-info-bay.phase3-active.magic-won.speaker-win-pulse::before,
        #console-info-bay.phase3-active.magic-won.speaker-win-pulse::after {
            animation: speakerPokeThump 0.92s cubic-bezier(.16, 1, .3, 1) both !important;
        }

        #console-info-bay.phase3-active.magic-won::before,
        #console-info-bay.phase3-active.magic-won::after {
            animation:
                cassetteReelSpin 4.2s linear infinite,
                magicWonSpeakerGlow 2.4s ease-in-out infinite;
        }

        #console-info-bay.phase3-active.magic-won::after {
            animation-direction: reverse, normal;
            animation-duration: 3.8s, 2.4s;
        }

        #console-info-bay.phase3-active #clue-banner {
            z-index: 2;
            width: clamp(238px, 64%, 286px);
            max-width: 286px;
            height: 62px;
            min-height: 62px;
            border-radius: 15px / 18px;
            padding: 7px 12px 8px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 34%, rgba(0,0,0,0.38) 100%),
                radial-gradient(ellipse at 50% 16%, rgba(255,255,255,0.09), transparent 42%),
                radial-gradient(ellipse at 50% 64%, rgba(98,255,121,0.16), transparent 58%),
                rgba(22,22,25,0.90) !important;
        }

        #console-info-bay.phase3-active.magic-won #clue-banner {
            animation: magicWonCrtGlow 2.4s ease-in-out infinite;
        }

        #console-info-bay.phase3-active.magic-won #clue-banner::after {
            opacity: 0.62;
            animation: magicWonScreenTint 2.4s ease-in-out infinite;
        }

        #console-info-bay.phase3-active #clue-label {
            font-size: clamp(0.5rem, 1.85vw, 0.64rem);
            letter-spacing: 1px;
        }

        #console-info-bay.phase3-active #clue-word,
        #console-info-bay.phase3-active #clue-answer {
            font-size: clamp(0.92rem, 3.4vw, 1.12rem);
            letter-spacing: clamp(0.6px, 0.55vw, 1.6px);
        }

        #console-info-bay.phase3-active #clue-emoji {
            flex-basis: clamp(26px, 7.5vw, 34px);
            width: clamp(26px, 7.5vw, 34px);
            font-size: clamp(1.28rem, 5.7vw, 1.72rem);
        }

        @media (max-width: 370px) {
            #console-info-bay.phase3-active::before,
            #console-info-bay.phase3-active::after {
                width: 34px;
                height: 34px;
            }

            #console-info-bay.phase3-active #clue-banner {
                width: 230px;
                max-width: 230px;
                padding-left: 9px;
                padding-right: 9px;
            }
        }

        @keyframes speakerPokeThump {
            0%, 18%, 40%, 60%, 100% {
                transform: translateY(-50%) scale(1);
                filter: brightness(1);
            }
            7%, 27%, 49%, 70% {
                transform: translateY(-50%) scale(1.16);
                filter: brightness(1.38) saturate(1.18);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.28),
                    inset 0 -8px 14px rgba(0,0,0,0.38),
                    0 2px 0 rgba(0,0,0,0.58),
                    0 0 16px rgba(255,204,0,0.24);
            }
            100% {
                transform: translateY(-50%) scale(1);
                filter: brightness(1);
            }
        }

        @keyframes cassetteReelSpin {
            from { transform: translateY(-50%) rotate(0deg); }
            to { transform: translateY(-50%) rotate(360deg); }
        }

        @keyframes magicWonCrtGlow {
            0%, 100% {
                filter: brightness(0.96) saturate(1);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.18),
                    inset 0 -10px 20px rgba(0,0,0,0.42),
                    inset 0 0 22px rgba(98,255,121,0.13),
                    0 2px 0 rgba(0,0,0,0.58) !important;
            }
            33% {
                filter: brightness(1.06) saturate(1.12);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.20),
                    inset 0 -10px 20px rgba(0,0,0,0.42),
                    inset 0 0 24px rgba(72,150,255,0.20),
                    0 2px 0 rgba(0,0,0,0.58) !important;
            }
            66% {
                filter: brightness(1.02) saturate(1.08);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.20),
                    inset 0 -10px 20px rgba(0,0,0,0.42),
                    inset 0 0 24px rgba(255,204,0,0.18),
                    0 2px 0 rgba(0,0,0,0.58) !important;
            }
        }

        @keyframes magicWonScreenTint {
            0%, 100% {
                background:
                    linear-gradient(180deg, rgba(255,255,255,0.055), transparent 20%, transparent 74%, rgba(0,0,0,0.22)),
                    repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 4px),
                    radial-gradient(circle at 50% 46%, rgba(98,255,121,0.18), transparent 56%);
            }
            33% {
                background:
                    linear-gradient(180deg, rgba(255,255,255,0.055), transparent 20%, transparent 74%, rgba(0,0,0,0.22)),
                    repeating-linear-gradient(0deg, rgba(255,255,255,0.052) 0 1px, transparent 1px 4px),
                    radial-gradient(circle at 50% 46%, rgba(72,150,255,0.20), transparent 56%);
            }
            66% {
                background:
                    linear-gradient(180deg, rgba(255,255,255,0.055), transparent 20%, transparent 74%, rgba(0,0,0,0.22)),
                    repeating-linear-gradient(0deg, rgba(255,255,255,0.052) 0 1px, transparent 1px 4px),
                    radial-gradient(circle at 50% 46%, rgba(255,204,0,0.18), transparent 56%);
            }
        }

        @keyframes magicWonSpeakerGlow {
            0%, 100% {
                filter: brightness(0.92) saturate(1);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.20),
                    inset 0 -8px 14px rgba(0,0,0,0.42),
                    0 2px 0 rgba(0,0,0,0.58),
                    0 0 10px rgba(98,255,121,0.12);
            }
            33% {
                filter: brightness(1.08) saturate(1.15);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.22),
                    inset 0 -8px 14px rgba(0,0,0,0.40),
                    0 2px 0 rgba(0,0,0,0.58),
                    0 0 14px rgba(72,150,255,0.18);
            }
            66% {
                filter: brightness(1.02) saturate(1.12);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.22),
                    inset 0 -8px 14px rgba(0,0,0,0.40),
                    0 2px 0 rgba(0,0,0,0.58),
                    0 0 14px rgba(255,204,0,0.16);
            }
        }

        /* Animation stability pass: keep animated surfaces on fixed layers and
           avoid layout recalculation turning visual effects into jumps. */
        html {
            scrollbar-gutter: stable;
        }

        #capture-zone,
        #console-info-bay,
        #console-info-bay > *,
        #category-banner,
        #category-subtitle-box,
        #lcd-panel,
        #slot-machine,
        #score-bar,
        #board-wrap,
        #game-board,
        .row,
        .tile,
        .sbox,
        .key,
        #keyboard,
        #phase-ready-prompt,
        #clue-banner {
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        #capture-zone,
        #console-info-bay,
        #board-wrap,
        #slot-machine {
            contain: layout paint;
        }

        #game-board,
        .tile,
        .sbox,
        #clue-banner,
        #phase-ready-prompt {
            will-change: transform, opacity;
        }

        #status-panel,
        #phase-ready-prompt,
        #clue-banner {
            min-width: 0;
            transform-origin: center center;
        }

        .dev-btn,
        .key,
        .score-side,
        .sbox.choice-monitor {
            transition-property: background-color, border-color, box-shadow, color, filter, opacity, transform;
        }

        #status-panel.secret-cracked-panel {
            position: relative;
            gap: 6px;
            padding: 8px;
            border: 0;
            border-radius: 12px;
            background:
                linear-gradient(135deg, rgba(255,150,150,0.24) 0%, rgba(255,88,88,0.08) 18%, rgba(0,0,0,0.08) 52%, rgba(0,0,0,0.62) 100%),
                linear-gradient(180deg, #30171c 0%, #12080b 52%, #050203 100%);
            box-shadow:
                inset 2px 2px 0 rgba(255,210,210,0.28),
                inset -3px -4px 0 rgba(0,0,0,0.72),
                inset 0 0 0 2px rgba(255,78,78,0.12),
                0 4px 0 rgba(0,0,0,0.76),
                0 8px 16px rgba(0,0,0,0.38);
        }

        #status-panel.secret-cracked-panel::before,
        #status-panel.secret-cracked-panel::after {
            content: "";
            position: absolute;
            pointer-events: none;
            border-radius: inherit;
        }

        #status-panel.secret-cracked-panel::before {
            inset: 0;
            z-index: 0;
            background:
                linear-gradient(135deg, rgba(255,255,255,0.22), transparent 26%),
                linear-gradient(315deg, rgba(0,0,0,0.72), transparent 30%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.26),
                inset 1px 0 0 rgba(255,180,180,0.16),
                inset 0 -5px 8px rgba(0,0,0,0.58);
        }

        #status-panel.secret-cracked-panel::after {
            inset: 5px;
            z-index: 0;
            border-radius: 8px;
            box-shadow:
                inset 0 4px 7px rgba(0,0,0,0.72),
                inset 0 -1px 0 rgba(255,160,160,0.12);
        }

        #status-panel.secret-cracked-panel > * {
            position: relative;
            z-index: 1;
        }

        #status-panel.secret-cracked-prep {
            opacity: 0;
        }

        #status-panel.secret-cracked-reveal {
            opacity: 1;
        }

        .secret-cracked-crt {
            justify-content: center;
            min-width: 0;
            cursor: default;
            pointer-events: none;
            transform: none !important;
            border-color: rgba(255,88,88,0.40);
            box-shadow:
                inset 0 2px 4px rgba(255,255,255,0.08),
                inset 0 -7px 12px rgba(0,0,0,0.66),
                inset 0 0 0 2px rgba(0,0,0,0.46),
                0 1px 0 rgba(255,255,255,0.10),
                0 3px 0 rgba(0,0,0,0.74),
                0 0 12px rgba(255,0,20,0.10);
            --crt-inner-glow: rgba(255,0,0,0.22);
            opacity: 1;
            animation: none !important;
        }

        .secret-cracked-crt:hover {
            filter: none;
        }

        .secret-cracked-crt::before {
            opacity: 0.26;
        }

        .secret-cracked-crt::after {
            opacity: 0.66;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.055), transparent 22%, transparent 72%, rgba(0,0,0,0.28)),
                repeating-linear-gradient(0deg, rgba(255,0,0,0.13) 0 1px, transparent 1px 4px),
                radial-gradient(circle at 50% 46%, rgba(255,0,0,0.22), transparent 58%);
        }

        .secret-cracked-word {
            position: relative;
            z-index: 1;
            max-width: 100%;
            text-align: center;
            color: #ff1f1f !important;
            font-family: 'Courier New', monospace;
            font-size: clamp(0.72rem, 2.65vw, 1rem);
            font-weight: 900;
            letter-spacing: clamp(1px, 0.45vw, 2px);
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
            text-shadow:
                0 0 4px rgba(255,0,0,0.88),
                0 0 13px rgba(255,0,0,0.34),
                1px 0 0 rgba(255,255,255,0.22),
                -1px 0 0 rgba(72,150,255,0.22);
            animation: secretWordGlitch 0.62s steps(2, end) both;
            animation-delay: calc(var(--glitch-i, 0) * 150ms);
        }

        @keyframes secretWordGlitch {
            0% {
                opacity: 0;
                transform: translate(-7px, -6px) skewX(-8deg) scale(0.94);
                clip-path: inset(0 100% 0 0);
            }
            18% {
                opacity: 1;
                transform: translate(5px, 3px) skewX(6deg) scale(1.025);
                clip-path: inset(0 0 56% 0);
            }
            36% {
                transform: translate(-3px, -2px) skewX(-4deg) scale(0.985);
                clip-path: inset(42% 0 0 0);
            }
            58% {
                transform: translate(2px, 1px) skewX(3deg) scale(1.012);
                clip-path: inset(0 0 0 0);
            }
            100% {
                opacity: 1;
                transform: translate(0, 0) skewX(0) scale(1);
                clip-path: inset(0 0 0 0);
            }
        }

        @keyframes modalOpacityIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes modalOpacityOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        #currency-intro-modal.transporter-emitting::before {
            display: none !important;
        }

        #welcome-screen.on .modal-wrapper:not(.welcome-transitioning) .modal-content:not(.planet-poked) {
            animation: none !important;
        }

        #welcome-screen.on ~ #capture-zone,
        #welcome-screen.on ~ #keyboard,
        #welcome-screen.on ~ #dev-bar-wrap {
            visibility: hidden;
        }

/* Shared LCD/VFD glass and text stacking. Geometry and finish live with #display-stack. */
#category-subtitle-box,
#lcd-panel {
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

#category-subtitle-box::after,
#lcd-panel::after {
    z-index: 3 !important;
    opacity: 0.82 !important;
    mix-blend-mode: normal !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), transparent 20%, transparent 72%, rgba(0,0,0,0.42)),
        radial-gradient(ellipse at 50% 55%, rgba(255,32,48,0.16), transparent 58%) !important;
}

#category-subtitle-box .lcd-text,
#category-subtitle-box.type-on .lcd-text,
#category-subtitle-box.instruction .lcd-text,
#lcd-panel #msg,
#lcd-panel.on #msg,
#lcd-panel.lcd-invalid #msg,
#lcd-panel.lcd-replay #msg {
    position: relative;
    z-index: 3 !important;
    opacity: 0.82;
    mix-blend-mode: normal;
    padding-inline: 7px;
}

#lcd-panel.on #msg,
#category-subtitle-box.type-on .lcd-text {
    opacity: 0.88;
    animation-timing-function: steps(34, end) !important;
}
/* ── SCORE PANELS AS INSET CASIO-STYLE LCDS ──
   Makes MASTER/HOUSE score boxes match the upper/lower LCD language:
   carved inward, grooved solar-panel grid, text under glass. */
#score-bar {
    gap: 8px;
}

.score-side,
.score-you,
.score-house {
    position: relative;
    overflow: hidden;
    border-radius: 7px !important;
    border: 1px solid rgba(0,0,0,0.72) !important;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.16) 18%, rgba(255,255,255,0.025) 56%, rgba(255,255,255,0.055) 100%),
        repeating-linear-gradient(90deg, rgba(118,145,126,0.34) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(0deg, rgba(118,145,126,0.22) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #101815 0%, #07100d 50%, #030605 100%) !important;
    box-shadow:
        inset 0 4px 7px rgba(0,0,0,0.82),
        inset 0 -1px 0 rgba(197,230,185,0.10),
        inset 0 0 0 1px rgba(0,0,0,0.72),
        0 1px 0 rgba(255,255,255,0.055),
        0 2px 0 rgba(0,0,0,0.58) !important;
    padding: 7px 10px !important;
    min-height: 38px;
}

.score-side::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 21%, transparent 76%, rgba(255,255,255,0.035)),
        linear-gradient(90deg, rgba(255,255,255,0.045), transparent 14%, transparent 86%, rgba(0,0,0,0.28));
    mix-blend-mode: screen;
    opacity: 0.56;
}

.score-side::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: 5px;
    height: 28%;
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
    opacity: 0.48;
}

.score-side > * {
    position: relative;
    z-index: 1;
}

.score-side .score-label,
.score-side .score-amt,
.score-side .score-amt b,
.score-side .coin-emoji {
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    mix-blend-mode: screen;
    -webkit-font-smoothing: antialiased;
}

.score-side .score-label {
    font-size: 0.78rem !important;
    color: rgba(132,255,154,0.92) !important;
    text-shadow:
        0 0 3px rgba(132,255,154,0.80),
        0 0 9px rgba(98,255,121,0.32),
        0 1px 0 rgba(0,0,0,0.66) !important;
    opacity: 0.86 !important;
}

.score-side .score-amt,
.score-side .score-amt b,
.score-side .coin-emoji {
    font-size: 1.18rem !important;
    color: rgba(132,255,154,0.98) !important;
    text-shadow:
        0 0 3px rgba(132,255,154,0.92),
        0 0 10px rgba(98,255,121,0.38),
        0 1px 0 rgba(0,0,0,0.72) !important;
}

.score-house .score-label,
.score-house .score-amt,
.score-house .score-amt b,
.score-house .coin-emoji {
    color: rgba(255,54,76,0.98) !important;
    text-shadow:
        0 0 3px rgba(255,54,76,0.95),
        0 0 10px rgba(255,31,47,0.46),
        0 1px 0 rgba(0,0,0,0.72) !important;
}

.score-side .coin-emoji {
    font-size: 1.32rem !important;
    line-height: 1;
}

.score-side.flash {
    animation: scoreLcdFlash 0.72s steps(4, end) !important;
}

@keyframes scoreLcdFlash {
    0%, 100% { filter: brightness(1) saturate(1); }
    26% { filter: brightness(1.34) saturate(1.18); }
    52% { filter: brightness(0.82) saturate(0.95); }
    76% { filter: brightness(1.18) saturate(1.10); }
}

/* ── 3-CRT RAISED INSTRUMENT CLUSTER PASS ──
   Shared CRT wrapper becomes a proud raised module; each CRT sinks deeper inside it. */
#status-panel {
    position: relative !important;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.055) 13%, rgba(0,0,0,0.18) 54%, rgba(0,0,0,0.42) 100%),
        linear-gradient(90deg, rgba(255,204,0,0.12), transparent 18%, transparent 82%, rgba(191,90,242,0.16)),
        rgba(24,11,28,0.86) !important;
    overflow: visible !important;
}

#status-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255,255,255,0.12);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.18), transparent 28%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0.52)),
        rgba(0,0,0,0.14);
    pointer-events: none;
}

#status-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    pointer-events: none;
}

#status-panel .sbox {
    border: 1px solid rgba(0,0,0,0.72) !important;
    background:
        radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.055), transparent 36%),
        linear-gradient(180deg, rgba(0,0,0,0.76), rgba(0,0,0,0.42) 14%, rgba(16,16,18,0.92) 52%, rgba(0,0,0,0.92) 100%) !important;
    transform: translateY(0);
    overflow: hidden;
}

#status-panel .sbox::before {
    left: 8% !important;
    right: 8% !important;
    top: 9% !important;
    height: 18% !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02)) !important;
    opacity: 0.38 !important;
}

#status-panel .sbox::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 22%, transparent 76%, rgba(0,0,0,0.28)),
        radial-gradient(ellipse at 50% 105%, rgba(255,204,0,0.055), transparent 56%);
}

#status-panel .sbox > * {
    position: relative;
    z-index: 2;
}

#status-panel .sbox.choice-monitor.hit {
    border-color: rgba(36,86,42,0.85) !important;
    box-shadow:
        inset 0 4px 8px rgba(0,0,0,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.16),
        inset 0 0 0 2px rgba(0,0,0,0.50),
        inset 0 0 24px rgba(98,255,121,0.20),
        0 1px 0 rgba(255,255,255,0.14) !important;
}

#status-panel .sbox.choice-monitor.miss {
    border-color: rgba(100,24,36,0.86) !important;
    box-shadow:
        inset 0 4px 8px rgba(0,0,0,0.76),
        inset 0 -1px 0 rgba(255,255,255,0.12),
        inset 0 0 0 2px rgba(0,0,0,0.54),
        inset 0 0 24px rgba(255,74,94,0.18),
        0 1px 0 rgba(255,255,255,0.10) !important;
}

#status-panel.phase3-handoff {
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
#status-panel.phase3-handoff::before,
#status-panel.phase3-handoff::after {
    display: none !important;
}

/* ── 3-CRT / SCORE TUNE: thinner rim, labels safe, narrower score panels ──
   Fixes the too-thick raised CRT cluster bevel, preserves emoji labels,
   pulls score panels away from the console bevels, and brightens HOUSE red LCD. */
#status-panel {
    padding: 5px 7px 6px !important;
    gap: 5px !important;
    height: 64px !important;
    min-height: 64px !important;
    border-radius: 11px !important;
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -2px 0 rgba(0,0,0,0.54),
        inset 0 0 0 1px rgba(255,204,0,0.055),
        0 2px 0 rgba(0,0,0,0.52),
        0 5px 12px rgba(0,0,0,0.26),
        0 0 12px rgba(191,90,242,0.08) !important;
}

#status-panel::before {
    inset: 2px !important;
    border-radius: 9px !important;
    opacity: 0.74 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.42) !important;
}

#status-panel::after {
    left: 8px !important;
    right: 8px !important;
    top: 4px !important;
    height: 1px !important;
    opacity: 0.42 !important;
}

#status-panel .sbox {
    border-radius: 8px !important;
    min-height: 0 !important;
    padding: 3px 5px !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.13),
        inset 0 0 0 1px rgba(0,0,0,0.48),
        inset 0 0 18px rgba(0,0,0,0.56),
        0 1px 0 rgba(255,255,255,0.10) !important;
}

#status-panel .sbox::after {
    inset: 2px !important;
    border-radius: 7px !important;
    opacity: 0.72 !important;
    box-shadow:
        inset 0 1px 4px rgba(0,0,0,0.58),
        inset 0 -1px 0 rgba(255,255,255,0.075) !important;
}

#status-panel .choice-label {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 1px !important;
    line-height: 1.05 !important;
    max-width: calc(100% - 2px) !important;
}

#status-panel .choice-emoji {
    position: relative !important;
    z-index: 3 !important;
}

#score-bar {
    width: calc(100% - 28px) !important;
    max-width: 392px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 12px !important;
}

.score-side,
.score-you,
.score-house {
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-width: 0 !important;
}

.score-house,
.em-score-house {
    background:
        linear-gradient(180deg, rgba(60,0,8,0.86), rgba(24,0,6,0.44) 22%, rgba(8,0,2,0.94) 100%),
        repeating-linear-gradient(90deg, rgba(255,72,88,0.26) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(0deg, rgba(255,72,88,0.18) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #270006 0%, #100003 52%, #050001 100%) !important;
    border-color: rgba(0,0,0,0.72) !important;
    box-shadow:
        inset 0 4px 7px rgba(0,0,0,0.80),
        inset 0 -1px 0 rgba(255,110,120,0.18),
        inset 0 0 0 1px rgba(80,0,8,0.74),
        inset 0 0 20px rgba(255,0,24,0.20),
        0 1px 0 rgba(255,255,255,0.06),
        0 2px 0 rgba(0,0,0,0.58) !important;
}

.score-house .score-label,
.score-house .score-amt,
.score-house .score-amt b,
.score-house .coin-emoji,
.em-score-house .em-score-label,
.em-score-house .em-score-amt {
    color: #ff4354 !important;
    opacity: 1 !important;
    text-shadow:
        0 0 2px rgba(255,230,230,0.96),
        0 0 6px rgba(255,67,84,0.95),
        0 0 14px rgba(255,0,24,0.64),
        0 0 26px rgba(255,0,24,0.34),
        0 1px 0 rgba(0,0,0,0.78) !important;
    filter: brightness(1.18) saturate(1.28) !important;
}

/* Final CRT choice layout: emoji left, larger label right, centered as one unit. */
.sbox.choice-monitor {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(3px, 1.2vw, 6px) !important;
    padding: 4px 6px !important;
}

.sbox.choice-monitor .choice-emoji {
    flex: 0 0 auto;
    font-size: clamp(1.34rem, 4.8vw, 1.82rem) !important;
}

.sbox.choice-monitor .choice-label {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(0.58rem, 2.05vw, 0.8rem) !important;
    line-height: 0.98 !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sbox.choice-monitor .choice-label.choice-label-stacked {
    white-space: normal;
    line-height: 0.94 !important;
    font-size: clamp(0.66rem, 2.25vw, 0.88rem) !important;
    text-overflow: clip;
}

#status-panel .sbox:not(.dead):not(.choice-monitor) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(5px, 1.6vw, 8px) !important;
    padding: 5px 7px !important;
}

#status-panel .sbox:not(.dead):not(.choice-monitor) .sbox-emojis {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: clamp(1.34rem, 5vw, 1.82rem) !important;
    line-height: 1;
    width: clamp(1.7rem, 6vw, 2.15rem);
    flex: 0 0 clamp(1.7rem, 6vw, 2.15rem);
    text-align: center;
}

#status-panel .sbox:not(.dead):not(.choice-monitor) .sbox-ltr {
    order: 2;
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    line-height: 1;
    width: clamp(1.7rem, 6vw, 2.15rem);
    flex: 0 0 clamp(1.7rem, 6vw, 2.15rem);
    text-align: center;
}

#status-panel .sbox:not(.dead):not(.choice-monitor) .sem.win {
    font-size: inherit !important;
}

#status-panel .naughty-console {
    justify-content: center !important;
    transition: opacity 0.22s ease, transform 0.22s ease, filter 0.22s ease;
}

#status-panel .naughty-console .naughty-final-emoji {
    font-size: clamp(1.55rem, 5.8vw, 2.12rem) !important;
    animation: crtChoiceContentIn 0.92s cubic-bezier(0.18, 0.86, 0.2, 1) both !important;
    animation-delay: calc(var(--naughty-i, 0) * 90ms) !important;
    transform-origin: center;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)) !important;
}

#status-panel .sbox.naughty-console.naughty-final-screen {
    animation: naughtyCrtLightPulse 0.82s ease-in-out infinite !important;
    animation-delay: calc(0.92s + (var(--naughty-i, 0) * 90ms)) !important;
}

#status-panel.naughty-exiting .naughty-console {
    opacity: 1;
    transform: none !important;
    filter: none !important;
}

#status-panel.naughty-exiting .naughty-console .naughty-final-emoji {
    animation: none !important;
    transform: translateY(0) scale(1) !important;
}

#status-panel.naughty-exiting .naughty-console .naughty-loop-bonus {
    animation: none !important;
}

#status-panel.naughty-exiting .sbox.naughty-console.naughty-final-screen {
    animation: none !important;
}

#status-panel.naughty-cooldown .sbox.naughty-console.naughty-final-screen,
#status-panel.naughty-cooldown .sbox.naughty-console.naughty-final-screen::before,
#status-panel.naughty-cooldown .naughty-final-emoji,
#status-panel.naughty-cooldown .naughty-loop-bonus {
    animation: none !important;
    transform: none !important;
}

@keyframes naughtyCrtLightPulse {
    0%, 100% {
        filter: brightness(1) saturate(1);
        box-shadow:
            inset 0 3px 6px rgba(0,0,0,0.72),
            inset 0 -1px 0 rgba(255,255,255,0.13),
            inset 0 0 0 1px rgba(191,90,242,0.20),
            inset 0 0 18px rgba(0,0,0,0.56),
            0 0 5px rgba(191,90,242,0.08);
    }
    50% {
        filter: brightness(1.06) saturate(1.04);
        box-shadow:
            inset 0 3px 6px rgba(0,0,0,0.62),
            inset 0 -1px 0 rgba(255,255,255,0.18),
            inset 0 0 0 1px rgba(191,90,242,0.38),
            inset 0 0 20px rgba(191,90,242,0.10),
            0 0 8px rgba(191,90,242,0.14);
    }
}

#status-panel .naughty-console .naughty-flip {
    animation: flip3D 1.18s cubic-bezier(0.18, 0.82, 0.24, 1) forwards !important;
    transform-origin: center top;
}

#status-panel .sbox.choice-monitor,
#status-panel .sbox.naughty-console {
    transform: none !important;
}

#status-panel .sbox.phase-status-crt .choice-emoji,
#status-panel .sbox.phase-status-crt .choice-label {
    animation: none !important;
    transform: none !important;
}

#status-panel .sbox.phase-status-crt .phase-status-letter {
    color: #5daeff !important;
    font-weight: 900 !important;
    text-shadow:
        0 0 4px rgba(208,241,255,0.95),
        0 0 12px rgba(93,174,255,0.72),
        0 1px 0 rgba(0,0,0,0.78) !important;
}

/* === MOJI-LOJI TILE CRT INNER-ANIMATION PASS ===
   Tile housings now stay physically fixed; only the phosphor/letter layer animates. */
#game-board .tile {
    transform: none;
    transform-origin: center;
}

#game-board .tile .tile-char {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0.72em;
    line-height: 1;
    transform: translateY(0);
    will-change: transform, opacity, filter;
    text-shadow:
        0 0 3px rgba(255,255,255,0.46),
        0 1px 0 rgba(0,0,0,0.72);
}

#game-board .tile.slide,
#game-board .tile.lock-drop {
    animation: none !important;
    transform: none !important;
}

#game-board .tile.slide .tile-char {
    animation: tileCrtInnerSettle 0.48s cubic-bezier(.16, 1, .3, 1) both;
}

#game-board .tile.lock-drop .tile-char {
    animation: tileCrtInnerLockDrop 0.56s cubic-bezier(.16, 1, .3, 1) both;
}

#game-board .tile.slide::after,
#game-board .tile.lock-drop::after {
    animation: tileInnerPhosphorSweep 0.72s ease-out both !important;
}

#game-board .tile.correct .tile-char,
#game-board .tile.locked .tile-char,
#game-board .tile.joker-locked .tile-char {
    text-shadow: 0 1px 0 rgba(0,0,0,0.76);
}

#game-board .tile.present .tile-char {
    text-shadow:
        0 0 3px rgba(255,239,160,0.7),
        0 1px 0 rgba(255,245,190,0.32);
}

@keyframes tileCrtInnerSettle {
    0%   { opacity: 0.20; transform: translateY(-46%) scaleY(0.68); filter: blur(1.1px) brightness(1.7); }
    32%  { opacity: 1; transform: translateY(18%) scaleY(1.08); filter: blur(0.45px) brightness(1.26); }
    58%  { transform: translateY(-8%) scaleY(0.96); filter: blur(0.2px) brightness(1.12); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); filter: blur(0) brightness(1); }
}

@keyframes tileCrtInnerLockDrop {
    0%   { opacity: 0; transform: translateY(-82%) scaleY(0.45); filter: blur(1.4px) brightness(1.8); }
    44%  { opacity: 1; transform: translateY(14%) scaleY(1.12); filter: blur(0.45px) brightness(1.28); }
    72%  { transform: translateY(-4%) scaleY(0.98); filter: blur(0.15px) brightness(1.1); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); filter: blur(0) brightness(1); }
}

@keyframes tileInnerPhosphorSweep {
    0%   { transform: translateY(-110%) scaleX(1); opacity: 0; }
    16%  { opacity: 0.62; }
    58%  { transform: translateY(0) scaleX(1); opacity: 0.24; }
    100% { transform: translateY(110%) scaleX(1); opacity: 0; }
}

/* Keep warning flashes inside the CRT glass instead of shaking the tile casing. */
.row.shake .tile {
    animation: none !important;
    transform: none !important;
}
.row.shake .tile .tile-char {
    animation: tileLetterBlink 0.72s steps(1, end) both !important;
}

/* === MOJI-LOJI PHASE 3 CLUE CRT MATCH PASS ===
   The Phase 3 clue monitor now uses the same physical CRT language as the
   Phase 1/2 status CRTs: raised casing, recessed smoked glass, scanlines,
   and content glowing from inside the screen instead of sitting on a flat panel. */
#console-info-bay.phase3-active #clue-banner,
#clue-banner.on.no-slide {
    height: 64px !important;
    min-height: 64px !important;
}

#console-info-bay.phase3-active #clue-banner {
    inset: 0 auto auto 50% !important;
    width: min(100%, 252px) !important;
    max-width: 252px !important;
    transform: translateX(-50%) !important;
    padding: 6px 12px !important;
    gap: 3px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(0,0,0,0.88) !important;
    overflow: hidden !important;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 34%, rgba(0,0,0,0.34) 100%),
        radial-gradient(circle at 50% 112%, rgba(255,204,0,0.20), transparent 55%),
        radial-gradient(circle at 50% 8%, rgba(255,255,255,0.08), transparent 38%),
        rgba(24,24,27,0.88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -10px 18px rgba(0,0,0,0.50),
        inset 0 0 0 2px rgba(0,0,0,0.54),
        inset 0 0 18px rgba(0,0,0,0.32),
        0 1px 0 rgba(255,255,255,0.08),
        0 3px 0 rgba(0,0,0,0.72),
        0 0 12px rgba(255,204,0,0.10) !important;
}

#console-info-bay.phase3-active #clue-banner::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 8%;
    height: 24%;
    z-index: 0;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0));
    opacity: 0.46;
}

#console-info-bay.phase3-active #clue-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 26%, transparent 72%, rgba(0,0,0,0.28)),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(90deg, rgba(255,204,0,0.035) 0 1px, transparent 1px 13px);
    opacity: 0.72;
    mix-blend-mode: screen;
}

#console-info-bay.phase3-active #clue-banner > * {
    position: relative;
    z-index: 2;
}

#console-info-bay.phase3-active #clue-label {
    color: rgba(255,232,132,0.92) !important;
    font-size: clamp(0.58rem, 2.1vw, 0.72rem) !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    text-shadow:
        0 0 3px rgba(255,204,0,0.50),
        0 1px 0 rgba(0,0,0,0.78) !important;
    opacity: 0.92;
}

#console-info-bay.phase3-active #clue-line2 {
    gap: clamp(4px, 1.4vw, 7px) !important;
    min-height: 31px;
}

#console-info-bay.phase3-active #clue-word,
#console-info-bay.phase3-active #clue-answer {
    font-weight: 400 !important;
    color: #dff3ff !important;
    font-size: clamp(1rem, 4vw, 1.34rem) !important;
    line-height: 1 !important;
    text-shadow:
        0 0 4px rgba(208,241,255,0.92),
        0 0 12px rgba(93,174,255,0.50),
        0 1px 0 rgba(0,0,0,0.82) !important;
    filter: brightness(1.02) saturate(1.04);
}

#console-info-bay.phase3-active #clue-emoji {
    flex: 0 0 clamp(29px, 8.4vw, 39px) !important;
    width: clamp(29px, 8.4vw, 39px) !important;
    font-size: clamp(1.36rem, 6.4vw, 1.92rem) !important;
    filter:
        drop-shadow(0 0 8px rgba(255,204,0,0.34))
        drop-shadow(0 2px 2px rgba(0,0,0,0.58));
}

#console-info-bay.phase3-active .clue-sep {
    color: rgba(255,232,132,0.72) !important;
    opacity: 0.78 !important;
    text-shadow: 0 0 5px rgba(255,204,0,0.22);
}

#capture-zone.phase3-presenting #clue-banner {
    animation: phase3CrtWake 2.2s ease-out both !important;
}

#console-info-bay.phase3-active::before,
#console-info-bay.phase3-active::after {
    width: clamp(34px, 9.2vw, 43px) !important;
    height: clamp(34px, 9.2vw, 43px) !important;
}

#console-info-bay.phase3-active::before {
    left: clamp(7px, 2.4vw, 14px) !important;
}

#console-info-bay.phase3-active::after {
    right: clamp(7px, 2.4vw, 14px) !important;
}

@keyframes phase3CrtWake {
    0%   { filter: brightness(0.72) saturate(0.82); }
    22%  { filter: brightness(1.28) saturate(1.16); }
    48%  { filter: brightness(0.92) saturate(1.02); }
    72%  { filter: brightness(1.10) saturate(1.08); }
    100% { filter: brightness(1) saturate(1); }
}

@media (max-width: 480px) {
    #capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #hint-offer-inline {
        display: flex !important;
        visibility: visible !important;
        pointer-events: none !important;
        color: transparent !important;
        font-size: 0 !important;
        text-shadow: none !important;
    }

    #capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #hint-offer-inline > * {
        visibility: hidden !important;
    }

    #console-info-bay.phase3-active #clue-banner {
        width: min(100%, 318px) !important;
        max-width: 318px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* First page load: smooth reveal on desktop and mobile. */
body {
    animation: pageFirstLoadFade 1.25s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes pageFirstLoadFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === MOJI-LOJI GLASS TITLE SURFACE ===
   Keep the animated letter title over a shallow glossy glass window. */
#category-banner {
    position: relative !important;
    border: 0 !important;
    border-radius: 10px !important;
    margin-top: 1px !important;
    margin-bottom: 0 !important;
    padding: 8px 11px 7px !important;
    overflow: hidden !important;
    isolation: isolate;
    background: transparent !important;
    background-size: auto !important;
    box-shadow: none !important;
    /* Let the transport glow beneath the fixed header dissipate instead of
       disappearing on the frame where the incoming console settles. */
    transition: box-shadow 2s ease-out !important;
}

#category-banner::before {
    content: "" !important;
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    inset: 0;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    z-index: 1;
    display: block !important;
    pointer-events: none;
    border-radius: inherit !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: normal !important;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.30), transparent 28%, transparent 72%, rgba(255,255,255,0.14)) !important;
    box-shadow:
        inset 0 5px 9px rgba(0,0,0,0.28),
        inset 0 -2px 0 rgba(255,255,255,0.14) !important;
}

#category-banner .moji-title,
#category-banner .category-theme,
#category-banner .category-title-line,
#category-banner #category-currency-badge,
#category-banner > * {
    position: relative;
    z-index: 2;
}

#category-banner .moji-title-letter {
    color: #26262a;
    -webkit-text-fill-color: #26262a;
    text-shadow: none;
    filter: none;
    opacity: 0.86;
    animation: mojiTitleLetterGlow 3.2s ease-in-out infinite !important;
    animation-delay: calc(var(--i, 0) * 0.17s) !important;
    animation-fill-mode: both !important;
    will-change: color, text-shadow, opacity;
}

/* The title and its Japanese footer engraving are cabinet travel lights.
   They stay dark while either phase is shutting down or completing its
   staged wake, then resume only after the final keyboard key is awake. */
#capture-zone.travel-lights-off #category-banner .moji-title-letter,
#capture-zone.travel-lights-off .bottom-vfd-engraving .engraving-letter {
    animation: none !important;
    color: #26262a !important;
    -webkit-text-fill-color: #26262a !important;
    opacity: 0.86 !important;
    text-shadow: none !important;
    filter: none !important;
}

#capture-zone.console-decor-wake #category-banner,
#capture-zone.phase1-presenting #category-banner,
#capture-zone.phase3-presenting #category-banner {
    border-radius: 10px !important;
    border: 0 !important;
}

#category-banner {
    animation: none !important;
}

body:not([data-console-skin]) #category-banner,
body:not([data-console-skin]) #capture-zone.console-decor-wake #category-banner,
body:not([data-console-skin]) #capture-zone.phase1-presenting #category-banner,
body:not([data-console-skin]) #capture-zone.phase3-presenting #category-banner,
body[data-console-skin="original"] #category-banner,
body[data-console-skin="original"] #capture-zone.console-decor-wake #category-banner,
body[data-console-skin="original"] #capture-zone.phase1-presenting #category-banner,
body[data-console-skin="original"] #capture-zone.phase3-presenting #category-banner,
body[data-console-skin="white"] #category-banner,
body[data-console-skin="white"] #capture-zone.console-decor-wake #category-banner,
body[data-console-skin="white"] #capture-zone.phase1-presenting #category-banner,
body[data-console-skin="white"] #capture-zone.phase3-presenting #category-banner,
body[data-console-skin="ferrari"] #category-banner,
body[data-console-skin="ferrari"] #capture-zone.console-decor-wake #category-banner,
body[data-console-skin="ferrari"] #capture-zone.phase1-presenting #category-banner,
body[data-console-skin="ferrari"] #capture-zone.phase3-presenting #category-banner,
body[data-console-skin="rose-gold"] #category-banner,
body[data-console-skin="rose-gold"] #capture-zone.console-decor-wake #category-banner,
body[data-console-skin="rose-gold"] #capture-zone.phase1-presenting #category-banner,
body[data-console-skin="rose-gold"] #capture-zone.phase3-presenting #category-banner {
    background: transparent !important;
    box-shadow: none !important;
}

body:not([data-console-skin]) #category-banner,
body:not([data-console-skin]) #capture-zone.console-decor-wake #category-banner,
body:not([data-console-skin]) #capture-zone.phase1-presenting #category-banner,
body:not([data-console-skin]) #capture-zone.phase3-presenting #category-banner,
body[data-console-skin="original"] #category-banner,
body[data-console-skin="original"] #capture-zone.console-decor-wake #category-banner,
body[data-console-skin="original"] #capture-zone.phase1-presenting #category-banner,
body[data-console-skin="original"] #capture-zone.phase3-presenting #category-banner {
    border-color: transparent !important;
}

/* Keep only the two YOUR BRIEFING label lines at the rendered Master size. */
.welcome-briefing-box .currency-intro-kicker {
    font-size: 16px;
}

.welcome-briefing-box #welcome-moon-title {
    font-size: 1.02rem;
}

.welcome-briefing-box #welcome-moon-currency,
.welcome-briefing-box #welcome-moon-text {
    font-size: 0.95rem;
}

.welcome-briefing-box .currency-intro-main {
    font-size: 1.05rem;
}

.welcome-briefing-box .wallet-values,
.welcome-briefing-box .wallet-values > span {
    display: block;
}

.welcome-briefing-box .wallet-values {
    font-size: 1rem;
    line-height: 1.35;
}

body:not([data-console-skin]) #category-banner::after,
body[data-console-skin="original"] #category-banner::after {
    background: transparent !important;
    opacity: 0.88 !important;
    animation: none !important;
    will-change: background-position, background-size, filter;
}

body:not([data-console-skin]) #category-banner::before,
body[data-console-skin="original"] #category-banner::before {
    background:
        linear-gradient(180deg, rgba(112,130,255,0.20), rgba(10,10,60,0.12) 24%, rgba(10,10,60,0.16) 70%, rgba(0,0,0,0.36)),
        linear-gradient(90deg, rgba(0,0,0,0.16), transparent 18%, transparent 82%, rgba(0,0,0,0.22)) !important;
    box-shadow:
        inset 0 5px 9px rgba(112,130,255,0.10),
        inset 0 -3px 6px rgba(0,0,0,0.40),
        inset 0 0 18px rgba(2,3,22,0.16) !important;
}

body[data-console-skin="white"] #category-banner,
body[data-console-skin="white"] #capture-zone.console-decor-wake #category-banner,
body[data-console-skin="white"] #capture-zone.phase1-presenting #category-banner,
body[data-console-skin="white"] #capture-zone.phase3-presenting #category-banner {
    border-color: transparent !important;
    box-shadow: none !important;
}

body[data-console-skin="white"] #category-banner::after {
    background: transparent !important;
    opacity: 0.88 !important;
    animation: none !important;
    will-change: background-position, background-size, filter;
}

body[data-console-skin="white"] #category-banner::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.20), rgba(20,23,28,0.10) 24%, rgba(20,23,28,0.14) 70%, rgba(0,0,0,0.34)),
        linear-gradient(90deg, rgba(0,0,0,0.14), transparent 18%, transparent 82%, rgba(0,0,0,0.20)) !important;
    box-shadow:
        inset 0 5px 9px rgba(255,255,255,0.10),
        inset 0 -3px 6px rgba(0,0,0,0.38),
        inset 0 0 18px rgba(0,0,0,0.10) !important;
}

body[data-console-skin="ferrari"] #category-banner,
body[data-console-skin="ferrari"] #capture-zone.console-decor-wake #category-banner,
body[data-console-skin="ferrari"] #capture-zone.phase1-presenting #category-banner,
body[data-console-skin="ferrari"] #capture-zone.phase3-presenting #category-banner {
    border-color: transparent !important;
}

body[data-console-skin="ferrari"] #category-banner::after {
    background: transparent !important;
    opacity: 0.88 !important;
    animation: none !important;
    will-change: background-position, background-size, filter;
}

body[data-console-skin="ferrari"] #category-banner::before {
    background:
        linear-gradient(180deg, rgba(255,64,64,0.22), rgba(38,8,12,0.12) 24%, rgba(38,8,12,0.16) 70%, rgba(0,0,0,0.36)),
        linear-gradient(90deg, rgba(0,0,0,0.16), transparent 18%, transparent 82%, rgba(0,0,0,0.22)) !important;
    box-shadow:
        inset 0 5px 9px rgba(255,64,64,0.10),
        inset 0 -3px 6px rgba(0,0,0,0.40),
        inset 0 0 18px rgba(70,0,0,0.14) !important;
}

@keyframes mojiMercuryFluidLayer {
    0% {
        background-position: -88% 50%, -96% 54%, 100% 0%, 0% 0%, 80% 100%, 0% 78%, 44% 50%, 50% 50%;
        filter: contrast(1.18) brightness(0.76) saturate(0);
    }
    24% {
        background-position: -22% 52%, -12% 44%, 42% 72%, 84% 88%, 0% 18%, 82% 60%, 56% 44%, 50% 50%;
        filter: contrast(1.30) brightness(0.82) saturate(0);
    }
    50% {
        background-position: 48% 50%, 58% 58%, 0% 100%, 100% 42%, 28% 12%, 58% 100%, 52% 58%, 50% 50%;
        filter: contrast(1.24) brightness(0.78) saturate(0);
    }
    76% {
        background-position: 118% 48%, 124% 42%, 74% 82%, 14% 18%, 100% 52%, 0% 12%, 45% 57%, 50% 50%;
        filter: contrast(1.34) brightness(0.84) saturate(0);
    }
    100% {
        background-position: 188% 50%, 196% 54%, 100% 0%, 0% 0%, 80% 100%, 0% 78%, 44% 50%, 50% 50%;
        filter: contrast(1.18) brightness(0.76) saturate(0);
    }
}

@keyframes mojiTitleLetterGlow {
    0%, 12%, 100% {
        color: #26262a;
        -webkit-text-fill-color: #26262a;
        opacity: 0.86;
        text-shadow: none;
    }
    26% {
        color: #d8d8d8;
        -webkit-text-fill-color: #d8d8d8;
        opacity: 0.96;
        text-shadow: none;
    }
    38% {
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
        opacity: 1;
        text-shadow: none;
    }
    58% {
        color: #26262a;
        -webkit-text-fill-color: #26262a;
        opacity: 0.88;
        text-shadow: none;
    }
}

@keyframes mojiGlassFluid {
    0% {
        background-position:
            0% 0%, 100% 0%, 0% 100%, 100% 100%, 50% 50%;
    }
    25% {
        background-position:
            100% 30%, 20% 100%, 85% 0%, 0% 58%, 68% 34%;
    }
    50% {
        background-position:
            48% 100%, 0% 48%, 100% 100%, 36% 0%, 38% 72%;
    }
    75% {
        background-position:
            100% 78%, 72% 0%, 18% 42%, 100% 12%, 62% 38%;
    }
    100% {
        background-position:
            0% 0%, 100% 0%, 0% 100%, 100% 100%, 50% 50%;
    }
}


/* === STATUS CRT STABILITY OVERRIDE ===
   The 3 found-letter CRTs are fixed monitor shells.
   Keep emoji serving/choice monitors untouched, but never let the
   status CRTs run the old slot/tile-style reel/bounce animation. */
#status-panel .sbox.reeling,
#status-panel .sbox.reeling .sbox-ltr,
#status-panel .sbox.reeling .sbox-emojis {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

#status-panel .sbox-reel,
#status-panel .sbox-reel-track {
    display: none !important;
    animation: none !important;
}

#status-panel .sbox:not(.choice-monitor):not(.dead) {
    transition: none !important;
    transform: none !important;
}

#status-panel .sbox:not(.choice-monitor):not(.dead) .sbox-ltr,
#status-panel .sbox:not(.choice-monitor):not(.dead) .sbox-emojis,
#status-panel .sbox:not(.choice-monitor):not(.dead) .sem {
    animation: none !important;
    transform: none !important;
    filter: none !important;
}


/* ── NAUGHTY CRT NEUTRAL PASS ──
   Keep the 3 CRT shells identical to normal status CRTs, but prevent the
   Naughty all-screen reveal from inheriting green HIT borders/glow. */
#status-panel .sbox.naughty-console.naughty-final-screen {
    border-color: rgba(191,90,242,0.36) !important;
}

#status-panel .sbox.naughty-console.naughty-final-screen::before {
    opacity: 0.38;
    animation: naughtyCrtGlassPulse 0.82s ease-in-out infinite !important;
    animation-delay: calc(0.92s + (var(--naughty-i, 0) * 90ms)) !important;
}

#status-panel .naughty-console.naughty-final-screen .naughty-final-emoji {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)) !important;
}

#status-panel .naughty-console.naughty-final-screen .naughty-final-loop {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 48px;
    display: grid;
    place-items: center;
}

#status-panel .naughty-console.naughty-final-screen .naughty-loop-emoji,
#status-panel .naughty-console.naughty-final-screen .naughty-loop-bonus {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

#status-panel .naughty-console.naughty-final-screen .naughty-loop-emoji {
    animation:
        crtChoiceContentIn 0.62s steps(6, end) both,
        naughtyLoopEmoji 1.34s steps(2, end) 0.72s infinite !important;
    animation-delay: calc(var(--naughty-i, 0) * 90ms), calc(0.72s + (var(--naughty-i, 0) * 90ms)) !important;
}

#status-panel .naughty-console.naughty-final-screen .naughty-loop-bonus {
    flex-direction: column;
    gap: 1px;
    color: #fff3c7;
    font-family: 'Courier New', monospace;
    font-size: clamp(0.62rem, 2.7vw, 0.9rem);
    line-height: 0.95;
    letter-spacing: 0;
    text-shadow:
        0 0 3px rgba(191,90,242,0.30),
        0 1px 0 rgba(0,0,0,0.86);
    filter: none;
    animation: naughtyLoopBonus 1.34s steps(2, end) 0.72s infinite !important;
    animation-delay: calc(0.72s + (var(--naughty-i, 0) * 90ms)) !important;
}

#status-panel .naughty-console.naughty-final-screen .naughty-loop-bonus span:first-child {
    font-size: 1.08em;
}

@keyframes naughtyLoopEmoji {
    0%, 49.9% { opacity: 1; transform: scale(1); }
    50%, 100% { opacity: 0; transform: scale(0.86); }
}

@keyframes naughtyLoopBonus {
    0%, 49.9% { opacity: 0; transform: scale(0.86); }
    50%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes naughtyCrtGlassPulse {
    0%, 100% { opacity: 0.34; }
    50% { opacity: 0.62; }
}

/* Starfield is now handled by the live canvas #starfield-canvas.
   Modal animation-only rules remain; background drift removed. */
#currency-intro-modal.on {
    animation: modalOpacityIn 0.32s ease both;
}

#currency-intro-modal.leaving {
    animation: modalOpacityOut 0.55s ease forwards;
}

#win-overlay.on {
    animation: modalOpacityIn 0.3s ease both;
}

/* === SINGLE CANVAS SKY PASS ===
   Keep Claude's live canvas as the only full-screen sky, visible behind
   welcome, moon briefing, transporter, gameplay, and win phases. */
html {
    background: #020818 !important;
}

body {
    background: transparent !important;
}

#starfield-canvas {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 1;
    transition: opacity 0.82s ease;
}

body[data-console-skin="rose-gold"] #category-banner,
body[data-console-skin="rose-gold"] #capture-zone.console-decor-wake #category-banner,
body[data-console-skin="rose-gold"] #capture-zone.phase1-presenting #category-banner,
body[data-console-skin="rose-gold"] #capture-zone.phase3-presenting #category-banner {
    border-color: transparent !important;
}

body[data-console-skin="rose-gold"] #category-banner::after {
    background: transparent !important;
    opacity: 0.88 !important;
    animation: none !important;
    will-change: background-position, background-size, filter;
}

body[data-console-skin="rose-gold"] #category-banner::before {
    background:
        linear-gradient(180deg, rgba(255,205,194,0.24), rgba(66,25,34,0.12) 24%, rgba(66,25,34,0.17) 70%, rgba(15,3,7,0.38)),
        linear-gradient(90deg, rgba(57,15,24,0.18), transparent 18%, transparent 82%, rgba(57,15,24,0.24)) !important;
    box-shadow:
        inset 0 5px 9px rgba(255,220,208,0.12),
        inset 0 -3px 6px rgba(31,6,12,0.42),
        inset 0 0 18px rgba(183,110,121,0.16) !important;
}

body.mobile-ui.mobile-plain-sky #starfield-canvas,
body.android-app.mobile-plain-sky #starfield-canvas {
    display: none;
}

body.mobile-ui.mobile-plain-sky,
body.android-app.mobile-plain-sky {
    background: #000 !important;
}

#capture-zone,
#keyboard,
#dev-bar-wrap {
    position: relative;
    z-index: 1;
}

#capture-zone {
    --console-space-glow: 0 0 0 rgba(0,0,0,0);
}

@media (min-width: 901px) and (pointer: fine) {
    #capture-zone {
        --console-space-glow:
            0 34px 58px -28px rgba(220,72,38,0.18),
            0 58px 118px -52px rgba(255,190,84,0.14);
    }
}

.modal-overlay,
#welcome-screen,
#currency-intro-modal,
#currency-intro-modal.on,
#currency-intro-modal.leaving,
#currency-intro-modal.transporter-emitting,
#win-overlay,
#win-overlay.on {
    background: transparent !important;
}

#welcome-screen::before,
#welcome-screen::after,
#currency-intro-modal:not(.transporter-emitting)::before,
#currency-intro-modal:not(.transporter-emitting)::after {
    display: none !important;
}

body.intro-active #capture-zone,
body.intro-active #keyboard,
body.intro-active #dev-bar-wrap,
#welcome-screen.on ~ #capture-zone,
#welcome-screen.on ~ #keyboard,
#welcome-screen.on ~ #dev-bar-wrap {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#welcome-screen.on .modal-wrapper:not(.welcome-transitioning) {
    animation: welcomeSystemFadeIn 2s ease both;
}

@keyframes welcomeSystemFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Console cabinet polish: softer worn bronze/purple bevel, no old bright gold rails. */
#capture-zone {
    border-color: rgba(214,164,82,0.28) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(90deg, transparent 0, rgba(110,60,72,0.20) 9px, rgba(255,232,166,0.08) 36px, transparent 78px) top 4px left 0 / 100px 3px no-repeat,
        linear-gradient(270deg, transparent 0, rgba(191,90,242,0.22) 9px, rgba(255,232,166,0.08) 42px, transparent 86px) top 4px right 0 / 108px 3px no-repeat,
        linear-gradient(180deg, rgba(255,228,156,0.16), rgba(255,255,255,0.035) 10px, transparent 18px, transparent calc(100% - 16px), rgba(0,0,0,0.32) calc(100% - 4px)),
        linear-gradient(90deg, rgba(255,216,135,0.18), rgba(95,52,32,0.10) 4px, transparent 12%, transparent 88%, rgba(191,90,242,0.10) calc(100% - 4px), rgba(255,216,135,0.14)),
        radial-gradient(circle at 50% 0%, rgba(255,238,190,0.07), transparent 30%),
        linear-gradient(180deg, rgba(64,18,72,0.54), rgba(18,8,22,0.42)),
        linear-gradient(180deg, #211127 0%, #130915 48%, #070408 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(255,235,176,0.24),
        inset 0 -3px 0 rgba(0,0,0,0.58),
        inset 3px 0 0 rgba(255,214,132,0.10),
        inset -3px 0 0 rgba(191,90,242,0.12),
        inset 0 0 22px rgba(255,255,255,0.035),
        inset 0 0 34px rgba(0,0,0,0.24),
        0 2px 0 rgba(0,0,0,0.62),
        0 0 20px rgba(191,90,242,0.13) !important;
}

/* Console side rails only.
   Surgical fix: do not let cabinet-polish rails override the transporter
   pseudo-elements. The transporter also uses #capture-zone::before/::after,
   so the broad rule here was turning the full-console beam back into two
   narrow gold side rails during console-teleport-in. */
#capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before,
#capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
    top: 7px !important;
    bottom: 7px !important;
    width: 3px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, rgba(74,30,83,0.58), rgba(129,62,148,0.22) 42%, rgba(42,16,52,0.56)) !important;
    opacity: 0.44 !important;
    box-shadow:
        inset 1px 0 0 rgba(255,232,166,0.07),
        0 0 6px rgba(191,90,242,0.08),
        0 0 10px rgba(0,0,0,0.10) !important;
}

/* When the whole console is transporting, keep board materialization/tile timing,
   but mute the old board-local beam/spark overlay so it no longer reads as a
   rectangle-confined transporter. */
#board-wrap.board-teleport-in::before,
#board-wrap.board-teleport-in::after,
#capture-zone.console-teleport-in #board-wrap.board-teleport-in::before,
#capture-zone.console-teleport-in #board-wrap.board-teleport-in::after {
    animation: none !important;
    opacity: 0 !important;
}

/* The side faders require the normal cabinet to allow a little overflow, but
   the opening transporter beam must stay inside the cabinet silhouette. */
#capture-zone.console-teleport-in,
#capture-zone.console-transport-shimmer {
    overflow: hidden !important;
}

/* Board cabinet polish: match the curved top-corner bevel language from the console. */
#board-wrap {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Score/board module frame polish: corner highlights flow onto the top edge. */
#slot-machine {
    border-color: rgba(214,164,82,0.24) !important;
    background:
        linear-gradient(180deg, rgba(255,228,156,0.10), transparent 10px, transparent calc(100% - 10px), rgba(0,0,0,0.24)),
        linear-gradient(90deg, rgba(255,216,135,0.09), transparent 10%, transparent 90%, rgba(191,90,242,0.08)),
        rgba(18, 8, 22, 0.38) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,235,176,0.16),
        inset 0 -2px 0 rgba(0,0,0,0.48),
        inset 2px 0 0 rgba(255,214,132,0.055),
        inset -2px 0 0 rgba(191,90,242,0.075),
        inset 0 0 18px rgba(255,255,255,0.035),
        inset 0 0 30px rgba(191,90,242,0.10),
        0 0 14px rgba(191,90,242,0.10) !important;
}

#slot-machine::before,
#slot-machine::after {
    top: 14px !important;
    bottom: 14px !important;
    width: 1px !important;
    background:
        linear-gradient(180deg, transparent, rgba(255,232,166,0.16) 18%, rgba(129,62,148,0.12) 74%, transparent) !important;
    opacity: 0.32 !important;
    box-shadow:
        none !important;
}

/* Console skins: repaint only the cabinet/chrome, leaving CRT and VFD glass alone. */
body:not([data-console-skin]) #capture-zone,
body[data-console-skin="original"] #capture-zone {
    border-color: rgba(10,10,60,0.88) !important;
    background:
        linear-gradient(90deg, transparent 0, rgba(10,10,60,0.58) 9px, rgba(54,74,160,0.30) 42px, transparent 86px) top 4px left 0 / 108px 3px no-repeat,
        linear-gradient(270deg, transparent 0, rgba(10,10,60,0.56) 9px, rgba(112,130,255,0.22) 42px, transparent 86px) top 4px right 0 / 108px 3px no-repeat,
        linear-gradient(180deg, rgba(112,130,255,0.28), rgba(255,255,255,0.050) 10px, transparent 18px, transparent calc(100% - 18px), rgba(70,82,190,0.30) calc(100% - 4px)),
        linear-gradient(90deg, rgba(10,10,60,0.38), rgba(2,3,22,0.24) 4px, transparent 12%, transparent 88%, rgba(2,3,22,0.34) calc(100% - 4px), rgba(10,10,60,0.36)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.10), transparent 30%),
        linear-gradient(180deg, rgba(66,88,188,0.52), rgba(24,30,104,0.52)),
        linear-gradient(180deg, #4058b8 0%, #182779 52%, #0d1452 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(180,194,255,0.20),
        inset 0 -3px 0 rgba(92,108,224,0.30),
        inset 3px 0 0 rgba(10,10,60,0.34),
        inset -3px 0 0 rgba(2,3,22,0.38),
        inset 0 0 22px rgba(255,255,255,0.05),
        inset 0 0 34px rgba(2,4,30,0.22),
        0 2px 0 rgba(0,0,0,0.68),
        0 0 16px rgba(10,10,60,0.26),
        var(--console-space-glow) !important;
}

body:not([data-console-skin]) #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before,
body:not([data-console-skin]) #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after,
body[data-console-skin="original"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before,
body[data-console-skin="original"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
    background:
        linear-gradient(180deg, rgba(10,10,60,0.74), rgba(54,74,160,0.24) 42%, rgba(2,3,22,0.70)) !important;
    box-shadow:
        inset 1px 0 0 rgba(180,194,255,0.14),
        0 0 7px rgba(10,10,60,0.30),
        0 0 8px rgba(54,74,160,0.18) !important;
}

body:not([data-console-skin]) #slot-machine,
body[data-console-skin="original"] #slot-machine {
    border-color: rgba(54,74,160,0.48) !important;
    background:
        linear-gradient(180deg, rgba(70,88,188,0.28), transparent 10px, transparent calc(100% - 10px), rgba(66,80,180,0.22)),
        linear-gradient(90deg, rgba(10,10,60,0.26), transparent 10%, transparent 90%, rgba(2,3,22,0.34)),
        rgba(20,28,92,0.62) !important;
    box-shadow:
        inset 0 1px 0 rgba(180,194,255,0.12),
        inset 0 -2px 0 rgba(88,104,214,0.24),
        inset 2px 0 0 rgba(10,10,60,0.18),
        inset -2px 0 0 rgba(2,3,22,0.22),
        inset 0 0 18px rgba(2,4,28,0.34),
        inset 0 0 30px rgba(54,74,160,0.10),
        0 0 14px rgba(54,74,160,0.14) !important;
}

body[data-console-skin="white"] #capture-zone {
    border-color: rgba(255,255,255,0.72) !important;
    background:
        linear-gradient(90deg, transparent 0, rgba(114,123,142,0.62) 9px, rgba(196,204,219,0.30) 42px, transparent 86px) top 4px left 0 / 108px 3px no-repeat,
        linear-gradient(270deg, transparent 0, rgba(255,255,255,0.66) 9px, rgba(174,183,202,0.28) 42px, transparent 86px) top 4px right 0 / 108px 3px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.16) 10px, transparent 18px, transparent calc(100% - 16px), rgba(114,123,142,0.34) calc(100% - 4px)),
        linear-gradient(90deg, rgba(255,255,255,0.42), rgba(166,176,195,0.20) 4px, transparent 12%, transparent 88%, rgba(151,160,180,0.18) calc(100% - 4px), rgba(255,255,255,0.34)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.42), transparent 30%),
        linear-gradient(180deg, rgba(241,243,247,0.88), rgba(183,191,207,0.70)),
        linear-gradient(180deg, #fbfbf6 0%, #d9dde6 50%, #9ea7ba 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.82),
        inset 0 -3px 0 rgba(102,111,130,0.52),
        inset 3px 0 0 rgba(255,255,255,0.30),
        inset -3px 0 0 rgba(117,126,146,0.20),
        inset 0 0 26px rgba(255,255,255,0.22),
        inset 0 0 34px rgba(81,91,112,0.18),
        0 2px 0 rgba(0,0,0,0.48),
        0 0 20px rgba(255,255,255,0.16),
        var(--console-space-glow) !important;
}

body[data-console-skin="white"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before,
body[data-console-skin="white"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.76), rgba(178,187,205,0.30) 42%, rgba(124,136,158,0.38)) !important;
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,0.46),
        0 0 7px rgba(255,255,255,0.16),
        0 0 8px rgba(122,136,162,0.12) !important;
}

body:not([data-console-skin]) #board-wrap.phase3 #game-board.magic-complete-showcase .magic-rainbow-cell,
body[data-console-skin="original"] #board-wrap.phase3 #game-board.magic-complete-showcase .magic-rainbow-cell,
body[data-console-skin="white"] #board-wrap.phase3 #game-board.magic-complete-showcase .magic-rainbow-cell,
body[data-console-skin="ferrari"] #board-wrap.phase3 #game-board.magic-complete-showcase .magic-rainbow-cell,
body[data-console-skin="rose-gold"] #board-wrap.phase3 #game-board.magic-complete-showcase .magic-rainbow-cell,
body[data-console-skin="neon-green"] #board-wrap.phase3 #game-board.magic-complete-showcase .magic-rainbow-cell {
    color: #2b073f !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 38%, rgba(0,0,0,0.30)),
        linear-gradient(90deg,
            #ff38c8,
            #347cff,
            #24d866,
            #ffd735,
            #ff7b2f,
            #a84cff,
            #ff38c8) !important;
    background-size: 100% 100%, var(--rainbow-line-width, 900px) 100% !important;
    background-position: 0 0, var(--rainbow-line-x, 0px) 50% !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.42),
        0 0 5px rgba(43,7,63,0.48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -9px 16px rgba(0,0,0,0.42),
        0 0 10px rgba(43,7,63,0.10) !important;
}

body[data-console-skin="neon-green"] #board-wrap.phase3 #game-board.magic-complete-showcase .magic-rainbow-cell {
    filter: none !important;
    mix-blend-mode: normal !important;
}

body[data-console-skin="white"] #slot-machine {
    border-color: rgba(255,255,255,0.34) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.34), transparent 10px, transparent calc(100% - 10px), rgba(98,108,128,0.24)),
        linear-gradient(90deg, rgba(255,255,255,0.22), transparent 10%, transparent 90%, rgba(128,139,160,0.14)),
        rgba(232,235,241,0.26) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.52),
        inset 0 -2px 0 rgba(92,102,122,0.38),
        inset 2px 0 0 rgba(255,255,255,0.18),
        inset -2px 0 0 rgba(112,124,146,0.12),
        inset 0 0 20px rgba(255,255,255,0.12),
        inset 0 0 30px rgba(91,104,128,0.10),
        0 0 14px rgba(255,255,255,0.10) !important;
}

body[data-console-skin="ferrari"] #capture-zone {
    border-color: rgba(92,0,0,0.74) !important;
    background:
        linear-gradient(90deg, transparent 0, rgba(124,0,0,0.56) 9px, rgba(255,48,32,0.24) 42px, transparent 86px) top 4px left 0 / 108px 3px no-repeat,
        linear-gradient(270deg, transparent 0, rgba(72,0,0,0.60) 9px, rgba(255,48,32,0.20) 42px, transparent 86px) top 4px right 0 / 108px 3px no-repeat,
        linear-gradient(180deg, rgba(150,0,0,0.34), rgba(255,255,255,0.045) 10px, transparent 18px, transparent calc(100% - 16px), rgba(44,0,0,0.48) calc(100% - 4px)),
        linear-gradient(90deg, rgba(96,0,0,0.38), rgba(52,0,0,0.20) 4px, transparent 12%, transparent 88%, rgba(52,0,0,0.30) calc(100% - 4px), rgba(96,0,0,0.34)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.10), transparent 30%),
        linear-gradient(180deg, rgba(192,0,0,0.58), rgba(70,0,0,0.42)),
        linear-gradient(180deg, #e10600 0%, #ad0000 48%, #430000 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(255,130,108,0.24),
        inset 0 -3px 0 rgba(0,0,0,0.62),
        inset 3px 0 0 rgba(118,0,0,0.30),
        inset -3px 0 0 rgba(42,0,0,0.34),
        inset 0 0 22px rgba(255,255,255,0.05),
        inset 0 0 34px rgba(0,0,0,0.30),
        0 2px 0 rgba(0,0,0,0.68),
        0 0 20px rgba(225,6,0,0.20),
        var(--console-space-glow) !important;
}

body[data-console-skin="ferrari"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before,
body[data-console-skin="ferrari"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
    background:
        linear-gradient(180deg, rgba(116,0,0,0.70), rgba(255,38,28,0.24) 42%, rgba(44,0,0,0.64)) !important;
    box-shadow:
        inset 1px 0 0 rgba(255,112,92,0.16),
        0 0 7px rgba(86,0,0,0.28),
        0 0 8px rgba(225,6,0,0.18) !important;
}

body[data-console-skin="ferrari"] #slot-machine {
    border-color: rgba(86,0,0,0.44) !important;
    background:
        linear-gradient(180deg, rgba(122,0,0,0.24), transparent 10px, transparent calc(100% - 10px), rgba(0,0,0,0.32)),
        linear-gradient(90deg, rgba(86,0,0,0.24), transparent 10%, transparent 90%, rgba(50,0,0,0.32)),
        rgba(105,0,0,0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,96,78,0.14),
        inset 0 -2px 0 rgba(0,0,0,0.52),
        inset 2px 0 0 rgba(118,0,0,0.16),
        inset -2px 0 0 rgba(72,0,0,0.20),
        inset 0 0 18px rgba(0,0,0,0.48),
        inset 0 0 30px rgba(225,6,0,0.12),
        0 0 14px rgba(225,6,0,0.14) !important;
}

/* VFD presentation is defined once in the shared display-stack section. */
/* Tile button depth: use a soft shadow so row gaps do not read as connector rails. */
#game-board .tile {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -9px 18px rgba(0,0,0,0.34),
        0 2px 4px rgba(0,0,0,0.34),
        0 0 12px rgba(255,204,0,0.08) !important;
}

#game-board .tile.typing {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.32),
        inset 0 -9px 18px rgba(0,0,0,0.34),
        0 2px 4px rgba(0,0,0,0.34),
        0 0 14px rgba(255,204,0,0.14) !important;
}

#game-board .tile.correct,
#game-board .tile.locked {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -9px 18px rgba(0,0,0,0.28),
        0 2px 4px rgba(0,27,78,0.48),
        0 0 14px rgba(0,82,204,0.34) !important;
}

#game-board .tile.present {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.34),
        inset 0 -9px 18px rgba(0,0,0,0.20),
        0 2px 4px rgba(84,62,0,0.48),
        0 0 14px rgba(255,204,0,0.30) !important;
}

#game-board .tile.absent {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -9px 18px rgba(0,0,0,0.30),
        0 2px 4px rgba(0,0,0,0.34),
        0 0 10px rgba(255,255,255,0.08) !important;
}

#game-board .tile.joker-locked {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        inset 0 -9px 18px rgba(0,0,0,0.30),
        0 2px 4px rgba(48,0,70,0.48),
        0 0 14px rgba(191,90,242,0.34) !important;
}

#game-board .tile.carried-ghost {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.025) 38%, rgba(0,0,0,0.30) 100%),
        radial-gradient(circle at 50% 112%, rgba(92,174,255,0.16), transparent 54%),
        rgba(22,34,54,0.70) !important;
    border-color: transparent !important;
    color: rgba(126,210,255,0.64) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -9px 18px rgba(0,0,0,0.38),
        0 2px 4px rgba(0,18,48,0.34),
        0 0 13px rgba(82,168,255,0.18) !important;
}

#game-board .tile.carried-ghost .tile-char {
    text-shadow:
        0 0 4px rgba(126,210,255,0.38),
        0 1px 0 rgba(0,0,0,0.78) !important;
}

#game-board .tile.carried-confirm {
    animation: carriedConfirmPulse 0.48s ease-out both;
}

#game-board.emoji-pick-board .tile.emoji-pick-board-tile {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.026) 38%, rgba(0,0,0,0.34) 100%),
        radial-gradient(circle at 50% 110%, rgba(255,255,255,0.09), transparent 56%),
        rgba(20,22,26,0.90) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -9px 18px rgba(0,0,0,0.42),
        0 2px 4px rgba(0,0,0,0.36),
        0 0 10px rgba(255,255,255,0.08) !important;
}

#game-board.emoji-pick-board .emoji-pick-board-sweep .tile.emoji-pick-board-tile::after,
#game-board.emoji-pick-board .tile.emoji-pick-letter-sweep::after {
    animation: emojiBoardSweep 0.72s ease-out both !important;
    background:
        linear-gradient(105deg, transparent 0 28%, rgba(255,255,255,0.34) 47%, transparent 66% 100%) !important;
    mix-blend-mode: screen;
}

#game-board.emoji-pick-board .tile.emoji-pick-board-letter .tile-char {
    opacity: 0;
    color: #fff !important;
    font-size: 1.12em;
    font-weight: 900;
    text-shadow: none !important;
    animation: emojiBoardLetterReveal 0.58s cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc((var(--emoji-board-col, 0) * 22ms) + 45ms);
}

#game-board.emoji-pick-board .tile.emoji-pick-board-blank .tile-char {
    opacity: 0;
}

#game-board.emoji-pick-board .tile.emoji-pick-target-letter .tile-char {
    color: #ff3344 !important;
    text-shadow: none !important;
}

body[data-console-skin="white"] #game-board.emoji-pick-board .tile.emoji-pick-board-tile {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.025) 38%, rgba(0,0,0,0.34) 100%),
        radial-gradient(circle at 50% 110%, rgba(255,255,255,0.10), transparent 56%),
        rgba(20,22,26,0.90) !important;
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -9px 18px rgba(0,0,0,0.42),
        0 2px 4px rgba(0,0,0,0.30),
        0 0 12px rgba(255,255,255,0.10) !important;
}

body[data-console-skin="white"] #game-board.emoji-pick-board .tile.emoji-pick-board-letter .tile-char {
    text-shadow: none !important;
}

body[data-console-skin="white"] #game-board.emoji-pick-board .tile.emoji-pick-target-letter .tile-char {
    color: #ff3344 !important;
    text-shadow: none !important;
}

body[data-console-skin="ferrari"] #game-board.emoji-pick-board .tile.emoji-pick-board-tile {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.026) 38%, rgba(0,0,0,0.34) 100%),
        radial-gradient(circle at 50% 110%, rgba(255,255,255,0.09), transparent 56%),
        rgba(20,22,26,0.90) !important;
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -9px 18px rgba(0,0,0,0.42),
        0 2px 4px rgba(0,0,0,0.36),
        0 0 10px rgba(255,255,255,0.08) !important;
}

@keyframes emojiBoardLetterReveal {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--emoji-board-dir, 0) * 58%)) scaleY(0.62);
        filter: blur(1.1px) brightness(1.9);
    }
    48% {
        opacity: 1;
        transform: translateY(calc(var(--emoji-board-dir, 0) * -8%)) scaleY(1.05);
        filter: blur(0.25px) brightness(1.24);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        filter: blur(0) brightness(1);
    }
}

@keyframes emojiBoardSweep {
    0%   { transform: translateX(-125%) scaleX(0.84); opacity: 0; }
    18%  { opacity: 0.62; }
    58%  { opacity: 0.28; }
    100% { transform: translateX(125%) scaleX(0.84); opacity: 0; }
}

#category-subtitle-box.instruction .lcd-text,
#lcd-panel.lcd-invalid #msg,
#lcd-panel.lcd-replay #msg {
    color: #f4fbff !important;
}

/* === VFD SCORE PASS ===
   Score LCDs only: match upper/lower VFD glass without touching the central CRT. */
.score-side,
.score-you,
.score-house,
.em-score-side,
.em-score-you,
.em-score-house {
    border: 1px solid rgba(160, 224, 255, 0.18) !important;
    background:
        radial-gradient(ellipse at 50% 56%, rgba(255, 42, 58, 0.16) 0%, rgba(120, 8, 28, 0.09) 34%, transparent 66%),
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.016) 18%, rgba(0,0,0,0.36) 100%),
        repeating-linear-gradient(90deg, rgba(135, 218, 255, 0.04) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #05090d 0%, #010305 52%, #000102 100%) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.90),
        inset 0 -1px 0 rgba(255,255,255,0.055),
        inset 0 0 16px rgba(74, 192, 255, 0.08),
        inset 0 0 30px rgba(255, 28, 56, 0.10),
        0 1px 0 rgba(255,255,255,0.055),
        0 0 12px rgba(80, 188, 255, 0.08) !important;
}

.score-side .score-label,
.score-side .score-amt,
.score-side .score-amt b,
.score-side .coin-emoji,
.em-score-side .em-score-label,
.em-score-side .em-score-amt {
    color: #eaf9ff !important;
    font-weight: 400 !important;
    text-shadow:
        0 0 2px rgba(255,255,255,0.95),
        0 0 7px rgba(123, 221, 255, 0.78),
        0 0 16px rgba(58, 180, 255, 0.36),
        0 0 24px rgba(255, 35, 62, 0.16),
        0 1px 0 rgba(0,0,0,0.90) !important;
    filter: none !important;
}

#lcd-panel #msg,
#lcd-panel.on #msg,
#lcd-panel.lcd-invalid #msg,
#lcd-panel.lcd-replay #msg {
    opacity: 0.98 !important;
    letter-spacing: 1px !important;
}

#lcd-panel.on #msg {
    animation-duration: 0.92s !important;
}

.score-house .score-label,
.score-house .score-amt,
.score-house .score-amt b,
.score-house .coin-emoji,
.em-score-house .em-score-label,
.em-score-house .em-score-amt {
    color: #f4fbff !important;
}

.score-side .score-amt,
.score-side .score-amt b,
.score-side .coin-emoji,
.em-score-side .em-score-amt {
    font-size: clamp(0.72rem, 2.75vw, 0.92rem) !important;
    line-height: 1.14 !important;
}

.score-side .score-amt {
    gap: 3px !important;
}

.score-side {
    justify-content: space-between !important;
    gap: 8px !important;
}

.score-side .score-label {
    flex: 0 1 auto;
    text-align: left;
}

.score-side .score-label.joker-pulse,
.em-score-side .em-score-label.joker-pulse {
    animation: jokerSoftPulse 1s ease-in-out infinite;
}

#category-subtitle-box.joker-offer-pulse,
#lcd-panel.joker-offer-pulse #msg {
    animation: jokerSoftPulse 1s ease-in-out infinite;
}

#category-subtitle-box.joker-earned-flash,
#lcd-panel.joker-earned-flash {
    animation: jokerEarnedVfdFlash 0.34s steps(2, end) 4 !important;
}

#category-subtitle-box.joker-earned-flash .lcd-text,
#lcd-panel.joker-earned-flash #msg {
    color: #ff75ff !important;
    text-shadow:
        0 0 5px rgba(255,117,255,0.95),
        0 0 14px rgba(255,75,174,0.56),
        0 1px 0 rgba(0,0,0,0.82) !important;
}

#category-subtitle-box.phase-win-vfd-pulse,
#lcd-panel.phase-win-vfd-pulse {
    animation: phaseWinVfdPulse 0.82s ease-in-out infinite !important;
}

#category-subtitle-box.phase-win-vfd-pulse .lcd-text,
#lcd-panel.phase-win-vfd-pulse #msg {
    text-shadow:
        0 0 5px rgba(255,255,255,0.82),
        0 0 14px rgba(255,117,255,0.48),
        0 0 22px rgba(255,204,0,0.28),
        0 1px 0 rgba(0,0,0,0.82) !important;
}

@keyframes phaseWinVfdPulse {
    0%, 100% {
        filter: brightness(1) saturate(1);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.18),
            inset 0 -9px 18px rgba(0,0,0,0.52),
            inset 0 0 0 2px rgba(0,0,0,0.58),
            0 2px 0 rgba(0,0,0,0.66),
            0 0 8px rgba(255,117,255,0.14);
    }
    50% {
        filter: brightness(1.26) saturate(1.16);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.32),
            inset 0 -9px 18px rgba(0,0,0,0.42),
            inset 0 0 0 2px rgba(255,204,0,0.18),
            0 2px 0 rgba(0,0,0,0.66),
            0 0 16px rgba(255,117,255,0.32),
            0 0 26px rgba(255,204,0,0.18);
    }
}

@keyframes jokerSoftPulse {
    0%, 100% { opacity: 0.82; filter: brightness(0.96); }
    50% { opacity: 1; filter: brightness(1.18); }
}

@keyframes jokerEarnedVfdFlash {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.24),
            inset 0 -2px 0 rgba(0,0,0,0.58),
            inset 0 0 0 1px rgba(255,204,0,0.055),
            0 2px 0 rgba(0,0,0,0.52),
            0 5px 12px rgba(0,0,0,0.26),
            0 0 12px rgba(191,90,242,0.08);
    }
    50% {
        filter: brightness(1.35);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.30),
            inset 0 -2px 0 rgba(0,0,0,0.50),
            inset 0 0 0 1px rgba(255,117,255,0.36),
            inset 0 0 24px rgba(255,75,174,0.24),
            0 0 16px rgba(255,117,255,0.30);
    }
}

#status-panel .joker-earned-crt {
    border-color: rgba(255,117,255,0.42) !important;
    animation: jokerEarnedCrtPulse 0.42s ease-in-out 3 both !important;
    animation-delay: calc(var(--joker-i, 0) * 80ms) !important;
}

#status-panel .joker-earned-emoji {
    font-size: clamp(1.5rem, 5.6vw, 2.05rem) !important;
    line-height: 1;
    filter:
        drop-shadow(0 0 8px rgba(255,117,255,0.42))
        drop-shadow(0 2px 2px rgba(0,0,0,0.62));
}

#status-panel .joker-earned-label {
    color: #fff3c7 !important;
    font-family: 'Courier New', monospace;
    font-size: clamp(0.56rem, 2.35vw, 0.72rem) !important;
    letter-spacing: 0;
    text-shadow:
        0 0 4px rgba(255,117,255,0.52),
        0 1px 0 rgba(0,0,0,0.86) !important;
}

@keyframes jokerEarnedCrtPulse {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
            inset 0 3px 6px rgba(0,0,0,0.72),
            inset 0 -1px 0 rgba(255,255,255,0.13),
            inset 0 0 0 1px rgba(191,90,242,0.16),
            inset 0 0 18px rgba(0,0,0,0.56);
    }
    50% {
        filter: brightness(1.16);
        box-shadow:
            inset 0 3px 6px rgba(0,0,0,0.58),
            inset 0 -1px 0 rgba(255,255,255,0.18),
            inset 0 0 0 1px rgba(255,117,255,0.42),
            inset 0 0 24px rgba(255,75,174,0.16),
            0 0 10px rgba(255,117,255,0.18);
    }
}

.score-side .score-amt {
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
    text-align: right;
}

/* Phase 1/2 board letters bold only; phase 3 board stays lighter. */
#board-wrap:not(.phase3) #game-board .tile,
#board-wrap:not(.phase3) #game-board .tile .tile-char {
    font-weight: 700 !important;
}

#board-wrap.phase3 #game-board .tile,
#board-wrap.phase3 #game-board .tile .tile-char {
    font-weight: 400 !important;
}

/* Phase 3's four-row cabinet keeps its compact responsive row geometry so
   every row remains inside the desktop frame. */
#game-board.phase3-wheel-board .phase3-guessed-row,
#game-board.phase3-wheel-board .phase3-prompt-row {
    height: clamp(34px, 8.4vw, 44px) !important;
}

#slot-machine.phase3-fixed-bay #board-wrap.phase3:not(.phase-complete-showcase) #game-board.phase3-wheel-board {
    height: auto;
    justify-content: center;
    /* Match the winning rainbow board so the Phase 3 grid does not reflow
       when it swaps into its celebration state. */
    gap: 6px;
}

#board-wrap.phase3.phase-complete-showcase {
    height: auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}

#board-wrap.phase3 #game-board.magic-complete-showcase .magic-win-glow-row {
    height: clamp(34px, 8.4vw, 44px) !important;
}

#board-wrap.phase3 #game-board.magic-complete-showcase .magic-win-glow-row .tile,
#board-wrap.phase3 #game-board.magic-complete-showcase .magic-win-word-row .tile {
    /* Keep the win board in the same rounded tile language as live Phase 3. */
    border-radius: 8px !important;
}

#board-wrap.phase3 #game-board.magic-complete-showcase .magic-rainbow-cell {
    font-size: clamp(0.98rem, 3.6vw, 1.2rem) !important;
    color: #fff4c7 !important;
    text-shadow:
        0 0 5px rgba(255,244,199,0.72),
        0 1px 0 rgba(0,0,0,0.92),
        0 0 12px rgba(255,204,0,0.32) !important;
}

#game-board.phase3-wheel-board .phase3-guessed-row .tile,
#game-board.phase3-wheel-board .phase3-prompt-row .tile {
    border-radius: 8px;
}

#game-board.phase3-wheel-board .tile.phase3-hidden {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(0,0,0,0.20) 48%, rgba(0,0,0,0.62)),
        linear-gradient(135deg, rgba(40,44,54,0.92), rgba(10,12,16,0.96)) !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.08),
        inset 0 -8px 14px rgba(0,0,0,0.62),
        0 2px 0 rgba(0,0,0,0.62) !important;
}

#game-board.phase3-wheel-board .tile.phase3-guessed {
    font-size: clamp(0.98rem, 3.6vw, 1.28rem) !important;
    font-weight: 900 !important;
    color: rgba(244,251,255,0.78) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025) 42%, rgba(0,0,0,0.34)),
        rgba(58,62,70,0.82) !important;
    border-color: rgba(0,0,0,0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -7px 12px rgba(0,0,0,0.34),
        0 2px 0 rgba(0,0,0,0.50) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.72) !important;
}

#game-board.phase3-wheel-board .tile.phase3-guessed .tile-char,
#game-board.phase3-wheel-board .tile.phase3-prompt .tile-char {
    font-weight: 900 !important;
    color: inherit !important;
    text-shadow: inherit !important;
}

#board-wrap.phase3 #game-board.magic-complete-showcase .magic-win-static-cell {
    position: relative;
    z-index: 3 !important;
    color: transparent !important;
    border-color: rgba(255,255,255,0.12) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 34%, rgba(0,0,0,0.30) 100%),
        linear-gradient(135deg, var(--surface2), var(--surface) 52%, var(--surface2)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        inset 0 -8px 14px rgba(0,0,0,0.34),
        inset 0 0 12px rgba(255,255,255,0.06),
        0 0 8px rgba(255,255,255,0.035) !important;
    animation: none !important;
}

#board-wrap.phase3 #game-board.magic-complete-showcase .phase-complete-static-char {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #fff !important;
    opacity: 1;
    font-family: 'Courier New', monospace;
    font-size: 0.74em;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.42);
}

#board-wrap.phase3 #game-board.magic-complete-showcase .magic-win-sequenced-letter {
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 180ms ease-in;
}

#board-wrap.phase3 #game-board.magic-complete-showcase .magic-win-sequenced-letter.magic-win-letter-visible {
    opacity: 1;
}

@media (max-width: 600px) {
    #board-wrap.phase3 #game-board.magic-complete-showcase .phase-complete-static-char {
        font-size: 0.9em;
    }
}

/* Spent letters are reference marks, so keep them unmistakably readable. */
#game-board.phase3-wheel-board .phase3-guessed-row .tile.phase3-guessed .tile-char {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.88), 0 0 6px rgba(255,255,255,.28) !important;
}

#game-board.phase3-wheel-board .tile.phase3-guessed.correct {
    color: rgba(216,236,255,0.74) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(126,184,255,0.06) 42%, rgba(0,30,76,0.36)),
        rgba(20,54,104,0.64) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -7px 12px rgba(0,0,0,0.34),
        0 2px 0 rgba(0,0,0,0.50),
        0 0 6px rgba(0,82,204,0.08) !important;
    text-shadow: 0 0 4px rgba(126,184,255,0.16), 0 1px 0 rgba(0,0,0,0.76) !important;
}

#game-board.phase3-wheel-board .tile.phase3-guessed.absent {
    color: rgba(225,229,236,0.62) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(0,0,0,0.42)),
        rgba(44,47,54,0.86) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -7px 12px rgba(0,0,0,0.40),
        0 2px 0 rgba(0,0,0,0.50) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.76) !important;
}

#game-board.phase3-wheel-board .tile.phase3-guessed.joker {
    color: rgba(255,232,255,0.76) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,96,222,0.10) 42%, rgba(88,20,92,0.42)),
        rgba(96,40,98,0.66) !important;
    border-color: rgba(0,0,0,0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -7px 12px rgba(0,0,0,0.36),
        0 2px 0 rgba(0,0,0,0.50),
        0 0 7px rgba(255,96,222,0.10) !important;
    text-shadow: 0 0 4px rgba(255,117,255,0.24), 0 1px 0 rgba(0,0,0,0.80) !important;
}

#game-board.phase3-wheel-board .tile.phase3-prompt {
    font-family: 'Courier New', monospace;
    font-size: clamp(1rem, 3.9vw, 1.34rem) !important;
    font-weight: 900 !important;
    color: var(--yellow) !important;
    text-shadow: 0 0 7px rgba(255,204,0,0.38);
}

#game-board.phase3-wheel-board .tile.phase3-prompt-right {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22), rgba(126,184,255,0.18) 42%, rgba(0,65,204,0.62)),
        #0e5bd8 !important;
    color: #f4fbff !important;
    text-shadow: 0 0 8px rgba(126,184,255,0.78), 0 1px 0 rgba(0,0,0,0.78) !important;
    animation: wheelPromptHitFlash 0.58s steps(1, end);
}

#game-board.phase3-wheel-board .tile.phase3-prompt-wrong {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,116,136,0.16) 42%, rgba(78,0,12,0.82)),
        #b8122d !important;
    color: #fff !important;
    text-shadow: 0 0 8px rgba(255,116,136,0.82), 0 1px 0 rgba(0,0,0,0.82) !important;
    animation: wheelPromptMissFlash 0.58s steps(1, end);
}

#game-board.phase3-wheel-board .tile.phase3-prompt-typing {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(126,184,255,0.08) 44%, rgba(0,24,54,0.72)),
        rgba(18,36,56,0.94) !important;
    color: #dcecff !important;
    text-shadow: 0 0 7px rgba(126,184,255,0.42), 0 1px 0 rgba(0,0,0,0.78) !important;
}

#game-board.phase3-wheel-board .tile.phase3-prompt-commit {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(126,184,255,0.10) 44%, rgba(0,24,54,0.74)),
        rgba(24,31,42,0.96) !important;
    color: #f4fbff !important;
    text-shadow: 0 0 7px rgba(126,184,255,0.42), 0 1px 0 rgba(0,0,0,0.78) !important;
}

.phase3-keyboard .key.joker-key,
.phase3-keyboard .key.correct {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 38%, rgba(0,0,0,0.28) 100%),
        radial-gradient(circle at 50% 112%, rgba(255,255,255,0.13), transparent 58%),
        rgba(76,80,88,0.94) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(238,247,255,0.82) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -8px 14px rgba(0,0,0,0.34),
        0 2px 0 rgba(0,0,0,0.58),
        0 0 7px rgba(255,255,255,0.06) !important;
}

.phase3-keyboard .key.joker-key {
    color: rgba(255,198,255,0.88) !important;
    text-shadow: 0 0 5px rgba(255,117,255,0.22), 0 1px 0 rgba(0,0,0,0.72) !important;
}

.phase3-keyboard .key.joker-key.joker-holding {
    filter: brightness(1.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -8px 14px rgba(0,0,0,0.34),
        0 2px 0 rgba(0,0,0,0.58),
        0 0 10px rgba(255,117,255,0.20) !important;
}

.key.phase3-enter-glow {
    color: #fff !important;
    border-color: rgba(255,255,255,0.86) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.42),
        0 0 10px rgba(255,255,255,0.55),
        0 0 18px rgba(255,204,0,0.28) !important;
    animation: phase3EnterGlow 0.82s ease-in-out infinite;
}

.key.wheel-hit-flash {
    animation: wheelHitKeyFlash 0.58s steps(1, end);
}

.key.wheel-miss-flash {
    animation: wheelMissKeyFlash 0.58s steps(1, end);
}

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

@keyframes wheelHitKeyFlash {
    0%, 100% {
        filter: brightness(1);
    }
    18%, 52% {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06) 38%, rgba(0,0,0,0.26) 100%),
            radial-gradient(circle at 50% 112%, rgba(126,184,255,0.20), transparent 58%),
            rgba(86,98,116,0.96);
        color: rgba(244,251,255,0.92);
        filter: brightness(1.12);
    }
    34%, 70% {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.34) 100%),
            rgba(64,72,84,0.96);
        color: rgba(220,236,255,0.82);
        filter: brightness(0.92);
    }
}

@keyframes wheelMissKeyFlash {
    0%, 100% {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 38%, rgba(0,0,0,0.26) 100%),
            radial-gradient(circle at 50% 112%, rgba(255,255,255,0.18), transparent 58%),
            rgba(84,87,96,0.92);
        color: rgba(255,255,255,0.74);
        filter: brightness(1);
    }
    18%, 52% {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06) 38%, rgba(0,0,0,0.32) 100%),
            radial-gradient(circle at 50% 112%, rgba(255,116,136,0.58), transparent 60%),
            #b8122d;
        color: #fff;
        filter: brightness(1.18);
    }
    34%, 70% {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035) 38%, rgba(0,0,0,0.36) 100%),
            #4a111a;
        color: rgba(255,220,226,0.94);
        filter: brightness(0.82);
    }
}

@keyframes wheelPromptHitFlash {
    0%, 100% {
        filter: brightness(1);
    }
    18%, 52% {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.28), rgba(126,184,255,0.26) 42%, rgba(0,65,204,0.74)),
            #1477ff;
        filter: brightness(1.26);
    }
    34%, 70% {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.10), rgba(38,100,190,0.12) 42%, rgba(0,30,92,0.82)),
            #063a91;
        filter: brightness(0.84);
    }
}

@keyframes wheelPromptMissFlash {
    0%, 100% {
        filter: brightness(1);
    }
    18%, 52% {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,116,136,0.22) 42%, rgba(78,0,12,0.86)),
            #b8122d;
        filter: brightness(1.2);
    }
    34%, 70% {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.08), rgba(90,8,22,0.18) 42%, rgba(22,0,4,0.9)),
            #4a111a;
        filter: brightness(0.82);
    }
}

/* Keep keyboard letters readable on yellow/present keys. */
.key.present {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 38%, rgba(0,0,0,0.18) 100%),
        radial-gradient(circle at 50% 112%, rgba(255,239,160,0.52), transparent 54%),
        var(--present) !important;
    color: #1a1200 !important;
    font-weight: 700 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.42),
        0 0 2px rgba(255,255,255,0.30) !important;
}

#currency-intro-title b {
    display: inline-block;
    margin: 2px 0;
}

#currency-intro-btn {
    background: #22002f !important;
    color: #fff !important;
    border: 1px solid rgba(255, 204, 0, 0.82) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -5px 10px rgba(0,0,0,0.32),
        0 0 12px rgba(255,204,0,0.14) !important;
}

/* Final shared VFD typography. State animations below may still override opacity. */
#category-subtitle-box .lcd-text,
#category-subtitle-box.type-on .lcd-text,
#category-subtitle-box.instruction .lcd-text,
#lcd-panel #msg,
#lcd-panel.on #msg,
#lcd-panel.lcd-invalid #msg,
#lcd-panel.lcd-replay #msg {
    color: #eaf9ff !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    transform: none !important;
    text-shadow:
        0 0 2px rgba(255,255,255,0.95),
        0 0 7px rgba(123,221,255,0.78),
        0 0 16px rgba(58,180,255,0.38),
        0 0 26px rgba(255,35,62,0.18),
        0 1px 0 rgba(0,0,0,0.90) !important;
    filter: none !important;
}
/* Organic neutral edges: no color-changing outlines on tiles, keyboard, or Phase 3 choices. */
#game-board .tile,
#game-board .tile.correct,
#game-board .tile.present,
#game-board .tile.absent,
#game-board .tile.locked,
#game-board .tile.joker-locked,
#game-board .row.flash-invalid .tile,
#game-board .row.flash-replay .tile,
.key,
.key.correct,
.key.present,
.key.absent,
.sbox.choice-monitor,
.sbox.choice-monitor.hit,
.sbox.choice-monitor.miss,
.ecbtn,
.ecbtn.hit,
.ecbtn.miss {
    border-color: rgba(0,0,0,0.42) !important;
}

.key.joker-revealed {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05) 40%, rgba(0,0,0,0.26)),
        radial-gradient(circle at 50% 112%, rgba(238,173,255,0.42), transparent 56%),
        var(--accent) !important;
    color: #fff !important;
    border-color: rgba(0,0,0,0.42) !important;
    opacity: 1 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -8px 12px rgba(0,0,0,0.30),
        0 2px 0 rgba(0,0,0,0.48),
        0 0 12px rgba(191,90,242,0.28) !important;
    text-shadow:
        0 0 4px rgba(255,255,255,0.58),
        0 1px 0 rgba(0,0,0,0.72) !important;
}

#keyboard.keyboard-wake .key.key-wake-lit {
    animation: keyboardWakeKey 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#keyboard.keyboard-dead .key {
    color: rgba(255,255,255,0.04) !important;
    filter: brightness(0.22) saturate(0.18);
    opacity: 0.42;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -8px 12px rgba(0,0,0,0.46),
        0 2px 0 rgba(0,0,0,0.60) !important;
    text-shadow: none !important;
}

#keyboard.keyboard-secret-plate::before {
    content: "";
    position: absolute;
    inset: -2px 8px;
    z-index: 0;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.10)),
        radial-gradient(circle at 50% 12%, rgba(255,255,255,0.04), transparent 58%);
    pointer-events: none;
    transition: opacity 0.62s ease, filter 0.62s ease;
}

#keyboard.keyboard-secret-plate::after {
    content: none;
}

#keyboard.keyboard-secret-plate.keyboard-secret-plate-fading::before {
    opacity: 1;
    filter: blur(2px);
}

#keyboard.keyboard-secret-plate .krow,
#keyboard.keyboard-secret-plate .key {
    position: relative;
    z-index: 1;
}

#keyboard.keyboard-secret-plate.keyboard-dead .key:not(.key-wake-awake):not(.key-wake-lit) {
    color: transparent !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.045)) !important;
    border-color: rgba(255,255,255,0.15) !important;
    opacity: 0.72;
    filter: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.38),
        0 1px 0 rgba(0,0,0,0.42) !important;
    text-shadow: none !important;
}

#keyboard.keyboard-dead .key.key-wake-lit {
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 42%, rgba(0,0,0,0.34)),
        radial-gradient(circle at 50% 112%, rgba(170,180,205,0.14), transparent 58%),
        linear-gradient(135deg, rgba(22,24,32,0.96), rgba(54,58,72,0.76), rgba(75,86,110,0.30)) !important;
    filter: brightness(1.22) saturate(1.12) !important;
    opacity: 1;
    text-shadow:
        0 0 5px rgba(255,255,255,0.95),
        0 0 10px rgba(255,204,92,0.24),
        0 0 12px rgba(96,180,255,0.18) !important;
}

#keyboard.keyboard-dead .key.key-wake-lit.wake-blue {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.035) 42%, rgba(0,0,0,0.30)),
        radial-gradient(circle at 50% 112%, rgba(98,180,255,0.24), transparent 58%),
        linear-gradient(135deg, rgba(18,42,72,0.94), rgba(30,92,166,0.70), rgba(80,156,220,0.34)) !important;
}

#keyboard.keyboard-dead .key.key-wake-lit.wake-yellow {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 42%, rgba(0,0,0,0.30)),
        radial-gradient(circle at 50% 112%, rgba(255,214,90,0.26), transparent 58%),
        linear-gradient(135deg, rgba(54,35,18,0.94), rgba(142,96,30,0.68), rgba(230,184,65,0.32)) !important;
}

#keyboard.keyboard-dead .key.key-wake-lit.wake-dark {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.025) 42%, rgba(0,0,0,0.34)),
        radial-gradient(circle at 50% 112%, rgba(170,180,205,0.14), transparent 58%),
        linear-gradient(135deg, rgba(19,18,24,0.96), rgba(48,45,58,0.78), rgba(82,88,104,0.30)) !important;
}

#keyboard.keyboard-dead .key.key-wake-lit.wake-light {
    color: #15151c !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08) 42%, rgba(0,0,0,0.18)),
        radial-gradient(circle at 50% 112%, rgba(210,220,235,0.22), transparent 58%),
        linear-gradient(135deg, rgba(118,126,145,0.86), rgba(176,186,205,0.62), rgba(80,112,150,0.30)) !important;
}

#keyboard.keyboard-dead .key.key-wake-lit.wake-pink {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 42%, rgba(0,0,0,0.30)),
        radial-gradient(circle at 50% 112%, rgba(238,173,255,0.26), transparent 58%),
        linear-gradient(135deg, rgba(56,24,70,0.92), rgba(160,66,142,0.56), rgba(94,52,140,0.34)) !important;
}

#keyboard.keyboard-dead .key.key-wake-awake {
    color: #fff !important;
    filter: brightness(1) saturate(1);
    opacity: 1;
}

@keyframes keyboardWakeKey {
    0% {
        filter: brightness(1.22) saturate(1.12);
        transform: translateY(-2px) scale(1.045);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.52),
            inset 0 -8px 12px rgba(0,0,0,0.20),
            0 2px 0 rgba(0,0,0,0.46),
            0 0 10px rgba(255,196,78,0.26),
            0 0 14px rgba(96,180,255,0.16);
        text-shadow:
            0 0 5px rgba(255,255,255,0.95),
            0 0 10px rgba(255,204,92,0.24),
            0 0 12px rgba(96,180,255,0.18);
    }
    22% {
        filter: brightness(1.52) saturate(1.22);
        transform: translateY(-1px) scale(1.025);
    }
    100% {
        filter: brightness(1) saturate(1);
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #keyboard.keyboard-wake .key.key-wake-lit {
        animation: none;
    }
}

/* Phase 3 CRT glow containment: keep light inside the monitor edges. */
#console-info-bay.phase3-active #clue-banner {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -9px 18px rgba(0,0,0,0.50),
        inset 0 0 0 2px rgba(0,0,0,0.58),
        inset 0 0 14px rgba(208,241,255,0.08),
        0 2px 0 rgba(0,0,0,0.66),
        0 0 5px rgba(208,241,255,0.08) !important;
}

#console-info-bay.phase3-active #clue-banner::after {
    opacity: 0.46 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 26%, transparent 72%, rgba(0,0,0,0.30)),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 5px),
        radial-gradient(ellipse at 50% 50%, rgba(208,241,255,0.09), transparent 48%) !important;
}

#console-info-bay.phase3-active #clue-label,
#console-info-bay.phase3-active #clue-word,
#console-info-bay.phase3-active #clue-answer,
#console-info-bay.phase3-active .clue-sep {
    text-shadow:
        0 0 2px currentColor,
        0 0 6px color-mix(in srgb, currentColor 34%, transparent),
        0 1px 0 rgba(0,0,0,0.78) !important;
}

#console-info-bay.phase3-active #clue-emoji {
    filter:
        drop-shadow(0 0 4px rgba(255,204,0,0.22))
        drop-shadow(0 2px 2px rgba(0,0,0,0.58)) !important;
}

/* Phase 3 CRT glass highlight: keep vertical spacing, widen the side reach. */
#console-info-bay.phase3-active #clue-banner::before {
    left: 2px !important;
    right: 2px !important;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 8%, rgba(255,255,255,0.26) 50%, rgba(255,255,255,0.18) 92%, transparent 100%),
        linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)) !important;
}

/* End screen: donate box plus share button only. */
#win-overlay {
    position: relative;
    z-index: 2;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#win-overlay.on {
    animation: fadeIn 0.3s ease;
}

/* Mockup-style stats console. */
#stats-console {
    position: relative;
    display: none;
    width: 100%;
    padding: 12px 20px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.72);
    border-top-color: transparent;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), transparent 18%, transparent 82%, rgba(0,0,0,0.34)),
        radial-gradient(ellipse at 50% 18%, rgba(255,204,0,0.08), transparent 42%),
        radial-gradient(ellipse at 50% 78%, rgba(191,90,242,0.10), transparent 58%),
        rgba(8,0,10,0.76);
    box-shadow:
        inset 0 -1px 0 rgba(0,0,0,0.86),
        inset 0 0 0 2px rgba(18,8,20,0.72),
        inset 0 0 26px rgba(191,90,242,0.10),
        inset 0 0 64px rgba(0,0,0,0.52),
        0 2px 0 rgba(0,0,0,0.72);
    font-family: 'Courier New', monospace;
}

#capture-zone.stats-mode {
    gap: 8px !important;
    padding: 8px 8px 10px !important;
}

#capture-zone.stats-mode #category-banner,
#capture-zone.stats-mode #phase-transport-viewport,
#capture-zone.stats-mode #display-stack,
#capture-zone.stats-mode #category-subtitle-box,
#capture-zone.stats-mode #console-info-bay,
#capture-zone.stats-mode #lcd-panel,
#capture-zone.stats-mode #slot-machine,
#capture-zone.stats-mode #keyboard,
#capture-zone.stats-mode #hint-offer-inline {
    display: none !important;
}

#capture-zone.stats-mode #game-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 3px 0 0 !important;
    font-size: clamp(1rem, 4.7vw, 1.42rem) !important;
    letter-spacing: clamp(1px, 0.9vw, 3px) !important;
    white-space: nowrap !important;
    color: #fff !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.88),
        0 3px 2px rgba(32,10,24,0.64),
        0 0 12px rgba(255,245,210,0.22) !important;
}

body[data-console-skin="white"] #capture-zone.stats-mode #game-title {
    color: #242936 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.82),
        0 2px 2px rgba(98,108,128,0.34),
        0 0 10px rgba(255,255,255,0.20) !important;
}

body[data-console-skin="white"] #capture-zone.stats-mode #stats-proof-meta {
    color: #242936 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}

body[data-console-skin="white"] #capture-zone.stats-mode #stats-console {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 18%, rgba(0,0,0,0.12) 100%),
        #30343b !important;
    border-color: rgba(18,22,28,0.72) !important;
    border-top-color: transparent !important;
    box-shadow:
        inset 0 -1px 0 rgba(0,0,0,0.48),
        inset 0 0 0 2px rgba(255,255,255,0.06),
        0 2px 0 rgba(18,22,28,0.56) !important;
}

body[data-console-skin="rose-gold"] #capture-zone {
    border-color: rgba(104,45,58,0.78) !important;
    background:
        linear-gradient(90deg, transparent 0, rgba(115,53,66,0.62) 9px, rgba(205,132,140,0.34) 42px, transparent 86px) top 4px left 0 / 108px 3px no-repeat,
        linear-gradient(270deg, transparent 0, rgba(115,53,66,0.58) 9px, rgba(238,169,158,0.28) 42px, transparent 86px) top 4px right 0 / 108px 3px no-repeat,
        linear-gradient(180deg, rgba(255,218,207,0.44), rgba(255,255,255,0.08) 10px, transparent 18px, transparent calc(100% - 16px), rgba(93,39,51,0.42) calc(100% - 4px)),
        linear-gradient(90deg, rgba(118,55,68,0.36), rgba(77,28,40,0.22) 4px, transparent 12%, transparent 88%, rgba(77,28,40,0.28) calc(100% - 4px), rgba(118,55,68,0.34)),
        radial-gradient(circle at 50% 0%, rgba(255,239,230,0.24), transparent 31%),
        linear-gradient(180deg, rgba(216,149,150,0.68), rgba(112,52,66,0.52)),
        linear-gradient(180deg, #e8ada5 0%, #b76e79 48%, #633040 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(255,231,220,0.48),
        inset 0 -3px 0 rgba(62,18,29,0.60),
        inset 3px 0 0 rgba(255,196,183,0.18),
        inset -3px 0 0 rgba(65,20,31,0.32),
        inset 0 0 24px rgba(255,236,226,0.08),
        inset 0 0 36px rgba(56,14,25,0.26),
        0 2px 0 rgba(0,0,0,0.66),
        0 0 20px rgba(183,110,121,0.20),
        var(--console-space-glow) !important;
}

body[data-console-skin="rose-gold"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before,
body[data-console-skin="rose-gold"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
    background:
        linear-gradient(180deg, rgba(167,91,101,0.76), rgba(242,169,158,0.27) 42%, rgba(75,27,39,0.68)) !important;
    box-shadow:
        inset 1px 0 0 rgba(255,218,205,0.22),
        0 0 7px rgba(82,27,40,0.30),
        0 0 8px rgba(183,110,121,0.20) !important;
}

body[data-console-skin="rose-gold"] #slot-machine {
    border-color: rgba(121,57,69,0.50) !important;
    background:
        linear-gradient(180deg, rgba(231,166,158,0.28), transparent 10px, transparent calc(100% - 10px), rgba(50,12,22,0.34)),
        linear-gradient(90deg, rgba(116,49,63,0.26), transparent 10%, transparent 90%, rgba(65,20,32,0.34)),
        rgba(112,49,63,0.38) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,220,207,0.18),
        inset 0 -2px 0 rgba(48,11,21,0.54),
        inset 2px 0 0 rgba(215,139,143,0.16),
        inset -2px 0 0 rgba(75,25,37,0.22),
        inset 0 0 18px rgba(39,8,17,0.46),
        inset 0 0 30px rgba(183,110,121,0.13),
        0 0 14px rgba(183,110,121,0.16) !important;
}

/* Neon green cabinet: luminous trim around a deep arcade-green shell. */
body[data-console-skin="neon-green"] #capture-zone {
    border-color: rgba(3,58,23,.88) !important;
    background:
        linear-gradient(90deg, transparent 0, rgba(9,93,37,.62) 9px, rgba(20,156,58,.30) 42px, transparent 86px) top 4px left 0 / 108px 3px no-repeat,
        linear-gradient(270deg, transparent 0, rgba(9,93,37,.62) 9px, rgba(80,232,107,.25) 42px, transparent 86px) top 4px right 0 / 108px 3px no-repeat,
        linear-gradient(180deg, rgba(86,255,123,.26), rgba(255,255,255,.04) 10px, transparent 18px, transparent calc(100% - 16px), rgba(3,53,23,.48) calc(100% - 4px)),
        linear-gradient(90deg, rgba(10,104,39,.36), rgba(3,45,19,.22) 4px, transparent 12%, transparent 88%, rgba(3,45,19,.30) calc(100% - 4px), rgba(10,104,39,.34)),
        radial-gradient(circle at 50% 0%, rgba(159,255,180,.12), transparent 30%),
        linear-gradient(180deg, rgba(29,165,69,.56), rgba(4,62,26,.50)),
        linear-gradient(180deg, #1db34a 0%, #0b6a30 48%, #032c17 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(176,255,192,.24), inset 0 -3px 0 rgba(0,28,10,.60),
        inset 3px 0 0 rgba(26,157,60,.22), inset -3px 0 0 rgba(2,39,15,.32),
        inset 0 0 24px rgba(124,255,151,.06), inset 0 0 36px rgba(0,24,9,.28),
        0 2px 0 rgba(0,0,0,.66), 0 0 20px rgba(98,255,121,.18), var(--console-space-glow) !important;
}

body[data-console-skin="neon-green"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before,
body[data-console-skin="neon-green"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
    background: linear-gradient(180deg, rgba(6,92,33,.74), rgba(98,255,121,.25) 42%, rgba(2,42,16,.68)) !important;
    box-shadow: inset 1px 0 0 rgba(142,255,164,.18), 0 0 7px rgba(4,78,28,.30), 0 0 8px rgba(98,255,121,.18) !important;
}

body[data-console-skin="neon-green"] #slot-machine {
    border-color: rgba(14,123,45,.50) !important;
    background:
        linear-gradient(180deg, rgba(89,240,116,.22), transparent 10px, transparent calc(100% - 10px), rgba(0,25,9,.34)),
        linear-gradient(90deg, rgba(7,97,33,.26), transparent 10%, transparent 90%, rgba(1,39,14,.34)),
        rgba(8,85,35,.38) !important;
    box-shadow:
        inset 0 1px 0 rgba(155,255,176,.16), inset 0 -2px 0 rgba(0,28,10,.54),
        inset 2px 0 0 rgba(32,177,67,.16), inset -2px 0 0 rgba(2,53,19,.22),
        inset 0 0 18px rgba(0,28,10,.46), inset 0 0 30px rgba(98,255,121,.13),
        0 0 14px rgba(98,255,121,.16) !important;
}

body[data-console-skin="neon-green"] #category-banner {
    background: linear-gradient(180deg, rgba(38,185,75,.68), rgba(5,71,28,.70)) !important;
    box-shadow: inset 0 1px 0 rgba(180,255,193,.18), inset 0 -2px 0 rgba(0,31,11,.48) !important;
}

/* Orange is the Ferrari cabinet treatment in a bright lacquered citrus palette. */
body[data-console-skin="orange"] #capture-zone {
    border-color: rgba(150,58,0,.78) !important;
    background:
        radial-gradient(circle at 18% 10%, rgba(255,244,196,.34) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 18%, rgba(255,228,154,.22) 0 1px, transparent 2px),
        linear-gradient(90deg, transparent 0, rgba(176,62,0,.60) 9px, rgba(255,178,42,.34) 42px, transparent 86px) top 4px left 0 / 108px 3px no-repeat,
        linear-gradient(270deg, transparent 0, rgba(122,42,0,.60) 9px, rgba(255,156,24,.28) 42px, transparent 86px) top 4px right 0 / 108px 3px no-repeat,
        linear-gradient(180deg, rgba(255,126,8,.44), rgba(255,255,255,.06) 10px, transparent 18px, transparent calc(100% - 16px), rgba(74,22,0,.52) calc(100% - 4px)),
        linear-gradient(90deg, rgba(148,48,0,.42), rgba(84,25,0,.22) 4px, transparent 12%, transparent 88%, rgba(84,25,0,.32) calc(100% - 4px), rgba(148,48,0,.38)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 30%),
        linear-gradient(180deg, rgba(255,158,0,.72), rgba(206,64,0,.44)),
        linear-gradient(180deg, #ffc02a 0%, #ff8a00 48%, #d94b00 100%) !important;
    box-shadow: inset 0 2px 0 rgba(255,223,140,.36), inset 0 -3px 0 rgba(0,0,0,.62), inset 3px 0 0 rgba(180,58,0,.34), inset -3px 0 0 rgba(76,20,0,.38), inset 0 0 22px rgba(255,255,255,.08), inset 0 0 34px rgba(0,0,0,.30), 0 2px 0 rgba(0,0,0,.68), 0 0 20px rgba(255,126,12,.28), var(--console-space-glow) !important;
}

body[data-console-skin="orange"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before,
body[data-console-skin="orange"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
    background: linear-gradient(180deg, rgba(255,132,0,.78), rgba(255,190,38,.38) 42%, rgba(194,52,0,.64)) !important;
    box-shadow: inset 1px 0 0 rgba(255,238,172,.30), 0 0 7px rgba(220,84,0,.30), 0 0 10px rgba(255,166,22,.34) !important;
}

body[data-console-skin="orange"] #slot-machine {
    border-color: rgba(170,62,0,.50) !important;
    background: linear-gradient(180deg, rgba(255,184,28,.32), transparent 10px, transparent calc(100% - 10px), rgba(0,0,0,.34)), linear-gradient(90deg, rgba(232,88,0,.28), transparent 10%, transparent 90%, rgba(154,42,0,.30)), rgba(214,72,0,.36) !important;
    box-shadow: inset 0 1px 0 rgba(255,232,150,.28), inset 0 -2px 0 rgba(0,0,0,.52), inset 2px 0 0 rgba(255,122,0,.22), inset -2px 0 0 rgba(156,42,0,.22), inset 0 0 18px rgba(0,0,0,.48), inset 0 0 30px rgba(255,142,0,.18), 0 0 14px rgba(255,154,12,.20) !important;
}

body[data-console-skin="orange"] #category-banner::before {
    background: linear-gradient(180deg, rgba(255,174,54,.28), rgba(64,20,0,.14) 24%, rgba(64,20,0,.18) 70%, rgba(0,0,0,.36)), linear-gradient(90deg, rgba(0,0,0,.16), transparent 18%, transparent 82%, rgba(0,0,0,.22)) !important;
    box-shadow: inset 0 5px 9px rgba(255,184,70,.16), inset 0 -3px 6px rgba(0,0,0,.40), inset 0 0 18px rgba(122,38,0,.18) !important;
}

body[data-console-skin="white"] #capture-zone.stats-mode #stats-receipt {
    color: #f3f5f8;
}

body[data-console-skin="white"] #capture-zone.stats-mode .stats-emoji-label {
    color: #f3f5f8;
}

body[data-console-skin="white"] #capture-zone.stats-mode .stats-emoji-item.naughty-winner .stats-emoji-label {
    color: #f3f5f8;
    text-decoration-color: rgba(243,245,248,0.72);
}

body[data-console-skin="white"] #capture-zone.stats-mode .stat-row {
    border-bottom-color: rgba(46,54,70,0.24);
}

body[data-console-skin="white"] #capture-zone.stats-mode .stat-row.rule {
    border-bottom-color: rgba(38,45,60,0.58);
}

body[data-console-skin="white"] #capture-zone.stats-mode .stat-row.section {
    border-bottom-color: rgba(210,216,226,0.46);
    color: #d8dee8;
}

#capture-zone.stats-mode #stats-console {
    display: block;
}

#stats-proof-meta {
    display: none;
    text-align: center;
    color: rgba(255,255,255,0.78);
    font-family: 'Courier New', monospace;
    font-size: clamp(0.62rem, 2.65vw, 0.78rem);
    letter-spacing: 0.08em;
    line-height: 1.25;
    margin: -1px 0 8px;
    text-transform: uppercase;
}

#capture-zone.stats-mode #stats-proof-meta {
    display: block;
}

#stats-category {
    color: var(--yellow);
    font-family: 'Courier New', monospace;
    font-size: clamp(0.72rem, 3vw, 0.94rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin: 0 auto 6px;
    text-align: center;
    text-transform: uppercase;
}

#stats-emojis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    justify-content: center;
    gap: 8px;
    font-size: clamp(1.08rem, 4.6vw, 1.48rem);
    line-height: 1.05;
    margin: 1px auto 6px;
    max-width: 280px;
    width: 100%;
}

.stats-emoji-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    max-width: none;
    gap: 3px;
}

.stats-emoji-icon {
    display: block;
    line-height: 1;
}

.stats-emoji-label {
    display: block;
    max-width: 100%;
    color: rgba(255,255,255,0.76);
    font-size: clamp(0.48rem, 2vw, 0.6rem);
    line-height: 1.05;
    letter-spacing: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: lowercase;
    white-space: nowrap;
}

.stats-emoji-item.naughty-winner .stats-emoji-label {
    color: #ffd7fb;
    text-decoration: underline;
    text-decoration-color: rgba(255,75,174,0.95);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.stats-emoji-item.naughty-winner {
    order: 2;
}

.stats-emoji-item.naughty-winner .stats-emoji-icon {
    font-size: 1.34em;
    margin-bottom: -1px;
}

.stats-emoji-left {
    order: 1;
}

.stats-emoji-center {
    order: 2;
}

.stats-emoji-right {
    order: 3;
}

#stats-magic {
    text-align: center;
    color: var(--yellow);
    font-size: clamp(0.96rem, 4.8vw, 1.28rem);
    letter-spacing: 0.36em;
    margin: 0 0 8px;
    padding-left: 0.36em;
}

#stats-receipt {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: clamp(0.69rem, 3.05vw, 0.9rem);
    line-height: 1.16;
    color: #fff;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    min-height: 21px;
    padding: 1px 0;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.stat-row.rule {
    min-height: 6px;
    margin: 2px 0;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.68);
}

.stat-row.center {
    justify-content: center;
    text-align: center;
}

.stat-row.section {
    justify-content: center;
    min-height: 18px;
    margin: 3px 0 1px;
    padding: 2px 0 1px;
    border-bottom: 1px solid rgba(255,204,0,0.28);
    color: var(--yellow);
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
}

.stat-row.section .stat-label {
    text-align: center;
}

.stat-row.section .stat-value {
    display: none;
}

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

.stat-label {
    min-width: 0;
    text-align: left;
}

.stat-value {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.stat-yellow {
    color: var(--yellow);
}

.stat-row.good .stat-value {
    color: #30d158;
}

.stat-row.bad .stat-value {
    color: #ff4f7f;
}

.stat-row.total {
    font-weight: 700;
}

#win-overlay #rewatch-skit-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 32px !important;
    padding: 4px 14px !important;
    border-radius: 999px !important;
    align-self: stretch;
    justify-self: stretch;
}

#exchange-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 72;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(191,90,242,0.16) 0%, transparent 42%),
        rgba(0,0,0,0.58);
    backdrop-filter: blur(1.5px);
    overflow: hidden;
}

#exchange-modal.on {
    display: flex;
    animation: fadeIn 0.32s ease both;
}

#exchange-modal.leaving {
    display: flex;
    animation: fadeOut 0.55s ease forwards;
}

#exchange-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.72;
    background:
        radial-gradient(circle at 11% 17%, rgba(255,255,255,0.7) 0 1px, transparent 3px),
        radial-gradient(circle at 19% 76%, rgba(191,90,242,0.52) 0 1px, transparent 4px),
        radial-gradient(circle at 31% 28%, rgba(255,204,0,0.58) 0 1.5px, transparent 5px),
        radial-gradient(circle at 49% 86%, rgba(255,255,255,0.62) 0 1px, transparent 3px),
        radial-gradient(circle at 67% 18%, rgba(236,10,187,0.46) 0 1.5px, transparent 5px),
        radial-gradient(circle at 84% 38%, rgba(255,255,255,0.72) 0 1px, transparent 3px),
        radial-gradient(ellipse at 22% 72%, rgba(191,90,242,0.18) 0%, transparent 32%),
        radial-gradient(ellipse at 78% 25%, rgba(255,204,0,0.12) 0%, transparent 30%);
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.38));
    animation: galaxyDrift 14s ease-in-out infinite alternate;
}

#exchange-modal-box {
    width: min(350px, calc(100vw - 32px), calc(100vh - 32px));
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 34px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 24% 20%, rgba(255,255,255,0.46) 0%, transparent 18%),
        radial-gradient(circle at 78% 28%, rgba(255,204,0,0.48) 0%, transparent 18%),
        radial-gradient(circle at 32% 76%, rgba(236,10,187,0.70) 0%, transparent 46%),
        radial-gradient(circle at 70% 66%, rgba(144,60,255,0.56) 0%, transparent 44%),
        radial-gradient(circle at 48% 48%, #bf5af2 0%, #6f1d93 54%, #2f0648 100%);
    background-size: 180% 180%, 150% 150%, 205% 205%, 190% 190%, 165% 165%;
    box-shadow:
        0 0 22px rgba(191,90,242,0.95),
        0 0 64px rgba(236,10,187,0.44),
        inset 0 0 30px rgba(255,255,255,0.17),
        inset 0 -24px 44px rgba(0,0,0,0.34);
    animation: briefingMoonBirth 0.82s cubic-bezier(0.16, 1, 0.3, 1), mojiMoonFluid 9s ease-in-out infinite;
}

#exchange-modal-box::before {
    content: '';
    position: absolute;
    inset: 16px;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.12),
        inset 0 0 36px rgba(0,0,0,0.22);
}

#exchange-modal-box::after {
    content: '';
    position: absolute;
    inset: 18px;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 28%, rgba(126,210,255,0.16), transparent 42%),
        linear-gradient(180deg, rgba(8,30,54,0.52), rgba(3,12,28,0.38));
    border: 1px solid rgba(126,210,255,0.16);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 0 28px rgba(3,12,28,0.46),
        0 0 18px rgba(74,192,255,0.08);
    backdrop-filter: blur(2px) saturate(0.84);
}

#exchange-modal-title,
#exchange-modal-icon,
#exchange-rates,
#exchange-feedback,
#exchange-wallet {
    position: relative;
    z-index: 2;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 7px rgba(0,0,0,0.95);
}

#exchange-modal-title {
    color: var(--yellow);
    font-size: 0.98rem;
    letter-spacing: 1px;
}

#exchange-modal-icon {
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 2px;
    opacity: 0.92;
}

#exchange-wallet {
    width: min(230px, 78%);
    display: grid;
    gap: 5px;
    margin: 2px 0;
}

.exchange-wallet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.16);
    font-size: 0.74rem;
}

.exchange-wallet-row b {
    color: var(--yellow);
    font-weight: 400;
}

#exchange-rates {
    font-size: 0.68rem;
    line-height: 1.35;
    color: rgba(255,255,255,0.92);
}

.exchange-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: min(230px, 78%);
}

#exchange-modal .action-btn {
    min-height: 30px;
    min-width: 0;
    width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: 0;
    background: rgba(10,10,10,0.18);
    border-color: rgba(0,0,0,0.55);
    color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.18);
}

#exchange-modal .action-btn:hover:not(:disabled),
#exchange-modal .action-btn:focus-visible:not(:disabled) {
    background: rgba(255,204,0,0.88);
    color: #120618;
}

#exchange-modal .action-btn:disabled {
    opacity: 0.44;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

#exchange-feedback {
    min-height: 1em;
    color: #fff6d8;
    font-size: 0.66rem;
    line-height: 1.2;
}

#exchange-close-btn {
    position: relative;
    z-index: 2;
    width: auto !important;
    min-width: 88px !important;
}

@media (max-width: 480px) {
    #help-modal {
        padding: 12px;
        background: rgba(5,0,5,0.92);
        align-items: flex-start;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: manipulation;
    }
    #help-modal-box {
        max-height: none;
        min-height: min(70dvh, 560px);
        padding: 18px 16px;
        animation: slideUp 0.32s ease-out;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #exchange-modal {
        padding: 12px;
        background: rgba(4,2,8,0.78);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: manipulation;
    }
    #exchange-modal-box {
        width: min(332px, calc(100vw - 24px));
        min-height: min(70dvh, 420px);
        border-radius: 24px;
        padding: 20px 16px;
        gap: 6px;
        background:
            radial-gradient(circle at 24% 20%, rgba(255,255,255,0.18) 0%, transparent 24%),
            linear-gradient(135deg, rgba(191,90,242,0.95), rgba(111,29,147,0.96) 55%, rgba(29,8,47,0.98));
        box-shadow:
            0 0 18px rgba(191,90,242,0.72),
            inset 0 0 20px rgba(255,255,255,0.12),
            inset 0 -16px 30px rgba(0,0,0,0.28);
        animation: slideUp 0.32s ease-out;
    }
    #exchange-modal-box::before {
        inset: 12px;
        border-radius: inherit;
        border: 1px solid rgba(255,255,255,0.16);
        box-shadow:
            inset 0 0 14px rgba(255,255,255,0.10),
            inset 0 0 24px rgba(0,0,0,0.20);
    }
    #exchange-modal-box::after {
        inset: 14px;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(8,30,54,0.34), rgba(3,12,28,0.28));
        border: 1px solid rgba(126,210,255,0.12);
    }
    #exchange-wallet,
    .exchange-actions {
        width: min(220px, 100%);
    }
}

@media (max-width: 360px) {
    #win-overlay {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }

    #win-overlay #share-nudge,
    #win-overlay #exchange-stats-btn,
    #win-overlay #stats-back-btn,
    #win-overlay #share-stats-btn {
        grid-column: 1;
        grid-row: auto;
    }

    #exchange-modal-box {
        width: min(310px, calc(100vw - 24px));
        padding: 18px 14px;
        gap: 5px;
    }

    #exchange-wallet,
    .exchange-actions {
        width: min(214px, 100%);
    }

    #exchange-modal-title { font-size: 0.86rem; }
    #exchange-rates { font-size: 0.62rem; }
    #exchange-modal .action-btn { font-size: 0.62rem; min-height: 28px; }
}

/* Found-letter CRTs: remove green accent glow/line, keep a soft white inner bloom. */
#status-panel .sbox:not(.choice-monitor):not(.dead) {
    border-color: rgba(0,0,0,0.72) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.16),
        inset 0 0 0 1px rgba(0,0,0,0.48),
        inset 0 0 16px rgba(255,255,255,0.16),
        inset 0 0 28px rgba(220,238,255,0.08),
        0 1px 0 rgba(255,255,255,0.10) !important;
}

#status-panel .sbox:not(.choice-monitor):not(.dead)::after {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 24%, transparent 78%, rgba(0,0,0,0.28)),
        radial-gradient(ellipse at 50% 52%, rgba(255,255,255,0.10), transparent 58%) !important;
    box-shadow:
        inset 0 1px 4px rgba(0,0,0,0.58),
        inset 0 0 12px rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(255,255,255,0.075) !important;
}

#status-panel .sbox:not(.choice-monitor):not(.dead) .sbox-ltr.done,
#status-panel .sbox:not(.choice-monitor):not(.dead) .sem.win {
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,0.24))
        drop-shadow(0 1px 2px rgba(0,0,0,0.58)) !important;
    text-shadow:
        0 0 4px rgba(255,255,255,0.26),
        0 1px 0 rgba(0,0,0,0.82) !important;
}

/* Status CRT emoji fit: eliminated options disappear; remaining options scale to fit. */
#status-panel.emoji-tv-idle .sbox:not(.choice-monitor):not(.dead):not(.secret-cracked-crt),
#status-panel .sbox:not(.choice-monitor):not(.dead):not(.secret-cracked-crt) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: clamp(2px, 0.7vw, 7px) !important;
    padding: clamp(4px, 0.75vw, 7px) clamp(6px, 1vw, 10px) !important;
}

#status-panel .sbox:not(.dead):not(.choice-monitor) .sbox-emojis {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    gap: 1px !important;
    font-size: clamp(1.48rem, 3.35vw, 2.18rem) !important;
    line-height: 1 !important;
    overflow: visible !important;
}

#status-panel .sbox:not(.dead):not(.choice-monitor) .sbox-emojis.emoji-count-3 {
    font-size: clamp(0.82rem, 3.15vw, 1.08rem) !important;
}

#status-panel .sbox:not(.dead):not(.choice-monitor) .sbox-emojis.emoji-count-2 {
    font-size: clamp(0.98rem, 3.65vw, 1.28rem) !important;
}

#status-panel .sbox:not(.dead):not(.choice-monitor) .sbox-emojis.emoji-count-1,
#status-panel .sbox:not(.dead):not(.choice-monitor) .sbox-emojis:has(.sem.win) {
    font-size: clamp(1.72rem, 3.9vw, 2.5rem) !important;
}

#status-panel.emoji-tv-idle .sbox:not(.choice-monitor):not(.dead) .sbox-ltr,
#status-panel .sbox:not(.choice-monitor):not(.dead) .sbox-ltr {
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    font-size: clamp(1.26rem, 2.85vw, 1.9rem) !important;
    line-height: 1 !important;
    text-align: center !important;
}

#status-panel .sbox:not(.dead):not(.choice-monitor) .sbox-emojis .sem {
    flex: 0 1 auto;
    line-height: 1;
}

#status-panel.emoji-tv-idle .sbox:not(.choice-monitor):not(.dead) .sem.win,
#status-panel .sbox:not(.choice-monitor):not(.dead) .sem.win {
    font-size: inherit !important;
    line-height: 1 !important;
}

/* Hint modals: consistent slim purple frame and purple button feedback. */
#hint-modal-box,
#dict-hint-modal-box,
#help-modal-box {
    border: 1px solid var(--accent) !important;
}

#hint-modal-box .hint-btn-no,
#dict-hint-modal-box .hint-btn-no,
#help-modal-box .hint-btn-no {
    border: 1px solid var(--border) !important;
}

#hint-modal-box .hint-btn-no:hover,
#hint-modal-box .hint-btn-no:active,
#hint-modal-box .hint-btn-no:focus-visible,
#dict-hint-modal-box .hint-btn-no:hover,
#dict-hint-modal-box .hint-btn-no:active,
#dict-hint-modal-box .hint-btn-no:focus-visible,
#help-modal-box .hint-btn-no:hover,
#help-modal-box .hint-btn-no:active,
#help-modal-box .hint-btn-no:focus-visible {
    background: var(--surface2) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
    outline: none !important;
}

/* About modal: explicit late sizing for Android WebView, which can collapse the shared help-modal box. */
#about-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow-y: auto !important;
}

#about-modal-box {
    width: min(360px, calc(100vw - 40px)) !important;
    min-height: 238px !important;
    height: auto !important;
    max-height: calc(100svh - 40px) !important;
    padding: 26px 22px !important;
    gap: 14px !important;
    overflow: visible !important;
    border: 1px solid var(--accent) !important;
    border-radius: 14px !important;
}

#about-modal-copy,
#about-modal .hint-btns {
    flex: 0 0 auto !important;
}

#about-modal-box .hint-btn-no {
    border: 1px solid var(--border) !important;
}

#about-modal-box .hint-btn-no:hover,
#about-modal-box .hint-btn-no:active,
#about-modal-box .hint-btn-no:focus-visible {
    background: var(--surface2) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
    outline: none !important;
}

/* Correct emoji feedback: blue-white CRT light, never green. */
#status-panel .sbox.choice-monitor .choice-label {
    color: rgba(255,232,132,0.94) !important;
    opacity: 0.96 !important;
    filter: contrast(1.04) brightness(1.02) saturate(1.02) !important;
    text-shadow:
        0 0 2px rgba(255,232,132,0.46),
        0 0 7px rgba(255,204,0,0.18),
        0 1px 0 rgba(0,0,0,0.82) !important;
}

#status-panel .sbox.choice-monitor.hit {
    --crt-inner-glow: rgba(126,210,255,0.26) !important;
    border-color: rgba(0,0,0,0.42) !important;
    box-shadow:
        inset 0 4px 8px rgba(0,0,0,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.16),
        inset 0 0 0 2px rgba(0,0,0,0.50),
        inset 0 0 24px rgba(126,210,255,0.20),
        0 1px 0 rgba(255,255,255,0.14) !important;
}

#status-panel .choice-monitor.hit .choice-emoji,
#status-panel .choice-monitor.hit .choice-label {
    color: #eaf9ff !important;
    filter:
        drop-shadow(0 0 6px rgba(126,210,255,0.38))
        drop-shadow(0 2px 2px rgba(0,0,0,0.5)) !important;
    text-shadow:
        0 0 4px rgba(126,210,255,0.40),
        0 1px 0 rgba(0,0,0,0.82) !important;
}

#status-panel .choice-monitor.miss .choice-label {
    color: #ff9aa9 !important;
    filter: contrast(1.02) brightness(0.98) saturate(1.04) !important;
    text-shadow:
        0 0 2px rgba(255,154,169,0.48),
        0 0 7px rgba(255,116,136,0.18),
        0 1px 0 rgba(0,0,0,0.82) !important;
}

#status-panel .sbox:not(.choice-monitor):not(.dead) .sbox-ltr.done,
#status-panel .sbox:not(.choice-monitor):not(.dead) .sem.win {
    color: #eaf9ff !important;
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,0.24))
        drop-shadow(0 0 9px rgba(126,210,255,0.16))
        drop-shadow(0 1px 2px rgba(0,0,0,0.58)) !important;
    text-shadow:
        0 0 4px rgba(255,255,255,0.26),
        0 0 8px rgba(126,210,255,0.16),
        0 1px 0 rgba(0,0,0,0.82) !important;
}

/* VFD body spacing: keep the glass centered between surrounding modules. */
#category-subtitle-box {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

#lcd-panel,
#console-info-bay.status-active + #lcd-panel,
#console-info-bay.phase-ready-active + #lcd-panel,
#console-info-bay.phase3-active + #lcd-panel {
    margin-top: 1px !important;
    margin-bottom: 2px !important;
}

#category-subtitle-box,
#lcd-panel {
    width: calc(100% - 14px) !important;
    max-width: 406px !important;
    min-height: 38px !important;
    height: 44px !important;
    border-radius: 11px !important;
    border-color: rgba(255,255,255,0.14) !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -2px 0 rgba(0,0,0,0.54),
        inset 0 0 0 1px rgba(255,204,0,0.055),
        inset 0 3px 7px rgba(0,0,0,0.72),
        inset 0 0 20px rgba(74,192,255,0.08),
        inset 0 0 34px rgba(255,28,56,0.10),
        0 2px 0 rgba(0,0,0,0.52),
        0 5px 12px rgba(0,0,0,0.22),
        0 0 12px rgba(191,90,242,0.08) !important;
}

/* VFD monoblock frame: outer embossed shell plus inset glass, like the CRT block. */
#category-subtitle-box,
#lcd-panel {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035) 34%, rgba(0,0,0,0.32) 100%),
        radial-gradient(circle at 50% 112%, rgba(255,204,0,0.16), transparent 55%),
        linear-gradient(90deg, rgba(191,90,242,0.18), rgba(255,204,0,0.06), rgba(191,90,242,0.16)),
        rgba(18,14,22,0.94) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -2px 0 rgba(0,0,0,0.58),
        inset 0 0 0 1px rgba(255,204,0,0.055),
        0 2px 0 rgba(0,0,0,0.52),
        0 5px 12px rgba(0,0,0,0.26),
        0 0 12px rgba(191,90,242,0.08) !important;
}

#category-subtitle-box::before,
#lcd-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 5px 7px !important;
    z-index: 0 !important;
    border-radius: 7px !important;
    pointer-events: none !important;
    background:
        radial-gradient(ellipse at 50% 54%, rgba(255,42,58,0.18) 0%, rgba(120,8,28,0.10) 34%, transparent 66%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.018) 16%, rgba(0,0,0,0.30) 100%),
        repeating-linear-gradient(90deg, rgba(135,218,255,0.045) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #05090d 0%, #010305 52%, #000102 100%) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.86),
        inset 0 -1px 0 rgba(255,255,255,0.07),
        inset 0 0 0 1px rgba(0,0,0,0.48),
        inset 0 0 18px rgba(74,192,255,0.08),
        inset 0 0 30px rgba(255,28,56,0.10) !important;
}

#category-subtitle-box::after,
#lcd-panel::after {
    inset: 5px 7px !important;
    z-index: 1 !important;
    border-radius: 7px !important;
}

#category-subtitle-box .lcd-text,
#lcd-panel #msg {
    position: relative !important;
    z-index: 2 !important;
}

/* Unified display monoblock: upper VFD + CRT row + lower VFD share one footprint. */
#category-subtitle-box,
#console-info-bay.status-active,
#console-info-bay.phase-ready-active,
#console-info-bay.phase3-active,
#lcd-panel,
#console-info-bay.status-active + #lcd-panel,
#console-info-bay.phase-ready-active + #lcd-panel,
#console-info-bay.phase3-active + #lcd-panel {
    width: calc(100% - 14px) !important;
    max-width: 406px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#console-info-bay.status-active #status-panel,
#console-info-bay.phase-ready-active #status-panel,
#console-info-bay.phase3-active #status-panel {
    width: 100% !important;
    max-width: none !important;
}

#category-subtitle-box {
    border-radius: 11px 11px 0 0 !important;
    margin-bottom: -6px !important;
}

#console-info-bay.status-active,
#console-info-bay.phase-ready-active,
#console-info-bay.phase3-active {
    margin-top: 0 !important;
    margin-bottom: -6px !important;
}

#console-info-bay.status-active #status-panel,
#console-info-bay.phase-ready-active #status-panel,
#console-info-bay.phase3-active #status-panel {
    border-radius: 0 !important;
}

#lcd-panel,
#console-info-bay.status-active + #lcd-panel,
#console-info-bay.phase-ready-active + #lcd-panel,
#console-info-bay.phase3-active + #lcd-panel {
    border-radius: 0 0 11px 11px !important;
    margin-top: 0 !important;
}

/* Hide internal seams so the display stack reads as one shared frame. */
#category-subtitle-box {
    border-bottom-color: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 1px 0 0 rgba(255,204,0,0.055),
        inset -1px 0 0 rgba(255,204,0,0.055),
        0 2px 0 rgba(0,0,0,0.34) !important;
}

#console-info-bay.status-active #status-panel,
#console-info-bay.phase-ready-active #status-panel,
#console-info-bay.phase3-active #status-panel {
    border-top-color: rgba(255,255,255,0.08) !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
    box-shadow:
        inset 1px 0 0 rgba(255,204,0,0.055),
        inset -1px 0 0 rgba(255,204,0,0.055),
        inset 0 0 0 1px rgba(0,0,0,0.22),
        inset 0 2px 5px rgba(0,0,0,0.52) !important;
}

#lcd-panel,
#console-info-bay.status-active + #lcd-panel,
#console-info-bay.phase-ready-active + #lcd-panel,
#console-info-bay.phase3-active + #lcd-panel {
    border-top-color: transparent !important;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,0.58),
        inset 1px 0 0 rgba(255,204,0,0.055),
        inset -1px 0 0 rgba(255,204,0,0.055),
        0 2px 0 rgba(0,0,0,0.52),
        0 5px 12px rgba(0,0,0,0.26),
        0 0 12px rgba(191,90,242,0.08) !important;
}

/* Shared display stack: one real outer frame, three inset screens. */
#display-stack {
    width: calc(100% - 14px);
    max-width: 406px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background:
        linear-gradient(180deg, rgba(255,239,160,0.10), rgba(255,255,255,0.026) 34%, rgba(0,0,0,0.36) 100%),
        radial-gradient(circle at 50% 112%, rgba(255,204,0,0.22), transparent 55%),
        linear-gradient(90deg, rgba(132,82,42,0.24), rgba(255,204,0,0.10), rgba(95,54,82,0.22)),
        rgba(24,15,22,0.95);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -2px 0 rgba(0,0,0,0.58),
        inset 0 0 0 1px rgba(255,204,0,0.055),
        0 2px 0 rgba(0,0,0,0.52),
        0 5px 12px rgba(0,0,0,0.26),
        0 0 12px rgba(255,204,0,0.07);
}

#display-stack #category-subtitle-box,
#display-stack #console-info-bay,
#display-stack #lcd-panel,
#display-stack #status-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#display-stack #category-subtitle-box,
#display-stack #lcd-panel {
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.72) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.86),
        inset 0 -1px 0 rgba(255,255,255,0.07),
        inset 0 0 0 1px rgba(0,0,0,0.48),
        inset 0 0 18px rgba(74,192,255,0.08),
        inset 0 0 30px rgba(255,28,56,0.10) !important;
}

#display-stack #category-subtitle-box::before,
#display-stack #lcd-panel::before {
    inset: 0 !important;
    border-radius: inherit !important;
}

#display-stack #category-subtitle-box::after,
#display-stack #lcd-panel::after {
    inset: 0 !important;
    border-radius: inherit !important;
}

#display-stack #status-panel {
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.66) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.13),
        inset 0 0 0 1px rgba(0,0,0,0.48),
        inset 0 0 18px rgba(0,0,0,0.56) !important;
}

/* Final display-stack tune: VFD twins plus frameless CRT tray. */
#display-stack {
    gap: 6px !important;
}

#display-stack #category-subtitle-box,
#display-stack #lcd-panel {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    align-self: center !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.72) !important;
}

#display-stack #console-info-bay.status-active #status-panel,
#display-stack #console-info-bay.phase-ready-active #status-panel {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#display-stack #console-info-bay.status-active #status-panel::before,
#display-stack #console-info-bay.status-active #status-panel::after,
#display-stack #console-info-bay.phase-ready-active #status-panel::before,
#display-stack #console-info-bay.phase-ready-active #status-panel::after {
    display: none !important;
}

/* Copper display block: shared VFD/CRT hardware accent for all console skins. */
#display-stack {
    border-color: rgba(58,28,16,0.72) !important;
    background:
        linear-gradient(180deg, rgba(116,58,28,0.16), rgba(255,255,255,0.018) 34%, rgba(0,0,0,0.40) 100%),
        radial-gradient(circle at 50% 112%, rgba(198,104,50,0.20), transparent 55%),
        linear-gradient(90deg, rgba(58,28,16,0.44), rgba(132,66,32,0.18), rgba(42,18,12,0.42)),
        rgba(24,15,18,0.95) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,210,150,0.12),
        inset 0 -2px 0 rgba(0,0,0,0.60),
        inset 0 0 0 1px rgba(42,18,12,0.48),
        0 2px 0 rgba(0,0,0,0.52),
        0 5px 12px rgba(0,0,0,0.28),
        0 0 12px rgba(58,28,16,0.18) !important;
}

#display-stack #category-subtitle-box,
#display-stack #lcd-panel {
    border-color: rgba(46,22,13,0.86) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.86),
        inset 0 -1px 0 rgba(255,198,132,0.12),
        inset 0 0 0 1px rgba(52,22,12,0.56),
        inset 0 0 18px rgba(198,104,50,0.12),
        inset 0 0 30px rgba(255,92,40,0.12),
        0 0 10px rgba(198,104,50,0.10) !important;
}

#display-stack #category-subtitle-box::before,
#display-stack #lcd-panel::before {
    background:
        radial-gradient(ellipse at 50% 54%, rgba(255,116,48,0.22) 0%, rgba(122,46,20,0.13) 34%, transparent 66%),
        linear-gradient(180deg, rgba(255,214,160,0.08), rgba(255,255,255,0.018) 16%, rgba(0,0,0,0.32) 100%),
        repeating-linear-gradient(90deg, rgba(232,132,64,0.050) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(0deg, rgba(255,220,170,0.032) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #090604 0%, #030201 52%, #010000 100%) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.88),
        inset 0 -1px 0 rgba(255,198,132,0.10),
        inset 0 0 0 1px rgba(0,0,0,0.50),
        inset 0 0 18px rgba(198,104,50,0.12),
        inset 0 0 30px rgba(255,92,40,0.13) !important;
}

#display-stack #status-panel .sbox,
#display-stack #status-panel .choice-monitor {
    --crt-inner-glow: rgba(198,104,50,0.22);
    border-color: rgba(46,22,13,0.78) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.72),
        inset 0 -1px 0 rgba(255,198,132,0.12),
        inset 0 0 0 1px rgba(52,22,12,0.52),
        inset 0 0 18px rgba(198,104,50,0.14),
        0 0 10px rgba(198,104,50,0.10) !important;
}

/* Live emoji pick cue: make the selectable CRTs visibly ask for attention. */
#status-panel.emoji-pick-mode {
    animation: emojiPickPanelBreathe 1.65s ease-in-out infinite;
}

#status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) {
    --crt-inner-glow: rgba(255,204,0,0.26);
    animation: emojiPickCrtPulse 1.1s ease-in-out infinite;
    animation-delay: calc(var(--pick-i, 0) * 0.11s);
}

#status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss)::after {
    opacity: 0.78;
    background:
        linear-gradient(105deg, transparent 0 32%, rgba(255,239,169,0.22) 45%, transparent 58% 100%),
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 22%, transparent 76%, rgba(0,0,0,0.26)),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 50% 46%, rgba(255,204,0,0.22), transparent 58%);
    background-size: 220% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: emojiPickScreenSweep 1.35s linear infinite;
}

#status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-emoji {
    position: absolute !important;
    inset: 5px !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    font-size: clamp(2.05rem, 3.6vw, 3.1rem) !important;
    line-height: 1 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: opacity(1) !important;
    will-change: opacity, filter, transform !important;
    transition: opacity 0.85s ease-in-out, filter 0.85s ease-in-out, visibility 0s linear 0s !important;
    animation: emojiPickEmojiNod 0.9s ease-in-out infinite !important;
    animation-delay: 0s !important;
}

.emoji-serving-reel {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    contain: paint;
    clip-path: inset(1px 0);
}

.emoji-serving-reel-strip {
    display: flex;
    flex-direction: column;
    width: 100%;
    transform: translate3d(0, 0, 0);
}

.emoji-serving-reel-symbol {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 0.82em;
    line-height: 1;
}

.emoji-serving-reel-winner {
    font-size: 1em;
}

@media (prefers-reduced-motion: reduce) {
    .emoji-serving-reel-strip {
        transition-duration: 0ms !important;
        transition-delay: 0ms !important;
    }
}

#status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label {
    position: absolute !important;
    inset: 5px 7px !important;
    z-index: 2 !important;
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: none !important;
    font-size: clamp(0.92rem, 1.85vw, 1.28rem) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    letter-spacing: 0.8px !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: balance !important;
    opacity: 0 !important;
    visibility: hidden !important;
    filter: opacity(0) !important;
    will-change: opacity, filter, transform !important;
    transition: opacity 0.85s ease-in-out, filter 0.85s ease-in-out, visibility 0s linear 0.85s !important;
    animation: none !important;
}

#status-panel.emoji-pick-mode.label-face-on .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-emoji {
    opacity: 0 !important;
    visibility: hidden !important;
    filter: opacity(0) !important;
    transition: opacity 0.85s ease-in-out, filter 0.85s ease-in-out, visibility 0s linear 0.85s !important;
}

#status-panel.emoji-pick-mode.label-face-on .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label {
    opacity: 1 !important;
    visibility: visible !important;
    filter: opacity(1) !important;
    transition: opacity 0.85s ease-in-out, filter 0.85s ease-in-out, visibility 0s linear 0s !important;
}

#status-panel.emoji-pick-mode.emoji-face-on .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-emoji {
    opacity: 1 !important;
    visibility: visible !important;
    filter: opacity(1) !important;
    transition: opacity 0.85s ease-in-out, filter 0.85s ease-in-out, visibility 0s linear 0s !important;
}

#status-panel.emoji-pick-mode.emoji-face-on .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label {
    opacity: 0 !important;
    visibility: hidden !important;
    filter: opacity(0) !important;
    transition: opacity 0.85s ease-in-out, filter 0.85s ease-in-out, visibility 0s linear 0.85s !important;
}

#status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label.choice-label-short {
    font-size: clamp(0.78rem, 1.25vw, 1rem) !important;
    line-height: 1.02 !important;
}

#status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label.choice-label-medium {
    font-size: clamp(0.72rem, 1.1vw, 0.92rem) !important;
    line-height: 1.04 !important;
}

#status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label.choice-label-long {
    font-size: clamp(0.64rem, 0.92vw, 0.82rem) !important;
    line-height: 1.04 !important;
}

@keyframes emojiPickPanelBreathe {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.09) saturate(1.08); }
}

@keyframes emojiPickCrtPulse {
    0%, 100% {
        box-shadow:
            inset 0 4px 8px rgba(0,0,0,0.72),
            inset 0 -1px 0 rgba(255,255,255,0.16),
            inset 0 0 0 2px rgba(0,0,0,0.50),
            inset 0 0 20px rgba(255,204,0,0.12),
            0 1px 0 rgba(255,255,255,0.14) !important;
    }
    50% {
        box-shadow:
            inset 0 4px 8px rgba(0,0,0,0.70),
            inset 0 -1px 0 rgba(255,255,255,0.18),
            inset 0 0 0 2px rgba(0,0,0,0.48),
            inset 0 0 28px rgba(255,204,0,0.24),
            0 0 12px rgba(255,204,0,0.22),
            0 1px 0 rgba(255,255,255,0.14) !important;
    }
}

/* Emoji CRT labels: prefer two readable lines over ellipsis when space allows. */
#status-panel .sbox.choice-monitor .choice-label,
.sbox.choice-monitor .choice-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    max-width: min(7.8em, 100%) !important;
    line-height: 1.04 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

#status-panel .sbox.choice-monitor .choice-label.choice-label-stacked,
.sbox.choice-monitor .choice-label.choice-label-stacked {
    white-space: normal !important;
    line-height: 0.98 !important;
}

/* Phase 3 keyboard: spent/correct/Joker keys stay as subdued hardware, not bright status colors. */
.phase3-keyboard .key.correct,
.phase3-keyboard .key.joker-key,
.phase3-keyboard .key.joker-revealed {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 38%, rgba(0,0,0,0.26) 100%),
        radial-gradient(circle at 50% 112%, rgba(255,255,255,0.16), transparent 58%),
        rgba(84,87,96,0.92) !important;
    border-color: rgba(0,0,0,0.42) !important;
    color: rgba(255,255,255,0.74) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -8px 14px rgba(0,0,0,0.34),
        0 2px 0 rgba(0,0,0,0.58),
        0 0 10px rgba(255,255,255,0.08) !important;
}

.phase3-keyboard .key.joker-key.joker-holding {
    filter: brightness(1.08) !important;
    transform: translateY(1px) scale(0.98);
}

.phase3-keyboard .key.joker-key {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,117,255,0.10) 38%, rgba(0,0,0,0.30) 100%),
        radial-gradient(circle at 50% 112%, rgba(255,117,255,0.22), transparent 58%),
        rgba(88,76,92,0.94) !important;
    border-color: rgba(255,117,255,0.34) !important;
    color: #ff9dff !important;
    text-shadow:
        0 0 6px rgba(255,117,255,0.62),
        0 1px 0 rgba(0,0,0,0.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -8px 14px rgba(0,0,0,0.34),
        0 2px 0 rgba(0,0,0,0.58),
        0 0 12px rgba(255,117,255,0.18) !important;
}

.phase3-keyboard .key[data-k="J"].joker-key {
    color: #ff75ff !important;
    -webkit-text-fill-color: #ff75ff !important;
    text-shadow:
        0 0 7px rgba(255,117,255,0.78),
        0 0 15px rgba(211,44,199,0.34),
        0 1px 0 rgba(0,0,0,0.78) !important;
}

.phase3-keyboard .key.joker-key.joker-holding {
    filter: brightness(1.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        inset 0 -8px 14px rgba(0,0,0,0.34),
        0 2px 0 rgba(0,0,0,0.58),
        0 0 18px rgba(255,117,255,0.38),
        0 0 28px rgba(211,44,199,0.20) !important;
}

.phase3-keyboard .key.wheel-hit-flash {
    animation: none !important;
}

/* Restored wake choreography: screens, score VFDS, tile pulse, and LCD glow. */
#game-board.tile-pulse-wake .tile {
    position: relative;
    overflow: hidden;
}

#game-board.tile-pulse-wake .tile.tile-pulse-lit::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,245,0.18) 0%, rgba(255,226,130,0.10) 34%, rgba(255,89,214,0.06) 64%, transparent 82%);
    mix-blend-mode: screen;
    opacity: 0.45;
    animation: tilePulseWake var(--tile-pulse-wake-duration, 760ms) cubic-bezier(.18,.9,.22,1) both;
}

#board-wrap:not(.phase3) #game-board.tile-pulse-wake .tile.tile-pulse-lit::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,245,218,0.12) 0%, rgba(255,210,96,0.08) 34%, rgba(255,89,214,0.04) 64%, transparent 84%);
    opacity: 0.32;
    animation-name: tilePulseWakeSoft;
}

@keyframes tilePulseWake {
    0% { opacity: 0; transform: scale(.72); filter: blur(8px) brightness(.7); }
    24% { opacity: .95; transform: scale(1.02); filter: blur(2px) brightness(1.35); }
    58% { opacity: .5; transform: scale(1.06); filter: blur(5px) brightness(1.12); }
    100% { opacity: 0; transform: scale(.08, .02); filter: blur(1px) brightness(.9); }
}

@keyframes tilePulseWakeSoft {
    0% { opacity: 0; transform: scale(.72); filter: blur(8px) brightness(.62); }
    26% { opacity: .58; transform: scale(1.01); filter: blur(3px) brightness(1.08); }
    64% { opacity: .32; transform: scale(1.04); filter: blur(5px) brightness(.98); }
    100% { opacity: 0; transform: scale(.08, .02); filter: blur(1px) brightness(.82); }
}

#status-panel .sbox,
#clue-banner,
.score-side {
    position: relative;
    overflow: hidden;
}

#status-panel .sbox.crt-tv-off-wake:not(.choice-monitor) {
    animation:
        statusCrtShellGlowWake var(--crt-tv-off-wake-duration, 980ms) ease-out both !important;
}

#status-panel .sbox.crt-tv-off-wake:not(.choice-monitor)::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 5;
    border-radius: 8px;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 0 42%, rgba(255,255,255,0.94) 48%, rgba(255,255,255,0.98) 51%, transparent 58%),
        radial-gradient(ellipse at 50% 50%, rgba(255,248,220,0.48), rgba(255,83,205,0.14) 40%, rgba(0,0,0,0.74) 72%) !important;
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.10),
        0 0 14px rgba(255,255,255,0.20) !important;
    transform-origin: center;
    opacity: 1 !important;
    animation: statusCrtOldTvOffGlass var(--crt-tv-off-wake-duration, 980ms) cubic-bezier(.16, 1, .3, 1) both !important;
}

@media (max-width: 480px) {
    #status-panel {
        padding: 5px 7px 6px !important;
        gap: 5px !important;
        height: 64px !important;
        min-height: 64px !important;
        border-radius: 11px !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.055) 13%, rgba(0,0,0,0.18) 54%, rgba(0,0,0,0.42) 100%),
            linear-gradient(90deg, rgba(255,204,0,0.12), transparent 18%, transparent 82%, rgba(191,90,242,0.16)),
            rgba(24,11,28,0.86) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.24),
            inset 0 -2px 0 rgba(0,0,0,0.54),
            inset 0 0 0 1px rgba(255,204,0,0.055),
            0 2px 0 rgba(0,0,0,0.52),
            0 5px 12px rgba(0,0,0,0.26),
            0 0 12px rgba(191,90,242,0.08) !important;
        overflow: visible !important;
    }

    #status-panel::before {
        inset: 2px !important;
        border-radius: 9px !important;
        opacity: 0.74 !important;
        display: block !important;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.18), transparent 28%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0.52)),
            rgba(0,0,0,0.14) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.10),
            inset 0 -1px 0 rgba(0,0,0,0.42) !important;
    }

    #status-panel::after {
        left: 8px !important;
        right: 8px !important;
        top: 4px !important;
        height: 1px !important;
        opacity: 0.42 !important;
        display: block !important;
    }

    #status-panel .sbox {
        border-radius: 8px !important;
        border: 1px solid rgba(0,0,0,0.72) !important;
        min-height: 0 !important;
        padding: 3px 5px !important;
        background:
            radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.055), transparent 36%),
            linear-gradient(180deg, rgba(0,0,0,0.76), rgba(0,0,0,0.42) 14%, rgba(16,16,18,0.92) 52%, rgba(0,0,0,0.92) 100%) !important;
        box-shadow:
            inset 0 3px 6px rgba(0,0,0,0.72),
            inset 0 -1px 0 rgba(255,255,255,0.13),
            inset 0 0 0 1px rgba(0,0,0,0.48),
            inset 0 0 18px rgba(0,0,0,0.56),
            0 1px 0 rgba(255,255,255,0.10) !important;
        overflow: hidden !important;
    }

    #status-panel .sbox::before {
        left: 8% !important;
        right: 8% !important;
        top: 9% !important;
        height: 18% !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02)) !important;
        opacity: 0.38 !important;
    }

    #status-panel .sbox::after {
        inset: 2px !important;
        border-radius: 7px !important;
        opacity: 0.72 !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.035), transparent 22%, transparent 76%, rgba(0,0,0,0.28)),
            radial-gradient(ellipse at 50% 105%, rgba(255,204,0,0.055), transparent 56%) !important;
        box-shadow:
            inset 0 1px 4px rgba(0,0,0,0.58),
            inset 0 -1px 0 rgba(255,255,255,0.075) !important;
    }

    #status-panel .sbox.choice-monitor.hit {
        --crt-inner-glow: rgba(126,210,255,0.26) !important;
        border-color: rgba(0,0,0,0.42) !important;
        box-shadow:
            inset 0 4px 8px rgba(0,0,0,0.72),
            inset 0 -1px 0 rgba(255,255,255,0.16),
            inset 0 0 0 2px rgba(0,0,0,0.50),
            inset 0 0 24px rgba(126,210,255,0.20),
            0 1px 0 rgba(255,255,255,0.14) !important;
    }

    #status-panel .sbox.choice-monitor.miss {
        border-color: rgba(100,24,36,0.86) !important;
        box-shadow:
            inset 0 4px 8px rgba(0,0,0,0.76),
            inset 0 -1px 0 rgba(255,255,255,0.12),
            inset 0 0 0 2px rgba(0,0,0,0.54),
            inset 0 0 24px rgba(255,74,94,0.18),
            0 1px 0 rgba(255,255,255,0.10) !important;
    }

    #status-panel.emoji-pick-mode {
        animation: emojiPickPanelBreathe 1.65s ease-in-out infinite !important;
    }

    #status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) {
        --crt-inner-glow: rgba(255,204,0,0.26);
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 4px 5px !important;
        animation: emojiPickCrtPulse 1.1s ease-in-out infinite !important;
        animation-delay: calc(var(--pick-i, 0) * 0.11s) !important;
    }

    #status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss)::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 2px !important;
        z-index: 1 !important;
        border-radius: 7px !important;
        opacity: 0.78 !important;
        pointer-events: none !important;
        background:
            linear-gradient(105deg, transparent 0 32%, rgba(255,239,169,0.22) 45%, transparent 58% 100%),
            linear-gradient(180deg, rgba(255,255,255,0.05), transparent 22%, transparent 76%, rgba(0,0,0,0.26)),
            repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 4px),
            radial-gradient(circle at 50% 46%, rgba(255,204,0,0.22), transparent 58%) !important;
        background-size: 220% 100%, 100% 100%, 100% 100%, 100% 100% !important;
        animation: emojiPickScreenSweep 1.35s linear infinite !important;
    }

    #status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-emoji {
        order: 1 !important;
        position: absolute !important;
        inset: 4px !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: none !important;
        font-size: clamp(2.24rem, 11.4vw, 3.18rem) !important;
        line-height: 1 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: opacity(1) !important;
        will-change: opacity, filter, transform !important;
        transition: opacity 0.85s ease-in-out, filter 0.85s ease-in-out, visibility 0s linear 0s !important;
        animation: emojiPickEmojiNod 0.9s ease-in-out infinite !important;
        animation-delay: 0s !important;
    }

    #status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label {
        order: 2 !important;
        position: absolute !important;
        top: 4px !important;
        right: 5px !important;
        bottom: auto !important;
        left: 5px !important;
        z-index: 2 !important;
        display: grid !important;
        align-items: center !important;
        justify-content: center !important;
        align-content: center !important;
        justify-items: center !important;
        place-items: center !important;
        flex: none !important;
        width: calc(100% - 10px) !important;
        height: calc(100% - 8px) !important;
        min-height: 0 !important;
        max-height: none !important;
        max-width: none !important;
        font-size: clamp(0.82rem, 3.85vw, 1.1rem) !important;
        line-height: 1.06 !important;
        text-align: center !important;
        letter-spacing: 0.7px !important;
        -webkit-box-orient: initial !important;
        -webkit-line-clamp: unset !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-wrap: balance !important;
        opacity: 0 !important;
        visibility: hidden !important;
        filter: opacity(0) !important;
        will-change: opacity, filter, transform !important;
        transition: opacity 0.85s ease-in-out, filter 0.85s ease-in-out, visibility 0s linear 0.85s !important;
        animation: none !important;
        animation-delay: 0s !important;
    }

    #status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label.choice-label-short {
        font-size: clamp(0.98rem, 4.55vw, 1.32rem) !important;
        line-height: 1.02 !important;
    }

    #status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label.choice-label-medium {
        font-size: clamp(0.9rem, 4.12vw, 1.18rem) !important;
        line-height: 1.04 !important;
    }

    #status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label.choice-label-long {
        font-size: clamp(0.76rem, 3.35vw, 0.98rem) !important;
        line-height: 1.04 !important;
    }

}

@keyframes statusCrtShellGlowWake {
    0% { filter: brightness(1) saturate(1); }
    32% { filter: brightness(1.34) saturate(1.12); }
    100% { filter: brightness(1) saturate(1); }
}

@keyframes statusCrtOldTvOffGlass {
    0% { transform: scaleX(.02) scaleY(.012); filter: blur(0) brightness(.35); clip-path: inset(50% 50% 50% 50%); }
    8% { transform: scaleX(1.02) scaleY(.68); filter: blur(4px) brightness(1.2); clip-path: inset(12% 0 12% 0); }
    20% { transform: scaleX(1.05) scaleY(.09); filter: blur(1.5px) brightness(1.9); clip-path: inset(42% 0 42% 0); }
    30% { transform: scaleX(.54) scaleY(.026); filter: blur(.7px) brightness(2.8); clip-path: inset(48% 8% 48% 8%); }
    39% { transform: scaleX(.05) scaleY(.014); filter: blur(.2px) brightness(3.6); clip-path: inset(49% 48% 49% 48%); }
    48% { transform: scaleX(.02) scaleY(.012); filter: blur(0) brightness(.35); clip-path: inset(50% 50% 50% 50%); }
    100% { transform: scaleX(.02) scaleY(.012); filter: blur(0) brightness(.35); clip-path: inset(50% 50% 50% 50%); }
}

#clue-banner.crt-pulse-lit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, transparent 0 44%, rgba(255,255,255,.62) 49%, rgba(255,255,255,.5) 51%, transparent 58%),
        radial-gradient(ellipse at 50% 50%, rgba(255,244,214,.46), rgba(255,83,205,.13) 44%, transparent 74%);
    opacity: 0;
    will-change: opacity;
    animation: statusCrtPulseWake var(--crt-pulse-wake-duration, 760ms) linear both;
}

@keyframes statusCrtPulseWake {
    0% { opacity: 0; }
    10% { opacity: .18; }
    22% { opacity: .58; }
    36% { opacity: .74; }
    52% { opacity: .5; }
    68% { opacity: .32; }
    84% { opacity: .14; }
    100% { opacity: 0; }
}

.score-side.score-prewake .score-label,
.score-side.score-prewake .score-amt {
    opacity: 0 !important;
    text-shadow: none !important;
}

.score-side.score-pulse-lit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, transparent 0 42%, rgba(255,255,255,.9) 49%, rgba(255,255,255,.9) 51%, transparent 58%),
        radial-gradient(circle at 50% 50%, rgba(255,120,228,.34), rgba(255,65,183,.18) 42%, transparent 74%);
    animation: scoreCrtPulseWake var(--score-pulse-wake-duration, 920ms) cubic-bezier(.16,1,.3,1) both;
}

@keyframes scoreCrtPulseWake {
    0% { opacity: 0; transform: scaleX(.04) scaleY(.02); filter: blur(5px) brightness(.45); }
    24% { opacity: .82; transform: scaleX(.98) scaleY(.05); filter: blur(3px) brightness(1.35); }
    58% { opacity: .5; transform: scaleX(1) scaleY(.82); filter: blur(8px) brightness(1.05); }
    100% { opacity: 0; transform: scaleX(1.04) scaleY(1); filter: blur(12px) brightness(.85); }
}

.score-side.score-type-on .score-label,
.score-side.score-type-on .score-amt {
    display: inline-flex !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    max-width: 0;
    clip-path: inset(0 100% 0 0);
    opacity: 1 !important;
    animation: scoreTypeOnWake 720ms steps(16, end) both !important;
}

.score-side.score-type-on .score-amt {
    animation-delay: 120ms !important;
}

@keyframes scoreTypeOnWake {
    0% {
        max-width: 0;
        clip-path: inset(0 100% 0 0);
        filter: brightness(.72);
    }
    18% {
        filter: brightness(1.22);
    }
    100% {
        max-width: 12em;
        clip-path: inset(0 0 0 0);
        filter: brightness(1);
    }
}

#category-subtitle-box.vfd-prewake,
#lcd-panel.vfd-prewake {
    background: #020103 !important;
    box-shadow: inset 0 0 18px rgba(0,0,0,.95), 0 0 0 rgba(255,0,0,0) !important;
}

#capture-zone.console-teleport-in #category-subtitle-box.vfd-prewake,
#capture-zone.console-teleport-in #lcd-panel.vfd-prewake,
#capture-zone.console-easter-egg.egg-dematerialize #category-subtitle-box.vfd-prewake,
#capture-zone.console-easter-egg.egg-dematerialize #lcd-panel.vfd-prewake,
#capture-zone.console-easter-egg.egg-rematerialize #category-subtitle-box.vfd-prewake,
#capture-zone.console-easter-egg.egg-rematerialize #lcd-panel.vfd-prewake {
    background: #020103 !important;
    box-shadow:
        inset 0 0 22px rgba(0,0,0,.98),
        0 0 0 rgba(255,0,0,0) !important;
    filter: brightness(.42) saturate(.35) !important;
}

#category-subtitle-box.vfd-prewake .lcd-text,
#lcd-panel.vfd-prewake .lcd-text {
    opacity: 0 !important;
}

#capture-zone.console-teleport-in #category-subtitle-box.vfd-prewake .lcd-text,
#capture-zone.console-teleport-in #lcd-panel.vfd-prewake #msg,
#capture-zone.console-easter-egg #category-subtitle-box.vfd-prewake .lcd-text,
#capture-zone.console-easter-egg #lcd-panel.vfd-prewake #msg {
    opacity: 0 !important;
    text-shadow: none !important;
}

#category-subtitle-box.vfd-wake-glow,
#lcd-panel.vfd-wake-glow {
    animation: vfdWakeRedGlow var(--vfd-wake-glow-duration, 1040ms) cubic-bezier(.16,1,.3,1) both;
}

#category-subtitle-box.vfd-awake-glow,
#lcd-panel.vfd-awake-glow {
    background: rgba(10,4,7,.94) !important;
    box-shadow:
        inset 0 0 15px rgba(255,74,87,.16),
        0 0 14px rgba(255,36,68,.25) !important;
}

@keyframes vfdWakeRedGlow {
    0% {
        background: #020103;
        box-shadow: inset 0 0 18px rgba(0,0,0,.95), 0 0 0 rgba(255,60,80,0);
    }
    45% {
        background: rgba(14,2,5,.98);
        box-shadow: inset 0 0 18px rgba(255,80,86,.22), 0 0 20px rgba(255,42,74,.42);
    }
    100% {
        background: rgba(10,4,7,.94);
        box-shadow: inset 0 0 15px rgba(255,74,87,.16), 0 0 14px rgba(255,36,68,.25);
    }
}

@keyframes emojiPickScreenSweep {
    from { background-position: 160% 0, 0 0, 0 0, 0 0; }
    to { background-position: -60% 0, 0 0, 0 0, 0 0; }
}

@keyframes emojiPickEmojiNod {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.06); }
}

/* Lower VFD must be an exact twin of the upper VFD. */
#display-stack #category-subtitle-box,
#display-stack #lcd-panel {
    width: calc(100% - 12px) !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.72) !important;
    background:
        linear-gradient(180deg, rgba(255,239,160,0.09), rgba(255,255,255,0.03) 34%, rgba(0,0,0,0.34) 100%),
        radial-gradient(circle at 50% 112%, rgba(255,204,0,0.20), transparent 55%),
        linear-gradient(90deg, rgba(126,76,46,0.22), rgba(255,204,0,0.08), rgba(78,48,70,0.20)),
        rgba(22,14,20,0.95) !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.86),
        inset 0 -1px 0 rgba(255,255,255,0.07),
        inset 0 0 0 1px rgba(0,0,0,0.48),
        inset 0 0 18px rgba(74,192,255,0.08),
        inset 0 0 30px rgba(255,28,56,0.10) !important;
}

#display-stack #lcd-panel.lcd-invalid,
#display-stack #lcd-panel.lcd-replay {
    border: 1px solid rgba(0,0,0,0.72) !important;
    background: transparent !important;
}

#display-stack #category-subtitle-box::before,
#display-stack #lcd-panel::before {
    inset: 0 !important;
    border-radius: 5px !important;
    transform: none !important;
}

#display-stack #category-subtitle-box::after,
#display-stack #lcd-panel::after {
    inset: 0 !important;
    border-radius: 5px !important;
    transform: none !important;
}

/* Lower VFD: remove the visible rounded glass bite in the bottom corners. */
#display-stack #lcd-panel::before,
#display-stack #lcd-panel::after {
    border-radius: 7px 7px 2px 2px !important;
}

/* Match the shared frame opening to the lower VFD's rounded top corners. */
#display-stack #lcd-panel {
    border-radius: 8px !important;
    clip-path: inset(0 round 8px) !important;
    background:
        linear-gradient(180deg, rgba(255,239,160,0.09), rgba(255,255,255,0.03) 34%, rgba(0,0,0,0.34) 100%),
        radial-gradient(circle at 50% 112%, rgba(255,204,0,0.20), transparent 55%),
        linear-gradient(90deg, rgba(126,76,46,0.22), rgba(255,204,0,0.08), rgba(78,48,70,0.20)),
        rgba(22,14,20,0.95) !important;
}

/* VFD text can use intentional balanced two-line breaks. */
#display-stack #category-subtitle-box .lcd-text,
#display-stack #category-subtitle-box.type-on .lcd-text,
#display-stack #category-subtitle-box.instruction .lcd-text,
#display-stack #lcd-panel #msg,
#display-stack #lcd-panel.on #msg,
#display-stack #lcd-panel.lcd-invalid #msg,
#display-stack #lcd-panel.lcd-replay #msg {
    white-space: pre-line !important;
}

#display-stack #lcd-panel.type-on #msg {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    animation: categoryTypeOn 1.35s steps(34, end) both !important;
}

/* Mobile console fill: let the phone screen feel like the cabinet. */
@media (max-width: 480px) {
    body {
        --mobile-console-top-gap: 6px;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        padding-top: calc(env(safe-area-inset-top) + var(--mobile-console-top-gap)) !important;
        padding-left: max(1px, env(safe-area-inset-left)) !important;
        padding-right: max(1px, env(safe-area-inset-right)) !important;
        padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
        gap: 2px !important;
    }

    #capture-zone,
    #keyboard,
    #dev-bar-wrap {
        width: 100% !important;
        max-width: none !important;
    }

    #capture-zone {
        padding: 2px 3px 12px !important;
        border-radius: 10px !important;
    }

    #display-stack,
    #slot-machine,
    #board-wrap,
    #score-bar,
    #hint-offer-inline {
        width: 100% !important;
        max-width: none !important;
    }

    #display-stack {
        width: calc(100% - 8px) !important;
    }

    #slot-machine {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    #game-board .tile,
    #game-board .tile .tile-char {
        font-size: clamp(1.65rem, 8.2vw, 2.45rem) !important;
    }

    #game-board.phase3-wheel-board .phase3-guessed-row,
    #game-board.phase3-wheel-board .phase3-prompt-row {
        height: clamp(30px, 8vw, 38px) !important;
    }

    #board-wrap.phase3 #game-board.magic-complete-showcase .magic-win-glow-row {
        height: clamp(30px, 8vw, 38px) !important;
    }

    #game-board.phase3-wheel-board .phase3-guessed-row .tile,
    #game-board.phase3-wheel-board .phase3-guessed-row .tile .tile-char,
    #game-board.phase3-wheel-board .phase3-prompt-row .tile,
    #game-board.phase3-wheel-board .phase3-prompt-row .tile .tile-char,
    #board-wrap.phase3 #game-board.magic-complete-showcase .magic-win-glow-row .tile {
        font-size: clamp(0.98rem, 4.2vw, 1.2rem) !important;
    }

    #keyboard .key {
        font-size: clamp(0.9rem, 4.1vw, 1.18rem) !important;
        font-weight: 700 !important;
    }

    #keyboard .key.wide {
        font-size: clamp(0.72rem, 3.2vw, 0.92rem) !important;
    }

    #console-info-bay.phase3-active #clue-banner {
        width: min(252px, calc(100vw - 124px)) !important;
        max-width: min(252px, calc(100vw - 124px)) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #status-panel .sbox.choice-monitor .choice-label {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        line-height: 1.08 !important;
        min-height: 2.16em !important;
        max-height: 2.16em !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    #status-panel.emoji-pick-mode .choice-monitor.emoji-pick-choice:not(.hit):not(.miss) .choice-label {
        position: absolute !important;
        top: 4px !important;
        right: 5px !important;
        bottom: auto !important;
        left: 5px !important;
        z-index: 2 !important;
        display: grid !important;
        place-items: center !important;
        align-items: center !important;
        justify-items: center !important;
        align-content: center !important;
        justify-content: center !important;
        min-height: 0 !important;
        max-height: none !important;
        width: calc(100% - 10px) !important;
        height: calc(100% - 8px) !important;
        max-width: none !important;
        text-align: center !important;
        -webkit-box-orient: initial !important;
        -webkit-line-clamp: unset !important;
        white-space: normal !important;
        line-height: 1.06 !important;
        text-wrap: balance !important;
        opacity: 0 !important;
        visibility: hidden !important;
        filter: opacity(0) !important;
        will-change: opacity, filter, transform !important;
        transition: opacity 0.42s ease, filter 0.42s ease, visibility 0s linear 0.42s !important;
        animation: none !important;
        animation-delay: 0s !important;
    }

    #status-panel.emoji-tv-idle .sbox:not(.choice-monitor):not(.dead):not(.secret-cracked-crt),
    #status-panel .sbox:not(.choice-monitor):not(.dead):not(.secret-cracked-crt) {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 2px !important;
        padding: 3px 5px !important;
    }

    #status-panel.emoji-tv-idle .sbox:not(.choice-monitor):not(.dead) .sbox-emojis,
    #status-panel .sbox:not(.choice-monitor):not(.dead) .sbox-emojis {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        font-size: clamp(1.72rem, 8.6vw, 2.42rem) !important;
        line-height: 1 !important;
        overflow: visible !important;
    }

    #status-panel.emoji-tv-idle .sbox:not(.choice-monitor):not(.dead) .sbox-emojis.emoji-count-1,
    #status-panel.emoji-tv-idle .sbox:not(.choice-monitor):not(.dead) .sbox-emojis:has(.sem.win),
    #status-panel .sbox:not(.choice-monitor):not(.dead) .sbox-emojis.emoji-count-1,
    #status-panel .sbox:not(.choice-monitor):not(.dead) .sbox-emojis:has(.sem.win) {
        font-size: clamp(1.9rem, 9.4vw, 2.62rem) !important;
    }

    #status-panel.emoji-tv-idle .sbox:not(.choice-monitor):not(.dead) .sbox-ltr,
    #status-panel .sbox:not(.choice-monitor):not(.dead) .sbox-ltr {
        order: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        font-size: clamp(1.36rem, 6.7vw, 1.92rem) !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    #status-panel.emoji-tv-idle .sbox:not(.choice-monitor):not(.dead) .sem.win,
    #status-panel .sbox:not(.choice-monitor):not(.dead) .sem.win {
        font-size: inherit !important;
        line-height: 1 !important;
    }

    #quick-menu-btn {
        top: calc(env(safe-area-inset-top) + var(--mobile-console-top-gap) + 16px) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        left: auto !important;
    }

    #quick-menu-box {
        top: calc(env(safe-area-inset-top) + var(--mobile-console-top-gap) + 50px) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        left: auto !important;
        width: min(190px, calc(100vw - 24px)) !important;
    }

    #currency-intro-modal.on:not(.transporter-emitting) #currency-intro-box {
        animation: mobileBriefingMoonZoomIn 0.42s cubic-bezier(.16, 1, .3, 1) both, mojiMoonFluid 9s ease-in-out 0.42s infinite !important;
        transform-origin: center center !important;
    }

    @media (pointer: coarse) and (max-width: 480px) and (min-width: 320px) {
        body.mobile-ui #capture-zone.console-easter-egg::before,
        body.android-app #capture-zone.console-easter-egg::before,
        body.mobile-ui #capture-zone.console-teleport-in::before,
        body.android-app #capture-zone.console-teleport-in::before,
        body.mobile-ui #capture-zone.console-transport-shimmer::before,
        body.android-app #capture-zone.console-transport-shimmer::before,
        body.mobile-ui #currency-intro-modal.transporter-emitting::before,
        body.android-app #currency-intro-modal.transporter-emitting::before,
        body.mobile-ui #currency-intro-modal.transporter-emitting::after,
        body.android-app #currency-intro-modal.transporter-emitting::after {
            display: none !important;
            animation: none !important;
            background: none !important;
        }

        body.mobile-ui #capture-zone.console-easter-egg::after,
        body.android-app #capture-zone.console-easter-egg::after,
        body.mobile-ui #capture-zone.console-teleport-in::after,
        body.android-app #capture-zone.console-teleport-in::after,
        body.mobile-ui #capture-zone.console-transport-shimmer::after,
        body.android-app #capture-zone.console-transport-shimmer::after,
        body.mobile-ui #currency-intro-modal.transporter-emitting #currency-intro-box::before,
        body.android-app #currency-intro-modal.transporter-emitting #currency-intro-box::before,
        body.mobile-ui #currency-intro-modal.transporter-emitting #currency-intro-box::after,
        body.android-app #currency-intro-modal.transporter-emitting #currency-intro-box::after {
            display: none !important;
            animation: none !important;
            background: none !important;
        }

        body.mobile-ui #capture-zone.console-teleport-in,
        body.android-app #capture-zone.console-teleport-in {
            animation: mobileConsoleZoomTransport 0.72s ease-out both !important;
            pointer-events: none;
            transform-origin: center center !important;
        }

        #capture-zone.console-easter-egg.egg-dematerialize {
            animation: mobileConsoleZoomOutTransport 0.32s ease-out both !important;
            pointer-events: none;
            transform-origin: center center !important;
        }

        #capture-zone.console-easter-egg.egg-rematerialize {
            animation: mobileConsoleFadeInTransport 0.72s ease-out both !important;
            pointer-events: none;
            transform-origin: center center !important;
        }

        #currency-intro-modal.transporter-emitting #currency-intro-box {
            animation: mobileIntroZoomTransport 0.52s ease-out both !important;
            transform-origin: center center !important;
        }

        #currency-intro-modal.transporter-emitting #currency-intro-title,
        #currency-intro-modal.transporter-emitting #currency-intro-currency,
        #currency-intro-modal.transporter-emitting #currency-intro-icon,
        #currency-intro-modal.transporter-emitting #currency-intro-text,
        #currency-intro-modal.transporter-emitting #currency-intro-btn {
            animation: none !important;
        }

        #welcome-screen.mascot-intro-overlay.transporter-emitting::before,
        #welcome-screen.mascot-intro-overlay.transporter-emitting::after,
        #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::before,
        #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after {
            display: none !important;
            animation: none !important;
            background: none !important;
        }

        #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage {
            animation: mobileMascotZoomOutTransport 0.92s cubic-bezier(0.16, 1, 0.3, 1) both !important;
            transform-origin: center center !important;
        }

        #welcome-screen.mascot-intro-overlay.transporter-emitting .faq-welcome-top,
        #welcome-screen.mascot-intro-overlay.transporter-emitting .faq-welcome-bottom,
        #welcome-screen.mascot-intro-overlay.transporter-emitting #welcome-date-outside {
            animation: mobileIntroSoftVanish 0.72s ease-out both !important;
        }

        body.mobile-ui #capture-zone.console-transport-shimmer,
        body.android-app #capture-zone.console-transport-shimmer {
            animation: mobileConsoleZoomSettle 0.24s ease-out both !important;
        }

        body.mobile-ui #capture-zone.console-teleport-in > *,
        body.android-app #capture-zone.console-teleport-in > *,
        body.mobile-ui #capture-zone.console-teleport-in #board-wrap,
        body.android-app #capture-zone.console-teleport-in #board-wrap,
        body.mobile-ui #capture-zone.console-teleport-in #category-banner,
        body.android-app #capture-zone.console-teleport-in #category-banner,
        body.mobile-ui #board-wrap.board-teleport-in,
        body.android-app #board-wrap.board-teleport-in,
        body.mobile-ui #board-wrap.board-teleport-in::before,
        body.android-app #board-wrap.board-teleport-in::before,
        body.mobile-ui #board-wrap.board-teleport-in::after,
        body.android-app #board-wrap.board-teleport-in::after {
            animation: none !important;
        }
    }

    @keyframes mobileConsoleZoomTransport {
        0% { opacity: 0; transform: scale(0.94); filter: blur(5px) brightness(0.82) saturate(0.9); }
        38% { opacity: 0.58; transform: scale(0.9); filter: blur(3px) brightness(1.1) saturate(1.04); }
        72% { opacity: 1; transform: scale(0.985); filter: blur(0.6px) brightness(1.04) saturate(1.02); }
        100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1) saturate(1); }
    }

    @keyframes mobileConsoleZoomOutTransport {
        0% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1) saturate(1); }
        100% { opacity: 0; transform: scale(0.96); filter: blur(4px) brightness(1.14) saturate(1.02); }
    }

    @keyframes mobileConsoleFadeInTransport {
        0% { opacity: 0; transform: scale(1); filter: blur(4px) brightness(0.9) saturate(0.95); }
        58% { opacity: 1; transform: scale(1); filter: blur(0.8px) brightness(1.04) saturate(1.02); }
        100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1) saturate(1); }
    }

    @keyframes mobileBriefingMoonZoomIn {
        0% { opacity: 0; transform: scale(0.74); filter: blur(5px) brightness(0.82); }
        66% { opacity: 1; transform: scale(0.985); filter: blur(0.8px) brightness(1.04); }
        100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
    }

    @keyframes mobileIntroZoomTransport {
        0% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
        44% { opacity: 0.7; transform: scale(0.9); filter: blur(2px) brightness(1.12); }
        100% { opacity: 0; transform: scale(0.96); filter: blur(4px) brightness(1.16); }
    }

    @keyframes mobileMascotZoomOutTransport {
        0% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
        34% { opacity: 0.82; transform: scale(0.985); filter: blur(0.4px) brightness(1.04); }
        68% { opacity: 0.38; transform: scale(0.94); filter: blur(1.4px) brightness(1.1); }
        100% { opacity: 0; transform: scale(0.9); filter: blur(2.8px) brightness(1.14); }
    }

    @keyframes mobileIntroSoftVanish {
        0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
        48% { opacity: 0.56; transform: translateY(-2px) scale(0.99); filter: blur(0.8px) brightness(1.05); }
        100% { opacity: 0; transform: translateY(-4px) scale(0.98); filter: blur(2px) brightness(1.08); }
    }

    @keyframes mobileConsoleZoomSettle {
        0% { transform: scale(1); filter: brightness(1.04); }
        100% { transform: scale(1); filter: brightness(1); }
    }

}

/* Stats actions: donate moved to menu; keep proof buttons slim and aligned. */
#quick-menu-box .quick-menu-donate {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

#win-overlay,
#win-overlay.on {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin: 8px auto 0 !important;
    padding: 0 8px 8px !important;
    display: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 7px !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

#win-overlay.on {
    display: grid !important;
}

#win-overlay #share-nudge {
    display: none !important;
}

#win-overlay #exchange-stats-btn,
#win-overlay #stats-back-btn,
#win-overlay #share-stats-btn {
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 26px !important;
    height: 28px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: clamp(0.56rem, 1.8vw, 0.72rem) !important;
    line-height: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
}

#win-overlay #exchange-stats-btn {
    grid-column: 1 !important;
}

#win-overlay #stats-back-btn {
    grid-column: 2 !important;
}

#win-overlay #share-stats-btn {
    grid-column: 3 !important;
}

#win-overlay #rewatch-skit-btn {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

#win-overlay #rewatch-skit-btn[hidden] {
    display: none !important;
}

#skit-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 220;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,0.88);
}

#skit-modal.on {
    display: flex;
    animation: fadeIn 0.24s ease;
}

#skit-modal-box {
    position: relative;
    width: min(80vw, 854px, calc((100vh - 130px) * 16 / 9));
    max-width: 854px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(191,90,242,0.72);
    border-radius: 10px;
    background: #000;
    box-shadow: 0 16px 54px rgba(0,0,0,0.72), 0 0 24px rgba(191,90,242,0.18);
    overflow: visible;
}

#skit-video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 100vh;
    border-radius: 9px;
    background: #000;
    object-fit: contain;
    cursor: pointer;
}

#skit-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 9px;
    background: rgba(0,0,0,0.66);
    color: #ffdf72;
    font-family: 'Courier New', monospace;
    font-size: clamp(0.78rem, 2.4vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-shadow: 0 0 12px rgba(255,204,0,0.55);
    pointer-events: none;
}

#skit-modal.loading #skit-loading {
    display: flex;
}

.skit-loading-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,223,114,0.28);
    border-top-color: #ffdf72;
    border-radius: 50%;
    animation: skitLoadingSpin 0.8s linear infinite;
}

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

#skit-video-hint {
    margin-top: 5px;
    margin-bottom: 2px;
    color: rgba(255,255,255,0.28);
    font-family: 'Courier New', monospace;
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

#skit-video-status {
    position: absolute;
    left: 50%;
    bottom: 52px;
    z-index: 2;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    min-height: 1em;
    color: var(--yellow);
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-align: center;
    pointer-events: none;
}

#skit-skip-btn {
    position: absolute;
    right: 0;
    top: calc(100% + 14px);
    z-index: 2;
    min-width: 150px;
    background: rgba(22,24,28,0.94) !important;
    border: 1px solid rgba(255,255,255,0.78) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.72) !important;
}

body[data-console-skin="ferrari"] #win-overlay #exchange-stats-btn,
body[data-console-skin="ferrari"] #win-overlay #stats-back-btn,
body[data-console-skin="ferrari"] #win-overlay #share-stats-btn,
body[data-console-skin="ferrari"] #win-overlay #rewatch-skit-btn {
    background: rgba(22,24,28,0.94) !important;
    border: 1px solid rgba(255,255,255,0.78) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.72) !important;
}

#skit-skip-btn:hover,
#skit-skip-btn:focus-visible {
    background: rgba(38,41,47,0.98) !important;
    border-color: #fff !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12) !important;
}

#win-overlay #rewatch-skit-btn {
    background: rgba(22,24,28,0.94) !important;
    border: 1px solid rgba(255,255,255,0.78) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.72) !important;
}

#win-overlay #rewatch-skit-btn:hover,
#win-overlay #rewatch-skit-btn:focus-visible {
    background: rgba(38,41,47,0.98) !important;
    border-color: #fff !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12) !important;
}

@media (max-width: 600px) {
    #skit-modal {
        padding: 0;
        background: #000;
        overflow-y: auto;
    }

    #skit-modal-box {
        width: 100vw;
        max-width: none;
        gap: 0;
        padding: max(22px, env(safe-area-inset-top)) 0 max(26px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    #skit-video {
        width: 100vw;
        max-width: none;
        border-radius: 0;
    }

    #skit-video-status {
        position: static;
        width: calc(100% - 32px);
        margin: 12px auto 0;
        transform: none;
    }

    #skit-skip-btn {
        position: static;
        margin: 18px auto 0;
    }
}

#win-overlay #stats-social-links {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: auto !important;
}

body[data-console-skin="ferrari"] #win-overlay #exchange-stats-btn,
body[data-console-skin="ferrari"] #win-overlay #stats-back-btn,
body[data-console-skin="ferrari"] #win-overlay #share-stats-btn {
    background:
        linear-gradient(180deg, rgba(255,232,174,0.18), rgba(80,8,8,0.16) 42%, rgba(20,0,0,0.42)),
        rgba(98,10,10,0.72) !important;
    border-color: rgba(255,204,0,0.54) !important;
    color: #fff4d0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,244,208,0.20),
        inset 0 -8px 14px rgba(20,0,0,0.36),
        0 0 10px rgba(255,40,24,0.16) !important;
}

body[data-console-skin="ferrari"] #win-overlay #exchange-stats-btn:hover,
body[data-console-skin="ferrari"] #win-overlay #stats-back-btn:hover,
body[data-console-skin="ferrari"] #win-overlay #share-stats-btn:hover,
body[data-console-skin="ferrari"] #win-overlay #exchange-stats-btn:focus-visible,
body[data-console-skin="ferrari"] #win-overlay #stats-back-btn:focus-visible,
body[data-console-skin="ferrari"] #win-overlay #share-stats-btn:focus-visible {
    background:
        linear-gradient(180deg, rgba(255,246,214,0.32), rgba(160,24,12,0.28) 44%, rgba(52,4,0,0.52)),
        rgba(135,16,12,0.86) !important;
    border-color: rgba(255,224,128,0.82) !important;
    color: #fffbe8 !important;
}

/* Keep every stats action as simple and quiet as the skit rewatch control. */
#win-overlay #exchange-stats-btn,
#win-overlay #stats-back-btn,
#win-overlay #share-stats-btn,
#win-overlay #rewatch-skit-btn {
    background: rgba(22,24,28,0.94) !important;
    border: 1px solid rgba(255,255,255,0.78) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.72) !important;
}

#win-overlay #exchange-stats-btn:hover,
#win-overlay #stats-back-btn:hover,
#win-overlay #share-stats-btn:hover,
#win-overlay #rewatch-skit-btn:hover,
#win-overlay #exchange-stats-btn:focus-visible,
#win-overlay #stats-back-btn:focus-visible,
#win-overlay #share-stats-btn:focus-visible,
#win-overlay #rewatch-skit-btn:focus-visible {
    background: rgba(38,41,47,0.98) !important;
    border-color: #fff !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12) !important;
}

body[data-console-skin="ferrari"] #win-overlay #exchange-stats-btn:hover,
body[data-console-skin="ferrari"] #win-overlay #stats-back-btn:hover,
body[data-console-skin="ferrari"] #win-overlay #share-stats-btn:hover,
body[data-console-skin="ferrari"] #win-overlay #rewatch-skit-btn:hover,
body[data-console-skin="ferrari"] #win-overlay #exchange-stats-btn:focus-visible,
body[data-console-skin="ferrari"] #win-overlay #stats-back-btn:focus-visible,
body[data-console-skin="ferrari"] #win-overlay #share-stats-btn:focus-visible,
body[data-console-skin="ferrari"] #win-overlay #rewatch-skit-btn:focus-visible {
    background: rgba(38,41,47,0.98) !important;
    border-color: #fff !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12) !important;
}

@media (max-width: 360px) {
    #win-overlay,
    #win-overlay.on {
        gap: 5px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    #win-overlay #exchange-stats-btn,
    #win-overlay #stats-back-btn,
    #win-overlay #share-stats-btn {
        font-size: 0.52rem !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* Keep the compact three-button row while giving touch users a full-height
   target. This grows downward inside the stats action area only. */
@media (pointer: coarse) {
    #win-overlay #exchange-stats-btn,
    #win-overlay #stats-back-btn,
    #win-overlay #share-stats-btn {
        min-height: 44px !important;
        height: 44px !important;
    }
}

/* Mascot intro: replaces the old planet/moon welcome while reusing the game wake-up. */
#welcome-screen.mascot-intro-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(16px, 4vh, 34px) 24px calc(86px + env(safe-area-inset-bottom));
    background: transparent !important;
    overflow: hidden;
}

#welcome-screen.mascot-intro-overlay.on {
    display: flex;
    animation: mascotIntroFadeIn 0.46s ease both;
}

.mascot-intro-wrapper {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 2.2vh, 18px);
    text-align: center;
}

#welcome-screen.mascot-intro-overlay #welcome-date-outside {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 420px) !important;
    z-index: 6 !important;
    pointer-events: none;
}

#welcome-screen.mascot-intro-overlay.on:not(.transporter-emitting) #welcome-date-outside {
    opacity: 1 !important;
    visibility: visible !important;
    animation: dateSpaceFloat 9s ease-in-out 0.25s infinite alternate;
}

#welcome-screen.mascot-intro-overlay.on:not(.transporter-emitting) .mascot-intro-wrapper {
    animation: none;
}

#welcome-screen.mascot-intro-overlay.on:not(.transporter-emitting) .mascot-intro-wrapper > .faq-welcome-top,
#welcome-screen.mascot-intro-overlay.on:not(.transporter-emitting) .mascot-intro-wrapper > .faq-welcome-bottom {
    opacity: 0;
    animation: mascotIntroBoxReveal 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

#welcome-screen.mascot-intro-overlay.on:not(.transporter-emitting):not(.mascot-intro-settled) .mascot-orbit-stage {
    opacity: 0;
    animation:
        mascotSpaceFloat 13.5s ease-in-out infinite,
        mascotIntroHeroReveal 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

#welcome-screen.mascot-intro-overlay.on:not(.transporter-emitting).mascot-intro-settled .mascot-orbit-stage:not(.mascot-poked) {
    opacity: 1;
    filter: none;
    animation: mascotSpaceFloat 13.5s ease-in-out infinite;
}

.faq-welcome-top,
.faq-welcome-bottom {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-welcome-top {
    gap: 0;
    margin-bottom: -2px;
}

.faq-welcome-bottom {
    gap: 10px;
    margin-top: clamp(24px, 5vh, 44px);
}

.faq-streak-badge,
.faq-action-btn {
    width: min(330px, 100%);
    background: transparent;
    border: 1px solid var(--yellow);
    border-radius: 12px;
    padding: 9px 16px;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 400;
    color: var(--yellow);
    letter-spacing: 1px;
    line-height: 1.35;
    text-align: center;
    box-shadow: none;
}

.faq-action-btn {
    text-decoration: none;
    cursor: pointer;
}

#welcome-streak-container.faq-streak-badge,
#welcome-briefing-btn.faq-action-btn,
#welcome-briefing-close.faq-action-btn,
#enter-game-btn.faq-action-btn {
    width: min(330px, 100%) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    border: 1px solid var(--yellow) !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--yellow) !important;
    box-shadow: none !important;
    font-family: 'Courier New', monospace !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    line-height: 1.35 !important;
}

.faq-action-btn .enter-text {
    display: block;
    text-align: center;
    color: inherit;
}

#enter-game-btn.faq-action-btn .enter-text {
    color: inherit !important;
}

.welcome-briefing-modal {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,0.68);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.welcome-briefing-modal.on {
    display: flex;
    animation: mascotIntroFadeIn 0.22s ease both;
    pointer-events: auto;
}

.welcome-briefing-box {
    width: min(360px, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border: 1px solid rgba(255,204,0,0.78);
    border-radius: 14px;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    box-shadow:
        0 0 28px rgba(191,90,242,0.28),
        inset 0 0 22px rgba(255,255,255,0.05);
    pointer-events: auto;
}

.welcome-briefing-box .faq-moon-briefing {
    margin: 0;
}

.welcome-briefing-box .faq-wallet {
    max-width: min(330px, 100%);
}

.streak-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.streak-rule {
    flex: 1 1 42px;
    max-width: 68px;
    height: 1px;
    background: currentColor;
    opacity: 0.72;
}

.streak-main {
    flex: 0 0 auto;
}

.faq-wallet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: #62ff79;
    font-family: 'Courier New', monospace;
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.08;
    text-align: center;
    text-shadow:
        0 0 4px rgba(98,255,121,0.86),
        0 0 10px rgba(98,255,121,0.34),
        0 1px 0 rgba(0,0,0,0.82);
    opacity: 0.96;
    pointer-events: none;
}

.faq-wallet .wallet-streak,
.faq-wallet .wallet-label,
.faq-wallet .wallet-values {
    display: block;
}

.faq-wallet .wallet-streak {
    color: var(--yellow);
}

.faq-wallet .wallet-values {
    font-size: 0.68rem;
}

.welcome-briefing-box .faq-wallet .wallet-values {
    font-size: 1rem;
}

#stats-badge {
    position: absolute;
    top: clamp(42px, 9vw, 54px);
    right: clamp(-12px, -1.6vw, -7px);
    display: grid;
    justify-items: center;
    gap: 3px;
    z-index: 4;
}

#stats-badge .stats-badge-button {
    display: block;
    width: clamp(62px, 16vw, 82px);
    height: clamp(62px, 16vw, 82px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#stats-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: playerRecordBadgePulse 2.2s ease-in-out infinite;
}

#stats-category {
    width: 100%;
    min-height: 2.4em;
    display: grid;
    align-items: center;
    justify-content: center;
    padding-right: 0;
    margin: 0 auto;
    text-align: center;
    text-wrap: balance;
    line-height: 1.15;
}

#stats-badge-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 20;
    display: none;
    place-items: center;
    padding: 18px;
    background: rgba(4, 5, 18, 0.88);
    overflow: hidden;
}

#stats-badge-modal.on {
    display: grid;
}

#stats-badge-modal-card {
    position: relative;
    display: grid;
    width: min(430px, 100%);
    max-width: 100%;
    min-width: 0;
    justify-items: center;
    gap: 10px;
    color: var(--yellow);
    font-family: 'Courier New', monospace;
    font-size: 1.18rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    max-height: 92%;
    overflow-x: hidden;
    overflow-y: auto;
}

#stats-badge-modal-image {
    width: min(220px, 58vw);
    height: min(220px, 58vw);
    object-fit: contain;
    align-self: start;
}

#stats-badge-modal-record {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 226, 92, 0.42);
    text-align: left;
}

.player-record-title {
    margin-bottom: 10px;
    color: var(--yellow);
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0.16em;
}

.player-record-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: 7px 14px;
    color: rgba(255,255,255,0.78);
    font-size: clamp(0.72rem, 2.8vw, 0.88rem);
    letter-spacing: 0.06em;
}

.player-record-grid b {
    color: #fff4a6;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

@keyframes playerRecordBadgePulse {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 220, 68, 0.25)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 15px rgba(255, 220, 68, 0.9)); transform: scale(1.045); }
}

.player-id-recovery { position: relative; width: 100%; margin: 10px 0 12px; text-align: center; }
.player-id-heading { display: flex; align-items: center; justify-content: center; gap: 7px; }
.player-id-label { color: var(--yellow); font: 0.72rem 'Courier New', monospace; letter-spacing: .14em; }
.player-id-help { width: 19px; height: 19px; padding: 0; border: 1px solid rgba(255,226,92,.75); border-radius: 50%; color: var(--yellow); background: rgba(255,226,92,.08); font: bold .75rem 'Courier New', monospace; line-height: 17px; cursor: pointer; }
.player-id-help:focus-visible { outline: 2px solid #fff4a6; outline-offset: 2px; }
.player-id-help-text { position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 3; width: min(300px, 84vw); margin: 0; padding: 9px 11px; transform: translateX(-50%); color: #fff4e6; background: rgba(10,10,28,.97); border: 1px solid rgba(255,226,92,.72); box-shadow: 0 0 16px rgba(0,0,0,.55); font: .68rem/1.35 'Courier New', monospace; }
#player-id-value { display: block; margin: 4px 0 7px; color: #fff4a6; font: .9rem 'Courier New', monospace; letter-spacing: .12em; }
.player-id-actions { display: flex; justify-content: center; gap: 8px; }
.player-id-actions button { padding: 5px 9px; font-size: .65rem; }
#player-id-status, #player-restore-status { min-height: 1.1em; margin-top: 5px; color: #fff4a6; font: .65rem 'Courier New', monospace; }
.player-restore-modal { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: 20px; background: rgba(4,5,18,.86); pointer-events: auto; }
.player-restore-modal.on { display: grid; }
.player-restore-box { display: grid; gap: 8px; width: min(320px, 86vw); padding: 20px; color: var(--yellow); background: #101124; border: 1px solid rgba(255,226,92,.65); font: .8rem 'Courier New', monospace; text-align: center; }
.player-restore-title { letter-spacing: .12em; }
.player-restore-box label { text-align: left; font-size: .68rem; }
#player-restore-input { padding: 9px; color: #fff4a6; background: #070812; border: 1px solid rgba(255,255,255,.35); font: .8rem 'Courier New', monospace; text-transform: uppercase; }

#stats-badge-modal-count {
    color: rgba(255,255,255,0.82);
    font-size: 0.86rem;
}

#stats-badge-modal.badge-sparkle #stats-badge-modal-card::before,
#stats-badge-modal.badge-sparkle-2 #stats-badge-modal-card::after,
#stats-badge-modal.badge-sparkle-3 #stats-badge-modal-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -160px 0 0 -160px;
    width: 320px;
    height: 320px;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 28%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 82% 24%, var(--yellow) 0 2px, transparent 4px),
        radial-gradient(circle at 12% 72%, #bf5af2 0 2px, transparent 4px),
        radial-gradient(circle at 88% 70%, #62ff79 0 2px, transparent 4px),
        radial-gradient(circle at 50% 8%, #fff 0 1.5px, transparent 4px);
    animation: statsBadgeSparkle 680ms ease-out both;
}

#stats-badge-modal.badge-sparkle-2 #stats-badge-modal-card::after,
#stats-badge-modal.badge-sparkle-3 #stats-badge-modal-card::after {
    transform: rotate(25deg) scale(.72);
    animation-delay: 70ms;
    opacity: .78;
}

#stats-badge-modal.badge-sparkle-3 #stats-badge-modal-card::before {
    background:
        radial-gradient(circle at 8% 45%, #fff 0 2px, transparent 4px),
        radial-gradient(circle at 92% 48%, #ff9f0a 0 2px, transparent 4px),
        radial-gradient(circle at 28% 6%, #62ff79 0 2px, transparent 4px),
        radial-gradient(circle at 72% 94%, #bf5af2 0 2px, transparent 4px),
        radial-gradient(circle at 18% 28%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 82% 24%, var(--yellow) 0 2px, transparent 4px),
        radial-gradient(circle at 12% 72%, #bf5af2 0 2px, transparent 4px),
        radial-gradient(circle at 88% 70%, #62ff79 0 2px, transparent 4px),
        radial-gradient(circle at 50% 8%, #fff 0 1.5px, transparent 4px);
}

@keyframes statsBadgeSparkle {
    0% { opacity: 0; transform: scale(.45); filter: blur(2px); }
    35% { opacity: 1; transform: scale(1); filter: blur(0); }
    100% { opacity: 0; transform: scale(1.18); filter: blur(.5px); }
}

#lojiro-welcome-balance.faq-wallet {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: min(330px, 100%) !important;
    margin: 0 !important;
    color: #62ff79 !important;
    font-size: 0.74rem !important;
    line-height: 1.08 !important;
    text-align: center !important;
    pointer-events: none !important;
}

.faq-moon-briefing {
    position: relative;
    z-index: 4;
    width: min(330px, 100%);
    display: grid;
    justify-items: center;
    gap: 4px;
    margin-top: -18px;
    color: #fff;
    font-family: 'Courier New', monospace;
    line-height: 1.22;
    text-align: center;
    text-shadow: 0 0 7px rgba(0,0,0,0.95);
}

#welcome-moon-title {
    font-size: 0.94rem;
    letter-spacing: 1px;
}

#welcome-moon-title b,
#welcome-moon-currency b,
#welcome-moon-text b {
    color: var(--yellow);
    font-weight: 400;
}

#welcome-moon-icon {
    min-height: 48px;
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(0,0,0,0.65));
}

#welcome-moon-currency,
#welcome-moon-text {
    font-size: 0.9rem;
}

.currency-intro-kicker,
.currency-intro-main {
    display: block;
}

.currency-intro-kicker {
    font-size: 0.72rem;
    opacity: 0.92;
}

.currency-intro-main {
    margin-top: 2px;
    font-size: 0.98rem;
}

.mascot-orbit-stage {
    position: relative;
    width: min(100%, 92vw);
    display: grid;
    place-items: center;
    margin-top: -2px;
    isolation: isolate;
    --orbit-duration: 12s;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    animation: mascotSpaceFloat 13.5s ease-in-out infinite;
}

.coming-soon-logo {
    position: relative;
    z-index: 2;
    display: block;
    width: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,0.22))
        drop-shadow(0 0 18px rgba(191,90,242,0.34))
        drop-shadow(0 4px 0 rgba(0,0,0,0.44));
}

.mascot-orbit-stage.mascot-poked {
    animation: mascotPokeSquish 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: 50% 50%;
}

#welcome-screen.mascot-intro-overlay.on:not(.transporter-emitting).mascot-intro-settled .mascot-orbit-stage.mascot-poked {
    opacity: 1;
    animation: mascotPokeSquish 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
    filter: none;
}

.mascot-ripple {
    position: absolute;
    left: var(--ripple-x);
    top: var(--ripple-y);
    width: 28px;
    height: 28px;
    margin-left: -14px;
    margin-top: -14px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    border: 3px solid rgba(255,255,255,0.72);
    box-shadow:
        0 0 18px rgba(255,204,0,0.58),
        inset 0 0 16px rgba(191,90,242,0.42);
    background: radial-gradient(circle, rgba(255,255,255,0.32) 0%, rgba(191,90,242,0.16) 38%, transparent 68%);
    animation: mascotRipple 0.82s ease-out forwards;
}

.mascot-orbit-ring {
    position: absolute;
    left: 48.8%;
    top: 49.5%;
    width: 73%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    z-index: 3;
    pointer-events: none;
    animation: mascotOrbitSpin var(--orbit-duration) linear infinite;
}

.mascot-orbit-ring.orbit-back {
    z-index: 1;
    animation:
        mascotOrbitSpin var(--orbit-duration) linear infinite,
        mascotBackDepth var(--orbit-duration) linear infinite;
}

.mascot-orbit-ring.orbit-front {
    z-index: 3;
    animation:
        mascotOrbitSpin var(--orbit-duration) linear infinite,
        mascotFrontDepth var(--orbit-duration) linear infinite;
}

.mascot-satellite {
    position: absolute;
    left: 50%;
    top: -8%;
    width: 67px;
    height: 67px;
    margin-left: -33.5px;
    margin-top: -33.5px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    pointer-events: auto;
    cursor: pointer;
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,0.58) 0%, transparent 24%),
        radial-gradient(circle at 72% 34%, var(--yellow) 0%, transparent 42%),
        radial-gradient(circle at 30% 78%, var(--accent) 0%, transparent 46%),
        radial-gradient(circle at 50% 50%, #bf5af2 0%, #5b1378 76%);
    box-shadow:
        inset 0 0 11px rgba(255,255,255,0.18),
        0 0 10px rgba(255,255,255,0.62),
        0 0 24px rgba(255,204,0,0.48),
        0 0 34px rgba(236,10,187,0.34);
    transform-origin: 50% 50%;
}

.mascot-satellite.poke-tremor { animation: moonPokeTremor 0.38s ease; }
.mascot-satellite.poke-slide { animation: moonPokeSlide 0.54s cubic-bezier(.175,.885,.32,1.275); }
.mascot-satellite.poke-puff { animation: moonPokePuff 0.68s cubic-bezier(.175,.885,.32,1.275); }

.mascot-satellite::before {
    content: '';
    position: absolute;
    right: 58%;
    top: 50%;
    width: 165px;
    height: 48px;
    transform: translateY(-50%) rotate(-8deg);
    transform-origin: right center;
    border-radius: 999px 42% 42% 999px;
    background:
        radial-gradient(ellipse at 96% 50%, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.28) 18%, transparent 42%),
        radial-gradient(ellipse at 68% 46%, rgba(191,90,242,0.34) 0%, rgba(191,90,242,0.16) 30%, transparent 62%),
        linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(191,90,242,0.05) 22%, rgba(191,90,242,0.18) 52%, rgba(255,204,0,0.34) 100%);
    filter: blur(7px);
    opacity: 0.78;
    z-index: -1;
}

.mascot-satellite::after {
    content: '';
    position: absolute;
    right: 118%;
    top: 25%;
    width: 92px;
    height: 39px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 82% 46%, rgba(255,255,255,0.42) 0 1.5px, transparent 5px),
        radial-gradient(circle at 62% 28%, rgba(191,90,242,0.32) 0 1px, transparent 6px),
        radial-gradient(circle at 36% 60%, rgba(255,204,0,0.18) 0 1px, transparent 7px);
    filter: blur(1.8px);
    opacity: 0.48;
    z-index: -2;
}

.mascot-satellite > span {
    display: block;
    color: #fff;
    font-size: 1.05rem;
    line-height: 0.82;
    letter-spacing: -0.08em;
    animation: mascotCounterSpin var(--orbit-duration) linear infinite;
    text-shadow:
        0 0 3px rgba(0,0,0,0.95),
        0 0 7px rgba(0,0,0,0.86);
}

#welcome-screen.mascot-intro-overlay.transporter-emitting {
    display: flex;
    background: transparent !important;
    animation: none !important;
}

#welcome-screen.mascot-intro-overlay.transporter-emitting::before {
    content: '';
    display: block !important;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent !important;
    animation: none !important;
    opacity: 0;
    filter: none;
}

#welcome-screen.mascot-intro-overlay.transporter-emitting::after {
    content: '';
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(360px, 82vw);
    height: 118vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -58%) scaleY(0.05);
    transform-origin: 50% 88%;
    border-radius: 999px;
    background:
        radial-gradient(circle at 46% 10%, rgba(255,255,255,0.92) 0 1.5px, transparent 3.5px),
        radial-gradient(circle at 54% 18%, rgba(98,255,121,0.86) 0 1.4px, transparent 3.8px),
        radial-gradient(circle at 42% 28%, rgba(255,75,174,0.74) 0 1.3px, transparent 3.5px),
        radial-gradient(circle at 58% 40%, rgba(191,90,242,0.78) 0 1.5px, transparent 4px),
        radial-gradient(circle at 48% 54%, rgba(255,255,255,0.78) 0 1.2px, transparent 3.5px),
        radial-gradient(circle at 55% 66%, rgba(98,255,121,0.72) 0 1.3px, transparent 3.8px),
        radial-gradient(circle at 44% 78%, rgba(255,204,0,0.64) 0 1.2px, transparent 3.5px),
        radial-gradient(circle at 50% 6%, rgba(120,225,255,0.82) 0 1.4px, transparent 3.6px),
        radial-gradient(circle at 52% 50%, rgba(255,140,40,0.74) 0 1.3px, transparent 3.6px),
        radial-gradient(circle at 47% 88%, rgba(255,40,200,0.84) 0 1.6px, transparent 4.2px),
        repeating-linear-gradient(90deg,
            transparent 0 14px,
            rgba(98,255,121,0.16) 15px 16px,
            transparent 17px 30px),
        linear-gradient(0deg,
            rgba(255,255,255,0.00) 0%,
            rgba(255,255,255,0.66) 12%,
            rgba(98,255,121,0.42) 24%,
            rgba(255,75,174,0.28) 48%,
            rgba(255,255,255,0.24) 70%,
            rgba(255,255,255,0.00) 100%);
    background-size:
        58px 132px, 72px 156px, 66px 148px, 82px 172px,
        62px 138px, 76px 160px, 70px 152px,
        64px 144px, 74px 150px, 60px 136px,
        auto, auto;
    background-position:
        50% -18%, 50% -10%, 50% 0%, 50% 8%,
        50% 16%, 50% 24%, 50% 32%,
        50% 40%, 50% 48%, 50% 56%,
        0 0, 0 0;
    mix-blend-mode: screen;
    filter: blur(0.2px) drop-shadow(0 0 22px rgba(98,255,121,0.55));
    animation: moonEmitterBeam 1.05s linear both;
}

#welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-intro-wrapper {
    pointer-events: none;
}

#welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage {
    animation: mascotTransportZoomOut 1.05s linear both !important;
    pointer-events: none;
}

#welcome-screen.mascot-intro-overlay.transporter-emitting .faq-welcome-top,
#welcome-screen.mascot-intro-overlay.transporter-emitting .faq-welcome-bottom,
#welcome-screen.mascot-intro-overlay.transporter-emitting #welcome-date-outside {
    animation: moonEmitterContentVanish 0.48s linear both !important;
}

@media (min-width: 521px) {
    #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars::after {
        background:
            radial-gradient(circle at 12% 12%, rgba(255,255,255,0.95) 0 1.4px, transparent 3.2px),
            radial-gradient(circle at 34% 22%, rgba(98,255,121,0.86) 0 1.3px, transparent 3.4px),
            radial-gradient(circle at 68% 14%, rgba(255,75,174,0.74) 0 1.2px, transparent 3.2px),
            radial-gradient(circle at 86% 34%, rgba(191,90,242,0.78) 0 1.4px, transparent 3.6px),
            radial-gradient(circle at 28% 48%, rgba(255,255,255,0.82) 0 1.1px, transparent 3.1px),
            radial-gradient(circle at 72% 58%, rgba(98,255,121,0.76) 0 1.2px, transparent 3.4px),
            radial-gradient(circle at 18% 74%, rgba(255,204,0,0.72) 0 1.2px, transparent 3.2px),
            radial-gradient(circle at 52% 82%, rgba(120,225,255,0.84) 0 1.3px, transparent 3.4px),
            radial-gradient(circle at 82% 88%, rgba(255,140,40,0.76) 0 1.2px, transparent 3.4px),
            radial-gradient(circle at 44% 36%, rgba(255,40,200,0.84) 0 1.5px, transparent 3.8px),
            radial-gradient(circle at 58% 6%, rgba(255,255,255,0.76) 0 1px, transparent 2.8px),
            radial-gradient(circle at 40% 62%, rgba(98,255,121,0.7) 0 1px, transparent 2.8px),
            radial-gradient(circle at 60% 72%, rgba(255,75,174,0.68) 0 1px, transparent 2.9px),
            radial-gradient(circle at 47% 50%, rgba(255,255,255,0.66) 0 0.9px, transparent 2.6px),
            radial-gradient(circle at 53% 28%, rgba(120,225,255,0.62) 0 0.9px, transparent 2.6px),
            radial-gradient(circle at 49% 92%, rgba(255,204,0,0.62) 0 0.9px, transparent 2.6px),
            repeating-linear-gradient(90deg,
                transparent 0 8px,
                rgba(98,255,121,0.18) 9px 10px,
                transparent 11px 18px),
            repeating-linear-gradient(90deg,
                transparent 0 21px,
                rgba(255,255,255,0.11) 22px 23px,
                transparent 24px 41px),
            linear-gradient(0deg,
                rgba(255,255,255,0.00) 0%,
                rgba(255,255,255,0.74) 11%,
                rgba(98,255,121,0.50) 24%,
                rgba(255,75,174,0.34) 48%,
                rgba(255,255,255,0.30) 70%,
                rgba(255,255,255,0.00) 100%);
        background-size:
            34px 92px, 42px 108px, 38px 98px, 50px 116px,
            36px 94px, 44px 110px, 40px 104px,
            38px 100px, 46px 106px, 34px 92px,
            26px 72px, 30px 82px, 28px 76px,
            24px 68px, 26px 74px, 24px 66px,
            auto, auto, auto;
        background-position:
            50% -18%, 50% -10%, 50% -2%, 50% 6%,
            50% 14%, 50% 22%, 50% 30%,
            50% 38%, 50% 46%, 50% 54%,
            50% 8%, 50% 18%, 50% 34%,
            50% 48%, 50% 62%, 50% 76%,
            0 0, 0 0, 0 0;
        filter: blur(0.15px) drop-shadow(0 0 28px rgba(98,255,121,0.62));
    }

    #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars .mascot-orbit-stage::before,
    #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars .mascot-orbit-stage::after {
        content: '';
        position: absolute;
        inset: -34px;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        z-index: 5;
        background:
            radial-gradient(circle at 50% 4%, rgba(255,255,255,0.98) 0 2px, transparent 5px),
            radial-gradient(circle at 82% 20%, rgba(98,255,121,0.9) 0 2px, transparent 6px),
            radial-gradient(circle at 96% 52%, rgba(255,255,255,0.88) 0 1.5px, transparent 5px),
            radial-gradient(circle at 76% 86%, rgba(255,75,174,0.82) 0 2px, transparent 6px),
            radial-gradient(circle at 28% 92%, rgba(255,255,255,0.84) 0 1.5px, transparent 5px),
            radial-gradient(circle at 6% 58%, rgba(191,90,242,0.86) 0 2px, transparent 6px),
            radial-gradient(circle at 16% 18%, rgba(255,204,0,0.82) 0 1.5px, transparent 5px),
            radial-gradient(circle at 35% 8%, rgba(120,225,255,0.86) 0 1.6px, transparent 5px),
            radial-gradient(circle at 64% 68%, rgba(255,140,40,0.8) 0 1.6px, transparent 5.5px),
            radial-gradient(circle at 12% 38%, rgba(255,40,200,0.85) 0 1.8px, transparent 6px);
        filter: drop-shadow(0 0 12px rgba(98,255,121,0.9));
        animation: moonEmitterRimSparks 1.05s linear both;
    }

    #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars .mascot-orbit-stage::after {
        inset: -58px;
        transform: rotate(24deg) scale(0.84);
        animation-delay: 0.06s;
    }
}

#welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::before,
#welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after {
    content: '';
    position: absolute;
    inset: -34px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 4%, rgba(255,255,255,0.98) 0 2px, transparent 5px),
        radial-gradient(circle at 82% 20%, rgba(98,255,121,0.9) 0 2px, transparent 6px),
        radial-gradient(circle at 96% 52%, rgba(255,255,255,0.88) 0 1.5px, transparent 5px),
        radial-gradient(circle at 76% 86%, rgba(255,75,174,0.82) 0 2px, transparent 6px),
        radial-gradient(circle at 28% 92%, rgba(255,255,255,0.84) 0 1.5px, transparent 5px),
        radial-gradient(circle at 6% 58%, rgba(191,90,242,0.86) 0 2px, transparent 6px),
        radial-gradient(circle at 16% 18%, rgba(255,204,0,0.82) 0 1.5px, transparent 5px),
        radial-gradient(circle at 35% 8%, rgba(120,225,255,0.86) 0 1.6px, transparent 5px),
        radial-gradient(circle at 64% 68%, rgba(255,140,40,0.8) 0 1.6px, transparent 5.5px),
        radial-gradient(circle at 12% 38%, rgba(255,40,200,0.85) 0 1.8px, transparent 6px);
    filter: drop-shadow(0 0 12px rgba(98,255,121,0.9));
    animation: moonEmitterRimSparks 1.05s linear both;
}

#welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after {
    inset: -58px;
    transform: rotate(24deg) scale(0.84);
    animation-duration: 1.05s;
    animation-delay: 0.06s;
}

/* Desktop opening transporter: keep the planet-like portal and its particle
   choreography, but use the same blue-white machine language as Phase 3. */
@media (min-width: 481px) {
    #welcome-screen.mascot-intro-overlay.transporter-emitting::after,
    #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars::after {
        background:
            radial-gradient(circle at 12% 12%, rgba(255,255,255,.98) 0 1.5px, transparent 3.5px), radial-gradient(circle at 82% 18%, rgba(112,211,255,.94) 0 1.5px, transparent 3.8px),
            radial-gradient(circle at 32% 26%, rgba(194,241,255,.90) 0 1.3px, transparent 3.5px), radial-gradient(circle at 66% 32%, rgba(68,137,255,.90) 0 1.6px, transparent 4px),
            radial-gradient(circle at 18% 42%, rgba(120,225,255,.90) 0 1.4px, transparent 3.6px), radial-gradient(circle at 86% 48%, rgba(255,255,255,.90) 0 1.4px, transparent 3.6px),
            radial-gradient(circle at 42% 54%, rgba(91,191,255,.88) 0 1.5px, transparent 3.8px), radial-gradient(circle at 62% 62%, rgba(218,249,255,.92) 0 1.3px, transparent 3.5px),
            radial-gradient(circle at 24% 70%, rgba(68,137,255,.84) 0 1.4px, transparent 3.6px), radial-gradient(circle at 78% 76%, rgba(112,211,255,.88) 0 1.5px, transparent 3.8px),
            radial-gradient(circle at 48% 88%, rgba(255,255,255,.92) 0 1.6px, transparent 4.2px), radial-gradient(circle at 54% 6%, rgba(120,225,255,.96) 0 1.4px, transparent 3.6px),
            repeating-linear-gradient(90deg, transparent 0 8px, rgba(112,211,255,.24) 9px 10px, transparent 11px 18px), repeating-linear-gradient(90deg, transparent 0 20px, rgba(255,255,255,.14) 21px 22px, transparent 23px 39px),
            linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.82) 12%, rgba(112,211,255,.62) 27%, rgba(68,137,255,.42) 49%, rgba(194,241,255,.40) 72%, rgba(255,255,255,0) 100%);
        filter: blur(.15px) drop-shadow(0 0 32px rgba(91,191,255,.90));
    }

    #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::before,
    #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after,
    #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars .mascot-orbit-stage::before,
    #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars .mascot-orbit-stage::after {
        background:
            radial-gradient(circle at 50% 4%, rgba(255,255,255,.98) 0 2px, transparent 5px),
            radial-gradient(circle at 82% 20%, rgba(112,211,255,.94) 0 2px, transparent 6px),
            radial-gradient(circle at 96% 52%, rgba(255,255,255,.90) 0 1.5px, transparent 5px),
            radial-gradient(circle at 76% 86%, rgba(91,191,255,.90) 0 2px, transparent 6px),
            radial-gradient(circle at 28% 92%, rgba(232,253,255,.88) 0 1.5px, transparent 5px),
            radial-gradient(circle at 6% 58%, rgba(68,137,255,.90) 0 2px, transparent 6px),
            radial-gradient(circle at 16% 18%, rgba(194,241,255,.88) 0 1.5px, transparent 5px),
            radial-gradient(circle at 35% 8%, rgba(120,225,255,.94) 0 1.6px, transparent 5px),
            radial-gradient(circle at 64% 68%, rgba(84,164,255,.88) 0 1.6px, transparent 5.5px),
            radial-gradient(circle at 12% 38%, rgba(218,249,255,.92) 0 1.8px, transparent 6px);
        filter: drop-shadow(0 0 16px rgba(91,191,255,1));
    }

    /* The console arrives through the same blue-white scanner, while its
       existing sweep, particle timing, and powered-down landing stay intact. */
    #capture-zone.console-teleport-in {
        /* Desktop was only animating the overlays. Animate the cabinet itself
           so it is actually born inside the scanner, regardless of its skin. */
        animation: desktopConsoleBlueMaterialize 1.8s cubic-bezier(.16, 1, .3, 1) both;
        will-change: opacity, transform;
        pointer-events: none;
        transform-origin: center top;
    }

    #capture-zone.console-teleport-in::before {
        animation-duration: 1.8s !important;
        background:
            repeating-linear-gradient(90deg, transparent 0 8px, rgba(112,211,255,.34) 9px 10px, transparent 11px 18px),
            repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.16) 26px 27px, transparent 28px 48px),
            linear-gradient(180deg, transparent 0%, rgba(68,137,255,.34) 34%, rgba(91,191,255,.62) 42%, rgba(255,255,255,.92) 50%, rgba(112,211,255,.60) 56%, rgba(68,137,255,.34) 64%, transparent 100%);
    }

    #capture-zone.console-teleport-in::after {
        animation-duration: 1.8s !important;
        background:
            radial-gradient(circle at 12% 18%, rgba(255,255,255,.98) 0 1.3px, transparent 3px), radial-gradient(circle at 31% 72%, rgba(112,211,255,.94) 0 1.2px, transparent 2.8px),
            radial-gradient(circle at 58% 28%, rgba(68,137,255,.92) 0 1.2px, transparent 2.8px), radial-gradient(circle at 84% 64%, rgba(220,249,255,.94) 0 1.2px, transparent 2.8px),
            radial-gradient(circle at 22% 46%, rgba(91,191,255,.90) 0 1px, transparent 2.6px), radial-gradient(circle at 72% 16%, rgba(255,255,255,.90) 0 1px, transparent 2.6px),
            radial-gradient(circle at 48% 88%, rgba(112,211,255,.88) 0 1.1px, transparent 2.7px), radial-gradient(circle at 92% 38%, rgba(68,137,255,.82) 0 1px, transparent 2.6px);
        background-size: 30px 30px, 38px 38px, 44px 44px, 34px 34px, 50px 50px, 56px 56px, 42px 42px, 62px 62px;
        filter: blur(.1px) drop-shadow(0 0 8px rgba(112,211,255,.62));
    }

    #capture-zone.console-transport-shimmer::before {
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(91,191,255,.20) 42%,
            rgba(255,255,255,.44) 50%,
            rgba(68,137,255,.18) 58%,
            transparent 100%);
    }

    #capture-zone.console-transport-shimmer::after {
        background:
            radial-gradient(circle at 20% 34%, rgba(255,255,255,.66) 0 1px, transparent 2px),
            radial-gradient(circle at 47% 68%, rgba(112,211,255,.64) 0 1px, transparent 2px),
            radial-gradient(circle at 74% 42%, rgba(68,137,255,.60) 0 1px, transparent 2px);
    }

    @keyframes desktopConsoleBlueMaterialize {
        0% {
            opacity: 0;
            transform: translateY(-16px) scale(.975);
            filter: brightness(2.2) saturate(1.4);
            box-shadow: inset 0 0 34px rgba(112,211,255,.34), inset 0 0 68px rgba(68,137,255,.22), 0 0 0 rgba(112,211,255,0);
        }
        16% {
            opacity: .12;
            transform: translateY(-12px) scale(.98);
            filter: brightness(1.9) saturate(1.3);
            box-shadow: inset 0 0 42px rgba(194,241,255,.46), inset 0 0 88px rgba(68,137,255,.30), 0 0 30px rgba(91,191,255,.30);
        }
        44% {
            opacity: .72;
            transform: translateY(-4px) scale(.993);
            filter: brightness(1.45) saturate(1.18);
            box-shadow: inset 0 0 34px rgba(194,241,255,.32), inset 0 0 64px rgba(68,137,255,.22), 0 0 38px rgba(91,191,255,.32);
        }
        72% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: brightness(1.1) saturate(1.05);
            box-shadow: inset 0 0 22px rgba(112,211,255,.18), 0 0 24px rgba(91,191,255,.18);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: brightness(1) saturate(1) blur(0);
        }
    }

}

@keyframes introMascotTransportOut {
    0% { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
    28% { opacity: 1; transform: scale(1.03); filter: brightness(1.28) saturate(1.18); }
    62% { opacity: 0.72; transform: scale(0.96); filter: brightness(1.55) saturate(1.18) blur(1px); }
    100% { opacity: 0; transform: scale(0.74); filter: brightness(1.6) saturate(0.9) blur(4px); }
}

@keyframes mascotTransportZoomOut {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) saturate(1);
    }
    28% {
        opacity: 1;
        transform: scale(1.035);
        filter: brightness(1.28) saturate(1.18);
    }
    58% {
        opacity: 0.92;
        transform: translateY(-8px) scale(0.86);
        filter: brightness(1.62) saturate(1.28) blur(0.4px);
    }
    82% {
        opacity: 0.48;
        transform: translateY(-22px) scale(0.48);
        filter: brightness(2.15) saturate(1.35) blur(1.2px);
    }
    100% {
        opacity: 0;
        transform: translateY(-42px) scale(0.18);
        filter: brightness(2.4) saturate(1.2) blur(2.4px);
    }

}

@keyframes mascotIntroFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* FINAL MASCOT TRANSPORT: full-width scanner field to match the console. */
#welcome-screen.mascot-intro-overlay.transporter-emitting::after {
    left: 50% !important;
    top: 0 !important;
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    height: 100% !important;
    border-radius: 0 !important;
    transform: translateX(-50%) !important;
    background:
        radial-gradient(circle at 8% 82%, rgba(255,255,255,.92) 0 1px, transparent 3px),
        radial-gradient(circle at 19% 54%, rgba(112,211,255,.9) 0 1px, transparent 3px),
        radial-gradient(circle at 31% 72%, rgba(194,241,255,.86) 0 1px, transparent 3px),
        radial-gradient(circle at 44% 38%, rgba(68,137,255,.86) 0 1px, transparent 3px),
        radial-gradient(circle at 57% 66%, rgba(255,255,255,.9) 0 1px, transparent 3px),
        radial-gradient(circle at 70% 46%, rgba(112,211,255,.9) 0 1px, transparent 3px),
        radial-gradient(circle at 83% 76%, rgba(194,241,255,.86) 0 1px, transparent 3px),
        radial-gradient(circle at 94% 58%, rgba(68,137,255,.86) 0 1px, transparent 3px),
        repeating-linear-gradient(90deg, transparent 0 15px, rgba(112,211,255,.18) 16px 17px, transparent 18px 31px),
        linear-gradient(180deg, transparent 0%, rgba(112,211,255,.1) 40%, rgba(255,255,255,.88) 50%, rgba(68,137,255,.14) 60%, transparent 100%) !important;
    background-size: 90px 120px, 110px 150px, 130px 170px, 100px 140px, 120px 160px, 140px 180px, 105px 145px, 125px 165px, auto, 100% 220% !important;
    background-position: 0 120%, 0 100%, 0 140%, 0 80%, 0 160%, 0 110%, 0 130%, 0 90%, 0 0, 0 -120% !important;
    animation: mascotFullWidthScanner 1.05s linear both !important;
}

#welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage {
    animation: mascotTransportZoomOut 1.05s linear both !important;
}

@keyframes mascotTransportDissolve {
    0%, 18% { opacity: 1; transform: none; filter: brightness(1) saturate(1); }
    48% { opacity: .92; transform: none; filter: brightness(1.45) saturate(1.15) blur(.3px); }
    76% { opacity: .42; transform: none; filter: brightness(1.9) saturate(1.1) blur(1px); }
    100% { opacity: 0; transform: none; filter: brightness(2.2) saturate(.85) blur(2px); }
}

@keyframes mascotFullWidthScanner {
    0% { opacity: 0; background-position: 0 120%, 0 100%, 0 140%, 0 80%, 0 160%, 0 110%, 0 130%, 0 90%, 0 0, 0 -120%; }
    18% { opacity: .45; }
    52% { opacity: .95; background-position: 0 76%, 0 56%, 0 96%, 0 36%, 0 116%, 0 66%, 0 86%, 0 46%, 0 0, 0 -10%; }
    82% { opacity: .7; }
    100% { opacity: 0; background-position: 0 20%, 0 0%, 0 40%, 0 -20%, 0 60%, 0 10%, 0 30%, 0 -10%, 0 0, 0 120%; }
}

/* Desktop: keep the menu visually attached to the right side of the console. */
@media (min-width: 901px) and (pointer: fine) {
    #quick-menu-btn {
        top: 132px;
        right: auto;
        left: calc(50% + 226px);
    }

    #quick-menu-box {
        top: 130px;
        right: auto;
        left: calc(50% + 264px);
    }
}

/* Quick menu accents follow the active console skin. */
body:not([data-console-skin]),
body[data-console-skin="original"] { --quick-menu-accent: #4058b8; --quick-menu-glow: rgba(54,74,160,.28); --quick-menu-hover: #4058b8; }
body[data-console-skin="white"] { --quick-menu-accent: #fbfbf6; --quick-menu-glow: rgba(150,160,180,.28); --quick-menu-hover: #fbfbf6; }
body[data-console-skin="ferrari"] { --quick-menu-accent: #e10600; --quick-menu-glow: rgba(225,6,0,.28); --quick-menu-hover: #e10600; }
body[data-console-skin="orange"] { --quick-menu-accent: #ff9b24; --quick-menu-glow: rgba(255,126,12,.32); --quick-menu-hover: #ff9b24; }
body[data-console-skin="rose-gold"] { --quick-menu-accent: #e8ada5; --quick-menu-glow: rgba(183,110,121,.30); --quick-menu-hover: #e8ada5; }
body[data-console-skin="neon-green"] { --quick-menu-accent: #62ff79; --quick-menu-glow: rgba(98,255,121,.30); --quick-menu-hover: #62ff79; }

#quick-menu-btn,
#quick-menu-box,
.quick-menu-pill {
    border-color: var(--quick-menu-accent, var(--accent));
}

#quick-menu-box {
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 38%, rgba(0,0,0,.28) 100%),
        radial-gradient(circle at 50% 112%, var(--quick-menu-glow, rgba(191,90,242,.26)), transparent 56%),
        rgba(12,0,14,.94);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -10px 18px rgba(0,0,0,.38), 0 4px 0 rgba(0,0,0,.48), 0 0 22px var(--quick-menu-glow, rgba(191,90,242,.24));
}

.quick-menu-pill:hover,
.quick-menu-pill:focus-visible,
#quick-menu-btn:hover,
#quick-menu-btn[aria-expanded="true"] {
    border-color: var(--quick-menu-accent, var(--accent));
    background: var(--quick-menu-hover, rgba(191,90,242,.18));
    box-shadow: 0 0 16px var(--quick-menu-glow, rgba(191,90,242,.28));
}

body[data-console-skin="white"] #quick-menu-box .quick-menu-pill:hover,
body[data-console-skin="white"] #quick-menu-box .quick-menu-pill:focus-visible {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.76);
    color: #f5f5f0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 11px rgba(255,255,255,.24);
}

#quick-menu-box .quick-menu-pill:hover,
#quick-menu-box .quick-menu-pill:focus-visible {
    background: color-mix(in srgb, var(--quick-menu-accent, var(--accent)) 14%, transparent);
    border-color: color-mix(in srgb, var(--quick-menu-accent, var(--accent)) 76%, #fff 24%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--quick-menu-accent, #fff) 18%, transparent), 0 0 11px var(--quick-menu-glow, rgba(191,90,242,.28));
}

/* The hamburger occupies the MOJI-LOJI hyphen in the cabinet header. */
#category-banner .moji-title #quick-menu-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: clamp(25px, 6.4vw, 34px) !important;
    height: clamp(25px, 6.4vw, 34px) !important;
    flex: 0 0 clamp(25px, 6.4vw, 34px);
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 clamp(1px, .35vw, 4px);
    padding: 5px !important;
    border: 1px solid var(--quick-menu-accent, var(--accent)) !important;
    border-radius: 7px;
    background: rgba(0,0,0,.12);
    color: var(--quick-menu-accent, var(--accent));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 10px var(--quick-menu-glow, rgba(191,90,242,.24));
    pointer-events: auto;
    transform: none;
}

#category-banner .moji-title #quick-menu-btn span {
    display: block;
    width: 16px !important;
    min-width: 16px;
    max-width: 16px;
    height: 2px !important;
    min-height: 2px;
    max-height: 2px;
    flex: 0 0 2px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: none;
}

#category-banner .moji-title #quick-menu-btn:hover,
#category-banner .moji-title #quick-menu-btn[aria-expanded="true"] {
    background: var(--quick-menu-hover, rgba(191,90,242,.18));
    transform: translateY(-1px);
}

/* The slot machine's left cabinet rail doubles as the music fader track. */
#slot-machine::before {
    top: var(--music-volume-rail-top, 60px);
    bottom: auto;
    left: -3px;
    height: var(--music-volume-rail-height, calc(80% - 48px));
    width: 3px;
    background: #080808;
    opacity: 1;
}

#volume-control {
    --music-volume-tab-max: var(--quick-menu-accent, #7082ff);
    --music-volume-tab-fill: var(--music-volume-tab-max);
    position: absolute;
    top: var(--music-volume-rail-top, 60px);
    bottom: auto;
    left: -3px;
    height: var(--music-volume-rail-height, calc(80% - 48px));
    z-index: 10;
    width: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

/* The skin selector is a physical fader: the tab follows the finger, while a
   very brief cabinet pulse softens each discrete skin stop. */
#capture-zone.console-skin-switch:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg) {
    animation: consoleSkinSwitch 160ms ease-out both;
}

@keyframes consoleSkinSwitch {
    0% { filter: brightness(.92) saturate(.90); }
    55% { filter: brightness(1.07) saturate(1.06); }
    100% { filter: brightness(1) saturate(1); }
}

/* Let the square tab clear the outer edge instead of clipping its left side. */
#slot-machine {
    overflow: visible;
    contain: layout;
    z-index: 2 !important;
}

/* The fader tab straddles the cabinet edge, so its outer half must not be clipped. */
#capture-zone {
    contain: layout;
    overflow: visible;
}

#volume-control::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 3px;
    background: #080808;
    box-shadow: inset 1px 0 1px rgba(255,255,255,.12), 1px 0 2px rgba(0,0,0,.68);
    z-index: 0;
    pointer-events: none;
}

#music-volume-slider {
    position: absolute;
    top: 0;
    left: -32px;
    width: 55px;
    height: 100%;
    margin: 0;
    writing-mode: vertical-lr;
    direction: rtl;
    opacity: 0;
    z-index: 2;
    cursor: ns-resize;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

/* Reference fader: 4px black rail and a 22×12 red tab with black outline. */
#music-volume-thumb {
    position: absolute;
    top: var(--music-volume-thumb-y, 0%);
    left: calc(50% + 2px);
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--music-volume-tab-fill);
    border-radius: 3px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--music-volume-tab-fill) 88%, #fff 12%), var(--music-volume-tab-fill));
    box-shadow: 0 1px 1px rgba(0,0,0,.55);
    z-index: 1;
    pointer-events: none;
    transition: top 70ms linear, border-color 140ms ease-out, background 140ms ease-out;
}

#volume-control[data-muted="true"] #music-volume-thumb {
    background: linear-gradient(135deg, #ad2525, #9f1515);
    border-color: #9f1515;
}

body:not([data-console-skin]) #volume-control,
body[data-console-skin="original"] #volume-control {
    --music-volume-tab-max: #4b5895;
}

body[data-console-skin="ferrari"] #volume-control {
    --music-volume-tab-max: #884146;
}

body[data-console-skin="orange"] #volume-control {
    --music-volume-tab-max: #c46718;
}

body[data-console-skin="rose-gold"] #volume-control {
    --music-volume-tab-max: #ad7c82;
}

body[data-console-skin="neon-green"] #volume-control {
    --music-volume-tab-max: #3f9a59;
}

body[data-console-skin="white"] #category-banner .moji-title #quick-menu-btn {
    color: #30343b;
    border-color: #30343b !important;
    background: rgba(255,255,255,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 0 8px rgba(80,90,110,.22);
}

body[data-console-skin="white"] #category-banner .moji-title #quick-menu-btn:hover,
body[data-console-skin="white"] #category-banner .moji-title #quick-menu-btn[aria-expanded="true"] {
    background: rgba(80,90,110,.16);
}

/* Shared header treatment: the white-skin hamburger reads cleanly on every cabinet. */
#category-banner .moji-title #quick-menu-btn {
    color: #30343b;
    border-color: #30343b !important;
    background: var(--quick-menu-accent, rgba(255,255,255,.42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 0 8px rgba(80,90,110,.22);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#category-banner .moji-title #quick-menu-btn:hover,
#category-banner .moji-title #quick-menu-btn[aria-expanded="true"] {
    background: #fff;
    color: #30343b;
    border-color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 0 10px rgba(255,255,255,.42);
    transform: none !important;
}

/* Remove the stray white top-edge flash from the CRT/header wake overlap. */
#capture-zone.console-decor-wake #category-banner {
    animation: consoleDecorBannerWakeClean 1.12s ease-out both !important;
}

@keyframes consoleDecorBannerWakeClean {
    0% { filter: brightness(.72) saturate(.72); box-shadow: inset 0 -14px 20px rgba(46,15,22,.24), 0 4px 0 rgba(32,10,16,.78), 0 0 4px rgba(255,204,0,.04); }
    48% { filter: brightness(.9) saturate(.9); box-shadow: inset 0 -14px 20px rgba(46,15,22,.30), 0 4px 0 rgba(32,10,16,.78), 0 0 9px rgba(255,204,0,.10); }
    100% { filter: brightness(1) saturate(1); box-shadow: inset 0 -14px 20px rgba(46,15,22,.34), 0 4px 0 rgba(32,10,16,.78), 0 0 14px rgba(255,204,0,.18); }
}

/* Header wake/transport owns the banner timing; the embedded menu must stay
   visually locked to the title instead of running a second animation. */
#capture-zone.console-teleport-in #category-banner #quick-menu-btn,
#capture-zone.console-postmoon-lock #category-banner #quick-menu-btn,
#capture-zone.phase3-header-transport #category-banner #quick-menu-btn {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Final button contrast: no translucent layer or inherited background image. */
#category-banner .moji-title #quick-menu-btn {
    background: var(--quick-menu-accent) !important;
    background-image: none !important;
    box-shadow: none !important;
}

#category-banner .moji-title #quick-menu-btn:hover,
#category-banner .moji-title #quick-menu-btn[aria-expanded="true"] {
    background: #fff !important;
    background-image: none !important;
    color: #30343b !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

/* Inset speaker-grille menu: part of the cabinet plate, not a floating button. */
#category-banner .moji-title #quick-menu-btn {
    position: relative !important;
    width: 18px !important;
    height: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    overflow: hidden;
}

#category-banner .moji-title #quick-menu-btn span {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 13px !important;
    min-width: 13px;
    max-width: 13px;
    height: 2px !important;
    min-height: 2px;
    max-height: 2px;
    border-radius: 2px;
    background: var(--quick-menu-accent, #aab5d9);
    background: color-mix(in srgb, var(--quick-menu-accent, #aab5d9) 72%, #111 28%);
    box-shadow: 0 1px 0 rgba(0,0,0,.68);
}

#category-banner .moji-title #quick-menu-btn::after {
    display: none;
}

#category-banner .moji-title #quick-menu-btn:hover,
#category-banner .moji-title #quick-menu-btn[aria-expanded="true"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: .72;
}

/* The embedded hamburger follows the title's travelling bright pulse.  The
   bars are animated directly because the button itself is intentionally
   transparent and its color is hidden by the speaker-grille treatment. */
#category-banner .moji-title #quick-menu-btn span {
    animation: mojiMenuBarGlow 3.2s ease-in-out infinite;
    animation-fill-mode: both;
    will-change: background-color, filter, opacity;
}

#category-banner .moji-title #quick-menu-btn span:nth-child(1) { animation-delay: 0s; }
#category-banner .moji-title #quick-menu-btn span:nth-child(2) { animation-delay: .17s; }
#category-banner .moji-title #quick-menu-btn span:nth-child(3) { animation-delay: .34s; }

@keyframes mojiMenuBarGlow {
    0%, 12%, 100% {
        background-color: color-mix(in srgb, var(--quick-menu-accent, #aab5d9) 38%, #111 62%);
        filter: brightness(.82);
        opacity: .86;
    }
    26% {
        background-color: var(--quick-menu-accent, #aab5d9);
        filter: brightness(1.08);
        opacity: .96;
    }
    38% {
        background-color: #fff;
        filter: brightness(1.18);
        opacity: 1;
    }
    58% {
        background-color: color-mix(in srgb, var(--quick-menu-accent, #aab5d9) 38%, #111 62%);
        filter: brightness(.82);
        opacity: .88;
    }
}

@media (min-width: 901px) and (pointer: fine) {
    #category-banner .moji-title #quick-menu-btn {
        width: 24px !important;
        height: 20px !important;
        flex-basis: 24px;
        gap: 4px;
    }

    #category-banner .moji-title #quick-menu-btn span {
        width: 18px !important;
        min-width: 18px;
        max-width: 18px;
        height: 2px !important;
    }
}

/* Emoji selection: preserve the original key skin and only blank the letters. */
body:has(#status-panel.emoji-pick-mode) #keyboard {
    display: flex !important;
    visibility: visible !important;
    pointer-events: none !important;
}

body:has(#status-panel.emoji-pick-mode) #keyboard .key {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

@keyframes mascotIntroContentIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.985);
        filter: blur(3px) brightness(0.86);
    }
    62% {
        opacity: 1;
        transform: translate3d(0, -2px, 0) scale(1.004);
        filter: blur(0.4px) brightness(1.04);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) brightness(1);
    }
}

@keyframes mascotIntroHeroReveal {
    0% {
        opacity: 0;
        filter: blur(5px) brightness(0.68) saturate(0.9);
    }
    58% {
        opacity: 1;
        filter: blur(0) brightness(1) saturate(1);
    }
    100% {
        opacity: 1;
        filter: blur(0) brightness(1) saturate(1);
    }
}

@keyframes mascotIntroBoxReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
        filter: blur(3px) brightness(0.82);
    }
    70% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0) brightness(1);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0) brightness(1);
    }
}

@keyframes mascotIntroSoftReveal {
    from {
        opacity: 0;
        filter: blur(2px) brightness(0.86);
    }
    to {
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}

@keyframes introTransportSkyPulse {
    0% { opacity: 0.28; transform: scale(0.96); filter: brightness(0.95) saturate(1); }
    42% { opacity: 0.78; transform: scale(1.02); filter: brightness(1.28) saturate(1.18); }
    100% { opacity: 0.18; transform: scale(1.08); filter: brightness(1.05) saturate(1.06); }
}

@keyframes mascotOrbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes mascotCounterSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes mascotSpaceFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    24% { transform: translate3d(5px, -8px, 0) rotate(0.35deg) scale(1.004); }
    52% { transform: translate3d(-3px, -14px, 0) rotate(-0.28deg) scale(1.008); }
    76% { transform: translate3d(4px, -5px, 0) rotate(0.18deg) scale(1.003); }
}

@keyframes mascotPokeSquish {
    0% { transform: scale(1); }
    18% { transform: scale(0.982, 1.018); }
    42% { transform: scale(1.014, 0.99); }
    68% { transform: scale(0.996, 1.004); }
    100% { transform: scale(1.0001); }
}

@keyframes mascotRipple {
    0% { opacity: 0.95; transform: scale(0.25); filter: blur(0); }
    72% { opacity: 0.56; }
    100% { opacity: 0; transform: scale(14); filter: blur(1.8px); }
}

@keyframes mascotBackDepth {
    0%, 16% { opacity: 0; filter: brightness(1.02) saturate(1); }
    22%, 48% { opacity: 0.62; filter: brightness(1.02) saturate(1); }
    56%, 100% { opacity: 0; filter: brightness(1.02) saturate(1); }
}

@keyframes mascotFrontDepth {
    0%, 14% { opacity: 1; filter: brightness(1.12) saturate(1.04); }
    22%, 50% { opacity: 0; filter: brightness(1.04) saturate(1); }
    58%, 100% { opacity: 1; filter: brightness(1.12) saturate(1.04); }
}

@media (max-width: 520px) {
    #welcome-screen.mascot-intro-overlay {
        padding: max(12px, env(safe-area-inset-top)) 16px calc(78px + env(safe-area-inset-bottom));
    }

    .mascot-intro-wrapper {
        width: min(520px, 100%);
        height: auto;
        gap: 15px;
        padding-top: 15px;
    }

    .faq-streak-badge,
    .faq-action-btn {
        width: min(310px, 100%);
        padding: 7px 12px;
        font-size: 0.82rem;
    }

    #welcome-streak-container.faq-streak-badge,
    #welcome-briefing-btn.faq-action-btn,
    #welcome-briefing-close.faq-action-btn,
    #enter-game-btn.faq-action-btn {
        width: min(310px, 100%) !important;
        padding: 7px 12px !important;
        font-size: 0.82rem !important;
    }

    .mascot-orbit-stage {
        --orbit-duration: 12.8s;
        width: min(100%, 94vw);
        margin-top: 30px;
        margin-bottom: 25px;
    }

    .faq-welcome-bottom {
        margin-top: 34px;
    }

    .faq-moon-briefing {
        width: min(300px, 100%);
        margin-top: -8px;
        margin-bottom: 4px;
        gap: 4px;
    }

    #welcome-moon-title {
        font-size: 0.78rem;
    }

    #welcome-moon-icon {
        min-height: 38px;
        font-size: 2.45rem;
    }

    #welcome-moon-currency,
    #welcome-moon-text {
        font-size: 0.76rem;
        line-height: 1.2;
    }

    .currency-intro-kicker {
        font-size: 0.64rem;
    }

    .currency-intro-main {
        font-size: 0.82rem;
    }

    .faq-wallet {
        font-size: 0.66rem;
    }

    #lojiro-welcome-balance.faq-wallet {
        font-size: 0.66rem !important;
    }


    .mascot-orbit-ring {
        width: 71%;
    }

    .mascot-satellite {
        width: 50px;
        height: 50px;
        margin-left: -25px;
        margin-top: -25px;
    }

    .mascot-satellite::before {
        width: 120px;
        height: 36px;
        filter: blur(6px);
    }

    .mascot-satellite > span {
        font-size: 0.76rem;
    }
}

@media (max-width: 480px) {
    #share-modal.on {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }

    #share-panel {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 20px !important;
        width: 95% !important;
        max-width: 480px !important;
        min-height: 320px !important;
        height: auto !important;
        padding: 30px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        overflow-y: auto !important;
        animation: slideUp 0.4s ease-out !important;
    }
}


/* ──────────────────────────────────────────────
   MOBILE/WEBVIEW INTRO PATCH: mascot zoom-out + tiny console delay
   Desktop rules are untouched. This late block intentionally wins over
   older mobile transporter/fade experiments with !important.
────────────────────────────────────────────── */
@media (max-width: 480px), (pointer: coarse) and (orientation: portrait) and (min-width: 481px) {
    body.mobile-ui #welcome-screen.mascot-intro-overlay.transporter-emitting,
    body.android-app #welcome-screen.mascot-intro-overlay.transporter-emitting {
        display: flex !important;
        background: transparent !important;
        animation: none !important;
    }

    body.mobile-ui #welcome-screen.mascot-intro-overlay.transporter-emitting::before,
    body.android-app #welcome-screen.mascot-intro-overlay.transporter-emitting::before,
    body.mobile-ui #welcome-screen.mascot-intro-overlay.transporter-emitting::after,
    body.android-app #welcome-screen.mascot-intro-overlay.transporter-emitting::after,
    body.mobile-ui #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::before,
    body.android-app #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::before,
    body.mobile-ui #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after,
    body.android-app #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after,
    body.mobile-ui #capture-zone.console-teleport-in::before,
    body.android-app #capture-zone.console-teleport-in::before,
    body.mobile-ui #capture-zone.console-teleport-in::after,
    body.android-app #capture-zone.console-teleport-in::after,
    body.mobile-ui #capture-zone.console-transport-shimmer::before,
    body.android-app #capture-zone.console-transport-shimmer::before,
    body.mobile-ui #capture-zone.console-transport-shimmer::after,
    body.android-app #capture-zone.console-transport-shimmer::after {
        display: none !important;
        animation: none !important;
        background: none !important;
        filter: none !important;
    }

    #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage {
        animation: mobileMascotZoomOutRestored 0.92s cubic-bezier(.16, 1, .3, 1) both !important;
        transform-origin: center center !important;
        will-change: transform, opacity;
        backface-visibility: hidden;
        pointer-events: none;
    }

    #welcome-screen.mascot-intro-overlay.transporter-emitting .faq-welcome-top,
    #welcome-screen.mascot-intro-overlay.transporter-emitting .faq-welcome-bottom,
    #welcome-screen.mascot-intro-overlay.transporter-emitting #welcome-date-outside {
        animation: mobileIntroSoftVanishClean 0.44s ease-out both !important;
    }

    body.mobile-ui #capture-zone.console-teleport-in,
    body.android-app #capture-zone.console-teleport-in {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none;
        transform-origin: center center !important;
        animation: mobileConsoleSmallZoomInAfterDelay 0.52s cubic-bezier(.22,.61,.36,1) both !important;
        will-change: transform;
        backface-visibility: hidden;
        filter: none !important;
    }

    #capture-zone.console-teleport-in > *,
    #capture-zone.console-teleport-in #board-wrap,
    #capture-zone.console-teleport-in #category-banner,
    #board-wrap.board-teleport-in,
    #board-wrap.board-teleport-in::before,
    #board-wrap.board-teleport-in::after {
        animation: none !important;
    }

    @keyframes mobileMascotZoomOutRestored {
        0% {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
        }
        58% {
            opacity: 1;
            transform: translate3d(0, -4px, 0) scale(0.78);
        }
        100% {
            opacity: 0;
            transform: translate3d(0, -12px, 0) scale(0.16);
        }
    }

    @keyframes mobileIntroSoftVanishClean {
        0% { opacity: 1; transform: translate3d(0,0,0); }
        100% { opacity: 0; transform: translate3d(0,-4px,0); }
    }

    @keyframes mobileConsoleSmallZoomInAfterDelay {
        0% {
            transform: translate3d(0, 0, 0) scale(0.94);
        }
        100% {
            transform: translate3d(0, 0, 0) scale(1);
        }
    }
}

/* ── EMOJI TV STATIC BROADCAST (RE-RE-INJECTED) ── */
.sbox.crt-static::after {
    content: "EMOJI TV" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: pre !important;
    font-family: 'Courier New', monospace !important;
    font-size: clamp(0.68rem, 2.45vw, 0.92rem) !important;
    color: rgba(255, 244, 116, 0.78) !important;
    letter-spacing: 2px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    opacity: 0.96 !important;
    filter: brightness(1.22) saturate(1.18) contrast(1.18) !important;
    z-index: 50 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: crtStaticFloat 5s ease-in-out infinite, fadeIn 7s ease-out 1.2s both !important;
    text-shadow:
        0 0 2px rgba(255,255,255,0.55),
        0 0 8px rgba(255,232,75,0.56),
        0 0 14px rgba(132,255,154,0.42) !important;
}

@keyframes crtStaticFloat {
    0%, 100% { transform: translate(0, 0); }
    33%      { transform: translate(3px, -2px); }
    66%      { transform: translate(-2px, 1px); }
}

/* White skin: make ONLY unmarked keyboard keys darker so the neutral state is readable. */
body[data-console-skin="white"] #keyboard .key:not(.correct):not(.present):not(.absent):not(.joker-key):not(.joker-revealed):not(.phase3-enter-glow):not(.key-wake-lit) {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 40%, rgba(0,0,0,0.38)),
        radial-gradient(circle at 50% 110%, rgba(255,255,255,0.08), transparent 60%),
        #24262c !important;
    color: rgba(255,255,255,0.92) !important;
    border-color: rgba(0,0,0,0.64) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -8px 12px rgba(0,0,0,0.36),
        0 2px 0 rgba(0,0,0,0.56) !important;
}

/* Mobile browsers may refuse orientation.lock outside fullscreen. Block only
   phone-sized landscape layouts; tablets have enough room to rotate. */
#portrait-lock-overlay {
    display: none;
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 480px) {
    #portrait-lock-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
        background:
            radial-gradient(circle at 50% 42%, rgba(191, 90, 242, 0.22), transparent 34%),
            #020818;
        color: var(--text);
        font-family: 'Courier New', monospace;
        text-align: center;
        touch-action: none;
    }

    .portrait-lock-phone {
        color: var(--yellow);
        font-size: clamp(2.5rem, 12vh, 4.5rem);
        line-height: 1;
        animation: portraitLockTurn 1.5s ease-in-out infinite;
    }

    .portrait-lock-title {
        color: var(--yellow);
        font-size: clamp(0.9rem, 4vh, 1.2rem);
        letter-spacing: 2px;
    }

    .portrait-lock-copy {
        color: var(--muted);
        font-size: clamp(0.72rem, 3.2vh, 0.9rem);
    }
}

@keyframes portraitLockTurn {
    0%, 18%, 100% { transform: rotate(0deg); }
    55%, 82% { transform: rotate(90deg); }
}

/* Score LCDs open a compact, shared scoring reference. */
#score-bar .score-side,
#emoji-modal-score .em-score-side {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#score-bar .score-side {
    font-family: inherit;
}

#emoji-modal-score .em-score-side {
    font-family: 'Courier New', monospace;
}

#score-bar .score-side:focus-visible,
#emoji-modal-score .em-score-side:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

#score-bar .score-side:active,
#emoji-modal-score .em-score-side:active {
    filter: brightness(1.22);
}

#scoring-rules-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 220;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 0, 6, 0.88);
}

#scoring-rules-modal.on,
#scoring-rules-modal.leaving {
    display: flex;
}

#scoring-rules-modal.on {
    animation: modalOpacityIn 0.2s ease both;
}

#scoring-rules-modal.leaving {
    animation: modalOpacityOut 0.24s ease forwards;
}

#scoring-rules-box {
    width: min(370px, calc(100vw - 32px));
    max-height: min(660px, calc(100dvh - 32px));
    overflow-y: auto;
    padding: 20px 18px 18px;
    border: 1px solid var(--accent);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(35, 18, 42, 0.98), rgba(10, 7, 13, 0.99));
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.72), 0 0 24px rgba(191, 90, 242, 0.2);
    font-family: 'Courier New', monospace;
}

#scoring-rules-title {
    margin-bottom: 14px;
    color: var(--yellow);
    font-size: 0.98rem;
    letter-spacing: 2px;
    text-align: center;
}

#scoring-rules-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scoring-rules-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.scoring-rules-heading {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(191, 90, 242, 0.42);
    color: var(--accent);
    font-size: 0.72rem;
    letter-spacing: 1.4px;
}

.scoring-rule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.3;
}

.scoring-rule strong {
    max-width: 142px;
    color: var(--green);
    font-weight: 700;
    text-align: right;
}

.scoring-rules-costs .scoring-rule strong {
    color: #ff7488;
}

#scoring-rules-box .hint-btns {
    margin-top: 16px;
}

/* Score reference follows the selected cabinet skin. */
body:not([data-console-skin]),
body[data-console-skin="original"] { --score-modal-edge: #4058b8; }
body[data-console-skin="white"] { --score-modal-edge: #f4f1e8; }
body[data-console-skin="ferrari"] { --score-modal-edge: #e10600; }
body[data-console-skin="orange"] { --score-modal-edge: #ff9b24; }
body[data-console-skin="rose-gold"] { --score-modal-edge: #e8ada5; }
body[data-console-skin="neon-green"] { --score-modal-edge: #62ff79; }

#scoring-rules-modal {
    background: rgba(2, 0, 6, 0.88);
}

#scoring-rules-box {
    border-color: var(--score-modal-edge);
    background: linear-gradient(180deg, rgba(35, 18, 42, 0.98), rgba(10, 7, 13, 0.99));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -10px 18px rgba(0,0,0,.38), 0 18px 54px rgba(0,0,0,.72), 0 0 20px color-mix(in srgb, var(--score-modal-edge) 35%, transparent) !important;
}

#scoring-rules-title,
.scoring-rules-heading {
    color: var(--score-modal-edge);
}

.scoring-rules-heading {
    border-bottom-color: color-mix(in srgb, var(--score-modal-edge) 55%, transparent);
}

/* Modal readability floor: lift only the smallest utility copy and controls. */
#dict-hint-cost,
.emoji-hint-preview-label,
#hint-modal-cost,
#exchange-rates,
#exchange-feedback,
.scoring-rules-heading,
#emoji-modal-score .em-score-label {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
}

#exchange-modal .action-btn {
    font-size: 0.76rem !important;
}

#win-overlay #exchange-stats-btn,
#win-overlay #stats-back-btn,
#win-overlay #share-stats-btn,
#win-overlay #rewatch-skit-btn {
    font-size: clamp(0.62rem, 2vw, 0.74rem) !important;
}

@media (max-width: 360px) {
    #exchange-modal .action-btn {
        font-size: 0.72rem !important;
    }

    #win-overlay #exchange-stats-btn,
    #win-overlay #stats-back-btn,
    #win-overlay #share-stats-btn,
    #win-overlay #rewatch-skit-btn {
        font-size: 0.60rem !important;
    }
}

/* iPhone/iOS readability adjustment.
   All iOS browsers use WebKit; the phone-width guard keeps this away from
   desktop Safari and leaves Android's existing sizing unchanged. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 480px) and (pointer: coarse) {
        #category-subtitle-box .lcd-text,
        #lcd-panel #msg {
            font-size: 0.86rem !important;
            font-weight: 600 !important;
            letter-spacing: 0.7px !important;
        }

        #status-panel .sbox-ltr,
        #status-panel .choice-label {
            font-size: 0.84rem !important;
            font-weight: 600 !important;
        }
    }
}

/* One neutral header treatment across every cabinet: copied from WHITE. */
body[data-console-skin] #category-banner,
body:not([data-console-skin]) #category-banner {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body[data-console-skin] #category-banner::after,
body:not([data-console-skin]) #category-banner::after {
    background: transparent !important;
    opacity: 0.88 !important;
    animation: none !important;
    will-change: background-position, background-size, filter;
}

body[data-console-skin] #category-banner::before,
body:not([data-console-skin]) #category-banner::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.20), rgba(20,23,28,0.10) 24%, rgba(20,23,28,0.14) 70%, rgba(0,0,0,0.34)),
        linear-gradient(90deg, rgba(0,0,0,0.14), transparent 18%, transparent 82%, rgba(0,0,0,0.20)) !important;
    box-shadow:
        inset 0 5px 9px rgba(255,255,255,0.10),
        inset 0 -3px 6px rgba(0,0,0,0.38),
        inset 0 0 18px rgba(0,0,0,0.10) !important;
}

/* Horizontal companion to the volume fader: a cabinet-only colour control. */
html {
    --console-saturation: 1;
}

/* Filter only the game cabinet, never the whole page. */
#capture-zone.console-saturation-active {
    filter: saturate(var(--console-saturation));
}


#saturation-control {
    --console-saturation-thumb-x: 100%;
    position: relative;
    width: min(152px, 46%);
    height: 12px;
    margin: -2px auto 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#saturation-control::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: #080808;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.68);
}

#console-saturation-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}

#console-saturation-thumb {
    position: absolute;
    top: 50%;
    left: var(--console-saturation-thumb-x);
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    border: 1px solid color-mix(in srgb, var(--quick-menu-accent, #aab5d9) 50%, #111 50%);
    border-radius: 3px;
    background: color-mix(in srgb, var(--quick-menu-accent, #aab5d9) 55%, #111 45%);
    box-shadow: 0 1px 1px rgba(0,0,0,.55);
    transition: background 220ms ease, border-color 220ms ease;
    pointer-events: none;
    z-index: 1;
}

/* White cabinet keeps a readable saturation tab even near monochrome. */
body[data-console-skin="white"] #console-saturation-thumb {
    border-color: #a9afb7;
    background: linear-gradient(135deg, #f0f2f4, #c7cbd1);
}

body[data-console-skin="orange"] #console-saturation-thumb {
    border-color: #c46718;
    background: linear-gradient(135deg, #d37a25, #c46718);
}

#capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #hint-offer-inline.saturation-mode-message::after {
    content: attr(data-idle-message);
    display: grid !important;
    place-items: center;
    color: #eaf9ff;
    font-family: 'Courier New', monospace;
    font-size: clamp(0.68rem, 2.6vw, 0.82rem);
    letter-spacing: 0;
    text-shadow: 0 0 2px rgba(255,255,255,.78), 0 0 5px rgba(123,221,255,.34);
}

/* Right cabinet rail: persistent privacy-blackout fader. */
#blackout-control {
    --blackout-tab-fill: var(--music-volume-tab-fill, var(--quick-menu-accent, #7082ff));
    position: absolute;
    /* Exact left fader geometry: board-derived start and 80% board height. */
    top: var(--music-volume-rail-top, 60px) !important;
    bottom: auto !important;
    right: -3px;
    height: var(--music-volume-rail-height, calc(80% - 48px)) !important;
    z-index: 10;
    width: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

/* Match the restrained green used by the left volume fader at full brightness. */
body[data-console-skin="neon-green"] #blackout-control {
    --blackout-tab-fill: #3f9a59;
}

body[data-console-skin="orange"] #blackout-control {
    --blackout-tab-fill: #c46718;
}

body[data-console-skin="ferrari"] #blackout-control {
    --blackout-tab-fill: color-mix(in srgb, #e10600 55%, #111 45%);
}

body[data-console-skin="ferrari"] #blackout-thumb {
    border-color: color-mix(in srgb, #e10600 50%, #111 50%);
    background: color-mix(in srgb, #e10600 55%, #111 45%);
}


#blackout-control::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 3px;
    background: #080808;
    box-shadow: inset 1px 0 1px rgba(255,255,255,.12), 1px 0 2px rgba(0,0,0,.68);
    z-index: 0;
    pointer-events: none;
}

#blackout-slider {
    position: absolute;
    top: 0;
    right: -32px;
    width: 55px;
    height: 100%;
    margin: 0;
    writing-mode: vertical-lr;
    direction: rtl;
    opacity: 0;
    cursor: ns-resize;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}

#blackout-thumb {
    position: absolute;
    top: var(--blackout-thumb-y, 0%);
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--blackout-tab-fill);
    border-radius: 3px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blackout-tab-fill) 88%, #fff 12%), var(--blackout-tab-fill));
    box-shadow: 0 1px 1px rgba(0,0,0,.55);
    pointer-events: none;
    z-index: 1;
}

#privacy-blackout {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    opacity: var(--privacy-blackout-opacity, 0);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
}

#blackout-wake-control {
    display: none;
    position: fixed;
    width: 55px;
    z-index: 1001;
}

#blackout-wake-control::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 3px;
    background: #080808;
    box-shadow: inset 1px 0 1px rgba(255,255,255,.12), 1px 0 2px rgba(0,0,0,.68);
}

#blackout-wake-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    writing-mode: vertical-lr;
    direction: rtl;
    opacity: 0;
    cursor: ns-resize;
    touch-action: none;
}

#blackout-wake-thumb {
    position: absolute;
    top: var(--blackout-wake-thumb-y, 100%);
    left: 22px;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    border: 1px solid #ff5353;
    border-radius: 3px;
    background: #8d1515;
    box-shadow: 0 0 5px rgba(255,0,0,.56);
    pointer-events: none;
    animation: blackoutWakePulse .75s ease-in-out infinite;
}

html.blackout-mode #privacy-blackout {
    visibility: visible;
    pointer-events: none;
    transition-delay: 0s;
}

html.blackout-mode #blackout-wake-control { display: block; }

@keyframes blackoutWakePulse {
    50% { background: #e32a2a; box-shadow: 0 0 11px rgba(255,0,0,.92); transform: translate(-50%, -50%) scale(1.1); }
}

html.blackout-mode:not(.blackout-total) #blackout-wake-thumb { animation: none; }

/* Desktop uses the right rail as a console-only fader. The wake rail lives
   outside the cabinet, so it remains available even when the console reaches
   zero opacity; the fixed starfield is never touched. */
@media (hover: hover) {
    #capture-zone {
        transition: opacity 120ms ease-out;
    }

    #capture-zone.desktop-console-fade-active {
        opacity: var(--desktop-console-opacity, 1);
    }

    html.desktop-console-fade #blackout-wake-control {
        display: block;
    }

    html.desktop-console-fade #blackout-wake-thumb {
        animation: none;
        border-color: var(--blackout-tab-fill, #7082ff);
        background: var(--blackout-tab-fill, #7082ff);
        box-shadow: 0 1px 1px rgba(0,0,0,.55);
    }

}

/* Bottom skin-color fader: it mirrors the compact horizontal cabinet control. */
#skin-control {
    --console-skin-thumb-x: 0%;
    position: relative;
    width: min(152px, 46%);
    height: 12px;
    margin: -2px auto 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#skin-control::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: #080808;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.68);
}

#console-skin-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}

/* Keep the compact visual fader, but give mobile thumbs a forgiving target
   without extending upward into the Japanese VFD engravings. */
@media (pointer: coarse) {
    #console-saturation-slider,
    #console-skin-slider {
        top: 0;
        right: -6px;
        bottom: -32px;
        left: -6px;
        width: auto;
        height: auto;
    }
}

#console-skin-thumb {
    position: absolute;
    top: 50%;
    left: var(--console-skin-thumb-x);
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    border: 1px solid color-mix(in srgb, var(--quick-menu-accent, #aab5d9) 50%, #111 50%);
    border-radius: 3px;
    background: color-mix(in srgb, var(--quick-menu-accent, #aab5d9) 55%, #111 45%);
    box-shadow: 0 1px 1px rgba(0,0,0,.55);
    pointer-events: none;
    z-index: 1;
}

body[data-console-skin="white"] #console-skin-thumb {
    border-color: #a9afb7;
    background: linear-gradient(135deg, #f0f2f4, #c7cbd1);
}

body[data-console-skin="orange"] #console-skin-thumb {
    border-color: #c46718;
    background: linear-gradient(135deg, #d37a25, #c46718);
}

#skin-control.skin-slider-settling #console-skin-thumb {
    transition: left 160ms ease-out, background 220ms ease, border-color 220ms ease;
}

/* Both lower faders share one compact row, reducing the cabinet chin. */
#bottom-control-row {
    width: min(320px, 82%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    position: static;
    margin: 0 auto;
    transform: none;
}
#bottom-control-row #saturation-control,
#bottom-control-row #skin-control {
    flex: 1 1 0;
    width: auto;
    max-width: 152px;
    margin: 0;
}

/* iPhone's manual web-app installation guidance. */
#ios-install-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 220;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 0, 5, 0.88);
}
#ios-install-modal.on { display: flex; }
#ios-install-modal-box {
    width: min(360px, 100%);
    padding: 26px 22px;
    border: 2px solid var(--accent);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
    font-family: 'Courier New', monospace;
    color: var(--text);
}
#ios-install-title { color: var(--accent); font-size: .92rem; letter-spacing: 2px; }
#ios-install-modal ol { margin: 18px 0 14px; padding-left: 22px; line-height: 1.65; font-size: .84rem; }
#ios-install-modal p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }

/* Phase 1/2 guess tiles have enough CRT face area for a slightly stronger
   glyph. Phase 3's compact wheel and score panels remain unchanged. */
#board-wrap:not(.phase3) #game-board .tile .tile-char {
    font-size: clamp(1.45rem, 6.1vw, 2.35rem) !important;
}

@media (max-width: 480px) and (pointer: coarse) {
    #board-wrap:not(.phase3) #game-board .tile .tile-char {
        font-size: clamp(1.78rem, 8.65vw, 2.6rem) !important;
    }
}

/* Keep the centered welcome layout through the transporter class change so the
   mascot begins its zoom-out from the same position where it was displayed. */
#welcome-screen.mascot-intro-overlay.on {
    align-items: stretch;
}

#welcome-screen.mascot-intro-overlay.on .mascot-intro-wrapper {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-content: stretch;
    justify-content: stretch;
    gap: 0;
    padding-top: 0;
}

#welcome-screen.mascot-intro-overlay.on .faq-welcome-top {
    align-self: start;
    margin: 0;
}

#welcome-screen.mascot-intro-overlay.on .mascot-orbit-stage {
    grid-row: 2;
    align-self: center;
    margin: 0;
}

#welcome-screen.mascot-intro-overlay.on .faq-welcome-bottom {
    grid-row: 3;
    align-self: end;
    margin: 0;
}

@media (max-width: 520px) {
    #welcome-screen.mascot-intro-overlay.on .mascot-intro-wrapper {
        /* Bias the hero upward to tighten the gap beneath the welcome banner. */
        grid-template-rows: minmax(0, 0.8fr) auto minmax(0, 1.2fr);
    }

    #welcome-screen.mascot-intro-overlay.on .faq-welcome-bottom {
        /* Keep the fixed date/puzzle footer below the buttons on phones. */
        margin-bottom: clamp(44px, 8dvh, 68px);
    }
}

/* Phase 3 victory marquee: keep MOJI-LOJI legible over the rainbow tiles. */
#board-wrap.phase3 #game-board.magic-complete-showcase .magic-rainbow-cell {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 800 !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-stroke-width: 0 !important;
    -webkit-text-stroke-color: transparent !important;
    text-shadow: none !important;
}

@media (min-width: 481px) and (max-height: 850px) and (pointer: coarse) {
    body {
        min-height: 100svh !important;
        min-height: 100dvh !important;
        padding-top: max(4px, env(safe-area-inset-top)) !important;
        padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
        gap: 4px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #capture-zone {
        gap: 3px !important;
        padding: 5px 6px 8px !important;
    }

    #slot-machine {
        padding: 5px 7px 6px !important;
    }

    #display-stack #category-subtitle-box,
    #display-stack #lcd-panel {
        height: 38px !important;
        min-height: 38px !important;
    }

    #display-stack #status-panel {
        height: 64px !important;
        min-height: 64px !important;
    }

    #board-wrap {
        height: calc(clamp(38px, 6.2dvh, 52px) * 3 + 12px) !important;
        margin-top: 3px !important;
    }

    #board-wrap.phase3 {
        height: auto !important;
    }

    .row {
        height: clamp(38px, 6.2dvh, 52px) !important;
    }

    #keyboard {
        gap: 3px !important;
    }

    .krow {
        gap: 3px !important;
    }

    .key {
        height: clamp(34px, 5.8dvh, 46px) !important;
        padding: 5px 0 !important;
    }
}

/* Keep the fixed date/puzzle footer clear of the welcome actions on short
   phone viewports. Browser chrome reduces the usable height outside fullscreen,
   so compress only the mascot and decorative spacing, not the action targets. */
@media (max-width: 520px) and (max-height: 820px) {
    #welcome-screen.mascot-intro-overlay {
        padding-top: max(8px, env(safe-area-inset-top));
    }

    .mascot-intro-wrapper {
        gap: clamp(6px, 1.2dvh, 10px);
        padding-top: clamp(4px, 1dvh, 8px);
    }

    .mascot-orbit-stage {
        margin-top: clamp(4px, 1.2dvh, 10px);
        margin-bottom: clamp(4px, 1.2dvh, 10px);
    }

    .mascot-orbit-stage .coming-soon-logo {
        max-height: clamp(180px, 38dvh, 290px);
    }

    .faq-welcome-bottom {
        margin-top: clamp(6px, 1.5dvh, 12px);
    }
}

/* Wide-but-short screens need the mascot to respond to height as well as width. */
@media (min-width: 521px) and (max-height: 1100px) {
    #welcome-screen.mascot-intro-overlay {
        padding-top: clamp(12px, 2.5vh, 24px);
    }

    .mascot-intro-wrapper {
        gap: clamp(7px, 1.4vh, 13px);
    }

    .mascot-orbit-stage .coming-soon-logo {
        max-height: clamp(190px, 39dvh, 390px);
    }

    .faq-welcome-bottom {
        gap: 8px;
        margin-top: clamp(10px, 2.5vh, 26px);
    }
}

/* Phase 1/2 interludes: keep the keyboard present but visually powered down. */
#capture-zone:has(#status-panel.emoji-pick-mode) #keyboard,
#capture-zone:has(#category-subtitle-box.joker-earned-flash) #keyboard,
#capture-zone:has(#status-panel .naughty-final-screen) #keyboard {
    pointer-events: none;
}

#capture-zone:has(#status-panel.emoji-pick-mode) #keyboard .key,
#capture-zone:has(#category-subtitle-box.joker-earned-flash) #keyboard .key,
#capture-zone:has(#status-panel .naughty-final-screen) #keyboard .key {
    color: transparent !important;
    text-shadow: none !important;
}

/* Mobile Phase 3 handoff: a slow no-fade vertical console reel. */
@media (max-width: 480px) {
    #capture-zone.phase3-mobile-crossfade #phase-transport-viewport {
        position: relative;
    }

    /* The rebuilt Phase 3 keyboard must be present but black, just like the
       Phase 1 boot gate. Never replay its inherited full-brightness shutdown. */
    #capture-zone.phase3-mobile-crossfade.phase3-powerdown #keyboard {
        visibility: visible !important;
        animation: none !important;
        filter: none !important;
    }

    #capture-zone.phase3-mobile-crossfade.phase3-powerdown #keyboard .key:not(.phase1-power-enter) {
        color: transparent !important;
        background: #050508 !important;
        border-color: rgba(255,255,255,.035) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 -8px 12px rgba(0,0,0,.56), 0 2px 0 rgba(0,0,0,.60) !important;
        filter: brightness(.06) saturate(0) !important;
    }

    @keyframes mobilePhase3ContentReturn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    #capture-zone.phase3-powerdown #category-banner,
    #capture-zone.phase3-powerdown #category-subtitle-box,
    #capture-zone.phase3-powerdown #console-info-bay,
    #capture-zone.phase3-powerdown #lcd-panel,
    #capture-zone.phase3-powerdown #score-bar,
    #capture-zone.phase3-powerdown #bottom-vfd-row,
    #capture-zone.phase3-powerdown #keyboard {
        animation: phase3ScreenPowerOff 260ms cubic-bezier(.4,0,.8,.2) both !important;
    }

    #capture-zone.phase3-powerdown #category-subtitle-box { animation-delay: 75ms !important; }
    #capture-zone.phase3-powerdown #console-info-bay { animation-delay: 150ms !important; }
    #capture-zone.phase3-powerdown #lcd-panel { animation-delay: 225ms !important; }
    #capture-zone.phase3-powerdown #score-bar { animation-delay: 300ms !important; }
    #capture-zone.phase3-powerdown #bottom-vfd-row { animation-delay: 450ms !important; }
    #capture-zone.phase3-powerdown #keyboard { animation-delay: 525ms !important; }

    @keyframes phase3ScreenPowerOff {
        0% { opacity: 1; filter: brightness(1) saturate(1); }
        58% { opacity: 1; filter: brightness(.42) saturate(.28); }
        100% { opacity: 1; filter: brightness(.08) saturate(0); }
    }

    #capture-zone.phase3-powerup #category-banner,
    #capture-zone.phase3-powerup #category-subtitle-box,
    #capture-zone.phase3-powerup #console-info-bay,
    #capture-zone.phase3-powerup #lcd-panel,
    #capture-zone.phase3-powerup #bottom-vfd-row {
        animation: phase3ScreenPowerOn 260ms cubic-bezier(.2,.8,.4,1) both !important;
    }

    #capture-zone.phase3-powerup #category-subtitle-box { animation-delay: 75ms !important; }
    #capture-zone.phase3-powerup #console-info-bay { animation-delay: 150ms !important; }
    #capture-zone.phase3-powerup #lcd-panel { animation-delay: 225ms !important; }
    #capture-zone.phase3-mobile-crossfade #game-board.phase3-mobile-board-poweroff {
        animation: phase3MobileBoardPowerOffDirect 700ms ease-in both;
    }

    #capture-zone.phase3-mobile-crossfade #game-board.phase3-mobile-board-dissolve {
        animation: phase3MobileBoardDissolveDirect 420ms ease-in both;
    }

    #capture-zone.phase3-mobile-crossfade #game-board.phase3-mobile-board-in {
        animation: phase3MobileBoardInDirect 900ms cubic-bezier(.22,.61,.36,1) both;
    }

    @keyframes phase3MobileBoardPowerOffDirect {
        from { opacity: 1; filter: brightness(1) saturate(1); }
        to { opacity: 1; filter: brightness(.08) saturate(0); }
    }

    @keyframes phase3MobileBoardDissolveDirect {
        from { opacity: 1; filter: brightness(.08) saturate(0); }
        to { opacity: 0; filter: brightness(.08) saturate(0); }
    }

    @keyframes phase3MobileBoardInDirect {
        from { opacity: 0; filter: brightness(.08) saturate(0); }
        to { opacity: 1; filter: brightness(.08) saturate(0); }
    }
    #capture-zone.phase3-powerup #bottom-vfd-row { animation-delay: 450ms !important; }

    /* The keyboard has its own per-key wake. Hold it fully powered off after
       reel-in so its labels cannot light once, disappear, then light again. */
    #keyboard.phase3-keyboard-off {
        filter: brightness(.08) saturate(0) !important;
    }

    /* Once the per-key wake begins, replace the removed parent blackout with
       an equivalent dark CRT face on every key that has not awakened yet. */
    #keyboard.phase3-keyboard.keyboard-dead .key:not(.key-wake-lit):not(.key-wake-awake) {
        color: transparent !important;
        opacity: 1 !important;
        filter: none !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.34)),
            #050508 !important;
        border-color: rgba(255,255,255,.035) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            inset 0 -8px 12px rgba(0,0,0,.56),
            0 2px 0 rgba(0,0,0,.60) !important;
        text-shadow: none !important;
    }

    @keyframes phase3ScreenPowerOn {
        0% { opacity: 1; filter: brightness(.08) saturate(0); }
        42% { opacity: 1; filter: brightness(.48) saturate(.38); }
        100% { opacity: 1; filter: brightness(1) saturate(1); }
    }

    /* Phase 3 clue tube only: point -> scan line -> full CRT. The cassette
       housing and speakers retain their geometry throughout. */
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-banner {
        transform-origin: center center !important;
        animation: phase3ClueCrtTubeOn 620ms cubic-bezier(.16,1,.3,1) 170ms both !important;
    }

    @keyframes phase3ClueCrtTubeOn {
        0% { opacity: .18; transform: scaleX(.018) scaleY(.018); filter: brightness(2) saturate(0); }
        28% { opacity: .92; transform: scaleX(.08) scaleY(.025); filter: brightness(2.2) saturate(.12); }
        52% { opacity: 1; transform: scaleX(1) scaleY(.028); filter: brightness(1.85) saturate(.22); }
        78% { opacity: 1; transform: scaleX(1) scaleY(1.035); filter: brightness(1.16) saturate(.78); }
        100% { opacity: 1; transform: scaleX(1) scaleY(1); filter: brightness(1) saturate(1); }
    }

    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-label,
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-word,
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-line2 .clue-sep,
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-emoji,
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-answer,
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-dict-hint {
        animation: phase3ClueElementTypeOn 360ms steps(12, end) both !important;
    }

    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-label { animation-delay: 720ms !important; }
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-word { animation-delay: 800ms !important; }
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-line2 .clue-sep:nth-of-type(2) { animation-delay: 880ms !important; }
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-emoji { animation-delay: 960ms !important; }
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-line2 .clue-sep:nth-of-type(4) { animation-delay: 1040ms !important; }
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-answer { animation-delay: 1120ms !important; }
    #capture-zone.phase3-powerup #console-info-bay.phase3-active #clue-dict-hint { animation-delay: 1200ms !important; }

    @keyframes phase3ClueElementTypeOn {
        0% { opacity: 0; clip-path: inset(0 100% 0 0); }
        100% { opacity: 1; clip-path: inset(0 0 0 0); }
    }

    #capture-zone.phase3-signal-out,
    #capture-zone.phase3-signal-in {
        pointer-events: none;
        transform-origin: center center;
        backface-visibility: hidden;
        will-change: transform, opacity;
    }

    /* Keep Phase 3's rebuilt descendants static while the single promoted
       console layer reveals. This prevents dozens of key/CRT transitions from
       competing for the same mobile frame budget. */
    #capture-zone.phase3-mobile-transition *,
    #capture-zone.phase3-mobile-transition *::before,
    #capture-zone.phase3-mobile-transition *::after {
        transition: none !important;
        animation-play-state: paused !important;
    }

    #capture-zone.phase3-signal-out {
        animation: phase3MobileConsoleClear 900ms cubic-bezier(.55,.08,.68,.53) both !important;
    }

    #capture-zone.phase3-signal-in {
        animation: phase3MobileConsoleReveal 1100ms cubic-bezier(.22,.61,.36,1) both !important;
    }

    /* Phase 3 is rebuilt while descendant animations are paused. Keep its newly
       created screens at the completed power-off state throughout the reel-in;
       the subsequent phase3-powerup sequence wakes them in order. */
    #capture-zone.phase3-signal-in #category-banner,
    #capture-zone.phase3-signal-in #category-subtitle-box,
    #capture-zone.phase3-signal-in #console-info-bay,
    #capture-zone.phase3-signal-in #lcd-panel,
    #capture-zone.phase3-signal-in #game-board,
    #capture-zone.phase3-signal-in #bottom-vfd-row,
    #capture-zone.phase3-signal-in #keyboard {
        animation: none !important;
        filter: brightness(.08) saturate(0) !important;
    }

    /* Score VFD glass is part of the fixed console hardware. Cancel the stale
       power-down animation on the rebuilt bar, but do not rematerialize/fade
       its housing; score-prewake hides only its text until typing begins. */
    #capture-zone.phase3-signal-in #score-bar {
        animation: none !important;
        filter: none !important;
    }

    @keyframes phase3MobileConsoleClear {
        0% { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(0, -105dvh, 0); }
    }

    @keyframes phase3MobileConsoleReveal {
        0% { transform: translate3d(0, 105dvh, 0); }
        100% { transform: translate3d(0, 0, 0); }
    }
}

/* Phase 3 hint is a compact score-style VFD, not a full-width action button. */
#bottom-vfd-row {
    width: 100%;
    max-width: 420px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
}

#bottom-vfd-row:has(#hint-offer-inline[style*="display: none"]) {
    display: none;
}

@media (max-width: 480px) {
    #capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #bottom-vfd-row {
        display: flex;
    }
}

.bottom-vfd-engraving {
    flex: 1 1 0;
    min-width: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(1.05rem, 4.4vw, 1.38rem);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.bottom-vfd-engraving .engraving-letter {
    display: inline-block;
    margin-inline: 0.08em;
    color: #26262a;
    -webkit-text-fill-color: #26262a;
    opacity: 0.86;
    text-shadow: none;
    filter: none;
    animation: mojiTitleLetterGlow 3.2s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.17s);
    animation-fill-mode: both;
    will-change: color, opacity;
}

.bottom-vfd-engraving-left {
    text-align: center;
}

.bottom-vfd-engraving-right {
    text-align: center;
}

body[data-console-skin="white"] .bottom-vfd-engraving .engraving-letter {
    animation-name: engravingLetterGlowWhite;
}

@keyframes engravingLetterGlowWhite {
    0%, 12%, 100% {
        color: #747a82;
        -webkit-text-fill-color: #747a82;
        opacity: 0.9;
    }
    26% {
        color: #3f444b;
        -webkit-text-fill-color: #3f444b;
        opacity: 0.96;
    }
    38% {
        color: #15181c;
        -webkit-text-fill-color: #15181c;
        opacity: 1;
    }
    58% {
        color: #747a82;
        -webkit-text-fill-color: #747a82;
        opacity: 0.92;
    }
}

#capture-zone.stats-mode #bottom-vfd-row {
    display: none !important;
}

#capture-zone.stats-mode #bottom-control-row {
    display: none !important;
}

/* The lower VFD is part of the Phase 1/2 cabinet on every viewport. */
#capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #bottom-vfd-row {
    display: flex !important;
}

#capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #hint-offer-inline {
    display: flex !important;
    visibility: visible !important;
    pointer-events: none !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
}

#capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #hint-offer-inline > * {
    visibility: hidden !important;
}

#capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #hint-offer-inline::after {
    content: attr(data-idle-message);
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    padding: 0 7px;
    color: #eaf9ff;
    background: transparent;
    font-family: 'Courier New', monospace;
    font-size: clamp(0.6rem, 2.35vw, 0.76rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-shadow:
        0 0 2px rgba(255,255,255,0.78),
        0 0 5px rgba(123,221,255,0.34);
    opacity: 1;
}

#capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #hint-offer-inline.idle-message-typing::after {
    animation: bottomVfdWelcomeTypeOn 820ms steps(22, end) both;
}

@keyframes bottomVfdWelcomeTypeOn {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* On phones, mirror desktop geometry: the header sits 3px beyond the tiles on
   each side while remaining inset from the tile-board cabinet edge. */
@media (max-width: 480px) {
    #capture-zone:not(.stats-mode) #category-banner {
        width: calc(100% - 6px) !important;
        max-width: none !important;
    }
}

#capture-zone #hint-offer-inline {
    width: calc(50% - 5px) !important;
    max-width: 205px !important;
    margin-inline: 0 !important;
    flex: 0 1 205px;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(160, 224, 255, 0.18) !important;
    border-radius: 7px !important;
    background:
        radial-gradient(ellipse at 50% 56%, rgba(255, 42, 58, 0.16) 0%, rgba(120, 8, 28, 0.09) 34%, transparent 66%),
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.016) 18%, rgba(0,0,0,0.36) 100%),
        repeating-linear-gradient(90deg, rgba(135, 218, 255, 0.04) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #05090d 0%, #010305 52%, #000102 100%) !important;
    color: #eaf9ff !important;
    font-family: 'Courier New', monospace !important;
    font-size: clamp(0.68rem, 2.6vw, 0.82rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    justify-content: space-between !important;
    gap: 8px !important;
    white-space: nowrap !important;
    text-shadow:
        0 0 2px rgba(255,255,255,0.95),
        0 0 7px rgba(123, 221, 255, 0.78),
        0 0 16px rgba(58, 180, 255, 0.36),
        0 0 24px rgba(255, 35, 62, 0.16),
        0 1px 0 rgba(0,0,0,0.90) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.90),
        inset 0 -1px 0 rgba(255,255,255,0.055),
        inset 0 0 16px rgba(74, 192, 255, 0.08),
        inset 0 0 30px rgba(255, 28, 56, 0.10),
        0 1px 0 rgba(255,255,255,0.055),
        0 0 12px rgba(80, 188, 255, 0.08) !important;
    position: relative;
    overflow: hidden !important;
}

#capture-zone #hint-offer-inline span {
    color: #eaf9ff !important;
    position: relative;
    z-index: 1;
    mix-blend-mode: screen;
}

#capture-zone #hint-offer-inline::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 21%, transparent 76%, rgba(255,255,255,0.035)),
        linear-gradient(90deg, rgba(255,255,255,0.045), transparent 14%, transparent 86%, rgba(0,0,0,0.28));
    mix-blend-mode: screen;
    opacity: 0.56;
}

#capture-zone #hint-offer-inline:not(.typing-banner)::after {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    top: 5px;
    height: 28%;
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
    opacity: 0.48;
}

#capture-zone #hint-offer-inline .hint-vfd-label {
    font-size: 0.68rem !important;
    letter-spacing: 1px !important;
}

#capture-zone #hint-offer-inline .hint-vfd-amt {
    margin-left: auto;
    font-size: clamp(0.72rem, 2.75vw, 0.92rem) !important;
}

#capture-zone #hint-offer-inline.hint-prewake .hint-vfd-label,
#capture-zone #hint-offer-inline.hint-prewake .hint-vfd-amt {
    opacity: 0 !important;
}

#capture-zone #hint-offer-inline.hint-type-on .hint-vfd-label,
#capture-zone #hint-offer-inline.hint-type-on .hint-vfd-amt {
    display: inline-flex !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    max-width: 0;
    clip-path: inset(0 100% 0 0);
    opacity: 1 !important;
    animation: scoreTypeOnWake 720ms steps(16, end) both !important;
}

#capture-zone #hint-offer-inline.hint-type-on .hint-vfd-amt {
    animation-delay: 120ms !important;
}

#capture-zone #hint-offer-inline:active {
    transform: none !important;
    filter: brightness(1.22) !important;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.90),
        inset 0 -1px 0 rgba(255,255,255,0.055),
        inset 0 0 16px rgba(74, 192, 255, 0.08),
        inset 0 0 30px rgba(255, 28, 56, 0.10),
        0 1px 0 rgba(255,255,255,0.055),
        0 0 12px rgba(80, 188, 255, 0.08) !important;
}

/* Phase 1/2 event VFD: reuse the reserved Phase 3 hint display while the
   keyboard is powered down, instead of writing across the keyboard itself. */
#capture-zone:has(#category-subtitle-box.joker-earned-flash) #hint-offer-inline,
#capture-zone:has(#status-panel .naughty-final-screen) #hint-offer-inline {
    display: flex !important;
    visibility: visible !important;
    pointer-events: none !important;
    justify-content: center !important;
}

#capture-zone:has(#category-subtitle-box.joker-earned-flash) #bottom-vfd-row,
#capture-zone:has(#status-panel .naughty-final-screen) #bottom-vfd-row {
    display: flex !important;
}

#capture-zone:has(#category-subtitle-box.joker-earned-flash) #hint-offer-inline > *,
#capture-zone:has(#status-panel .naughty-final-screen) #hint-offer-inline > * {
    opacity: 0 !important;
}

#capture-zone:has(#category-subtitle-box.joker-earned-flash) #hint-offer-inline::after,
#capture-zone:has(#status-panel .naughty-final-screen) #hint-offer-inline::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    color: #eaf9ff;
    background: transparent;
    border: 0;
    border-radius: inherit;
    font-family: 'Courier New', monospace;
    font-size: clamp(0.72rem, 2.75vw, 0.92rem);
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow:
        0 0 2px rgba(255,255,255,0.95),
        0 0 7px rgba(123,221,255,0.78),
        0 0 16px rgba(58,180,255,0.36);
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    animation: phaseEventVfdTypeOn 620ms steps(14, end) both !important;
}

#capture-zone:has(#category-subtitle-box.joker-earned-flash) #hint-offer-inline::after {
    content: 'JOKER FOUND';
}

#capture-zone:has(#status-panel .naughty-final-screen) #hint-offer-inline::after {
    content: 'BONUS ADDED';
}

/* Stable lower-VFD state while the source CRT is rebuilt mid-celebration. */
#capture-zone #hint-offer-inline.event-message-joker::after {
    content: 'JOKER FOUND' !important;
}

#capture-zone #hint-offer-inline.event-message-bonus::after {
    content: 'BONUS ADDED' !important;
}

#capture-zone #hint-offer-inline.event-message-joker::after,
#capture-zone #hint-offer-inline.event-message-bonus::after {
    clip-path: inset(0 100% 0 0);
    animation: phaseEventVfdTypeOn 620ms steps(14, end) both !important;
}

@keyframes phaseEventVfdTypeOn {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* Every Phase 3 tile keeps the same rounded CRT housing; row heights differ,
   but tile corner geometry does not. */
#board-wrap.phase3 #game-board.phase3-wheel-board .tile {
    border-radius: 8px !important;
}

/* JavaScript applies a uniform height-aware zoom only on coarse-pointer tablet
   viewports. Keep the fitted cabinet centered without touching its internals. */
#capture-zone.tablet-viewport-fit {
    margin-inline: auto;
}

/* The cabinet has one hard maximum everywhere: narrower phones use their
   available width, while tablets and desktop never stretch it past 420px. */
#capture-zone {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
}

/* Stats uses a different child layout than the game board. Keep that layout
   on the same compact cabinet width at tablet sizes instead of allowing its
   full-width panels to expand with the viewport. */
#capture-zone.stats-mode {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    align-self: center !important;
}

#capture-zone.stats-mode #stats-console,
#capture-zone.stats-mode #game-title,
#capture-zone.stats-mode #stats-proof-meta {
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
}

/* The badge used to be deliberately offset past the console edge. Keep it
   inside the capped stats panel so tablets cannot make the stats layout look
   wider or create a stray overflow edge. */
#capture-zone.stats-mode #stats-badge {
    right: clamp(6px, 1.6vw, 10px) !important;
    max-width: calc(100% - 12px) !important;
}

#capture-zone.stats-mode #stats-badge .stats-badge-button {
    width: min(82px, 16vw) !important;
    height: min(82px, 16vw) !important;
    max-width: 82px !important;
    max-height: 82px !important;
}

/* Music metadata occupies the lower main LCD and must not be replaced by the
   normal message typewriter while it is being shown. */
#lcd-panel.music-theme-display #msg {
    animation: none !important;
    clip-path: none !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    opacity: 1 !important;
}

/* Keep the individual bars quiet too; their pulse must not begin until the
   console's wake/transport sequence has completely finished. */
#capture-zone.console-teleport-in #category-banner #quick-menu-btn span,
#capture-zone.console-postmoon-lock #category-banner #quick-menu-btn span,
#capture-zone.console-transport-prep #category-banner #quick-menu-btn span,
#capture-zone.console-transport-shimmer #category-banner #quick-menu-btn span,
#capture-zone.console-decor-wake #category-banner #quick-menu-btn span,
#capture-zone.console-letter-wake #category-banner #quick-menu-btn span,
#capture-zone.console-typewriter-hold #category-banner #quick-menu-btn span,
#capture-zone.phase1-power-gate #category-banner #quick-menu-btn span,
#capture-zone.phase1-power-waking #category-banner #quick-menu-btn span,
#capture-zone.phase1-presenting #category-banner #quick-menu-btn span,
#capture-zone.phase3-header-transport #category-banner #quick-menu-btn span,
#capture-zone.phase3-header-glow-up #category-banner #quick-menu-btn span,
#capture-zone.phase3-header-beam-out #category-banner #quick-menu-btn span,
#capture-zone.phase3-header-beam-in #category-banner #quick-menu-btn span,
#capture-zone.phase3-header-holding #category-banner #quick-menu-btn span,
#capture-zone.phase3-powerdown #category-banner #quick-menu-btn span,
#capture-zone.phase3-powerup #category-banner #quick-menu-btn span,
body.intro-active #capture-zone #category-banner .moji-title #quick-menu-btn span {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
}

#lcd-panel.music-theme-display #msg {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
#lcd-panel.music-theme-display #msg .music-theme-title,
#lcd-panel.music-theme-display #msg .music-theme-artist {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
}
#lcd-panel.music-theme-display #msg .music-theme-title {
    font-size: .92em !important;
}
#lcd-panel.music-theme-display #msg .music-theme-artist {
    font-size: .72em !important;
    opacity: .9;
}

/* Music metadata is a bright skin-colored station ident, distinct from game
   prompts while it is being held in the lower LCD. */
#lcd-panel.music-theme-display #msg {
    color: #7eb8ff !important;
    -webkit-text-fill-color: #7eb8ff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 3px currentColor, 0 0 9px currentColor, 0 0 18px rgba(126,184,255,.58) !important;
}
body[data-console-skin="white"] #lcd-panel.music-theme-display #msg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 0 3px #fff, 0 0 10px #b9eaff, 0 0 20px rgba(185,234,255,.72) !important;
}
body[data-console-skin="ferrari"] #lcd-panel.music-theme-display #msg {
    color: #ff927f !important;
    -webkit-text-fill-color: #ff927f !important;
    text-shadow: 0 0 3px #ff927f, 0 0 10px #e10600, 0 0 20px rgba(225,6,0,.65) !important;
}
body[data-console-skin="orange"] #lcd-panel.music-theme-display #msg {
    color: #ffe0a3 !important;
    -webkit-text-fill-color: #ffe0a3 !important;
    text-shadow: 0 0 3px #ffe0a3, 0 0 10px #ff9b24, 0 0 20px rgba(255,155,36,.68) !important;
}
body[data-console-skin="rose-gold"] #lcd-panel.music-theme-display #msg {
    color: #ffd1d8 !important;
    -webkit-text-fill-color: #ffd1d8 !important;
    text-shadow: 0 0 3px #ffd1d8, 0 0 10px #e8ada5, 0 0 20px rgba(232,173,165,.72) !important;
}
body[data-console-skin="neon-green"] #lcd-panel.music-theme-display #msg {
    color: #a6ffb8 !important;
    -webkit-text-fill-color: #a6ffb8 !important;
    text-shadow: 0 0 3px #a6ffb8, 0 0 10px #62ff79, 0 0 20px rgba(98,255,121,.72) !important;
}

/* Mobile performance test: backdrop filtering forces expensive off-screen
   compositing on iOS and Android. Disable only that effect on touch devices. */
@media (pointer: coarse) {
    *, *::before, *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Header-anchored Phase 1/2 -> Phase 3 transporter. The cabinet frame and
   MOJI-LOJI plate remain fixed; only the internal console assembly travels. */
#capture-zone.phase3-header-transport {
    overflow: hidden !important;
    isolation: isolate;
}

#capture-zone.phase3-header-transport::before,
#capture-zone.phase3-header-transport::after {
    opacity: 0 !important;
}

#phase-transport-viewport {
    width: 100%;
    overflow: visible;
}

#phase-transport-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: visible;
}

#phase-transport-content.transport-shell {
    position: relative;
    isolation: isolate;
}

/* A deliberately restrained containment outline makes the moving shell read
   as one portable unit, rather than as a duplicate cabinet frame. */
#phase-transport-content.transport-shell::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 999;
    inset: 2px;
    border: 1px solid rgba(178,239,255,0);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    box-shadow: inset 0 0 0 rgba(170,230,255,0), 0 0 0 rgba(170,230,255,0);
}

#capture-zone.phase3-header-transport #phase-transport-viewport {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

#capture-zone.phase3-header-transport #category-banner {
    z-index: 40 !important;
    overflow: visible !important;
}

/* A stationary light spill makes the fixed header feel active while the
   transport shell passes behind it. Unlike the former connector, it never
   forms a line or expands from the centre. */
#capture-zone.phase3-header-transport #category-banner {
    box-shadow:
        0 8px 16px -4px rgba(232,253,255,1),
        0 20px 38px -8px rgba(98,207,255,1),
        0 34px 58px -16px rgba(68,137,255,.76) !important;
}

/* Continue the fixed lower-header dock glow after its transport parent is
   released; this is distinct from the beam moving with the console. */
#capture-zone.phase3-header-dock-fade #category-banner {
    animation: headerTransportDockFade 2000ms ease-out both !important;
}

/* The aperture wakes sharply when the player commits to Phase 3, then the
   banner's normal two-second transition carries the glow gently away later. */
#capture-zone.phase3-header-transport.phase3-header-glow-up #category-banner {
    transition-duration: 180ms !important;
}

/* The old mobile handoff animated whole housings. During the header transport
   only the actual screen faces power down, so no chassis appears to shrink. */
@media (max-width: 480px) {
    #capture-zone.phase3-header-transport.phase3-powerdown #category-subtitle-box,
    #capture-zone.phase3-header-transport.phase3-powerdown #console-info-bay,
    #capture-zone.phase3-header-transport.phase3-powerdown #lcd-panel,
    #capture-zone.phase3-header-transport.phase3-powerdown #score-bar,
    #capture-zone.phase3-header-transport.phase3-powerdown #game-board,
    #capture-zone.phase3-header-transport.phase3-powerdown #bottom-vfd-row,
    #capture-zone.phase3-header-transport.phase3-powerdown #keyboard {
        animation: none !important;
    }
}

#capture-zone.phase3-header-transport.phase3-powerdown #category-subtitle-box,
#capture-zone.phase3-header-transport.phase3-powerdown #console-info-bay,
#capture-zone.phase3-header-transport.phase3-powerdown #lcd-panel,
#capture-zone.phase3-header-transport.phase3-powerdown #score-bar,
#capture-zone.phase3-header-transport.phase3-powerdown #game-board .tile,
#capture-zone.phase3-header-transport.phase3-powerdown #keyboard .key,
#capture-zone.phase3-header-transport.phase3-powerdown #hint-offer-inline {
    animation: headerTransportPowerDown 620ms cubic-bezier(.4,0,.8,.2) both !important;
}

#capture-zone.phase3-header-transport.phase3-powerdown #phase-transport-content.transport-shell {
    animation: headerTransportShellGather 700ms cubic-bezier(.2,.8,.35,1) both;
}

#capture-zone.phase3-header-transport.phase3-powerdown #phase-transport-content.transport-shell::after {
    animation: headerTransportEmbrace 700ms cubic-bezier(.2,.8,.35,1) both;
}

#capture-zone.phase3-header-transport.phase3-header-beam-out #phase-transport-content {
    will-change: transform;
    animation: headerTransportSwallow 900ms cubic-bezier(.55,.08,.68,.53) both !important;
}

#capture-zone.phase3-header-transport.phase3-header-beam-out #phase-transport-content.transport-shell::after {
    animation: headerTransportEmbraceCarry 900ms cubic-bezier(.55,.08,.68,.53) both;
}

/* Start the Phase 1/2 ghost beam with the shutdown, then carry it continuously
   into the header instead of beginning a separate visual phase later. */
#capture-zone.phase3-header-transport.phase3-header-depart-beam #phase-transport-content.transport-shell::after {
    inset: -5px;
    border: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent 0%, rgba(91,191,255,.16) 13%, rgba(194,241,255,.42) 38%, rgba(248,255,255,.68) 50%, rgba(194,241,255,.42) 62%, rgba(91,191,255,.16) 87%, transparent 100%),
        linear-gradient(180deg, rgba(140,220,255,.05), rgba(106,202,255,.30) 38%, rgba(238,253,255,.58) 50%, rgba(106,202,255,.30) 62%, rgba(140,220,255,.05));
    mix-blend-mode: screen;
    animation: headerTransportDepartBeam 1600ms cubic-bezier(.55,.08,.68,.53) both;
}

/* The Phase 3 DOM is rebuilt while it is above the fixed header. Keep that
   off-screen position through the class handoff so there is no one-frame jump
   to the final cabinet position before the return beam starts. */
#capture-zone.phase3-header-transport.phase3-header-holding #phase-transport-content {
    will-change: transform;
    transform: translate3d(0, -100%, 0);
}

#capture-zone.phase3-header-transport.phase3-header-beam-in #phase-transport-content {
    will-change: transform;
    animation: headerTransportRelease 1100ms cubic-bezier(.22,.61,.36,1) both !important;
}

#capture-zone.phase3-header-transport.phase3-header-beam-in #phase-transport-content.transport-shell::after {
    inset: -5px;
    border: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent 0%, rgba(91,191,255,.16) 13%, rgba(194,241,255,.42) 38%, rgba(248,255,255,.68) 50%, rgba(194,241,255,.42) 62%, rgba(91,191,255,.16) 87%, transparent 100%),
        linear-gradient(180deg, rgba(140,220,255,.05), rgba(106,202,255,.30) 38%, rgba(238,253,255,.58) 50%, rgba(106,202,255,.30) 62%, rgba(140,220,255,.05));
    mix-blend-mode: screen;
    animation: headerTransportReturnBeam 1100ms cubic-bezier(.22,.61,.36,1) both;
}

/* Keep the arriving beam alive for its full fade after the movement class is
   released, so the lower-header light never cuts off on a single frame. */
#capture-zone.phase3-header-return-fade #phase-transport-content.transport-shell::after {
    inset: -5px;
    border: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent 0%, rgba(91,191,255,.16) 13%, rgba(194,241,255,.42) 38%, rgba(248,255,255,.68) 50%, rgba(194,241,255,.42) 62%, rgba(91,191,255,.16) 87%, transparent 100%),
        linear-gradient(180deg, rgba(140,220,255,.05), rgba(106,202,255,.30) 38%, rgba(238,253,255,.58) 50%, rgba(106,202,255,.30) 62%, rgba(140,220,255,.05));
    mix-blend-mode: screen;
    animation: headerTransportReturnBeam 1800ms cubic-bezier(.22,.61,.36,1) both;
}

#capture-zone.phase3-header-return-fade.phase3-header-beam-in #phase-transport-content.transport-shell::after {
    animation: headerTransportReturnBeam 1800ms cubic-bezier(.22,.61,.36,1) both;
}

/* Mobile keeps the new header-anchored slide, but not the costly blue sheet
   drawn over the travelling console. The fixed lower-header glow remains. */
@media (max-width: 480px) {
    /* Mobile keeps only the physical shutdown and slide sequence. */
    body.mobile-ui #capture-zone.phase3-header-transport #category-banner,
    body.android-app #capture-zone.phase3-header-transport #category-banner {
        box-shadow: none !important;
        animation: none !important;
    }

    body.mobile-ui #capture-zone.phase3-header-transport #phase-transport-content.transport-shell::after,
    body.android-app #capture-zone.phase3-header-transport #phase-transport-content.transport-shell::after,
    body.mobile-ui #capture-zone.phase3-header-return-fade #phase-transport-content.transport-shell::after,
    body.android-app #capture-zone.phase3-header-return-fade #phase-transport-content.transport-shell::after {
        display: none !important;
        animation: none !important;
        background: none !important;
        box-shadow: none !important;
    }
}

/* The fixed dock and the travelling beam share one return/fade cadence. */
#capture-zone.phase3-header-transport.phase3-header-beam-in #category-banner {
    animation: headerTransportDockBeam 1100ms cubic-bezier(.22,.61,.36,1) both !important;
}

#capture-zone.phase3-header-transport.phase3-header-beam-in #category-subtitle-box,
#capture-zone.phase3-header-transport.phase3-header-beam-in #console-info-bay,
#capture-zone.phase3-header-transport.phase3-header-beam-in #lcd-panel,
#capture-zone.phase3-header-transport.phase3-header-beam-in #score-bar,
#capture-zone.phase3-header-transport.phase3-header-beam-in #game-board .tile,
#capture-zone.phase3-header-transport.phase3-header-beam-in #keyboard .key,
#capture-zone.phase3-header-transport.phase3-header-beam-in #hint-offer-inline {
    filter: brightness(.08) saturate(0);
}

/* Keep the badge bright while the old and rebuilt hardware is powered down. */
#capture-zone.phase3-header-transport.phase3-powerdown #category-banner,
#capture-zone.phase3-header-transport.phase3-powerup #category-banner {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
}

#capture-zone.phase3-header-transport.phase3-powerdown.phase3-header-beam-in #category-banner {
    animation: headerTransportDockBeam 1100ms cubic-bezier(.22,.61,.36,1) both !important;
}

/* The header is the stationary dock. Once the travelling internals return,
   do not let the generic mobile screen power-up pulse the header a second
   time beneath the deliberately fading transport glow. */
@media (max-width: 480px) {
    #capture-zone.phase3-powerup #category-banner {
        animation: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /* This is deliberately more specific than the power-up guard above: the
       stationary lower-header glow must remain alive long enough to dissolve
       after the transport shell has been released. */
    #capture-zone.phase3-powerup.phase3-header-dock-fade #category-banner {
        animation: headerTransportDockFade 2000ms ease-out both !important;
    }
}

@keyframes headerTransportSwallow {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -100%, 0); }
}

@keyframes headerTransportPowerDown {
    0% { filter: brightness(1) saturate(1); }
    100% { filter: brightness(.08) saturate(0); }
}

@keyframes headerTransportRelease {
    from { transform: translate3d(0, calc(-1 * var(--header-transport-distance, 100%)), 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes headerTransportShellGather {
    from { transform: translateZ(0); }
    to { transform: translateZ(0); }
}

@keyframes headerTransportEmbrace {
    0% { opacity: 0; transform: scale(1.025); border-color: rgba(178,239,255,0); box-shadow: inset 0 0 0 rgba(170,230,255,0), 0 0 0 rgba(170,230,255,0); }
    66% { opacity: .88; transform: scale(1.002); border-color: rgba(205,248,255,.88); box-shadow: inset 0 0 14px rgba(136,220,255,.24), 0 0 16px rgba(125,208,255,.38); }
    100% { opacity: .72; transform: scale(1); border-color: rgba(184,239,255,.64); box-shadow: inset 0 0 11px rgba(136,220,255,.18), 0 0 12px rgba(125,208,255,.28); }
}

@keyframes headerTransportEmbraceCarry {
    0% { opacity: .72; border-color: rgba(184,239,255,.64); box-shadow: inset 0 0 11px rgba(136,220,255,.18), 0 0 12px rgba(125,208,255,.28); }
    100% { opacity: .94; border-color: rgba(236,254,255,.96); box-shadow: inset 0 0 18px rgba(136,220,255,.34), 0 0 24px rgba(125,208,255,.58); }
}

@keyframes headerTransportReleaseOutline {
    0% { opacity: 1; transform: scale(.985); border-color: rgba(244,254,255,1); box-shadow: inset 0 0 22px rgba(157,229,255,.48), 0 0 8px rgba(255,255,255,.96), 0 0 32px rgba(102,201,255,.78); }
    64% { opacity: .58; transform: scale(1); border-color: rgba(196,244,255,.62); box-shadow: inset 0 0 12px rgba(136,220,255,.20), 0 0 14px rgba(125,208,255,.34); }
    100% { opacity: 0; transform: scale(1); border-color: rgba(178,239,255,0); box-shadow: inset 0 0 0 rgba(170,230,255,0), 0 0 0 rgba(170,230,255,0); }
}

@keyframes headerTransportReturnBeam {
    0% {
        opacity: .18;
        transform: scale(1.018);
        filter: brightness(1.5) saturate(1.18) blur(.2px);
        box-shadow: 0 0 18px rgba(157,229,255,.38), 0 0 42px rgba(102,201,255,.52);
    }
    18% {
        opacity: .96;
        transform: scale(1.008);
        filter: brightness(1.35) saturate(1.12);
        box-shadow: 0 0 24px rgba(198,244,255,.58), 0 0 56px rgba(85,188,255,.74);
    }
    66% {
        opacity: .72;
        transform: scale(1);
        filter: brightness(1.08) saturate(1.04);
        box-shadow: 0 0 16px rgba(136,220,255,.30), 0 0 34px rgba(78,157,255,.42);
    }
    100% {
        opacity: 0;
        transform: scale(1);
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 rgba(136,220,255,0), 0 0 0 rgba(78,157,255,0);
    }
}

@keyframes headerTransportDepartBeam {
    0% {
        opacity: .28;
        transform: scale(1.005);
        filter: brightness(1.08) saturate(1.04);
        box-shadow: 0 0 12px rgba(136,220,255,.28), 0 0 28px rgba(78,157,255,.38);
    }
    24% {
        opacity: .96;
        transform: scale(1.014);
        filter: brightness(1.4) saturate(1.16);
        box-shadow: 0 0 24px rgba(198,244,255,.58), 0 0 56px rgba(85,188,255,.74);
    }
    72% {
        opacity: .68;
        transform: scale(1.006);
        filter: brightness(1.16) saturate(1.08);
        box-shadow: 0 0 16px rgba(136,220,255,.32), 0 0 36px rgba(78,157,255,.46);
    }
    100% {
        opacity: 0;
        transform: scale(1);
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 rgba(136,220,255,0), 0 0 0 rgba(78,157,255,0);
    }
}

@keyframes headerTransportDockBeam {
    /* This is the stationary glow under the title, not the moving console
       beam. Hold it steady during arrival so its separate dock-fade can begin
       from the exact same brightness when the console settles. */
    0%, 18%, 100% {
        box-shadow:
            0 8px 16px -4px rgba(232,253,255,1),
            0 20px 38px -8px rgba(98,207,255,1),
            0 34px 58px -16px rgba(68,137,255,.76);
    }
}

@keyframes headerTransportDockFade {
    0% {
        box-shadow:
            0 8px 16px -4px rgba(232,253,255,1),
            0 20px 38px -8px rgba(98,207,255,1),
            0 34px 58px -16px rgba(68,137,255,.76);
    }
    100% {
        box-shadow:
            0 8px 16px -4px rgba(232,253,255,0),
            0 20px 38px -8px rgba(98,207,255,0),
            0 34px 58px -16px rgba(68,137,255,0);
    }
}

/* First Phase 1 console only: cabinet geometry/skin stays intact while every
   display surface waits dark for the player's ENTER power-on gesture. */
#capture-zone.phase1-power-gate #category-subtitle-box,
#capture-zone.phase1-power-gate #lcd-panel,
#capture-zone.phase1-power-gate #score-bar .score-side,
#capture-zone.phase1-power-gate #status-panel .sbox,
#capture-zone.phase1-power-gate #game-board .tile,
#capture-zone.phase1-power-gate #hint-offer-inline {
    filter: brightness(.08) saturate(0) !important;
}

#capture-zone.phase1-power-gate #status-panel .sbox > *,
#capture-zone.phase1-power-gate #game-board .tile .tile-char,
#capture-zone.phase1-power-gate #hint-offer-inline::after {
    opacity: 0 !important;
}

#capture-zone.phase1-power-gate .bottom-vfd-engraving .engraving-letter {
    animation: none !important;
    color: #171218 !important;
    -webkit-text-fill-color: #171218 !important;
    opacity: .18 !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Phase 1 uses the same quick top-to-bottom screen cascade as Phase 3. The
   gate is released into these dark first frames, not into every live panel. */
#capture-zone.phase1-power-waking #category-subtitle-box,
#capture-zone.phase1-power-waking #lcd-panel,
#capture-zone.phase1-power-waking #status-panel,
#capture-zone.phase1-power-waking #score-bar,
#capture-zone.phase1-power-waking #game-board,
#capture-zone.phase1-power-waking #bottom-vfd-row {
    animation: phase1ScreenCascadeOn 260ms cubic-bezier(.2,.8,.4,1) both !important;
}

#capture-zone.phase1-power-waking #lcd-panel { animation-delay: 80ms !important; }
#capture-zone.phase1-power-waking #status-panel { animation-delay: 160ms !important; }
#capture-zone.phase1-power-waking #score-bar { animation-delay: 240ms !important; }
#capture-zone.phase1-power-waking #game-board { animation-delay: 320ms !important; }
#capture-zone.phase1-power-waking #bottom-vfd-row { animation-delay: 400ms !important; }

@keyframes phase1ScreenCascadeOn {
    0% { opacity: 1; filter: brightness(.08) saturate(0); }
    100% { opacity: 1; filter: brightness(1) saturate(1); }
}

#capture-zone.phase1-power-waking #hint-offer-inline {
    animation: phase1BottomVfdWake 900ms cubic-bezier(.16,1,.3,1) both !important;
}

#capture-zone.phase1-power-waking #hint-offer-inline::after {
    animation: phase1BottomVfdTextWake 820ms steps(22, end) 260ms both !important;
}

@keyframes phase1BottomVfdWake {
    0% { filter: brightness(.08) saturate(0); }
    45% { filter: brightness(.5) saturate(.35); }
    78% { filter: brightness(1.18) saturate(.9); }
    100% { filter: brightness(1) saturate(1); }
}

@keyframes phase1BottomVfdTextWake {
    0% { opacity: 0; clip-path: inset(0 100% 0 0); }
    12% { opacity: 1; }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

#capture-zone.phase1-power-gate #keyboard .key:not(.phase1-power-enter):not(.key-wake-awake):not(.key-wake-hold),
#capture-zone.phase3-auto-wake #keyboard .key:not(.phase1-power-enter):not(.key-wake-awake):not(.key-wake-hold),
#capture-zone.phase1-power-waking #keyboard.keyboard-dead .key:not(.key-wake-lit):not(.key-wake-awake) {
    color: transparent !important;
    opacity: 1 !important;
    filter: none !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.34)),
        #050508 !important;
    border-color: rgba(255,255,255,.035) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -8px 12px rgba(0,0,0,.56),
        0 2px 0 rgba(0,0,0,.60) !important;
    text-shadow: none !important;
}

#capture-zone.phase1-power-gate #keyboard .key[data-k="ENTER"].phase1-power-enter,
#capture-zone.phase3-auto-wake #keyboard .key[data-k="ENTER"].phase1-power-enter {
    color: #fff !important;
    opacity: 1 !important;
    outline: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: #160408 !important;
    border-color: transparent !important;
    text-shadow: 0 0 4px rgba(255,255,255,.72), 0 0 10px rgba(255,54,76,.72) !important;
    animation: phase1PowerEnterWarning 1120ms ease-in-out infinite alternate !important;
}

/* Phase 3 reforms dark, but its acknowledgement key must remain as bright as
   the Phase 1 ENTER lamp instead of inheriting the screen power-off filter. */
#capture-zone.phase3-auto-wake #keyboard {
    filter: none !important;
}

/* Releasing the keyboard container filter lets the ENTER lamp be seen; keep
   every other key physically dark until the later random keyboard wake. */
#capture-zone.phase1-power-gate #keyboard .key:not(.phase1-power-enter):not(.key-wake-awake):not(.key-wake-hold),
#capture-zone.phase3-auto-wake #keyboard .key:not(.phase1-power-enter):not(.key-wake-awake):not(.key-wake-hold) {
    color: transparent !important;
    background: #050508 !important;
    border-color: rgba(255,255,255,.035) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 -8px 12px rgba(0,0,0,.56), 0 2px 0 rgba(0,0,0,.60) !important;
    filter: brightness(.06) saturate(0) !important;
}

/* Both boot acknowledgement lamps beat exactly with their one-second tone. */
#capture-zone.phase1-power-gate #keyboard .key[data-k="ENTER"].phase1-power-enter,
#capture-zone.phase3-auto-wake #keyboard .key[data-k="ENTER"].phase1-power-enter {
    animation: none !important;
    color: #fff !important;
    background: #11131a !important;
    filter: brightness(.92) saturate(.9) !important;
}

#capture-zone.phase1-power-gate #keyboard .key[data-k="ENTER"].phase3-enter-beat,
#capture-zone.phase3-auto-wake #keyboard .key[data-k="ENTER"].phase3-enter-beat {
    animation: phase3EnterBootBeat 260ms ease-out both !important;
}

@keyframes phase3EnterBootBeat {
    0% { color: #fff; background: #11131a; filter: brightness(.92) saturate(.9) drop-shadow(0 0 0 rgba(255,255,255,0)); }
    30% { color: #080a10; background: #fff; filter: brightness(1.45) saturate(.3) drop-shadow(0 0 18px rgba(232,253,255,1)); }
    100% { color: #fff; background: #11131a; filter: brightness(.92) saturate(.9) drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

#keyboard .key.key-wake-hold {
    color: #fff !important;
    opacity: 1 !important;
    background: #11131a !important;
    border-color: rgba(255,255,255,.34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 12px rgba(0,0,0,.54), 0 2px 0 rgba(0,0,0,.60) !important;
    filter: brightness(1) saturate(1) !important;
    text-shadow: none !important;
}

/* Apply the Phase 1 blackout before its console becomes visible, avoiding a
   single rendered frame of live key labels before the first boot beep. */
#keyboard.phase1-keyboard-off .key:not(.phase1-power-enter) {
    color: transparent !important;
    background: #050508 !important;
    border-color: rgba(255,255,255,.035) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 -8px 12px rgba(0,0,0,.56), 0 2px 0 rgba(0,0,0,.60) !important;
    filter: brightness(.06) saturate(0) !important;
    text-shadow: none !important;
}

@keyframes phase1PowerEnterWarning {
    0% {
        color: rgba(255,255,255,.42);
        filter: brightness(.48) saturate(.55) drop-shadow(0 0 0 rgba(255,54,76,0));
    }
    100% {
        color: #fff;
        filter: brightness(1.7) saturate(1.35) drop-shadow(0 0 9px rgba(255,54,76,.92));
    }
}

/* Mobile final-win performance/readability profile. Keep the rainbow tile
   marquee, but make every other winning-phase light and CRT state static. */
@media (pointer: coarse) {
    #capture-zone:has(#console-info-bay.magic-won) #category-banner .moji-title-letter,
    #capture-zone:has(#console-info-bay.magic-won) .bottom-vfd-engraving .engraving-letter {
        animation: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    #capture-zone:has(#console-info-bay.magic-won) #console-info-bay::before,
    #capture-zone:has(#console-info-bay.magic-won) #console-info-bay::after,
    #capture-zone:has(#console-info-bay.magic-won) #clue-banner,
    #capture-zone:has(#console-info-bay.magic-won) #clue-banner::after {
        animation: none !important;
    }

    #capture-zone:has(#console-info-bay.magic-won) #category-subtitle-box .lcd-text,
    #capture-zone:has(#console-info-bay.magic-won) #lcd-panel #msg,
    #capture-zone:has(#console-info-bay.magic-won) #clue-banner,
    #capture-zone:has(#console-info-bay.magic-won) #clue-banner * {
        animation: none !important;
        clip-path: none !important;
        max-width: none !important;
        opacity: 1 !important;
    }

    #capture-zone:has(#console-info-bay.magic-won) #hint-offer-inline {
        justify-content: center !important;
        text-align: center !important;
    }

#capture-zone:has(#console-info-bay.magic-won) #hint-offer-inline.typing-banner::after {
        display: none !important;
    }
}

/* The solved lower VFD reads as a single status message on every viewport. */
#hint-offer-inline.solved-banner {
    justify-content: center !important;
    text-align: center !important;
}



/* Mobile final win keeps the travelling rainbow, without the extra per-tile
   brightness/saturation filter animation. */
#game-board.magic-complete-showcase.mobile-final-rainbow-no-pulse .magic-rainbow-cell {
    animation: none !important;
}

/* Mobile Phase 3: the cabinet screens can light first, but their text waits
   until the keyboard cascade has finished. */
@media (pointer: coarse) {
    #capture-zone.phase3-vfd-text-hold #category-subtitle-box .lcd-text,
    #capture-zone.phase3-vfd-text-hold #lcd-panel .lcd-text,
    #capture-zone.phase3-vfd-text-hold #console-info-bay.phase3-active #clue-banner:not(.phase3-clue-content-in) #clue-label,
    #capture-zone.phase3-vfd-text-hold #console-info-bay.phase3-active #clue-banner:not(.phase3-clue-content-in) #clue-word,
    #capture-zone.phase3-vfd-text-hold #console-info-bay.phase3-active #clue-banner:not(.phase3-clue-content-in) #clue-line2 .clue-sep,
    #capture-zone.phase3-vfd-text-hold #console-info-bay.phase3-active #clue-banner:not(.phase3-clue-content-in) #clue-emoji,
    #capture-zone.phase3-vfd-text-hold #console-info-bay.phase3-active #clue-banner:not(.phase3-clue-content-in) #clue-answer,
    #capture-zone.phase3-vfd-text-hold #console-info-bay.phase3-active #clue-banner:not(.phase3-clue-content-in) #clue-dict-hint {
        animation: none !important;
        opacity: 0 !important;
    }

    /* The centre CRT shell wakes first; its word, emoji, answer and hint then
       emerge together as one calm screen fade after the keyboard cascade. */
    #console-info-bay.phase3-active #clue-banner.phase3-clue-content-in #clue-label,
    #console-info-bay.phase3-active #clue-banner.phase3-clue-content-in #clue-line2 {
        animation: phase3ClueContentFade 900ms cubic-bezier(.22,.61,.36,1) both !important;
    }

    @keyframes phase3ClueContentFade {
        from { opacity: 0; filter: brightness(.45); }
        to { opacity: 1; filter: brightness(1); }
    }
}
/* ============================================================
   MOJI-LOJI — Mobile Transition Performance Overrides
   ------------------------------------------------------------
   Purpose: neutralize paint-heavy properties (filter, box-shadow,
   text-shadow, mix-blend-mode) on touch devices, ONLY for
   phase-transition / transport / teleport effects and the
   winning last-phase state. Desktop is untouched — this file
   only fires inside @media (pointer: coarse).

   transform/opacity are left alone everywhere so the actual
   motion of each transition still plays — only the expensive
   paint/composite properties riding along with it are stripped.

   Load this file AFTER styles.css so the cascade lets these
   !important overrides win.
   e.g. <link rel="stylesheet" href="css/mobile-transitions.css">
   ============================================================ */

@media (pointer: coarse) {

    /* --- Winning last phase (solved banner) --- */
    /* source: styles.css line 13193 */
    #capture-zone #hint-offer-inline span {
        mix-blend-mode: normal !important;
    }

    /* source: styles.css line 13210 */
    #capture-zone #hint-offer-inline::before {
        mix-blend-mode: normal !important;
    }


    /* --- Console teleport-in / transport shimmer (opening console reveal) --- */
    /* source: styles.css line 183 */
    #capture-zone.console-teleport-in::before {
        mix-blend-mode: normal !important;
    }

    /* source: styles.css line 260 */
    #capture-zone.console-transport-shimmer::before {
        mix-blend-mode: normal !important;
    }

    /* source: styles.css line 7148 */
    body:not([data-console-skin]) #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before, body:not([data-console-skin]) #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after, body[data-console-skin="original"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before, body[data-console-skin="original"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
        box-shadow: none !important;
    }

    /* source: styles.css line 7199 */
    body[data-console-skin="white"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before, body[data-console-skin="white"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
        box-shadow: none !important;
    }

    /* source: styles.css line 7275 */
    body[data-console-skin="ferrari"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before, body[data-console-skin="ferrari"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
        box-shadow: none !important;
    }

    /* source: styles.css line 8649 */
    body[data-console-skin="rose-gold"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::before, body[data-console-skin="rose-gold"] #capture-zone:not(.console-teleport-in):not(.console-transport-shimmer):not(.console-easter-egg)::after {
        box-shadow: none !important;
    }

    /* source: styles.css line 10422 */
    #capture-zone.console-teleport-in #category-subtitle-box.vfd-prewake, #capture-zone.console-teleport-in #lcd-panel.vfd-prewake, #capture-zone.console-easter-egg.egg-dematerialize #category-subtitle-box.vfd-prewake, #capture-zone.console-easter-egg.egg-dematerialize #lcd-panel.vfd-prewake, #capture-zone.console-easter-egg.egg-rematerialize #category-subtitle-box.vfd-prewake, #capture-zone.console-easter-egg.egg-rematerialize #lcd-panel.vfd-prewake {
        box-shadow: none !important;
        filter: none !important;
    }

    /* source: styles.css line 10440 */
    #capture-zone.console-teleport-in #category-subtitle-box.vfd-prewake .lcd-text, #capture-zone.console-teleport-in #lcd-panel.vfd-prewake #msg, #capture-zone.console-easter-egg #category-subtitle-box.vfd-prewake .lcd-text, #capture-zone.console-easter-egg #lcd-panel.vfd-prewake #msg {
        text-shadow: none !important;
    }

    /* source: styles.css line 11977 */
    #capture-zone.console-teleport-in::after {
        filter: none !important;
    }

    /* source: styles.css line 12329 */
    body.mobile-ui #welcome-screen.mascot-intro-overlay.transporter-emitting::before, body.android-app #welcome-screen.mascot-intro-overlay.transporter-emitting::before, body.mobile-ui #welcome-screen.mascot-intro-overlay.transporter-emitting::after, body.android-app #welcome-screen.mascot-intro-overlay.transporter-emitting::after, body.mobile-ui #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::before, body.android-app #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::before, body.mobile-ui #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after, body.android-app #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after, body.mobile-ui #capture-zone.console-teleport-in::before, body.android-app #capture-zone.console-teleport-in::before, body.mobile-ui #capture-zone.console-teleport-in::after, body.android-app #capture-zone.console-teleport-in::after, body.mobile-ui #capture-zone.console-transport-shimmer::before, body.android-app #capture-zone.console-transport-shimmer::before, body.mobile-ui #capture-zone.console-transport-shimmer::after, body.android-app #capture-zone.console-transport-shimmer::after {
        filter: none !important;
    }

    /* source: styles.css line 12365 */
    body.mobile-ui #capture-zone.console-teleport-in, body.android-app #capture-zone.console-teleport-in {
        filter: none !important;
    }


    /* --- Board teleport-in (board appearing) --- */
    /* source: styles.css line 1767 */
    #board-wrap.board-teleport-in .tile {
        filter: none !important;
    }


    /* --- Currency intro modal (coin explainer popup) --- */
    /* source: styles.css line 4242 */
    #currency-intro-modal.transporter-emitting::before {
        filter: none !important;
    }

    /* source: styles.css line 4247 */
    #currency-intro-modal.transporter-emitting::after {
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    /* source: styles.css line 4300 */
    #currency-intro-modal.transporter-emitting #currency-intro-box::before, #currency-intro-modal.transporter-emitting #currency-intro-box::after {
        filter: none !important;
    }


    /* --- Emoji-pick board sweep (Phase 1 -> Phase 2 transition) --- */
    /* source: styles.css line 7511 */
    #game-board.emoji-pick-board .emoji-pick-board-sweep .tile.emoji-pick-board-tile::after, #game-board.emoji-pick-board .tile.emoji-pick-letter-sweep::after {
        mix-blend-mode: normal !important;
    }


    /* --- Phase 3 key enter glow --- */
    /* source: styles.css line 8114 */
    .key.phase3-enter-glow {
        box-shadow: none !important;
    }


    /* --- Tile pulse wake (reveal transition) --- */
    /* source: styles.css line 10009 */
    #game-board.tile-pulse-wake .tile.tile-pulse-lit::after {
        mix-blend-mode: normal !important;
    }


    /* --- Mascot intro overlay (welcome screen mascot transporter effect) --- */
    /* source: styles.css line 11307 */
    #welcome-screen.mascot-intro-overlay.on:not(.transporter-emitting).mascot-intro-settled .mascot-orbit-stage:not(.mascot-poked) {
        filter: none !important;
    }

    /* source: styles.css line 11584 */
    #welcome-screen.mascot-intro-overlay.on:not(.transporter-emitting).mascot-intro-settled .mascot-orbit-stage.mascot-poked {
        filter: none !important;
    }

    /* source: styles.css line 11721 */
    #welcome-screen.mascot-intro-overlay.transporter-emitting::before {
        filter: none !important;
    }

    /* source: styles.css line 11733 */
    #welcome-screen.mascot-intro-overlay.transporter-emitting::after {
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    /* source: styles.css line 11801 */
    #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars::after {
        filter: none !important;
    }

    /* source: styles.css line 11850 */
    #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars .mascot-orbit-stage::before, #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars .mascot-orbit-stage::after {
        filter: none !important;
    }

    /* source: styles.css line 11881 */
    #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::before, #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after {
        filter: none !important;
    }

    /* source: styles.css line 11916 */
    #welcome-screen.mascot-intro-overlay.transporter-emitting::after, #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars::after {
        filter: none !important;
    }

    /* source: styles.css line 11929 */
    #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::before, #welcome-screen.mascot-intro-overlay.transporter-emitting .mascot-orbit-stage::after, #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars .mascot-orbit-stage::before, #welcome-screen.mascot-intro-overlay.transporter-emitting.extra-mascot-stars .mascot-orbit-stage::after {
        filter: none !important;
    }


    /* --- Phase power-on/crossfade gates (keyboard powering on between phases) --- */
    /* source: styles.css line 12824 */
    #capture-zone.phase3-mobile-crossfade.phase3-powerdown #keyboard .key:not(.phase1-power-enter) {
        box-shadow: none !important;
        filter: none !important;
    }

    /* source: styles.css line 13791 */
    #capture-zone.phase1-power-gate #keyboard .key:not(.phase1-power-enter):not(.key-wake-awake):not(.key-wake-hold), #capture-zone.phase3-auto-wake #keyboard .key:not(.phase1-power-enter):not(.key-wake-awake):not(.key-wake-hold), #capture-zone.phase1-power-waking #keyboard.keyboard-dead .key:not(.key-wake-lit):not(.key-wake-awake) {
        box-shadow: none !important;
        filter: none !important;
        text-shadow: none !important;
    }

    /* source: styles.css line 13808 */
    #capture-zone.phase1-power-gate #keyboard .key[data-k="ENTER"].phase1-power-enter, #capture-zone.phase3-auto-wake #keyboard .key[data-k="ENTER"].phase1-power-enter {
        text-shadow: none !important;
    }


    /* --- Phase 3 header transport (phase-change beam effect) --- */
    /* source: styles.css line 13510 */
    #capture-zone.phase3-header-transport.phase3-header-beam-in #phase-transport-content.transport-shell::after {
        mix-blend-mode: normal !important;
    }

    /* source: styles.css line 13548 */
    body.mobile-ui #capture-zone.phase3-header-transport #phase-transport-content.transport-shell::after, body.android-app #capture-zone.phase3-header-transport #phase-transport-content.transport-shell::after, body.mobile-ui #capture-zone.phase3-header-return-fade #phase-transport-content.transport-shell::after, body.android-app #capture-zone.phase3-header-return-fade #phase-transport-content.transport-shell::after {
        box-shadow: none !important;
    }

    /* Keep the return beam's mobile paint reduction; it belongs to the
       incoming-console stage, not the outgoing shutdown flash. */
    #capture-zone.phase3-header-transport.phase3-header-beam-in #category-subtitle-box, #capture-zone.phase3-header-transport.phase3-header-beam-in #console-info-bay, #capture-zone.phase3-header-transport.phase3-header-beam-in #lcd-panel, #capture-zone.phase3-header-transport.phase3-header-beam-in #score-bar, #capture-zone.phase3-header-transport.phase3-header-beam-in #game-board .tile, #capture-zone.phase3-header-transport.phase3-header-beam-in #keyboard .key, #capture-zone.phase3-header-transport.phase3-header-beam-in #hint-offer-inline {
        filter: none !important;
    }

    @keyframes mobilePhase3BoardPowerOff {
        0% { opacity: 1; filter: brightness(.72) saturate(.62); }
        58% { opacity: 1; filter: brightness(.32) saturate(.22); }
        100% { opacity: 1; filter: brightness(.08) saturate(0); }
    }

}

/* Keep the finished-game receipt compact enough to fit comfortably on phones. */
@media (max-width: 480px) {
    #capture-zone.stats-mode #stats-console {
        padding-top: 9px;
        padding-bottom: 10px;
    }

    #capture-zone.stats-mode #stats-receipt .stat-row {
        min-height: 18px;
        padding-top: 0;
        padding-bottom: 0;
    }

    #capture-zone.stats-mode #stats-receipt .stat-row.rule {
        min-height: 4px;
        margin-top: 0;
        margin-bottom: 0;
    }

    #capture-zone.stats-mode #stats-receipt .stat-row.section {
        min-height: 15px;
        margin: 1px 0 0;
        padding: 1px 0 0;
    }
}

/* Final mobile VFD sizing authority. Score panels are deliberately excluded. */
@media (max-width: 480px) and (pointer: coarse) {
    #category-subtitle-box .lcd-text,
    #category-subtitle-box.type-on .lcd-text,
    #category-subtitle-box.instruction .lcd-text,
    #lcd-panel #msg,
    #lcd-panel.on #msg,
    #lcd-panel.lcd-invalid #msg,
    #lcd-panel.lcd-replay #msg {
        font-size: clamp(0.92rem, 4vw, 1.04rem) !important;
        letter-spacing: 0.7px !important;
    }

    #capture-zone #hint-offer-inline,
    #capture-zone:not(.stats-mode):has(#board-wrap:not(.phase3)) #hint-offer-inline::after {
        font-size: clamp(0.78rem, 3.35vw, 0.94rem) !important;
    }

    #bottom-vfd-row .bottom-vfd-engraving {
        font-size: clamp(1.24rem, 5.35vw, 1.62rem) !important;
    }
}