@font-face {
            font-family: 'Nixiebold-slim';
            src: url('Nixiebold-slim.woff2') format('woff2');
        }

        body {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            background: rgb(63, 63, 63);
            overflow: hidden;

        }

        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-image: url('../img/display_a.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            filter: blur(15px);
            /* ✅ 直接模糊图片本身 */
            opacity: 0.6;
            z-index: -1;
        }



        .headContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            gap: 5vh 10vh;
            margin-top: 10vh;
        }

        .head {
            width: 40vh;
            height: 50vh;
            border-radius: 60% 60% 50% 50%;
            position: relative;
            box-shadow: inset 0.5vh 2vh 0 #97846b2c, inset -1.5vh -2.5vh 0 #97846b2c;
            background: radial-gradient(circle at 40% 30%, #fddbb0, #fddbb0, #c0a787);
            transform-origin: center center;
            transform: scale(0.64);
            animation: headNod 5s ease-in-out infinite;
        }


        @keyframes headNod {
            0% {
                transform: scale(0.64) rotate(0deg);
            }

            25% {
                transform: scale(0.64) rotate(-2deg);
            }

            50% {
                transform: scale(0.64) rotate(2deg);
            }

            75% {
                transform: scale(0.64) rotate(-2deg);
            }

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


        .head-surprised {
            animation: headShock 1s ease;
        }

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

            30% {
                transform: scale(1.01) rotate(-1deg);
            }

            60% {
                transform: scale(0.99) rotate(1deg);
            }

            100% {
                transform: scale(1);
            }
        }

        .hair-left,
        .hair-right {
            position: absolute;
            top: -3vh;
            height: 12vh;
            background: linear-gradient(to bottom, #3f3f3f, #000000, #1b1b1b, #3d3d3d);
        }

        .hair-left {
            width: 27vh;
            left: 0;
            border-radius: 60% 0 0 0;
        }

        .hair-right {
            width: 12vh;
            right: -0.75vh;
            border-radius: 0 60% 0 0;
        }

        .hair-puff {
            animation: puff 0.4s ease;
        }

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

            50% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(1);
            }
        }

        .eye {
            width: 12vh;
            height: 12vh;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 18vh;
            box-shadow: 0 0 0.6vh #333;
        }

        .eye-crazy {
            animation: eyeCrazy 0.2s ease;
            box-shadow: 0 0 1.2vh #c0b19f;
        }

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

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .eye.left {
            left: 6vh;
        }

        .eye.right {
            right: 6vh;
        }

        .pupil {
            width: 4vh;
            height: 4vh;
            background: black;
            border-radius: 50%;
            position: absolute;
            top: 4.5vh;
            left: 4.5vh;
            transition: transform 0.05s linear;
            box-shadow: 0 0 0 0.8vh rgb(65, 65, 65), 0 0 0 0.5vh #000, inset 1.5vh 2vh 0 rgb(116, 116, 116);
        }

        .pupilw {
            position: absolute;
            top: 1vh;
            left: 30%;
            transform: translate(-50%);
            width: 2vh;
            height: 2vh;
            background: white;
            border-radius: 50%;
            border: 0.5vh solid black;
        }

        .brow {
            width: 14vh;
            height: 7vh;
            background: linear-gradient(to bottom, #3f3f3f, #3d3d3d, #000000, #3d3d3d);
            position: absolute;
            top: 15vh;
            border-radius: 3vh;
            z-index: 3;
        }

        .brow.left {
            left: 4vh;
            transform: rotate(-15deg);
        }

        .brow.right {
            right: 4vh;
            transform: rotate(15deg);
        }

        .brow-shake {
            animation: shake 0.3s ease;
        }

        @keyframes shake {
            0% {
                transform: translateY(0);
            }

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

            50% {
                transform: translateY(1vh);
            }

            75% {
                transform: translateY(-1vh);
                transform: rotate(15deg);
            }

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

        .ear {
            width: 8vh;
            height: 12vh;
            background: #fddbb0;
            position: absolute;
            top: 19vh;
            border-radius: 50%;
            z-index: -1;
        }

        .ear-left {
            left: -4vh;
        }

        .ear-right {
            right: -4vh;
        }

        .nose {
            width: 4vh;
            height: 6vh;
            background: #e0a776;
            position: absolute;
            top: 58%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 3vh;

        }

        .mouth {
            width: 12vh;
            height: 6vh;
            background: #a65c4b;
            position: absolute;
            bottom: 6vh;
            left: 40%;
            transform: translate(-50%);
            border-radius: 0 0 6vh 6vh;
        }

        .mouth-surprised {
            animation: mouthOpen 0.3s ease;
            background: #c96d5a;
            border-radius: 6vh 6vh 0 0;
        }

        @keyframes mouthOpen {
            0% {
                transform: scaleY(1);
            }

            50% {
                transform: scaleY(1.2);
            }

            100% {
                transform: scaleY(1);
            }
        }

        .ball {
            width: 16vh;
            height: 16vh;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 50vw;
            z-index: 10;
            background: radial-gradient(circle at 40% 30%, #ffffff, #dbdbdb, #d4d4d4);
        }

        .table {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100vw;
            height: 10vh;
            background: darkblue;
            box-shadow:
                0 0 0 0.8vh rgba(90, 90, 90, 0.336),
                0 0 0 1vh #222,
                /* 模拟二层轮廓 */
                inset -1.5vh -2vh 0 rgba(39, 16, 16, 0.5);
            opacity: 0.64;
        }

        .trail-dot {
            position: absolute;
            width: 1vh;
            height: 1vh;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            pointer-events: none;
            transition: opacity 1s ease;
        }


        .digit-pop {
            font-family: 'Nixiebold-slim';
            position: absolute;
            top: 60vh;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24vh;
            color: #ff4d4d;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            text-shadow:
                0.3vh 0.3vh 0 #fb7c00,
                /* 压痕阴影 */
                -0.3vh -0.3vh 0 #fb7c00,
                /* 高光线条 */
                0 0 0.6vh rgba(255, 255, 255, 0.3);
            /* 柔光轮廓 */
            -webkit-text-fill-color: #ffffff;
        }

        .digit-pop.show {
            opacity: 1;
            transform: translateX(-50%) translateY(-40px);
        }

        .ui-buttons {
            position: fixed;
            bottom: 3vh;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            padding: 0 2vw;
            z-index: 9;
            pointer-events: auto;
        }

        .ui-buttons button {
            background-color: rgba(0, 0, 0, 0.5);
            color: #fb7c00;
            border: none;
            padding: 1vh 2vh;
            font-size: 1.5vh;
            border-radius: 0.5vh;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .ui-buttons button:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }