/* Consolidated CSS - grouped by purpose (blocks preserved) */

/* Modals */

@font-face {
            font-family: 'Press Start 2P';
            src: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/PressStart2P-Regular.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        :root {
            --board-size: 720px;
            --lab-bg-stage1: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/lab_stage1.png');
            --lab-bg-stage2: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/lab_stage2.png');
            --lab-bg-stage3: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/lab_stage3.png');
            --lab-bg-fade-ms: 780ms;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
            /* full-page background image, fixed centered - made to work in both narrow and wide configurations */
            background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/lab_stage1.png') center center / cover no-repeat fixed;
            color: #0b3d91;
            box-sizing: border-box;
            padding-top: max(8px, env(safe-area-inset-top));
        }

        .lab-bg-layer {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            transition: opacity var(--lab-bg-fade-ms) ease-in-out;
            will-change: opacity;
        }

        .lab-bg-layer.show {
            opacity: 1;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            z-index: 1;
            transition: opacity 260ms ease-out, background 260ms ease-out;
            background: radial-gradient(120% 90% at 50% 50%, rgba(255, 90, 90, 0) 0%, rgba(255, 90, 90, 0) 62%, rgba(255, 70, 70, 0) 100%);
        }

        body::after {
            content: none;
            position: fixed;
            inset: -35%;
            pointer-events: none;
            z-index: 1;
            opacity: 0;
            will-change: transform, opacity;
        }

        body.phase-2 {
            background: linear-gradient(rgba(20, 8, 20, 0.56), rgba(20, 8, 20, 0.56)), url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/lab_stage2.png') center center / cover no-repeat fixed;
        }

        body.phase-2::before {
            opacity: 0.58;
            background: radial-gradient(120% 90% at 50% 52%, rgba(255, 138, 138, 0) 0%, rgba(255, 138, 138, 0) 58%, rgba(255, 108, 108, 0.22) 100%);
        }

        body.phase-3 {
            background: linear-gradient(rgba(26, 8, 8, 0.64), rgba(26, 8, 8, 0.64)), url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/lab_stage3.png') center center / cover no-repeat fixed;
        }

        body.phase-3::before {
            opacity: 0.88;
            background: radial-gradient(125% 95% at 50% 54%, rgba(255, 124, 124, 0) 0%, rgba(255, 124, 124, 0) 50%, rgba(255, 88, 88, 0.34) 100%);
        }

        body.phase-3::after {
            content: '';
            opacity: 0.24;
            mix-blend-mode: screen;
            background:
                radial-gradient(circle at 88% 12%, rgba(255, 120, 120, 0.15) 0%, rgba(255, 120, 120, 0.07) 24%, rgba(255, 120, 120, 0) 56%),
                conic-gradient(from 0deg, rgba(255, 70, 70, 0) 0deg 290deg, rgba(255, 84, 84, 0.36) 310deg 335deg, rgba(255, 70, 70, 0) 360deg);
            animation: phase3WarningSweep 4.8s linear infinite;
            transform-origin: 88% 12%;
        }

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

        @media (prefers-reduced-motion: reduce) {
            body.phase-3::after {
                animation: none;
                opacity: 0.14;
            }
        }

        /* Make wrap and board semi-transparent so background shows through
        Layout behavior:
        - Default (mobile / narrow): vertical stack � board above, hud spans full width at bottom.
        - Wide screens (min-width:900px): horizontal layout � board on left, hud fixed-width column on right. */
        .wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.18);
            border-radius: 12px;
            position: relative;
            z-index: 2;
            width: 100%;
            box-sizing: border-box;
            max-width: 1200px;
            margin: 0 auto;
        }

        body.phase-2 .wrap {
            background: rgba(255, 255, 255, 0.14);
            box-shadow: 0 0 0 1px rgba(255, 126, 126, 0.18), 0 0 22px rgba(255, 126, 126, 0.14);
        }

        body.phase-3 .wrap {
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 0 1px rgba(255, 98, 98, 0.28), 0 0 30px rgba(255, 88, 88, 0.24);
        }

        .board {
            width: min(var(--board-size), 94vw);
            aspect-ratio: 1;
            background: rgba(255, 255, 255, 0.22);
            border-radius: 12px;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: 1fr;
            gap: 0;
            box-sizing: border-box
        }

        body.phase-2 .board {
            background: rgba(255, 255, 255, 0.18);
            box-shadow: inset 0 0 0 1px rgba(255, 145, 145, 0.18), 0 0 20px rgba(255, 106, 106, 0.16);
        }

        body.phase-3 .board {
            background: rgba(255, 255, 255, 0.15);
            box-shadow: inset 0 0 0 1px rgba(255, 126, 126, 0.24), 0 0 28px rgba(255, 90, 90, 0.24);
        }

        .board.low-click-board-warning {
            animation: lowBoardGlowPulse 920ms ease-in-out infinite;
        }

        @keyframes lowBoardGlowPulse {
            0%, 100% {
                box-shadow: inset 0 0 0 1px rgba(255, 122, 122, 0.34), 0 0 14px rgba(255, 98, 98, 0.22);
            }
            50% {
                box-shadow: inset 0 0 0 2px rgba(255, 150, 150, 0.74), 0 0 26px rgba(255, 108, 108, 0.38);
            }
        }

        .boss-mini-hp {
            position: absolute;
            left: 6%;
            right: 6%;
            top: -3px;
            height: 8px;
            border-radius: 999px;
            border: 1px solid rgba(255, 236, 164, 0.95);
            background: rgba(28, 23, 6, 0.92);
            box-shadow: 0 0 10px rgba(255, 220, 110, 0.5), inset 0 0 0 1px rgba(255, 244, 196, 0.24);
            overflow: hidden;
            z-index: 8;
            pointer-events: none;
        }

        .boss-mini-hp > span {
            display: block;
            width: 100%;
            height: 100%;
            transform-origin: left center;
            transform: scaleX(1);
            background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 6px, rgba(255, 255, 255, 0.05) 6px 12px), linear-gradient(90deg, #f6cb4b, #fff3a6);
            box-shadow: 0 0 12px rgba(255, 226, 120, 0.78);
            transition: transform 150ms ease-out;
        }

        .rotating-blocker {
            position: fixed;
            left: 0;
            top: 0;
            transform: translate(-50%, -50%) rotate(0deg);
            transform-origin: center center;
            border-radius: 999px;
            pointer-events: none;
            z-index: 9000;
            overflow: visible;
            background: linear-gradient(90deg, rgba(26, 122, 62, 0.98), rgba(122, 255, 176, 0.98), rgba(26, 122, 62, 0.98));
            box-shadow: 0 0 0 2px rgba(146, 255, 190, 0.78), 0 0 16px rgba(96, 232, 148, 0.55), inset 0 0 9px rgba(184, 255, 216, 0.5);
            opacity: 0.94;
            transition: left 560ms cubic-bezier(0.2, 0.78, 0.22, 1), top 560ms cubic-bezier(0.2, 0.78, 0.22, 1), transform 560ms cubic-bezier(0.2, 0.78, 0.22, 1), background 180ms ease-out, box-shadow 180ms ease-out;
            will-change: left, top, transform;
            animation: blockerBeamPulse 900ms ease-in-out infinite alternate, blockerBeamBodyBob 700ms ease-in-out infinite;
        }

        .rotating-blocker::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 62%;
            transform: translateY(-50%);
            border-radius: 999px;
            background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 10px, rgba(255, 255, 255, 0.22) 10px 20px, rgba(255, 255, 255, 0.05) 20px 30px);
            mix-blend-mode: screen;
            opacity: 0.8;
            animation: blockerBeamFlow 650ms linear infinite;
            pointer-events: none;
        }

        .rotating-blocker::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 30%;
            transform: translateY(-50%);
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(255, 247, 205, 0.2), rgba(255, 252, 236, 0.95), rgba(255, 247, 205, 0.2));
            box-shadow: 0 0 8px rgba(255, 247, 205, 0.66);
            opacity: 0.95;
            animation: blockerBeamCore 360ms ease-in-out infinite alternate;
            pointer-events: none;
        }

        .rotating-blocker.blocked-hit {
            box-shadow: 0 0 0 2px rgba(78, 206, 128, 0.88), 0 0 18px rgba(42, 158, 90, 0.68);
            background: linear-gradient(90deg, rgba(18, 84, 46, 0.98), rgba(38, 136, 78, 0.98), rgba(18, 84, 46, 0.98));
        }

        .rotating-blocker.blocked-hit::before {
            background: repeating-linear-gradient(90deg, rgba(202, 255, 224, 0.12) 0 8px, rgba(112, 224, 162, 0.56) 8px 16px, rgba(202, 255, 224, 0.12) 16px 24px);
        }

        .rotating-blocker.blocked-hit::after {
            background: linear-gradient(90deg, rgba(204, 255, 224, 0.22), rgba(128, 232, 172, 0.9), rgba(204, 255, 224, 0.22));
            box-shadow: 0 0 10px rgba(98, 210, 144, 0.72);
        }

        .rotating-blocker .blocker-emitter {
            position: absolute;
            top: 50%;
            --emitter-size: clamp(42px, 5.2vw, 56px);
            --emitter-overhang: clamp(8px, 1.2vw, 14px);
            width: var(--emitter-size);
            height: var(--emitter-size);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/nanobot_hover.png');
            background-repeat: no-repeat;
            background-size: 300% 300%;
            background-position: 0% 0%;
            image-rendering: pixelated;
            filter: drop-shadow(0 0 3px rgba(255, 225, 120, 0.45)) saturate(1.03);
            pointer-events: none;
            z-index: 1;
            will-change: transform;
            animation: blockerEmitterFrames 620ms steps(7, end) infinite, blockerEmitterFloatA 1400ms ease-in-out infinite;
        }

        .rotating-blocker .blocker-emitter.e-left {
            left: calc(0px - var(--emitter-overhang));
        }

        .rotating-blocker .blocker-emitter.e-right {
            left: calc(100% + var(--emitter-overhang));
            animation-name: blockerEmitterFrames, blockerEmitterFloatB;
        }

        .rotating-blocker.blocked-hit .blocker-emitter {
            filter: drop-shadow(0 0 3px rgba(255, 132, 110, 0.62)) saturate(1.08);
        }

        .rotating-blocker.frozen {
            background: linear-gradient(90deg, rgba(72, 140, 188, 0.95), rgba(168, 226, 255, 0.95), rgba(72, 140, 188, 0.95));
            box-shadow: 0 0 0 2px rgba(170, 227, 255, 0.82), 0 0 16px rgba(132, 209, 255, 0.58), inset 0 0 10px rgba(216, 246, 255, 0.48);
            animation-duration: 1300ms, 1200ms;
        }

        .rotating-blocker.frozen::after {
            background: linear-gradient(90deg, rgba(210, 242, 255, 0.22), rgba(237, 251, 255, 0.95), rgba(210, 242, 255, 0.22));
            box-shadow: 0 0 10px rgba(190, 238, 255, 0.76);
        }

        .rotating-blocker.overclocked {
            background: linear-gradient(90deg, rgba(24, 146, 68, 0.98), rgba(170, 255, 208, 0.98), rgba(24, 146, 68, 0.98));
            box-shadow: 0 0 0 2px rgba(160, 255, 204, 0.88), 0 0 24px rgba(84, 242, 156, 0.68), inset 0 0 12px rgba(214, 255, 232, 0.6);
            animation-duration: 620ms, 460ms;
        }

        .rotating-blocker.overclocked::before {
            background: repeating-linear-gradient(90deg, rgba(234, 255, 246, 0.1) 0 8px, rgba(176, 255, 220, 0.56) 8px 16px, rgba(234, 255, 246, 0.1) 16px 24px);
            opacity: 0.92;
            animation-duration: 360ms;
        }

        .rotating-blocker.overclocked::after {
            background: linear-gradient(90deg, rgba(220, 255, 238, 0.24), rgba(194, 255, 222, 0.98), rgba(220, 255, 238, 0.24));
            box-shadow: 0 0 12px rgba(132, 238, 176, 0.82);
            animation-duration: 240ms;
        }

        .rotating-blocker.overclocked .blocker-emitter {
            filter: drop-shadow(0 0 5px rgba(166, 255, 207, 0.7)) saturate(1.16) brightness(1.06);
            animation-duration: 520ms, 960ms;
        }

        .rotating-blocker.retreating {
            background: transparent !important;
            box-shadow: none !important;
            opacity: 0.18;
            transition: opacity 140ms linear;
        }

        .rotating-blocker.retreating::before,
        .rotating-blocker.retreating::after {
            opacity: 0 !important;
            animation: none !important;
        }

        .rotating-blocker.retreating .blocker-emitter {
            filter: drop-shadow(0 0 6px rgba(170, 230, 255, 0.58)) saturate(1.06);
        }

        .rotating-blocker.retreating.retreat-launch .blocker-emitter.e-left {
            animation: blockerRetreatLeft 980ms cubic-bezier(0.2, 0.72, 0.2, 1) forwards !important;
        }

        .rotating-blocker.retreating.retreat-launch .blocker-emitter.e-right {
            animation: blockerRetreatRight 980ms cubic-bezier(0.2, 0.72, 0.2, 1) forwards !important;
        }

        @keyframes blockerBeamBodyBob {
            0%, 100% {
                translate: 0 -2px;
            }
            50% {
                translate: 0 2px;
            }
        }

        @keyframes blockerBeamFlow {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 64px 0;
            }
        }

        @keyframes blockerRetreatLeft {
            0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            55% {
                transform: translate(
                    calc(-50% + var(--retreat-mid-x, 48vw)),
                    calc(-50% + var(--retreat-mid-y, -6vh))
                ) scale(1.04);
                opacity: 0.98;
            }
            100% {
                transform: translate(
                    calc(-50% + var(--retreat-end-x, 100vw)),
                    calc(-50% + var(--retreat-end-y, -28vh))
                ) scale(0.74);
                opacity: 0;
            }
        }

        @keyframes blockerRetreatRight {
            0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            55% {
                transform: translate(
                    calc(-50% + var(--retreat-mid-x, -48vw)),
                    calc(-50% + var(--retreat-mid-y, -6vh))
                ) scale(1.04);
                opacity: 0.98;
            }
            100% {
                transform: translate(
                    calc(-50% + var(--retreat-end-x, -100vw)),
                    calc(-50% + var(--retreat-end-y, -28vh))
                ) scale(0.74);
                opacity: 0;
            }
        }

        @keyframes blockerBeamBob {
            0%, 100% {
                transform: translateY(calc(-50% - 2px));
            }
            50% {
                transform: translateY(calc(-50% + 2px));
            }
        }

        @keyframes blockerBeamCore {
            0% {
                opacity: 0.7;
                transform: translateY(-50%) scaleX(0.985);
            }

            100% {
                opacity: 1;
                transform: translateY(-50%) scaleX(1);
            }
        }

        @keyframes blockerBeamPulse {
            0% {
                opacity: 0.86;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes blockerEmitterFrames {
            0%, 14.285% { background-position: 0% 0%; }
            14.286%, 28.571% { background-position: 50% 0%; }
            28.572%, 42.857% { background-position: 100% 0%; }
            42.858%, 57.142% { background-position: 0% 50%; }
            57.143%, 71.428% { background-position: 50% 50%; }
            71.429%, 85.714% { background-position: 100% 50%; }
            85.715%, 100% { background-position: 0% 100%; }
        }

        @keyframes blockerEmitterFloatA {
            0% {
                transform: translate(-50%, -50%) translateY(-1px) rotate(-1.5deg) scale(0.985);
            }

            50% {
                transform: translate(-50%, -50%) translateY(1px) rotate(1.5deg) scale(1.015);
            }

            100% {
                transform: translate(-50%, -50%) translateY(-1px) rotate(-1.5deg) scale(0.985);
            }
        }

        @keyframes blockerEmitterFloatB {
            0% {
                transform: translate(-50%, -50%) translateY(1px) rotate(1.5deg) scale(1.015);
            }

            50% {
                transform: translate(-50%, -50%) translateY(-1px) rotate(-1.5deg) scale(0.985);
            }

            100% {
                transform: translate(-50%, -50%) translateY(1px) rotate(1.5deg) scale(1.015);
            }
        }

        /* HUD styling � responsive: full-width on narrow, right-column on wide, test on mobile and browser */
        .hud {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.04));
            border-radius: 12px;
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
            border: 4px solid rgba(0, 0, 0, 0.25);
            box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.12), -6px -6px 0 rgba(255, 255, 255, 0.02);
            font-family: 'Press Start 2P', monospace;
            color: #ffd166;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
        }

        body.phase-2 .hud {
            border-color: rgba(255, 118, 118, 0.34);
            box-shadow: 8px 8px 0 rgba(50, 0, 0, 0.2), -6px -6px 0 rgba(255, 140, 140, 0.06);
        }

        body.phase-3 .hud {
            border-color: rgba(255, 98, 98, 0.42);
            box-shadow: 8px 8px 0 rgba(56, 0, 0, 0.26), -6px -6px 0 rgba(255, 126, 126, 0.1), 0 0 20px rgba(255, 92, 92, 0.2);
        }

        /* Unified Score + High Score box, fully left-justified */
        .small.scorebox {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            /* stop flex centering */
            text-align: left !important;
            /* override .small center alignment */
            line-height: 1.2;
            width: 100%;
            /* ensures text uses full box width */
        }

            .small.scorebox .score-line,
            .small.scorebox .high-line {
                width: 100%;
                text-align: left !important;
                /* force left alignment inside */
            }

            .small.scorebox .score-line {
                font-size: 9px;
                color: #ffd166;
            }

            .small.scorebox .high-line {
                font-size: 8px;
                opacity: 0.85;
                color: #ffe9b0;
                margin-top: 2px;
                text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
            }

                .small.scorebox .high-line span#highScoreValue {
                    font-size: inherit;
                }

        .level-box {
            font-size: 9px;
            /* or whatever size you want */
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.04));
            border-radius: 12px;
            padding: 8px;
            width: 50%;
            box-sizing: border-box;
            border: 4px solid rgba(0, 0, 0, 0.25);
            box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.12), -6px -6px 0 rgba(255, 255, 255, 0.02);
            font-family: 'Press Start 2P', monospace;
            color: #ffd166;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
        }


        /* On wide screens place HUD to the right at a fixed column width */
        @media (min-width: 900px) {
            .wrap {
                flex-direction: row;
                align-items: flex-start;
                justify-content: center;
                gap: 20px;
                padding: 20px
            }

            .board {
                order: 1;
                width: calc(min(var(--board-size), 74vw));
                max-width: calc(100% - 300px)
            }

            .hud {
                order: 2;
                width: 300px;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                padding: 18px 14px
            }

                .hud .small {
                    align-self: stretch
                }

                .hud button {
                    width: 100%
                }
        }

        /* cell property style */
        .cell {
            background: transparent;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            overflow: visible;
            padding: 0;
            box-sizing: content-box;
            width: 100%;
            height: 100%
        }

        .cell.storm-preview-center,
        .cell.storm-preview-neighbor,
        .cell.storm-preview-diagonal {
            outline-offset: -2px;
            transition: outline-color 120ms linear, box-shadow 120ms linear;
        }

        .cell.storm-preview-center {
            outline: 3px solid rgba(178, 246, 255, 0.96);
            box-shadow: inset 0 0 0 2px rgba(137, 236, 255, 0.28), 0 0 12px rgba(107, 228, 255, 0.34);
        }

        .cell.storm-preview-neighbor {
            outline: 2px solid rgba(121, 228, 255, 0.88);
            box-shadow: inset 0 0 0 2px rgba(121, 228, 255, 0.18);
        }

        .cell.storm-preview-diagonal {
            outline: 2px solid rgba(96, 212, 255, 0.72);
            box-shadow: inset 0 0 0 1px rgba(96, 212, 255, 0.2);
        }

        .cell.storm-hit-center {
            animation: stormHitCenter 220ms ease-out;
        }

        .cell.storm-hit-neighbor {
            animation: stormHitNeighbor 180ms ease-out;
        }

        .cell.storm-hit-diagonal {
            animation: stormHitDiagonal 180ms ease-out;
        }

        @keyframes stormHitCenter {
            0% { filter: brightness(1); }
            35% { filter: brightness(1.52) saturate(1.26); }
            100% { filter: brightness(1); }
        }

        @keyframes stormHitNeighbor {
            0% { filter: brightness(1); }
            35% { filter: brightness(1.32) saturate(1.15); }
            100% { filter: brightness(1); }
        }

        @keyframes stormHitDiagonal {
            0% { filter: brightness(1); }
            35% { filter: brightness(1.22) saturate(1.12); }
            100% { filter: brightness(1); }
        }

        .storm-ring {
            position: fixed;
            width: 24px;
            height: 24px;
            border-radius: 999px;
            border: 2px solid rgba(123, 234, 255, 0.92);
            box-shadow: 0 0 16px rgba(94, 221, 255, 0.55);
            transform: translate(-50%, -50%) scale(0.3);
            pointer-events: none;
            z-index: 26000;
            animation: stormRingExpand 280ms ease-out forwards;
        }

        .storm-electricity {
            position: fixed;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 26006;
            background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/electricity.png');
            background-repeat: no-repeat;
            background-size: 200% 200%;
            background-position: 0% 0%;
            image-rendering: pixelated;
            opacity: 0.58;
            filter: drop-shadow(0 0 9px rgba(142, 225, 255, 0.55));
            will-change: transform, opacity, background-position;
            animation:
                stormElectricityFrames 240ms step-end forwards,
                stormElectricityJitterFade 300ms ease-out 200ms forwards;
        }

        .storm-ring.storm-ring-inner {
            border-width: 3px;
            animation-duration: 250ms;
        }

        .storm-ring.storm-ring-outer {
            border-color: rgba(171, 244, 255, 0.78);
            box-shadow: 0 0 18px rgba(107, 228, 255, 0.4);
            animation-duration: 330ms;
        }

        #board.storm-precharge {
            animation: stormPrechargeBoard 170ms ease-out both;
        }

        #board.boss20-combo-cutoff-flash {
            animation: boss20ComboCutoffFlash 120ms linear both;
            box-shadow: 0 0 0 9999px rgba(255, 250, 240, 0.18) inset, 0 0 34px rgba(255, 88, 88, 0.52);
        }

        #board.boss20-combo-cutoff-shake {
            animation: boss20ComboCutoffShake 240ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
        }

        .storm-precharge-ring {
            position: fixed;
            width: 20px;
            height: 20px;
            border-radius: 999px;
            border: 2px solid rgba(172, 244, 255, 0.88);
            box-shadow: 0 0 18px rgba(107, 228, 255, 0.5), inset 0 0 8px rgba(172, 244, 255, 0.22);
            transform: translate(-50%, -50%) scale(0.24);
            pointer-events: none;
            z-index: 26010;
            animation: stormPrechargeRing 260ms cubic-bezier(0.2, 0.78, 0.25, 1) forwards;
        }

        @keyframes stormRingExpand {
            0% {
                transform: translate(-50%, -50%) scale(0.3);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(3.3);
                opacity: 0;
            }
        }

        @keyframes stormElectricityFrames {
            0%, 24.999% { background-position: 0% 0%; }
            25%, 49.999% { background-position: 100% 0%; }
            50%, 74.999% { background-position: 0% 100%; }
            75%, 100% { background-position: 100% 100%; }
        }

        @keyframes stormElectricityJitterFade {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.56;
            }
            18% {
                transform: translate(calc(-50% - 1px), calc(-50% + 1px)) scale(1.03);
                opacity: 0.52;
            }
            36% {
                transform: translate(calc(-50% + 1px), calc(-50% - 1px)) scale(0.99);
                opacity: 0.46;
            }
            56% {
                transform: translate(calc(-50% - 1px), calc(-50% - 1px)) scale(1.02);
                opacity: 0.34;
            }
            72% {
                transform: translate(calc(-50% + 2px), calc(-50% + 1px)) scale(0.99);
                opacity: 0.24;
            }
            84% {
                transform: translate(calc(-50% - 3px), calc(-50% + 2px)) scale(0.97);
                opacity: 0.16;
            }
            92% {
                transform: translate(calc(-50% + 3px), calc(-50% - 3px)) scale(0.95);
                opacity: 0.09;
            }
            100% {
                transform: translate(calc(-50% - 4px), calc(-50% + 3px)) scale(0.92);
                opacity: 0;
            }
        }

        @keyframes stormPrechargeBoard {
            0% {
                filter: brightness(1) saturate(1);
            }
            38% {
                filter: brightness(1.14) saturate(1.2);
            }
            100% {
                filter: brightness(1) saturate(1);
            }
        }

        @keyframes stormPrechargeRing {
            0% {
                transform: translate(-50%, -50%) scale(0.24);
                opacity: 0.95;
            }
            100% {
                transform: translate(-50%, -50%) scale(3.6);
                opacity: 0;
            }
        }

        .cell.storm-afterglow-center,
        .cell.storm-afterglow-neighbor,
        .cell.storm-afterglow-diagonal {
            outline-offset: -2px;
        }

        .cell.storm-afterglow-center {
            animation: stormAfterglowCenter 440ms ease-out;
        }

        .cell.storm-afterglow-neighbor {
            animation: stormAfterglowNeighbor 420ms ease-out;
        }

        .cell.storm-afterglow-diagonal {
            animation: stormAfterglowDiagonal 400ms ease-out;
        }

        @keyframes stormAfterglowCenter {
            0% {
                outline: 2px solid rgba(167, 244, 255, 0.95);
                box-shadow: inset 0 0 0 1px rgba(144, 236, 255, 0.28), 0 0 8px rgba(110, 226, 255, 0.38);
            }
            55% {
                outline: 1px solid rgba(145, 233, 255, 0.62);
                box-shadow: inset 0 0 0 1px rgba(126, 223, 255, 0.14), 0 0 4px rgba(92, 213, 255, 0.22);
            }
            100% {
                outline: 1px solid rgba(145, 233, 255, 0);
                box-shadow: inset 0 0 0 1px rgba(126, 223, 255, 0), 0 0 0 rgba(92, 213, 255, 0);
            }
        }

        @keyframes stormAfterglowNeighbor {
            0% {
                outline: 2px solid rgba(147, 235, 255, 0.78);
                box-shadow: inset 0 0 0 1px rgba(128, 225, 255, 0.2), 0 0 5px rgba(98, 218, 255, 0.24);
            }
            100% {
                outline: 1px solid rgba(147, 235, 255, 0);
                box-shadow: inset 0 0 0 1px rgba(128, 225, 255, 0), 0 0 0 rgba(98, 218, 255, 0);
            }
        }

        @keyframes stormAfterglowDiagonal {
            0% {
                outline: 1px solid rgba(125, 220, 255, 0.72);
                box-shadow: inset 0 0 0 1px rgba(116, 213, 255, 0.18);
            }
            100% {
                outline: 1px solid rgba(125, 220, 255, 0);
                box-shadow: inset 0 0 0 1px rgba(116, 213, 255, 0);
            }
        }

        /* virus property sytle */
        .virus {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
            box-sizing: content-box
        }

        .cell.has-special {
            outline-offset: -2px;
        }

        .cell.has-special.special-armored {
            box-shadow: none;
        }

        .cell.has-special.special-splitter {
            box-shadow: inset 0 0 0 1px rgba(199, 167, 255, 0.34);
        }

        .cell.has-special.special-frozen {
            box-shadow: inset 0 0 0 1px rgba(145, 234, 255, 0.36);
        }

        .cell.has-special.special-unstable {
            box-shadow: inset 0 0 0 1px rgba(255, 166, 121, 0.36);
        }

        .cell.special-telegraph {
            animation: specialTelegraphPulse 620ms ease-in-out infinite;
        }

        .cell.special-telegraph-strong {
            animation: specialTelegraphStrong 260ms ease-out;
        }

        .virus.special-virus {
            --special-color: #ffd166;
            --special-outline: rgba(255, 209, 102, 0.8);
        }

            .virus.special-virus::after {
                content: '';
                position: absolute;
                inset: 2px;
                border-radius: 50%;
                border: 2px solid var(--special-outline);
                box-shadow: 0 0 8px var(--special-outline);
                pointer-events: none;
                z-index: 5;
            }

        .virus.special-armored {
            --special-color: #ffd166;
            --special-outline: rgba(255, 209, 102, 0.86);
        }

        .virus.special-boss {
            --special-color: #ff7b7b;
            --special-outline: rgba(255, 123, 123, 0.9);
            animation: bossCorePulse 760ms ease-in-out infinite;
        }

            .virus.special-boss .face-sprite {
                overflow: hidden;
                animation: minibossWobble 560ms ease-in-out infinite;
            }

            .virus.special-boss .boss-sprite-sheet {
                width: 100%;
                height: 100%;
                background-position: 50% 0%;
                background-repeat: no-repeat;
                background-size: 100% 200%;
                image-rendering: pixelated;
                animation: minibossSpriteFrames 520ms step-end infinite;
                transform-origin: center center;
            }

            .virus.special-boss .boss-sprite-sheet.boss-sprite-sheet--grid9 {
                background-position: 0% 0%;
                background-size: 300% 300%;
                animation: minibossSpriteFrames9 1080ms step-end infinite;
                transform: translateX(5px) scale(0.95);
                transform-origin: center center;
            }

            .virus.special-boss .boss-sprite-sheet.boss-sprite-sheet--grid6 {
                background-position: 0% 0%;
                background-size: 200% 300%;
                animation: minibossSpriteFrames6 860ms step-end infinite;
                transform: scale(1.14);
                transform-origin: center center;
            }

            .virus.special-boss .boss-sprite-sheet.boss-sprite-sheet--grid16 {
                background-position: 0% 0%;
                background-size: 400% 400%;
                animation: minibossSpriteFrames16 1200ms step-end infinite;
                transform-origin: center center;
            }

            .virus.special-boss.special-boss-level10,
            .virus.special-boss.special-boss-grid9 {
                animation: none;
            }

            .virus.special-boss.special-boss-level10::before,
            .virus.special-boss.special-boss-grid9::before {
                content: none;
                display: none;
            }

            .virus.special-boss::before {
                content: '';
                position: absolute;
                inset: 2px;
                border-radius: 50%;
                background: radial-gradient(circle at 35% 30%, rgba(255, 191, 191, 0.55), rgba(255, 96, 96, 0.15) 46%, rgba(66, 8, 8, 0.15) 100%);
                pointer-events: none;
                z-index: 4;
            }

            .virus.special-boss::after {
                content: none;
                display: none;
            }

        .cell.boss-spawn-tell .virus.special-boss {
            animation: level5BossSpawnTellPulse 320ms ease-out both;
        }

        .cell.boss-spawn-tell .virus.special-boss::before {
            opacity: 0.95;
            background: radial-gradient(circle at 35% 30%, rgba(255, 214, 214, 0.72), rgba(255, 106, 106, 0.32) 44%, rgba(88, 8, 8, 0.18) 100%);
            box-shadow: 0 0 0 2px rgba(255, 118, 118, 0.74), 0 0 16px rgba(255, 88, 88, 0.54), inset 0 0 12px rgba(255, 166, 166, 0.26);
        }

        .cell.boss-goo-tell .virus.special-boss.special-boss-level10 {
            animation: level10BossGooTellPulse 520ms ease-out both;
            box-shadow: 0 0 0 1px rgba(255, 218, 132, 0.72), 0 0 20px rgba(240, 214, 94, 0.52), inset 0 0 12px rgba(255, 232, 168, 0.2);
        }

        .cell.boss-goo-tell .virus.special-boss.special-boss-level10::before {
            content: '';
            display: block;
            background: radial-gradient(circle at 50% 62%, rgba(255, 244, 180, 0.8), rgba(240, 232, 112, 0.34) 38%, rgba(78, 84, 22, 0.12) 72%);
            opacity: 0.98;
            box-shadow: 0 0 0 2px rgba(245, 232, 122, 0.48), 0 0 18px rgba(232, 216, 88, 0.44), inset 0 0 10px rgba(255, 246, 176, 0.3);
        }

        .cell.boss-jam-tell .virus.special-boss.special-boss-level15:not(.special-boss-projection) {
            animation: level15BossJamTellPulse 480ms ease-out both;
            box-shadow: 0 0 0 1px rgba(168, 235, 255, 0.82), 0 0 22px rgba(92, 214, 255, 0.66), 0 0 34px rgba(84, 168, 255, 0.34), inset 0 0 14px rgba(188, 244, 255, 0.22);
        }

        .cell.boss-jam-tell .virus.special-boss.special-boss-level15:not(.special-boss-projection)::before {
            content: '';
            display: block;
            background: radial-gradient(circle at 50% 42%, rgba(220, 247, 255, 0.92), rgba(126, 236, 255, 0.46) 32%, rgba(72, 108, 255, 0.18) 60%, rgba(10, 20, 40, 0.08) 78%);
            opacity: 0.98;
            box-shadow: 0 0 0 2px rgba(196, 248, 255, 0.3), 0 0 18px rgba(118, 236, 255, 0.52), inset 0 0 10px rgba(226, 252, 255, 0.26);
        }

        .cell.boss-projection-tell .virus.special-boss.special-boss-level15:not(.special-boss-projection) {
            animation: level15BossProjectionTellPulse 460ms ease-out both;
            box-shadow: 0 0 0 1px rgba(174, 220, 255, 0.78), 0 0 18px rgba(118, 190, 255, 0.54), 0 0 28px rgba(92, 176, 255, 0.26), inset 0 0 12px rgba(208, 238, 255, 0.16);
        }

        .cell.boss-projection-tell .virus.special-boss.special-boss-level15:not(.special-boss-projection)::before {
            content: '';
            display: block;
            background: radial-gradient(circle at 50% 36%, rgba(230, 246, 255, 0.9), rgba(154, 216, 255, 0.34) 34%, rgba(98, 168, 255, 0.12) 58%, rgba(10, 20, 40, 0.04) 76%);
            opacity: 0.96;
            box-shadow: 0 0 0 1px rgba(214, 246, 255, 0.24), 0 0 14px rgba(144, 212, 255, 0.34), inset 0 0 10px rgba(236, 248, 255, 0.18);
        }

        .virus.special-boss .special-badge {
            display: none;
        }

        .virus.special-boss.special-boss-level15:not(.special-boss-projection) {
            box-shadow: 0 0 0 1px rgba(134, 214, 255, 0.64), 0 0 18px rgba(92, 184, 255, 0.56), inset 0 0 11px rgba(134, 214, 255, 0.2);
        }

            .virus.special-boss.special-boss-level15:not(.special-boss-projection)::before {
                background: radial-gradient(circle at 35% 30%, rgba(196, 236, 255, 0.54), rgba(98, 176, 255, 0.18) 48%, rgba(16, 40, 68, 0.18) 100%);
            }

        .virus.special-boss.special-boss-level20-phase2 {
            box-shadow: 0 0 0 1px rgba(255, 132, 132, 0.72), 0 0 20px rgba(255, 74, 74, 0.62), inset 0 0 14px rgba(255, 120, 120, 0.24);
        }

            .virus.special-boss.special-boss-level20-phase2 .face-sprite {
                transform: scale(1.12);
                transform-origin: center center;
            }

            .virus.special-boss.special-boss-level20-phase2::before {
                content: none;
                display: none;
            }

        .virus.special-boss.special-boss-level20-phase3 {
            box-shadow: 0 0 0 1px rgba(255, 184, 132, 0.78), 0 0 22px rgba(255, 116, 72, 0.66), inset 0 0 16px rgba(255, 142, 108, 0.28);
            animation-duration: 520ms;
        }

            .virus.special-boss.special-boss-level20-phase3 .face-sprite {
                transform: scale(1.15);
                transform-origin: center center;
                animation-duration: 440ms;
            }

        .virus.special-boss.special-boss-level20 {
            animation: none;
        }

            .virus.special-boss.special-boss-level20 .face-sprite {
                animation: none;
                transform: none !important;
            }

        .cell.boss20-cutoff-tell .virus.special-boss.special-boss-level20 {
            animation: boss20ComboCutoffTellPulse 220ms ease-out both;
            box-shadow: 0 0 0 1px rgba(216, 244, 255, 0.86), 0 0 22px rgba(156, 222, 255, 0.72), 0 0 34px rgba(136, 196, 255, 0.38), inset 0 0 16px rgba(228, 248, 255, 0.26);
            filter: brightness(1.08) saturate(1.08);
        }

            .cell.boss20-cutoff-tell .virus.special-boss.special-boss-level20::before {
                content: '';
                display: block;
                background: radial-gradient(circle at 50% 38%, rgba(244, 252, 255, 0.96), rgba(178, 228, 255, 0.52) 30%, rgba(128, 182, 255, 0.18) 56%, rgba(20, 30, 44, 0.06) 74%);
                opacity: 0.98;
                box-shadow: 0 0 0 2px rgba(224, 248, 255, 0.34), 0 0 18px rgba(172, 226, 255, 0.58), inset 0 0 10px rgba(240, 252, 255, 0.2);
            }

        .boss20-cutoff-core-overlay {
            position: fixed;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 50%, rgba(244, 250, 255, 0.82) 0%, rgba(188, 226, 255, 0.38) 26%, rgba(126, 182, 255, 0.14) 46%, rgba(32, 46, 72, 0.04) 60%, rgba(32, 46, 72, 0) 80%);
            box-shadow:
                0 0 14px rgba(178, 226, 255, 0.34),
                0 0 30px rgba(140, 198, 255, 0.18);
            animation: boss20CutoffCoreTellPulse 220ms ease-out both;
            z-index: 95266;
        }

        .boss20-regen-core-overlay {
            position: fixed;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 50%, rgba(236, 255, 218, 0.78) 0%, rgba(182, 255, 142, 0.38) 24%, rgba(108, 222, 116, 0.14) 44%, rgba(24, 48, 20, 0.04) 58%, rgba(24, 48, 20, 0) 80%);
            box-shadow:
                0 0 16px rgba(168, 255, 142, 0.28),
                0 0 34px rgba(116, 236, 126, 0.16);
            animation: boss20RegenCoreTellPulse 320ms ease-out both;
            z-index: 95266;
        }

            .virus.special-boss.special-boss-level20-phase3::before {
                background: radial-gradient(circle at 35% 30%, rgba(255, 230, 205, 0.72), rgba(255, 154, 102, 0.36) 46%, rgba(82, 26, 10, 0.22) 100%);
            }

        .cell.boss20-core-zone {
            outline: none;
        }

        .cell.boss20-core-anchor .virus.special-boss.special-boss-level20-finalform .face-sprite {
            opacity: 0;
        }

        .cell.boss20-core-anchor .virus.special-boss.special-boss-level20-finalform .boss-mini-hp {
            display: none;
        }

        .virus.special-boss.special-boss-level20-weak {
            box-shadow: 0 0 0 1px rgba(148, 224, 255, 0.85), 0 0 24px rgba(112, 202, 255, 0.7), inset 0 0 18px rgba(146, 230, 255, 0.28);
            animation: boss20WeakPointPulse 360ms ease-in-out infinite;
        }

            .virus.special-boss.special-boss-level20-weak::after {
                content: '';
                position: absolute;
                inset: -2px;
                border-radius: 50%;
                border: 2px dashed rgba(172, 236, 255, 0.86);
                box-shadow: 0 0 10px rgba(132, 222, 255, 0.66);
                pointer-events: none;
                z-index: 6;
            }

        .virus.special-boss.special-boss-level20-final-window {
            animation: boss20FinalWindowPulse 230ms ease-in-out infinite;
        }

        .boss20-phase-shift {
            position: fixed;
            z-index: 95240;
            pointer-events: auto;
            border-radius: 10px;
            overflow: hidden;
            background: radial-gradient(circle at center, rgba(255, 78, 78, 0.20), rgba(0, 0, 0, 0.62) 62%);
            border: 2px solid rgba(255, 132, 132, 0.7);
            box-shadow: inset 0 0 18px rgba(255, 112, 112, 0.32), 0 0 26px rgba(255, 66, 66, 0.34);
            animation: boss20PhaseShiftPulse 1800ms ease-in-out infinite;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            text-align: center;
            padding: 16px;
        }

        .boss20-phase-shift__title {
            font-family: 'Press Start 2P', monospace;
            font-size: clamp(13px, 2.2vw, 18px);
            color: #ffd7d7;
            letter-spacing: 0.08em;
            text-shadow: 0 0 8px rgba(255, 168, 168, 0.62), 1px 1px 0 rgba(0, 0, 0, 0.7);
        }

        .boss20-phase-shift__sub {
            font-family: 'Press Start 2P', monospace;
            font-size: clamp(8px, 1.2vw, 11px);
            color: #ffb6b6;
            letter-spacing: 0.06em;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.62);
        }

        .boss20-rescue {
            position: fixed;
            z-index: 95245;
            pointer-events: auto;
            border-radius: 10px;
            overflow: hidden;
            background: radial-gradient(circle at center, rgba(120, 208, 255, 0.24), rgba(0, 0, 0, 0.86) 62%);
            border: 2px solid rgba(142, 220, 255, 0.72);
            box-shadow: inset 0 0 20px rgba(118, 222, 255, 0.36), 0 0 28px rgba(92, 196, 255, 0.34);
            animation: boss20RescuePulse 1600ms ease-in-out infinite;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            text-align: center;
            padding: 16px;
        }

        .boss20-rescue__title {
            font-family: 'Press Start 2P', monospace;
            font-size: clamp(11px, 1.9vw, 16px);
            color: #d8f6ff;
            letter-spacing: 0.06em;
            text-shadow: 0 0 8px rgba(190, 238, 255, 0.68), 1px 1px 0 rgba(0, 0, 0, 0.72);
        }

        .boss20-rescue__sub {
            font-family: 'Press Start 2P', monospace;
            font-size: clamp(7px, 1.1vw, 10px);
            color: #b9ecff;
            letter-spacing: 0.04em;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.64);
        }

        .boss20-phase-shift__hint,
        .boss20-rescue__hint,
        .boss20-final-charge__hint {
            font-family: 'Press Start 2P', monospace;
            font-size: clamp(7px, 1vw, 9px);
            color: #ffe4c1;
            letter-spacing: 0.05em;
            opacity: 0.82;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.66);
            animation: boss20ClickHintPulse 900ms ease-in-out infinite;
        }

        .boss20-final-charge {
            position: fixed;
            z-index: 95248;
            pointer-events: none;
            border-radius: 10px;
            overflow: hidden;
            background: radial-gradient(circle at center, rgba(255, 182, 120, 0.26), rgba(0, 0, 0, 0.88) 64%);
            border: 2px solid rgba(255, 196, 138, 0.78);
            box-shadow: inset 0 0 22px rgba(255, 198, 146, 0.34), 0 0 30px rgba(255, 136, 86, 0.36);
            animation: boss20FinalChargePulse 1200ms ease-in-out both;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            text-align: center;
            padding: 16px;
        }

        .boss20-final-charge__title {
            font-family: 'Press Start 2P', monospace;
            font-size: clamp(12px, 2vw, 17px);
            color: #ffe4c4;
            letter-spacing: 0.08em;
            text-shadow: 0 0 8px rgba(255, 214, 170, 0.66), 1px 1px 0 rgba(0, 0, 0, 0.72);
        }

        .boss20-final-charge__sub {
            font-family: 'Press Start 2P', monospace;
            font-size: clamp(7px, 1.1vw, 10px);
            color: #ffd8b0;
            letter-spacing: 0.04em;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.64);
        }

        .boss20-hero-mark {
            position: fixed;
            width: 58px;
            height: 58px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 95247;
            border: 2px solid rgba(170, 234, 255, 0.9);
            box-shadow: 0 0 14px rgba(132, 222, 255, 0.66), inset 0 0 12px rgba(132, 222, 255, 0.26);
            animation: boss20HeroMarkPulse 780ms ease-out both;
        }

        .boss20-final-burst {
            position: fixed;
            pointer-events: none;
            z-index: 95246;
            border-radius: 10px;
            overflow: hidden;
            background:
                radial-gradient(circle at center, rgba(255, 238, 210, 0.34), rgba(255, 140, 84, 0.2) 30%, rgba(0, 0, 0, 0.8) 70%),
                repeating-linear-gradient(0deg, rgba(255, 194, 148, 0.08) 0 3px, rgba(255, 116, 72, 0.06) 3px 7px);
            border: 2px solid rgba(255, 186, 132, 0.76);
            box-shadow: inset 0 0 24px rgba(255, 196, 146, 0.34), 0 0 34px rgba(255, 128, 86, 0.38);
            animation: boss20FinalBurstPulse 940ms ease-out both;
        }

        body.boss20-board-frozen #board,
        body.boss20-board-frozen #board * {
            animation-play-state: paused !important;
        }

        .boss20-white-flash {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 95270;
            background: #fff;
            opacity: 0;
            animation: boss20WhiteFlash var(--boss20-flash-ms, 50ms) linear forwards;
        }

        .boss20-global-blackout {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 95273;
            background: #000;
            opacity: 0;
            transition: opacity var(--boss20-blackout-ms, 1500ms) linear;
        }

        .boss20-global-blackout.show {
            opacity: 1;
        }

        .boss20-final-form-overlay {
            position: fixed;
            left: 0;
            top: 0;
            width: 120px;
            height: 120px;
            pointer-events: none;
            z-index: 95239;
            overflow: visible;
        }

        .boss20-final-form-sheet {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: 0% 0%;
            background-size: 400% 400%;
            image-rendering: pixelated;
            animation: minibossSpriteFrames16 1200ms step-end infinite;
            filter: drop-shadow(0 0 16px rgba(255, 156, 108, 0.45));
        }

        .boss20-final-form-hp {
            position: absolute;
            left: 4%;
            right: 4%;
            top: -14px;
            height: 13px;
            border-radius: 999px;
            border: 1px solid rgba(255, 236, 164, 0.98);
            background: rgba(22, 16, 6, 0.94);
            box-shadow: 0 0 12px rgba(255, 220, 110, 0.55), inset 0 0 0 1px rgba(255, 244, 196, 0.26);
            overflow: hidden;
            pointer-events: none;
        }

        .boss20-final-form-hp > span {
            display: block;
            width: 100%;
            height: 100%;
            transform-origin: left center;
            transform: scaleX(1);
            background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 8px, rgba(255, 255, 255, 0.05) 8px 16px), linear-gradient(90deg, #f2bf38, #fff0a2);
            box-shadow: 0 0 14px rgba(255, 222, 120, 0.8);
            transition: transform 140ms ease-out;
        }

        @keyframes boss20ComboCutoffFlash {
            0% { filter: brightness(1); }
            35% { filter: brightness(1.32) saturate(1.15); }
            100% { filter: brightness(1); }
        }

        @keyframes boss20ComboCutoffShake {
            0% { transform: translate3d(0, 0, 0); }
            20% { transform: translate3d(-5px, 2px, 0); }
            40% { transform: translate3d(4px, -2px, 0); }
            60% { transform: translate3d(-3px, -1px, 0); }
            80% { transform: translate3d(3px, 1px, 0); }
            100% { transform: translate3d(0, 0, 0); }
        }

        .boss20-final-shot-reticle {
            position: fixed;
            left: 0;
            top: 0;
            width: 28px;
            height: 28px;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 95274;
            border-radius: 999px;
            border: 2px solid rgba(152, 236, 255, 0.95);
            box-shadow: 0 0 14px rgba(114, 222, 255, 0.78), inset 0 0 8px rgba(142, 232, 255, 0.28);
            animation: boss20FinalReticlePulse 700ms ease-in-out infinite;
        }

        .boss20-final-shot-reticle::before,
        .boss20-final-shot-reticle::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            background: rgba(176, 244, 255, 0.95);
            transform: translate(-50%, -50%);
            box-shadow: 0 0 8px rgba(134, 228, 255, 0.84);
        }

        .boss20-final-shot-reticle::before {
            width: 2px;
            height: 130%;
        }

        .boss20-final-shot-reticle::after {
            width: 130%;
            height: 2px;
        }

        .boss20-shatter-sprite {
            position: fixed;
            left: 0;
            top: 0;
            width: 120px;
            height: 120px;
            transform: translate(-50%, -50%) scale(0.62);
            transform-origin: center center;
            pointer-events: none;
            z-index: 95271;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            image-rendering: pixelated;
            filter: saturate(1.05) brightness(1.08);
            opacity: 0;
            animation: boss20ShatterSprite 460ms cubic-bezier(0.16, 0.8, 0.24, 1) forwards;
        }

        .boss20-shatter-shard {
            position: fixed;
            left: 0;
            top: 0;
            width: 10px;
            height: 4px;
            border-radius: 2px;
            border: 1px solid rgba(250, 252, 255, 0.84);
            background: linear-gradient(180deg, rgba(252, 255, 255, 0.96), rgba(200, 232, 255, 0.66));
            box-shadow: 0 0 8px rgba(208, 236, 255, 0.6);
            pointer-events: none;
            z-index: 95272;
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.8);
            animation: boss20ShatterShard 420ms ease-out forwards;
        }

        .boss20-drain-layer {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 95269;
            overflow: hidden;
        }

        .boss20-drain-beam {
            position: fixed;
            left: 0;
            top: 0;
            height: 10px;
            border-radius: 999px;
            transform-origin: left center;
            pointer-events: none;
            z-index: 95269;
            background:
                linear-gradient(90deg,
                    rgba(112, 224, 255, 0.08) 0%,
                    rgba(196, 246, 255, 0.9) 20%,
                    rgba(255, 255, 255, 0.98) 50%,
                    rgba(196, 246, 255, 0.9) 80%,
                    rgba(112, 224, 255, 0.08) 100%);
            box-shadow:
                0 0 10px rgba(166, 234, 255, 0.78),
                0 0 26px rgba(116, 216, 255, 0.58),
                inset 0 0 10px rgba(255, 255, 255, 0.66);
            animation: boss20DrainBeamPulse 220ms ease-in-out infinite alternate;
        }

        .boss20-drain-bot {
            position: fixed;
            left: 0;
            top: 0;
            width: 15px;
            height: 15px;
            transform: translate(-50%, -50%);
            pointer-events: none;
            image-rendering: pixelated;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            filter: drop-shadow(0 0 8px rgba(152, 236, 255, 0.72));
            animation: boss20DrainBotFly var(--dur, 420ms) cubic-bezier(0.1, 0.72, 0.2, 1) forwards;
        }

        .cell.boss20-phase2-transform .virus.special-boss.special-boss-level20 {
            animation: boss20Phase2SwapShake 820ms cubic-bezier(0.14, 0.72, 0.18, 1) both;
        }

        .virus.special-boss.special-boss-projection {
            --special-color: #7ecbff;
            --special-outline: rgba(132, 211, 255, 0.86);
            opacity: 0.74;
            filter: saturate(0.6) brightness(0.95) contrast(0.9);
            box-shadow: 0 0 0 1px rgba(134, 214, 255, 0.58), 0 0 16px rgba(84, 172, 255, 0.46), inset 0 0 12px rgba(128, 220, 255, 0.2);
            animation: bossProjectionPulse 640ms ease-in-out infinite;
        }

            .virus.special-boss.special-boss-projection::before {
                content: '';
                position: absolute;
                inset: 2px;
                border-radius: 50%;
                background: radial-gradient(circle at 36% 28%, rgba(200, 239, 255, 0.54), rgba(115, 185, 255, 0.2) 48%, rgba(8, 24, 46, 0.24) 100%);
                pointer-events: none;
                z-index: 4;
            }

            .virus.special-boss.special-boss-projection::after {
                content: '';
                position: absolute;
                inset: 2px;
                border-radius: 50%;
                background: repeating-linear-gradient(0deg, rgba(172, 228, 255, 0.22) 0 2px, rgba(70, 130, 188, 0.06) 2px 5px);
                opacity: 0.42;
                pointer-events: none;
                z-index: 5;
                mix-blend-mode: screen;
                animation: bossProjectionScan 760ms linear infinite;
            }

            .virus.special-boss.special-boss-projection .boss-sprite-sheet {
                opacity: 0.9;
                filter: saturate(0.66) brightness(1.03);
            }

            .virus.special-boss.special-boss-projection .face-sprite {
                animation-duration: 720ms;
            }

            .virus.special-armored::before {
                content: '';
                position: absolute;
                inset: 3px;
                border-radius: 50%;
                background:
                    repeating-linear-gradient(60deg, rgba(104, 172, 255, 0.34) 0 3px, transparent 3px 8px),
                    repeating-linear-gradient(-60deg, rgba(86, 156, 246, 0.3) 0 3px, transparent 3px 8px),
                    repeating-linear-gradient(0deg, rgba(72, 138, 228, 0.24) 0 3px, transparent 3px 8px);
                opacity: 0.88;
                pointer-events: none;
                z-index: 4;
                animation: antibodyShellDrift 1800ms linear infinite;
            }

            .virus.special-armored::after {
                border: 2px solid rgba(86, 168, 255, 0.98);
                box-shadow: 0 0 12px rgba(70, 154, 244, 0.8), inset 0 0 10px rgba(132, 198, 255, 0.28);
            }

            .virus.special-armored .face-sprite::after {
                content: '';
                position: absolute;
                left: 14%;
                top: 10%;
                width: 56%;
                height: 28%;
                border-radius: 50%;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.06));
                transform: rotate(-18deg);
                pointer-events: none;
                z-index: 4;
            }

        .cell.shield-block.special-armored {
            animation: shieldBlockCellFlash 220ms ease-out;
        }

        .virus.special-armored.shield-hit::after {
            animation: shieldBlockRingFlash 220ms ease-out;
        }

        .virus.special-armored.shield-hit::before {
            animation: shieldGlassFlash 220ms ease-out;
        }

        .virus.special-splitter {
            --special-color: #c7a7ff;
            --special-outline: rgba(199, 167, 255, 0.84);
        }

        .virus.special-frozen {
            --special-color: #91eaff;
            --special-outline: rgba(145, 234, 255, 0.84);
        }

        .virus.special-unstable {
            --special-color: #ff9e62;
            --special-outline: rgba(255, 166, 121, 0.86);
            animation: specialUnstablePulse 640ms ease-in-out infinite;
        }

        .virus.special-armored .special-badge {
            display: none;
        }

        .special-badge {
            position: absolute;
            top: 1px;
            right: 1px;
            width: 14px;
            height: 14px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            line-height: 1;
            color: #09141f;
            background: var(--special-color);
            border: 1px solid rgba(5, 12, 18, 0.62);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.34);
            z-index: 6;
            pointer-events: none;
            text-transform: uppercase;
        }

        @keyframes specialUnstablePulse {
            0% {
                filter: brightness(1);
            }
            50% {
                filter: brightness(1.16);
            }
            100% {
                filter: brightness(1);
            }
        }

        @keyframes bossCorePulse {
            0% {
                transform: scale(1);
                filter: brightness(1);
            }
            50% {
                transform: scale(1.03);
                filter: brightness(1.2);
            }
            100% {
                transform: scale(1);
                filter: brightness(1);
            }
        }

        @keyframes bossProjectionPulse {
            0% {
                transform: scale(1);
                opacity: 0.68;
            }
            50% {
                transform: scale(1.02);
                opacity: 0.82;
            }
            100% {
                transform: scale(1);
                opacity: 0.68;
            }
        }

        @keyframes bossProjectionScan {
            0% {
                background-position: 0 0;
                opacity: 0.36;
            }
            50% {
                background-position: 0 7px;
                opacity: 0.48;
            }
            100% {
                background-position: 0 14px;
                opacity: 0.36;
            }
        }

        @keyframes boss20PhaseShiftPulse {
            0% {
                opacity: 0.9;
                transform: scale(0.96);
                filter: saturate(0.9) brightness(0.9);
            }
            16% {
                opacity: 1;
                transform: scale(1);
                filter: saturate(1.08) brightness(1.04);
            }
            74% {
                opacity: 1;
                transform: scale(1);
                filter: saturate(1.04) brightness(1.02);
            }
            100% {
                opacity: 0.98;
                transform: scale(1.01);
                filter: saturate(1.02) brightness(1.01);
            }
        }

        @keyframes boss20RescuePulse {
            0% {
                opacity: 0.9;
                transform: scale(0.97);
                filter: saturate(0.92) brightness(0.92);
            }
            18% {
                opacity: 1;
                transform: scale(1);
                filter: saturate(1.08) brightness(1.05);
            }
            78% {
                opacity: 1;
                transform: scale(1);
                filter: saturate(1.04) brightness(1.02);
            }
            100% {
                opacity: 0.98;
                transform: scale(1.005);
                filter: saturate(1.03) brightness(1.01);
            }
        }

        @keyframes boss20WeakPointPulse {
            0%, 100% {
                filter: saturate(1.02) brightness(1.02);
                transform: translateZ(0);
            }
            50% {
                filter: saturate(1.14) brightness(1.12);
                transform: translateZ(0);
            }
        }

        @keyframes boss20FinalWindowPulse {
            0%, 100% {
                filter: saturate(1.08) brightness(1.06);
            }
            50% {
                filter: saturate(1.22) brightness(1.24);
            }
        }

        @keyframes boss20FinalChargePulse {
            0% {
                opacity: 0;
                transform: scale(0.97);
                filter: saturate(0.9) brightness(0.9);
            }
            15% {
                opacity: 1;
                transform: scale(1);
                filter: saturate(1.08) brightness(1.05);
            }
            85% {
                opacity: 1;
                transform: scale(1);
                filter: saturate(1.06) brightness(1.03);
            }
            100% {
                opacity: 0;
                transform: scale(1.02);
                filter: saturate(0.96) brightness(0.94);
            }
        }

        @keyframes boss20HeroMarkPulse {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.56);
            }
            40% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.05);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.32);
            }
        }

        @keyframes boss20FinalBurstPulse {
            0% {
                opacity: 0;
                transform: scale(0.98);
            }
            18% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(1.02);
            }
        }

        @keyframes boss20WhiteFlash {
            0% { opacity: 0; }
            10% { opacity: 0.98; }
            100% { opacity: 0; }
        }

        @keyframes boss20ShatterSprite {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.52);
                filter: brightness(1.36) saturate(1.16);
            }
            20% {
                opacity: 0.96;
                transform: translate(-50%, -50%) scale(1.08);
                filter: brightness(1.14) saturate(1.08);
            }
            72% {
                opacity: 0.86;
                transform: translate(-50%, -50%) scale(1.04);
                filter: brightness(1.06) saturate(1.03);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.18);
                filter: brightness(0.98) saturate(0.95);
            }
        }

        @keyframes boss20ShatterShard {
            0% {
                opacity: 0.98;
                transform: translate(-50%, -50%) rotate(0deg) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--rot, 0deg)) scale(0.6);
            }
        }

        @keyframes boss20FinalReticlePulse {
            0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.9; }
            50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
        }

        @keyframes boss20DrainBotFly {
            0% {
                opacity: 0.96;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.42);
            }
        }

        @keyframes boss20DrainBeamPulse {
            0% {
                opacity: 0.68;
                filter: brightness(0.92);
            }
            100% {
                opacity: 0.98;
                filter: brightness(1.14);
            }
        }

        @keyframes boss20Phase2SwapShake {
            0% {
                transform: translate(0, 0) rotate(0deg) scale(1);
                filter: brightness(1);
            }
            10% {
                transform: translate(-5px, 2px) rotate(-1.3deg) scale(1.02);
                filter: brightness(1.12);
            }
            20% {
                transform: translate(5px, -3px) rotate(1.4deg) scale(1.03);
            }
            34% {
                transform: translate(-6px, 3px) rotate(-1.8deg) scale(1.04);
            }
            48% {
                transform: translate(6px, -2px) rotate(1.6deg) scale(1.03);
            }
            62% {
                transform: translate(-4px, 2px) rotate(-1.1deg) scale(1.02);
            }
            76% {
                transform: translate(3px, -1px) rotate(0.7deg) scale(1.01);
            }
            100% {
                transform: translate(0, 0) rotate(0deg) scale(1);
                filter: brightness(1);
            }
        }

        @keyframes minibossSpriteFrames {
            0%, 49.999% {
                background-position: 50% 0%;
            }
            50%, 100% {
                background-position: 50% 100%;
            }
        }

        @keyframes minibossSpriteFrames9 {
            0%, 11.111% { background-position: 0% 0%; }
            11.112%, 22.222% { background-position: 50% 0%; }
            22.223%, 33.333% { background-position: 100% 0%; }
            33.334%, 44.444% { background-position: 0% 50%; }
            44.445%, 55.555% { background-position: 50% 50%; }
            55.556%, 66.666% { background-position: 100% 50%; }
            66.667%, 77.777% { background-position: 0% 100%; }
            77.778%, 88.888% { background-position: 50% 100%; }
            88.889%, 100% { background-position: 100% 100%; }
        }

        @keyframes minibossSpriteFrames6 {
            0%, 16.666% { background-position: 0% 0%; }
            16.667%, 33.333% { background-position: 100% 0%; }
            33.334%, 50% { background-position: 0% 50%; }
            50.001%, 66.666% { background-position: 100% 50%; }
            66.667%, 83.333% { background-position: 0% 100%; }
            83.334%, 100% { background-position: 100% 100%; }
        }

        @keyframes minibossSpriteFrames16 {
            0%, 6.25% { background-position: 0% 0%; }
            6.251%, 12.5% { background-position: 33.333% 0%; }
            12.501%, 18.75% { background-position: 66.666% 0%; }
            18.751%, 25% { background-position: 100% 0%; }
            25.001%, 31.25% { background-position: 0% 33.333%; }
            31.251%, 37.5% { background-position: 33.333% 33.333%; }
            37.501%, 43.75% { background-position: 66.666% 33.333%; }
            43.751%, 50% { background-position: 100% 33.333%; }
            50.001%, 56.25% { background-position: 0% 66.666%; }
            56.251%, 62.5% { background-position: 33.333% 66.666%; }
            62.501%, 68.75% { background-position: 66.666% 66.666%; }
            68.751%, 75% { background-position: 100% 66.666%; }
            75.001%, 81.25% { background-position: 0% 100%; }
            81.251%, 87.5% { background-position: 33.333% 100%; }
            87.501%, 93.75% { background-position: 66.666% 100%; }
            93.751%, 100% { background-position: 100% 100%; }
        }

        @keyframes minibossWobble {
            0%, 100% {
                transform: translate(0, 0) scale(1);
            }
            25% {
                transform: translate(1px, -1px) scale(1.02);
            }
            50% {
                transform: translate(-1px, 1px) scale(0.99);
            }
            75% {
                transform: translate(-1px, -1px) scale(1.015);
            }
        }

        @keyframes level5BossSpawnTellPulse {
            0% {
                transform: scale(1);
                filter: brightness(1);
            }
            40% {
                transform: scale(1.08);
                filter: brightness(1.18) saturate(1.08);
            }
            100% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
            }
        }

        @keyframes level10BossGooTellPulse {
            0% {
                transform: scale(1) translateY(0);
                filter: brightness(1);
            }
            35% {
                transform: scale(1.04) translateY(-2px);
                filter: brightness(1.14) saturate(1.06);
            }
            70% {
                transform: scale(1.02) translateY(1px);
                filter: brightness(1.08) saturate(1.02);
            }
            100% {
                transform: scale(1) translateY(0);
                filter: brightness(1);
            }
        }

        @keyframes level15BossJamTellPulse {
            0% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
                opacity: 1;
            }
            16% {
                transform: scale(1.03);
                filter: brightness(1.16) saturate(1.24);
                opacity: 0.98;
            }
            28% {
                transform: scale(1.01);
                filter: brightness(0.9) saturate(0.88);
                opacity: 0.84;
            }
            48% {
                transform: scale(1.04);
                filter: brightness(1.18) saturate(1.3);
                opacity: 1;
            }
            68% {
                transform: scale(0.99);
                filter: brightness(0.94) saturate(0.92);
                opacity: 0.88;
            }
            100% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
                opacity: 1;
            }
        }

        @keyframes level15BossProjectionTellPulse {
            0% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
                opacity: 1;
            }
            30% {
                transform: scale(1.03);
                filter: brightness(1.12) saturate(1.1);
                opacity: 0.96;
            }
            58% {
                transform: scale(1.01);
                filter: brightness(1.04) saturate(1.04);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
                opacity: 1;
            }
        }

        @keyframes boss20ComboCutoffTellPulse {
            0% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
                opacity: 1;
            }
            42% {
                transform: scale(1.04);
                filter: brightness(1.2) saturate(1.14);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
                opacity: 1;
            }
        }

        @keyframes boss20CutoffCoreTellPulse {
            0% {
                opacity: 0.36;
                transform: translate(-50%, -50%) scale(0.88);
            }
            42% {
                opacity: 0.76;
                transform: translate(-50%, -50%) scale(1.01);
            }
            100% {
                opacity: 0.58;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes boss20RegenCoreTellPulse {
            0% {
                opacity: 0.3;
                transform: translate(-50%, -50%) scale(0.84);
            }
            38% {
                opacity: 0.64;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                opacity: 0.46;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes antibodyShellDrift {
            0% {
                background-position: 0 0, 0 0, 0 0;
            }
            100% {
                background-position: 18px 0, -18px 0, 10px 0;
            }
        }

        @keyframes shieldBlockCellFlash {
            0% {
                box-shadow: inset 0 0 0 1px rgba(74, 156, 244, 0.5), inset 0 0 12px rgba(108, 186, 255, 0.18);
            }
            50% {
                box-shadow: inset 0 0 0 3px rgba(156, 218, 255, 0.96), inset 0 0 20px rgba(112, 192, 255, 0.36);
            }
            100% {
                box-shadow: inset 0 0 0 1px rgba(74, 156, 244, 0.5), inset 0 0 12px rgba(108, 186, 255, 0.18);
            }
        }

        @keyframes shieldBlockRingFlash {
            0% {
                filter: brightness(1);
                transform: scale(1);
            }
            50% {
                filter: brightness(1.35);
                transform: scale(1.05);
            }
            100% {
                filter: brightness(1);
                transform: scale(1);
            }
        }

        @keyframes shieldGlassFlash {
            0% {
                opacity: 0.78;
                filter: brightness(1);
            }
            45% {
                opacity: 0.98;
                filter: brightness(1.32);
            }
            100% {
                opacity: 0.78;
                filter: brightness(1);
            }
        }

        .shield-crack-fx {
            position: fixed;
            border-radius: 999px;
            pointer-events: none;
            z-index: 26012;
            transform: translate(-50%, -50%);
            opacity: 0;
            overflow: hidden;
        }

        .shield-crack-fx::before {
            content: '';
            position: absolute;
            inset: 8%;
            border-radius: 999px;
            background:
                linear-gradient(62deg, transparent 0 42%, rgba(186, 232, 255, 0.98) 42% 47%, transparent 47% 100%),
                linear-gradient(-18deg, transparent 0 50%, rgba(148, 210, 255, 0.95) 50% 55%, transparent 55% 100%),
                linear-gradient(10deg, transparent 0 60%, rgba(124, 194, 255, 0.92) 60% 64.5%, transparent 64.5% 100%),
                linear-gradient(-68deg, transparent 0 56%, rgba(176, 224, 255, 0.94) 56% 61%, transparent 61% 100%);
            filter: drop-shadow(0 0 3px rgba(112, 192, 255, 0.78));
        }

        .shield-crack-fx.stage-1 {
            animation: shieldCrackStage1 190ms ease-out forwards;
        }

        .shield-crack-fx.stage-2 {
            animation: shieldCrackStage2 260ms ease-out forwards;
        }

        @keyframes shieldCrackStage1 {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.6);
            }
            35% {
                opacity: 0.96;
                transform: translate(-50%, -50%) scale(0.94);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.04);
            }
        }

        @keyframes shieldCrackStage2 {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.75) rotate(0deg);
            }
            30% {
                opacity: 0.92;
                transform: translate(-50%, -50%) scale(1.02) rotate(-2deg);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.14) rotate(3deg);
            }
        }

        @keyframes specialTelegraphPulse {
            0% {
                outline: 1px solid rgba(255, 223, 132, 0.32);
                outline-offset: -2px;
                box-shadow: inset 0 0 0 1px rgba(255, 223, 132, 0.14);
            }
            45% {
                outline: 2px solid rgba(255, 239, 175, 0.76);
                outline-offset: -2px;
                box-shadow: inset 0 0 0 1px rgba(255, 239, 175, 0.24), 0 0 8px rgba(255, 231, 153, 0.24);
            }
            100% {
                outline: 1px solid rgba(255, 223, 132, 0.32);
                outline-offset: -2px;
                box-shadow: inset 0 0 0 1px rgba(255, 223, 132, 0.14);
            }
        }

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

        .goo-shield-overlay {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 88%;
            height: 88%;
            transform: translate(calc(-50% + var(--g-ox, 0%)), calc(-50% + var(--g-oy, 0%))) rotate(var(--g-rot, 0deg)) scale(var(--g-scale, 1));
            border-radius: 52% 48% 44% 56% / 58% 42% 53% 47%;
            pointer-events: none;
            z-index: 4;
            opacity: 0.98;
            background:
                radial-gradient(circle at 26% 22%, rgba(255, 255, 212, 0.9) 0%, rgba(255, 247, 142, 0.66) 21%, rgba(255, 224, 88, 0.28) 50%, rgba(255, 206, 68, 0) 76%),
                radial-gradient(circle at 68% 62%, rgba(230, 176, 42, 0.94) 0%, rgba(154, 102, 18, 0.62) 48%, rgba(104, 72, 10, 0.28) 72%, rgba(104, 72, 10, 0) 92%),
                radial-gradient(circle at 46% 78%, rgba(147, 96, 14, 0.38) 0%, rgba(147, 96, 14, 0) 58%);
            box-shadow: 0 0 13px rgba(255, 210, 86, 0.62), inset 0 0 12px rgba(84, 56, 8, 0.44);
            animation: gooShieldIdle 820ms ease-in-out infinite alternate;
        }

        .goo-shield-overlay::before {
            content: '';
            position: absolute;
            inset: 6% 10% 12% 8%;
            border-radius: 58% 42% 50% 50% / 52% 40% 60% 48%;
            background:
                radial-gradient(circle at 24% 60%, rgba(104, 66, 8, 0.48) 0%, rgba(104, 66, 8, 0) 44%),
                radial-gradient(circle at 74% 28%, rgba(126, 82, 12, 0.4) 0%, rgba(126, 82, 12, 0) 42%),
                radial-gradient(circle at 52% 58%, rgba(255, 236, 130, 0.22) 0%, rgba(255, 236, 130, 0) 40%);
            opacity: 0.9;
        }

        .goo-shield-overlay::after {
            content: '';
            position: absolute;
            left: var(--g-shine-x, 56%);
            top: var(--g-shine-y, 34%);
            width: 36%;
            height: 20%;
            border-radius: 999px;
            transform: translate(-50%, -50%) rotate(-26deg);
            background: linear-gradient(180deg, rgba(255, 255, 236, 0.88), rgba(255, 255, 236, 0.12));
            opacity: 0.96;
            filter: blur(0.1px);
        }

        .goo-shield-overlay.fresh {
            animation: gooShieldFresh 220ms ease-out, gooShieldIdle 820ms ease-in-out 220ms infinite alternate;
        }

        @keyframes gooShieldIdle {
            0% { transform: translate(calc(-50% + var(--g-ox, 0%)), calc(-50% + var(--g-oy, 0%))) rotate(var(--g-rot, 0deg)) scale(var(--g-scale, 1)); }
            100% { transform: translate(calc(-50% + var(--g-ox, 0%)), calc(-50% + var(--g-oy, 0%))) rotate(calc(var(--g-rot, 0deg) + 1.2deg)) scale(calc(var(--g-scale, 1) * 1.02)); }
        }

        @keyframes gooShieldFresh {
            0% { opacity: 0.12; transform: translate(calc(-50% + var(--g-ox, 0%)), calc(-50% + var(--g-oy, 0%))) rotate(var(--g-rot, 0deg)) scale(0.68); }
            100% { opacity: 0.95; transform: translate(calc(-50% + var(--g-ox, 0%)), calc(-50% + var(--g-oy, 0%))) rotate(var(--g-rot, 0deg)) scale(var(--g-scale, 1)); }
        }

        .cell.has-biofilm {
            box-shadow: none;
        }

        .biofilm-overlay {
            position: absolute;
            left: 50%;
            top: 50%;
            width: var(--b-size, 68%);
            height: var(--b-size, 68%);
            transform: translate(-50%, -50%) scale(var(--b-scale, 1));
            border-radius: 50%;
            pointer-events: none;
            z-index: 4;
            background:
                radial-gradient(circle at 26% 22%, rgba(255, 255, 212, 0.9) 0%, rgba(255, 247, 142, 0.66) 21%, rgba(255, 224, 88, 0.28) 50%, rgba(255, 206, 68, 0) 76%),
                radial-gradient(circle at 68% 62%, rgba(230, 176, 42, 0.9) 0%, rgba(154, 102, 18, 0.56) 48%, rgba(104, 72, 10, 0.22) 72%, rgba(104, 72, 10, 0) 92%),
                radial-gradient(circle at 46% 78%, rgba(147, 96, 14, 0.24) 0%, rgba(147, 96, 14, 0) 58%);
            box-shadow: inset 0 0 12px rgba(84, 56, 8, 0.24), 0 0 8px rgba(255, 210, 86, 0.34);
            opacity: 0.93;
            animation: biofilmWobble var(--b-wobble-ms, 1400ms) ease-in-out infinite;
            animation-delay: var(--b-wobble-delay, 0ms);
        }

        .biofilm-overlay::before {
            content: '';
            position: absolute;
            left: var(--b-sheen-x, 56%);
            top: var(--b-sheen-y, 34%);
            width: 36%;
            height: 20%;
            border-radius: 999px;
            transform: translate(-50%, -50%) rotate(-26deg);
            background: linear-gradient(180deg, rgba(255, 255, 236, 0.82), rgba(255, 255, 236, 0.12));
            opacity: 0.96;
            filter: blur(0.1px);
        }

        .cell.biofilm-hit .biofilm-overlay {
            animation: biofilmHitPulse 260ms ease-out;
        }

        .biofilm-absorb-fx {
            position: fixed;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            transform: translate(-50%, -50%) scale(0.4);
            pointer-events: none;
            z-index: 26022;
            border: 1px solid rgba(226, 255, 158, 0.86);
            box-shadow: 0 0 12px rgba(182, 232, 82, 0.64);
            background: radial-gradient(circle, rgba(240, 255, 188, 0.84) 0%, rgba(186, 224, 72, 0.4) 42%, rgba(120, 164, 42, 0) 76%);
            opacity: 0;
            animation: biofilmAbsorbFx 280ms ease-out forwards;
        }

        @keyframes biofilmWobble {
            0% { filter: saturate(0.98) brightness(0.96); transform: translate(-50%, -50%) scale(calc(var(--b-scale, 1) * 0.985)); }
            40% { filter: saturate(1.03) brightness(1.02); transform: translate(-50%, -51%) scale(calc(var(--b-scale, 1) * 1.02)); }
            100% { filter: saturate(0.99) brightness(0.98); transform: translate(-50%, -50%) scale(var(--b-scale, 1)); }
        }

        @keyframes biofilmHitPulse {
            0% { opacity: 0.92; filter: brightness(1.12) saturate(1.14); }
            100% { opacity: 0.5; filter: brightness(0.9) saturate(0.9); }
        }

        @keyframes biofilmAbsorbFx {
            0% { opacity: 0.92; transform: translate(-50%, -50%) scale(0.46); }
            70% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.2); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1.48); }
        }

        .boss-goo-spit-fx {
            position: fixed;
            left: 0;
            top: 0;
            width: 34px;
            height: 26px;
            border-radius: 58% 42% 64% 36% / 48% 54% 46% 52%;
            pointer-events: none;
            z-index: 26016;
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.6) rotate(var(--goo-rot, 0deg));
            background:
                radial-gradient(circle at 30% 28%, rgba(255, 255, 216, 0.95) 0%, rgba(255, 244, 144, 0.6) 24%, rgba(255, 225, 84, 0.22) 54%, rgba(255, 225, 84, 0) 78%),
                radial-gradient(circle at 68% 66%, rgba(227, 172, 44, 0.86) 0%, rgba(157, 108, 20, 0.44) 50%, rgba(118, 80, 12, 0.15) 76%, rgba(118, 80, 12, 0) 94%);
            box-shadow: 0 0 10px rgba(255, 208, 80, 0.6), inset 0 0 8px rgba(104, 74, 10, 0.32);
            animation: bossGooSpitWobble 180ms ease-in-out infinite alternate;
        }

        .boss-goo-muzzle-fx {
            position: fixed;
            left: 0;
            top: 0;
            width: 24px;
            height: 14px;
            border-radius: 999px;
            pointer-events: none;
            z-index: 26015;
            opacity: 0;
            transform: translate(-50%, -50%) rotate(var(--spit-ang, 0deg));
            background:
                linear-gradient(90deg, rgba(255, 233, 116, 0), rgba(236, 178, 42, 0.78), rgba(137, 96, 14, 0.46)),
                radial-gradient(circle at 70% 50%, rgba(255, 250, 188, 0.78) 0%, rgba(255, 250, 188, 0) 62%);
            filter: blur(0.3px);
            animation: bossGooMuzzleBlast 220ms ease-out forwards;
        }

        .boss-goo-spit-fx::before {
            content: '';
            position: absolute;
            right: 76%;
            top: 50%;
            width: 70%;
            height: 40%;
            border-radius: 999px;
            transform: translateY(-50%) rotate(-14deg);
            background: linear-gradient(90deg, rgba(255, 224, 96, 0), rgba(219, 164, 32, 0.66) 50%, rgba(104, 74, 12, 0.42));
            filter: blur(0.35px);
            opacity: 0.92;
        }

        .boss-goo-spit-fx::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 52%;
            width: 38%;
            height: 20%;
            border-radius: 999px;
            transform: translate(-50%, -50%) rotate(-18deg);
            background: linear-gradient(180deg, rgba(255, 255, 234, 0.9), rgba(255, 255, 234, 0.16));
            opacity: 0.9;
        }

        .boss-goo-impact-fx {
            position: fixed;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border-radius: 62% 38% 56% 44% / 44% 56% 40% 60%;
            pointer-events: none;
            z-index: 26016;
            transform: translate(-50%, -50%) scale(0.52);
            opacity: 0;
            background:
                radial-gradient(circle at 34% 32%, rgba(255, 255, 224, 0.82) 0%, rgba(255, 238, 126, 0.36) 34%, rgba(255, 215, 86, 0) 76%),
                radial-gradient(circle at 62% 62%, rgba(228, 176, 44, 0.82) 0%, rgba(156, 108, 21, 0.34) 58%, rgba(118, 80, 12, 0) 88%);
            box-shadow: 0 0 8px rgba(255, 211, 90, 0.45);
            animation: bossGooImpactPop 240ms ease-out forwards;
        }

        @keyframes bossGooSpitWobble {
            0% { filter: saturate(1) brightness(1); }
            100% { filter: saturate(1.08) brightness(1.08); }
        }

        @keyframes bossGooMuzzleBlast {
            0% { opacity: 0.26; transform: translate(-50%, -50%) rotate(var(--spit-ang, 0deg)) scale(0.34, 0.54); }
            42% { opacity: 0.86; transform: translate(-50%, -50%) rotate(var(--spit-ang, 0deg)) scale(1.28, 0.72); }
            100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spit-ang, 0deg)) scale(1.88, 0.56); }
        }

        @keyframes bossGooImpactPop {
            0% { opacity: 0.18; transform: translate(-50%, -50%) scale(0.52); }
            70% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.24); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
        }

        .shield-break-burst {
            position: fixed;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 3px solid rgba(118, 198, 255, 0.98);
            box-shadow: 0 0 14px rgba(84, 168, 244, 0.68);
            background: radial-gradient(circle, rgba(176, 224, 255, 0.48) 0%, rgba(136, 198, 255, 0.2) 34%, rgba(136, 198, 255, 0) 72%);
            transform: translate(-50%, -50%) scale(0.35);
            opacity: 0;
            pointer-events: none;
            z-index: 26010;
            animation: shieldBreakBurst 360ms ease-out forwards;
        }

        .shield-shard {
            position: fixed;
            width: 7px;
            height: 3px;
            border-radius: 2px;
            border: 1px solid rgba(168, 220, 255, 0.86);
            background: linear-gradient(180deg, rgba(188, 230, 255, 0.96), rgba(122, 190, 255, 0.76));
            box-shadow: 0 0 8px rgba(98, 176, 248, 0.6);
            pointer-events: none;
            z-index: 26011;
            opacity: 0;
            transform: translate(-50%, -50%) rotate(0deg) scale(0.85);
            animation: shieldShardFly 320ms ease-out forwards;
        }

        .cell.shell-residue::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 54%;
            height: 54%;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            border: 2px solid rgba(118, 194, 255, 0.56);
            box-shadow: inset 0 0 8px rgba(128, 202, 255, 0.26);
            pointer-events: none;
            z-index: 2;
            animation: shieldResidueFade 320ms ease-out forwards;
        }

        .miniboss-burst {
            position: fixed;
            width: 20px;
            height: 20px;
            border-radius: 999px;
            transform: translate(-50%, -50%) scale(0.35);
            pointer-events: none;
            z-index: 26015;
            opacity: 0;
        }

        .miniboss-burst-strong {
            border: 2px solid rgba(255, 134, 134, 0.95);
            box-shadow: 0 0 22px rgba(255, 88, 88, 0.75);
            background: radial-gradient(circle, rgba(255, 126, 126, 0.7) 0%, rgba(196, 35, 35, 0.28) 36%, rgba(131, 16, 16, 0) 74%);
            animation: minibossBurstStrong 500ms ease-out forwards;
        }

        .miniboss-burst-faint {
            border: 1px solid rgba(255, 124, 124, 0.55);
            box-shadow: 0 0 10px rgba(255, 96, 96, 0.42);
            background: radial-gradient(circle, rgba(255, 116, 116, 0.45) 0%, rgba(187, 32, 32, 0.16) 40%, rgba(131, 16, 16, 0) 72%);
            animation: minibossBurstFaint 360ms ease-out forwards;
        }

        .boss-summon-pulse {
            position: fixed;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            transform: translate(-50%, -50%) scale(0.42);
            border: 2px solid rgba(255, 126, 126, 0.94);
            box-shadow: 0 0 16px rgba(255, 86, 86, 0.7);
            background: radial-gradient(circle, rgba(255, 186, 186, 0.58) 0%, rgba(255, 116, 116, 0.2) 46%, rgba(205, 38, 38, 0) 76%);
            pointer-events: none;
            z-index: 26016;
            opacity: 0;
            animation: bossSummonPulse 280ms ease-out forwards;
        }

        .boss-summon-pulse.is-blue {
            border-color: rgba(130, 208, 255, 0.96);
            box-shadow: 0 0 16px rgba(94, 182, 255, 0.72);
            background: radial-gradient(circle, rgba(194, 236, 255, 0.62) 0%, rgba(124, 194, 255, 0.24) 46%, rgba(38, 120, 208, 0) 76%);
        }

        .boss-summon-thread {
            position: fixed;
            left: 0;
            top: 0;
            height: 5px;
            border-radius: 999px;
            transform-origin: left center;
            pointer-events: none;
            z-index: 26015;
            opacity: 0;
            background:
                linear-gradient(90deg, rgba(255, 112, 112, 0.78), rgba(255, 172, 172, 0.92) 38%, rgba(246, 92, 92, 0.72) 72%, rgba(246, 92, 92, 0.08) 100%);
            box-shadow: 0 0 8px rgba(255, 106, 106, 0.56);
            animation: bossSummonThread 250ms ease-out forwards;
        }

        .boss-summon-thread.is-blue {
            background:
                linear-gradient(90deg, rgba(126, 194, 255, 0.8), rgba(188, 228, 255, 0.94) 38%, rgba(82, 164, 255, 0.74) 72%, rgba(82, 164, 255, 0.08) 100%);
            box-shadow: 0 0 8px rgba(96, 174, 255, 0.58);
        }

        .boss-summon-orb {
            position: fixed;
            left: 0;
            top: 0;
            width: 11px;
            height: 11px;
            border-radius: 999px;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 26017;
            opacity: 0;
            background: radial-gradient(circle, rgba(255, 232, 232, 0.98) 0%, rgba(255, 144, 144, 0.96) 42%, rgba(236, 72, 72, 0.1) 92%);
            box-shadow: 0 0 11px rgba(255, 118, 118, 0.78);
        }

        .boss-summon-orb.is-blue {
            background: radial-gradient(circle, rgba(230, 247, 255, 0.98) 0%, rgba(144, 212, 255, 0.96) 42%, rgba(72, 150, 232, 0.12) 92%);
            box-shadow: 0 0 11px rgba(116, 192, 255, 0.78);
        }

        .boss-spawn-stamp {
            position: fixed;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            transform: translate(-50%, -50%) scale(0.45);
            pointer-events: none;
            z-index: 26016;
            opacity: 0;
            background:
                radial-gradient(circle, rgba(255, 220, 220, 0.88) 0%, rgba(255, 136, 136, 0.54) 34%, rgba(232, 62, 62, 0.2) 56%, rgba(232, 62, 62, 0) 82%);
            border: 1px solid rgba(255, 122, 122, 0.82);
            box-shadow: 0 0 12px rgba(255, 102, 102, 0.66);
            animation: bossSpawnStamp 270ms ease-out forwards;
        }

        .boss-spawn-stamp.is-blue {
            background:
                radial-gradient(circle, rgba(226, 246, 255, 0.9) 0%, rgba(144, 210, 255, 0.56) 34%, rgba(62, 146, 230, 0.22) 56%, rgba(62, 146, 230, 0) 82%);
            border: 1px solid rgba(138, 208, 255, 0.84);
            box-shadow: 0 0 12px rgba(98, 178, 255, 0.68);
        }

        .projection-pop-burst {
            position: fixed;
            width: 20px;
            height: 20px;
            border-radius: 999px;
            transform: translate(-50%, -50%) scale(0.4);
            pointer-events: none;
            z-index: 26018;
            opacity: 0;
            border: 1px solid rgba(154, 220, 255, 0.92);
            box-shadow: 0 0 14px rgba(104, 186, 255, 0.72);
            background: radial-gradient(circle, rgba(208, 242, 255, 0.74) 0%, rgba(122, 196, 255, 0.26) 40%, rgba(70, 154, 236, 0) 74%);
            animation: projectionPopBurst 300ms ease-out forwards;
        }

        .projection-pop-orb {
            position: fixed;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            transform: translate(-50%, -50%) scale(0.7);
            pointer-events: none;
            z-index: 26019;
            opacity: 0;
            background: radial-gradient(circle, rgba(236, 250, 255, 0.98) 0%, rgba(146, 214, 255, 0.9) 46%, rgba(84, 166, 244, 0.08) 92%);
            box-shadow: 0 0 9px rgba(112, 194, 255, 0.78);
            animation: projectionPopOrb 360ms ease-out forwards;
        }

            .shield-break-burst::after {
                content: '';
                position: absolute;
                inset: -6px;
                border-radius: 999px;
                border: 1px dashed rgba(255, 239, 189, 0.8);
                opacity: 0.88;
                animation: shieldBreakCrackle 360ms ease-out forwards;
            }

        @keyframes shieldBreakBurst {
            0% {
                transform: translate(-50%, -50%) scale(0.35);
                opacity: 0.95;
            }
            100% {
                transform: translate(-50%, -50%) scale(2.7);
                opacity: 0;
            }
        }

        @keyframes shieldBreakCrackle {
            0% {
                transform: scale(0.8) rotate(0deg);
                opacity: 0.9;
            }
            100% {
                transform: scale(1.35) rotate(16deg);
                opacity: 0;
            }
        }

        @keyframes shieldShardFly {
            0% {
                opacity: 0.96;
                transform: translate(-50%, -50%) rotate(0deg) scale(0.9);
            }
            100% {
                opacity: 0;
                transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--rot, 0deg)) scale(0.55);
            }
        }

        @keyframes shieldResidueFade {
            0% {
                opacity: 0.85;
                transform: translate(-50%, -50%) scale(0.9);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.06);
            }
        }

        @keyframes minibossBurstStrong {
            0% {
                transform: translate(-50%, -50%) scale(0.38);
                opacity: 0.98;
            }
            100% {
                transform: translate(-50%, -50%) scale(3.1);
                opacity: 0;
            }
        }

        @keyframes minibossBurstFaint {
            0% {
                transform: translate(-50%, -50%) scale(0.32);
                opacity: 0.72;
            }
            100% {
                transform: translate(-50%, -50%) scale(2.05);
                opacity: 0;
            }
        }

        @keyframes bossSummonPulse {
            0% {
                opacity: 0.12;
                transform: translate(-50%, -50%) scale(0.42);
            }
            46% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.2);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.9);
            }
        }

        @keyframes bossSummonThread {
            0% {
                opacity: 0;
                transform: translateY(-50%) scaleX(0.16);
            }
            28% {
                opacity: 0.9;
                transform: translateY(-50%) scaleX(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-50%) scaleX(1);
            }
        }

        @keyframes bossSpawnStamp {
            0% {
                opacity: 0.1;
                transform: translate(-50%, -50%) scale(0.45);
            }
            44% {
                opacity: 0.95;
                transform: translate(-50%, -50%) scale(1.16);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.78);
            }
        }

        @keyframes projectionPopBurst {
            0% {
                opacity: 0.9;
                transform: translate(-50%, -50%) scale(0.42);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(2.2);
            }
        }

        @keyframes projectionPopOrb {
            0% {
                opacity: 0.94;
                transform: translate(-50%, -50%) scale(0.75);
            }
            100% {
                opacity: 0;
                transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.42);
            }
        }

        /* Petri dish on each cell - property style */
        .petri {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(1.2);
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            /* experimental */
            display: flex;
            align-items: center;
            justify-content: center;
            transform-origin: center center
        }

            .petri img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                opacity: 1
            }

        /* virus face sprite: single centered image, only scaling changes */
        .face-sprite {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
            z-index: 3;
            pointer-events: none;
            /* experimental */
            transform-origin: center center;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .face-sprite img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
            transform-origin: center center;
            display: block
        }

        .virus1-sprite-sheet {
            width: 100%;
            height: 100%;
            background-position: 0% 0%;
            background-repeat: no-repeat;
            background-size: 300% 400%;
            image-rendering: pixelated;
            animation: virus1SpriteFrames 760ms step-end infinite;
            will-change: background-position;
            pointer-events: none;
        }

        .virus2-sprite-sheet {
            width: 100%;
            height: 100%;
            background-position: 0% 0%;
            background-repeat: no-repeat;
            background-size: calc(var(--virus2-cols, 1) * 100%) calc(var(--virus2-rows, 1) * 100%);
            image-rendering: pixelated;
            animation: virus2SpriteFrames calc(var(--virus2-duration-ms, 200) * 1ms) step-end infinite, virus2Float 1900ms ease-in-out infinite;
            will-change: background-position;
            pointer-events: none;
            transform-origin: center center;
        }

        .virus3-sprite-sheet {
            width: 100%;
            height: 100%;
            background-position: 0% 0%;
            background-repeat: no-repeat;
            background-size: calc(var(--virus3-cols, 1) * 100%) calc(var(--virus3-rows, 2) * 100%);
            image-rendering: pixelated;
            animation: virus3SpriteFrames calc(var(--virus3-duration-ms, 333) * 1ms) step-end infinite;
            will-change: background-position;
            pointer-events: none;
            transform-origin: center center;
            transform: translateY(var(--virus3-offset-y, 8px)) scale(var(--virus3-scale, 1));
        }

        .virus4-sprite-sheet {
            width: 100%;
            height: 100%;
            background-position: 0% 0%;
            background-repeat: no-repeat;
            background-size: calc(var(--virus4-cols, 2) * 100%) calc(var(--virus4-rows, 2) * 100%);
            image-rendering: pixelated;
            animation: virus4SpriteFrames calc(var(--virus4-duration-ms, 667) * 1ms) step-end infinite, virus4Jitter 0.45s ease-in-out infinite;
            will-change: background-position, transform;
            pointer-events: none;
            transform-origin: center center;
            margin-top: -22px;
        }

        @keyframes virus2Float {
            0%, 100% {
                transform: translateY(calc(var(--virus2-offset-y, 5px) + 0px)) rotate(-0.7deg) scale(var(--virus2-scale, 1));
            }
            50% {
                transform: translateY(calc(var(--virus2-offset-y, 5px) - 1px)) rotate(0.7deg) scale(var(--virus2-scale, 1));
            }
        }

        @keyframes virus3SpriteFrames {
            0%, 49.999% {
                background-position: 0% 0%;
            }
            50%, 100% {
                background-position: 0% 100%;
            }
        }

        @keyframes virus4SpriteFrames {
            0%, 24.999% {
                background-position: 0% 0%;
            }
            25%, 49.999% {
                background-position: 100% 0%;
            }
            50%, 74.999% {
                background-position: 0% 100%;
            }
            75%, 100% {
                background-position: 100% 100%;
            }
        }

        @keyframes virus4Jitter {
            0%, 100% {
                transform: scale(calc(var(--virus4-scale, 1) * 1)) translate(0, 0);
            }
            25% {
                transform: scale(calc(var(--virus4-scale, 1) * 1.03)) translate(1px, -1px);
            }
            50% {
                transform: scale(calc(var(--virus4-scale, 1) * 0.97)) translate(-1px, 1px);
            }
            75% {
                transform: scale(calc(var(--virus4-scale, 1) * 1.02)) translate(-1px, -1px);
            }
        }

        .virus.grow-tween > .face-sprite:not(.face-sprite--prev) {
            animation: virusGrowTween 360ms cubic-bezier(0.14, 0.82, 0.2, 1);
            transform-origin: center center;
        }

        .virus.grow-tween > .face-sprite--next {
            animation: virusGrowTween 360ms cubic-bezier(0.14, 0.82, 0.2, 1), virusGrowNextFade 240ms ease-out forwards;
        }

        .virus.grow-tween > .face-sprite--prev {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 1;
            animation: virusGrowPrevFade 240ms ease-out forwards;
        }

        .growth-ring {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 58%;
            height: 58%;
            border-radius: 999px;
            border: 1px solid rgba(255, 248, 206, 0.86);
            box-shadow: 0 0 10px rgba(255, 227, 140, 0.45);
            pointer-events: none;
            z-index: 2;
            transform: translate(-50%, -50%) scale(0.58);
            opacity: 0;
            animation: growthRingPulse 360ms ease-out forwards;
            will-change: transform, opacity;
        }

        /* Animate size-3 viruses with gentle jitter/pulse - make it look like it's ready to burst! */
        @keyframes jitter {

            0%, 100% {
                transform: scale(1) translate(0, 0);
            }

            25% {
                transform: scale(1.03) translate(1px, -1px);
            }

            50% {
                transform: scale(0.97) translate(-1px, 1px);
            }

            75% {
                transform: scale(1.02) translate(-1px, -1px);
            }
        }

        .virus--size-3 .face-sprite img {
            animation: jitter 0.45s infinite ease-in-out;
        }

        @keyframes virus1SpriteFrames {
            0%, 9.999% {
                background-position: 0% 0%;
            }
            10%, 19.999% {
                background-position: 50% 0%;
            }
            20%, 29.999% {
                background-position: 100% 0%;
            }
            30%, 39.999% {
                background-position: 0% 33.333%;
            }
            40%, 49.999% {
                background-position: 50% 33.333%;
            }
            50%, 59.999% {
                background-position: 100% 33.333%;
            }
            60%, 69.999% {
                background-position: 0% 66.666%;
            }
            70%, 79.999% {
                background-position: 50% 66.666%;
            }
            80%, 89.999% {
                background-position: 100% 66.666%;
            }
            90%, 100% {
                background-position: 0% 100%;
            }
        }

        @keyframes virusGrowTween {
            0% {
                transform: scale(calc(var(--grow-from, 0.84) * 0.86));
                filter: brightness(0.86);
            }
            46% {
                transform: scale(1.14);
                filter: brightness(1.2);
            }
            74% {
                transform: scale(0.985);
                filter: brightness(1.04);
            }
            100% {
                transform: scale(1);
                filter: brightness(1);
            }
        }

        @keyframes growthRingPulse {
            0% {
                transform: translate(-50%, -50%) scale(0.56);
                opacity: 0.82;
            }
            100% {
                transform: translate(-50%, -50%) scale(1.55);
                opacity: 0;
            }
        }

        @keyframes virusGrowNextFade {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes virusGrowPrevFade {
            0% {
                opacity: 0.95;
            }
            100% {
                opacity: 0;
            }
        }

        /* Animate the splat/stain/burst when a virus pops */
        .stain {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle at 28% 28%, rgba(110, 200, 40, 0.44), rgba(30, 100, 20, 0.24));
            pointer-events: none;
            opacity: 0;
            z-index: 4
        }

            .stain.show {
                animation: stainpop 520ms forwards
            }

        @keyframes stainpop {
            0% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 0.95
            }

            50% {
                transform: translate(-50%, -50%) scale(1.08);
                opacity: 0.7
            }

            100% {
                transform: translate(-50%, -50%) scale(1.8);
                opacity: 0
            }
        }

        /* --- SPRITE-BASED PARTICLES + randomized rotation support --- */
        .particle {
            position: fixed;
            z-index: 30000;
            width: 35px;
            /* small size as default */
            height: 35px;
            pointer-events: none;
            transform-origin: center center;
            transform: translate3d(0px, 0px, 0) translate(-50%, -50%) scale(1.5);
            opacity: 1;
            display: block;
            filter: drop-shadow(0 4px 10px rgba(120, 40, 160, 0.12));
            will-change: transform, opacity;
            transition: transform 520ms cubic-bezier(.2, .8, .2, 1), opacity 300ms linear;
        }

            /* particle contains an <img> (raster sprite) */
            .particle > img {
                width: 100%;
                height: 100%;
                display: block;
                pointer-events: none;
                user-select: none;
                -webkit-user-drag: none;
            }


        /* HUD child elements: retro 'panels' for each stat */
        .hud .small {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.02));
            padding: 10px 12px;
            border-radius: 8px;
            border: 4px solid rgba(0, 0, 0, 0.25);
            box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
            min-width: 85px;
            color: #ffd166;
            font-family: 'Press Start 2P', monospace;
            font-size: 11px;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
        }

        .hud-row {
            display: flex;
            flex-direction: row;
            gap: 12px;
            /* spacing between Level and Score */
            align-items: center;
        }

        /* Make HUD buttons match retro badge look */
        .hud button {
            font-family: 'Press Start 2P', monospace;
            background: linear-gradient(180deg, #ffffff, #e6e3ff);
            color: #0b3d91;
            border: 4px solid rgba(0, 0, 0, 0.18);
            padding: 10px;
            border-radius: 8px;
            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
            cursor: pointer;
            font-size: 11px;
        }

        /* small screens tweak */
        @media (max-width:420px) {
            .board {
                width: 94vw
            }

            .hud .small {
                min-width: 90px;
                padding: 8px;
                font-size: 10px
            }

            .combo-meter {
                min-width: 100%;
            }
        }

        /* glowing burst at pop */
        .glow {
            position: fixed;
            z-index: 25000;
            pointer-events: none;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            filter: blur(10px);
            opacity: 0.95;
            background: radial-gradient(circle at 35% 30%, rgba(157, 0, 255, 0.95), rgba(130, 0, 150, 0.6) 40%, rgba(255, 90, 20, 0.15) 70%);
        }

        @keyframes glowPop {
            0% {
                transform: translate(-50%, -50%) scale(0.2);
                opacity: 0.95
            }

            30% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 0.9
            }

            70% {
                transform: translate(-50%, -50%) scale(1.6);
                opacity: 0.45
            }

            100% {
                transform: translate(-50%, -50%) scale(2.4);
                opacity: 0
            }
        }

        /* Badge UI � retro styling using Press Start 2P */
        .chain-badge {
            position: fixed;
            left: 50%;
            top: 72px;
            transform: translateX(-50%) translateY(0) scale(0.95);
            z-index: 7000;
            font-family: 'Press Start 2P', monospace;
            background: linear-gradient(180deg, #0b3d91, #08306a);
            /* default deep-blue base for retro look */
            color: #ffd166;
            /* warm pixel color for text */
            padding: 10px 18px;
            max-width: min(92vw, 460px);
            border-radius: 8px;
            border: 4px solid rgba(0, 0, 0, 0.45);
            /* thick pixel-like border */
            font-weight: 400;
            font-size: 14px;
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            opacity: 0;
            will-change: transform, opacity;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65), 4px 4px 0 rgba(0, 0, 0, 0.45);
            /* chunky pixel shadow */
        }

            .chain-badge .cb-icon {
                width: 44px;
                height: 36px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                background: rgba(0, 0, 0, 0.18);
                box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.12), inset 6px 6px 0 rgba(255, 255, 255, 0.02);
            }

        @keyframes badgeIn {
            0% {
                transform: translateX(-50%) translateY(6px) scale(0.7);
                opacity: 0;
            }

            50% {
                transform: translateX(-50%) translateY(-6px) scale(1.05);
                opacity: 1;
            }

            100% {
                transform: translateX(-50%) translateY(-18px) scale(1);
                opacity: 1;
            }
        }

        @keyframes badgeOut {
            0% {
                opacity: 1;
                transform: translateX(-50%) translateY(-18px) scale(1);
            }

            100% {
                opacity: 0;
                transform: translateX(-50%) translateY(-28px) scale(0.9);
            }
        }

        .chain-badge.show {
            animation: badgeIn 360ms steps(2, end) forwards;
        }

        .chain-badge.hide {
            animation: badgeOut 360ms ease forwards;
        }

        /* Retro color variants inspired by the attached image. These keep the pixel aesthetic while providing variety. */
        .chain-badge.great {
            background: linear-gradient(180deg, #0b5ea8, #083b6b);
            color: #ffd166;
            border-color: rgba(0, 0, 0, 0.6);
        }

        .chain-badge.amazing {
            background: linear-gradient(180deg, #b33b2b, #8a1f14);
            color: #ffd166;
            border-color: rgba(0, 0, 0, 0.6);
        }

        .chain-badge.stupendous {
            background: linear-gradient(180deg, #8a1f14, #6a0f0f);
            color: #ffd166;
            border-color: rgba(0, 0, 0, 0.6);
        }

        .chain-badge.incredible {
            background: linear-gradient(180deg, #5b2b86, #381a5a);
            color: #ffd166;
            border-color: rgba(0, 0, 0, 0.6);
        }

            /* pixel 'bevel' effect by adding layered box-shadows � subtle and GPU-friendly */
            .chain-badge.great .cb-icon,
            .chain-badge.amazing .cb-icon,
            .chain-badge.stupendous .cb-icon,
            .chain-badge.incredible .cb-icon {
                box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.12), 6px 6px 0 rgba(0, 0, 0, 0.12);
            }

        /* small responsive adjustment so badges aren't huge on mobile */
        @media (max-width: 420px) {
            .chain-badge {
                font-size: 11px;
                padding: 8px 12px;
            }

                .chain-badge .cb-icon {
                    width: 34px;
                    height: 28px;
                    font-size: 14px
                }
        }

        /* container base (if you already have .level-complete, don't duplicate; merge the .visible transition bits) */
        .level-complete {
            position: fixed; /* likely you already use fixed/absolute; keep as needed */
            left: 50%;
            top: 50%; /* tweak vertical position to taste */
            transform: translate(-50%, -50%);
            width: min(90vw, 900px);
            max-width: 100% fit-content 10px);
            max-height: 92vh;
            box-sizing: border-box;
            z-index: 9999;
            padding: 12px 14px;
            border-radius: 10px;
            background: rgba(0,0,0,0.86);
            color: #fff;
            text-align: center;
            box-shadow: 0 8px 30px rgba(0,0,0,0.45);
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
            transition: opacity .28s ease, transform .28s ease;
            
        }

            /* visible state */
            .level-complete.visible {
                opacity: 1;
                pointer-events: auto;
                transform: translateX(-50%) translateY(0);
            }

            /* title */
            .level-complete .lc-title {
                font-weight: 700;
                font-family: 'Press Start 2P', monospace;
                font-size: 20px;
                line-height: 1;
            }

            /* image container placed AFTER title (user requested) */
            .level-complete .lc-image {
                flex: 0 0 auto;
                display: block;
                width: 100%;
                text-align: center;
            }

                /* the image itself: constrain to max-width: 360px but be responsive */
                .level-complete .lc-image img {
                    display: block;
                    width: 100%;
                    max-width: 900px; /* your requested maximum width */
                    height: auto;
                    max-height: calc(72vh - 120px);
                    object-fit: contain; /* preserve aspect, center contents if needed */
                    border-radius: 6px; /* optional */
                    user-select: none;
                    pointer-events: none;
                }

        /* tweak for small screens so it doesn't look huge */
        @media (max-width: 600px) {
            .level-complete .lc-title {
                font-size: 18px;
                word-break: break-word;
            }

            .level-complete .lc-image img {
                max-height: calc(78vh - 100px);
            }

            F
        }


        /* ---------- Game Over popup ---------- */
        .game-over-popup {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            z-index: 95000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            padding: 30px 40px;
            border-radius: 14px;
            border: 6px solid rgba(0, 0, 0, 0.55);
            background: linear-gradient(180deg, #8a1f14, #6a0f0f);
            color: #ffd166;
            box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
            font-family: 'Press Start 2P', monospace;
            font-size: 20px;
            text-align: center;
            pointer-events: none;
            opacity: 0;
            will-change: transform, opacity;
        }

        .game-over-vignette {
            position: fixed;
            inset: 0;
            z-index: 94000;
            pointer-events: none;
            opacity: 0;
            background:
                radial-gradient(circle at 50% 42%, rgba(255, 84, 84, 0.13) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.78) 100%),
                repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.03) 0 2px, rgba(0, 0, 0, 0) 2px 4px);
            transition: opacity 220ms ease;
        }

        .game-over-vignette.show {
            opacity: 1;
        }

        body.game-over-fx #board {
            filter: saturate(0.4) contrast(1.08) brightness(0.84);
            transition: filter 220ms ease;
            animation: gameOverBoardShake 420ms cubic-bezier(0.22, 0.8, 0.24, 1) both;
        }

        body.game-over-fx .title-sprite {
            filter: saturate(0.55) brightness(0.88);
            transition: filter 220ms ease;
        }

        body.game-over-fx .hud {
            opacity: 0.96;
            transition: opacity 220ms ease;
        }

            /* Inner title and subtitle */
            .game-over-popup .go-title {
                font-size: 24px;
                text-transform: uppercase;
                text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
                letter-spacing: 0.04em;
            }

        .game-over-popup .go-sub {
            font-size: 14px;
            color: #ffe9b0;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
        }

        .game-over-popup .go-recap {
            width: min(420px, 84vw);
            margin-top: 8px;
            padding: 12px 14px;
            border-radius: 8px;
            border: 3px solid rgba(0, 0, 0, 0.45);
            background: linear-gradient(180deg, rgba(15, 26, 43, 0.6), rgba(8, 16, 29, 0.66));
            color: #ffe9b0;
            text-align: left;
            font-size: 10px;
            line-height: 1.45;
        }

        .game-over-popup .go-recap-title {
            font-size: 11px;
            margin-bottom: 8px;
            color: #ffd166;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
        }

        .game-over-popup .go-recap-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 4px 10px;
            align-items: center;
        }

        .game-over-popup .go-recap-grid span {
            color: #f4dab3;
        }

        .game-over-popup .go-recap-grid b {
            color: #fff4d8;
            justify-self: end;
        }

        .game-over-popup .go-recap-achv {
            margin-top: 8px;
            color: #f8dfba;
        }

        .game-over-popup .go-recap-list {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .game-over-popup .go-recap-list span {
            display: inline-block;
            padding: 3px 6px;
            border-radius: 999px;
            border: 1px solid rgba(255, 236, 181, 0.44);
            background: rgba(255, 241, 196, 0.08);
            color: #fff0cc;
            font-size: 9px;
        }

        .game-over-popup .go-recap-more {
            margin-top: 6px;
            color: #e8c68e;
            font-size: 9px;
            text-align: right;
        }

        .game-over-popup .go-tip {
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 223, 166, 0.24);
            color: #cfe8ff;
            font-size: 9px;
            line-height: 1.45;
        }

        .game-over-popup .go-actions {
            margin-top: 10px;
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .game-over-popup .go-restart-btn {
            appearance: none;
            border: 3px solid rgba(0, 0, 0, 0.52);
            border-radius: 8px;
            padding: 8px 14px;
            min-width: 132px;
            background: linear-gradient(180deg, #ffd97a, #f3b641);
            color: #1d2433;
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            line-height: 1.1;
            cursor: pointer;
            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
            text-transform: uppercase;
        }

        .game-over-popup .go-restart-btn:hover {
            filter: brightness(1.04);
        }

        .game-over-popup .go-restart-btn:active {
            transform: translateY(1px);
            box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22);
        }

        .final-run-stats-popup {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            z-index: 97000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            padding: 30px 40px;
            border-radius: 14px;
            border: 6px solid rgba(0, 0, 0, 0.55);
            background: linear-gradient(180deg, #1b2f4f, #13233f);
            color: #ffd166;
            box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
            font-family: 'Press Start 2P', monospace;
            font-size: 20px;
            text-align: center;
            pointer-events: none;
            opacity: 0;
            will-change: transform, opacity;
        }

        .final-run-stats-popup .go-title {
            font-size: 24px;
            text-transform: uppercase;
            text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
            letter-spacing: 0.04em;
        }

        .final-run-stats-popup .go-sub {
            font-size: 14px;
            color: #d9ecff;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
        }

        .final-run-stats-popup .go-recap {
            width: min(420px, 84vw);
            margin-top: 8px;
            padding: 12px 14px;
            border-radius: 8px;
            border: 3px solid rgba(0, 0, 0, 0.45);
            background: linear-gradient(180deg, rgba(15, 26, 43, 0.6), rgba(8, 16, 29, 0.66));
            color: #e4f0ff;
            text-align: left;
            font-size: 10px;
            line-height: 1.45;
        }

        .final-run-stats-popup .go-recap-title {
            font-size: 11px;
            margin-bottom: 8px;
            color: #ffd166;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
        }

        .final-run-stats-popup .go-recap-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 4px 10px;
            align-items: center;
        }

        .final-run-stats-popup .go-recap-grid span { color: #cde5ff; }
        .final-run-stats-popup .go-recap-grid b { color: #fff4d8; justify-self: end; }
        .final-run-stats-popup .go-recap-achv { margin-top: 8px; color: #d7ecff; }
        .final-run-stats-popup .go-recap-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
        .final-run-stats-popup .go-recap-list span {
            display: inline-block;
            padding: 3px 6px;
            border-radius: 999px;
            border: 1px solid rgba(193, 224, 255, 0.44);
            background: rgba(197, 223, 255, 0.1);
            color: #e6f3ff;
            font-size: 9px;
        }
        .final-run-stats-popup .go-recap-more { margin-top: 6px; color: #b9d8ff; font-size: 9px; text-align: right; }
        .final-run-stats-popup .go-tip {
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid rgba(182, 216, 255, 0.24);
            color: #cfe8ff;
            font-size: 9px;
            line-height: 1.45;
        }
        .final-run-stats-popup .go-actions { margin-top: 10px; display: flex; justify-content: center; width: 100%; }
        .final-run-stats-popup .go-restart-btn {
            appearance: none;
            border: 3px solid rgba(0, 0, 0, 0.52);
            border-radius: 8px;
            padding: 8px 14px;
            min-width: 132px;
            background: linear-gradient(180deg, #d7e9ff, #a9c8f3);
            color: #16243a;
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            line-height: 1.1;
            cursor: pointer;
            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
            text-transform: uppercase;
        }
        .final-run-stats-popup .go-restart-btn:hover { filter: brightness(1.04); }
        .final-run-stats-popup .go-restart-btn:active { transform: translateY(1px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22); }

        .continue-offer-popup {
            position: fixed;
            left: 0;
            top: 0;
            transform: none;
            z-index: 95120;
            width: min(520px, 92vw);
            max-width: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 12px 16px;
            border-radius: 14px;
            border: 4px solid rgba(0, 0, 0, 0.52);
            background: linear-gradient(180deg, rgba(18, 23, 34, 0.90), rgba(10, 15, 23, 0.92));
            color: #ffd166;
            box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.26);
            font-family: 'Press Start 2P', monospace;
            text-align: center;
            pointer-events: auto;
            opacity: 0;
            box-sizing: border-box;
            overflow: hidden;
        }

        .continue-offer-popup.show {
            animation: continueOfferIn 260ms ease both;
        }

        .continue-offer-popup.hide {
            animation: continueOfferOut 220ms ease forwards;
        }

        .continue-offer-popup .co-art {
            width: min(76%, 540px);
            height: min(66%, 460px);
            border-radius: 8px;
            border: 3px solid rgba(0, 0, 0, 0.55);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-color: rgba(0, 0, 0, 0.38);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 20px rgba(0, 0, 0, 0.34);
        }

        .continue-offer-popup .co-message {
            width: min(76%, 540px);
            font-family: "Lucida Console", "Courier New", monospace;
            font-size: clamp(13px, 1.5vw, 16px);
            line-height: 1.35;
            color: #9dff7d;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82), 0 0 8px rgba(0, 0, 0, 0.28);
            background: rgba(5, 9, 16, 0.46);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 8px 10px 6px;
        }

        .continue-offer-popup .co-status {
            min-height: 16px;
            font-size: 11px;
            color: #ffeaaf;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
        }

        .continue-offer-popup .co-actions {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 2px;
            flex-wrap: wrap;
        }

        .continue-offer-popup .co-continue-btn,
        .continue-offer-popup .co-giveup-btn {
            appearance: none;
            border: 3px solid rgba(0, 0, 0, 0.52);
            border-radius: 8px;
            padding: 8px 12px;
            min-width: 132px;
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            line-height: 1.1;
            cursor: pointer;
            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
            text-transform: uppercase;
        }

        .continue-offer-popup .co-continue-btn {
            background: linear-gradient(180deg, #ffd97a, #f3b641);
            color: #1d2433;
        }

        .continue-offer-popup .co-giveup-btn {
            background: linear-gradient(180deg, #f5a59a, #d46853);
            color: #2c1010;
        }

        .continue-offer-popup .co-continue-btn:hover,
        .continue-offer-popup .co-giveup-btn:hover {
            filter: brightness(1.04);
        }

        .continue-offer-popup .co-continue-btn:active,
        .continue-offer-popup .co-giveup-btn:active {
            transform: translateY(1px);
            box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22);
        }

        @keyframes continueOfferIn {
            from { opacity: 0; transform: scale(0.94); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes continueOfferOut {
            from { opacity: 1; transform: scale(1); }
            to { opacity: 0; transform: scale(0.94); }
        }

        .score-penalty-toast {
            position: fixed;
            transform: translate(-50%, -50%) scale(0.94);
            opacity: 0;
            z-index: 95220;
            pointer-events: none;
            padding: 8px 10px;
            border-radius: 8px;
            border: 2px solid rgba(0, 0, 0, 0.5);
            background: linear-gradient(180deg, #ffe79a, #f2b84b);
            color: #2a1d08;
            font-family: 'Press Start 2P', monospace;
            font-size: 9px;
            line-height: 1.1;
            text-transform: uppercase;
            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
            transition: opacity 160ms ease, transform 220ms ease;
            will-change: transform, opacity;
        }

        .score-penalty-toast.show {
            opacity: 1;
            transform: translate(-50%, -64%) scale(1);
        }

        .run-perk-popup {
            --rp-card-back-url: url('assets/img/card_back_test.png');
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.92);
            z-index: 95250;
            width: min(520px, 94vw);
            padding: 14px 14px 12px 14px;
            border-radius: 12px;
            border: 4px solid rgba(0, 0, 0, 0.48);
            background: linear-gradient(180deg, #10233e, #09162a);
            box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.26);
            color: #ffe5ac;
            font-family: 'Press Start 2P', monospace;
            opacity: 0;
            pointer-events: auto;
        }

        .run-perk-popup.show {
            animation: runPerkIn 180ms ease-out forwards;
        }

        .run-perk-popup.hide {
            animation: runPerkOut 160ms ease-in forwards;
        }

        .run-perk-popup .rp-title {
            font-size: 13px;
            text-align: center;
            color: #ffd166;
            margin-bottom: 8px;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
        }

        .run-perk-popup .rp-sub {
            font-size: 9px;
            text-align: center;
            color: #d6ebff;
            margin-bottom: 10px;
        }

        .run-perk-popup .rp-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            align-items: start;
        }

        .run-perk-popup.pick-locked .rp-item {
            pointer-events: none;
        }

        .run-perk-popup .rp-item {
            appearance: none;
            width: 100%;
            text-align: left;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
            font-family: 'Press Start 2P', monospace;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: stretch;
            --rp-accent: #45b4ff;
            --rp-soft: #bde8ff;
            --rp-panel-from: #fff5df;
            --rp-panel-to: #f2ddb0;
            --rp-panel-title: #13213d;
            --rp-panel-desc: #28385a;
            --rp-card-front-from: #103f7d;
            --rp-card-front-to: #0d2e60;
        }

        .run-perk-popup .rp-item.rp-pixel {
            --rp-accent: #45b4ff;
            --rp-soft: #bde8ff;
            --rp-panel-from: #fff5df;
            --rp-panel-to: #f2ddb0;
            --rp-panel-title: #13213d;
            --rp-panel-desc: #28385a;
            --rp-card-front-from: #113d77;
            --rp-card-front-to: #0a264f;
        }

        .run-perk-popup .rp-item.rp-broker {
            --rp-accent: #ff8b68;
            --rp-soft: #ffd5c7;
            --rp-panel-from: #ffe6dd;
            --rp-panel-to: #f0b4a1;
            --rp-panel-title: #3a120b;
            --rp-panel-desc: #572218;
            --rp-card-front-from: #7b2a1f;
            --rp-card-front-to: #4d160f;
        }

        .run-perk-popup .rp-source {
            font-size: 7px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            display: inline-block;
            opacity: 0.92;
            text-align: center;
            margin-bottom: 1px;
        }

        .run-perk-popup .rp-source.rp-source-pixel {
            color: #8dd9ff;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.68), 0 0 6px rgba(128, 216, 255, 0.5);
        }

        .run-perk-popup .rp-source.rp-source-broker {
            color: #ffd0c1;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.68), 0 0 6px rgba(255, 186, 162, 0.46);
        }

        .run-perk-popup.final-offer-popup {
            border-color: rgba(40, 16, 8, 0.68);
            background: linear-gradient(180deg, #1d2448, #0d1530);
            box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.34), 0 0 26px rgba(96, 148, 255, 0.18);
        }

        .run-perk-popup.final-offer-popup .rp-title {
            color: #ffe58e;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.52), 0 0 8px rgba(255, 209, 110, 0.28);
        }

        .run-perk-popup.final-offer-popup .rp-sub {
            color: #d9ecff;
        }

        .final-offer-prelude {
            position: fixed;
            background: #000;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--fo-prelude-ms, 900ms) ease;
        }

        .final-offer-prelude.final-offer-prelude-board {
            z-index: 95270;
        }

        .final-offer-prelude.final-offer-prelude-global {
            inset: 0 !important;
            left: 0 !important;
            top: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            border-radius: 0 !important;
            z-index: 2147483644;
        }

        .final-offer-prelude.show {
            opacity: 1;
        }

        .final-offer-prelude.hide {
            opacity: 0;
        }

        .final-offer-modal {
            position: fixed;
            z-index: 95280;
            background: #000;
            border: 3px solid rgba(0, 0, 0, 0.9);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
            opacity: 0;
            pointer-events: auto;
        }

        .final-offer-modal.show {
            animation: finalOfferIn 180ms ease-out forwards;
        }

        .final-offer-modal.hide {
            animation: finalOfferOut 140ms ease-in forwards;
        }

        .final-offer-modal .fo-art {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            opacity: 0.96;
        }

        .final-offer-modal .fo-shade {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.3) 44%, rgba(0, 0, 0, 0.9) 100%);
            pointer-events: none;
        }

        .final-offer-modal .fo-actions {
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 10px;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            z-index: 2;
        }

        .final-offer-modal .fo-legend {
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 58px;
            display: flex;
            align-items: flex-end;
            gap: 6px;
            z-index: 2;
        }

        .final-offer-modal .fo-choice {
            flex: 1 1 0;
            min-width: 0;
            background: rgba(8, 10, 16, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 7px;
            padding: 5px 6px;
            min-height: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .final-offer-modal .fo-choice-title {
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            line-height: 1.25;
            margin-bottom: 4px;
            letter-spacing: 0.03em;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
        }

        .final-offer-modal .fo-choice-desc {
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            line-height: 1.45;
            color: #dbe8ff;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.56);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }

        .final-offer-modal .fo-choice.fo-choice-pixel .fo-choice-title {
            color: #97d8ff;
        }

        .final-offer-modal .fo-choice.fo-choice-solo .fo-choice-title {
            color: #e5e5e5;
        }

        .final-offer-modal .fo-choice.fo-choice-broker .fo-choice-title {
            color: #ffc8ba;
        }

        .final-offer-modal.pick-locked .fo-btn {
            pointer-events: none;
            opacity: 0.72;
        }

        .final-offer-modal .fo-btn {
            appearance: none;
            border: 2px solid rgba(0, 0, 0, 0.72);
            border-radius: 8px;
            min-height: 38px;
            padding: 7px 6px;
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            letter-spacing: 0.03em;
            cursor: pointer;
            color: #eaf4ff;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
            transition: transform 100ms ease, filter 100ms ease;
        }

        .final-offer-modal .fo-btn:hover {
            filter: brightness(1.06);
            transform: translateY(-1px);
        }

        .final-offer-modal .fo-btn:active {
            transform: translateY(0);
        }

        .final-offer-modal .fo-btn.fo-btn-pixel {
            background: linear-gradient(180deg, #2260a8, #113a73);
            border-color: #8cd8ff;
        }

        .final-offer-modal .fo-btn.fo-btn-solo {
            background: linear-gradient(180deg, #4a4a4a, #232323);
            border-color: #c6c6c6;
            color: #f0f0f0;
        }

        .final-offer-modal .fo-btn.fo-btn-broker {
            background: linear-gradient(180deg, #a6462f, #5a1e14);
            border-color: #ffc0a8;
            color: #ffe5dc;
        }

        @media (max-width: 560px) {
            .final-offer-modal .fo-legend {
                left: 8px;
                right: 8px;
                bottom: 54px;
                gap: 5px;
            }

            .final-offer-modal .fo-choice {
                min-height: 0;
                padding: 4px 5px;
            }

            .final-offer-modal .fo-choice-title {
                font-size: 7px;
            }

            .final-offer-modal .fo-choice-desc {
                font-size: 6px;
                line-height: 1.35;
            }

            .final-offer-modal .fo-actions {
                left: 8px;
                right: 8px;
                bottom: 8px;
                gap: 6px;
            }

            .final-offer-modal .fo-btn {
                min-height: 34px;
                font-size: 7px;
                padding: 6px 4px;
            }
        }

        .boss20-talk-modal {
            position: fixed;
            inset: 0;
            z-index: 2147483645;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: auto;
        }

        .boss20-talk-modal.show { animation: b20TalkFadeIn 220ms ease-out forwards; }
        .boss20-talk-modal.hide { animation: b20TalkFadeOut 220ms ease-in forwards; }

        .boss20-talk-modal .b20t-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(4, 8, 14, 0.88);
            z-index: 1;
        }

        .boss20-talk-modal .b20t-panel {
            position: relative;
            z-index: 2;
            width: min(880px, 94vw);
            border: 3px solid rgba(121, 156, 220, 0.5);
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(8, 18, 34, 0.96), rgba(6, 12, 22, 0.94));
            box-shadow: 0 0 0 2px rgba(23, 42, 76, 0.55), 0 16px 36px rgba(0, 0, 0, 0.45);
            padding: 12px 12px 10px 12px;
        }

        .boss20-talk-modal .b20t-cast {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            align-items: end;
        }

        .boss20-talk-modal .b20t-actor {
            border: 2px solid rgba(90, 122, 174, 0.48);
            border-radius: 8px;
            background: linear-gradient(180deg, rgba(10, 22, 42, 0.9), rgba(8, 16, 30, 0.9));
            padding: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            min-height: 180px;
        }

        .boss20-talk-modal .b20t-actor img {
            max-width: 100%;
            max-height: 210px;
            object-fit: contain;
            image-rendering: pixelated;
        }

        .boss20-talk-modal .b20t-boss-sheet-static {
            width: min(100%, 132px);
            height: min(100%, 132px);
            background-repeat: no-repeat;
            background-size: 400% 400%;
            background-position: 33.333% 100%;
            image-rendering: pixelated;
        }

        .boss20-talk-modal .b20t-actor-pixel img {
            transform: scaleX(-1);
            transform-origin: center center;
        }

        .boss20-talk-modal .b20t-actor .b20t-name {
            margin-top: 4px;
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            color: #e7f1ff;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
        }

        .boss20-talk-modal .b20t-dialog-wrap {
            margin-top: 10px;
            border: 2px solid rgba(120, 168, 234, 0.52);
            border-radius: 8px;
            background: rgba(8, 18, 34, 0.86);
            padding: 8px 9px;
        }

        .boss20-talk-modal .b20t-speaker {
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            color: #ffe8a8;
            margin-bottom: 6px;
        }

        .boss20-talk-modal .b20t-dialog {
            font-family: 'Press Start 2P', monospace;
            font-size: 9px;
            line-height: 1.45;
            color: #f4f8ff;
        }

        .boss20-talk-modal .b20t-actions {
            margin-top: 10px;
            display: flex;
            justify-content: flex-end;
        }

        .boss20-talk-modal .b20t-next {
            font-family: 'Press Start 2P', monospace;
            font-size: 9px;
            border: 3px solid rgba(0, 0, 0, 0.24);
            border-radius: 7px;
            background: linear-gradient(180deg, #fff8d2, #f3df8b);
            color: #13233e;
            padding: 8px 12px;
            cursor: pointer;
            box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
        }

        .boss20-talk-modal .b20t-actor-pixel.talking { animation: b20PixelTalk 260ms ease-in-out 2; }
        .boss20-talk-modal .b20t-actor-boss.talking { animation: b20BossTalkShake 170ms linear 3; }

        @keyframes b20TalkFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes b20TalkFadeOut { from { opacity: 1; } to { opacity: 0; } }
        @keyframes b20PixelTalk { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-3px); } }
        @keyframes b20BossTalkShake {
            0% { transform: translate(0, 0); }
            25% { transform: translate(-2px, 1px); }
            50% { transform: translate(2px, -1px); }
            75% { transform: translate(-1px, -1px); }
            100% { transform: translate(0, 0); }
        }

        .run-perk-popup .rp-card-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 290px;
        }

        .run-perk-popup .rp-card {
            width: 190px;
            max-width: 100%;
            height: 285px;
            aspect-ratio: 2 / 3;
            perspective: 1100px;
            -webkit-perspective: 1100px;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.38));
            transition: transform 140ms ease, filter 140ms ease;
            display: block;
            position: relative;
            border-radius: 12px;
            border: 3px solid #ffd94a;
            background: var(--rp-card-back-url) center center / cover no-repeat, #113370;
            box-shadow: 0 0 0 2px #07163a, 0 6px 10px rgba(0, 0, 0, 0.42);
            overflow: hidden;
            transform-origin: center center;
            will-change: transform, filter;
        }

        .run-perk-popup .rp-card::after { content: none; }

        .run-perk-popup .rp-card-back-inline,
        .run-perk-popup .rp-card-front-inline {
            position: absolute;
            inset: 0;
            border-radius: 9px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            will-change: opacity, transform;
            pointer-events: none;
        }

        .run-perk-popup .rp-card-back-inline {
            opacity: 1;
            transform: translateZ(0);
            z-index: 1;
        }

        .run-perk-popup .rp-card-front-inline {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 6px;
            padding: 10px 9px 9px 9px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(11, 20, 44, 0.18) 38%, rgba(6, 14, 36, 0.78) 100%),
                linear-gradient(165deg, var(--rp-card-front-from), var(--rp-card-front-to));
            color: #fff9d9;
            opacity: 0;
            transform: translateY(0) scale(1);
            z-index: 2;
        }

        .run-perk-popup .rp-card-front-inline-badge {
            font-size: 7px;
            line-height: 1.2;
            color: #f7fffe;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
            opacity: 0.95;
        }

        .run-perk-popup .rp-card-front-inline-title {
            font-size: 10px;
            line-height: 1.15;
            color: #ffed9e;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.58);
        }

        .run-perk-popup .rp-card-front-inline.has-front-art .rp-card-front-inline-badge,
        .run-perk-popup .rp-card-front-inline.has-front-art .rp-card-front-inline-title {
            display: none;
        }

        .run-perk-popup.cards-reveal .rp-item:nth-child(1) .rp-card-back-inline {
            animation: rpFaceFlip 700ms cubic-bezier(.22, .72, .12, 1) 80ms both, rpBackSwap 700ms linear 80ms both;
        }

        .run-perk-popup.cards-reveal .rp-item:nth-child(2) .rp-card-back-inline {
            animation: rpFaceFlip 700ms cubic-bezier(.22, .72, .12, 1) 260ms both, rpBackSwap 700ms linear 260ms both;
        }

        .run-perk-popup.cards-reveal .rp-item:nth-child(1) .rp-card-front-inline {
            animation: rpFaceFlip 700ms cubic-bezier(.22, .72, .12, 1) 80ms both, rpFrontSwap 700ms linear 80ms both;
        }

        .run-perk-popup.cards-reveal .rp-item:nth-child(2) .rp-card-front-inline {
            animation: rpFaceFlip 700ms cubic-bezier(.22, .72, .12, 1) 260ms both, rpFrontSwap 700ms linear 260ms both;
        }

        @keyframes rpFaceFlip {
            0% {
                transform: perspective(900px) scaleX(1);
            }
            46% {
                transform: perspective(900px) scaleX(0.08);
            }
            54% {
                transform: perspective(900px) scaleX(0.08);
            }
            100% {
                transform: perspective(900px) scaleX(1);
            }
        }

        @keyframes rpBackSwap {
            0%, 49% {
                opacity: 1;
            }
            50%, 100% {
                opacity: 0;
            }
        }

        @keyframes rpFrontSwap {
            0%, 49% {
                opacity: 0;
            }
            50%, 100% {
                opacity: 1;
            }
        }

        .run-perk-popup .rp-card-inner { display: none !important; }

        .run-perk-popup .rp-card-face {
            position: absolute;
            inset: 0;
            border-radius: 12px;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            overflow: hidden;
            border: 3px solid #07163a;
        }

        .run-perk-popup .rp-card-back { display: none !important; }
        .run-perk-popup .rp-card-back-fill { display: none !important; }

        .run-perk-popup .rp-card-back-img {
            display: none !important;
        }

        .run-perk-popup .rp-card-back::before,
        .run-perk-popup .rp-card-back::after {
            display: none;
        }

        .run-perk-popup .rp-card-back-core {
            display: none !important;
        }

        .run-perk-popup .rp-card-back-core::before,
        .run-perk-popup .rp-card-back-core::after {
            display: none;
        }

        .run-perk-popup .rp-card-front { display: none !important; }

        .run-perk-popup .rp-card-front-badge {
            font-size: 7px;
            line-height: 1.2;
            color: #f7fffe;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
            opacity: 0.95;
        }

        .run-perk-popup .rp-card-front-name {
            font-size: 10px;
            line-height: 1.15;
            color: #ffed9e;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.58);
        }

        .run-perk-popup .rp-info {
            border-radius: 8px;
            border: 3px solid rgba(0, 0, 0, 0.44);
            background: linear-gradient(180deg, var(--rp-panel-from), var(--rp-panel-to));
            box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
            padding: 8px 8px 7px 8px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-height: 66px;
        }

        .run-perk-popup .rp-item:hover .rp-card {
            transform: translateY(-2px);
            filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.42));
        }

        .run-perk-popup .rp-item:hover .rp-info {
            border-color: rgba(0, 0, 0, 0.54);
            box-shadow: 0 0 0 2px var(--rp-soft), 2px 2px 0 rgba(0, 0, 0, 0.2);
        }

        .run-perk-popup .rp-item:active .rp-card {
            transform: translateY(0);
        }

        .run-perk-popup .rp-item:focus-visible {
            outline: 2px solid var(--rp-accent);
            outline-offset: 4px;
            border-radius: 10px;
        }

        .run-perk-popup .rp-item-title {
            font-size: 9px;
            line-height: 1.2;
            color: var(--rp-panel-title);
        }

        .run-perk-popup .rp-item-desc {
            font-size: 8px;
            line-height: 1.35;
            color: var(--rp-panel-desc);
        }

        @media (max-width: 560px) {
            .run-perk-popup {
                width: min(96vw, 430px);
                max-height: 92vh;
                overflow-y: auto;
                padding: 10px 10px 8px 10px;
            }

            .run-perk-popup .rp-title {
                font-size: 11px;
                margin-bottom: 6px;
            }

            .run-perk-popup .rp-sub {
                font-size: 8px;
                margin-bottom: 8px;
            }

            .run-perk-popup .rp-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .run-perk-popup .rp-source {
                font-size: 6px;
            }

            .run-perk-popup .rp-card-wrap {
                min-height: 188px;
            }

            .run-perk-popup .rp-card {
                width: min(42vw, 144px);
                height: auto;
            }

            .run-perk-popup .rp-info {
                min-height: 52px;
                padding: 6px;
                gap: 4px;
            }

            .run-perk-popup .rp-item-title {
                font-size: 8px;
            }

            .run-perk-popup .rp-item-desc {
                font-size: 7px;
                line-height: 1.3;
            }
        }

        @media (max-width: 390px) {
            .run-perk-popup .rp-card {
                width: min(40vw, 128px);
            }

            .run-perk-popup .rp-card-wrap {
                min-height: 170px;
            }
        }

        .run-perk-popup .rp-card-face { display: none !important; }

        @keyframes runPerkIn {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.9);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes runPerkOut {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.95);
            }
        }

            .game-over-popup.show .go-title {
                animation: gameOverTitleFlicker 560ms steps(2, end) 1;
            }

        @keyframes gameOverIn {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.82);
                filter: contrast(1.4);
            }

            60% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.06);
                filter: contrast(1.2);
            }

            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
                filter: contrast(1);
            }
        }

        @keyframes gameOverOut {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.95);
            }
        }

        .game-over-popup.show {
            animation: gameOverIn 400ms ease both;
        }
        .final-run-stats-popup.show {
            animation: gameOverIn 400ms ease both;
        }

        .game-over-popup.hide {
            animation: gameOverOut 400ms ease forwards;
        }
        .final-run-stats-popup.hide {
            animation: gameOverOut 400ms ease forwards;
        }

        @keyframes gameOverBoardShake {
            0% { transform: translate3d(0, 0, 0) scale(1); }
            20% { transform: translate3d(-4px, 1px, 0) scale(0.996); }
            40% { transform: translate3d(4px, -1px, 0) scale(0.998); }
            60% { transform: translate3d(-2px, 1px, 0) scale(0.997); }
            80% { transform: translate3d(2px, 0, 0) scale(0.999); }
            100% { transform: translate3d(0, 0, 0) scale(1); }
        }

        @keyframes gameOverHudDrop {
            0% { transform: translateY(0); opacity: 1; }
            35% { transform: translateY(4px); opacity: 0.92; }
            100% { transform: translateY(0); opacity: 1; }
        }

        @keyframes gameOverTitleFlicker {
            0% { opacity: 0.8; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.8); }
            35% { opacity: 1; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6), -1px 0 rgba(255, 84, 84, 0.35), 1px 0 rgba(120, 190, 255, 0.25); }
            70% { opacity: 0.88; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7); }
            100% { opacity: 1; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); }
        }

        /* Inner title larger and tightly tracked */
        .level-complete .lc-title {
            font-size: 20px;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
        }

        /* subtle icon slot (optional) */
        .level-complete .lc-icon {
            width: 56px;
            height: 56px;
            flex: 0 0 auto;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.12);
        }

        /* Animations */
        @keyframes levelIn {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.8) rotate(-6deg);
            }

            60% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.03) rotate(2deg);
            }

            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
            }
        }

        @keyframes levelOut {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.92);
            }
        }

        @keyframes finalOfferIn {
            0% {
                opacity: 0;
                transform: scale(0.985);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes finalOfferOut {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.99);
            }
        }

        /* helper classes to control lifecycle */
        .level-complete.show {
            animation: levelIn 420ms cubic-bezier(.2, .9, .2, 1) both;
            pointer-events: none;
        }

        .level-complete.hide {
            animation: levelOut 360ms ease forwards;
            pointer-events: none;
        }

        /* Small fixed mute button at bottom-right */
        .bottom-mute {
            position: fixed;
            right: 12px;
            bottom: 12px;
            z-index: 60000;
            padding: 8px 10px;
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            border-radius: 8px;
            border: 3px solid rgba(0, 0, 0, 0.18);
            background: linear-gradient(180deg, #ffffff, #e6e3ff);
            color: #0b3d91;
            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
        }

        .bottom-controls {
            position: fixed;
            right: 12px;
            bottom: 12px;
            z-index: 60000;
            display: flex;
            flex-direction: row;
            gap: 8px;
            /* space between buttons */
        }

            .bottom-controls .bottom-mute {
                position: static;
                /* remove the fixed positioning */
            }

        /* Meter styles (10-segment retro pixel bar) */
        .meter {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
            border-radius: 8px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.02));
            border: 4px solid rgba(0, 0, 0, 0.25);
            min-width: 140px
        }

        .meter-icon {
            flex: 0 0 auto;
            width: 28px;
            height: 28px;
            display: block;
        }

        .meter-icon--nanobot {
            background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/nanobot_ani.png');
            background-repeat: no-repeat;
            background-size: 200% 200%;
            background-position: 0% 0%;
            image-rendering: pixelated;
            animation: nanobotHudFrames 620ms step-end infinite;
        }

        @keyframes nanobotHudFrames {
            0%, 24.999% { background-position: 0% 0%; }
            25%, 49.999% { background-position: 100% 0%; }
            50%, 74.999% { background-position: 0% 100%; }
            75%, 100% { background-position: 100% 100%; }
        }

        .meter-segments {
            display: flex;
            gap: 2px;
            align-items: center;
            justify-content: center
        }

            .meter-segments .seg {
                width: 12px;
                height: 12px;
                border: 2px solid #081426;
                background: #2b2b2b;
                box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.18);
                border-radius: 1px
            }

                .meter-segments .seg.filled {
                    background: linear-gradient(180deg, #ffd166, #ffb84d);
                    border-color: #081426;
                    box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.18)
                }

        .meter-count {
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            color: #ffd166;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55)
        }

        .perk-strip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 6px;
            border-radius: 7px;
            border: 2px solid rgba(0, 0, 0, 0.22);
            background: linear-gradient(180deg, rgba(16, 22, 34, 0.82), rgba(8, 12, 20, 0.72));
            min-height: 22px;
            width: fit-content;
            max-width: 100%;
        }

        .perk-strip-label {
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            color: #b7c9e7;
            opacity: 0.92;
            letter-spacing: 0.03em;
            margin-right: 2px;
        }

        .perk-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-height: 14px;
            padding: 1px 4px;
            border-radius: 4px;
            border: 1px solid rgba(108, 138, 190, 0.5);
            background: linear-gradient(180deg, rgba(38, 62, 96, 0.96), rgba(22, 36, 58, 0.96));
            color: #e9f4ff;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            line-height: 1;
        }

        .perk-chip-key {
            opacity: 0.96;
        }

        .perk-chip-count {
            color: #fff3b2;
            min-width: 8px;
            text-align: right;
        }

        .perk-chip.persistent {
            border-color: rgba(126, 205, 226, 0.62);
            background: linear-gradient(180deg, rgba(44, 74, 112, 0.96), rgba(22, 44, 70, 0.96));
        }

        .perk-chip.perk-chip-negative {
            border-color: rgba(232, 110, 96, 0.72);
            background: linear-gradient(180deg, rgba(124, 42, 38, 0.96), rgba(78, 24, 22, 0.96));
            color: #ffe3d8;
        }

        .perk-chip.perk-chip-negative .perk-chip-count {
            color: #ffd1b3;
        }

        .perk-chip.pulse {
            animation: perkChipPulse 700ms ease-in-out infinite;
        }

        body[data-game-mode="endurance"] #perkHud {
            display: none !important;
        }

        @keyframes perkChipPulse {
            0%, 100% { filter: brightness(1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 rgba(120, 196, 255, 0); }
            50% { filter: brightness(1.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(120, 196, 255, 0.38); }
        }

        .combo-meter {
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            gap: 4px !important;
            min-width: 210px;
            padding: 8px 10px !important;
        }

        .combo-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .combo-label {
            font-size: 9px;
            letter-spacing: 0.5px;
            opacity: 0.92;
        }

        .combo-count {
            font-size: 10px;
            color: #ffe9b0;
            min-width: 32px;
            text-align: right;
        }

        .combo-track {
            position: relative;
            height: 12px;
            border: 2px solid #081426;
            border-radius: 2px;
            background: linear-gradient(180deg, #2b2b2b, #1f1f1f);
            overflow: hidden;
        }

        .combo-fill {
            width: 0%;
            height: 100%;
            background: linear-gradient(180deg, #ffd166, #ffb84d);
            transition: width 180ms steps(6, end), filter 180ms linear, background 180ms linear;
            box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.16);
        }

        .combo-meter.tier-great .combo-fill {
            background: linear-gradient(180deg, #ffd166, #ffb84d);
        }

        .combo-meter.tier-amazing .combo-fill {
            background: linear-gradient(180deg, #ffe07a, #ffd166);
        }

        .combo-meter.tier-stupendous .combo-fill {
            background: linear-gradient(180deg, #fff2a6, #ffe07a);
        }

        .combo-meter.tier-incredible .combo-fill {
            background: linear-gradient(180deg, #fff7c9, #ffe07a);
            filter: saturate(1.15) brightness(1.05);
        }

        .combo-meter.award-pop {
            animation: comboMeterPop 260ms ease-out;
        }

        @keyframes comboMeterPop {
            0% {
                transform: scale(1);
            }
            45% {
                transform: scale(1.03);
            }
            100% {
                transform: scale(1);
            }
        }

        .seg.pop {
            animation: segPop 220ms ease both
        }

        @keyframes segPop {
            0% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.06)
            }

            100% {
                transform: scale(1)
            }
        }



        /* High-score HUD styles (small, unobtrusive) */
        #highScoreHud {
            color: #ffe9b0;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
            opacity: 0.95;
            user-select: none;
        }

            #highScoreHud strong {
                font-weight: 700;
                margin-right: 6px;
                font-size: 11px;
            }

        #highScoreValue {
            font-family: 'Press Start 2P', monospace;
            font-size: 11px;
        }

        /* Assistant: low-click pulsing for clicks meter */
        @keyframes assist-pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.0);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 0 12px 6px rgba(255, 209, 102, 0.18);
                transform: scale(1.03);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.0);
                transform: scale(1);
            }
        }

        #clicksMeter.low-warning {
            animation: assist-pulse 900ms ease-in-out infinite;
            border-color: #ffd166;
            transform-origin: center;
        }

            #clicksMeter.low-warning .segment {
                /* optional: slightly brighten segments */
                filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
            }

        .level-clear-click-toast {
            position: fixed;
            z-index: 92050;
            pointer-events: none;
            transform: translate(-100%, -50%);
            font-family: 'Press Start 2P', monospace;
            font-size: clamp(10px, 1.4vw, 13px);
            color: #ffe08a;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.72), 0 0 8px rgba(255, 209, 102, 0.36);
            letter-spacing: 0.02em;
            animation: levelClearClickToastPop 920ms ease-out forwards;
        }

        @keyframes levelClearClickToastPop {
            0% {
                opacity: 0;
                transform: translate(-100%, -50%) scale(0.92);
            }
            16% {
                opacity: 1;
                transform: translate(-100%, -64%) scale(1.02);
            }
            72% {
                opacity: 1;
                transform: translate(-100%, -116%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-100%, -136%) scale(0.96);
            }
        }


