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

        :root {
            --bg:       #0a0a0a;
            --surface:  #161618;
            --surface2: #222226;
            --border:   #2c2c2e;
            --correct:  #0052cc;
            --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;
        }

        /* ── LIGHT THEME ── */
        body.light {
            --bg:       #f2efe9;
            --surface:  #e8e4dc;
            --surface2: #ddd8ce;
            --border:   #c4bfb5;
            --correct:  #0052cc;
            --present:  #a07800;
            --absent:   #b0aba3;
            --text:     #1a1a1a;
            --muted:    #1a1a1a;
            --accent:   #9b35d4;
            --green:    #1a8a3a;
            --red:      #c4008e;
            --yellow:   #a07800;
            --kbd:      #8a857d;
            --modal-bg: rgba(242,239,233,0.985);
            --action-bg:       #ecdcf7;
            --action-bg-hover: #e0c4f5;
            --fade-rgb: 242,239,233;
        }

        html, body { overflow-x: hidden; }

        body {
            background:
                radial-gradient(circle at 8% 14%, rgba(255,255,255,.72) 0 1px, transparent 2px),
                radial-gradient(circle at 18% 78%, rgba(255,204,0,.58) 0 1px, transparent 2px),
                radial-gradient(circle at 28% 42%, rgba(255,255,255,.62) 0 1px, transparent 2px),
                radial-gradient(circle at 44% 18%, rgba(191,90,242,.56) 0 1px, transparent 2px),
                radial-gradient(circle at 57% 86%, rgba(255,255,255,.68) 0 1px, transparent 2px),
                radial-gradient(circle at 72% 34%, rgba(255,255,255,.58) 0 1px, transparent 2px),
                radial-gradient(circle at 86% 70%, rgba(255,204,0,.54) 0 1px, transparent 2px),
                radial-gradient(circle at 96% 24%, rgba(191,90,242,.5) 0 1px, transparent 2px),
                radial-gradient(ellipse at 72% 12%, rgba(191,90,242,.08) 0%, transparent 32%),
                var(--bg);
            background-size:
                260px 260px, 330px 330px, 290px 290px, 380px 380px,
                310px 310px, 350px 350px, 280px 280px, 420px 420px,
                100% 100%, 100% 100%;
            background-attachment: fixed;
            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;
            animation: gameStarDrift 20s ease-in-out infinite;
        }
        #intro-underlay {
            position: fixed;
            inset: 0;
            z-index: 50;
            background: #000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.38s ease, 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 #magic-win-cta,
        body.intro-active #fx {
            visibility: hidden;
            pointer-events: none;
        }
        body.light {
            background:
                radial-gradient(circle at 8% 14%, rgba(26,26,26,.32) 0 1px, transparent 2px),
                radial-gradient(circle at 18% 78%, rgba(160,120,0,.28) 0 1px, transparent 2px),
                radial-gradient(circle at 28% 42%, rgba(26,26,26,.26) 0 1px, transparent 2px),
                radial-gradient(circle at 44% 18%, rgba(155,53,212,.24) 0 1px, transparent 2px),
                radial-gradient(circle at 57% 86%, rgba(26,26,26,.28) 0 1px, transparent 2px),
                radial-gradient(circle at 72% 34%, rgba(26,26,26,.24) 0 1px, transparent 2px),
                radial-gradient(circle at 86% 70%, rgba(160,120,0,.24) 0 1px, transparent 2px),
                radial-gradient(circle at 96% 24%, rgba(155,53,212,.22) 0 1px, transparent 2px),
                radial-gradient(ellipse at 72% 12%, rgba(155,53,212,.08) 0%, transparent 32%),
                var(--bg);
            background-size:
                260px 260px, 330px 330px, 290px 290px, 380px 380px,
                310px 310px, 350px 350px, 280px 280px, 420px 420px,
                100% 100%, 100% 100%;
            background-attachment: fixed;
            animation: gameStarDrift 20s ease-in-out infinite;
        }
        @keyframes gameStarDrift {
            0%, 100% {
                background-position:
                    0 0, 0 0, 0 0, 0 0,
                    0 0, 0 0, 0 0, 0 0,
                    0 0, 0 0;
            }
            50% {
                background-position:
                    34px 22px, -28px 36px, 24px -32px, -38px -20px,
                    30px 42px, -34px 24px, 22px -28px, -30px -34px,
                    0 0, 0 0;
            }
        }

        #capture-zone {
            display: flex; flex-direction: column; align-items: center;
            width: 100%; max-width: 420px;
            gap: 6px; padding: 10px 8px 12px;
            box-sizing: border-box;
            position: relative;
            border: 1px solid rgba(255,204,0,0.34);
            border-radius: 14px;
            background:
                linear-gradient(90deg, transparent 0, transparent 8px, rgba(255,239,160,0.56) 8px, rgba(255,204,0,0.18) 50%, rgba(191,90,242,0.30) calc(100% - 8px), transparent calc(100% - 8px)) top 4px left 0 / 100% 4px no-repeat,
                linear-gradient(90deg, transparent 0, transparent 8px, rgba(191,90,242,0.30) 8px, rgba(255,204,0,0.16) 50%, rgba(255,239,160,0.46) calc(100% - 8px), transparent calc(100% - 8px)) bottom 4px left 0 / 100% 4px no-repeat,
                linear-gradient(180deg, rgba(255,239,160,0.18), transparent 10px, transparent calc(100% - 10px), rgba(191,90,242,0.16)),
                linear-gradient(90deg, rgba(255,204,0,0.13), transparent 9%, transparent 91%, rgba(255,204,0,0.13)),
                radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 28%),
                linear-gradient(180deg, rgba(64,18,72,0.58), rgba(18,8,22,0.38)),
                linear-gradient(180deg, #211127 0%, #130915 48%, #070408 100%);
            box-shadow:
                inset 0 4px 0 rgba(255,239,160,0.16),
                inset 0 -4px 0 rgba(191,90,242,0.14),
                inset 0 0 18px rgba(255,255,255,0.05),
                inset 0 0 34px rgba(191,90,242,0.12),
                0 0 22px rgba(191,90,242,0.16);
            overflow: hidden;
        }
        #capture-zone::before,
        #capture-zone::after {
            content: "";
            position: absolute;
            top: 4px;
            bottom: 4px;
            width: 4px;
            border-radius: 999px;
            background:
                linear-gradient(180deg, rgba(255,239,160,0.62), rgba(255,204,0,0.14), rgba(191,90,242,0.28));
            opacity: 0.52;
            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: 430px) {
            #capture-zone {
                padding: 8px 6px 10px;
                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;
        }
        #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;
        }
        #capture-zone.console-transport-prep:not(.console-teleport-in) {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        #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;
            opacity: 1;
            filter: drop-shadow(0 2px 0 rgba(55,18,37,0.74));
        }
        /* 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,
        #capture-zone.console-postmoon-lock:not(.console-teleport-in) #board-wrap,
        #capture-zone.console-postmoon-lock:not(.console-teleport-in) .tile,
        #capture-zone.console-postmoon-lock:not(.console-teleport-in) .sbox {
            animation: none !important;
            transition: none !important;
        }
        #capture-zone.console-postmoon-lock #category-subtitle-box .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;
        }
        @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 3px 0 rgba(0,0,0,0.5),
                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-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-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-btn:hover  { border-color: var(--accent); color: var(--accent); }
        .dev-btn.active { border-color: var(--accent); color: var(--accent); background: #1a001a; }

        /* ── 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: rgba(255,250,236,0.94);
            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:
                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);
            filter: drop-shadow(0 2px 0 rgba(55,18,37,0.74));
            animation: mojiLetterBacklight 9.8s steps(1, end) infinite;
            animation-delay: calc(var(--i) * 0.72s);
        }
        .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 {
            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 ── */
        #music-btn {
            position: fixed; top: 12px; right: 12px; z-index: 200;
            background: transparent; border: none; font-size: 1.3rem;
            cursor: pointer; opacity: 0.5; transition: opacity 0.2s;
            line-height: 1;
        }
        #music-btn:hover { opacity: 1; }
        #mute-btn {
            position: fixed; top: 48px; right: 12px; z-index: 200;
            background: transparent; border: none; font-size: 1.3rem;
            cursor: pointer; opacity: 0.5; transition: opacity 0.2s;
            line-height: 1;
        }
        #mute-btn:hover { opacity: 1; }

        #help-btn {
            position: fixed; top: 84px; right: 12px; z-index: 200;
            background: transparent; border: none; font-size: 1.15rem;
            cursor: pointer; opacity: 0.5; transition: opacity 0.2s;
            line-height: 1;
        }
        #help-btn:hover { opacity: 1; }
        #theme-btn {
            position: fixed; top: 120px; right: 12px; z-index: 200;
            background: transparent; border: none; font-size: 1.15rem;
            cursor: pointer; opacity: 0.5; transition: opacity 0.2s;
            line-height: 1;
        }
        #theme-btn:hover { opacity: 1; }

        #help-modal {
            display: none; position: fixed; inset: 0; z-index: 210;
            align-items: center; justify-content: center;
            background: #050005; padding: 20px;
        }
        #help-modal.on { display: flex; }
        #help-modal.leaving { display: flex; animation: fadeOut 0.55s ease forwards; }
        #help-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 { font-size: 1.05rem; font-weight: 400; color: var(--accent); font-family: 'Courier New', monospace; letter-spacing: 2px; }
        .tips-list { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
        .tips-list li { font-size: 1.18rem; color: var(--text); line-height: 1.6; }
        .tips-closer { font-size: 0.85rem; color: var(--yellow); font-style: italic; line-height: 1.5; }

        /* ── SHARE MODAL ── */
        #share-modal {
            display: none; position: fixed; inset: 0; z-index: 150;
            align-items: flex-end; justify-content: center;
            background: rgba(0,0,0,0.85); padding: 0;
        }
        #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 20px 0 0; 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);
        }
        #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: repeat(3, 1fr); gap: 10px; }
        .share-btn {
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            background: var(--surface2); border: 1px solid var(--border);
            border-radius: 12px; padding: 14px 8px; cursor: pointer;
            font-family: 'Courier New', monospace; font-size: 0.68rem;
            color: var(--text); letter-spacing: 1px; 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: 1.8rem; }
        .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; }

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

        /* ── 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 {
            border: 1px solid rgba(255,255,255,0.16) !important;
            border-radius: 9px !important;
            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) !important;
            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) !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;
        }
        #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 ── */
        #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); }
        #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; }
        @keyframes hintPulse {
            0%, 100% { opacity: 0.45; transform: scale(1); }
            50% { opacity: 0.9; transform: scale(1.2); }
        }
        #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;
            gap: 5px;
            height: 64px; min-height: 64px; width: 100%; max-width: 420px;
            box-sizing: border-box;
            overflow: hidden;
            scrollbar-width: none;
            padding: 5px 8px;
            border: 1px solid rgba(255,204,0,0.20);
            border-radius: 10px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.20)),
                rgba(8,3,11,0.22);
            box-shadow:
                inset 0 2px 4px rgba(0,0,0,0.38),
                inset 0 -1px 0 rgba(255,255,255,0.08),
                0 1px 0 rgba(255,204,0,0.10);
            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;
            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.86);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 8px; padding: 3px 6px; min-width: 0; width: 100%; height: 100%; gap: 2px;
            position: relative; overflow: hidden;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.30),
                inset 0 -10px 18px rgba(0,0,0,0.40),
                inset 0 0 16px rgba(0,0,0,0.22),
                0 3px 0 rgba(0,0,0,0.55),
                0 0 12px rgba(255,204,0,0.10);
            transform-origin: center top;
            backface-visibility: hidden;
        }
        .sbox::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.30), rgba(255,255,255,0));
            opacity: 0.48;
            pointer-events: none;
        }
        .sbox > * {
            position: relative;
            z-index: 1;
        }
        .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 steps(6, end) 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.hit {
            border-color: rgba(98,255,121,0.64);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -10px 18px rgba(0,0,0,0.40), inset 0 0 22px rgba(98,255,121,0.28), 0 3px 0 rgba(0,0,0,0.55);
        }
        .sbox.choice-monitor.miss {
            border-color: rgba(255,116,136,0.62);
            filter: brightness(0.84) saturate(1.05);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -10px 18px rgba(0,0,0,0.44), inset 0 0 22px rgba(255,116,136,0.24), 0 3px 0 rgba(0,0,0,0.55);
        }
        .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: naughtyEmojiBounce 0.72s cubic-bezier(.2, .8, .2, 1) infinite;
            animation-delay: calc(var(--naughty-i, 0) * 90ms);
            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(-18px); filter: blur(1px) brightness(1.45); }
            18% { opacity: 1; transform: translateY(14px); filter: blur(0.8px) brightness(0.75); }
            36% { transform: translateY(-10px); filter: blur(0.5px) brightness(1.25); }
            54% { transform: translateY(7px); filter: blur(0.3px) brightness(0.9); }
            72% { transform: translateY(-3px); filter: blur(0.2px) brightness(1.12); }
            100% { opacity: 1; transform: translateY(0); 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 + 14px);
            overflow: hidden; position: relative;
            margin-top: 6px;
            border: 1px solid rgba(191,90,242,0.32);
            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: boardTransportBeam 2.75s linear both;
        }
        #board-wrap.board-teleport-in::after {
            animation: boardTransportSparks 2.75s linear both;
        }
        #board-wrap.board-teleport-in .tile {
            animation: tileTransportIn 2.55s linear both;
            animation-delay: calc((var(--teleport-i, 0) * 54ms) + 180ms);
        }
        #board-wrap.phase3 { max-width: 420px; }
        #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(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.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 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: phaseCompleteBoardFlip 1.05s cubic-bezier(.16, 1, .3, 1) both;
        }
        #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: phaseCompleteTileFlip 0.82s cubic-bezier(.16, 1, .3, 1) both;
            animation-delay: calc(var(--pc-i, 0) * 52ms);
        }
        .tile.phase-complete-crt {
            animation: phaseCompleteCrtFadeIn 0.62s ease both;
            animation-delay: calc(var(--pc-i, 0) * 38ms);
        }
        .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.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 13px rgba(255,204,0,0.14);
        }
        .tile.phase-complete-crt .phase-complete-emoji {
            display: inline-block;
            font-size: clamp(1.18rem, 4.8vw, 2rem);
            animation: phaseCompleteEmojiSpin 0.72s steps(6, end) infinite;
            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 3px 0 rgba(0,0,0,0.5),
                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 3px 0 rgba(0,22,64,0.82),
                0 0 18px rgba(93,174,255,0.58);
            animation-name: phaseCompleteTileFlip, phaseCompleteWordGlow;
            animation-duration: 0.82s, 1.1s;
            animation-timing-function: cubic-bezier(.16, 1, .3, 1), 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-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 3px 0 rgba(0,0,0,0.5),
                0 0 18px rgba(98,255,121,0.24);
            animation-name: phaseCompleteTileFlip, readyPromptBlink;
            animation-duration: 0.82s, 1.05s;
            animation-timing-function: cubic-bezier(.16, 1, .3, 1), 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;
        }
        @keyframes phaseCompleteBoardFlip {
            0% { transform: rotateX(0deg) scale(1); filter: brightness(1); }
            38% { transform: rotateX(76deg) scaleY(0.72); filter: brightness(1.45); }
            64% { transform: rotateX(-12deg) scale(1.02); filter: brightness(1.28); }
            100% { transform: rotateX(0deg) scale(1); filter: brightness(1); }
        }
        @keyframes phaseCompleteTileFlip {
            0% { transform: rotateY(0deg) scale(1); opacity: 0.18; }
            48% { transform: rotateY(118deg) scale(0.88); opacity: 0.88; }
            100% { transform: rotateY(0deg) scale(1); opacity: 1; }
        }
        @keyframes phaseCompleteCrtFadeIn {
            0% { transform: translateY(3px); opacity: 0; filter: brightness(0.78); }
            55% { transform: translateY(0); opacity: 1; filter: brightness(1.18); }
            100% { transform: translateY(0); opacity: 1; filter: brightness(1); }
        }
        #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% { transform: rotate(0deg) scale(0.92); }
            50% { transform: rotate(180deg) scale(1.16); }
            100% { transform: rotate(360deg) scale(0.92); }
        }
        @keyframes phaseCompleteWordGlow {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.32); }
        }
        #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(255,75,174,0)); }
            18% { filter: drop-shadow(0 0 14px rgba(255,182,219,0.28)); }
            46% { filter: drop-shadow(0 0 28px rgba(255,75,174,0.42)) drop-shadow(0 0 44px rgba(255,75,174,0.2)); }
            72% { filter: drop-shadow(0 0 18px rgba(255,75,174,0.22)); }
            100% { filter: drop-shadow(0 0 0 rgba(255,75,174,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(191,90,242,0.16); }
            48% { box-shadow: inset 0 0 24px rgba(255,255,255,0.08), 0 0 26px rgba(255,182,219,0.18), 0 0 34px rgba(255,75,174,0.24); }
            100% { box-shadow: inset 0 0 18px rgba(255,255,255,0.04), 0 0 18px rgba(191,90,242,0.16); }
        }
        @keyframes phase1PresentationGlow {
            0% { filter: drop-shadow(0 0 0 rgba(255,204,0,0)); }
            18% { filter: drop-shadow(0 0 12px rgba(255,239,160,0.22)); }
            48% { filter: drop-shadow(0 0 22px rgba(255,204,0,0.34)) drop-shadow(0 0 36px rgba(255,149,0,0.16)); }
            76% { filter: drop-shadow(0 0 14px rgba(255,204,0,0.18)); }
            100% { filter: drop-shadow(0 0 0 rgba(255,204,0,0)); }
        }
        @keyframes phase1BannerPresent {
            0% { box-shadow: inset 0 0 18px rgba(255,255,255,0.04), 0 0 18px rgba(191,90,242,0.16); }
            46% { box-shadow: inset 0 0 24px rgba(255,255,255,0.07), 0 0 24px rgba(255,239,160,0.2), 0 0 34px rgba(255,204,0,0.22); }
            100% { box-shadow: inset 0 0 18px rgba(255,255,255,0.04), 0 0 18px rgba(191,90,242,0.16); }
        }
        @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} }
        @keyframes popIn { 0%{transform:scale(0.5);opacity:0} 100%{transform:scale(1);opacity:1} }



        .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: 430px) {
            #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: 430px) {
            #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 { 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.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(112,184,255,0.42), transparent 56%),
                rgba(24,72,132,0.92);
            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,26,66,0.72), 0 0 12px rgba(72,150,255,0.24);
        }
        .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.10), rgba(255,255,255,0.025) 38%, rgba(0,0,0,0.34) 100%),
                radial-gradient(circle at 50% 112%, rgba(191,90,242,0.18), transparent 58%),
                rgba(46,34,52,0.86);
            border-color: rgba(191,90,242,0.30);
            color: rgba(255,255,255,0.46);
            opacity: 0.88;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -8px 14px rgba(0,0,0,0.38), 0 2px 0 rgba(0,0,0,0.56), 0 0 10px rgba(191,90,242,0.12);
        }
        #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 { background: var(--bg); overflow-y: auto; justify-content: flex-start; padding-top: 24px; }
        #win-overlay.on {
            display: flex;
            background: var(--bg);
            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; }
        #stats-capture-zone { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 340px; }
        #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} }

        #win-stats {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 10px; padding: 14px 22px;
            width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 7px;
        }
        .wrow { display: flex; justify-content: space-between; font-size: 0.85rem; font-family: 'Courier New', monospace; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
        .wrow:last-child { border-bottom: none; padding-bottom: 0; }
        .wrow.phrase { justify-content: center; text-align: center; line-height: 1.35; }
        .wphrase-value { color: var(--yellow); }
        .wlabel { color: var(--text); }
        .wval.g { color: var(--green); font-weight: 400; }
        .wval.r { color: var(--red);   font-weight: 400; }
        .wval.p { color: var(--text); font-weight: 400; }

        #win-emojis { font-size: 1.5rem; display: flex; gap: 12px; }
        #win-magic  { font-size: 1.1rem; font-weight: 400; color: var(--accent); letter-spacing: 4px; font-family: 'Courier New', monospace; }

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

        /* ── 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) #mojiro-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-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-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;
        }
        .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: 430px) {
            .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; }
            #mojiro-welcome-balance {
                bottom: 44px;
                font-size: 0.66rem;
            }
            .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%;
            }
        }


        /* ── MOJIRO / 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);
        }
        body.light #category-currency-badge {
            background: rgba(242,239,233,0.72);
        }
        #mojiro-welcome-balance {
            position: absolute;
            bottom: 54px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            color: #050005;
            font-family: 'Courier New', monospace;
            font-size: 0.74rem;
            font-weight: 400;
            letter-spacing: 1px;
            text-shadow: 0 1px 0 rgba(255,255,255,0.18);
            opacity: 0.82;
            pointer-events: none;
            white-space: nowrap;
        }
        #currency-intro-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 101;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: #050005;
        }
        #currency-intro-modal.on { display: flex; animation: fadeIn 0.32s ease; }
        #currency-intro-modal.leaving { animation: fadeOut 0.55s ease forwards; }
        #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);
        }
        .mojiro-line {
            color: var(--accent);
            font-weight: 400;
        }


        /* ── WELCOME → MOJIRO 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;
        }
        body.light #currency-intro-modal::before {
            opacity: 0.38;
            filter: none;
        }
        #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,
        .currency-intro-main {
            display: block;
        }
        .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: 430px) {
            #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 ── */
        #magic-win-cta {
            position: fixed; left: 0; right: 0; bottom: 0;
            display: flex; flex-direction: column; align-items: center; gap: 10px;
            padding: 16px 20px 22px; background: linear-gradient(180deg, rgba(var(--fade-rgb),0) 0%, rgba(var(--fade-rgb),0.97) 30%);
            transform: translateY(120%); transition: transform 0.45s ease; z-index: 65; pointer-events: none;
        }
        #magic-win-cta.on { transform: translateY(0); pointer-events: auto; }
        #magic-win-cta .magic-win-text { font-family: 'Courier New', monospace; font-weight: 400; color: var(--correct); font-size: 1rem; letter-spacing: 1px; text-align: center; animation: popIn 0.4s ease; }
        #magic-win-cta .action-btn { animation: popIn 0.4s ease 0.1s; }

        /* ── 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),
                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.58) 12%,
                    rgba(98,255,121,0.36) 24%,
                    rgba(255,75,174,0.22) 48%,
                    rgba(255,255,255,0.20) 70%,
                    rgba(255,255,255,0.00) 100%);
            background-size:
                58px 132px, 72px 156px, 66px 148px, 82px 172px,
                62px 138px, 76px 160px, 70px 152px,
                auto, auto;
            background-position:
                50% -18%, 50% -10%, 50% 0%, 50% 8%,
                50% 16%, 50% 24%, 50% 32%,
                0 0, 0 0;
            mix-blend-mode: screen;
            filter: blur(0.2px) drop-shadow(0 0 18px rgba(98,255,121,0.45));
            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);
            filter: drop-shadow(0 0 9px rgba(98,255,121,0.8));
            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%,
                    0 0, 0 0;
            }
            18% {
                opacity: 0.2;
                transform: translate(-50%, -62%) scaleY(0.18);
            }
            42% {
                opacity: 0.78;
                transform: translate(-50%, -70%) scaleY(0.52);
            }
            76% {
                opacity: 0.94;
                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%,
                    0 0, 0 0;
            }
        }
        @keyframes moonEmitterRimSparks {
            0% { opacity: 0; transform: translateY(8px) rotate(0deg) scale(0.82); }
            22% { opacity: 0.74; transform: translateY(-2px) rotate(18deg) scale(1); }
            55% { opacity: 1; transform: translateY(-20px) rotate(54deg) scale(1.12); }
            82% { opacity: 0.78; 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);
        }
        #see-stats-btn,
        #show-stats-btn,
        #admire-board-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;
        }
        #see-stats-btn:hover,
        #show-stats-btn:hover,
        #admire-board-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,
        #mojiro-welcome-balance,
        #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 {
    background: #020207 !important;
    overflow: hidden;
}
#win-overlay {
    display: flex;
    background:
        radial-gradient(circle at 8% 14%, rgba(255,255,255,.72) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 78%, rgba(255,204,0,.58) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 42%, rgba(255,255,255,.62) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 18%, rgba(191,90,242,.56) 0 1px, transparent 2px),
        radial-gradient(circle at 57% 86%, rgba(255,255,255,.68) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 34%, rgba(255,255,255,.58) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 70%, rgba(255,204,0,.54) 0 1px, transparent 2px),
        radial-gradient(circle at 96% 24%, rgba(191,90,242,.5) 0 1px, transparent 2px),
        radial-gradient(ellipse at 72% 12%, rgba(191,90,242,.08) 0%, transparent 32%),
        var(--bg) !important;
    background-size:
        260px 260px, 330px 330px, 290px 290px, 380px 380px,
        310px 310px, 350px 350px, 280px 280px, 420px 420px,
        100% 100%, 100% 100%;
    background-attachment: fixed;
    animation: gameStarDrift 20s ease-in-out infinite;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
}
body.light #win-overlay {
    background:
        radial-gradient(circle at 8% 14%, rgba(26,26,26,.32) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 78%, rgba(160,120,0,.28) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 42%, rgba(26,26,26,.26) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 18%, rgba(155,53,212,.24) 0 1px, transparent 2px),
        radial-gradient(circle at 57% 86%, rgba(26,26,26,.28) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 34%, rgba(26,26,26,.24) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 70%, rgba(160,120,0,.24) 0 1px, transparent 2px),
        radial-gradient(circle at 96% 24%, rgba(155,53,212,.22) 0 1px, transparent 2px),
        radial-gradient(ellipse at 72% 12%, rgba(155,53,212,.08) 0%, transparent 32%),
        var(--bg) !important;
    background-size:
        260px 260px, 330px 330px, 290px 290px, 380px 380px,
        310px 310px, 350px 350px, 280px 280px, 420px 420px,
        100% 100%, 100% 100%;
    background-attachment: fixed;
}
#win-overlay.on {
    animation: gameStarDrift 20s ease-in-out infinite;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    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,
    body.light,
    #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) #mojiro-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: 430px) {
            #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(98,255,121,0.24);
            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(98,255,121,0.18),
                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(98,255,121,0.34)) 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.15);
        }

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

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

        #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 38% 30%, rgba(255,255,255,0.20), transparent 16%),
                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.18) 0 38%, rgba(255,204,0,0.08) 39% 52%, rgba(10,10,12,0.88) 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;
        }

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

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

        #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::before,
        #console-info-bay.phase3-active.magic-won::after {
            animation: magicWonSpeakerGlow 2.4s ease-in-out infinite;
        }

        #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 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;
            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: 0;
            animation: secretCrtBoot 0.62s steps(5, end) both;
            animation-delay: calc(var(--glitch-i, 0) * 150ms);
        }

        .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%;
            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 secretCrtBoot {
            0% {
                opacity: 0;
                filter: brightness(2.2) blur(1.2px);
            }
            16% {
                opacity: 1;
                filter: brightness(1.7) blur(0.6px);
            }
            34% {
                filter: brightness(0.72) blur(0.3px);
            }
            58% {
                filter: brightness(1.34) blur(0.15px);
            }
            100% {
                opacity: 1;
                filter: brightness(1) blur(0);
            }
        }

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

        /* One sky everywhere: reuse the calmer planet-modal deep space. */
        body,
        body.light,
        #welcome-screen,
        #currency-intro-modal,
        #win-overlay,
        body.light #win-overlay {
            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(circle at 10% 22%, rgba(255,255,255,.42) 0 1px, transparent 2px),
                radial-gradient(circle at 24% 68%, rgba(255,75,174,.32) 0 1px, transparent 3px),
                radial-gradient(circle at 64% 72%, rgba(191,90,242,.34) 0 1px, transparent 3px),
                radial-gradient(circle at 82% 28%, rgba(255,204,0,.30) 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 !important;
            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,
                520px 520px, 610px 610px, 680px 680px, 560px 560px,
                100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
            background-attachment: fixed !important;
            animation: planetSkyDrift 28s ease-in-out infinite !important;
        }

        #welcome-screen,
        #currency-intro-modal,
        #win-overlay,
        body.light #win-overlay {
            animation: none !important;
        }

        #currency-intro-modal.on {
            display: flex;
            animation: modalOpacityIn 0.32s ease both !important;
        }

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

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

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

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

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

        #currency-intro-modal.transporter-emitting {
            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(circle at 10% 22%, rgba(255,255,255,.42) 0 1px, transparent 2px),
                radial-gradient(circle at 24% 68%, rgba(255,75,174,.32) 0 1px, transparent 3px),
                radial-gradient(circle at 64% 72%, rgba(191,90,242,.34) 0 1px, transparent 3px),
                radial-gradient(circle at 82% 28%, rgba(255,204,0,.30) 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 !important;
            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,
                520px 520px, 610px 610px, 680px 680px, 560px 560px,
                100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
            background-attachment: fixed !important;
        }

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

        @keyframes planetSkyDrift {
            0%, 100% {
                background-position:
                    0 0, 0 0, 0 0, 0 0,
                    0 0, 0 0, 0 0, 0 0,
                    0 0, 0 0, 0 0, 0 0,
                    0 0, 0 0, 0 0, 0 0,
                    0 0, 0 0, 0 0, 0 0;
            }
            50% {
                background-position:
                    18px 12px, -14px 18px, 12px -16px, -18px -10px,
                    15px 22px, -17px 12px, 11px -14px, -15px -17px,
                    13px 11px, -16px 9px, 10px -12px, -12px -13px,
                    20px 12px, -18px 16px, 16px -14px, -14px -18px,
                    0 0, 0 0, 0 0, 0 0;
            }
        }

