:root {
                --bg1: #fffdf8;
                --bg2: #f5ecde;
                --panel: rgba(255, 253, 248, 0.76);
                --panel2: rgba(255, 253, 248, 0.94);
                --ink: #4b3d34;
                --hot: #f08aa2;
                --gold: #f3c96d;
                --mint: #a8dec8;
                --blue: #a8d8f0;
                --shadow: rgba(128, 96, 74, 0.18);
            }

            * {
                box-sizing: border-box;
                -webkit-tap-highlight-color: transparent;
            }
            html,
            body {
                margin: 0;
                width: 100%;
                height: 100%;
                height: 100dvh;
                overflow: hidden;
                background: linear-gradient(
                    180deg,
                    #fff7ea 0%,
                    #f2e2cf 58%,
                    #e8d2b8 100%
                );
                font-family:
                    system-ui,
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    "PingFang SC",
                    "Microsoft YaHei",
                    sans-serif;
                color: var(--ink);
                touch-action: none;
                user-select: none;
            }

            #gameWrap {
                position: fixed;
                inset: 0;
                width: 100vw;
                height: 100vh;
                height: 100dvh;
                overflow: hidden;
                background: linear-gradient(
                    180deg,
                    #fff6e7 0%,
                    #f0dfca 54%,
                    #e6cfb4 100%
                );
            }

            canvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                display: block;
                touch-action: none;
            }
            .smallStat {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 1px;
            }
            .right .smallStat {
                align-items: flex-end;
            }
            @keyframes meterBump {
                0% {
                    transform: scale(1);
                }
                45% {
                    transform: scale(1.08);
                }
                100% {
                    transform: scale(1);
                }
            }
            .card {
                position: relative;
                width: min(760px, 94vw);
                max-height: min(92vh, 560px);
                overflow: auto;
                padding: clamp(18px, 3vw, 30px);
                border-radius: 34px;
                background:
                    linear-gradient(
                        145deg,
                        rgba(255, 255, 255, 0.72),
                        rgba(255, 250, 242, 0.44)
                    ),
                    linear-gradient(
                        315deg,
                        rgba(255, 255, 255, 0.3),
                        rgba(255, 255, 255, 0.06)
                    );
                box-shadow:
                    0 38px 110px rgba(68, 50, 32, 0.34),
                    0 18px 46px rgba(255, 255, 255, 0.48) inset,
                    0 -18px 42px rgba(171, 137, 101, 0.24) inset,
                    0 0 0 1.5px rgba(255, 255, 255, 0.74) inset,
                    0 0 0 4px rgba(96, 70, 48, 0.12);
                border: 3px solid rgba(92, 68, 47, 0.38);
                outline: 1px solid rgba(255, 255, 255, 0.62);
                outline-offset: -8px;
                backdrop-filter: blur(34px) saturate(1.48) brightness(1.06);
                -webkit-backdrop-filter: blur(34px) saturate(1.48)
                    brightness(1.06);
                text-align: center;
            }
            .card::before {
                content: "";
                position: absolute;
                left: 24px;
                right: 24px;
                top: 16px;
                height: 30%;
                border-radius: 28px;
                background: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.48),
                    rgba(255, 255, 255, 0)
                );
                pointer-events: none;
                mix-blend-mode: screen;
            }
            h1 {
                margin: 0 0 8px;
                font-size: clamp(34px, 6.5vw, 68px);
                line-height: 1;
                letter-spacing: 2px;
                color: #ff577d;
                text-shadow:
                    0 5px 0 #ffe16b,
                    0 10px 24px rgba(255, 80, 120, 0.25);
            }
            .subtitle {
                margin: 4px 0 16px;
                font-size: clamp(14px, 2vw, 20px);
                font-weight: 800;
                color: #356078;
            }
            .rules {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
                margin: 14px 0 18px;
                text-align: left;
            }
            .rule {
                padding: 12px;
                border-radius: 18px;
                background: rgba(116, 211, 255, 0.18);
                font-weight: 800;
                font-size: clamp(12px, 1.7vw, 16px);
                line-height: 1.38;
            }
            button {
                appearance: none;
                border: 0;
                border-radius: 22px;
                padding: 14px 24px;
                min-width: 160px;
                font-size: clamp(16px, 2.2vw, 22px);
                font-weight: 1000;
                color: white;
                background: linear-gradient(180deg, #ff7b98, #ff3f72);
                box-shadow:
                    0 10px 0 #d92956,
                    0 16px 26px rgba(255, 72, 115, 0.28);
                cursor: pointer;
                touch-action: manipulation;
            }
            button:active {
                transform: translateY(4px);
                box-shadow:
                    0 6px 0 #d92956,
                    0 10px 20px rgba(255, 72, 115, 0.24);
            }
            .ghostButton {
                background: linear-gradient(180deg, #62caff, #3797ff);
                box-shadow:
                    0 10px 0 #2175d5,
                    0 16px 26px rgba(55, 151, 255, 0.22);
                min-width: 120px;
            }
            .agreementHint {
                position: sticky;
                top: 0;
                z-index: 1;
                margin: -12px -14px 12px;
                padding: 8px 12px;
                background: linear-gradient(
                    180deg,
                    rgba(255, 247, 183, 0.96),
                    rgba(255, 247, 183, 0.74)
                );
                color: #7a5a1a;
                font-weight: 1000;
                text-align: center;
                border-radius: 16px 16px 10px 10px;
            }
            .agreementBottom {
                min-height: 360px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;
                gap: 8px;
                padding: 220px 0 10px;
                text-align: center;
            }
            .agreementCheck {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-weight: 1000;
                color: #56606a;
                font-size: 12px;
            }
            .agreementCheck input {
                width: 12px;
                height: 12px;
                accent-color: #ff5b7f;
            }
            .tinyEscape {
                min-width: 46px;
                padding: 5px 8px;
                border-radius: 10px;
                font-size: 11px;
                line-height: 1;
                box-shadow:
                    0 4px 0 #b02a4b,
                    0 8px 16px rgba(255, 72, 115, 0.22);
            }
            .tinyEscape:disabled {
                filter: grayscale(0.65);
                opacity: 0.45;
                cursor: not-allowed;
                transform: none;
            }

            .taskBox {
                margin: 10px 0;
                padding: 12px;
                border-radius: 22px;
                background: linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.6),
                    rgba(246, 250, 253, 0.36)
                );
                border: 2.5px solid rgba(80, 96, 112, 0.28);
                box-shadow:
                    0 14px 34px rgba(42, 58, 76, 0.13),
                    inset 0 1px rgba(255, 255, 255, 0.94),
                    inset 0 -10px 24px rgba(82, 113, 145, 0.1);
                backdrop-filter: blur(22px) saturate(1.3);
                -webkit-backdrop-filter: blur(22px) saturate(1.3);
            }
            .taskHint {
                margin: 8px 0 10px;
                text-align: center;
                font-weight: 1000;
                color: #55697c;
                line-height: 1.45;
            }
            .slideTrack {
                position: relative;
                height: 56px;
                margin: 14px 0;
                border-radius: 999px;
                background: linear-gradient(
                    90deg,
                    rgba(226, 237, 246, 0.95),
                    rgba(255, 247, 177, 0.95)
                );
                box-shadow: inset 0 4px 12px rgba(50, 70, 90, 0.14);
                overflow: hidden;
                touch-action: none;
                user-select: none;
            }
            .slideFill {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 0%;
                border-radius: inherit;
                background: linear-gradient(
                    90deg,
                    rgba(255, 211, 74, 0.45),
                    rgba(255, 105, 143, 0.45)
                );
                pointer-events: none;
            }
            .slideKnob {
                position: absolute;
                left: 6px;
                top: 6px;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                display: grid;
                place-items: center;
                background: linear-gradient(180deg, #fff7a6, #ffbf4d);
                box-shadow:
                    0 5px 0 #d98a1e,
                    0 12px 24px rgba(180, 110, 20, 0.22);
                color: #684000;
                font-weight: 1000;
                cursor: grab;
                touch-action: none;
            }
            .gesturePad {
                height: 210px;
                border-radius: 24px;
                position: relative;
                overflow: hidden;
                background:
                    radial-gradient(
                        circle at 20% 18%,
                        rgba(255, 255, 255, 0.92),
                        rgba(255, 255, 255, 0) 18%
                    ),
                    linear-gradient(
                        160deg,
                        rgba(169, 225, 255, 0.75),
                        rgba(255, 238, 152, 0.82)
                    );
                border: 2px dashed rgba(79, 104, 130, 0.28);
                touch-action: none;
            }
            .gesturePad:before {
                content: "锅盖锁屏";
                position: absolute;
                left: 12px;
                top: 10px;
                font-weight: 1000;
                color: rgba(54, 76, 99, 0.72);
            }
            .gesturePath {
                position: absolute;
                inset: 42px 32px 24px;
                border: 3px dashed rgba(255, 91, 127, 0.45);
                border-radius: 18px;
                color: rgba(255, 91, 127, 0.78);
                display: grid;
                place-items: center;
                font-weight: 1000;
                font-size: 28px;
                pointer-events: none;
            }
            .cancelPage {
                min-height: 240px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 12px;
                text-align: center;
            }
            .cancelQuestion {
                font-size: clamp(20px, 3vw, 30px);
                font-weight: 1000;
                color: #41566b;
                line-height: 1.18;
            }
            .taskButtonRow {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
                margin-top: 8px;
            }
            .miniTaskBtn {
                min-width: 0;
                padding: 10px 14px;
                border-radius: 16px;
                font-size: 14px;
                box-shadow:
                    0 6px 0 #b02a4b,
                    0 10px 18px rgba(255, 72, 115, 0.16);
            }
            .secondaryTaskBtn {
                background: linear-gradient(180deg, #dce9f5, #a9c2d9);
                color: #395166;
                box-shadow:
                    0 6px 0 #7890a5,
                    0 10px 18px rgba(60, 80, 100, 0.16);
            }
            .popupField {
                position: relative;
                height: 320px;
                border-radius: 22px;
                background: linear-gradient(
                    180deg,
                    rgba(238, 247, 255, 0.88),
                    rgba(255, 241, 180, 0.72)
                );
                overflow: hidden;
                border: 2px solid rgba(120, 140, 160, 0.18);
            }
            .fakePopup {
                position: absolute;
                width: min(245px, 70%);
                min-height: 86px;
                padding: 30px 12px 12px;
                border-radius: 22px;
                background: linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.66),
                    rgba(246, 251, 255, 0.4)
                );
                box-shadow:
                    0 18px 44px rgba(40, 70, 100, 0.3),
                    inset 0 1px rgba(255, 255, 255, 0.96),
                    inset 0 -8px 20px rgba(80, 120, 150, 0.1);
                border: 2.5px solid rgba(72, 88, 104, 0.28);
                backdrop-filter: blur(24px) saturate(1.34);
                -webkit-backdrop-filter: blur(24px) saturate(1.34);
                font-weight: 900;
                color: #405366;
            }
            .fakePopupClose {
                position: absolute;
                width: 24px;
                height: 24px;
                min-width: 0;
                padding: 0;
                border-radius: 50%;
                background: linear-gradient(180deg, #ff8aa4, #ff456f);
                box-shadow: 0 3px 0 #b02a4b;
                color: white;
                font-size: 13px;
                line-height: 1;
            }
            .fakePopupClose.tl {
                left: 8px;
                top: 7px;
            }
            .fakePopupClose.tr {
                right: 8px;
                top: 7px;
            }
            .fakePopupClose.bl {
                left: 8px;
                bottom: 7px;
            }
            .fakePopupClose.br {
                right: 8px;
                bottom: 7px;
            }
            .rejectField {
                position: relative;
                min-height: 300px;
                border-radius: 24px;
                padding: 18px 14px 72px;
                background: linear-gradient(
                    150deg,
                    rgba(255, 255, 255, 0.62),
                    rgba(235, 244, 250, 0.44)
                );
                border: 2.5px solid rgba(76, 92, 108, 0.28);
                box-shadow:
                    inset 0 1px rgba(255, 255, 255, 0.94),
                    inset 0 -12px 28px rgba(77, 110, 140, 0.12),
                    0 12px 30px rgba(42, 58, 76, 0.1);
                backdrop-filter: blur(22px) saturate(1.3);
                -webkit-backdrop-filter: blur(22px) saturate(1.3);
                text-align: center;
            }
            .fakeAgreeGrid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
                margin-top: 16px;
            }
            .agreeTrapBtn {
                min-width: 0;
                padding: 12px 10px;
                border-radius: 16px;
                font-size: 13px;
                background: linear-gradient(180deg, #7edcff, #3797ff);
                box-shadow:
                    0 6px 0 #2175d5,
                    0 12px 20px rgba(55, 151, 255, 0.18);
            }
            .realRejectBtn {
                position: absolute;
                min-width: 0;
                padding: 4px 6px;
                border-radius: 8px;
                font-size: 10px;
                line-height: 1;
                background: linear-gradient(180deg, #ff7b98, #ff3f72);
                box-shadow:
                    0 3px 0 #b02a4b,
                    0 6px 12px rgba(255, 72, 115, 0.18);
                z-index: 2;
            }
            .tinyTimer {
                display: inline-block;
                padding: 4px 9px;
                border-radius: 999px;
                background: rgba(255, 215, 75, 0.55);
                color: #704a00;
                font-weight: 1000;
                margin-top: 6px;
            }
            .actionBtns {
                display: flex;
                gap: 12px;
                align-items: flex-end;
                pointer-events: auto;
            }

            .portraitTip {
                display: none;
                position: fixed;
                inset: 0;
                z-index: 50;
                background: linear-gradient(160deg, #fff9ee, #eadcc8);
                color: #29445e;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 26px;
                font-size: 22px;
                font-weight: 1000;
                line-height: 1.45;
            }

            .hide {
                display: none !important;
            }

            @media (orientation: portrait) {
                .portraitTip {
                    display: flex;
                }
            }