/* ------------ audio popup (matches badge/game-over styling but interactive) ------------- */
        .audio-popup {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.98);
            z-index: 98000;
            width: min(520px, 86vw);
            max-width: 92%;
            padding: 18px 20px;
            border-radius: 12px;
            border: 6px solid rgba(0, 0, 0, 0.45);
            background: linear-gradient(180deg, #0b3d91, #08306a);
            color: #ffd166;
            box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.25);
            font-family: 'Press Start 2P', monospace;
            font-size: 12px;
            text-align: left;
            pointer-events: auto;
            opacity: 0;
            visibility: hidden;
            max-height: 88vh;
            overflow-y: auto;
            overscroll-behavior: contain;
            transition: opacity 220ms ease, transform 220ms ease, visibility 0ms 220ms;
        }

            /* shown */
            .audio-popup.show {
                opacity: 1;
                visibility: visible;
                transform: translate(-50%, -50%) scale(1);
                transition: opacity 220ms ease, transform 220ms ease;
            }

            /* content rows */
            .audio-popup .row {
                display: flex;
                align-items: center;
                gap: 12px;
                margin: 10px 0;
            }

            .audio-popup label {
                width: 130px;
                font-size: 11px;
                color: #ffe9b0;
            }

            .audio-popup input[type="range"] {
                flex: 1;
                width: 100%;
                min-height: 32px;
                touch-action: pan-x;
                -webkit-tap-highlight-color: transparent;
                accent-color: #ffd166;
            }

            .audio-popup input[type="range"]:disabled {
                opacity: 0.45;
                filter: grayscale(0.25);
            }

            .audio-popup .controls {
                display: flex;
                gap: 10px;
                justify-content: flex-end;
                margin-top: 12px;
            }

            .audio-popup .settings-tabs {
                display: flex;
                gap: 8px;
                margin-bottom: 10px;
            }

            .audio-popup .settings-tab {
                flex: 1;
                text-align: center;
                font-family: "Lucida Console", "Courier New", Courier, monospace;
                font-size: 14px !important;
                padding: 6px 6px;
                line-height: 1.2;
                white-space: nowrap;
            }

            .audio-popup .settings-tabs button.settings-tab {
                font-family: "Lucida Console", "Courier New", Courier, monospace !important;
                font-size: 14px !important;
            }

            .audio-popup .settings-tab.active {
                background: linear-gradient(180deg, #ffd166, #ffb84d);
                color: #0b2a57;
                box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22);
            }

            .audio-popup .settings-tab-pane {
                display: none;
            }

            .audio-popup .settings-tab-pane.active {
                display: block;
            }

            /* Settings tab-specific sizing: keep body text consistently readable */
            .audio-popup #settingsTabPane,
            .audio-popup #settingsTabPane label,
            .audio-popup #settingsTabPane p,
            .audio-popup #settingsTabPane li,
            .audio-popup #settingsTabPane .settings-reset-note,
            .audio-popup #settingsTabPane #musicVolVal,
            .audio-popup #settingsTabPane #sfxVolVal,
            .audio-popup #settingsTabPane .assistant-control div {
                font-size: 13px !important;
            }

            /* Readability pass for Settings/Achievements/About body text.
               Keep headers/buttons in existing display font. */
            .audio-popup .settings-tab-pane,
            .audio-popup .settings-tab-pane label,
            .audio-popup .settings-tab-pane p,
            .audio-popup .settings-tab-pane li,
            .audio-popup .settings-tab-pane .settings-reset-note,
            .audio-popup .settings-tab-pane .settings-test-title,
            .audio-popup .settings-tab-pane .settings-test-checkbox-wrap,
            .audio-popup .settings-tab-pane .settings-test-status,
            .audio-popup .settings-tab-pane .settings-credits-title,
            .audio-popup .settings-tab-pane .settings-credits-body,
            .audio-popup .settings-tab-pane .about-body,
            .audio-popup .settings-tab-pane .about-line,
            .audio-popup .settings-tab-pane .achievement-name,
            .audio-popup .settings-tab-pane .achievement-count,
            .audio-popup .settings-tab-pane .achievement-desc,
            .audio-popup .settings-tab-pane .achievements-summary {
                font-family: "Lucida Console", "Courier New", Courier, monospace;
            }

            .audio-popup .achievements-panel {
                margin-top: 0;
                border: 3px solid rgba(255, 255, 255, 0.16);
                border-radius: 8px;
                background: rgba(0, 0, 0, 0.18);
                padding: 8px;
            }

            .audio-popup .achievements-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                margin-bottom: 8px;
            }

            .audio-popup .achievements-title {
                font-size: 13px;
                color: #ffe9b0;
                letter-spacing: 0.02em;
            }

            .audio-popup .achievements-summary {
                font-size: 13px;
                color: #ffd166;
                opacity: 0.95;
            }

            .audio-popup .achievement-list {
                display: flex;
                flex-direction: column;
                gap: 6px;
                max-height: min(36vh, 320px);
                overflow: auto;
                padding-right: 2px;
            }

            .audio-popup .achievement-item {
                border: 2px solid rgba(255, 255, 255, 0.12);
                border-radius: 6px;
                padding: 6px;
                background: rgba(255, 255, 255, 0.04);
            }

            .audio-popup .achievement-item.done {
                border-color: rgba(255, 209, 102, 0.72);
                box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.2) inset;
                background: linear-gradient(180deg, rgba(255, 209, 102, 0.16), rgba(255, 209, 102, 0.04));
            }

            .audio-popup .achievement-row {
                display: flex;
                align-items: baseline;
                justify-content: space-between;
                gap: 8px;
            }

            .audio-popup .achievement-name {
                font-size: 14px;
                color: #fff3ce;
            }

            .audio-popup .achievement-count {
                font-size: 13px;
                color: #ffd166;
                white-space: nowrap;
            }

            .audio-popup .achievement-desc {
                font-size: 13px;
                color: #cfe4ff;
                opacity: 0.9;
                margin-top: 2px;
                margin-bottom: 5px;
                line-height: 1.5;
            }

            .audio-popup .achievement-track {
                height: 5px;
                border-radius: 999px;
                overflow: hidden;
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }

            .audio-popup .achievement-track > span {
                display: block;
                width: 100%;
                height: 100%;
                transform-origin: left center;
                background: linear-gradient(90deg, #67e8f9, #fde68a);
                transition: transform 140ms ease-out;
            }

            .achievement-unlock-toast {
                position: fixed;
                right: 14px;
                top: 14px;
                z-index: 120000;
                width: min(320px, 86vw);
                font-family: 'Press Start 2P', monospace;
                border-radius: 10px;
                border: 4px solid rgba(0, 0, 0, 0.5);
                background: linear-gradient(180deg, #0b3d91, #08306a);
                color: #ffe9b0;
                box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
                padding: 10px 12px;
                opacity: 0;
                transform: translateY(-8px) scale(0.97);
                pointer-events: none;
                transition: opacity 180ms ease, transform 180ms ease;
            }

            .achievement-unlock-toast.show {
                opacity: 1;
                transform: translateY(0) scale(1);
            }

            .achievement-unlock-toast.hide {
                opacity: 0;
                transform: translateY(-6px) scale(0.98);
            }

            .achievement-unlock-toast .a-head {
                font-size: 9px;
                color: #67e8f9;
                margin-bottom: 4px;
                letter-spacing: 0.03em;
            }

            .achievement-unlock-toast .a-title {
                font-size: 11px;
                color: #fff4cf;
                margin-bottom: 3px;
            }

            .achievement-unlock-toast .a-desc {
                font-size: 8px;
                color: #d8ebff;
                opacity: 0.95;
                line-height: 1.4;
            }

            @media (max-height: 820px) {
                .audio-popup .achievement-list {
                    max-height: 220px;
                    overflow: auto;
                }
            }

            @media (max-height: 700px) {
                .audio-popup .achievement-list {
                    max-height: 160px;
                }
            }

            /* popup small button */
            .audio-popup .btn {
                font-family: inherit;
                border-radius: 8px;
                padding: 8px 12px;
                font-size: 11px;
                border: 4px solid rgba(0, 0, 0, 0.18);
                background: linear-gradient(180deg, #ffffff, #e6e3ff);
                color: #0b3d91;
                box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
                cursor: pointer;
            }

            .audio-popup .settings-reset-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                margin-top: 10px;
                padding-top: 8px;
                border-top: 1px solid rgba(255, 255, 255, 0.16);
            }

            .audio-popup .settings-reset-note {
                font-size: 13px;
                color: #ffe9b0;
                opacity: 0.9;
                text-align: right;
            }

            .audio-popup .settings-dev-row {
                display: none;
                align-items: center;
                justify-content: flex-start;
                gap: 8px;
                margin-top: 10px;
                padding-top: 8px;
                border-top: 1px dashed rgba(255, 255, 255, 0.2);
                flex-wrap: wrap;
            }

            .audio-popup .settings-dev-row.show {
                display: flex;
            }

            .audio-popup .settings-dev-row .settings-reset-note {
                margin-left: auto;
                text-align: right;
            }

            .audio-popup #resetProgressBtn {
                font-size: 10px;
            }

            .audio-popup #settingsTabPane #mainMenuBtn,
            .audio-popup #settingsTabPane #resetProgressBtn {
                font-size: 14px !important;
                line-height: 1.2;
            }

            .audio-popup .settings-test-tools {
                margin-top: 10px;
                padding-top: 8px;
                border-top: 1px solid rgba(255, 255, 255, 0.16);
            }

            .audio-popup .settings-test-title {
                font-size: 13px;
                color: #ffe9b0;
                margin-bottom: 8px;
                letter-spacing: 0.02em;
            }

            .audio-popup .settings-test-row {
                display: grid;
                grid-template-columns: 86px 1fr auto;
                align-items: center;
                gap: 8px;
                margin-top: 6px;
            }

            .audio-popup .settings-test-row label {
                width: auto;
                margin: 0;
                font-size: 13px;
            }

            .audio-popup input[type="number"]#testLevelInput,
            .audio-popup input[type="number"]#testClicksInput {
                width: 100%;
                min-height: 30px;
                border-radius: 6px;
                border: 2px solid rgba(255, 255, 255, 0.22);
                background: rgba(0, 0, 0, 0.22);
                color: #ffe9b0;
                font-family: 'Press Start 2P', monospace;
                font-size: 10px;
                padding: 4px 6px;
                box-sizing: border-box;
            }

            .audio-popup .settings-test-row .btn {
                min-width: 58px;
                padding: 7px 10px;
                font-size: 10px;
            }

            .audio-popup .settings-test-row-meta {
                grid-template-columns: 1fr;
                gap: 6px;
                margin-top: 8px;
            }

            .audio-popup .settings-test-checkbox-wrap {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 13px;
                color: #d8ebff;
            }

            .audio-popup .settings-test-checkbox-wrap input[type="checkbox"] {
                width: 14px;
                height: 14px;
                accent-color: #67e8f9;
                margin: 0;
            }

            .audio-popup .settings-test-status {
                min-height: 12px;
                font-size: 12px;
                color: #cfe4ff;
                line-height: 1.35;
                opacity: 0.96;
            }

            .audio-popup .settings-credits {
                margin-top: 10px;
                padding-top: 8px;
                border-top: 1px solid rgba(255, 255, 255, 0.16);
            }

            .audio-popup .settings-credits-title {
                font-size: 13px;
                color: #ffe9b0;
                margin-bottom: 6px;
                letter-spacing: 0.02em;
            }

            .audio-popup .settings-credits-body {
                font-size: 13px;
                line-height: 1.55;
                color: #d8ebff;
                opacity: 0.95;
                word-break: break-word;
            }

            .audio-popup .settings-credits-body a {
                color: #67e8f9;
                text-decoration: underline;
            }

            .audio-popup .about-body {
                margin-top: 6px;
                border: 3px solid rgba(255, 255, 255, 0.16);
                border-radius: 8px;
                background: rgba(0, 0, 0, 0.18);
                padding: 10px;
                color: #d8ebff;
                font-size: 14px;
                line-height: 1.62;
            }

            .audio-popup .about-line {
                color: #ffe9b0;
                font-size: 14px;
            }

            .audio-popup .settings-audio-toggle-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                margin-top: 8px;
            }

            .audio-popup .settings-audio-toggle-row label {
                width: auto;
                margin: 0;
            }

            .audio-popup .howto-v2 {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-top: 6px;
                font-family: "Lucida Console", "Courier New", Courier, monospace;
                font-size: 12px;
            }

            #helpPopup {
                width: min(700px, 94vw);
                max-width: 94vw;
                max-height: 90vh;
                font-size: 13px;
            }

            .audio-popup .howto-carousel {
                display: grid;
                grid-template-columns: auto 1fr auto;
                gap: 8px;
                align-items: stretch;
            }

            .audio-popup .howto-nav {
                align-self: center;
                padding: 8px 10px;
                min-width: 40px;
                font-size: 12px;
                line-height: 1;
            }

            .audio-popup .howto-carousel-meta {
                margin-top: 6px;
                text-align: center;
                font-size: 10px;
                color: #cfe4ff;
                opacity: 0.95;
            }

            .audio-popup .howto-card {
                border: 2px solid rgba(255, 255, 255, 0.16);
                border-radius: 8px;
                background: rgba(0, 0, 0, 0.18);
                padding: 12px;
            }

            .audio-popup #howtoSlides .howto-card {
                display: none;
            }

            .audio-popup #howtoSlides .howto-card.active {
                display: block;
            }

            .audio-popup .howto-card h3 {
                margin: 0 0 6px 0;
                font-size: 15px;
                line-height: 1.35;
                color: #ffe9b0;
            }

            .audio-popup .howto-card p {
                margin: 0 0 6px 0;
                font-size: 13px;
                line-height: 1.58;
                color: #d8ebff;
            }

            .audio-popup .howto-card ul {
                margin: 0 0 0 16px;
                padding: 0;
                color: #d8ebff;
            }

            .audio-popup .howto-card li {
                font-size: 13px;
                line-height: 1.55;
                margin: 0 0 4px 0;
            }

            .audio-popup .howto-step-row {
                display: grid;
                grid-template-columns: 1fr auto 1fr auto 1fr;
                align-items: center;
                gap: 6px;
            }

            .audio-popup .howto-step {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                text-align: center;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-radius: 6px;
                padding: 12px 8px;
            }

            /* Panel 1: show sprite progression without boxed tiles */
            .audio-popup .howto-card-core-loop .howto-step {
                background: transparent;
                border: 0;
                border-radius: 0;
                padding: 4px 2px;
                box-shadow: none;
            }

            .audio-popup .howto-step img {
                width: 44px;
                height: 44px;
                object-fit: contain;
                image-rendering: pixelated;
            }

            .audio-popup .howto-sprite {
                width: 82px;
                height: 82px;
                background-repeat: no-repeat;
                background-position: 0% 0%;
                image-rendering: pixelated;
                pointer-events: none;
            }

            .audio-popup .howto-sprite-s1 {
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/virus1_clean.png');
                background-size: 300% 400%;
                transform: scale(0.92);
                transform-origin: center center;
            }

            .audio-popup .howto-sprite-s2 {
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/virus_2_animation.png');
                background-size: 200% 200%;
                transform: scale(0.95) translateY(2px);
                transform-origin: center center;
            }

            .audio-popup .howto-sprite-s3 {
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/virus_3_animation.png');
                background-size: 100% 200%;
                transform: scale(0.95) translateY(4px);
                transform-origin: center center;
            }

            .audio-popup .howto-sprite-s4 {
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/virus_4_animated.png');
                background-size: 200% 200%;
                transform: scale(1.02) translate(2px, -8px);
                transform-origin: center center;
            }

            .audio-popup .howto-step span {
                font-size: 9px;
                line-height: 1.3;
                color: #fff3ce;
            }

            .audio-popup .howto-arrow {
                font-size: 16px;
                color: #ffd166;
                opacity: 0.9;
                text-align: center;
            }

            .audio-popup .howto-size-grid {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 6px;
            }

            .audio-popup .howto-size-grid > div {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
                padding: 10px 6px;
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-radius: 6px;
                background: rgba(255, 255, 255, 0.05);
            }

            /* Panel 2: show only sprite stages (no framed boxes) */
            .audio-popup .howto-card-viral-growth .howto-size-grid > div {
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
                padding: 4px 2px;
            }

            /* Panel 2: emphasize visual stage progression */
            .audio-popup .howto-card-viral-growth .howto-sprite-s2 {
                transform: scale(0.74) translateY(3px);
            }

            .audio-popup .howto-size-grid img {
                width: 40px;
                height: 40px;
                object-fit: contain;
                image-rendering: pixelated;
            }

            .audio-popup .howto-size-grid .howto-sprite {
                width: 74px;
                height: 74px;
            }

            .audio-popup .howto-size-grid span {
                font-size: 9px;
                color: #fff3ce;
            }

            .audio-popup .howto-inline-note {
                font-size: 11px;
                color: #67e8f9;
            }

            .audio-popup .howto-burst-illustration {
                display: block;
                width: min(460px, 92%);
                max-width: 100%;
                height: auto;
                margin: 8px auto 6px;
                image-rendering: pixelated;
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
            }

            .audio-popup .howto-live-meter {
                margin: 6px 0 6px 0;
                max-width: 100%;
            }

            .audio-popup .howto-counter-labels {
                display: flex;
                justify-content: space-between;
                gap: 6px;
                font-size: 8px;
                color: #fff3ce;
                opacity: 0.92;
                margin: 0 0 8px 0;
            }

            .audio-popup .howto-score-visual {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin: 6px 0 8px 0;
                padding: 8px;
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-radius: 8px;
                background: rgba(255, 255, 255, 0.04);
            }

            .audio-popup .howto-score-pill {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-width: 64px;
                padding: 6px 8px;
                border-radius: 6px;
                border: 1px solid rgba(255, 255, 255, 0.16);
                background: rgba(0, 0, 0, 0.2);
                color: #ffe9b0;
            }

            .audio-popup .howto-score-pill span {
                font-size: 8px;
                opacity: 0.86;
            }

            .audio-popup .howto-score-pill b {
                font-size: 11px;
                line-height: 1.1;
            }

            .audio-popup .howto-score-arrow {
                font-size: 14px;
                color: #ffd166;
                opacity: 0.95;
            }

            .audio-popup .howto-score-sprite {
                width: 24px;
                height: 24px;
                object-fit: contain;
                image-rendering: pixelated;
                filter: drop-shadow(0 0 6px rgba(144, 230, 255, 0.35));
            }

            .audio-popup .howto-score-tier-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin: 8px 0 10px;
            }

            .audio-popup .howto-score-tier {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 40px;
                padding: 6px 8px;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.16);
                background: rgba(0, 0, 0, 0.22);
                color: #ffe9b0;
                text-align: center;
            }

            .audio-popup .howto-score-tier span {
                font-size: 8px;
                opacity: 0.9;
            }

            .audio-popup .howto-score-tier b {
                font-size: 12px;
                line-height: 1.15;
                color: #fff8d2;
            }

            .audio-popup .howto-mods-demo {
                display: flex;
                align-items: center;
                gap: 6px;
                margin: 6px 0 10px;
                padding: 6px 8px;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.16);
                background: rgba(14, 32, 62, 0.66);
                flex-wrap: wrap;
            }

            .audio-popup .howto-mods-demo-label {
                font-family: 'Press Start 2P', monospace;
                font-size: 8px;
                color: #ffd671;
                letter-spacing: 0.05em;
                margin-right: 2px;
            }

            .audio-popup .howto-mod-chip {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 3px 6px;
                border-radius: 999px;
                border: 1px solid rgba(66, 235, 177, 0.42);
                background: rgba(30, 61, 73, 0.82);
                color: #dbfff3;
                font-family: 'Press Start 2P', monospace;
                font-size: 7px;
                line-height: 1;
            }

            .audio-popup .howto-mod-chip-count {
                color: #fff3ce;
            }

            .audio-popup .howto-mod-chip-risk {
                border-color: rgba(255, 162, 96, 0.66);
                background: rgba(81, 35, 26, 0.84);
                color: #ffd7bf;
            }

            .audio-popup .howto-nanobot-visual {
                display: flex;
                justify-content: center;
                margin: 6px 0;
            }

            .audio-popup .howto-nanobot-preview {
                width: 96px;
                height: 96px;
                border-radius: 50%;
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/nanobot_hover.png');
                background-repeat: no-repeat;
                background-size: 300% 300%;
                background-position: 0% 0%;
                image-rendering: pixelated;
                filter: drop-shadow(0 0 7px rgba(255, 208, 92, 0.42));
                animation: howtoNanobotFrames 620ms steps(7, end) infinite;
            }

            @keyframes howtoNanobotFrames {
                0%, 14.285% { background-position: 0% 0%; }
                14.286%, 28.571% { background-position: 50% 0%; }
                28.572%, 42.857% { background-position: 100% 0%; }
                42.858%, 57.142% { background-position: 0% 50%; }
                57.143%, 71.428% { background-position: 50% 50%; }
                71.429%, 85.714% { background-position: 100% 50%; }
                85.715%, 100% { background-position: 0% 100%; }
            }

            .audio-popup .howto-armored-visual {
                display: flex;
                justify-content: center;
                margin: 6px 0;
            }

            .audio-popup .howto-armored-preview {
                position: relative;
                width: 108px;
                height: 108px;
                border-radius: 999px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: radial-gradient(circle at 35% 30%, rgba(192, 234, 255, 0.18), rgba(168, 220, 255, 0.04));
            }

            .audio-popup .howto-armored-preview::before {
                content: '';
                position: absolute;
                inset: 3px;
                border-radius: 999px;
                background:
                    repeating-linear-gradient(62deg, rgba(168, 226, 255, 0.28) 0 2px, transparent 2px 8px),
                    repeating-linear-gradient(-62deg, rgba(116, 198, 255, 0.24) 0 2px, transparent 2px 8px);
                opacity: 0.9;
                z-index: 2;
                pointer-events: none;
            }

            .audio-popup .howto-armored-preview::after {
                content: '';
                position: absolute;
                inset: 2px;
                border-radius: 999px;
                border: 2px solid rgba(138, 213, 255, 0.96);
                box-shadow: 0 0 12px rgba(112, 198, 255, 0.62), inset 0 0 10px rgba(174, 230, 255, 0.22);
                z-index: 3;
                pointer-events: none;
            }

            .audio-popup .howto-armored-virus-frame {
                width: 84px;
                height: 84px;
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/virus_3_animation.png');
                background-repeat: no-repeat;
                background-size: 100% 200%;
                background-position: 0% 0%;
                image-rendering: pixelated;
                z-index: 1;
                transform: translateY(4px) scale(0.9);
            }

            .audio-popup .howto-biofilm-visual {
                display: flex;
                justify-content: center;
                margin: 8px 0;
            }

            .audio-popup .howto-biofilm-preview {
                width: 112px;
                height: 78px;
                border-radius: 22px 26px 18px 24px / 20px 26px 18px 22px;
                background:
                    radial-gradient(circle at 26% 30%, rgba(255, 243, 163, 0.84) 0 24%, rgba(255, 233, 122, 0.38) 38%, rgba(255, 222, 104, 0.15) 56%, rgba(255, 222, 104, 0) 72%),
                    radial-gradient(circle at 68% 64%, rgba(255, 236, 132, 0.72) 0 20%, rgba(255, 215, 95, 0.2) 52%, rgba(255, 215, 95, 0) 74%),
                    radial-gradient(circle at 52% 42%, rgba(255, 209, 80, 0.62) 0 62%, rgba(220, 141, 38, 0.22) 86%, rgba(220, 141, 38, 0) 100%);
                box-shadow: 0 0 10px rgba(255, 186, 84, 0.42), inset 0 0 10px rgba(255, 248, 178, 0.24);
                animation: biofilmWobble 1450ms ease-in-out infinite;
            }

            .audio-popup .howto-threat-visual {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin: 8px 0 10px;
            }

            .audio-popup .howto-threat-card {
                border-radius: 10px;
                border: 1px solid rgba(255, 255, 255, 0.16);
                background: rgba(255, 255, 255, 0.04);
                padding: 8px 6px 10px;
                text-align: center;
            }

            .audio-popup .howto-threat-title {
                font-family: 'Press Start 2P', monospace;
                font-size: 8px;
                color: #ffe8b8;
                margin-bottom: 6px;
                letter-spacing: 0.04em;
            }

            .audio-popup .howto-boss-visual {
                display: flex;
                justify-content: center;
            }

            .audio-popup .howto-boss-preview {
                width: 108px;
                height: 108px;
                border-radius: 999px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: radial-gradient(circle at 50% 40%, rgba(198, 228, 255, 0.16), rgba(20, 35, 62, 0.22));
                box-shadow: inset 0 0 0 1px rgba(120, 190, 255, 0.25), 0 0 12px rgba(112, 188, 255, 0.24);
            }

            .audio-popup .howto-boss-sheet-frame {
                width: 96px;
                height: 96px;
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/miniboss.png');
                background-repeat: no-repeat;
                background-size: 100% 200%;
                background-position: 0% 0%;
                image-rendering: pixelated;
                filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
            }

            .audio-popup .howto-storm-meter-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin: 6px 0 4px 0;
            }

            .audio-popup .howto-storm-meter-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
                padding: 6px;
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-radius: 6px;
                background: rgba(255, 255, 255, 0.05);
            }

            .audio-popup .howto-storm-btn-preview {
                position: relative;
                width: 64px;
                height: 38px;
                border: 2px solid #1e2630;
                border-radius: 7px;
                background: linear-gradient(180deg, #454c56, #2a313a);
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
                filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28));
            }

            .audio-popup .howto-storm-btn-preview::before {
                content: '';
                position: absolute;
                left: 4px;
                right: 4px;
                top: 4px;
                bottom: 4px;
                border-radius: 3px;
                border: 2px solid rgba(176, 190, 202, 0.52);
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
            }

            .audio-popup .howto-storm-btn-preview .storm-fill {
                position: absolute;
                left: 6px;
                right: 6px;
                top: 6px;
                bottom: 6px;
                border-radius: 2px;
                transform-origin: left center;
                transform: scaleX(var(--fill, 0));
                background: linear-gradient(90deg, #4f8fff, #7dc8ff);
                box-shadow: 0 0 8px rgba(94, 216, 255, 0.34);
            }

            .audio-popup .howto-storm-btn-preview .storm-bolt {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 14px;
                line-height: 1;
                color: #ffe992;
                text-shadow: 0 0 6px rgba(255, 218, 108, 0.5);
                z-index: 4;
            }

            .audio-popup .howto-storm-btn-preview .storm-batt-cap {
                position: absolute;
                right: -7px;
                top: 50%;
                width: 8px;
                height: 12px;
                transform: translateY(-50%);
                border-radius: 2px;
                background: linear-gradient(180deg, #7b8794, #566371);
                border: 1px solid rgba(28, 34, 42, 0.86);
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
                z-index: 4;
            }

            .audio-popup .howto-storm-btn-preview .storm-armed-label {
                position: absolute;
                left: 50%;
                top: 4px;
                transform: translateX(-50%);
                font-family: 'Press Start 2P', monospace;
                font-size: 6px;
                line-height: 1;
                letter-spacing: 0.06em;
                color: #ffe799;
                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 4px rgba(255, 220, 120, 0.32);
                z-index: 4;
                opacity: 0;
            }

            .audio-popup .howto-cascade-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
                max-width: 250px;
                margin: 8px auto;
            }

            .audio-popup .howto-cascade-illustration {
                display: block;
                width: min(273px, 60%);
                max-width: 100%;
                height: auto;
                margin: 8px auto 6px;
                image-rendering: pixelated;
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
            }

            .audio-popup .howto-cascade-grid span {
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.14);
                background: rgba(255, 255, 255, 0.05);
                font-size: 24px;
                color: #b5e8ff;
            }

            .audio-popup .howto-cascade-grid .core {
                color: #ffe08a;
                border-color: rgba(255, 224, 138, 0.7);
                box-shadow: 0 0 0 1px rgba(255, 224, 138, 0.18) inset;
            }

            .audio-popup .howto-cascade-grid .hit {
                color: #8fe2ff;
                border-color: rgba(143, 226, 255, 0.42);
                background: rgba(72, 196, 255, 0.12);
                animation: howtoCascadePulse 980ms ease-in-out infinite;
            }

            .audio-popup .howto-cascade-grid .hit:nth-child(2) { animation-delay: 0ms; }
            .audio-popup .howto-cascade-grid .hit:nth-child(4) { animation-delay: 160ms; }
            .audio-popup .howto-cascade-grid .hit:nth-child(6) { animation-delay: 320ms; }
            .audio-popup .howto-cascade-grid .hit:nth-child(8) { animation-delay: 480ms; }

            @keyframes howtoCascadePulse {
                0%, 100% {
                    transform: scale(1);
                    box-shadow: inset 0 0 0 0 rgba(143, 226, 255, 0);
                    filter: brightness(1);
                }
                50% {
                    transform: scale(1.06);
                    box-shadow: inset 0 0 0 2px rgba(143, 226, 255, 0.28), 0 0 10px rgba(143, 226, 255, 0.22);
                    filter: brightness(1.18);
                }
            }

            .audio-popup .howto-storm-btn-preview-full .storm-armed-label {
                opacity: 1;
            }

            .audio-popup .howto-storm-btn-preview-full {
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(130, 172, 220, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
            }

            .audio-popup .howto-storm-btn-preview-charging .storm-fill {
                background: linear-gradient(90deg, #4f8fff, #7dc8ff);
            }

            .audio-popup .howto-storm-btn-preview-full .storm-fill {
                background: linear-gradient(90deg, #a7bcff, #f2ea92);
                box-shadow: 0 0 10px rgba(198, 201, 126, 0.62);
                animation: stormFillSweep 520ms linear infinite, stormComboHotPulse 520ms ease-in-out infinite;
            }

            .audio-popup .howto-storm-meter-label {
                font-size: 9px;
                color: #fff3ce;
            }

            @keyframes howtoStormMeterFramesCharged {
                0%, 24.999% { background-position: center center, 0% 0%; }
                25%, 49.999% { background-position: center center, 100% 0%; }
                50%, 74.999% { background-position: center center, 0% 100%; }
                75%, 100% { background-position: center center, 100% 100%; }
            }

            .audio-popup .howto-perk-visual {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin: 8px 0 10px 0;
            }

            .audio-popup .howto-perk-card-box {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                gap: 6px;
                border-radius: 10px;
                border: 2px solid rgba(255, 255, 255, 0.24);
                padding: 8px 6px 10px;
                background: rgba(16, 29, 56, 0.7);
            }

            .audio-popup .howto-perk-card-label {
                font-family: 'Press Start 2P', monospace;
                font-size: 8px;
                color: #fff4cf;
                text-align: center;
                letter-spacing: 0.03em;
            }

            .audio-popup .howto-perk-card-image {
                width: min(170px, 100%);
                height: auto;
                image-rendering: pixelated;
                filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
            }

            .audio-popup .howto-perk-card-box-good {
                border-color: rgba(117, 255, 202, 0.55);
                box-shadow: inset 0 0 0 1px rgba(66, 235, 177, 0.24), 0 0 10px rgba(66, 235, 177, 0.22);
            }

            .audio-popup .howto-perk-card-box-risk {
                border-color: rgba(255, 184, 124, 0.62);
                box-shadow: inset 0 0 0 1px rgba(255, 158, 88, 0.25), 0 0 10px rgba(255, 158, 88, 0.24);
            }

            .audio-popup .howto-storm-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
                max-width: 240px;
                margin: 6px auto;
                text-align: center;
            }

            .audio-popup .howto-storm-illustration {
                display: block;
                width: min(273px, 60%);
                max-width: 100%;
                height: auto;
                margin: 8px auto 6px;
                image-rendering: pixelated;
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
            }

            .audio-popup .howto-storm-grid span {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                border-radius: 6px;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.14);
                font-size: 20px;
            }

            .audio-popup .howto-storm-grid .c {
                color: #ffe08a;
                border-color: rgba(255, 224, 138, 0.7);
                box-shadow: 0 0 0 1px rgba(255, 224, 138, 0.18) inset;
            }

            .audio-popup .howto-storm-grid .n {
                color: #9defff;
            }

            .audio-popup .howto-storm-grid .d {
                color: #8ad1ff;
                opacity: 0.8;
            }

            .audio-popup .howto-caption {
                margin-top: 2px;
                font-size: 12px;
                text-align: center;
                color: #cfe4ff;
                opacity: 0.95;
            }

            @media (max-width: 560px) {
                .audio-popup .settings-tabs {
                    gap: 6px;
                }

                .audio-popup .settings-tab {
                    font-size: 14px !important;
                    padding: 5px 4px;
                    letter-spacing: 0;
                }

                .audio-popup .howto-sprite {
                    width: 64px;
                    height: 64px;
                }

                .audio-popup .howto-size-grid .howto-sprite {
                    width: 58px;
                    height: 58px;
                }

                .audio-popup .howto-carousel {
                    grid-template-columns: 1fr;
                }

                .audio-popup .howto-nav {
                    justify-self: center;
                }

                .audio-popup .howto-step-row {
                    grid-template-columns: 1fr;
                }

                .audio-popup .howto-storm-meter-row {
                    grid-template-columns: 1fr;
                }

                .audio-popup .howto-perk-visual {
                    grid-template-columns: 1fr;
                }

                .audio-popup .howto-threat-visual {
                    grid-template-columns: 1fr;
                }

                .audio-popup .howto-arrow {
                    transform: rotate(90deg);
                    margin: -2px 0;
                }
            }

        /* the HUD gear button uses same small-ctrl style already present; optional slight tweak for icon */
        .small-ctrl .gear-icon {
            width: 24px;
            height: 24px;
            display: inline-block;
            color: inherit;
        }

        .restart-icon {
            width: 24px;
            height: 24px;
            color: inherit;
        }

/* Ensure .wrap is a positioning context (safe to set again) */
        .wrap {
            position: relative;
        }

        /* Badge: always absolutely positioned relative to .wrap */
        #assist-badge {
            position: absolute !important;
            right: 12px !important;
            bottom: 12px !important;
            width: 65px !important;
            /* adjust size as desired */
            height: 65px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 8px !important;
            padding: 0 !important;
            /* remove internal padding that can shrink image */
            box-sizing: border-box !important;
            z-index: 9999 !important;
            pointer-events: auto !important;
        }

        /* Keep assistant speech bubble in viewport layer so it is never trapped under .wrap overlays */
        #assist-bubble {
            position: fixed !important;
            left: 12px;
            top: 12px;
            right: auto;
            bottom: auto;
            /* badge bottom + badge height (52) + 4px gap */
            max-width: min(78vw, 420px) !important;
            min-width: 220px !important;
            width: clamp(220px, 32vw, 380px) !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow-y: visible !important;
            padding: 8px 12px !important;
            border-radius: 10px !important;
            box-sizing: border-box !important;
            display: block !important;
            font-size: 16px !important;
            line-height: 1.35 !important;
            white-space: normal !important;
            word-break: break-word !important;
            pointer-events: none !important;
            z-index: 2147483646 !important;
        }

        #assist-text {
            margin: 0 !important;
            font-size: inherit !important;
            line-height: inherit !important;
        }

            /* Show state unchanged */
            #assist-bubble.show {
                opacity: 1 !important;
                transform: translateY(0) scale(1) !important;
                pointer-events: auto !important;
            }

        /* Ensure the face image fills the badge container */
        #assist-badge img {
            width: 100% !important;
            height: 100% !important;
            display: block !important;
            object-fit: contain !important;
            /* preserve aspect but fill available space */
            margin: 0 !important;
            padding: 0 !important;
            border-radius: inherit !important;
        }

        /* Assistant face expression & speaking animation */
        #assistant-face {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* only one mouth visible at a time; controlled by JS via classes on #assistant-badge */
        .mouth-shape {
            transition: opacity 160ms linear, transform 160ms ease;
        }

        /* expression helpers when we set a class on #assist-badge (e.g., .expr-smile) */
        #assist-badge.expr-neutral .mouth-shape.neutral {
            opacity: 1;
            transform: translateY(0);
        }

        #assist-badge.expr-neutral .mouth-shape.smile {
            opacity: 0;
        }

        #assist-badge.expr-neutral .mouth-shape.talk {
            opacity: 0;
        }

        #assist-badge.expr-neutral .mouth-shape.worried {
            opacity: 0;
        }

        #assist-badge.expr-smile .mouth-shape.smile {
            opacity: 1;
        }

        #assist-badge.expr-worried .mouth-shape.worried {
            opacity: 1;
        }

        #assist-badge.expr-talk .mouth-shape.talk {
            opacity: 1;
        }

        /* speaking jiggle for the whole badge (subtle) */
        @keyframes assist-jiggle {
            0% {
                transform: translateY(0) rotate(0deg);
            }

            25% {
                transform: translateY(-1px) rotate(-1deg);
            }

            50% {
                transform: translateY(0) rotate(0.6deg);
            }

            75% {
                transform: translateY(-0.6px) rotate(-0.8deg);
            }

            100% {
                transform: translateY(0) rotate(0deg);
            }
        }

        /* mouth wobble for the talk mouth (applies to polyline) */
        @keyframes mouth-wobble {
            0% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(-1px) rotate(2deg);
            }

            100% {
                transform: translateY(0) rotate(-1deg);
            }
        }

        /* when the assistant is speaking, add subtle badge jiggle + mouth wobble */
        #assist-badge.speaking {
            animation: assist-jiggle 420ms ease-in-out infinite;
            transform-origin: center center;
        }

            #assist-badge.speaking .mouth-shape.talk {
                animation: mouth-wobble 320ms ease-in-out infinite;
            }

        /* Eyebrow styling & expression rules */
        #brow-left,
        #brow-right {
            transition: opacity 140ms linear, transform 140ms ease;
            transform-origin: center;
            stroke-linecap: round;
            stroke-linejoin: round;
            /* soft shadow if you like (optional) */
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
        }

        /* Neutral: hidden or subtle */
        #assist-badge.expr-neutral #brow-left,
        #assist-badge.expr-neutral #brow-right {
            opacity: 0;
            transform: translateY(0) rotate(0deg);
        }

        /* Smile: slight raised relaxed brows */
        #assist-badge.expr-smile #brow-left,
        #assist-badge.expr-smile #brow-right {
            opacity: 1;
            transform: translateY(-1px) rotate(-2deg);
            stroke-width: 1.3;
            stroke: #ffb08a;
            /* optional softer color for smile */
        }

        /* Worried / gameOver: inward furrow */
        #assist-badge.expr-worried #brow-left {
            opacity: 1;
            transform: translateY(0.6px) rotate(10deg);
            stroke: #ffb08a;
            stroke-width: 1.6;
        }

        #assist-badge.expr-worried #brow-right {
            opacity: 1;
            transform: translateY(0.6px) rotate(-10deg);
            stroke: #ffb08a;
            stroke-width: 1.6;
        }

        /* Talk: quick little twitch while speaking */
        @keyframes brow-twitch {
            0% {
                transform: translateY(0) rotate(0deg);
            }

            30% {
                transform: translateY(-1px) rotate(-2deg);
            }

            60% {
                transform: translateY(1px) rotate(2deg);
            }

            100% {
                transform: translateY(0) rotate(0deg);
            }
        }

        #assist-badge.expr-talk.speaking #brow-left,
        #assist-badge.expr-talk.speaking #brow-right {
            opacity: 1;
            animation: brow-twitch 420ms ease-in-out infinite;
            stroke: #ffd166;
            stroke-width: 1.4;
        }

        /* Optional: high-anger or surprise variants */
        #assist-badge.expr-surprised #brow-left,
        #assist-badge.expr-surprised #brow-right {
            opacity: 1;
            transform: translateY(-3px) rotate(-6deg);
            stroke: #ffffff;
            stroke-width: 1.6;
        }

        /* one-off strong flick when .brow-flick is present */
        @keyframes brow-flick {
            0% {
                transform: translateY(0) rotate(0deg);
            }

            40% {
                transform: translateY(-3px) rotate(-8deg);
            }

            100% {
                transform: translateY(0) rotate(0deg);
            }
        }

        #assist-badge.brow-flick #brow-left,
        #assist-badge.brow-flick #brow-right {
            opacity: 1;
            animation: brow-flick 160ms ease-out 1;
        }

        @keyframes idle-brow-left-lift {
            0% { transform: translateY(0) rotate(0deg); }
            45% { transform: translateY(-3px) rotate(-6deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }

        @keyframes idle-brow-right-lift {
            0% { transform: translateY(0) rotate(0deg); }
            45% { transform: translateY(-3px) rotate(6deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }

        #assist-badge.idle-brow-left #brow-left {
            opacity: 1;
            animation: idle-brow-left-lift 260ms ease-out 1;
        }

        #assist-badge.idle-brow-right #brow-right {
            opacity: 1;
            animation: idle-brow-right-lift 260ms ease-out 1;
        }

        #assist-badge.idle-mouth-smirk .mouth-shape.neutral,
        #assist-badge.idle-mouth-pout .mouth-shape.neutral {
            opacity: 0 !important;
        }

        #assist-badge.idle-mouth-smirk .mouth-shape.smirk {
            opacity: 1 !important;
            transform: translateY(0) scale(1.02) !important;
        }

        #assist-badge.idle-mouth-pout .mouth-shape.pout {
            opacity: 1 !important;
            transform: translateY(0) scale(1.01) !important;
        }

        /* hide all mouths by default */
        .mouth-shape {
            opacity: 0;
            transition: opacity 140ms linear, transform 160ms ease;
        }

        /* show only the neutral mouth when idle */
        #assist-badge.expr-neutral .mouth-shape.neutral {
            opacity: 1;
            transform: translateY(0);
        }

        /* show smile when appropriate */
        #assist-badge.expr-smile .mouth-shape.smile {
            opacity: 1;
            transform: translateY(0);
        }

        /* show zig-zag talk mouth while talking */
        #assist-badge.expr-talk .mouth-shape.talk {
            opacity: 1;
            transform: translateY(0);
        }

        /* show worried / frown */
        #assist-badge.expr-worried .mouth-shape.worried {
            opacity: 1;
            transform: translateY(0);
        }

        /* ensure talk mouth can wobble while speaking */
        #assist-badge.speaking .mouth-shape.talk {
            /* animation applied elsewhere if desired */
        }

        /* Retro monitor styling for small assistant badge */
        .retro-monitor {
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
            /* interaction remains at badge level */
        }

        /* V1: green phosphor CRT palette for assistant screen */
        .assist-badge .retro-monitor #screenGrad stop:first-child {
            stop-color: #0f2a16 !important;
            stop-opacity: 0.96 !important;
        }

        .assist-badge .retro-monitor #screenGrad stop:last-child {
            stop-color: #06130b !important;
            stop-opacity: 0.98 !important;
        }

        .assist-badge .retro-monitor .retro-screen {
            filter: drop-shadow(0 0 5px rgba(94, 255, 160, 0.18)) saturate(1.08);
        }

        .assist-badge .retro-monitor .retro-screen > g:first-of-type {
            opacity: 0.14 !important;
        }

        .assist-badge .retro-monitor #monitor-face circle,
        .assist-badge .retro-monitor #monitor-face .mouth-shape,
        .assist-badge .retro-monitor #brow-left,
        .assist-badge .retro-monitor #brow-right {
            stroke: #ffd166 !important;
            fill: #ffd166 !important;
        }

        .assist-badge .retro-monitor #monitor-face .mouth-shape {
            fill: none !important;
            filter: drop-shadow(0 0 1px rgba(255, 209, 102, 0.65));
        }

        /* screen outer/inner visuals (applied to the wrapper, not SVG internal) */
        .retro-screen {
            /* scanlines and subtle CRT curvature via SVG shapes, but we add a CSS overlay for scanlines glow */
            background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.06)), repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.035) 2px 3px);
            background-blend-mode: overlay;
            mix-blend-mode: normal;
        }

        /* small glow when speaking */
        #assist-badge.speaking .retro-screen {
            box-shadow: 0 6px 18px rgba(120, 255, 170, 0.16), inset 0 0 12px rgba(120, 255, 170, 0.05);
            transform: translateZ(0);
            transition: box-shadow 180ms ease;
        }

        /* bezel / body style (optional fallback for non-SVG parts) */
        .retro-bezel {
            border-radius: 6px;
            overflow: visible;
        }

        /* make the tiny power LED pulse */
        .retro-led {
            transition: opacity 180ms ease, transform 180ms ease;
        }

        #assist-badge.speaking .retro-led {
            transform: scale(1.08);
            opacity: 1;
        }

        /* === Eyebrow visibility overrides for retro monitor SVG ===
           Place this after your other assistant CSS in <head>.
        */

        /* default: hide (keeps initial behavior) */
        #assist-badge .retro-monitor #brow-left,
        #assist-badge .retro-monitor #brow-right {
            opacity: 1 !important;
            transition: opacity 140ms linear, transform 140ms ease;
            transform-origin: center;
        }

        /* smile: slightly raised relaxed brows */
        #assist-badge.expr-smile .retro-monitor #brow-left,
        #assist-badge.expr-smile .retro-monitor #brow-right {
            opacity: 1 !important;
            transform: translateY(-1px) rotate(-2deg);
            stroke-width: 1.3;
            stroke: #bde58a;
        }

        /* worried / gameOver: inward furrow */
        #assist-badge.expr-worried .retro-monitor #brow-left {
            opacity: 1 !important;
            transform: translateY(0.6px) rotate(10deg);
            stroke: #ffb08a;
            stroke-width: 1.6;
        }

        #assist-badge.expr-worried .retro-monitor #brow-right {
            opacity: 1 !important;
            transform: translateY(0.6px) rotate(-10deg);
            stroke: #ffb08a;
            stroke-width: 1.6;
        }

        /* talk: quick twitch while speaking */
        #assist-badge.expr-talk.speaking .retro-monitor #brow-left,
        #assist-badge.expr-talk.speaking .retro-monitor #brow-right {
            opacity: 1 !important;
            animation: brow-twitch 420ms ease-in-out infinite;
            stroke: #ffd166;
            stroke-width: 1.4;
        }

        @keyframes brow-twitch {
            0% {
                transform: translateY(0) rotate(0deg);
            }

            30% {
                transform: translateY(-1px) rotate(-2deg);
            }

            60% {
                transform: translateY(1px) rotate(2deg);
            }

            100% {
                transform: translateY(0) rotate(0deg);
            }
        }

        /* === AI intro overlay === */
        .ai-intro-overlay {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at center, rgba(10, 10, 30, 0.95), rgba(0, 0, 0, 0.98));
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2147483646;
            /* above everything else */
            color: #ffd166;
        }

        .ai-intro-content {
            text-align: center;
            max-width: 80vw;
        }

        .ai-face-slot {
            display: flex;
            justify-content: center;
            margin-bottom: 24px;
        }

        .ai-intro-text {
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 20px;
            font-family: "Lucida Console", "Courier New", Courier, monospace;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
        }

        .ai-start-btn {
            --menu-accent: #ffd166;
            font-family: 'Press Start 2P', monospace;
            font-size: 12px;
            padding: 14px 28px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)),
                linear-gradient(180deg, #86a4c4, #587597 58%, #3f5b78);
            color: #17314b;
            border: 4px solid rgba(26, 45, 69, 0.72);
            border-radius: 8px;
            box-shadow:
                inset 0 2px 0 rgba(255,255,255,0.24),
                inset 0 -2px 0 rgba(15, 32, 52, 0.22),
                0 6px 0 rgba(20, 34, 52, 0.45),
                0 10px 18px rgba(0, 0, 0, 0.22);
            cursor: pointer;
            transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
            position: relative;
            overflow: hidden;
            text-shadow: 0 1px 0 rgba(255,255,255,0.32);
        }

            .ai-start-btn::before {
                content: '';
                position: absolute;
                display: none;
            }

            .ai-start-btn::after {
                content: '';
                position: absolute;
                inset: 0;
                background:
                    radial-gradient(circle at 16px 50%, var(--menu-accent) 0 3px, rgba(255,255,255,0.32) 3px 5px, transparent 5px),
                    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 44%);
                pointer-events: none;
            }

            .ai-start-btn:hover {
                transform: translateY(-2px) scale(1.02);
                filter: brightness(1.1) saturate(1.08);
                box-shadow:
                    inset 0 2px 0 rgba(255,255,255,0.34),
                    inset 0 -2px 0 rgba(15, 32, 52, 0.18),
                    0 6px 0 rgba(20, 34, 52, 0.45),
                    0 0 0 2px rgba(255,255,255,0.10),
                    0 0 18px rgba(255, 209, 102, 0.22),
                    0 14px 24px rgba(0, 0, 0, 0.26);
            }

            .ai-start-btn:active {
                transform: translateY(3px);
                filter: brightness(0.98);
                box-shadow:
                    inset 0 2px 0 rgba(255,255,255,0.18),
                    inset 0 -1px 0 rgba(15, 32, 52, 0.18),
                    0 3px 0 rgba(20, 34, 52, 0.42),
                    0 6px 12px rgba(0, 0, 0, 0.18);
            }

        #aiStartBtn { --menu-accent: #ffd166; }
        #aiEnduranceBtn { --menu-accent: #ff8f5a; }
        #aiTutorialBtn { --menu-accent: #6fd7ff; }
        #aiLoreBtn { --menu-accent: #8fb3ff; }
        #aiAchievementsBtn { --menu-accent: #8af0c4; }

        .ai-start-row {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: 10px;
            width: min(360px, 78vw);
            margin: 0 auto;
        }

        .ai-start-row .ai-start-btn {
            width: 100%;
            text-align: center;
        }

        .ai-start-split-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            width: 100%;
        }

        .ai-start-split-row .ai-start-btn {
            width: 100%;
            min-width: 0;
            font-size: 10px;
            padding: 12px 10px;
        }

        .lore-modal {
            position: fixed;
            inset: 0;
            z-index: 2147483647;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 12px;
            background: rgba(2, 7, 18, 0.86);
        }

        .lore-modal.show {
            display: flex;
        }

        .lore-card {
            width: min(900px, calc(100vw - 20px));
            max-height: min(90vh, 820px);
            overflow: auto;
            border-radius: 12px;
            border: 2px solid rgba(255, 209, 102, 0.72);
            background: linear-gradient(180deg, rgba(8, 24, 52, 0.96), rgba(4, 12, 30, 0.97));
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.52);
            padding: 14px 14px 12px;
            color: #dcecff;
            font-family: "Lucida Console", "Courier New", monospace;
        }

        .lore-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
        }

        .lore-logo {
            display: block;
            width: min(380px, 74%);
            max-width: 100%;
            height: auto;
            margin: 0 auto 10px auto;
            image-rendering: auto;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
        }

        .lore-title {
            font-family: 'Press Start 2P', monospace;
            color: #ffd166;
            font-size: 16px;
            line-height: 1.35;
        }

        .lore-subtitle {
            color: #ffe9b0;
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 10px;
        }

        .lore-body {
            font-size: 14px;
            line-height: 1.58;
            color: #d8ebff;
        }

        .lore-body p {
            margin: 0 0 10px 0;
        }

        .lore-portrait {
            float: right;
            width: min(220px, 30vw);
            max-width: 42%;
            height: auto;
            margin: 2px 0 10px 14px;
            border-radius: 8px;
            border: 2px solid rgba(255, 209, 102, 0.55);
            box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35);
            image-rendering: auto;
        }

        .lore-quote {
            color: #ffe9b0;
            font-style: italic;
        }

        .lore-subhead {
            color: #ffd166;
            font-weight: 700;
        }

        .achievements-modal-card {
            width: min(900px, calc(100vw - 20px));
        }

        .start-achievement-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: min(68vh, 620px);
            overflow: auto;
            padding-right: 4px;
        }

        .achievements-modal-card .achievement-item {
            border: 1px solid rgba(255, 209, 102, 0.18);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.05);
            padding: 10px 12px;
        }

        .achievements-modal-card .achievement-item.done {
            border-color: rgba(111, 255, 190, 0.35);
            background: rgba(67, 214, 146, 0.10);
        }

        .achievements-modal-card .achievement-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 5px;
        }

        .achievements-modal-card .achievement-name {
            color: #ffe5b7;
            font-family: 'Press Start 2P', monospace;
            font-size: 11px;
            line-height: 1.4;
        }

        .achievements-modal-card .achievement-count {
            color: #cbe2ff;
            font-size: 12px;
            white-space: nowrap;
        }

        .achievements-modal-card .achievement-desc {
            color: #d8ebff;
            font-size: 14px;
            line-height: 1.45;
            margin-bottom: 8px;
        }

        .achievements-modal-card .achievement-track {
            height: 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            overflow: hidden;
        }

        .achievements-modal-card .achievement-track > span {
            display: block;
            width: 100%;
            height: 100%;
            transform-origin: left center;
            background: linear-gradient(90deg, #ffd166, #8af0c4);
        }

        @media (max-width: 760px) {
            .lore-portrait {
                float: none;
                display: block;
                width: min(260px, 68vw);
                max-width: 100%;
                margin: 4px auto 10px auto;
            }
        }

        .ai-intro-overlay.fade-out {
            opacity: 0;
            pointer-events: none;
            transition: opacity 600ms ease;
        }

        .tutorial-overlay {
            position: fixed;
            left: 50%;
            top: max(10px, env(safe-area-inset-top));
            transform: translateX(-50%);
            width: min(560px, calc(100vw - 20px));
            z-index: 2147483644;
            background: rgba(4, 20, 44, 0.95);
            border: 2px solid rgba(255, 209, 102, 0.65);
            border-radius: 10px;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
            padding: 12px;
            color: #eaf4ff;
            font-family: "Lucida Console", "Courier New", monospace;
            pointer-events: auto;
        }

        .tutorial-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
            color: #ffd166;
            font-size: 13px;
        }

        .tutorial-body {
            font-size: 14px;
            line-height: 1.45;
            color: #d5e7ff;
            margin-bottom: 10px;
            min-height: 42px;
        }

        .tutorial-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }

        .tutorial-btn {
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            line-height: 1;
            border: 2px solid rgba(0, 0, 0, 0.35);
            border-radius: 7px;
            padding: 8px 10px;
            cursor: pointer;
            color: #0d223c;
            background: linear-gradient(180deg, #fef7d6, #e9d392);
        }

        .tutorial-btn.secondary {
            color: #e5efff;
            background: linear-gradient(180deg, #2a3d63, #192743);
        }

        .tutorial-btn[disabled] {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .storm-btn.tutorial-focus {
            box-shadow:
                0 0 0 2px rgba(255, 209, 102, 0.9),
                0 0 14px rgba(95, 171, 255, 0.85),
                0 0 26px rgba(95, 171, 255, 0.45);
            animation: tutorialStormPulse 850ms ease-in-out infinite;
        }

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

        .tutorial-storm-arrow {
            position: fixed;
            z-index: 2147483646;
            pointer-events: none;
            font-family: 'Press Start 2P', monospace;
            font-size: 26px;
            line-height: 1;
            color: #ffd400;
            text-shadow:
                0 0 6px rgba(255, 221, 77, 0.98),
                0 0 14px rgba(255, 179, 0, 0.85),
                0 0 24px rgba(255, 145, 0, 0.65);
            transform: translate(-50%, -50%);
            animation: tutorialArrowPulse 650ms ease-in-out infinite;
        }

        @keyframes tutorialArrowPulse {
            0%, 100% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
            50% { opacity: 0.52; transform: translate(-50%, -50%) translateY(-4px); }
        }

        .tutorial-meter-arrow {
            position: fixed;
            z-index: 2147483646;
            pointer-events: none;
            font-family: 'Press Start 2P', monospace;
            font-size: 42px;
            line-height: 1;
            color: #ffd400;
            text-shadow:
                0 0 6px rgba(255, 221, 77, 0.98),
                0 0 14px rgba(255, 179, 0, 0.85),
                0 0 24px rgba(255, 145, 0, 0.65);
            transform: translate(-50%, -50%);
            animation: tutorialArrowPulse 650ms ease-in-out infinite;
        }

        .tutorial-assistant-arrow {
            position: fixed;
            z-index: 2147483646;
            pointer-events: none;
            font-family: 'Press Start 2P', monospace;
            font-size: 40px;
            line-height: 1;
            color: #ffd400;
            text-shadow:
                0 0 6px rgba(255, 221, 77, 0.98),
                0 0 14px rgba(255, 179, 0, 0.85),
                0 0 24px rgba(255, 145, 0, 0.65);
            transform: translate(-50%, -50%);
            animation: tutorialArrowPulse 650ms ease-in-out infinite;
        }

        .tutorial-mods-arrow {
            position: fixed;
            z-index: 2147483646;
            pointer-events: none;
            font-family: 'Press Start 2P', monospace;
            font-size: 40px;
            line-height: 1;
            color: #ffd400;
            text-shadow:
                0 0 6px rgba(255, 221, 77, 0.98),
                0 0 14px rgba(255, 179, 0, 0.85),
                0 0 24px rgba(255, 145, 0, 0.65);
            transform: translate(-50%, -50%);
            animation: tutorialArrowPulse 650ms ease-in-out infinite;
        }

        .tutorial-inline-card {
            display: block;
            width: min(170px, 42vw);
            height: auto;
            margin: 10px 0 0;
            image-rendering: pixelated;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
            border-radius: 8px;
        }

        .tutorial-inline-card.tutorial-inline-card-float {
            float: right;
            margin: 2px 0 8px 12px;
            width: min(180px, 34vw);
            max-width: 46%;
        }

        .tutorial-card-warning-row {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 10px;
            align-items: start;
            margin-top: 8px;
        }

        .tutorial-card-warning-row .tutorial-inline-card {
            margin: 0;
        }

        .tutorial-card-warning-text {
            font-size: 12px;
            line-height: 1.5;
            color: #d8ebff;
        }

        @media (max-width: 700px) {
            .tutorial-inline-card.tutorial-inline-card-float {
                float: none;
                display: block;
                margin: 6px auto 10px auto;
                width: min(200px, 62vw);
                max-width: 100%;
            }
        }

        .tutorial-prelude-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147483645;
            background: rgba(2, 9, 24, 0.88);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px;
        }

        .tutorial-prelude-card {
            width: min(900px, calc(100vw - 24px));
            max-height: min(86vh, 760px);
            overflow: auto;
            background: linear-gradient(180deg, rgba(8, 24, 52, 0.96), rgba(4, 12, 30, 0.97));
            border: 2px solid rgba(255, 209, 102, 0.72);
            border-radius: 12px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.52);
            padding: 18px 18px 14px;
            color: #dcecff;
            font-family: "Lucida Console", "Courier New", monospace;
        }

        .tutorial-prelude-title {
            font-family: 'Press Start 2P', monospace;
            color: #ffd166;
            font-size: 13px;
            margin: 0 0 12px 0;
        }

        .tutorial-prelude-body {
            font-size: 14px;
            line-height: 1.62;
            color: #d6e7ff;
            white-space: normal;
        }

        .tutorial-prelude-body p {
            margin: 0 0 12px 0;
        }

        .tutorial-prelude-layout {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 14px;
            align-items: end;
        }

        .tutorial-prelude-assistant {
            width: 140px;
            max-width: 30vw;
            height: auto;
            image-rendering: pixelated;
            filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
            align-self: end;
        }

        @media (max-width: 700px) {
            .tutorial-prelude-layout {
                grid-template-columns: 1fr;
            }
            .tutorial-prelude-assistant {
                width: 100px;
                max-width: 38vw;
                justify-self: end;
            }
        }

        .tutorial-prelude-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 12px;
        }

        .cell.tutorial-target {
            outline: 2px dashed #ffd166;
            outline-offset: -4px;
            box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.24) inset;
            animation: tutorialTargetPulse 900ms ease-in-out infinite;
        }

        @keyframes tutorialTargetPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.03); }
        }

        button.ctrl {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
        }

        .btn-icon {
            width: 33px; /* same as your SVG size */
            height: 33px;
            user-select: none;
            pointer-events: none; /* keeps clicks handled by the button */
        }

        .hud-glyph {
            width: auto;
            height: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            background: transparent;
            box-shadow: none;
            color: #121a24;
            font-size: 18px;
            line-height: 1;
            font-family: "Segoe UI Symbol", "Noto Sans Symbols", sans-serif;
            user-select: none;
            pointer-events: none;
            text-shadow:
                0 1px 0 rgba(255, 255, 255, 0.28),
                0 -1px 0 rgba(0, 0, 0, 0.38),
                1px 0 0 rgba(0, 0, 0, 0.3),
                -1px 0 0 rgba(0, 0, 0, 0.3);
        }

        .hud-glyph-start,
        .hud-glyph-reset,
        .hud-glyph-settings,
        .hud-glyph-help {
            color: #121a24;
        }

        .hud-glyph-help { font-weight: 700; }
    