/* === MOJI-LOJI LCD EMBED PASS ===
   Casio-solar style LCDs: shorter than the cabinet edge, inset into a bevel,
   with denser vertical grid lines. Visual-only override. */
#category-subtitle-box,
#lcd-panel {
    width: calc(100% - 26px) !important;
    max-width: 394px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 1px solid rgba(0,0,0,0.78) !important;
    border-radius: 7px !important;
    padding: 0 12px 3px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015) 22%, rgba(0,0,0,0.26) 100%),
        linear-gradient(90deg, rgba(255,255,255,0.035), transparent 10%, transparent 90%, rgba(0,0,0,0.38)),
        repeating-linear-gradient(90deg, rgba(146,184,154,0.30) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(0deg, rgba(146,184,154,0.22) 0 1px, transparent 1px 8px),
        linear-gradient(180deg, #141a17 0%, #0b100d 47%, #030504 100%) !important;
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.10),
        0 2px 0 rgba(0,0,0,0.70),
        inset 0 2px 4px rgba(0,0,0,0.88),
        inset 0 -1px 0 rgba(255,255,255,0.045),
        inset 0 0 0 2px rgba(255,255,255,0.025),
        inset 0 0 16px rgba(0,0,0,0.48) !important;
}

#category-subtitle-box::before,
#lcd-panel::before {
    content: "";
    position: absolute;
    inset: -6px -7px;
    z-index: -1;
    border-radius: 11px;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.12) 42%, rgba(0,0,0,0.58)),
        linear-gradient(90deg, rgba(191,90,242,0.10), rgba(255,204,0,0.055), rgba(191,90,242,0.09));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -6px 10px rgba(0,0,0,0.46),
        0 1px 0 rgba(255,204,0,0.06);
}

