/* ==========================================
           🎨 视图层：style.css (糖果色与特效样式)
           ========================================== */
        :root {
            --bg-cream: #FFF9F0; --macaron-pink: #F7C5D0; --macaron-pink-dark: #E0A5B3; 
            --macaron-blue: #C2E0F9; --macaron-blue-dark: #A3C8E6; --macaron-yellow: #FDFD96;
            --text-taro: #776677; --radius-big: 24px; --radius-pill: 50px;
            --shadow-soft-pink: 0 10px 30px rgba(247, 197, 208, 0.4);
        }

        body {
            background-color: var(--bg-cream); color: var(--text-taro);
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            display: flex; justify-content: center; align-items: center;
            height: 100vh; margin: 0; overflow: hidden;
            background-image: radial-gradient(var(--macaron-pink) 8%, transparent 8%);
            background-size: 35px 35px;
            transition: filter 0.1s ease-in-out; 
        }

        .game-container {
            background: #ffffff; width: 90%; max-width: 500px; min-height: 400px;
            padding: 40px 30px; border-radius: var(--radius-big);
            box-shadow: var(--shadow-soft-pink); border: 4px solid var(--macaron-pink);
            text-align: center; position: absolute;
            transition: opacity 1.5s ease-in-out;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
        }

        .hidden { display: none !important; opacity: 0; pointer-events: none; }

        .title { color: var(--macaron-pink-dark); font-size: 26px; margin-bottom: 20px; text-shadow: 2px 2px 0px #fff, 4px 4px 0px var(--macaron-blue); }
        .title.evil-mode { color: #d32f2f; text-shadow: 2px 2px 0px #000, 4px 4px 0px #5a0000; }
        .question-text { font-size: 18px; font-weight: bold; margin-bottom: 25px; line-height: 1.5; }

        /* 按钮与输入框 */
        input.fan-input { width: 80%; padding: 15px; border: 3px dashed var(--macaron-blue); border-radius: var(--radius-pill); text-align: center; outline: none; margin-bottom: 20px; font-size: 18px; }
        .btn { width: 85%; padding: 15px; margin: 8px 0; font-size: 16px; font-weight: bold; color: var(--text-taro); background-color: var(--macaron-blue); border: none; border-radius: var(--radius-pill); cursor: pointer; transition: all 0.1s; box-shadow: 0 6px 0 var(--macaron-blue-dark); display: flex; align-items: center; justify-content: center;}
        .btn:hover { background-color: var(--macaron-yellow); transform: translateY(-2px); }
        .btn:active { transform: translateY(6px); box-shadow: 0 0px 0 var(--macaron-blue-dark); }
        .btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }

        /* 选项布局容器 */
        #optionsContainer { width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; }

        /* 💀 几何大圆点鬼脸遮罩 */
        #ghostOverlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 9999; display: flex; justify-content: center; align-items: center;
            pointer-events: none;
        }
        .ghost-face { position: relative; width: 200px; height: 300px; }
        .ghost-eye { position: absolute; width: 70px; height: 70px; background: #222; border-radius: 50%; top: 50px; }
        .ghost-eye.left { left: 10px; }
        .ghost-eye.right { right: 10px; }
        .ghost-mouth { position: absolute; width: 90px; height: 120px; background: #222; border-radius: 50%; bottom: 30px; left: 55px; }

        /* 消息吐司提示 (Toast) */
        #toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #ff4d4f; color: white; padding: 10px 20px; border-radius: 20px; font-weight: bold; z-index: 10000; opacity: 0; transition: opacity 0.3s; }