* {
            box-sizing: border-box;
        }


        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }


        body {
            position: relative;

            display: grid;

            grid-template-rows:
                auto
                minmax(0, 1fr)
                auto;

            gap: clamp(8px, 1.4vh, 14px);

            min-height: 100vh;
            height: 100dvh;

            padding:
                clamp(10px, 2vh, 20px)
                clamp(14px, 2vw, 28px)
                clamp(10px, 1.5vh, 18px);

            color: #d8fff9;

            font-family: "Rajdhani", sans-serif;
            font-size: 18px;
            font-weight: 600;

            background:
                radial-gradient(
                    circle at 50% 120%,
                    rgba(255, 41, 146, 0.32) 0%,
                    rgba(74, 20, 112, 0.16) 30%,
                    transparent 55%
                ),
                radial-gradient(
                    circle at 10% 10%,
                    rgba(0, 242, 255, 0.12),
                    transparent 32%
                ),
                linear-gradient(
                    145deg,
                    #090718 0%,
                    #101029 45%,
                    #071622 100%
                );
        }


        /*
         * Retro horizon/grid texture.
         * Decorative only, and remains inside viewport.
         */

        body::before {
            content: "";

            position: fixed;
            inset: 58% 0 0;

            pointer-events: none;

            opacity: 0.22;

            background-image:
                linear-gradient(
                    rgba(0, 238, 255, 0.42) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(255, 42, 146, 0.38) 1px,
                    transparent 1px
                );

            background-size:
                46px 28px,
                46px 28px;

            transform:
                perspective(300px)
                rotateX(58deg)
                scale(1.7);

            transform-origin: center top;
        }


        /*
         * Subtle CRT-style horizontal texture.
         */

        body::after {
            content: "";

            position: fixed;
            inset: 0;

            pointer-events: none;

            opacity: 0.035;

            background:
                repeating-linear-gradient(
                    to bottom,
                    transparent 0,
                    transparent 2px,
                    #00f6ff 3px
                );
        }


        h1 {
            position: relative;
            z-index: 2;

            margin: 0;

            text-align: center;

            font-family: "Monoton", "Audiowide", sans-serif;

            font-size:
                clamp(
                    24px,
                    3.4vw,
                    48px
                );

            font-weight: 400;
            line-height: 1.05;

            letter-spacing:
                clamp(
                    1px,
                    0.25vw,
                    4px
                );

            color: #ff3b9d;

            text-shadow:
                2px 2px 0 #79145b,
                -2px -1px 0 #00eaff,
                0 0 8px rgba(255, 49, 159, 0.8),
                0 0 18px rgba(255, 49, 159, 0.45),
                0 0 28px rgba(0, 234, 255, 0.28);
        }
        
        .game-version {
            display: inline-block;
        
            margin-left: 10px;
        
            font-family: "Yellowtail", cursive;
        
            font-size: 0.48em;
            font-weight: 400;
        
            letter-spacing: 1px;
        
            color: #ffe45c;
        
            transform:
                rotate(-6deg)
                translateY(-3px);
        
            text-shadow:
                1px 2px 0 #a96f00,
                0 0 5px rgba(255, 228, 92, 0.95),
                0 0 12px rgba(255, 199, 48, 0.7),
                0 0 20px rgba(255, 179, 0, 0.35);
        }


        /*
         * MAIN GAME AREA
         */

        .kitty-game-layout {
            position: relative;
            z-index: 2;

            display: flex;

            flex-direction: row;
            align-items: stretch;
            justify-content: center;

            gap: clamp(14px, 2vw, 26px);

            width: 100%;
            height: 100%;
            max-height: 500px;

            min-width: 0;
            min-height: 0;

            margin: auto;
        }


        /*
         * JS injects the canvas into here.
         */

        #game-container {
            position: relative;

            flex: 0 1 auto;

            display: flex;
            align-items: center;
            justify-content: center;

            min-width: 0;
            min-height: 0;

            margin: 0;
            padding: 0;

            background: transparent;
        }


        canvas {
            display: block;
        
            width: auto;
            height: auto;
        
            max-width:
                calc(
                    100vw - 520px
                );
        
            max-height: 100%;

            margin: 0;
            padding: 0;
            
            image-rendering: pixelated;

            background:
                radial-gradient(
                    circle at 50% 40%,
                    #263f4c,
                    #172630 75%
                );

            border: 3px solid #00e9ff;
            border-radius: 8px;

            outline:
                2px solid
                rgba(255, 45, 151, 0.85);

            outline-offset: 4px;

            box-shadow:
                0 0 8px rgba(0, 234, 255, 0.7),
                0 0 20px rgba(0, 234, 255, 0.25),
                0 0 32px rgba(255, 41, 146, 0.16),
                12px 16px 28px rgba(0, 0, 0, 0.48);
        }


/* =========================================================
   CANVAS + DECORATIVE MARQUEES
   ========================================================= */

.game-stage {
    flex: 0 1 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100%;

    min-width: 0;
    min-height: 0;

    /*
        JS sets this to the ACTUAL rendered canvas width.
    */
    --canvas-visible-width: 0px;
}


.game-stage #game-container {
    flex: 1 1 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   TRIANGLE MARQUEES
   ========================================================= */

.triangle-marquee {
    position: relative;

    flex: 0 0 24px;

    /*
        EXACTLY the visible canvas width.
    */

    width:
        var(--canvas-visible-width);

    max-width:
        var(--canvas-visible-width);

    height: 24px;

    overflow: hidden;

    pointer-events: none;
    user-select: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 40, 166, 0.08) 15%,
            rgba(183, 255, 49, 0.08) 50%,
            rgba(255, 229, 72, 0.08) 85%,
            transparent
        );
}


/*
    Fade the triangles into darkness
    at both edges.
*/

.triangle-marquee::before,
.triangle-marquee::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 2;

    width: 22px;

    pointer-events: none;
}


.triangle-marquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #090718,
            transparent
        );
}


.triangle-marquee::after {
    right: 0;

    background:
        linear-gradient(
            -90deg,
            #090718,
            transparent
        );
}


/* =========================================================
   MOVING TRIANGLE TRACK
   ========================================================= */

.triangle-marquee-track {
    position: absolute;

    top: 0;
    left: 0;

    display: flex;
    align-items: center;

    width: max-content;
    height: 100%;

    white-space: nowrap;

    will-change: transform;
}


/*
    THIS WAS MISSING FROM YOUR CURRENT CSS.
*/