#category-subtitle-box::after,
#lcd-panel::after {
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 18%, transparent 72%, rgba(0,0,0,0.28)),
        repeating-linear-gradient(90deg, rgba(210,255,210,0.055) 0 1px, transparent 1px 13px),
        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(98,255,121,0.13)), transparent 56%) !important;
}

#category-subtitle-box .lcd-text,
#lcd-panel #msg {
    text-shadow:
        0 0 4px rgba(98,255,121,0.30),
        0 1px 0 rgba(0,0,0,0.72) !important;
}

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

/* === MOJI-LOJI LCD TEXT-IN-GLASS PASS ===
   Makes LCD messages read as liquid crystal segments underneath smoked plastic,
   not bright stickers sitting on top. Visual-only override. */
#category-subtitle-box,
#lcd-panel {
    overflow: hidden !important;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018) 18%, rgba(0,0,0,0.34) 100%),
        linear-gradient(90deg, rgba(255,255,255,0.045), transparent 12%, transparent 88%, rgba(0,0,0,0.44)),
        repeating-linear-gradient(90deg, rgba(132,166,139,0.34) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(0deg, rgba(132,166,139,0.21) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #182018 0%, #0d130e 48%, #040604 100%) !important;
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.12),
        0 2px 0 rgba(0,0,0,0.74),
        inset 0 3px 5px rgba(0,0,0,0.92),
        inset 0 -2px 0 rgba(255,255,255,0.035),
        inset 0 0 0 2px rgba(0,0,0,0.32),
        inset 0 0 18px rgba(0,0,0,0.58) !important;
}

#category-subtitle-box::after,
#lcd-panel::after {
    z-index: 3 !important;
    opacity: 0.78 !important;
    mix-blend-mode: normal !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035) 18%, transparent 34%, transparent 72%, rgba(0,0,0,0.34)),
        repeating-linear-gradient(90deg, rgba(210,245,205,0.075) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 4px) !important;
}

#category-subtitle-box .lcd-text,
#lcd-panel #msg {
    z-index: 2 !important;
    color: rgba(116,153,119,0.72) !important;
    opacity: 0.82 !important;
    mix-blend-mode: normal !important;
    text-shadow:
        0 -1px 0 rgba(0,0,0,0.88),
        0 1px 0 rgba(205,226,190,0.075),
        0 0 1px rgba(116,153,119,0.38) !important;
    filter: contrast(0.86) brightness(0.82) saturate(0.72);
    padding-left: 7px;
    padding-right: 7px;
}

#lcd-panel.on #msg,
#category-subtitle-box.type-on .lcd-text {
    opacity: 0.88 !important;
    animation-timing-function: steps(34, end) !important;
}

#category-subtitle-box.instruction .lcd-text,
#lcd-panel.lcd-invalid #msg,
#lcd-panel.lcd-replay #msg {
    color: rgba(132,158,118,0.78) !important;
    text-shadow:
        0 -1px 0 rgba(0,0,0,0.9),
        0 1px 0 rgba(225,235,195,0.08),
        0 0 2px rgba(132,158,118,0.34) !important;
    filter: contrast(0.9) brightness(0.86) saturate(0.78) !important;
}