/* Assistant: added expressions - ensure neutral mouth is only visible when expr-neutral is present */
#assist-badge.expr-neutral .mouth-shape.neutral { opacity: 1 !important; transform: translateY(0); }
#assist-badge:not(.expr-neutral) .mouth-shape.neutral { opacity: 0 !important; }

/* New expression: wink (half-closed eye implied by brow tilt and wink mouth) */
#assist-badge.expr-wink .mouth-shape.wink { opacity: 1; transform: translateY(0); }
#assist-badge.expr-wink #brow-left { opacity: 0.9; transform: translateY(-1px) rotate(-6deg); stroke: #ffd166; stroke-width: 1.2; }

/* New expression: angry (furrowed brow + red angry mouth) */
#assist-badge.expr-angry .mouth-shape.angry { opacity: 1; transform: translateY(0) scaleY(1); }
#assist-badge.expr-angry #brow-left, #assist-badge.expr-angry #brow-right {
    opacity: 1;
    transform-origin: center;
    transform: translateY(1px) rotate(12deg);
    stroke: #ff6b6b;
    stroke-width: 1.8;
}

/* Ensure other expression rules do not accidentally enable neutral mouth */
#assist-badge.expr-smile .mouth-shape.neutral,
#assist-badge.expr-worried .mouth-shape.neutral,
#assist-badge.expr-talk .mouth-shape.neutral,
#assist-badge.expr-surprised .mouth-shape.neutral,
#assist-badge.speaking .mouth-shape.neutral {
    opacity: 0 !important;
}