.triangle-strip {
    flex: 0 0 auto;

    display: block;

    white-space: nowrap;

    margin: 0;
    padding: 0 2px 0 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 19px;
    font-weight: 900;

    line-height: 24px;

    letter-spacing: 1px;

    color: transparent;

    /*
        Repeating:
        PINK → GREEN → YELLOW
    */

    background:
        repeating-linear-gradient(
            90deg,

            #ff3b9d 0px,
            #ff3b9d 20px,

            #bfff39 20px,
            #bfff39 40px,

            #ffe45c 40px,
            #ffe45c 60px
        );

    background-clip: text;
    -webkit-background-clip: text;

    filter:
        drop-shadow(
            0 0 2px
            rgba(255, 255, 255, 0.8)
        )
        drop-shadow(
            0 0 5px
            rgba(255, 48, 170, 0.9)
        )
        drop-shadow(
            0 0 8px
            rgba(180, 255, 55, 0.5)
        );
}


/* =========================================================
   PLACEMENT
   ========================================================= */

.triangle-marquee-top {
    margin-bottom: 4px;
}


.triangle-marquee-bottom {
    margin-top: 4px;
}


/* =========================================================
   MOTION
   ========================================================= */

.triangle-marquee-top
.triangle-marquee-track {
    animation:
        triangles-run-left
        5.5s
        linear
        infinite;
}


.triangle-marquee-bottom
.triangle-marquee-track {
    animation:
        triangles-run-right
        5.5s
        linear
        infinite;
}


@keyframes triangles-run-left {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }

}


@keyframes triangles-run-right {

    from {
        transform:
            translateX(-50%);
    }

    to {
        transform:
            translateX(0);
    }

}
        /*
         * SCOREBOARD
         */

        .kitty-scoreboard {
            position: relative;

            flex: 0 0 210px;

            width: 210px;
            height: 100%;

            min-height: 0;

            margin: 0;
            padding:
                clamp(14px, 2vh, 20px);

            text-align: left;

            color: #d5ffff;

            background:
                linear-gradient(
                    155deg,
                    rgba(37, 18, 62, 0.98),
                    rgba(17, 18, 47, 0.98)
                );

            border:
                2px solid
                #ff3c9c;

            border-radius: 12px;

            box-shadow:
                5px 5px 0 #30104a,
                8px 8px 0 rgba(0, 234, 255, 0.45),
                0 0 18px rgba(255, 43, 151, 0.26);
        }


        /*
         * Cyan vertical accent.
         */

        .kitty-scoreboard::before {
            content: "";

            position: absolute;

            top: 15px;
            bottom: 15px;
            left: -7px;

            width: 3px;

            background: #00efff;

            box-shadow:
                0 0 7px #00efff,
                0 0 14px rgba(0, 239, 255, 0.7);
        }


        .kitty-scoreboard-title {
            margin: 0 0 3px;

            padding: 0;

            text-align: left;

            font-family: "Audiowide", sans-serif;

            font-size:
                clamp(
                    15px,
                    1.5vw,
                    20px
                );

            line-height: 1.15;

            letter-spacing: 1px;

            text-transform: uppercase;

            color: #ff55ab;

            text-shadow:
                1px 1px 0 #68134b,
                0 0 8px rgba(255, 67, 162, 0.7);
        }


        .kitty-scoreboard-count {
            margin: 0 0 15px;

            padding: 0 0 10px;

            text-align: left;

            font-family: "Audiowide", sans-serif;
            font-size: 15px;

            color: #00f0ff;

            border-bottom:
                1px solid
                rgba(0, 234, 255, 0.3);

            text-shadow:
                0 0 7px
                rgba(0, 238, 255, 0.7);
        }


        #caught-kitties-count {
            color: #ffe55c;

            font-size: 20px;

            text-shadow:
                0 0 7px
                rgba(255, 222, 74, 0.65);
        }


        /*
         * Caught kitty gallery
         */

        .caught-kitties-grid {
            display: grid;

            grid-template-columns:
                repeat(
                    4,
                    34px
                );

            justify-content: start;

            gap: 8px;

            margin: 0;
            padding: 0;

            background: transparent;
        }


        .caught-kitty {
            display: block;

            width: 34px;
            height: 34px;

            object-fit: contain;

            padding: 2px;

            background:
                linear-gradient(
                    145deg,
                    rgba(255, 52, 157, 0.18),
                    rgba(0, 234, 255, 0.08)
                );

            border:
                1px solid
                rgba(0, 238, 255, 0.55);

            border-radius: 4px;

            box-shadow:
                inset 0 0 7px
                rgba(0, 238, 255, 0.1);
        }


        /*
         * INSTRUCTIONS
         */

        .game-instructions {
            position: relative;
            z-index: 2;

            margin: 0;

            text-align: center;

            font-family: "Rajdhani", sans-serif;

            font-size:
                clamp(
                    13px,
                    1.5vw,
                    17px
                );

            font-weight: 700;

            line-height: 1.2;

            letter-spacing: 0.7px;

            color: #83f8ff;

            text-shadow:
                0 0 5px
                rgba(0, 234, 255, 0.45);
        }


        /*
         * Keep the whole arrangement usable on
         * somewhat narrower screens without creating
         * page scrolling.
         */

/* =========================================================
   ROUND TIMER
   ========================================================= */

.round-timer {
    margin:
        0 0 18px;

    padding:
        10px 8px 12px;

    text-align: right;

    background:
        linear-gradient(
            180deg,
            rgba(4, 7, 12, 0.92),
            rgba(19, 8, 20, 0.82)
        );

    border:
        1px solid
        rgba(255, 67, 67, 0.35);

    border-radius: 7px;

    box-shadow:
        inset 0 0 12px
        rgba(0, 0, 0, 0.85),

        0 0 8px
        rgba(255, 40, 40, 0.16);
}


.round-timer-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 6px;

    margin-bottom: 7px;
}


.round-timer-mode {
    font-family:
        "Rajdhani",
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.15em;

    color: #83f8ff;

    text-shadow:
        0 0 5px
        rgba(0, 238, 255, 0.55);
}


/* DIGITAL CLOCK */

.round-timer-display {
    font-family:
        "Orbitron",
        "Audiowide",
        monospace;

    font-size:
        clamp(
            21px,
            2vw,
            28px
        );

    font-weight: 800;

    line-height: 1;

    letter-spacing: 1px;

    color: #ff5a4d;

    text-shadow:
        0 0 3px #fff0da,
        0 0 8px #ff4d3d,
        0 0 16px rgba(255, 45, 32, 0.9),
        0 0 27px rgba(180, 0, 0, 0.62);

    font-variant-numeric:
        tabular-nums;
}