#category-subtitle-box,
#lcd-panel {
    align-items: center !important;
    padding-top: 2px !important;
    padding-bottom: 0 !important;
}

#category-subtitle-box .lcd-text,
#lcd-panel #msg {
    line-height: 1.14 !important;
    transform: translateY(1px) !important;
}

#category-subtitle-box .lcd-text {
    color: #b8ff62 !important;
    opacity: 0.96 !important;
    text-shadow:
        0 0 2px rgba(247,255,207,0.95),
        0 0 7px rgba(184,255,98,0.92),
        0 0 16px rgba(109,255,52,0.72),
        0 0 30px rgba(69,255,34,0.38),
        0 1px 0 rgba(0,0,0,0.70) !important;
    filter: contrast(1.08) brightness(1.18) saturate(1.36) !important;
}

#lcd-panel #msg {
    color: #ff1f2f !important;
    opacity: 0.96 !important;
    text-shadow:
        0 0 2px rgba(255,225,225,0.95),
        0 0 7px rgba(255,31,47,0.92),
        0 0 16px rgba(255,0,20,0.72),
        0 0 30px rgba(255,0,20,0.38),
        0 1px 0 rgba(0,0,0,0.72) !important;
    filter: contrast(1.1) brightness(1.16) saturate(1.42) !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); }
}

