:root { --bg-gradient: radial-gradient(circle at center, #1a0b1a 0%, #000000 100%); }
        body { 
            margin: 0; overflow: hidden; 
            background-color: #000000; background-image: var(--bg-gradient); 
            font-family: 'Noto Serif SC', serif; color: white; 
            user-select: none; -webkit-tap-highlight-color: transparent;
            touch-action: none;
        }
        #canvas-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; cursor: grab; }
        #canvas-container:active { cursor: grabbing; }
        
        /* 翻转卡片 */
        .flip-card { background-color: transparent; perspective: 1000px; }
        .flip-card-inner {
            position: relative; width: 100%; height: 100%; text-align: center;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
        }
        .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
        .flip-card-front, .flip-card-back {
            position: absolute; width: 100%; height: 100%;
            -webkit-backface-visibility: hidden; backface-visibility: hidden;
            border-radius: 1.2rem; overflow: hidden;
        }
        .flip-card-back { transform: rotateY(180deg); }

        /* UI 层 */
        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; box-sizing: border-box; transition: opacity 0.5s; }
        .interactive-element { pointer-events: auto; cursor: pointer; }
        .input_video { display: none; }
        .glass-panel { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); }
        
        /* 启动页样式 */
        #start-overlay { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.6); 
            z-index: 9999; 
            display: flex; justify-content: center; align-items: center; 
            pointer-events: auto;
            transition: opacity 0.8s ease, visibility 0.8s;
        }
        #start-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
        
        .start-card {
            background: rgba(20, 10, 20, 0.75);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 105, 180, 0.3);
            box-shadow: 0 0 50px rgba(255, 105, 180, 0.2);
        }

        #blow-meter-container { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); width: 280px; height: 12px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; opacity: 0; transition: opacity 0.5s; }
        #blow-meter-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #ff9a9e 0%, #ff69b4 100%); border-radius: 10px; transition: width 0.1s linear; box-shadow: 0 0 15px #ff69b4; }
        #blow-hint { position: absolute; bottom: 18%; width: 100%; text-align: center; font-size: 14px; color: rgba(255,255,255,0.8); text-shadow: 0 2px 4px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.5s; }

        #surprise-layer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 80; pointer-events: none; transition: background 0.5s ease; }
        #surprise-layer.hidden { display: none !important; }
        #surprise-layer.active { pointer-events: auto; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }

        .font-handwriting { font-family: 'Dancing Script', cursive; }
        .pop-in { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        .safe-click-area { z-index: 90; position: relative; touch-action: manipulation; }
        .neon-text { text-shadow: 0 0 10px rgba(255,105,180,0.7), 0 0 20px rgba(255,105,180,0.5); }

        #floating-gift-btn {
            position: absolute; bottom: 30px; right: 30px; z-index: 200; width: 60px; height: 60px; border-radius: 50%;
            background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 105, 180, 0.5);
            display: flex; justify-content: center; align-items: center; font-size: 30px; cursor: pointer;
            box-shadow: 0 0 20px rgba(255, 105, 180, 0.4); animation: float-btn 3s ease-in-out infinite;
            transition: transform 0.3s, background 0.3s; pointer-events: auto;
        }
        #floating-gift-btn:hover { transform: scale(1.1) rotate(10deg); background: rgba(255, 105, 180, 0.3); }
        #floating-gift-btn.hidden { display: none !important; }
        @keyframes float-btn { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

        #settings-panel {
            position: absolute; top: 80px; right: 20px; width: 140px;
            background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
            padding: 15px; z-index: 50; display: none; 
            flex-direction: column; gap: 10px; pointer-events: auto;
        }
        .color-control { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #ddd; }
        .color-control input { width: 30px; height: 20px; border: none; border-radius: 4px; cursor: pointer; background: transparent; }

        #top-banner {
            position: absolute; top: 15%; left: 0; width: 100%;
            text-align: center; pointer-events: none; z-index: 5;
            animation: float-banner 4s ease-in-out infinite;
        }
        #top-banner.hidden { display: none !important; }
        .banner-text {
            font-family: 'Dancing Script', cursive;
            background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4, #a18cd1, #fbc2eb);
            -webkit-background-clip: text; background-clip: text; color: transparent;
            filter: drop-shadow(0 0 10px rgba(255,192,203,0.8));
        }
        @keyframes float-banner { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

        #protocol-warning {
            position: fixed; top: 0; left: 0; width: 100%; background: #ff4444; color: white;
            text-align: center; padding: 10px; z-index: 10000; font-size: 14px; display: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }
        
        #cam-preview-container {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #cam-preview-container:hover {
            transform: scale(1.05);
            opacity: 1;
        }
        
        @keyframes neon-pulse {
            0%, 100% { text-shadow: 0 0 10px rgba(255,105,180,0.7), 0 0 20px rgba(255,105,180,0.5); }
            50% { text-shadow: 0 0 20px rgba(255,105,180,0.9), 0 0 30px rgba(255,105,180,0.7), 0 0 40px rgba(255,105,180,0.5); }
        }
        .neon-pulse { animation: neon-pulse 2s infinite; }

        /* 隐藏的日志容器 */
        #debug-console { display: none; }

        /* 滚动文字区域样式 */
        .scrollable-text {
            max-height: 240px; /* 限制高度 */
            overflow-y: auto;  /* 允许垂直滚动 */
            padding-right: 10px; /* 给滚动条留点空 */
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: rgba(255,105,180,0.5) transparent; /* Firefox */
        }
        /* Chrome/Safari 滚动条样式 */
        .scrollable-text::-webkit-scrollbar {
            width: 4px;
        }
        .scrollable-text::-webkit-scrollbar-track {
            background: transparent;
        }
        .scrollable-text::-webkit-scrollbar-thumb {
            background-color: rgba(255, 105, 180, 0.5);
            border-radius: 10px;
        }