/* STOPWATCH MODE */

.catlady-vitals:not(.doomsday-active)
.round-timer-display {
    color: #62f8ff;

    text-shadow:
        0 0 3px #e9ffff,
        0 0 8px #00efff,
        0 0 17px rgba(0, 232, 255, 0.72);
}


/* DOOMSDAY MODE */

.catlady-vitals.doomsday-active
.round-timer {
    border-color:
        rgba(255, 40, 30, 0.75);

    box-shadow:
        inset 0 0 12px
        rgba(0, 0, 0, 0.9),

        0 0 9px
        rgba(255, 30, 20, 0.45);
}


.catlady-vitals.doomsday-active
.round-timer-mode {
    color: #ff5c4c;

    text-shadow:
        0 0 7px #ff3a2c;
}


/* =========================================================
   DOOMSDAY TOGGLE
   ========================================================= */
    
    .doomsday-toggle {
        display: inline-flex;
    
        align-items: center;
    
        gap: 5px;
    
        cursor: pointer;
    }
    
    
    .doomsday-toggle input {
        position: absolute;
    
        opacity: 0;
        pointer-events: none;
    }
    
    
    .doomsday-switch {
        position: relative;
    
        width: 25px;
        height: 12px;
    
        background: #383940;
    
        border-radius: 999px;
    
        box-shadow:
            inset 0 1px 4px
            rgba(0, 0, 0, 0.8);
    
        transition:
            background 0.2s ease,
            box-shadow 0.2s ease;
    }
    
    
    .doomsday-switch::after {
        content: "";
    
        position: absolute;
    
        top: 2px;
        left: 2px;
    
        width: 8px;
        height: 8px;
    
        border-radius: 50%;
    
        background: #999;
    
        transition:
            transform 0.2s ease,
            background 0.2s ease;
    }
    
    
    .doomsday-toggle input:checked
    + .doomsday-switch {
        background: #7c0c0c;
    
        box-shadow:
            0 0 7px
            rgba(255, 40, 32, 0.8);
    }
    
    
    .doomsday-toggle input:checked
    + .doomsday-switch::after {
        transform:
            translateX(13px);
    
        background: #ff5947;
    
        box-shadow:
            0 0 6px #ff3025;
    }
    
    
    .doomsday-label {
        font-family:
            "Rajdhani",
            sans-serif;
    
        font-size: 9px;
        font-weight: 700;
    
        letter-spacing: 0.08em;
    
        color: #8f929b;
    }
    
    
    .doomsday-toggle input:checked
    ~ .doomsday-label {
        color: #ff6b57;
    }
        
        /* =========================================================
       PLAYER VITALS
       ========================================================= */
        
        .catlady-vitals {
            /*
                These are overwritten dynamically by JS.
        
                HP controls --hp-color.
                Mana controls --mana-color.
            */
        
            --hp-color: hsl(45 100% 58%);
            --mana-color: hsl(27 100% 58%);
        
        
            position: relative;
        
            flex: 0 0 210px;
        
            width: 210px;
            height: 100%;
        
            min-height: 0;
        
            margin: 0;
        
            padding:
                clamp(14px, 2vh, 20px);
        
            text-align: right;
        
            color: #d5ffff;
        
            background:
                linear-gradient(
                    205deg,
                    rgba(37, 18, 62, 0.98),
                    rgba(17, 18, 47, 0.98)
                );
        
        
            /*
                HP = primary border
            */
        
            border:
                2px solid
                var(--hp-color);
        
            border-radius: 12px;
        
        
            /*
                MANA = secondary outline
            */
        
            outline:
                2px solid
                var(--mana-color);
        
            outline-offset: 4px;
        
        
            /*
                Both stats contribute their own neon glow.
            */
        
            box-shadow:
                -5px 5px 0 #30104a,
        
                0 0 8px
                var(--hp-color),
        
                0 0 20px
                color-mix(
                    in srgb,
                    var(--hp-color) 52%,
                    transparent
                ),
        
                0 0 10px
                var(--mana-color),
        
                0 0 28px
                color-mix(
                    in srgb,
                    var(--mana-color) 38%,
                    transparent
                );
        
            transition:
                border-color 0.25s ease,
                outline-color 0.25s ease,
                box-shadow 0.25s ease;
        }
        
        
        /*
         * Dynamic neon bars on the side nearest
         * the actual game canvas.
         *
         * HP and Mana get separate colors.
         */
        
        .catlady-vitals::before,
        .catlady-vitals::after {
            content: "";
        
            position: absolute;
        
            right: -7px;
        
            width: 3px;
        
            border-radius: 999px;
        }
        
        
        .catlady-vitals::before {
            top: 15px;
        
            height:
                calc(
                    50% - 20px
                );
        
            background:
                var(--hp-color);
        
            box-shadow:
                0 0 7px var(--hp-color),
                0 0 15px var(--hp-color);
        }
        
        
        .catlady-vitals::after {
            bottom: 15px;
        
            height:
                calc(
                    50% - 20px
                );
        
            background:
                var(--mana-color);
        
            box-shadow:
                0 0 7px var(--mana-color),
                0 0 15px var(--mana-color);
        }
        
        
        .catlady-vitals-title {
            margin:
                0 0 24px;
        
            padding:
                0 0 10px;
        
            text-align: right;
        
            font-family:
                "Audiowide",
                sans-serif;
        
            font-size:
                clamp(
                    15px,
                    1.5vw,
                    20px
                );
        
            line-height: 1.15;
        
            letter-spacing: 1px;
        
            text-transform: uppercase;
        
            color: #ff55ab;
        
            border-bottom:
                1px solid
                rgba(
                    0,
                    234,
                    255,
                    0.3
                );
        
            text-shadow:
                1px 1px 0 #68134b,
                0 0 8px
                rgba(
                    255,
                    67,
                    162,
                    0.7
                );
        }
        
        
        .vital-block {
            margin:
                0 0 28px;
        }
        
        
        .vital-heading {
            display: flex;
        
            align-items: baseline;
            justify-content: flex-end;
        
            gap: 9px;
        
            margin-bottom: 7px;
        }
        
        
        .vital-label {
            font-family:
                "Audiowide",
                sans-serif;
        
            font-size: 16px;
        
            letter-spacing: 1px;
        }
        
        
        .vital-number {
            font-family:
                "Rajdhani",
                sans-serif;
        
            font-size: 17px;
            font-weight: 700;
        
            color: #d8fff9;
        }
        
        
        #hp-value {
            color:
                var(--hp-color);
        
            text-shadow:
                0 0 7px
                var(--hp-color);
        }
        
        
        #mana-value {
            color:
                var(--mana-color);
        
            text-shadow:
                0 0 7px
                var(--mana-color);
        }
        
        
        .vital-track {
            position: relative;
        
            width: 100%;
            height: 13px;
        
            overflow: hidden;
        
            background:
                rgba(
                    0,
                    0,
                    0,
                    0.48
                );
        
            border:
                1px solid
                rgba(
                    151,
                    244,
                    255,
                    0.25
                );
        
            border-radius: 999px;
        
            box-shadow:
                inset 0 2px 5px
                rgba(
                    0,
                    0,
                    0,
                    0.7
                );
        }
        
        
        .vital-fill {
            width: 0%;
            height: 100%;
        
            border-radius: inherit;
        
            transition:
                width 0.25s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease;
        }
        
        
        .hp-fill {
            background:
                var(--hp-color);
        
            box-shadow:
                0 0 8px var(--hp-color),
                0 0 16px var(--hp-color);
        }
        
        
        .mana-fill {
            background:
                var(--mana-color);
        
            box-shadow:
                0 0 8px var(--mana-color),
                0 0 16px var(--mana-color);
        }
            
            
            .pause-indicator {
        position: fixed;
    
        z-index: 8000;
    
        top: 50%;
        left: 50%;
    
        transform:
            translate(-50%, -50%)
            rotate(-3deg)
            scale(0.85);
    
        opacity: 0;
        visibility: hidden;
    
        pointer-events: none;
    
        text-align: center;
    
        font-family:
            "Monoton",
            "Audiowide",
            sans-serif;
    
        font-size:
            clamp(
                38px,
                7vw,
                92px
            );
    
        color: #fff34d;
    
        text-shadow:
            -3px -2px 0 #00efff,
            3px 3px 0 #ff2aad,
            0 0 10px #fff34d,
            0 0 28px #ff2aad,
            0 0 50px #7c34ff;
    
        transition:
            opacity 0.16s ease,
            transform 0.16s ease,
            visibility 0.16s;
        }
    
        /* PAUSED INDICATOR */
        .pause-indicator span {
            display: block;
        
            margin-top: 12px;
        
            font-family:
                "Audiowide",
                sans-serif;
        
            font-size: 0.17em;
        
            letter-spacing: 0.3em;
        
            color: #00efff;
        
            text-shadow:
                0 0 8px #00efff,
                0 0 16px #00efff;
        }
        
        body.game-paused
        .pause-indicator {
            opacity: 1;
            visibility: visible;
        
            transform:
                translate(-50%, -50%)
                rotate(2deg)
                scale(1);
        }
        
        /* =========================================================
           PAUSE MENU
           ========================================================= */

        .pause-title {
            transform: scale(1);
            transform-origin: center center;

            transition:
                transform 180ms ease,
                opacity 180ms ease,
                filter 180ms ease;
        }

        .pause-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;

            margin-top: 9px;

            pointer-events: auto;
        }

        /*
         * RESET = exact retry of this level's opening state.
         * RESTART = throw away the campaign and begin a new randomized game.
         * Both are deliberately quieter than PAUSED until selected.
         */
        .pause-menu-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            min-width: 74px;
            min-height: 28px;

            padding: 3px 8px;

            border: 0;
            background: transparent;

            font-family:
                "Monoton",
                "Audiowide",
                sans-serif;

            font-size: 0.13em;
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.14em;

            color: #fff34d;

            text-shadow:
                -1px -1px 0 #00efff,
                1px 1px 0 #ff2aad,
                0 0 5px #fff34d,
                0 0 9px #ff2aad;

            cursor: pointer;
            pointer-events: auto;

            transform: rotate(-2deg) scale(1);
            transform-origin: center;

            opacity: 0.68;

            transition:
                transform 180ms ease,
                opacity 180ms ease,
                text-shadow 180ms ease;
        }

        .pause-reset-button {
            color: #00efff;

            text-shadow:
                -1px -1px 0 #7c34ff,
                1px 1px 0 #ff2aad,
                0 0 5px #00efff,
                0 0 9px #7c34ff;
        }

        .pause-menu-button:hover,
        .pause-menu-button:focus-visible {
            opacity: 1;

            transform:
                rotate(2deg)
                scale(1.45);

            outline: none;
        }

        .pause-reset-button:hover,
        .pause-reset-button:focus-visible {
            text-shadow:
                -2px -1px 0 #7c34ff,
                2px 2px 0 #ff2aad,
                0 0 8px #00efff,
                0 0 18px #7c34ff;
        }

        .pause-restart-button:hover,
        .pause-restart-button:focus-visible {
            transform:
                rotate(2deg)
                scale(1.65);

            text-shadow:
                -2px -1px 0 #00efff,
                2px 2px 0 #ff2aad,
                0 0 8px #fff34d,
                0 0 18px #ff2aad,
                0 0 28px #7c34ff;
        }

        /* RESTART is the destructive choice, so PAUSED visibly yields to it. */
        .pause-indicator:has(
            .pause-restart-button:hover,
            .pause-restart-button:focus-visible
        )
        .pause-title {
            transform: scale(0.72);
            opacity: 0.58;
        }

        /* ==================================================
       PRE-GAME SPLASH
       ================================================== */
    
    .new-game-splash {
        position: fixed;
        inset: 0;
    
        z-index: 10000;
    
        display: flex;
        align-items: center;
        justify-content: center;
    
        overflow: hidden;
    
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    
        padding: 24px;
    
        background:
            radial-gradient(
                circle at 18% 20%,
                rgba(255, 42, 147, 0.28) 0%,
                rgba(255, 42, 147, 0) 18%
            ),
            radial-gradient(
                circle at 82% 24%,
                rgba(186, 255, 54, 0.24) 0%,
                rgba(186, 255, 54, 0) 18%
            ),
            radial-gradient(
                circle at 26% 76%,
                rgba(186, 255, 54, 0.18) 0%,
                rgba(186, 255, 54, 0) 16%
            ),
            radial-gradient(
                circle at 78% 78%,
                rgba(255, 42, 147, 0.22) 0%,
                rgba(255, 42, 147, 0) 18%
            ),
            linear-gradient(
                180deg,
                rgba(13, 7, 39, 0.96) 0%,
                rgba(32, 8, 56, 0.97) 46%,
                rgba(9, 21, 22, 0.98) 100%
            );
    
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    
        transition:
            opacity 0.35s ease,
            visibility 0.35s ease;
    }
    
    .new-game-splash::before,
    .new-game-splash::after {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: min(92vw, 900px);
    
        text-align: center;
        white-space: nowrap;
    
        font-size: clamp(20px, 2.7vw, 30px);
        letter-spacing: 0.24em;
        line-height: 1;
    
        opacity: 0.95;
        pointer-events: none;
    
        z-index: 1;
    
        text-shadow:
            0 0 8px rgba(255, 52, 166, 0.65),
            0 0 16px rgba(183, 255, 54, 0.35);
    }
    
    .new-game-splash::before {
        top: 18px;
        content: "💖 🍸 🌴 🍹 🍺 💖 🌴 🍸 🍹 🍺 💖";
    }
    
    .new-game-splash::after {
        bottom: 18px;
        content: "🍺 💚 🌴 🍹 💖 🍸 🌴 🍺 🍹 💖 🌴";
    }
    
    .new-game-splash.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    .new-game-panel {
        position: relative;
        z-index: 2;
    
        width: min(440px, 88vw);
    
        display: flex;
        flex-direction: column;
        align-items: stretch;
    
        gap: 16px;
    
        padding: 34px 34px 30px;
    
        border: 2px solid rgba(255, 53, 165, 0.82);
        border-radius: 22px;
    
        background:
            linear-gradient(
                180deg,
                rgba(45, 7, 48, 0.94) 0%,
                rgba(22, 11, 52, 0.94) 56%,
                rgba(18, 34, 15, 0.94) 100%
            );
    
        box-shadow:
            0 0 0 2px rgba(182, 255, 66, 0.22),
            0 0 22px rgba(255, 52, 166, 0.38),
            0 0 42px rgba(182, 255, 66, 0.18),
            inset 0 0 28px rgba(255, 52, 166, 0.08);
    }
    
    .new-game-panel::before {
        content: "💖  🍸  🌴  🍹  🍺";
        display: block;
    
        margin-bottom: 2px;
    
        text-align: center;
        font-size: clamp(18px, 3.2vw, 26px);
        letter-spacing: 0.18em;
    
        opacity: 0.95;
    }
    
    .new-game-heading {
        position: relative;
    
        margin-bottom: 8px;
    
        text-align: center;
    
        font-family:
            "Bebas Neue",
            sans-serif;
    
        font-size:
            clamp(40px, 8vw, 66px);
    
        letter-spacing: 0.08em;
    
        color: #ff4fb0;
    
        text-shadow:
            -2px 0 0 rgba(184, 255, 66, 0.95),
            0 0 12px rgba(255, 79, 176, 0.82),
            0 0 24px rgba(255, 79, 176, 0.48);
    }
    
    .new-game-menu-button {
        width: 100%;
    
        padding: 14px 18px;
    
        border: 1px solid rgba(184, 255, 66, 0.82);
        border-radius: 12px;
    
        background:
            linear-gradient(
                180deg,
                rgba(255, 50, 160, 0.22) 0%,
                rgba(184, 255, 66, 0.14) 100%
            );
    
        color: #d7ff73;
    
        font-family:
            "Bebas Neue",
            sans-serif;
    
        font-size: 28px;
        letter-spacing: 0.08em;
    
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    
        box-shadow:
            0 0 10px rgba(255, 50, 160, 0.18),
            inset 0 0 10px rgba(184, 255, 66, 0.08);
    
        transition:
            transform 120ms ease,
            background 120ms ease,
            box-shadow 120ms ease,
            color 120ms ease;
    }
    
    .new-game-menu-button:hover,
    .new-game-menu-button:focus-visible,
    .new-game-menu-button:active {
        background:
            linear-gradient(
                180deg,
                rgba(255, 50, 160, 0.34) 0%,
                rgba(184, 255, 66, 0.24) 100%
            );
    
        color: #f6ffb5;
    
        box-shadow:
            0 0 16px rgba(255, 50, 160, 0.32),
            0 0 26px rgba(184, 255, 66, 0.18);
    
        transform: translateY(-1px) scale(1.01);
    }
    
    .new-game-key-hint {
        margin-top: 6px;
    
        text-align: center;
    
        font-family:
            "Inter",
            sans-serif;
    
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    
        color: #ffd4ec;
    
        text-shadow:
            0 0 8px rgba(255, 79, 176, 0.38);
    }
        
        /* =========================================================
           VICTORY SPLASH
           ========================================================= */
        
        .kitty-victory {
            position: fixed;
            inset: 0;
        
            z-index: 9999;
        
            display: flex;
            align-items: center;
            justify-content: center;
        
            overflow: hidden;
        
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        
            background:
                radial-gradient(
                    circle at 50% 45%,
                    rgba(255, 73, 212, 0.92) 0%,
                    rgba(119, 38, 188, 0.91) 28%,
                    rgba(102, 255, 59, 0.82) 68%,
                    rgba(11, 6, 29, 0.98) 100%
                );
        
            transition:
                opacity 0.35s ease,
                visibility 0.35s ease;
        }
        
        
        .kitty-victory.is-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        
        
        /* psychedelic glowing wash */
        
        .kitty-victory::before {
            content: "";
        
            position: absolute;
            inset: -30%;
        
            background:
                conic-gradient(
                    from 0deg,
                    #ff2aad,
                    #7c34ff,
                    #00efff,
                    #caff39,
                    #fff14a,
                    #ff2aad
                );
        
            opacity: 0.36;
        
            filter: blur(70px);
        
            animation:
                victory-color-spin
                8s linear infinite;
        }
        
        
        /* retro scan/grid insanity */
        
        .kitty-victory::after {
            content: "";
        
            position: absolute;
            inset: 0;
        
            pointer-events: none;
        
            opacity: 0.24;
        
            background-image:
                linear-gradient(
                    rgba(255, 255, 255, 0.12) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(0, 255, 240, 0.16) 1px,
                    transparent 1px
                );
        
            background-size:
                32px 32px;
        
            transform:
                perspective(500px)
                rotateX(54deg)
                scale(1.45);
        
            transform-origin:
                center bottom;
        }
        
        
        .victory-content {
            position: relative;
            z-index: 5;
        
            width:
                min(
                    92vw,
                    1000px
                );
        
            text-align: center;
        
            padding:
                clamp(
                    20px,
                    4vw,
                    48px
                );
        }
        .victory-rate {
            margin:
                15px 0 0;
        
            font-family:
                "Orbitron",
                "Audiowide",
                sans-serif;
        
            font-size:
                clamp(
                    14px,
                    2vw,
                    24px
                );
        
            font-weight: 700;
        
            letter-spacing: 0.08em;
        
            color: #00f7ff;
        
            text-shadow:
                0 0 5px #00f7ff,
                0 0 12px rgba(0, 247, 255, 0.8),
                0 0 24px rgba(255, 46, 183, 0.5);
        }
        
        .victory-kicker {
            margin-bottom: 8px;
        
            font-family:
                "Yellowtail",
                cursive;
        
            font-size:
                clamp(
                    20px,
                    3vw,
                    38px
                );
        
            color: #fff04f;
        
            transform:
                rotate(-5deg);
        
            text-shadow:
                0 0 5px #fff04f,
                0 0 12px #ffbd1f,
                0 0 24px rgba(255, 198, 31, 0.9);
        
            animation:
                victory-kicker-sway
                1.8s ease-in-out infinite alternate;
        }
        
        
        .victory-title {
            margin: 0;
        
            font-family:
                "Monoton",
                "Audiowide",
                sans-serif;
        
            font-size:
                clamp(
                    34px,
                    7.4vw,
                    94px
                );
        
            font-weight: 400;
        
            line-height: 0.94;
        
            letter-spacing:
                clamp(
                    1px,
                    0.3vw,
                    5px
                );
        
            color: #ff46bb;
        
            transform-origin:
                center center;
        
            text-shadow:
                3px 3px 0 #65127e,
                -3px -2px 0 #00f7ff,
        
                0 0 4px #ffffff,
                0 0 9px #ff4ec7,
                0 0 19px #ff4ec7,
                0 0 34px #ff18a8,
                0 0 60px rgba(255, 24, 168, 0.95),
        
                5px 7px 0 rgba(100, 255, 35, 0.45);
        
            animation:
                victory-title-wobble
                0.85s ease-in-out infinite alternate;
        }
        
        
        .victory-title-line {
            display: block;
        }
        
        
        .victory-title-line:first-child {
            color: #fff45c;
        
            font-size: 0.78em;
        
            text-shadow:
                3px 3px 0 #a0258f,
                -3px -2px 0 #00f7ff,
        
                0 0 5px #fff56a,
                0 0 14px #fff56a,
                0 0 28px #ffb11b,
                0 0 48px rgba(255, 177, 27, 0.8);
        }
        
        
        .victory-title-line:last-child {
            margin-top: 12px;
        }
        
        
        .victory-subtitle {
            margin:
                20px 0 0;
        
            font-family:
                "Audiowide",
                sans-serif;
        
            font-size:
                clamp(
                    12px,
                    1.7vw,
                    20px
                );
        
            letter-spacing: 0.25em;
        
            text-transform: uppercase;
        
            color: #bfff49;
        
            text-shadow:
                0 0 5px #bfff49,
                0 0 14px #7dff39;
        
            animation:
                victory-blink
                1.2s steps(2, end) infinite;
        }
        
        
        /*
         * Cats scattered across the entire screen.
         */
        
        .victory-cat {
            position: absolute;
        
            z-index: 3;
        
            display: block;
        
            width:
                clamp(
                    55px,
                    8vw,
                    115px
                );
        
            height:
                clamp(
                    55px,
                    8vw,
                    115px
                );
        
            object-fit: contain;
        
            image-rendering: pixelated;
        
            filter:
                drop-shadow(
                    0 0 6px
                    rgba(0, 245, 255, 0.95)
                )
                drop-shadow(
                    0 0 15px
                    rgba(255, 38, 181, 0.8)
                );
        
            animation:
                victory-cat-float
                var(--float-speed, 2.4s)
                ease-in-out
                infinite alternate;
        }
        
        
        .victory-cat:nth-child(odd) {
            animation-direction:
                alternate-reverse;
        }
        
        
        /*
         * Emoji fallback cats.
         */
        
        .victory-cat-fallback {
            position: absolute;
        
            z-index: 2;
        
            font-size:
                clamp(
                    42px,
                    6vw,
                    86px
                );
        
            filter:
                drop-shadow(
                    0 0 8px
                    #00edff
                )
                drop-shadow(
                    0 0 18px
                    #ff29b6
                );
        
            animation:
                victory-cat-float
                var(--float-speed, 2.2s)
                ease-in-out
                infinite alternate;
        }
        
        
        .victory-sun {
            position: absolute;
        
            z-index: 1;
        
            left: 50%;
            bottom: -18vw;
        
            width:
                min(
                    70vw,
                    800px
                );
        
            aspect-ratio: 1;
        
            transform:
                translateX(-50%);
        
            border-radius: 50%;
        
            background:
                repeating-linear-gradient(
                    to bottom,
                    #ff38bd 0,
                    #ff38bd 15px,
                    transparent 15px,
                    transparent 25px
                );
        
            opacity: 0.32;
        
            box-shadow:
                0 0 50px #ff2cb7,
                0 0 110px rgba(197, 255, 47, 0.72);
        
            animation:
                victory-sun-pulse
                2s ease-in-out infinite alternate;
        }
        
        
        .victory-dismiss {
            position: absolute;
        
            right: 18px;
            bottom: 15px;
        
            z-index: 10;
        
            border: 0;
        
            padding: 8px 12px;
        
            font-family:
                "Rajdhani",
                sans-serif;
        
            font-size: 13px;
            font-weight: 700;
        
            letter-spacing: 1px;
        
            color:
                rgba(
                    255,
                    255,
                    255,
                    0.65
                );
        
            background:
                rgba(
                    0,
                    0,
                    0,
                    0.22
                );
        
            border-radius: 5px;
        
            cursor: pointer;
        }
        
        
        .victory-dismiss:hover {
            color: #fff458;
        
            background:
                rgba(
                    0,
                    0,
                    0,
                    0.42
                );
        }
        
        
        /* =========================================================
           ANIMATIONS
           ========================================================= */
        
        @keyframes victory-color-spin {
        
            from {
                transform:
                    rotate(0deg)
                    scale(1);
            }
        
            50% {
                transform:
                    rotate(180deg)
                    scale(1.15);
            }
        
            to {
                transform:
                    rotate(360deg)
                    scale(1);
            }
        }
        
        
        @keyframes victory-title-wobble {
        
            0% {
                transform:
                    rotate(-1.2deg)
                    skewX(-2deg)
                    scale(0.98);
            }
        
            35% {
                transform:
                    rotate(1deg)
                    skewX(1deg)
                    scale(1.025);
            }
        
            70% {
                transform:
                    rotate(-0.5deg)
                    skewX(2deg)
                    scale(1.01);
            }
        
            100% {
                transform:
                    rotate(1.4deg)
                    skewX(-1deg)
                    scale(1.035);
            }
        }
        
        
        @keyframes victory-kicker-sway {
        
            from {
                transform:
                    rotate(-7deg)
                    translateY(-2px)
                    scale(0.96);
            }
        
            to {
                transform:
                    rotate(-2deg)
                    translateY(3px)
                    scale(1.05);
            }
        }
        
        
        @keyframes victory-cat-float {
        
            from {
                transform:
                    translateY(-8px)
                    rotate(-6deg)
                    scale(0.96);
            }
        
            to {
                transform:
                    translateY(10px)
                    rotate(7deg)
                    scale(1.07);
            }
        }
        
        
        @keyframes victory-sun-pulse {
        
            from {
                transform:
                    translateX(-50%)
                    scale(0.94);
        
                opacity: 0.25;
            }
        
            to {
                transform:
                    translateX(-50%)
                    scale(1.05);
        
                opacity: 0.42;
            }
        }
        
        
        @keyframes victory-blink {
        
            0%,
            45% {
                opacity: 1;
            }
        
            46%,
            62% {
                opacity: 0.45;
            }
        
            63%,
            100% {
                opacity: 1;
            }
        }
        
        /* =========================================================
   LOSS SPLASH
   ========================================================= */