/* ── FINAL LCD COLOR AUTHORITY ──
   Last-word override: upper LCD is always UV green, lower LCD is always strong red.
   This intentionally beats invalid/replay/instruction/score LCD styling. */
#category-subtitle-box .lcd-text,
#category-subtitle-box.type-on .lcd-text,
#category-subtitle-box.instruction .lcd-text,
body.light #category-subtitle-box .lcd-text,
body.light #category-subtitle-box.type-on .lcd-text,
body.light #category-subtitle-box.instruction .lcd-text {
    color: #b8ff62 !important;
    opacity: 1 !important;
    text-shadow:
        0 0 1px rgba(245,255,220,0.98),
        0 0 4px rgba(184,255,98,0.92),
        0 0 9px rgba(98,255,64,0.42),
        0 1px 0 rgba(0,0,0,0.72) !important;
    filter: contrast(1.18) brightness(1.08) saturate(1.18) !important;
}

#lcd-panel #msg,
#lcd-panel.on #msg,
#lcd-panel.lcd-invalid #msg,
#lcd-panel.lcd-replay #msg,
body.light #lcd-panel #msg,
body.light #lcd-panel.on #msg,
body.light #lcd-panel.lcd-invalid #msg,
body.light #lcd-panel.lcd-replay #msg {
    color: #ff2638 !important;
    opacity: 1 !important;
    text-shadow:
        0 0 1px rgba(255,235,235,0.98),
        0 0 5px rgba(255,58,74,0.98),
        0 0 12px rgba(255,0,24,0.64),
        0 0 22px rgba(255,0,24,0.34),
        0 1px 0 rgba(0,0,0,0.76) !important;
    filter: contrast(1.22) brightness(1.24) saturate(1.34) !important;
}

/* ── 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;
    padding: 8px 10px 10px !important;
    gap: 7px !important;
    border-radius: 14px !important;
    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;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.30),
        inset 0 -3px 0 rgba(0,0,0,0.62),
        inset 0 0 0 1px rgba(255,204,0,0.08),
        0 4px 0 rgba(0,0,0,0.58),
        0 8px 18px rgba(0,0,0,0.34),
        0 0 18px rgba(191,90,242,0.11) !important;
    overflow: visible !important;
}

#status-panel::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    border-radius: 11px;
    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);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -2px 0 rgba(0,0,0,0.52);
    pointer-events: none;
}

#status-panel::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 5px;
    height: 2px;
    z-index: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    opacity: 0.72;
    pointer-events: none;
}

#status-panel .sbox {
    border-radius: 10px !important;
    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;
    box-shadow:
        inset 0 4px 8px rgba(0,0,0,0.76),
        inset 0 -1px 0 rgba(255,255,255,0.15),
        inset 0 0 0 2px rgba(0,0,0,0.50),
        inset 0 0 22px rgba(0,0,0,0.62),
        0 1px 0 rgba(255,255,255,0.14),
        0 -1px 0 rgba(0,0,0,0.86) !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;
    inset: 3px;
    z-index: 0;
    border-radius: 8px;
    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%);
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.10);
    opacity: 0.92;
}

#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(4px, 1.7vw, 8px) !important;
    padding: 5px 7px !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: calc(100% - 2.05rem);
    font-size: clamp(0.66rem, 2.35vw, 0.86rem) !important;
    line-height: 1.02 !important;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#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 steps(6, end) both,
        naughtyEmojiBounce 0.82s cubic-bezier(.2, .8, .2, 1) infinite !important;
    animation-delay:
        calc(var(--naughty-i, 0) * 90ms),
        calc(0.92s + (var(--naughty-i, 0) * 90ms)) !important;
    transform-origin: center;
    filter: drop-shadow(0 0 12px rgba(255,75,174,0.72)) drop-shadow(0 2px 2px rgba(0,0,0,0.5)) !important;
}

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

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

/* ── LOWER LCD READABILITY FIX ──
   Red LCD remains red, but loses the neon bloom and bold weight so text reads cleanly
   as embedded liquid-crystal segments under smoked glass. */