/* make talk mouth animate only when speaking */
#assist-badge.expr-talk.speaking .mouth-shape.talk { animation: mouth-wobble 320ms ease-in-out infinite; }

/* small visual tweak: angry mouth color override */
#assist-badge.expr-angry .mouth-shape.angry { stroke: #ff6b6b; }


/* START-MISSION modal */
        #startModal,
        #level5DynamicsModal {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.98);
            z-index: 130000;
            width: min(720px, 88vw);
            max-width: 92%;
            padding: 20px 20px 28px 20px;
            border-radius: 12px;
            border: 6px solid rgba(0, 0, 0, 0.6);
            background: #000;
            /* solid black background requested */
            color: #ffd166;
            /* requested text color */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
            font-family: "Lucida Console", "Courier New", Courier, monospace;
            /* requested font + fallbacks */
            font-size: 14px;
            line-height: 1.45;
            display: none;
            gap: 12px;
        }

            /* visible state */
            #startModal.show,
            #level5DynamicsModal.show {
                display: block;
                animation: modalIn 260ms ease both;
            }

            /* inner layout: text left, small image anchored bottom-right inside modal */
            #startModal .inner,
            #level5DynamicsModal .inner {
                position: relative;
                display: flex;
                align-items: flex-start;
                gap: 12px;
                min-height: 140px;
            }

            /* text column takes remaining width, left aligned */
            #startModal .modal-text,
            #level5DynamicsModal .modal-text {
                padding-right: 8px;
                flex: 1 1 auto;
                text-align: left;
                white-space: pre-line;
                color: #ffd166;
                font-size: 14px;
                text-indent: 0;
            }

            #startModal .start-modal-logo {
                display: block;
                width: min(260px, 56vw);
                max-width: 100%;
                height: auto;
                margin: 0 0 10px 0;
                image-rendering: auto;
            }

            /* small image anchored bottom-right inside the modal */
            /* small image placed as a flex item to avoid overlapping text */
            #startModal .modal-img,
            #level5DynamicsModal .modal-img {
                position: static;
                right: auto;
                bottom: auto;
                width: 84px;
                height: auto;
                display: block;
                object-fit: contain;
                border-radius: 6px;
                pointer-events: none;
                image-rendering: -webkit-optimize-contrast;
                flex: 0 0 84px;
                margin-left: 12px;
                align-self: flex-end;
            }

            /* Close button */
            #startModal .close-btn,
            #level5DynamicsModal .close-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-top: 12px;
                padding: 10px 12px;
                border-radius: 8px;
                border: 4px solid rgba(0, 0, 0, 0.28);
                background: linear-gradient(180deg, #111, #333);
                color: #ffd166;
                cursor: pointer;
                font-family: "Lucida Console", "Courier New", Courier, monospace;
                font-size: 12px;
            }

        /* entry animation */
        @keyframes modalIn {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.96);
            }

            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* responsive: allow image to shrink on narrow screens */
        @media (max-width: 420px) {
            #startModal .modal-img,
            #level5DynamicsModal .modal-img {
                width: 56px;
                right: 8px;
                bottom: 8px;
            }

            #startModal,
            #level5DynamicsModal {
                padding: 16px;
            }
        }