.kitty-loss {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 64, 64, 0.18) 0%,
            rgba(122, 14, 14, 0.36) 30%,
            rgba(28, 9, 9, 0.88) 72%,
            rgba(8, 5, 5, 0.98) 100%
        );

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


.kitty-loss.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.loss-embers {
    position: absolute;
    inset: -20%;

    opacity: 0.4;

    background:
        conic-gradient(
            from 0deg,
            #140707,
            #4c0909,
            #b51717,
            #ff5a1f,
            #2a0a0a,
            #140707
        );

    filter: blur(60px);

    animation:
        loss-embers-spin
        7s linear infinite;
}


.loss-content {
    position: relative;
    z-index: 2;

    width:
        min(
            90vw,
            950px
        );

    text-align: center;

    padding:
        clamp(20px, 4vw, 50px);
}


.loss-kicker {
    margin-bottom: 10px;

    font-family:
        "Yellowtail",
        cursive;

    font-size:
        clamp(22px, 3vw, 42px);

    color: #ff9c54;

    transform: rotate(-4deg);

    text-shadow:
        0 0 6px rgba(255, 170, 70, 0.95),
        0 0 16px rgba(255, 90, 31, 0.82),
        0 0 26px rgba(190, 26, 26, 0.68);

    animation:
        loss-kicker-sway
        1.9s ease-in-out infinite alternate;
}