#lcd-panel #msg,
#lcd-panel.on #msg,
#lcd-panel.lcd-invalid #msg,
#lcd-panel.lcd-replay #msg,
body.light #lcd-panel #msg,
body.light #lcd-panel.on #msg,
body.light #lcd-panel.lcd-invalid #msg,
body.light #lcd-panel.lcd-replay #msg {
    color: #ff3344 !important;
    opacity: 0.98 !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-shadow:
        0 0 1px rgba(255,230,230,0.82),
        0 0 4px rgba(255,51,68,0.58),
        0 1px 0 rgba(0,0,0,0.82) !important;
    filter: contrast(1.12) brightness(1.06) saturate(1.16) !important;
}

#lcd-panel.on #msg {
    animation-duration: 0.92s !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 {
    text-shadow:
        0 0 4px rgba(208,241,255,0.95),
        0 0 12px rgba(93,174,255,0.58),
        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: 430px) {
    #console-info-bay.phase3-active #clue-banner {
        width: min(100%, 318px) !important;
        max-width: 318px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* === MOJI-LOJI EMBEDDED NAMEPLATE BANNER PASS ===
   Make the main MOJI-LOJI banner read as a recessed machined nameplate:
   square edges, no outer stroke, subtle inner bevel and concave cabinet seat. */
#category-banner {
    border: none !important;
    border-radius: 0 !important;
    margin-top: 1px !important;
    margin-bottom: 0 !important;
    padding: 7px 10px 6px !important;
    overflow: hidden !important;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.34), rgba(255,255,255,0.045) 13%, rgba(255,255,255,0.018) 48%, rgba(0,0,0,0.42) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.35), transparent 11%, transparent 89%, rgba(0,0,0,0.40)),
        radial-gradient(ellipse at 50% 16%, rgba(255,244,208,0.22), transparent 48%),
        radial-gradient(circle at 78% 28%, rgba(255,204,0,0.36) 0%, transparent 23%),
        radial-gradient(circle at 34% 76%, rgba(213,40,168,0.46) 0%, transparent 48%),
        radial-gradient(circle at 48% 52%, #9d3a98 0%, #5c245c 56%, #211024 100%) !important;
    background-size: 100% 100%, 100% 100%, 120% 120%, 150% 150%, 205% 205%, 165% 165% !important;
    box-shadow:
        inset 0 3px 5px rgba(0,0,0,0.88),
        inset 0 -2px 0 rgba(255,255,255,0.10),
        inset 3px 0 5px rgba(0,0,0,0.42),
        inset -3px 0 5px rgba(0,0,0,0.50),
        inset 0 0 0 1px rgba(255,239,160,0.08),
        inset 0 0 22px rgba(0,0,0,0.32),
        0 1px 0 rgba(255,255,255,0.055),
        0 -1px 0 rgba(0,0,0,0.64) !important;
}

#category-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025) 19%, transparent 43%, rgba(0,0,0,0.24) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.22), transparent 10%, transparent 90%, rgba(0,0,0,0.28));
    opacity: 0.82;
    mix-blend-mode: normal;
}

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

#category-banner .moji-title-letter {
    text-shadow:
        0 1px 0 rgba(255,255,255,0.70),
        0 -1px 0 rgba(70,18,54,0.82),
        1px 0 0 rgba(255,255,255,0.24),
        -1px 0 0 rgba(28,8,24,0.82),
        0 2px 2px rgba(20,6,18,0.72),
        0 0 10px rgba(255,245,210,0.18) !important;
    filter: drop-shadow(0 1px 0 rgba(28,8,22,0.82)) !important;
}

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

#category-banner {
    animation: mojiNameplateFluid 9s ease-in-out infinite !important;
}

@keyframes mojiNameplateFluid {
    0% {
        background-position:
            0 0, 0 0,
            50% 16%, 78% 28%, 34% 76%, 48% 52%;
    }
    50% {
        background-position:
            0 0, 0 0,
            36% 58%, 58% 18%, 76% 34%, 42% 62%;
    }
    100% {
        background-position:
            0 0, 0 0,
            50% 16%, 78% 28%, 34% 76%, 48% 52%;
    }
}


/* === 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(0,0,0,0.72) !important;
}

#status-panel .sbox.naughty-console.naughty-final-screen::before {
    opacity: 0.38 !important;
}

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