/* Assistant toggle styles */
.assistant-control { width:100%; box-sizing: border-box; }

/* Hide native checkbox but keep it accessible */
.assistant-toggle-input,
.audio-toggle-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* custom switch */
.assistant-toggle-switch,
.audio-toggle-switch {
  display:inline-block;
  width:46px;
  height:26px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  position: relative;
  transition: background .18s ease;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(2,6,23,0.4);
}
.assistant-toggle-switch::after,
.audio-toggle-switch::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform .18s ease;
  box-shadow: 0 2px 6px rgba(2,6,23,0.25);
}

/* checked state */
.assistant-toggle-input:checked + .assistant-toggle-switch,
.audio-toggle-input:checked + .audio-toggle-switch{
  background: linear-gradient(90deg, #34d399, #06b6d4);
}
.assistant-toggle-input:checked + .assistant-toggle-switch::after,
.audio-toggle-input:checked + .audio-toggle-switch::after{
  transform: translateX(20px);
}

/* audio popup sizing */
.audio-popup { min-width: min(420px, 92vw); max-width: 90vw; padding: 14px; box-sizing: border-box; }


/* Assistant & AI UI */

/* Ensure AI assistant elements sit above popups without overriding intro menu stacking */
        #assist-badge,
        .ai-assistant-bubble,
        .assistant-bubble,
        .ai-face-slot {
            z-index: 97000 !important;
        }


/* Added expressions: pout, grin, bigsurprised, smirk - use neutral stroke #ffd166 */
#assist-badge .mouth-shape.pout { transition: opacity 140ms linear, transform 160ms ease; }
#assist-badge.expr-pout .mouth-shape.pout { opacity: 1 !important; stroke: #ffd166; transform: translateY(0) !important; }

#assist-badge .mouth-shape.grin { transition: opacity 140ms linear, transform 160ms ease; }
#assist-badge.expr-grin .mouth-shape.grin { opacity: 1 !important; stroke: #ffd166; transform: translateY(0) !important; }

#assist-badge .mouth-shape.bigsurprised { transition: opacity 140ms linear, transform 160ms ease; }
#assist-badge.expr-bigsurprised .mouth-shape.bigsurprised { opacity: 1 !important; stroke: #ffd166; transform: translateY(0) !important; }

#assist-badge .mouth-shape.smirk { transition: opacity 140ms linear, transform 160ms ease; }
#assist-badge.expr-smirk .mouth-shape.smirk { opacity: 1 !important; stroke: #ffd166; transform: translateY(0) !important; }

/* Ensure all mouth shapes use the neutral stroke color by default */
#assist-badge .mouth-shape { stroke: #ffd166 !important; }

/* Ensure eyebrow strokes follow neutral color; target common eyebrow ids/classes if present */
#assist-badge #brow-left, #assist-badge #brow-right, #assist-badge .brow { stroke: #ffd166 !important; }

/* Defensive: neutral mouth only visible when expr-neutral */
#assist-badge:not(.expr-neutral) .mouth-shape.neutral { opacity: 0 !important; }
#assist-badge.expr-neutral .mouth-shape.neutral { opacity: 1 !important; stroke: #ffd166; }

/* Idle mouth micro-expression override: hide neutral mouth during idle smirk/pout flashes */
#assist-badge.expr-neutral.idle-mouth-smirk .mouth-shape.neutral,
#assist-badge.expr-neutral.idle-mouth-pout .mouth-shape.neutral {
    opacity: 0 !important;
}