.loss-title {
    margin: 0;

    font-family:
        "Monoton",
        "Audiowide",
        sans-serif;

    font-size:
        clamp(38px, 7vw, 92px);

    line-height: 0.92;
    letter-spacing:
        clamp(1px, 0.3vw, 5px);

    color: #ffb36a;

    text-shadow:
        3px 3px 0 #250909,
        -2px -2px 0 #6d0808,
        0 0 6px #fff1d3,
        0 0 16px #ff7b2f,
        0 0 34px #ff2a2a,
        0 0 54px rgba(160, 12, 12, 0.95);

    animation:
        loss-title-throb
        0.9s ease-in-out infinite alternate;
}


.loss-title span {
    display: block;

    margin-top: 10px;

    color: #ff4f4f;

    font-size: 1.12em;

    text-shadow:
        3px 3px 0 #260707,
        -3px -2px 0 #4d0a0a,
        0 0 7px #fff0f0,
        0 0 18px #ff5a1f,
        0 0 32px #ff2d2d,
        0 0 60px rgba(155, 0, 0, 0.95);
}


.loss-reason {
    margin: 22px 0 0;

    font-family:
        "Audiowide",
        sans-serif;

    font-size:
        clamp(14px, 1.8vw, 22px);

    line-height: 1.35;
    letter-spacing: 0.04em;

    color: #ffd9ba;

    text-shadow:
        0 0 8px rgba(255, 120, 60, 0.6);
}


