@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
    --glass-frame-sheen: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.06) 34%, rgba(255, 255, 255, 0.92) 48%, rgba(255, 255, 255, 0.22) 58%, transparent 76%);
    --glass-frame-fill: linear-gradient(180deg, rgba(109, 40, 217, 0.32) 0%, rgba(59, 7, 100, 0.62) 100%);
    --pool-shell-rose: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 18%, transparent 19%), linear-gradient(145deg, rgba(255, 116, 146, 0.95) 0%, rgba(225, 29, 72, 0.96) 58%, rgba(136, 19, 55, 0.98) 100%);
    --pool-shell-blue: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 18%, transparent 19%), linear-gradient(145deg, rgba(96, 165, 250, 0.96) 0%, rgba(37, 99, 235, 0.96) 56%, rgba(30, 64, 175, 0.98) 100%);
    --pool-shell-violet: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 18%, transparent 19%), linear-gradient(145deg, rgba(216, 180, 254, 0.96) 0%, rgba(147, 51, 234, 0.96) 56%, rgba(88, 28, 135, 0.98) 100%);
    --pool-shell-legend: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.1) 18%, transparent 19%), linear-gradient(145deg, rgba(253, 224, 71, 0.98) 0%, rgba(244, 63, 94, 0.96) 48%, rgba(157, 23, 77, 0.98) 100%);
    --pool-shell-secret: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 18%, transparent 19%), linear-gradient(145deg, rgba(64, 64, 64, 0.98) 0%, rgba(17, 24, 39, 0.98) 50%, rgba(146, 64, 14, 0.96) 100%);
}
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: radial-gradient(circle at center, #2e102f 0%, #110414 100%);
            overflow-x: hidden;
        }

        /* 3D 盲盒容器与动画 */
        .box-container {
            perspective: 1000px;
        }

        #mysteryBoxWrapper {
            transform-origin: center bottom;
        }

        @keyframes box-charge-flow {
            0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
            12% { transform: translate3d(calc(var(--box-shift, 8px) * -0.55), calc(var(--box-lift, 4px) * 0.22), 0) scale(calc(1 - (var(--box-squeeze, 0.05) * 0.45))) rotate(calc(var(--box-tilt, 2deg) * -0.42)); }
            28% { transform: translate3d(calc(var(--box-shift, 8px) * 0.72), calc(var(--box-lift, 4px) * -0.16), 0) scale(calc(1 - (var(--box-squeeze, 0.05) * 0.82))) rotate(calc(var(--box-tilt, 2deg) * 0.58)); }
            46% { transform: translate3d(calc(var(--box-shift, 8px) * -0.88), calc(var(--box-lift, 4px) * 0.34), 0) scale(calc(1 - var(--box-squeeze, 0.05))) rotate(calc(var(--box-tilt, 2deg) * -0.86)); }
            64% { transform: translate3d(calc(var(--box-shift, 8px) * 0.48), calc(var(--box-lift, 4px) * -0.48), 0) scale(calc(1 - (var(--box-squeeze, 0.05) * 0.7))) rotate(calc(var(--box-tilt, 2deg) * 0.38)); }
            82% { transform: translate3d(calc(var(--box-shift, 8px) * -0.32), calc(var(--box-lift, 4px) * -0.12), 0) scale(calc(1 - (var(--box-squeeze, 0.05) * 0.56))) rotate(calc(var(--box-tilt, 2deg) * -0.22)); }
            100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
        }

        @keyframes box-charge-release {
            0% { transform: translate3d(-4px, 1px, 0) scale(0.88) rotate(-1.8deg); }
            24% { transform: translate3d(6px, -7px, 0) scale(0.93) rotate(1.8deg); }
            54% { transform: translate3d(-2px, -10px, 0) scale(1.05) rotate(-0.9deg); }
            74% { transform: translate3d(0, 4px, 0) scale(0.98) rotate(0.25deg); }
            100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
        }

        @keyframes box-reset-bounce {
            0% { transform: translate3d(0, 14px, 0) scale(0.9); }
            58% { transform: translate3d(0, -6px, 0) scale(1.04); }
            82% { transform: translate3d(0, 2px, 0) scale(0.985); }
            100% { transform: translate3d(0, 0, 0) scale(1); }
        }

        #mysteryBoxWrapper.box-opening-stage-1 {
            --box-shift: 7px;
            --box-lift: 5px;
            --box-squeeze: 0.045;
            --box-tilt: 1.8deg;
            animation: box-charge-flow 0.98s cubic-bezier(0.42, 0, 0.22, 1) infinite;
        }

        #mysteryBoxWrapper.box-opening-stage-2 {
            --box-shift: 9px;
            --box-lift: 6px;
            --box-squeeze: 0.072;
            --box-tilt: 2.4deg;
            animation: box-charge-flow 0.74s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        #mysteryBoxWrapper.box-opening-stage-3 {
            animation: box-charge-release 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        #mysteryBoxWrapper.box-reset-bounce {
            animation: box-reset-bounce 0.56s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        /* 爱心气泡/盲盒呼吸灯效果 */
        .box-glow {
            filter: drop-shadow(0 0 15px rgba(244, 63, 94, 0.6));
            animation: pulse-glow 2.5s infinite ease-in-out;
        }

        @keyframes pulse-glow {
            0%, 100% { filter: drop-shadow(0 0 15px rgba(244, 63, 94, 0.5)); transform: scale(1); }
            50% { filter: drop-shadow(0 0 30px rgba(236, 72, 153, 0.9)); transform: scale(1.02); }
        }

        /* 盲盒抖动动画 */
        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1.5px, -2px) rotate(-1.5deg); }
            20% { transform: translate(-3px, 0px) rotate(1.5deg); }
            30% { transform: translate(0px, 2.5px) rotate(0deg); }
            40% { transform: translate(1.5px, -1px) rotate(1.5deg); }
            55% { transform: translate(-1px, 2px) rotate(-1.5deg); }
            70% { transform: translate(-3.5px, 1px) rotate(0deg); }
            80% { transform: translate(2.5px, 1px) rotate(-1.5deg); }
            90% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); }
            100% { transform: translate(1px, -2.5px) rotate(0deg); }
        }

        .shake-slow { animation: shake 0.5s infinite; }
        .shake-medium { animation: shake 0.25s infinite; }
        .shake-fast { animation: shake 0.1s infinite; }

        /* 慢速反向交织旋转的双轨星环 */
        .glowing-ring-outer {
            border: 1px dashed rgba(253, 224, 71, 0.15);
            border-radius: 50%;
            animation: rotate-ring-cw 25s linear infinite;
        }
        .glowing-ring-inner {
            border: 1px dashed rgba(244, 63, 94, 0.2);
            border-radius: 50%;
            animation: rotate-ring-ccw 18s linear infinite;
        }
        @keyframes rotate-ring-cw {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes rotate-ring-ccw {
            from { transform: rotate(360deg); }
            to { transform: rotate(0deg); }
        }

        /* 奖品卡弹出动画 */
        @keyframes card-pop {
            0% { transform: scale(0) rotate(-12deg); opacity: 0; filter: brightness(2); }
            70% { transform: scale(1.1) rotate(4deg); opacity: 1; filter: brightness(1.2); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
        }

        .prize-pop {
            animation: card-pop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        #prizeCard {
            width: min(18.5rem, calc(100vw - 2rem));
            max-width: 100%;
            perspective: 1200px;
        }

        #prizeFrame {
            --frame-collect-scale: 1;
            width: 10rem;
            height: 10rem;
            margin-bottom: 1rem;
            border-radius: 1rem;
            transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease, background-color 0.45s ease;
            transform-origin: center;
            isolation: isolate;
            transform: translate3d(0, 0, 0) scale(var(--frame-collect-scale));
        }

        #prizeFrameSheen {
            z-index: 3;
            opacity: 0.22;
            mix-blend-mode: screen;
            background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.08) 36%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.08) 64%, transparent 82%);
            transform: translate3d(-125%, 0, 0) skewX(-16deg);
            transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
            pointer-events: none;
        }

        #prizeFrame:hover #prizeFrameSheen,
        #prizeFrame.prize-frame-dragging #prizeFrameSheen,
        #prizeFrame.prize-frame-draggable:hover #prizeFrameSheen {
            opacity: 0.92;
            transform: translate3d(125%, 0, 0) skewX(-16deg);
        }

        #prizeFrameGlass,
        #prizeFrameReveal,
        #prizeFrameTilt,
        #prizeFrameMedia {
            transform-style: preserve-3d;
        }

        #prizeFrameGlass {
            z-index: 1;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background:
                radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 16%, transparent 30%),
                linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 24%, rgba(168, 85, 247, 0.08) 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -12px 24px rgba(17, 24, 39, 0.18);
            backdrop-filter: blur(12px);
            pointer-events: none;
        }

        #prizeFrameReveal {
            transition: filter 0.35s ease;
        }

        #prizeFrameTilt {
            z-index: 2;
            transform: perspective(1100px) rotateX(var(--drag-rotate-x, 0deg)) rotateY(var(--drag-rotate-y, 0deg)) scale(var(--drag-scale, 1));
            transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
        }

        #prizeFrameMedia {
            width: 100%;
            height: 100%;
        }

        #prizeEmojiContainer,
        #prizeImage {
            will-change: transform, filter;
            transition: transform 0.45s ease, filter 0.45s ease;
            position: relative;
            z-index: 2;
        }

        #prizeEmojiContainer {
            font-size: 5.25rem;
            line-height: 1;
            transform: translateZ(var(--prize-media-depth, 0px)) scale(var(--prize-media-scale, 1));
            filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.22));
        }

        #prizeImage {
            width: 8.25rem;
            height: 8.25rem;
            transform: translateZ(var(--prize-media-depth, 0px)) scale(var(--prize-media-scale, 1));
            filter: drop-shadow(0 0 12px rgba(15, 23, 42, 0.28));
        }

        #prizeCard.prize-rarity-n {
            --prize-media-scale: 1.02;
        }

        #prizeCard.prize-rarity-r {
            --prize-media-scale: 1.07;
        }

        #prizeCard.prize-rarity-sr {
            --prize-media-scale: 1.15;
            --prize-media-depth: 18px;
        }

        #prizeCard.prize-rarity-ssr {
            --prize-media-scale: 1.2;
            --prize-media-depth: 22px;
        }

        #prizeCard.prize-rarity-secret {
            --prize-media-scale: 1.24;
            --prize-media-depth: 28px;
        }

        @keyframes rare-halo-breathe {
            0%, 100% { opacity: 0.55; transform: scale(0.96); }
            50% { opacity: 0.9; transform: scale(1.08); }
        }

        @keyframes rare-sheen-sweep {
            0% { transform: translate3d(-120%, 0, 0) rotate(0deg); opacity: 0; }
            15% { opacity: 0.2; }
            55% { opacity: 0.55; }
            100% { transform: translate3d(120%, 0, 0) rotate(8deg); opacity: 0; }
        }

        @keyframes rare-ring-bloom {
            0%, 100% { transform: scale(0.95); opacity: 0.72; }
            50% { transform: scale(1.03); opacity: 1; }
        }

        @keyframes rare-frame-sheen-pulse {
            0%, 100% { opacity: 0.22; filter: brightness(1); }
            50% { opacity: 0.38; filter: brightness(1.1); }
        }

        @keyframes rare-prize-reveal {
            0% { transform: rotateX(-36deg) rotateY(-18deg) rotateZ(-56deg) scale(0.3); filter: brightness(2.1) saturate(1.25); }
            48% { transform: rotateX(18deg) rotateY(24deg) rotateZ(18deg) scale(1.12); filter: brightness(1.38) saturate(1.2); }
            76% { transform: rotateX(-10deg) rotateY(-14deg) rotateZ(-8deg) scale(0.97); filter: brightness(1.08) saturate(1.05); }
            100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); filter: brightness(1) saturate(1); }
        }

        #prizeCard.prize-rarity-sr,
        #prizeCard.prize-rarity-ssr,
        #prizeCard.prize-rarity-secret {
            overflow: visible;
        }

        #prizeFrame.prize-frame-sr,
        #prizeFrame.prize-frame-ssr,
        #prizeFrame.prize-frame-secret {
            box-shadow: 0 0 24px rgba(168, 85, 247, 0.28), inset 0 0 20px rgba(216, 180, 254, 0.08);
        }

        #prizeFrame.prize-frame-sr::before,
        #prizeFrame.prize-frame-ssr::before,
        #prizeFrame.prize-frame-secret::before {
            content: '';
            position: absolute;
            pointer-events: none;
        }

        #prizeFrame.prize-frame-sr::before,
        #prizeFrame.prize-frame-ssr::before,
        #prizeFrame.prize-frame-secret::before {
            inset: -12%;
            border-radius: inherit;
            z-index: 0;
            animation: rare-halo-breathe 1.7s ease-in-out infinite;
        }

        #prizeCard.prize-rarity-sr::after,
        #prizeCard.prize-rarity-ssr::after,
        #prizeCard.prize-rarity-secret::after {
            content: none;
        }

        #prizeFrame.prize-frame-sr {
            background: radial-gradient(circle at center, rgba(76, 29, 149, 0.88) 0%, rgba(46, 16, 101, 0.9) 100%);
            border-color: rgba(192, 132, 252, 0.48);
            box-shadow: 0 0 24px rgba(168, 85, 247, 0.28), inset 0 0 20px rgba(216, 180, 254, 0.08);
        }

        #prizeFrame.prize-frame-sr::before {
            background: radial-gradient(circle, rgba(192, 132, 252, 0.42) 0%, rgba(168, 85, 247, 0.18) 48%, rgba(168, 85, 247, 0) 72%);
        }

        #prizeFrame.prize-frame-ssr {
            background: radial-gradient(circle at center, rgba(136, 19, 55, 0.92) 0%, rgba(74, 10, 54, 0.95) 56%, rgba(24, 24, 27, 0.98) 100%);
            border-color: rgba(251, 113, 133, 0.62);
            box-shadow: 0 0 34px rgba(244, 63, 94, 0.38), 0 0 52px rgba(251, 191, 36, 0.16), inset 0 0 24px rgba(255, 228, 230, 0.12);
        }

        #prizeFrame.prize-frame-ssr::before {
            background: radial-gradient(circle, rgba(251, 113, 133, 0.44) 0%, rgba(251, 191, 36, 0.22) 40%, rgba(251, 113, 133, 0) 72%);
        }

        #prizeFrame.prize-frame-secret {
            background: radial-gradient(circle at center, rgba(28, 25, 23, 0.95) 0%, rgba(10, 10, 10, 0.98) 68%, rgba(3, 7, 18, 1) 100%);
            border-color: rgba(251, 191, 36, 0.8);
            box-shadow: 0 0 42px rgba(245, 158, 11, 0.48), 0 0 72px rgba(253, 224, 71, 0.18), inset 0 0 28px rgba(255, 251, 235, 0.12);
        }

        #prizeFrame.prize-frame-secret::before {
            background: radial-gradient(circle, rgba(253, 224, 71, 0.48) 0%, rgba(245, 158, 11, 0.25) 42%, rgba(245, 158, 11, 0) 76%);
        }

        #prizeFrame.prize-frame-sr #prizeFrameGlass,
        #prizeFrame.prize-frame-ssr #prizeFrameGlass,
        #prizeFrame.prize-frame-secret #prizeFrameGlass {
            animation: rare-frame-sheen-pulse 1.9s ease-in-out infinite;
        }

        #prizeFrame.prize-frame-draggable {
            cursor: grab;
            touch-action: pan-y;
        }

        #prizeFrame.prize-frame-dragging {
            cursor: grabbing;
        }

        #prizeFrame.prize-frame-draggable #prizeFrameGlass {
            border-color: rgba(255, 255, 255, 0.18);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                inset 0 -18px 30px rgba(17, 24, 39, 0.24),
                0 16px 30px rgba(15, 23, 42, 0.18);
        }

        #prizeFrameReveal.rare-reveal {
            animation: rare-prize-reveal 0.95s cubic-bezier(0.22, 1, 0.36, 1);
        }

        #prizeFrame.prize-frame-collecting {
            --frame-collect-scale: 0.72;
        }

        #prizeCard.prize-card-collecting {
            transform: scale(0.88) translateY(16px);
            opacity: 0.84;
        }

        #prizeCard.prize-rarity-sr #prizeEmojiContainer,
        #prizeCard.prize-rarity-sr #prizeImage {
            filter: drop-shadow(0 0 14px rgba(216, 180, 254, 0.34));
        }

        #prizeCard.prize-rarity-ssr #prizeEmojiContainer,
        #prizeCard.prize-rarity-ssr #prizeImage {
            filter: drop-shadow(0 0 18px rgba(251, 113, 133, 0.4)) drop-shadow(0 0 24px rgba(251, 191, 36, 0.14));
        }

        #prizeCard.prize-rarity-secret #prizeEmojiContainer,
        #prizeCard.prize-rarity-secret #prizeImage {
            filter: drop-shadow(0 0 20px rgba(253, 224, 71, 0.46)) drop-shadow(0 0 28px rgba(245, 158, 11, 0.2));
        }

        #raysBackground.rays-rare-sr,
        #raysBackground.rays-rare-ssr,
        #raysBackground.rays-rare-secret {
            animation: rare-ring-bloom 2.4s ease-in-out infinite;
            transform-origin: center;
        }

        #raysBackground.rays-rare-sr {
            filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.22));
        }

        #raysBackground.rays-rare-sr .glowing-ring-outer {
            border-color: rgba(192, 132, 252, 0.3);
            animation-duration: 18s;
        }

        #raysBackground.rays-rare-sr .glowing-ring-inner {
            border-color: rgba(216, 180, 254, 0.36);
            animation-duration: 12s;
        }

        #raysBackground.rays-rare-ssr {
            filter: drop-shadow(0 0 26px rgba(244, 63, 94, 0.28)) drop-shadow(0 0 18px rgba(250, 204, 21, 0.14));
        }

        #raysBackground.rays-rare-ssr .glowing-ring-outer {
            border-color: rgba(251, 113, 133, 0.32);
            animation-duration: 14s;
        }

        #raysBackground.rays-rare-ssr .glowing-ring-inner {
            border-color: rgba(253, 224, 71, 0.32);
            animation-duration: 9s;
        }

        #raysBackground.rays-rare-secret {
            filter: drop-shadow(0 0 34px rgba(245, 158, 11, 0.32)) drop-shadow(0 0 28px rgba(253, 224, 71, 0.2));
        }

        #raysBackground.rays-rare-secret .glowing-ring-outer {
            border-color: rgba(253, 224, 71, 0.38);
            animation-duration: 10s;
        }

        #raysBackground.rays-rare-secret .glowing-ring-inner {
            border-color: rgba(245, 158, 11, 0.42);
            animation-duration: 6.5s;
        }

        /* 稀有度发光颜色 */
        .glow-secret { filter: drop-shadow(0 0 25px rgba(245, 158, 11, 0.95)); }
        .glow-ssr { filter: drop-shadow(0 0 20px rgba(244, 63, 94, 0.9)); }
        .glow-sr { filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.85)); }
        .glow-r { filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.8)); }
        .glow-n { filter: drop-shadow(0 0 8px rgba(156, 163, 175, 0.5)); }

        .floating-item-node {
            will-change: transform, opacity;
        }

        /* 飞入背包过程中的物理弹性过度效果 */
        .flyer-particle {
            will-change: transform, opacity;
        }

        @media (prefers-reduced-motion: reduce) {
            .box-glow,
            .glowing-ring-outer,
            .glowing-ring-inner,
            #prizeFrame.prize-frame-sr::before,
            #prizeFrame.prize-frame-ssr::before,
            #prizeFrame.prize-frame-secret::before,
            #prizeFrame.prize-frame-sr #prizeFrameGlass,
            #prizeFrame.prize-frame-ssr #prizeFrameGlass,
            #prizeFrame.prize-frame-secret #prizeFrameGlass,
            #raysBackground.rays-rare-sr,
            #raysBackground.rays-rare-ssr,
            #raysBackground.rays-rare-secret,
            #mysteryBoxWrapper.box-opening-stage-1,
            #mysteryBoxWrapper.box-opening-stage-2,
            #mysteryBoxWrapper.box-opening-stage-3,
            #mysteryBoxWrapper.box-reset-bounce {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }

            #prizeFrameTilt,
            #prizeCard,
            #prizeFrame {
                transition-duration: 0.2s;
            }
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(30, 10, 31, 0.5);
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(244, 63, 94, 0.4);
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(244, 63, 94, 0.7);
        }

        #backpackBtn {
            bottom: 2rem;
        }

        #toggleBgmBtn.bgm-active {
            box-shadow: 0 0 0 1px rgba(251, 113, 133, 0.32), 0 12px 28px rgba(236, 72, 153, 0.22);
        }

        #toggleBgmBtn.bgm-active #bgmIcon {
            animation: pulse-glow 2s ease-in-out infinite;
        }

        /* 手机竖屏适配：保守覆盖现有桌面视觉 */
        @media (max-width: 767px) {
            body {
                overflow-x: clip;
            }

            header {
                padding: 0.75rem 0.875rem;
                gap: 0.625rem;
                min-height: 4rem;
                align-items: center;
            }

            header > div,
            main,
            #configPanel,
            #backpackModal > div {
                min-width: 0;
            }

            header > div:first-child {
                flex: 1 1 auto;
                width: auto;
                min-width: 0;
                align-items: center;
            }

            header > div:first-child > div:last-child {
                min-width: 0;
            }

            header > div:first-child > div:last-child > span:first-child {
                display: block;
                font-size: 0.96rem;
                line-height: 1.2;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            header > div:first-child > div:last-child > span:last-child {
                display: none;
            }

            header > div:first-child > div:first-child {
                padding: 0.72rem;
                border-radius: 0.95rem;
            }

            #headerActions {
                flex: 0 0 auto;
                width: auto;
                gap: 0.45rem;
                flex-wrap: nowrap;
                justify-content: flex-end;
                align-items: center;
            }

            #coinBadge,
            #toggleBgmBtn,
            #toggleConfigBtn {
                width: 2.6rem;
                height: 2.6rem;
                min-width: 2.6rem;
                padding: 0;
                border-radius: 0.85rem;
                justify-content: center;
                position: relative;
                overflow: visible;
            }

            #coinBadge {
                background: linear-gradient(160deg, rgba(80, 7, 36, 0.96) 0%, rgba(157, 23, 77, 0.82) 100%);
                box-shadow: 0 10px 24px rgba(244, 63, 94, 0.14);
                flex-direction: column;
                gap: 0.08rem;
            }

            #coinBadge i,
            #toggleBgmBtn i,
            #toggleConfigBtn i {
                font-size: 0.98rem;
                margin: 0;
            }

            #coinBadge .coin-label,
            #toggleBgmBtn .bgm-btn-text,
            #toggleConfigBtn .config-btn-text {
                display: none;
            }

            #coinCount {
                position: absolute;
                left: 50%;
                bottom: -0.72rem;
                transform: translateX(-50%);
                min-width: 1.55rem;
                height: 0.9rem;
                padding: 0 0.22rem;
                border-radius: 999px;
                background: rgba(17, 24, 39, 0.86);
                color: #ffe4ef;
                font-size: 0.53rem;
                line-height: 0.9rem;
                text-align: center;
                box-shadow: 0 0 0 1px rgba(251, 113, 133, 0.34), 0 4px 10px rgba(0, 0, 0, 0.25);
                z-index: 2;
            }

            main {
                width: 100%;
                padding: 0.9rem 0.875rem calc(6.8rem + env(safe-area-inset-bottom, 0px));
                gap: 0.95rem;
                align-items: stretch;
                overflow-x: clip;
            }

            main > div:first-child {
                width: 100%;
                min-height: auto;
            }

            main > div:first-child > div:last-child {
                width: 100%;
                height: auto;
                min-height: 4rem;
            }

            #energyContainer {
                width: min(16rem, 100%);
                margin-top: 1rem;
            }

            #mysteryBoxWrapper {
                width: min(100%, 18rem);
                height: min(100vw - 2.5rem, 18rem);
                min-height: 16rem;
                margin-inline: auto;
            }

            #floatingOrbitContainer {
                width: min(100%, 18rem);
                height: 11.2rem;
                bottom: 7rem;
            }

            #floatingOrbitContainer::before {
                inset: 10px 6px 22px;
            }

            #floatingOrbitContainer::after {
                width: 78%;
                height: 17%;
                bottom: 8px;
            }

            #glowCircle {
                width: 12rem;
                height: 12rem;
            }

            #raysBackground {
                width: min(21rem, calc(100vw - 1rem));
                height: min(21rem, calc(100vw - 1rem));
            }

            #raysBackground .glowing-ring-outer {
                width: 100%;
                height: 100%;
            }

            #raysBackground .glowing-ring-inner {
                width: 78%;
                height: 78%;
            }

            #boxSvg {
                width: 12.5rem;
                height: 12.5rem;
            }

            #prizeCard {
                width: min(17rem, calc(100vw - 1.5rem));
                max-width: 100%;
                padding: 1rem 0.875rem;
            }

            #prizeFrame {
                width: 8.75rem;
                height: 8.75rem;
                margin-bottom: 0.8rem;
            }

            #prizeEmojiContainer {
                font-size: 4.25rem;
            }

            #prizeImage {
                width: 7.1rem;
                height: 7.1rem;
            }

            #prizeName {
                font-size: 1rem;
                line-height: 1.4;
            }

            #prizeDesc,
            #tipText {
                line-height: 1.5;
            }

            #tipText {
                padding-inline: 0.5rem;
            }

            #actionBtnContainer {
                width: 100%;
                flex-direction: row;
                gap: 0.55rem;
                padding-inline: 0;
                align-items: center;
                justify-content: center;
                flex-wrap: nowrap;
            }

            #actionBtnContainer button {
                flex: 1 1 0;
                min-width: 0;
                justify-content: center;
                padding: 0.78rem 0.6rem;
                font-size: 0.78rem;
                letter-spacing: 0.02em;
            }

            #configPanel {
                padding: 1rem;
            }

            #configPanel > div {
                width: 100%;
                max-width: 100%;
                max-height: min(72vh, 42rem);
                padding: 1rem;
                border-radius: 1.25rem;
            }

            #addPrizeForm {
                padding: 0.875rem;
                margin-bottom: 1rem;
            }

            #addPrizeForm .grid {
                grid-template-columns: minmax(0, 1fr) !important;
            }

            #addPrizeForm .grid > * {
                grid-column: auto !important;
            }

            #addPrizeForm .flex.gap-2 {
                flex-direction: column;
            }

            #addPrizeForm input,
            #addPrizeForm select,
            #addPrizeForm textarea,
            #addPrizeForm button {
                min-height: 2.75rem;
            }

            #prizeListContainer {
                max-height: 40vh;
            }

            #backpackBtn {
                right: 0.6rem;
                bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px));
                max-width: none;
                padding: 0.56rem;
                border-radius: 0.95rem;
                gap: 0;
                box-shadow: 0 16px 28px rgba(31, 6, 37, 0.38);
            }

            #backpackBtn > div:first-child > div {
                padding: 0.7rem;
                border-radius: 0.85rem;
            }

            #backpackBtn i {
                font-size: 0.95rem;
            }

            #backpackCount {
                transform: scale(0.86);
                transform-origin: top right;
            }

            #backpackModal {
                padding: 0.75rem;
                align-items: center;
            }

            #backpackModal > div {
                width: 100%;
                max-width: 100%;
                max-height: min(84vh, 44rem);
                padding: 1rem;
                border-radius: 1.25rem;
            }

            #backpackModal h2 {
                font-size: 1rem;
                line-height: 1.4;
            }

            #backpackItemsContainer {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.75rem;
            }

            #backpackDetailPanel {
                min-height: 0;
            }

            #backpackModal > div > div:last-child {
                gap: 0.75rem;
                flex-direction: column;
                align-items: flex-start;
            }

            footer {
                padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
                font-size: 0.68rem;
            }
        }

        @media (max-width: 479px) {
            header {
                padding: 0.68rem 0.72rem;
            }

            header > div:first-child {
                gap: 0.625rem;
            }

            #headerActions {
                gap: 0.4rem;
            }

            #coinBadge,
            #toggleBgmBtn,
            #toggleConfigBtn {
                width: 2.35rem;
                height: 2.35rem;
                min-width: 2.75rem;
                min-height: 2.75rem;
            }

            #coinCount {
                bottom: -0.68rem;
                min-width: 1.35rem;
                height: 0.82rem;
                font-size: 0.46rem;
                line-height: 0.82rem;
            }

            main {
                padding-inline: 0.75rem;
                gap: 0.85rem;
            }

            #mysteryBoxWrapper {
                width: min(100%, 16.5rem);
                height: min(calc(100vw - 2rem), 16.5rem);
                min-height: 15rem;
            }

            #floatingOrbitContainer {
                width: min(100%, 16.5rem);
                height: 10rem;
                bottom: 6.1rem;
            }

            #floatingOrbitContainer::before {
                inset: 8px 4px 18px;
            }

            #floatingOrbitContainer::after {
                width: 82%;
                bottom: 6px;
            }

            #boxSvg {
                width: 11rem;
                height: 11rem;
            }

            #prizeCard {
                width: min(15.25rem, calc(100vw - 1rem));
                padding: 0.875rem 0.75rem;
            }

            #prizeFrame {
                width: 7.75rem;
                height: 7.75rem;
            }

            #prizeEmojiContainer {
                font-size: 3.75rem;
            }

            #prizeImage {
                width: 6.35rem;
                height: 6.35rem;
            }

            #actionBtnContainer {
                gap: 0.45rem;
            }

            #actionBtnContainer button {
                font-size: 0.72rem;
                padding: 0.72rem 0.45rem;
            }

            #configPanel {
                padding: 0.875rem 0.75rem;
            }

            #configPanel > div {
                padding: 0.875rem;
            }

            #backpackBtn .text-left {
                display: none;
            }

            #backpackBtn {
                right: 0.5rem;
                bottom: calc(3.55rem + env(safe-area-inset-bottom, 0px));
                padding: 0.48rem;
            }

            #backpackModal {
                padding: 0.5rem;
            }

            #backpackModal > div {
                padding: 0.875rem;
            }

            #backpackItemsContainer {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.55rem;
            }
        }