/* Assistant disabled helper */
body.assistant-disabled #assist-badge,
body.assistant-disabled .assist-bubble,
body.assistant-disabled .assistant-face,
body.assistant-disabled #assistant-bubble-root,
body.assistant-disabled .assistant-fallback-bubble,
html.assistant-disabled #assist-badge,
html.assistant-disabled .assist-bubble,
html.assistant-disabled .assistant-face,
html.assistant-disabled #assistant-bubble-root,
html.assistant-disabled .assistant-fallback-bubble {
  display: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}


/* Minimal, mobile-first assistant styles */
        .assist-badge {
            position: fixed;
            right: 12px;
            bottom: 72px;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
            touch-action: manipulation;
            transform: scale(1.15);
        }

        .assist-badge img {
            width: 28px;
            height: 28px;
            display: block;
        }

        .assist-bubble {
            position: fixed;
            right: 12px;
            bottom: 40px;
            max-width: 72vw;
            min-width: 160px;
            padding: 8px 12px;
            border-radius: 10px;
            background: linear-gradient(180deg, #111, #222);
            color: #ffd166;
            font-family: monospace, 'Press Start 2P', sans-serif;
            font-size: 16px;
            z-index: 999999;
            pointer-events: none;
            opacity: 0;
            transform: translateY(6px) scale(0.98);
            transition: opacity 180ms ease, transform 200ms ease;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
        }

        .assist-bubble.show {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .assist-badge.notif {
            box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.08), 0 4px 8px rgba(0, 0, 0, 0.25);
        }

        @media (max-width:420px) {
            .assist-bubble {
                max-width: 86vw;
                font-size: 13px;
                bottom: 110px;
            }
        }


/* HUD / Badge / Game UI */

/* Control trio: compact square buttons in HUD */
        .control-trio {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: nowrap;
        }

            .control-trio .pathodyne-mark-inline {
                width: 40px;
                height: 40px;
                flex: 0 0 40px;
                background: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/P-mark.png') no-repeat center / contain;
                opacity: 0.8;
                filter: drop-shadow(0 2px 4px rgba(255, 211, 102, 0.45)) drop-shadow(0 0 7px rgba(255, 205, 90, 0.26));
                pointer-events: auto;
                cursor: pointer;
                transition: filter 220ms ease, background-image 180ms linear, opacity 180ms linear, transform 150ms ease;
            }

            .control-trio .pathodyne-mark-inline.is-viral {
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/V-mark.png');
                opacity: 0.9;
                filter: drop-shadow(0 2px 4px rgba(146, 255, 118, 0.5)) drop-shadow(0 0 10px rgba(98, 225, 92, 0.38));
            }

            .control-trio .pathodyne-mark-inline:hover,
            .control-trio .pathodyne-mark-inline:focus-visible {
                transform: translateY(-1px) scale(1.03);
                outline: none;
                filter: drop-shadow(0 2px 6px rgba(255, 221, 154, 0.56)) drop-shadow(0 0 12px rgba(255, 215, 115, 0.34));
            }

            .control-trio .ctrl {
                width: 48px;
                height: 40px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-family: 'Press Start 2P', monospace;
                font-size: 12px;
                border-radius: 6px;
                border: 4px solid rgba(0, 0, 0, 0.18);
                background: linear-gradient(180deg, #ffffff, #e6e3ff);
                color: #0b3d91;
                box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
                cursor: pointer;
                padding: 6px;
            }

            .control-trio #audioBtn,
            .control-trio #helpBtn {
                --hud-menu-accent: #ffd166;
                background:
                    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)),
                    linear-gradient(180deg, #86a4c4, #587597 58%, #3f5b78);
                color: #17314b;
                border: 4px solid rgba(26, 45, 69, 0.72);
                box-shadow:
                    inset 0 2px 0 rgba(255,255,255,0.24),
                    inset 0 -2px 0 rgba(15, 32, 52, 0.22),
                    0 6px 0 rgba(20, 34, 52, 0.45),
                    0 10px 18px rgba(0, 0, 0, 0.22);
                position: relative;
                overflow: hidden;
                text-shadow: 0 1px 0 rgba(255,255,255,0.32);
                transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
            }

            .control-trio #audioBtn::after,
            .control-trio #helpBtn::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 44%);
                pointer-events: none;
            }

            .control-trio #audioBtn:hover,
            .control-trio #helpBtn:hover,
            .control-trio #audioBtn:focus-visible,
            .control-trio #helpBtn:focus-visible {
                transform: translateY(-2px) scale(1.02);
                filter: brightness(1.1) saturate(1.08);
                box-shadow:
                    inset 0 2px 0 rgba(255,255,255,0.34),
                    inset 0 -2px 0 rgba(15, 32, 52, 0.18),
                    0 6px 0 rgba(20, 34, 52, 0.45),
                    0 0 0 2px rgba(255,255,255,0.10),
                    0 0 18px rgba(255, 209, 102, 0.22),
                    0 14px 24px rgba(0, 0, 0, 0.26);
                outline: none;
            }

            .control-trio #audioBtn:active,
            .control-trio #helpBtn:active {
                transform: translateY(3px);
                filter: brightness(0.98);
                box-shadow:
                    inset 0 2px 0 rgba(255,255,255,0.18),
                    inset 0 -1px 0 rgba(15, 32, 52, 0.18),
                    0 3px 0 rgba(20, 34, 52, 0.42),
                    0 6px 12px rgba(0, 0, 0, 0.18);
            }

            .control-trio #audioBtn { --hud-menu-accent: #ffd166; }
            .control-trio #helpBtn { --hud-menu-accent: #6fd7ff; }

             .control-trio .storm-btn {
                width: 52px;
                min-width: 52px;
                height: 34px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                position: relative;
                overflow: hidden;
                --storm-combo-ratio: 0;
                border: 2px solid #1e2630;
                border-radius: 7px;
                background:
                    linear-gradient(180deg, #454c56, #2a313a);
                color: #d9f6ff;
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
             }

             .control-trio .storm-btn::before {
                content: '';
                position: absolute;
                left: 3px;
                right: 3px;
                top: 3px;
                bottom: 3px;
                border-radius: 3px;
                border: 2px solid rgba(176, 190, 202, 0.52);
                background: transparent;
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
                pointer-events: none;
                z-index: 2;
             }

             .control-trio .storm-btn::after {
                content: '';
                position: absolute;
                left: 4px;
                right: 4px;
                top: 4px;
                bottom: 4px;
                border-radius: 2px;
                background:
                    linear-gradient(90deg, #2ca7ff 0%, #48c8ff 48%, #ffe76f 100%);
                transform-origin: left center;
                transform: scaleX(var(--storm-combo-ratio));
                opacity: 1;
                transition: transform 120ms linear, opacity 120ms linear, filter 120ms linear, box-shadow 120ms linear;
                box-shadow: 0 0 10px rgba(86, 194, 255, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.22);
                pointer-events: none;
                z-index: 3;
             }

             .control-trio .storm-btn .storm-bolt {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 13px;
                line-height: 1;
                color: #ffe992;
                text-shadow: 0 0 5px rgba(255, 218, 108, 0.45);
                pointer-events: none;
                z-index: 4;
             }

             .control-trio .storm-btn .storm-batt-cap {
                position: absolute;
                right: -5px;
                top: 50%;
                width: 6px;
                height: 12px;
                transform: translateY(-50%);
                border-radius: 2px;
                background: linear-gradient(180deg, #7b8794, #566371);
                border: 1px solid rgba(28, 34, 42, 0.86);
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
                pointer-events: none;
                z-index: 3;
             }

             .control-trio .storm-btn .storm-armed-label {
                position: absolute;
                left: 50%;
                top: 1px;
                transform: translateX(-50%);
                font-family: 'Press Start 2P', monospace;
                font-size: 6px;
                line-height: 1;
                letter-spacing: 0.06em;
                color: #ffe799;
                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 4px rgba(255, 220, 120, 0.32);
                opacity: 0;
                transition: opacity 120ms linear;
                pointer-events: none;
                z-index: 4;
             }

             .control-trio .storm-btn.armed .storm-armed-label {
                opacity: 1;
             }

             .control-trio .storm-btn.jammed {
                filter: saturate(0.82) brightness(0.88);
             }

             .control-trio .storm-btn.jammed::before {
                border-color: rgba(255, 206, 122, 0.6);
                background: transparent;
             }

             .control-trio .storm-btn.jammed::after {
                background: linear-gradient(90deg, rgba(250, 170, 84, 0.96), rgba(255, 229, 126, 0.98));
                box-shadow: 0 0 10px rgba(255, 180, 74, 0.45);
                animation: stormJamSweep 260ms linear infinite;
             }

             .control-trio .storm-btn.jammed .storm-armed-label {
                opacity: 1;
                color: #ffd27a;
                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72), 0 0 7px rgba(255, 180, 86, 0.45);
             }

             .control-trio .storm-btn.combo-tracking::after {
                opacity: 0.96;
                animation: stormFillSweep 700ms linear infinite;
            }

             .control-trio .storm-btn.combo-tracking,
             .control-trio .storm-btn.combo-near,
             .control-trio .storm-btn.combo-hot {
                background: linear-gradient(180deg, #4b5562, #2d3743);
             }

             .control-trio .storm-btn.charged {
                background: linear-gradient(180deg, #4e5865, #323c48);
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(130, 172, 220, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
             }

             .control-trio .storm-btn.combo-near::after {
                background: linear-gradient(90deg, #49bbff, #ffe27a);
                box-shadow: 0 0 14px rgba(92, 202, 255, 0.62);
            }

             .control-trio .storm-btn.combo-hot::after {
                background: linear-gradient(90deg, #67c9ff, #fff0a0);
                box-shadow: 0 0 16px rgba(255, 231, 124, 0.72);
                animation: stormFillSweep 520ms linear infinite, stormComboHotPulse 520ms ease-in-out infinite;
            }

             .control-trio .storm-btn.charged::after {
                transform: scaleX(1);
                opacity: 1;
                background: linear-gradient(90deg, #7dd9ff, #fff49e);
                box-shadow: 0 0 18px rgba(255, 236, 130, 0.78), inset 0 0 6px rgba(255, 255, 255, 0.26);
                animation: none;
            }

             .control-trio .storm-btn.charge-gained {
                animation: stormChargeGain 520ms ease-out;
            }

             .control-trio .storm-btn.insurance-ready::after {
                box-shadow: 0 0 22px rgba(255, 241, 166, 0.82);
            }

             .control-trio .storm-btn.ready {
                border-color: #25303d;
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
             }

             .control-trio .storm-btn.ready.charged {
                border-color: #2d3b4d;
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(130, 172, 220, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
             }

             .control-trio .storm-btn.armed {
                border-color: #4a5665;
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(164, 196, 228, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
                animation: stormBtnPulse 760ms ease-in-out infinite;
             }

             .control-trio .storm-btn.charged.armed {
                border-color: #4e5f75;
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(166, 202, 236, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
                animation: stormChargedCorePulse 380ms ease-in-out infinite;
             }

             .control-trio .storm-btn.empty {
                opacity: 1;
                filter: grayscale(0.18) brightness(0.92);
            }

             .control-trio .storm-btn.storm-idle {
                background: linear-gradient(180deg, #454c56, #2a313a) !important;
                animation: none !important;
             }

             .control-trio .storm-btn:disabled {
                cursor: default;
             }

        /* Manual style switch:
           index.html <body data-storm-style="battery"> (current) or "sprite" (legacy). */
             body[data-storm-style="sprite"] .control-trio .storm-btn {
                width: 54px;
                min-width: 54px;
                height: 54px;
                border: 0;
                border-radius: 0;
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/meter_back.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center center;
                box-shadow: none;
                filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.34));
             }

             body[data-storm-style="sprite"] .control-trio .storm-btn::before {
                left: 5px;
                right: 5px;
                top: auto;
                bottom: 3px;
                height: 6px;
                border-radius: 2px;
                border: 1px solid rgba(180, 230, 255, 0.22);
                background: rgba(8, 14, 20, 0.72);
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
             }

             body[data-storm-style="sprite"] .control-trio .storm-btn::after {
                left: 6px;
                right: 6px;
                top: auto;
                bottom: 4px;
                height: 4px;
                border-radius: 2px;
                background: linear-gradient(90deg, #2ca7ff 0%, #48c8ff 48%, #ffe76f 100%);
                box-shadow: 0 0 8px rgba(94, 216, 255, 0.4);
             }

             body[data-storm-style="sprite"] .control-trio .storm-btn .storm-bolt {
                top: 50%;
                font-size: 13px;
             }

             body[data-storm-style="sprite"] .control-trio .storm-btn .storm-batt-cap {
                display: none;
             }

             body[data-storm-style="sprite"] .control-trio .storm-btn.combo-tracking,
             body[data-storm-style="sprite"] .control-trio .storm-btn.combo-near,
             body[data-storm-style="sprite"] .control-trio .storm-btn.combo-hot,
             body[data-storm-style="sprite"] .control-trio .storm-btn.charged,
             body[data-storm-style="sprite"] .control-trio .storm-btn.storm-idle {
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/meter_filling.png') !important;
                background-size: 200% 200% !important;
                background-position: 0% 0% !important;
                animation: howtoStormMeterFramesCharged 640ms steps(4, end) infinite;
             }

             body[data-storm-style="sprite"] .control-trio .storm-btn.empty {
                background-image: url('https://raw.githubusercontent.com/mpeeples2008/sound_image_assets/main/meter_back.png') !important;
                background-size: 100% 100% !important;
                background-position: center center !important;
                animation: none !important;
             }

        /* Slightly smaller on narrow screens */
        @media (max-width:420px) {
            .control-trio .ctrl {
                width: 40px;
                height: 36px;
                font-size: 10px;
            }

             .control-trio .storm-btn {
                width: 46px;
                min-width: 46px;
                height: 32px;
             }

             body[data-storm-style="sprite"] .control-trio .storm-btn {
                width: 50px;
                min-width: 50px;
                height: 50px;
             }
        }

        @keyframes stormFillSweep {
            0% {
                filter: brightness(0.96);
            }
            100% {
                filter: brightness(1.08);
            }
        }

        @keyframes stormJamSweep {
            0% {
                filter: brightness(0.9);
            }
            50% {
                filter: brightness(1.08);
            }
            100% {
                filter: brightness(0.9);
            }
        }

        @keyframes stormMeterSpriteFramesSingle {
            0%, 24.999% { background-position: 0% 0%; }
            25%, 49.999% { background-position: 100% 0%; }
            50%, 74.999% { background-position: 0% 100%; }
            75%, 100% { background-position: 100% 100%; }
        }

        @keyframes stormMeterSpriteFramesCharged {
            0%, 24.999% { background-position: center center, 0% 0%; }
            25%, 49.999% { background-position: center center, 100% 0%; }
            50%, 74.999% { background-position: center center, 0% 100%; }
            75%, 100% { background-position: center center, 100% 100%; }
        }

        @keyframes stormChargedCorePulse {
            0%, 100% {
                background-size: 100% 100%, 200% 200%;
                filter: drop-shadow(0 6px 8px rgba(78, 182, 255, 0.42)) drop-shadow(0 0 8px rgba(101, 210, 255, 0.34));
            }
            50% {
                background-size: 126% 126%, 200% 200%;
                filter: drop-shadow(0 7px 10px rgba(88, 198, 255, 0.52)) drop-shadow(0 0 12px rgba(122, 223, 255, 0.48));
            }
        }

        @keyframes stormComboHotPulse {
            0% {
                filter: brightness(1);
            }
            50% {
                filter: brightness(1.16);
            }
            100% {
                filter: brightness(1);
            }
        }

        @keyframes stormBtnPulse {
            0% {
                transform: translateY(0) scale(1);
                box-shadow: inset 0 0 0 1px rgba(255, 217, 140, 0.18), 0 0 0 3px rgba(143, 109, 44, 0.34), 4px 4px 0 rgba(0, 0, 0, 0.2);
            }
            50% {
                transform: translateY(-1px) scale(1.02);
                box-shadow: inset 0 0 0 1px rgba(255, 224, 164, 0.22), 0 0 0 4px rgba(171, 129, 52, 0.5), 4px 4px 0 rgba(0, 0, 0, 0.22);
            }
            100% {
                transform: translateY(0) scale(1);
                box-shadow: inset 0 0 0 1px rgba(255, 217, 140, 0.18), 0 0 0 3px rgba(143, 109, 44, 0.34), 4px 4px 0 rgba(0, 0, 0, 0.2);
            }
        }

        @keyframes stormChargeGain {
            0% {
                box-shadow: 0 0 0 0 rgba(148, 238, 255, 0.0), 4px 4px 0 rgba(0, 0, 0, 0.12);
                transform: scale(1);
            }
            40% {
                box-shadow: 0 0 0 4px rgba(148, 238, 255, 0.35), 4px 4px 0 rgba(0, 0, 0, 0.14);
                transform: scale(1.03);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(148, 238, 255, 0.0), 4px 4px 0 rgba(0, 0, 0, 0.12);
                transform: scale(1);
            }
        }

        @keyframes stormArmedHalo {
            0%, 100% {
                outline: 2px solid rgba(134, 221, 255, 0.85);
                outline-offset: 1px;
            }
            50% {
                outline: 2px solid rgba(255, 233, 144, 0.95);
                outline-offset: 3px;
            }
        }

        body.storm-armed-mode .board,
        body.storm-armed-mode #board {
            box-shadow: inset 0 0 0 2px rgba(118, 210, 255, 0.56), 0 0 16px rgba(118, 210, 255, 0.35);
            transition: box-shadow 120ms linear;
        }

        body.storm-armed-mode #board .cell {
            cursor: crosshair;
        }


/* Consolidated HUD small panel styles (base) */
        .hud .small {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255,255,255,0.02));
            padding: 10px 12px;
            border-radius: 8px;
            border: 4px solid rgba(0, 0, 0, 0.25);
            box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
            min-width: 85px;
            color: #ffd166;
            font-family: 'Press Start 2P', monospace;
            font-size: 11px;
            text-shadow: 2px 2px 0 rgba(0,0,0,0.55);
            box-sizing: border-box;
        }

        /* Scorebox variant uses left-justified stacking */
        .small.scorebox {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            text-align: left !important;
            line-height: 1.2;
            width: 100%;
        }

            /* Score lines inside scorebox */
            .small.scorebox .score-line,
            .small.scorebox .high-line {
                width: 100%;
                text-align: left !important;
            }

            .small.scorebox .score-line {
                font-size: 9px;
                color: #ffd166;
            }

            .small.scorebox .high-line {
                font-size: 8px;
                opacity: 0.85;
                color: #ffe9b0;
                margin-top: 2px;
                text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
            }

        /* HUD button baseline */
        .hud button {
            font-family: 'Press Start 2P', monospace;
            background: linear-gradient(180deg, #ffffff, #e6e3ff);
            color: #0b3d91;
            border: 4px solid rgba(0,0,0,0.18);
            padding: 10px;
            border-radius: 8px;
            box-shadow: 4px 4px 0 rgba(0,0,0,0.12);
            cursor: pointer;
            font-size: 11px;
            box-sizing: border-box;
        }

        /* Lock HUD row stacking so controls never share the same row as the nano-bot meter. */
        .hud > .hud-row {
            order: 1;
            flex: 0 0 100%;
            width: 100%;
        }

        .hud > #clicksMeter {
            order: 2;
            flex: 0 0 100%;
            width: 100%;
        }

        .hud > #perkHud {
            order: 3;
            flex: 0 0 100%;
            width: 100%;
        }

        .hud > .control-trio {
            order: 4;
            flex: 0 0 100%;
            width: 100%;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap;
        }

        /* Tablet layout: keep top stats row full-width, but place meter + controls together. */
        @media (min-width: 600px) and (max-width: 899px) {
            body:not(.assistant-disabled) .hud,
            html:not(.assistant-disabled) body .hud {
                /* Reserve space for the fixed assistant badge on the right side. */
                padding-right: clamp(60px, 11vw, 92px);
            }

            .hud {
                justify-content: flex-start;
                gap: 10px;
            }

            .hud > .hud-row {
                flex: 0 0 100%;
                width: 100%;
            }

            .hud > #clicksMeter {
                flex: 0 0 auto;
                width: auto;
                margin-right: 0;
            }

            .hud > #perkHud {
                flex: 0 0 auto;
                width: auto;
                margin-left: 0;
                margin-right: auto;
            }

            .hud > .control-trio {
                flex: 0 0 auto;
                width: auto;
                margin-left: 0;
                margin-right: auto;
                justify-content: flex-start;
                gap: 8px;
            }

            .hud > .control-trio .ctrl {
                width: 48px;
                height: 40px;
                padding: 6px;
                font-size: 12px;
            }

            .hud > .control-trio .storm-btn {
                width: 52px;
                min-width: 52px;
                height: 34px;
            }

            body[data-storm-style="sprite"] .hud > .control-trio .storm-btn {
                width: 54px;
                min-width: 54px;
                height: 54px;
            }

            .perk-strip-label {
                font-size: 6px;
            }
        }

        /* Ensure board and wrap sizing predictable and prevent overflow from transient particles */
        .wrap {
            box-sizing: border-box;
            max-width: 100%;
            margin: 0 auto;
        }

        .board {
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }

        /* Keep .cell overflow hidden within cell (prevents per-cell overflow) */
        .cell {
            overflow: hidden;
        }

        /* Small screens tweak preserved */
        @media (max-width:420px) {
            .board {
                width: 94vw;
            }
        }


/* Animations / Confetti / Particles */

@keyframes breathe {
            0% {
                transform: scale(0.985);
            }

            50% {
                transform: scale(1.02);
            }

            100% {
                transform: scale(0.985);
            }
        }

        .virus--size-0 .face-sprite {
            animation: breathe var(--breathe-duration, 5.5s) ease-in-out infinite alternate;
            transform-origin: center;
            will-change: transform;
        }

        .virus--size-1 .face-sprite {
            animation: breathe var(--breathe-duration, 4.0s) ease-in-out infinite alternate;
            transform-origin: center;
            will-change: transform;
        }

        .virus--size-2 .face-sprite {
            animation: breathe var(--breathe-duration, 3.2s) ease-in-out infinite alternate;
            transform-origin: center;
            will-change: transform;
        }


/* Misc */

.small-ctrl {
            width: 100px;
            height: 40px;
            font-family: 'Press Start 2P', monospace;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            border: 4px solid rgba(0, 0, 0, 0.18);
            background: linear-gradient(180deg, #fff, #e6e3ff);
            color: #0b3d91;
            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
        }

        @media (max-width:420px) {
            .small-ctrl {
                width: 40px;
                height: 36px;
                font-size: 10px;
            }
        }


.level-complete .lc-hint {
            margin-top: 8px;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.85);
            font-family: 'Press Start 2P', monospace;
            opacity: 0.9;
            text-align: center;
            pointer-events: none;
        }

/* Board-locked level popup: same size and position as the game board */
.level-complete.level-complete--board {
            position: fixed !important;
            transform: none !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            display: grid !important;
            grid-template-rows: auto 1fr auto;
            gap: 10px;
            padding: 12px !important;
            overflow: hidden !important;
        }

.level-complete.level-complete--board .lc-title {
            margin: 0;
            font-size: clamp(12px, 2.1vmin, 22px);
            line-height: 1.1;
            text-align: center;
            white-space: normal;
        }

.level-complete.level-complete--board .lc-image {
            min-height: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.level-complete.level-complete--board .lc-image img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

.level-complete.level-complete--board .lc-hint {
            margin: 0;
            font-size: clamp(8px, 1.15vmin, 11px);
            line-height: 1.2;
            text-align: center;
        }

@keyframes levelInBoard {
            0% {
                opacity: 0;
                transform: scale(0.96);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

@keyframes levelOutBoard {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.97);
            }
        }

.level-complete.level-complete--board.show {
            animation: levelInBoard 260ms ease both !important;
            pointer-events: auto !important;
        }

.level-complete.level-complete--board.hide {
            animation: levelOutBoard 220ms ease both !important;
            pointer-events: none !important;
        }

/* -------- Level 20 Victory Sequence -------- */
.final-victory-overlay {
            position: fixed;
            inset: 0;
            z-index: 96500;
            pointer-events: auto;
            overflow: hidden;
            background: rgba(0, 0, 0, 0);
            transition: background 6.6s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.final-victory-overlay.fading {
            background: rgba(0, 0, 0, 0.94);
        }

.final-victory-explosion {
            position: fixed;
            width: var(--fv-size, 96px);
            height: var(--fv-size, 96px);
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.35);
            border-radius: 50%;
            pointer-events: none;
            z-index: 96510;
            background:
                radial-gradient(circle at 30% 28%, rgba(255, 245, 210, 0.92), rgba(255, 189, 112, 0.88) 30%, rgba(255, 96, 60, 0.7) 56%, rgba(0, 0, 0, 0) 74%),
                repeating-radial-gradient(circle at 52% 52%, rgba(255, 218, 130, 0.14) 0 4px, rgba(255, 112, 72, 0.08) 4px 9px);
            box-shadow: 0 0 28px rgba(255, 132, 88, 0.55), 0 0 40px rgba(255, 92, 66, 0.38);
            animation: finalVictoryExplosion 760ms ease-out forwards;
            mix-blend-mode: screen;
        }

.final-victory-explosion.strong {
            animation-duration: 980ms;
            box-shadow: 0 0 34px rgba(255, 170, 112, 0.72), 0 0 54px rgba(255, 116, 86, 0.58);
        }

        .final-victory-modal {
            width: min(92vw, 760px);
            max-height: min(88vh, 860px);
            border-radius: 14px;
            border: 2px solid rgba(255, 215, 170, 0.8);
            background:
                linear-gradient(180deg, rgba(14, 20, 34, 0.96), rgba(8, 10, 16, 0.95)),
                radial-gradient(circle at 20% 0%, rgba(255, 178, 118, 0.2), transparent 54%);
            box-shadow: 0 0 34px rgba(255, 164, 114, 0.34), inset 0 0 0 1px rgba(255, 238, 210, 0.08);
            padding: 16px 16px 14px;
            display: grid;
            grid-template-rows: auto auto auto auto auto auto auto;
            gap: 10px;
            opacity: 0;
            transform: translateY(22px) scale(0.975);
            transition: opacity 380ms ease, transform 380ms ease;
            overflow-y: auto;
            overscroll-behavior: contain;
        }

.final-victory-overlay.show-win .final-victory-modal {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

.final-victory-modal .fv-title {
            font-family: 'Press Start 2P', monospace;
            color: #ffd9b0;
            font-size: clamp(13px, 2.05vw, 20px);
            letter-spacing: 0.06em;
            text-align: center;
            text-shadow: 0 0 10px rgba(255, 198, 132, 0.46), 1px 1px 0 rgba(0, 0, 0, 0.7);
            margin-top: 2px;
        }

        .final-victory-modal .fv-image-wrap {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 214, 176, 0.28);
            min-height: clamp(176px, 38vh, 420px);
            max-height: 52vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.final-victory-modal .fv-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            image-rendering: pixelated;
        }

.final-victory-modal .fv-credits-wrap {
            border-radius: 9px;
            border: 1px solid rgba(173, 205, 255, 0.26);
            background: rgba(8, 14, 28, 0.7);
            overflow: hidden;
            height: clamp(84px, 14vh, 132px);
            position: relative;
            padding: 0;
            width: min(90%, 700px);
            margin: 0 auto;
        }

.final-victory-modal .fv-info-panel {
            height: 100%;
            overflow: auto;
            text-align: center;
            font-family: 'Press Start 2P', monospace;
            color: #cbe2ff;
            font-size: clamp(7px, 0.95vw, 10px);
            line-height: 1.5;
            letter-spacing: 0.04em;
            padding: 6px 7px 5px;
            scrollbar-width: thin;
        }

.final-victory-modal .fv-info-panel[hidden] {
            display: none !important;
        }

.final-victory-modal .fv-info-panel .fv-roll-section {
            margin-bottom: 0;
            padding: 0 6px;
        }

.final-victory-modal .fv-roll-section {
            margin-bottom: 16px;
            padding: 0 8px;
        }

.final-victory-modal .fv-roll-title {
            color: #ffe4bf;
            font-size: clamp(7px, 0.95vw, 9px);
            margin-bottom: 3px;
        }

.final-victory-modal .fv-roll-line {
            color: #d4e8ff;
            font-size: clamp(7px, 0.9vw, 9px);
            line-height: 1.5;
        }

.final-victory-modal .fv-roll-story-line {
            color: #ffd8b2;
            line-height: 1.8;
        }

.final-victory-modal .fv-roll-summary .fv-summary {
            opacity: 1;
            max-height: none;
            transform: none;
            overflow: visible;
        }

.final-victory-modal .fv-summary {
            border-radius: 10px;
            border: 1px solid rgba(255, 214, 172, 0.24);
            background: rgba(6, 10, 18, 0.78);
            padding: 10px;
            opacity: 1;
            max-height: none;
            overflow: visible;
            transform: none;
            transition: none;
        }

.final-victory-modal .fv-summary-title {
            font-family: 'Lucida Console', monospace;
            color: #ffdcb5;
            font-size: clamp(12px, 1.3vw, 14px);
            margin-bottom: 6px;
            text-align: center;
        }

.final-victory-modal .fv-summary-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 6px 10px;
            font-family: 'Lucida Console', monospace;
            font-size: clamp(12px, 1.2vw, 14px);
            color: #d7e8ff;
        }

.final-victory-modal .fv-summary-grid span {
            opacity: 0.88;
        }

.final-victory-modal .fv-summary-grid b {
            color: #ffe6c0;
            font-weight: 700;
            text-align: right;
        }

.final-victory-modal .fv-final-card {
            text-align: center;
            font-family: 'Press Start 2P', monospace;
            color: #ffe6bf;
            font-size: clamp(11px, 1.75vw, 16px);
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 360ms ease, transform 360ms ease;
        }

.final-victory-modal .fv-ending-note {
            text-align: center;
            font-family: 'Lucida Console', monospace;
            color: #ffe07d;
            font-size: clamp(10px, 1.05vw, 13px);
            letter-spacing: 0.08em;
            text-shadow: 0 0 10px rgba(255, 214, 102, 0.24);
        }

.final-victory-overlay.show-final-card .fv-final-card {
            opacity: 1;
            transform: translateY(0);
        }

.final-victory-modal .fv-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            padding-top: 2px;
        }

.final-victory-modal .fv-restart-btn {
            font-family: 'Press Start 2P', monospace;
            font-size: 11px;
            padding: 11px 14px;
            border-radius: 8px;
            border: 2px solid rgba(255, 216, 172, 0.78);
            background: linear-gradient(180deg, #ffe7c8, #ffd49e);
            color: #3e2208;
            box-shadow: 0 2px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 246, 232, 0.44);
            cursor: pointer;
        }

.final-victory-modal .fv-tab-btn {
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            border: 2px solid rgba(162, 200, 255, 0.58);
            background: linear-gradient(180deg, #1f2f4e, #13213c);
            color: #d8e9ff;
            box-shadow: 0 2px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(215, 234, 255, 0.18);
            cursor: pointer;
        }

.final-victory-modal .fv-tab-btn:hover {
            filter: brightness(1.06);
        }

.final-victory-modal .fv-tab-btn.active {
            border-color: rgba(255, 216, 172, 0.72);
            background: linear-gradient(180deg, #3a5276, #243d5f);
            color: #ffe8c8;
        }

.final-victory-overlay .fv-typed-stage {
            width: min(84vw, 760px);
            max-height: min(72vh, 520px);
            margin: 0 auto;
            padding: 16px 18px 14px;
            border-radius: 12px;
            border: 2px solid rgba(255, 209, 149, 0.58);
            background: rgba(7, 12, 22, 0.9);
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 228, 178, 0.2);
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: stretch;
        }

.final-victory-overlay .fv-typed-title {
            font-family: 'Press Start 2P', monospace;
            font-size: clamp(12px, 1.6vw, 16px);
            color: #ffe3be;
            text-align: center;
        }

.final-victory-overlay .fv-typed-subtitle {
            font-family: 'Lucida Console', monospace;
            font-size: clamp(10px, 1.05vw, 13px);
            color: #ffe07d;
            text-align: center;
            letter-spacing: 0.08em;
            text-shadow: 0 0 10px rgba(255, 214, 102, 0.28);
        }

.final-victory-overlay .fv-typed-body {
            font-family: 'Lucida Console', monospace;
            font-size: clamp(13px, 1.6vw, 17px);
            line-height: 1.6;
            text-align: left;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: min(46vh, 330px);
            overflow: auto;
            scrollbar-width: thin;
            padding: 2px 2px 2px 0;
        }

.final-victory-overlay .fv-typed-hint {
            font-family: 'Lucida Console', monospace;
            font-size: clamp(12px, 1.4vw, 14px);
            color: #d7e8ff;
            text-align: center;
            opacity: 0;
            transition: opacity 160ms ease;
        }

.final-victory-overlay .fv-typed-hint.show {
            opacity: 1;
        }

.final-victory-modal .fv-restart-btn:hover {
            filter: brightness(1.04);
        }

.final-victory-modal .fv-restart-btn:active {
            transform: translateY(1px);
        }

@keyframes finalVictoryExplosion {
            0% {
                opacity: 0.95;
                transform: translate(-50%, -50%) scale(0.24);
            }
            60% {
                opacity: 0.78;
                transform: translate(-50%, -50%) scale(1.08);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.42);
            }
        }

@keyframes finalVictoryCreditsRoll {
            0% {
                transform: translateY(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-312%);
                opacity: 0.2;
            }
        }

        @keyframes boss20ClickHintPulse {
            0%, 100% { opacity: 0.58; }
            50% { opacity: 0.96; }
        }

        .boss20-hp-gain-fx {
            position: fixed;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 95290;
            font-family: 'Press Start 2P', monospace;
            font-size: 11px;
            letter-spacing: 0.04em;
            color: #a7ffd2;
            text-shadow: 0 0 10px rgba(97, 255, 186, 0.72), 1px 1px 0 rgba(0, 0, 0, 0.8);
            animation: boss20HpGainPop 760ms ease-out forwards;
        }

        @keyframes boss20HpGainPop {
            0% { opacity: 0; transform: translate(-50%, -42%) scale(0.88); }
            14% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
            70% { opacity: 1; transform: translate(-50%, -66%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -84%) scale(0.98); }
        }

@media (max-width: 700px) {
            .final-victory-modal {
                width: min(94vw, 620px);
                padding: 12px 12px 10px;
                gap: 8px;
                max-height: min(92vh, 760px);
            }
            .final-victory-modal .fv-image-wrap {
                min-height: clamp(144px, 31vh, 260px);
                max-height: 42vh;
            }
            .final-victory-modal .fv-credits-wrap {
                height: clamp(84px, 16vh, 136px);
                width: min(94%, 700px);
            }
            .final-victory-modal .fv-restart-btn {
                font-size: 10px;
                padding: 10px 12px;
            }
            .final-victory-modal .fv-tab-btn {
                font-size: 9px;
                padding: 9px 10px;
            }
            .final-victory-modal .fv-summary {
                padding: 8px;
            }
        }
















        .virus-smash-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147483644;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: radial-gradient(circle at center, rgba(124, 18, 24, 0.28), rgba(6, 8, 18, 0.88) 62%);
            backdrop-filter: blur(3px);
            opacity: 0;
            transform: scale(0.985);
            pointer-events: auto;
        }

        .virus-smash-overlay.show {
            animation: virusSmashFadeIn 180ms ease-out forwards;
        }

        .virus-smash-overlay.hide {
            animation: virusSmashFadeOut 180ms ease-in forwards;
        }

        .virus-smash-panel {
            width: min(92vw, 620px);
            min-height: min(72vh, 560px);
            border-radius: 16px;
            border: 3px solid rgba(255, 190, 110, 0.86);
            background:
                linear-gradient(180deg, rgba(28, 42, 76, 0.95), rgba(11, 18, 36, 0.96)),
                repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0 2px, rgba(0,0,0,0.04) 2px 4px);
            box-shadow: 0 22px 60px rgba(0, 0, 0, 0.56), inset 0 0 24px rgba(255, 212, 116, 0.12);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            padding: 24px 24px 22px;
            text-align: center;
        }

        .virus-smash-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .virus-smash-kicker,
        .virus-smash-title,
        .virus-smash-meter__label,
        .virus-smash-btn,
        .virus-smash-results-grid b {
            font-family: 'Press Start 2P', monospace;
        }

        .virus-smash-kicker {
            font-size: clamp(9px, 1.2vw, 11px);
            color: #ffd36d;
            letter-spacing: 0.18em;
            text-shadow: 1px 1px 0 rgba(0,0,0,0.72);
        }

        .virus-smash-title {
            font-size: clamp(20px, 3.2vw, 32px);
            color: #fff1c0;
            letter-spacing: 0.08em;
            text-shadow: 0 0 10px rgba(255, 190, 102, 0.42), 2px 2px 0 rgba(0,0,0,0.72);
        }

        .virus-smash-title--small {
            font-size: clamp(14px, 2.2vw, 20px);
        }

        .virus-smash-body,
        .virus-smash-stage-copy,
        .virus-smash-results-grid span {
            font-family: 'Lucida Console', 'Courier New', monospace;
        }

        .virus-smash-body,
        .virus-smash-stage-copy {
            max-width: 44ch;
            font-size: clamp(14px, 1.5vw, 16px);
            line-height: 1.45;
            color: #dce8ff;
        }

        .virus-smash-preview {
            width: min(54vw, 220px);
            aspect-ratio: 1 / 1;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: radial-gradient(circle at center, rgba(255, 130, 130, 0.18), rgba(0, 0, 0, 0.06) 66%, rgba(0,0,0,0) 72%);
        }

        .virus-smash-sprite {
            width: 100%;
            height: 100%;
            background-image: var(--virus-smash-sprite);
            background-repeat: no-repeat;
            background-size: 100% 200%;
            background-position: center top;
            image-rendering: pixelated;
            animation: virusSmashSpriteFrames 0.48s steps(1, end) infinite;
        }

        .virus-smash-sprite--preview {
            filter: drop-shadow(0 0 14px rgba(255, 116, 136, 0.28));
        }

        .virus-smash-preview img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            image-rendering: pixelated;
            filter: drop-shadow(0 0 14px rgba(255, 116, 136, 0.28));
        }

        .virus-smash-btn {
            border: 3px solid rgba(255, 218, 146, 0.82);
            border-radius: 12px;
            background: linear-gradient(180deg, #2c467d, #18274a);
            color: #fff0c4;
            box-shadow: 0 8px 0 rgba(8, 12, 24, 0.62);
            padding: 14px 18px;
            min-width: 180px;
            cursor: pointer;
            font-size: 11px;
            letter-spacing: 0.08em;
            transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
        }

        .virus-smash-btn--ghost {
            background: linear-gradient(180deg, #304458, #1a2534);
        }

        .virus-smash-btn:hover {
            transform: translateY(-2px) scale(1.02);
            filter: brightness(1.08);
            box-shadow: 0 11px 0 rgba(8, 12, 24, 0.62), 0 0 16px rgba(255, 206, 120, 0.18);
        }

        .virus-smash-btn:active {
            transform: translateY(2px);
            box-shadow: 0 4px 0 rgba(8, 12, 24, 0.62);
        }

        .virus-smash-panel--stage {
            justify-content: space-between;
        }

        .virus-smash-hud {
            width: 100%;
            display: grid;
            gap: 12px;
        }

        .virus-smash-meter {
            width: 100%;
        }

        .virus-smash-meter__label {
            margin-bottom: 8px;
            font-size: 8px;
            color: #ffe1aa;
            letter-spacing: 0.06em;
        }

        .virus-smash-meter__track {
            width: 100%;
            height: 16px;
            border-radius: 999px;
            overflow: hidden;
            border: 2px solid rgba(255, 214, 140, 0.52);
            background: rgba(7, 10, 20, 0.9);
            box-shadow: inset 0 0 8px rgba(255, 228, 168, 0.08);
        }

        .virus-smash-meter__fill,
        .virus-smash-timer__fill {
            display: block;
            width: 100%;
            height: 100%;
            transform-origin: left center;
        }

        .virus-smash-meter__fill {
            background: linear-gradient(90deg, #ff6767, #ffc15b);
            box-shadow: 0 0 10px rgba(255, 136, 96, 0.36);
        }

        .virus-smash-timer__fill {
            background: linear-gradient(90deg, #64d6ff, #ffe58b);
            box-shadow: 0 0 10px rgba(116, 218, 255, 0.34);
        }

        .virus-smash-target {
            position: relative;
            width: min(62vw, 320px);
            aspect-ratio: 1 / 1;
            border: none;
            background: transparent;
            padding: 0;
            cursor: pointer;
            display: grid;
            place-items: center;
            transition: transform 80ms ease;
        }

        .virus-smash-target__img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            image-rendering: pixelated;
            transform: scale(1.95);
            filter: drop-shadow(0 0 18px rgba(255, 82, 118, 0.32));
        }

        .virus-smash-target__glow {
            position: absolute;
            inset: 16%;
            border-radius: 50%;
            background: radial-gradient(circle at center, rgba(255, 166, 112, 0.22), rgba(255, 60, 84, 0.08) 52%, rgba(255,255,255,0) 70%);
            pointer-events: none;
            animation: virusSmashGlowPulse 900ms ease-in-out infinite;
        }

        .virus-smash-target.hit {
            transform: scale(0.96) rotate(-2deg);
        }

        .virus-smash-target.hit .virus-smash-target__img {
            filter: drop-shadow(0 0 20px rgba(255, 184, 102, 0.5)) saturate(1.06);
        }

        .virus-smash-target.destroyed .virus-smash-target__img {
            filter: drop-shadow(0 0 24px rgba(255, 216, 148, 0.56)) brightness(1.18);
        }

        .virus-smash-results-grid {
            display: grid;
            grid-template-columns: auto auto;
            gap: 12px 18px;
            align-items: center;
            justify-items: start;
            text-align: left;
            background: rgba(8, 14, 28, 0.5);
            border: 2px solid rgba(255, 212, 138, 0.28);
            border-radius: 12px;
            padding: 16px 18px;
            min-width: min(88vw, 360px);
        }

        .virus-smash-results-grid span {
            font-size: 14px;
            color: #dbe6ff;
        }

        .virus-smash-results-grid b {
            justify-self: end;
            font-size: 10px;
            color: #ffe2a0;
        }

        @keyframes virusSmashFadeIn {
            from { opacity: 0; transform: scale(0.985); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes virusSmashFadeOut {
            from { opacity: 1; transform: scale(1); }
            to { opacity: 0; transform: scale(0.985); }
        }

        @keyframes virusSmashGlowPulse {
            0%, 100% { opacity: 0.62; transform: scale(0.96); }
            50% { opacity: 0.95; transform: scale(1.04); }
        }

        @keyframes virusSmashSpriteFrames {
            0%, 49.999% { background-position: center top; }
            50%, 100% { background-position: center bottom; }
        }

        @media (max-width: 700px) {
            .virus-smash-panel {
                min-height: min(78vh, 560px);
                padding: 18px 16px 18px;
                gap: 14px;
            }

            .virus-smash-btn {
                min-width: 160px;
                font-size: 10px;
            }

            .virus-smash-target {
                width: min(72vw, 290px);
            }

            .virus-smash-target__img {
                transform: scale(1.78);
            }
        }

        .interception-grid-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147483644;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: radial-gradient(circle at center, rgba(20, 34, 82, 0.28), rgba(6, 8, 18, 0.9) 66%);
            backdrop-filter: blur(3px);
            opacity: 0;
            transform: scale(0.985);
            pointer-events: auto;
        }

        .interception-grid-overlay.show {
            animation: virusSmashFadeIn 180ms ease-out forwards;
        }

        .interception-grid-overlay.hide {
            animation: virusSmashFadeOut 180ms ease-in forwards;
        }

        .interception-grid-panel {
            width: min(94vw, 760px);
            min-height: min(78vh, 620px);
            border-radius: 16px;
            border: 3px solid rgba(133, 211, 255, 0.82);
            background:
                linear-gradient(180deg, rgba(18, 28, 62, 0.96), rgba(9, 15, 32, 0.97)),
                repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 2px, rgba(0,0,0,0.04) 2px 4px);
            box-shadow: 0 24px 62px rgba(0, 0, 0, 0.58), inset 0 0 24px rgba(118, 208, 255, 0.12);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            padding: 24px 24px 22px;
            text-align: center;
        }

        .interception-grid-kicker,
        .interception-grid-title,
        .interception-grid-meter__label,
        .interception-grid-btn,
        .interception-grid-results-grid b,
        .interception-grid-scoreline {
            font-family: 'Press Start 2P', monospace;
        }

        .interception-grid-kicker {
            font-size: clamp(9px, 1.2vw, 11px);
            color: #91e0ff;
            letter-spacing: 0.18em;
            text-shadow: 1px 1px 0 rgba(0,0,0,0.72);
        }

        .interception-grid-title {
            font-size: clamp(20px, 3.2vw, 32px);
            color: #d9f5ff;
            letter-spacing: 0.08em;
            text-shadow: 0 0 10px rgba(126, 214, 255, 0.42), 2px 2px 0 rgba(0,0,0,0.72);
        }

        .interception-grid-title--small {
            font-size: clamp(14px, 2.2vw, 20px);
        }

        .interception-grid-body,
        .interception-grid-stage-copy,
        .interception-grid-results-grid span {
            font-family: 'Lucida Console', 'Courier New', monospace;
        }

        .interception-grid-body,
        .interception-grid-stage-copy {
            max-width: 50ch;
            font-size: clamp(14px, 1.5vw, 16px);
            line-height: 1.45;
            color: #dce8ff;
        }

        .interception-grid-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .interception-grid-btn {
            border: 3px solid rgba(172, 235, 255, 0.82);
            border-radius: 12px;
            background: linear-gradient(180deg, #295682, #18314d);
            color: #e4f7ff;
            box-shadow: 0 8px 0 rgba(8, 12, 24, 0.62);
            padding: 14px 18px;
            min-width: 180px;
            cursor: pointer;
            font-size: 11px;
            letter-spacing: 0.08em;
            transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
        }

        .interception-grid-btn--ghost {
            background: linear-gradient(180deg, #304458, #1a2534);
            border-color: rgba(202, 222, 235, 0.58);
            color: #e4eef5;
        }

        .interception-grid-btn:hover {
            transform: translateY(-2px) scale(1.02);
            filter: brightness(1.08);
            box-shadow: 0 11px 0 rgba(8, 12, 24, 0.62), 0 0 16px rgba(125, 219, 255, 0.18);
        }

        .interception-grid-btn:active {
            transform: translateY(2px);
            box-shadow: 0 4px 0 rgba(8, 12, 24, 0.62);
        }

        .interception-grid-panel--stage {
            justify-content: space-between;
        }

        .interception-grid-hud {
            width: 100%;
            display: grid;
            gap: 12px;
        }

        .interception-grid-meter {
            width: 100%;
        }

        .interception-grid-meter__label {
            margin-bottom: 8px;
            font-size: 8px;
            color: #c8f0ff;
            letter-spacing: 0.06em;
        }

        .interception-grid-meter__track {
            width: 100%;
            height: 16px;
            border-radius: 999px;
            overflow: hidden;
            border: 2px solid rgba(152, 226, 255, 0.52);
            background: rgba(7, 10, 20, 0.9);
            box-shadow: inset 0 0 8px rgba(166, 230, 255, 0.08);
        }

        .interception-grid-timer__fill {
            display: block;
            width: 100%;
            height: 100%;
            transform-origin: left center;
            background: linear-gradient(90deg, #67d5ff, #ffe58b);
            box-shadow: 0 0 10px rgba(116, 218, 255, 0.34);
        }

        .interception-grid-scoreline {
            font-size: 9px;
            color: #e4f7ff;
            letter-spacing: 0.04em;
        }

        .interception-grid-scoreline b {
            color: #ffe698;
        }

        .interception-grid-playfield {
            position: relative;
            width: 100%;
            flex: 1 1 auto;
            min-height: 320px;
            border-radius: 18px;
            border: 2px solid rgba(134, 214, 255, 0.34);
            background:
                linear-gradient(180deg, rgba(12, 24, 48, 0.84), rgba(6, 14, 30, 0.94)),
                repeating-linear-gradient(180deg, rgba(110, 186, 255, 0.08) 0 3px, rgba(0,0,0,0) 3px 106px);
            overflow: hidden;
            box-shadow: inset 0 0 18px rgba(126, 212, 255, 0.08);
        }

        .interception-grid-playfield.breach-flash {
            animation: interceptionGridBreachFlash 180ms ease-out;
        }

        .interception-grid-playfield::before,
        .interception-grid-playfield::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, rgba(0,0,0,0), rgba(126, 214, 255, 0.68), rgba(0,0,0,0));
            opacity: 0.54;
            pointer-events: none;
        }

        .interception-grid-playfield::before {
            top: 33.333%;
        }

        .interception-grid-playfield::after {
            top: 66.666%;
        }

        .interception-grid-playfield::selection {
            background: transparent;
        }

        .interception-grid-playfield .interception-grid-breach-edge {
            display: none;
        }

        .interception-grid-playfield::marker {
            content: none;
        }

        .interception-grid-playfield:after {
            box-shadow: 0 0 12px rgba(126, 214, 255, 0.24);
        }

        .interception-grid-playfield {
            background-image:
                linear-gradient(180deg, rgba(12, 24, 48, 0.84), rgba(6, 14, 30, 0.94)),
                repeating-linear-gradient(180deg, rgba(110, 186, 255, 0.08) 0 3px, rgba(0,0,0,0) 3px 106px),
                linear-gradient(90deg, rgba(0,0,0,0) 0 calc(100% - 18px), rgba(255, 100, 120, 0.18) calc(100% - 18px) 100%);
        }

        .interception-grid-enemy {
            position: absolute;
            left: 0;
            top: 0;
            width: 64px;
            height: 64px;
            border: none;
            background: transparent;
            padding: 0;
            cursor: pointer;
            will-change: transform;
        }

        .interception-grid-enemy__sprite {
            display: block;
            width: 100%;
            height: 100%;
            background-image: var(--interception-grid-sprite);
            background-repeat: no-repeat;
            background-size: 300% 400%;
            background-position: 0% 0%;
            image-rendering: pixelated;
            filter: drop-shadow(0 0 12px rgba(178, 98, 255, 0.2));
            animation: interceptionGridVirus1Frames 1s steps(1, end) infinite;
        }

        .interception-grid-enemy:hover .interception-grid-enemy__sprite {
            filter: drop-shadow(0 0 16px rgba(190, 210, 255, 0.34)) brightness(1.08);
        }

        .interception-grid-enemy.popped {
            animation: interceptionEnemyPop 180ms ease-out forwards;
            pointer-events: none;
        }

        .interception-grid-enemy.escaped {
            animation: interceptionEnemyEscape 180ms ease-in forwards;
            pointer-events: none;
        }

        .interception-grid-burst {
            position: absolute;
            transform: translate(-50%, -50%);
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            color: #ffe698;
            text-shadow: 0 0 8px rgba(255, 212, 120, 0.46), 1px 1px 0 rgba(0,0,0,0.72);
            pointer-events: none;
            animation: interceptionBurstRise 380ms ease-out forwards;
        }

        .interception-grid-results-grid {
            display: grid;
            grid-template-columns: auto auto;
            gap: 12px 18px;
            align-items: center;
            justify-items: start;
            text-align: left;
            background: rgba(8, 14, 28, 0.5);
            border: 2px solid rgba(145, 224, 255, 0.28);
            border-radius: 12px;
            padding: 16px 18px;
            min-width: min(88vw, 360px);
        }

        .interception-grid-results-grid span {
            font-size: 14px;
            color: #dbe6ff;
        }

        .interception-grid-results-grid b {
            justify-self: end;
            font-size: 10px;
            color: #c9f3ff;
        }

        @keyframes interceptionEnemyPop {
            from { opacity: 1; transform: scale(1); }
            to { opacity: 0; transform: scale(1.35); }
        }

        @keyframes interceptionEnemyEscape {
            from { opacity: 1; }
            to { opacity: 0; transform: translateX(24px) scale(0.82); }
        }

        @keyframes interceptionBurstRise {
            from { opacity: 0; transform: translate(-50%, -10%) scale(0.82); }
            20% { opacity: 1; }
            to { opacity: 0; transform: translate(-50%, -145%) scale(1.08); }
        }

        @keyframes interceptionGridBreachFlash {
            0% { box-shadow: inset 0 0 18px rgba(126, 212, 255, 0.08), 0 0 0 rgba(255, 98, 98, 0); }
            50% { box-shadow: inset 0 0 18px rgba(126, 212, 255, 0.08), 0 0 22px rgba(255, 110, 110, 0.36); }
            100% { box-shadow: inset 0 0 18px rgba(126, 212, 255, 0.08), 0 0 0 rgba(255, 98, 98, 0); }
        }

        @keyframes interceptionGridVirus1Frames {
            0%, 9.999% { background-position: 0% 0%; }
            10%, 19.999% { background-position: 50% 0%; }
            20%, 29.999% { background-position: 100% 0%; }
            30%, 39.999% { background-position: 0% 33.3333%; }
            40%, 49.999% { background-position: 50% 33.3333%; }
            50%, 59.999% { background-position: 100% 33.3333%; }
            60%, 69.999% { background-position: 0% 66.6667%; }
            70%, 79.999% { background-position: 50% 66.6667%; }
            80%, 89.999% { background-position: 100% 66.6667%; }
            90%, 100% { background-position: 0% 100%; }
        }

        @media (max-width: 700px) {
            .interception-grid-panel {
                min-height: min(80vh, 620px);
                padding: 18px 16px 18px;
                gap: 14px;
            }

            .interception-grid-btn {
                min-width: 160px;
                font-size: 10px;
            }

            .interception-grid-playfield {
                min-height: 280px;
            }

            .interception-grid-enemy {
                width: 56px;
                height: 56px;
            }
        }