.loss-subtitle {
    margin: 20px 0 0;

    font-family:
        "Rajdhani",
        sans-serif;

    font-size:
        clamp(14px, 1.5vw, 20px);

    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;

    color: #ff6b57;

    text-shadow:
        0 0 8px rgba(255, 70, 70, 0.8);

    animation:
        loss-subtitle-flicker
        1.1s steps(2, end) infinite;
}


.loss-dismiss {
    position: absolute;

    right: 18px;
    bottom: 15px;

    z-index: 5;

    border: 0;
    padding: 8px 12px;

    font-family:
        "Rajdhani",
        sans-serif;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;

    color: rgba(255, 228, 212, 0.75);

    background: rgba(0, 0, 0, 0.28);

    border-radius: 5px;

    cursor: pointer;
}


.loss-dismiss:hover {
    color: #fff0d7;

    background:
        rgba(
            110,
            10,
            10,
            0.55
        );
}


/* =========================================================
   LOSS SEQUENCE: THE GAME MELTS AND SPINS TO HELL
   ========================================================= */
    
    body.loss-sequence h1,
    body.loss-sequence .game-instructions {
        animation:
            loss-whirl-text
            1.25s cubic-bezier(0.18, 0.8, 0.24, 1)
            forwards;
    }
    
    
    body.loss-sequence .catlady-vitals {
        animation:
            loss-whirl-vitals
            1.25s cubic-bezier(0.18, 0.8, 0.24, 1)
            forwards;
    }
    
    
    body.loss-sequence #game-container {
        animation:
            loss-whirl-canvas
            1.25s cubic-bezier(0.18, 0.8, 0.24, 1)
            forwards;
    }
    
    
    body.loss-sequence .kitty-scoreboard {
        animation:
            loss-whirl-scoreboard
            1.25s cubic-bezier(0.18, 0.8, 0.24, 1)
            forwards;
    }
    
    
    body.loss-sequence canvas {
        animation:
            loss-canvas-melt
            1.25s cubic-bezier(0.2, 0.72, 0.22, 1)
            forwards;
    
        transform-origin: center center;
    }
    
    
    body.loss-sequence::after {
        opacity: 0.12;
    }
    
    
    body.loss-active {
        background:
            radial-gradient(
                circle at 50% 35%,
                #5c0b0b 0%,
                #260909 48%,
                #110707 100%
            );
    }
    
    
    /* =========================================================
       ANIMATIONS
       ========================================================= */
    
    @keyframes loss-whirl-vitals {
        0% {
            transform:
                translate(0, 0)
                rotate(0deg)
                scale(1);
            opacity: 1;
        }
        45% {
            transform:
                translate(-20px, -25px)
                rotate(-14deg)
                scale(1.04);
            opacity: 1;
        }
        100% {
            transform:
                translate(-260px, -180px)
                rotate(-400deg)
                scale(0.1);
            opacity: 0;
        }
    }
    
    
    @keyframes loss-whirl-canvas {
        0% {
            transform:
                translate(0, 0)
                rotate(0deg)
                scale(1);
            opacity: 1;
        }
        38% {
            transform:
                translate(8px, 12px)
                rotate(8deg)
                scale(1.02);
            opacity: 1;
        }
        100% {
            transform:
                translate(0, 220px)
                rotate(560deg)
                scale(0.12);
            opacity: 0;
        }
    }
    
    
    @keyframes loss-whirl-scoreboard {
        0% {
            transform:
                translate(0, 0)
                rotate(0deg)
                scale(1);
            opacity: 1;
        }
        50% {
            transform:
                translate(30px, -10px)
                rotate(16deg)
                scale(1.03);
            opacity: 1;
        }
        100% {
            transform:
                translate(280px, -170px)
                rotate(410deg)
                scale(0.1);
            opacity: 0;
        }
    }
    
    
    @keyframes loss-whirl-text {
        0% {
            transform:
                translate(0, 0)
                rotate(0deg)
                scale(1);
            opacity: 1;
        }
        100% {
            transform:
                translate(0, -120px)
                rotate(-18deg)
                scale(0.6);
            opacity: 0;
        }
    }
    
    
    @keyframes loss-canvas-melt {
        0% {
            filter:
                hue-rotate(0deg)
                saturate(1)
                blur(0px);
            clip-path:
                inset(0 0 0 0 round 8px);
        }
        40% {
            filter:
                hue-rotate(-40deg)
                saturate(1.7)
                blur(1px);
            clip-path:
                polygon(
                    0 0,
                    100% 0,
                    100% 83%,
                    92% 88%,
                    83% 84%,
                    73% 91%,
                    61% 86%,
                    49% 94%,
                    38% 88%,
                    27% 95%,
                    15% 90%,
                    0 100%
                );
        }
        100% {
            filter:
                hue-rotate(-85deg)
                saturate(2.1)
                blur(4px);
            clip-path:
                polygon(
                    0 0,
                    100% 0,
                    100% 72%,
                    94% 92%,
                    88% 80%,
                    78% 100%,
                    65% 82%,
                    51% 100%,
                    37% 86%,
                    24% 100%,
                    11% 84%,
                    0 100%
                );
        }
    }
    
    
    @keyframes loss-embers-spin {
        from {
            transform:
                rotate(0deg)
                scale(1);
        }
        50% {
            transform:
                rotate(180deg)
                scale(1.12);
        }
        to {
            transform:
                rotate(360deg)
                scale(1);
        }
    }
    
    
    @keyframes loss-title-throb {
        from {
            transform:
                rotate(-0.8deg)
                scale(0.985);
        }
        to {
            transform:
                rotate(1deg)
                scale(1.03);
        }
    }
    
    
    @keyframes loss-kicker-sway {
        from {
            transform:
                rotate(-6deg)
                translateY(-2px);
        }
        to {
            transform:
                rotate(-2deg)
                translateY(4px);
        }
    }
    
    
    @keyframes loss-subtitle-flicker {
        0%, 45% {
            opacity: 1;
        }
        46%, 55% {
            opacity: 0.42;
        }
        56%, 100% {
            opacity: 1;
        }
    }


/* =========================================================
   MOBILE / COARSE-POINTER ACTION HUD
   ========================================================= */

.mobile-control-hud {
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.mobile-control-button {
    min-width: 96px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 238, 255, 0.82);
    border-radius: 7px;
    font-family: "Audiowide", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #83f8ff;
    background: rgba(9, 7, 24, 0.94);
    box-shadow:
        0 0 7px rgba(0, 238, 255, 0.4),
        0 0 14px rgba(255, 42, 157, 0.18);
    text-shadow: 0 0 6px rgba(0, 238, 255, 0.6);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.mobile-control-button:active {
    transform: scale(0.96);
}

.mobile-control-interact {
    color: #bfff39;
    border-color: rgba(191, 255, 57, 0.9);
    text-shadow: 0 0 6px rgba(191, 255, 57, 0.7);
}

.mobile-control-throw {
    color: #ff79be;
    border-color: rgba(255, 121, 190, 0.9);
    text-shadow: 0 0 6px rgba(255, 121, 190, 0.7);
}

.touch-pause-button {
    color: #ffe45c;
    border-color: rgba(255, 228, 92, 0.9);
    text-shadow: 0 0 6px rgba(255, 228, 92, 0.75);
}

body.game-paused .touch-pause-button {
    color: #bfff39;
    border-color: #bfff39;
}


/* =========================================================
   OVERHEARD SOUNDS
   Reusable in-game sound-text treatment. HUD/pause layers remain above it.
   ========================================================= */

.overheard-sounds {
    position: absolute;
    z-index: 7000;

    display: inline-flex;
    align-items: baseline;

    max-width: min(360px, 78vw);

    pointer-events: none;
    user-select: none;

    white-space: pre;

    color: #0b5f35;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(16px, 2vw, 23px);
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;

    opacity: 0;

    text-shadow:
        0 1px 0 #020d08,
        0 0 4px rgba(8, 74, 40, 0.9),
        0 0 10px rgba(0, 26, 14, 0.8);

    transform:
        translate(-50%, -50%)
        scale(0.96);

    will-change: transform, opacity;

    animation:
        overheard-sound-travel
        3.8s
        cubic-bezier(0.18, 0.72, 0.22, 1)
        forwards;
}

.overheard-sounds__letter {
    display: inline-block;

    will-change: transform;

    animation:
        overheard-letter-float
        var(--overheard-letter-duration, 1.1s)
        ease-in-out
        var(--overheard-letter-delay, 0s)
        infinite
        alternate;
}

@keyframes overheard-sound-travel {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.96);
    }

    12% {
        opacity: 0.92;
    }

    76% {
        opacity: 0.82;
    }

    100% {
        opacity: 0;
        transform:
            translate(
                calc(-50% + var(--overheard-drift-x, 0px)),
                calc(-50% + var(--overheard-drift-y, -24px))
            )
            scale(1.06);
    }
}

@keyframes overheard-letter-float {
    from {
        transform: translate(0, 0);
    }

    to {
        transform:
            translate(
                var(--overheard-letter-x, 2px),
                var(--overheard-letter-y, -3px)
            );
    }
}