/* ========================================
   🌈 寶寶學習樂園 - 設計系統
   專為2歲幼兒設計的可愛互動介面
   ======================================== */

/* ----- CSS 變數 (Design Tokens) ----- */
:root {
    /* 主色調 - 活潑溫暖 */
    --color-primary: #FF6B6B;
    /* 珊瑚紅 */
    --color-primary-dark: #E85555;
    --color-secondary: #4ECDC4;
    /* 薄荷綠 */
    --color-secondary-dark: #3DB9B0;
    --color-accent: #FFE66D;
    /* 陽光黃 */
    --color-accent-dark: #F5D952;

    /* 背景色 */
    --color-bg: #FFF8E7;
    /* 溫暖米白 */
    --color-bg-alt: #E8F4F8;
    /* 淺藍灰 */
    --color-bg-game: #FFEFD5;
    /* 淺橙 */

    /* 6色教學用色 */
    --color-red: #FF6B6B;
    --color-blue: #45B7D1;
    --color-yellow: #FFE66D;
    --color-green: #7DC95E;
    --color-orange: #FF9F43;
    --color-purple: #A55EEA;
    --color-pink: #FF8ED4;

    /* 文字顏色 */
    --color-text: #2D3436;
    --color-text-light: #636E72;
    --color-text-white: #FFFFFF;

    /* 間距系統 */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;

    /* 字體大小 (2歲幼兒需大字體) */
    --font-size-mega: 72px;
    --font-size-huge: 48px;
    --font-size-large: 36px;
    --font-size-medium: 28px;
    --font-size-base: 24px;

    /* 圓角系統 */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-full: 50%;

    /* 陰影系統 */
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-button: 0 6px 0 rgba(0, 0, 0, 0.15);
    --shadow-button-pressed: 0 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.1);

    /* 動畫時間 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* 觸控區最小尺寸 (2歲幼兒需 80px+) */
    --touch-target-min: 80px;
    --touch-gap: 24px;

    /* 注音符號字體大小 */
    --ruby-size: 0.5em;

    /* 📱 動態視窗高度 (由 JS 設置) */
    --app-height: 100vh;
}

/* ----- Reset & Base Styles ----- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: 'Noto Sans TC', 'Segoe UI', sans-serif;
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* 防止長按彈出選單 (幼兒常長按) */
body {
    -webkit-touch-callout: none;
}

/* ----- 注音符號 (Ruby Annotation) ----- */
/* 重要：只設置最基本的屬性，讓瀏覽器原生處理注音對齊 */
ruby {
    ruby-position: over;
}

rt {
    font-size: 10px;
    color: #888;
    font-weight: 400;
}

rp {
    display: none;
}

/* 提示文字和標題需要額外行高給注音空間 */
.game-prompt,
.splash-title,
.menu-title,
.card-title {
    line-height: 2.2;
}

/* ----- App Container ----- */
#app {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* ----- Screen System ----- */
.screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-md);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    z-index: 1;
    pointer-events: none;
}

.screen.active {
    display: flex;
    opacity: 1;
    transform: scale(1);
    z-index: 10;
    pointer-events: auto;
}

/* ----- 開場畫面 ----- */
#splash-screen {
    background: linear-gradient(135deg, var(--color-bg) 0%, #FFE4E1 100%);
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    /* 動態視窗高度，更準確 */
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    text-align: center;
    z-index: 1;
}

.splash-mascot {
    font-size: 120px;
    animation: bounce 2s ease-in-out infinite;
}

/* 🎭 互動角色舞台 */
.character-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(227, 242, 253, 0.8) 100%);
    border-radius: 24px;
    box-shadow:
        0 8px 32px rgba(100, 181, 246, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
}

.character-stage svg {
    width: 160px;
    height: 160px;
}

/* 🦉 全局陪伴者（Global Companion）*/
.rive-companion {
    position: fixed;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* 彈性飛行過渡動畫 */
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: transparent !important;
    pointer-events: none;
}

.rive-companion canvas {
    background: transparent !important;
    border-radius: 16px;
}

.companion-name {
    font-size: 16px;
    font-weight: 700;
    color: #1976d2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: font-size 0.8s ease;
}

/* 狀態 A：首頁中心上方 */
.rive-companion.pos-home {
    top: 2%;
    /* 更高的位置 */
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(1);
}

.rive-companion.pos-home canvas {
    width: 220px;
    height: 220px;
}

.rive-companion.pos-home .companion-name {
    font-size: 18px;
}

/* 狀態 B：選單頁右下角 */
.rive-companion.pos-menu {
    top: auto;
    bottom: 80px;
    left: auto;
    right: 20px;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* 飛行結束後的浮動動畫 */
.rive-companion.pos-menu.floating {
    animation: floatBounce 3s ease-in-out infinite;
}

.rive-companion.pos-menu canvas {
    width: 220px;
    height: 220px;
}

.rive-companion.pos-menu .companion-name {
    font-size: 18px;
}

/* 狀態 C：遊戲頁右下角 */
.rive-companion.pos-game {
    top: auto;
    bottom: 20px;
    left: auto;
    right: 20px;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    animation: floatBounce 3s ease-in-out infinite;
}

.rive-companion.pos-game canvas {
    width: 220px;
    height: 220px;
}

.rive-companion.pos-game .companion-name {
    font-size: 18px;
}

/* 原有角色舞台（保留給其他用途）*/
.character-name {
    font-size: 18px;
    font-weight: 700;
    color: #1976d2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 小象閒置動畫 */
@keyframes boboIdle {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-3px) rotate(-1deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(-2px) rotate(1deg);
    }
}

/* 耳朵動畫過渡 */
#bobo-ear-l,
#bobo-ear-r {
    transition: transform 0.15s ease-out;
}

/* 眼睛眨眼過渡 */
#bobo-eye-l,
#bobo-eye-r {
    transition: ry 0.1s ease;
}

/* 嘴巴動畫過渡 */
#bobo-mouth {
    transition: d 0.05s ease-out;
}

/* 瞳孔追蹤過渡 */
#bobo-pupil-l,
#bobo-pupil-r,
#menu-bobo-pupil-l,
#menu-bobo-pupil-r {
    transition: cx 0.1s ease-out, cy 0.1s ease-out;
}

/* 浮動彈跳動畫 */
@keyframes floatBounce {

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

    50% {
        transform: translateY(-8px);
    }
}

/* 主選單版本的動畫過渡 */
#menu-bobo-ear-l,
#menu-bobo-ear-r {
    transition: transform 0.15s ease-out;
}

#menu-bobo-eye-l,
#menu-bobo-eye-r {
    transition: ry 0.1s ease;
}

#menu-bobo-mouth {
    transition: d 0.05s ease-out;
}

.splash-title {
    font-size: var(--font-size-mega);
    font-weight: 900;
    color: var(--color-primary);
    text-shadow: 3px 3px 0 var(--color-accent);
    letter-spacing: 4px;
}

.splash-subtitle {
    font-size: var(--font-size-large);
    color: var(--color-text-light);
}

/* 裝飾元素 */
.decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.deco {
    position: absolute;
    font-size: 48px;
    opacity: 0.6;
    animation: float 3s ease-in-out infinite;
}

.deco-1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.deco-2 {
    top: 20%;
    right: 15%;
    animation-delay: 0.5s;
}

.deco-3 {
    bottom: 25%;
    left: 8%;
    animation-delay: 1s;
}

.deco-4 {
    bottom: 15%;
    right: 12%;
    animation-delay: 1.5s;
}

.deco-5 {
    top: 50%;
    right: 5%;
    animation-delay: 2s;
}

/* ----- 主選單 ----- */
#main-menu {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
    padding-top: var(--spacing-xl);
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 100px;
    /* 為家長按鈕留空間 */
    justify-content: flex-start;
    /* 內容從頂部開始，不置中 */
}

.menu-header {
    margin-bottom: var(--spacing-lg);
}

.menu-title {
    font-size: var(--font-size-huge);
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

/* ========================================
   精美數字時鐘 - 主選單頂部裝飾
   ======================================== */
.premium-clock {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 10;
}

.clock-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 28px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.9) 50%,
            rgba(255, 255, 255, 0.85) 100%);
    border-radius: 24px;
    border: 3px solid rgba(255, 230, 109, 0.6);
    box-shadow:
        0 8px 32px rgba(255, 159, 67, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* 背景發光效果 */
.clock-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%,
            rgba(255, 230, 109, 0.2) 0%,
            rgba(255, 159, 67, 0.1) 30%,
            transparent 60%);
    pointer-events: none;
    animation: clockGlowPulse 4s ease-in-out infinite;
}

@keyframes clockGlowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.clock-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 1;
}

.clock-digit {
    font-size: 56px;
    font-weight: 800;
    font-family: 'Segoe UI', 'SF Pro Display', -apple-system, sans-serif;
    background: linear-gradient(180deg,
            #FF6B6B 0%,
            #FF9F43 50%,
            #FFE66D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.3));
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}

.clock-colon {
    font-size: 48px;
    font-weight: 800;
    color: #FF9F43;
    animation: colonBlink 1s ease-in-out infinite;
    margin: 0 2px;
}

@keyframes colonBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.3;
    }
}

.clock-period {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #4ECDC4 0%, #45B7D1 100%);
    padding: 4px 14px;
    border-radius: 20px;
    margin-top: 8px;
    letter-spacing: 2px;
    box-shadow: 0 3px 10px rgba(78, 205, 196, 0.3);
    z-index: 1;
}

/* 手機響應式 */
@media (max-width: 480px) {
    .clock-frame {
        padding: 12px 20px;
    }

    .clock-digit {
        font-size: 42px;
    }

    .clock-colon {
        font-size: 36px;
    }

    .clock-period {
        font-size: 14px;
        padding: 3px 10px;
    }
}

/* ========================================
   左側故事面板 - 伊索寓言小故事
   ======================================== */
.stories-panel {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 248, 231, 0.95) 100%);
    border-radius: 24px;
    border: 3px solid rgba(255, 159, 67, 0.5);
    box-shadow:
        0 12px 40px rgba(255, 107, 107, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 2px 4px rgba(255, 255, 255, 0.9);
    padding: 18px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stories-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px dashed rgba(255, 159, 67, 0.4);
}

.stories-icon {
    font-size: 32px;
}

.stories-title {
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF9F43 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stories-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.story-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #4ECDC4 0%, #45B7D1 100%);
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 12px rgba(78, 205, 196, 0.35);
    flex-shrink: 0;
}

.story-nav-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 5px 18px rgba(78, 205, 196, 0.45);
}

.story-nav-btn:active {
    transform: scale(0.95);
}

.story-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    animation: storyFadeIn 0.3s ease;
}

@keyframes storyFadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.story-emoji {
    font-size: 56px;
    animation: storyBounce 2s ease-in-out infinite;
}

@keyframes storyBounce {

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

    50% {
        transform: translateY(-6px);
    }
}

.story-name {
    font-size: 22px;
    font-weight: 700;
    color: #2d3748;
}

.story-content {
    font-size: 15px;
    font-weight: 500;
    color: #4a5568;
    line-height: 1.7;
    padding: 12px 14px;
    background: rgba(255, 230, 109, 0.25);
    border-radius: 14px;
}


.story-moral {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #7DC95E 0%, #5DB550 100%);
    border-radius: 16px;
    margin-top: 6px;
    box-shadow: 0 3px 10px rgba(125, 201, 94, 0.3);
}

.moral-icon {
    font-size: 18px;
}

.moral-text {
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.story-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.story-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 159, 67, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.story-dot.active {
    background: #FF9F43;
    transform: scale(1.2);
}

.story-dot:hover {
    background: rgba(255, 159, 67, 0.6);
}

/* 故事播放按鈕 - 搶眼高對比設計 */
.story-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    margin-top: 14px;
    background: linear-gradient(135deg, #FF4757 0%, #FF6B81 50%, #FF4757 100%);
    background-size: 200% 200%;
    border: 3px solid #FFFFFF;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 6px 20px rgba(255, 71, 87, 0.5),
        0 0 0 4px rgba(255, 71, 87, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    animation: btnGradientShift 3s ease-in-out infinite, btnAttention 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* 按鈕光澤效果 */
.story-play-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 70%);
    animation: btnShine 2.5s linear infinite;
}

@keyframes btnGradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes btnAttention {

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

    50% {
        transform: scale(1.03);
    }
}

@keyframes btnShine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.story-play-btn:hover {
    transform: scale(1.12);
    box-shadow:
        0 10px 35px rgba(255, 71, 87, 0.6),
        0 0 0 6px rgba(255, 71, 87, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
    animation: none;
}

.story-play-btn:active {
    transform: scale(0.95);
}

.story-play-btn.playing {
    background: linear-gradient(135deg, #00D2D3 0%, #54E8EA 50%, #00D2D3 100%);
    background-size: 200% 200%;
    border-color: #FFFFFF;
    box-shadow:
        0 6px 25px rgba(0, 210, 211, 0.5),
        0 0 0 4px rgba(0, 210, 211, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    animation: btnGradientShift 2s ease-in-out infinite, playPulse 1s ease-in-out infinite;
}

@keyframes playPulse {

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

    50% {
        transform: scale(1.05);
    }
}

.play-icon {
    font-size: 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.play-text {
    font-size: 17px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 背景音效選擇器 */
.bgm-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 2px dashed rgba(255, 159, 67, 0.3);
}

.bgm-label {
    font-size: 13px;
    font-weight: 600;
    color: #718096;
}

.bgm-buttons {
    display: flex;
    gap: 6px;
}

.bgm-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(78, 205, 196, 0.4);
    background: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bgm-btn:hover {
    transform: scale(1.15);
    border-color: #4ECDC4;
    box-shadow: 0 3px 10px rgba(78, 205, 196, 0.3);
}

.bgm-btn.active {
    background: linear-gradient(135deg, #4ECDC4 0%, #45B7D1 100%);
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(78, 205, 196, 0.4);
    animation: bgmPulse 1.5s ease-in-out infinite;
}

@keyframes bgmPulse {

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

    50% {
        transform: scale(1.08);
    }
}

.bgm-btn.bgm-stop {
    border-color: rgba(255, 107, 107, 0.4);
}

.bgm-btn.bgm-stop:hover {
    border-color: #FF6B6B;
    box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
}

/* 故事面板初始隱藏，啟動後顯示 */
.stories-panel {
    display: none;
}

.stories-panel.active {
    display: flex;
}

/* 手機版故事面板 - 由 EPIC 2 區域統一管理 */
/* 見檔案末尾的 📱 手機適配區域 */

/* 遊戲卡片網格 */
.game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--touch-gap);
    max-width: 500px;
    width: 100%;
    padding: var(--spacing-md);
}

/* 單一遊戲卡片 */
.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 160px;
    padding: var(--spacing-md);
    background: white;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.game-card:hover::before,
.game-card:active::before {
    opacity: 1;
}

.game-card:active {
    transform: scale(0.95);
    box-shadow: var(--shadow-soft);
}

.card-icon {
    font-size: 64px;
}

.card-title {
    font-size: var(--font-size-medium);
    font-weight: 700;
    color: var(--color-text);
}

.card-stars {
    font-size: 18px;
    opacity: 0.5;
}

/* ========================================
   專家引言公佈欄 - 教育益處說明
   ======================================== */
.expert-benefit {
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border-radius: 12px;
    border-left: 4px solid #4ECDC4;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

/* 不同發展領域的顏色 */
.expert-benefit[data-category="language"] {
    border-left-color: #FF6B6B;
}

.expert-benefit[data-category="cognitive"] {
    border-left-color: #45B7D1;
}

.expert-benefit[data-category="math"] {
    border-left-color: #FFE66D;
}

.expert-benefit[data-category="focus"] {
    border-left-color: #A55EEA;
}

.expert-benefit[data-category="creative"] {
    border-left-color: #FF9F43;
}

.expert-benefit[data-category="health"] {
    border-left-color: #7DC95E;
}

.expert-benefit[data-category="self"] {
    border-left-color: #FF8ED4;
}

.expert-benefit[data-category="knowledge"] {
    border-left-color: #45B7D1;
}

.expert-benefit[data-category="emotional"] {
    border-left-color: #FF6B6B;
}

.expert-benefit[data-category="sensory"] {
    border-left-color: #FFE66D;
}

.expert-benefit[data-category="motor"] {
    border-left-color: #4ECDC4;
}

.expert-benefit[data-category="science"] {
    border-left-color: #A55EEA;
}

.benefit-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.expert-icon {
    font-size: 18px;
    line-height: 1;
}

.benefit-category {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4ECDC4 0%, #3DB9B0 100%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 分類標籤顏色 */
.expert-benefit[data-category="language"] .benefit-category {
    background: linear-gradient(135deg, #FF6B6B 0%, #E85555 100%);
}

.expert-benefit[data-category="cognitive"] .benefit-category {
    background: linear-gradient(135deg, #45B7D1 0%, #3AA6C0 100%);
}

.expert-benefit[data-category="math"] .benefit-category {
    background: linear-gradient(135deg, #FFE66D 0%, #F5D952 100%);
    color: #5a5a5a;
}

.expert-benefit[data-category="focus"] .benefit-category {
    background: linear-gradient(135deg, #A55EEA 0%, #9447D5 100%);
}

.expert-benefit[data-category="creative"] .benefit-category {
    background: linear-gradient(135deg, #FF9F43 0%, #E8903D 100%);
}

.expert-benefit[data-category="health"] .benefit-category {
    background: linear-gradient(135deg, #7DC95E 0%, #6BB84D 100%);
}

.expert-benefit[data-category="self"] .benefit-category {
    background: linear-gradient(135deg, #FF8ED4 0%, #E87DC0 100%);
}

.expert-benefit[data-category="knowledge"] .benefit-category {
    background: linear-gradient(135deg, #45B7D1 0%, #3AA6C0 100%);
}

.expert-benefit[data-category="emotional"] .benefit-category {
    background: linear-gradient(135deg, #FF6B6B 0%, #E85555 100%);
}

.expert-benefit[data-category="sensory"] .benefit-category {
    background: linear-gradient(135deg, #FFE66D 0%, #F5D952 100%);
    color: #5a5a5a;
}

.expert-benefit[data-category="motor"] .benefit-category {
    background: linear-gradient(135deg, #4ECDC4 0%, #3DB9B0 100%);
}

.expert-benefit[data-category="science"] .benefit-category {
    background: linear-gradient(135deg, #A55EEA 0%, #9447D5 100%);
}

.benefit-desc {
    font-size: 16px;
    font-weight: 500;
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* 裝飾性引號 */
.expert-benefit::before {
    content: '"';
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 32px;
    font-family: Georgia, serif;
    color: rgba(78, 205, 196, 0.15);
    line-height: 1;
}

/* 遊戲卡片 hover 時益處區域高亮 */
.game-card:hover .expert-benefit {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(240, 248, 255, 1) 100%);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* 保留舊的 card-benefit 樣式作為備援 */
.card-benefit {
    font-size: 14px;
    font-weight: 500;
    color: #5a5a5a;
    text-align: center;
    line-height: 1.4;
    margin-top: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.15) 0%, rgba(255, 230, 109, 0.15) 100%);
    border-radius: 20px;
    border: 1px solid rgba(78, 205, 196, 0.3);
}

/* 家長按鈕 (小且不顯眼) */
.btn-parent {
    position: fixed;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text-light);
    cursor: pointer;
}

/* ----- 按鈕系統 ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: var(--font-size-large);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-white);
    box-shadow: var(--shadow-button), inset 0 -3px 0 var(--color-primary-dark);
}

.btn-primary:active {
    transform: translateY(4px);
    box-shadow: var(--shadow-button-pressed), inset 0 -1px 0 var(--color-primary-dark);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-text-white);
    box-shadow: var(--shadow-button), inset 0 -3px 0 var(--color-secondary-dark);
}

.btn-secondary:active {
    transform: translateY(4px);
    box-shadow: var(--shadow-button-pressed), inset 0 -1px 0 var(--color-secondary-dark);
}

/* 超大按鈕 (開始遊戲用) */
.btn-mega {
    min-width: 200px;
    min-height: 100px;
    font-size: var(--font-size-huge);
    padding: var(--spacing-lg) var(--spacing-xl);
}

.btn-icon {
    font-size: 1.2em;
}

/* 導航按鈕 (新版更明顯的返回首頁) */
.btn-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 60px;
    min-height: 50px;
    padding: 6px 8px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-base);
    font-weight: 700;
}

.btn-nav .nav-icon {
    font-size: 24px;
}

.btn-nav .nav-text {
    font-size: 12px;
    line-height: 1.2;
}

.btn-nav:active {
    transform: scale(0.95);
    box-shadow: var(--shadow-button-pressed);
}

/* 底部導航的首頁按鈕 */
.btn-home-footer {
    background: var(--color-secondary);
}

/* ----- 遊戲畫面 ----- */
#game-container {
    background: var(--color-bg-game);
    padding: 0;
    /* 移除 display: flex - 讓 .screen 控制隱藏/顯示 */
    /* flex 佈局移到 .active 狀態 */
}

#game-container.active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);

    /* 🎨 半透明淺米色漸層背景 */
    background: linear-gradient(180deg,
            rgba(255, 253, 248, 0.95) 0%,
            rgba(255, 248, 231, 0.85) 100%);

    /* ✨ 毛玻璃效果 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* 💫 柔和懸浮陰影 */
    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.08);

    /* 🔄 底部圓角 - 像懸掛的可愛卡片 */
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;

    /* 確保不擋住 tooltip */
    position: relative;
    z-index: 50;
}

.game-title {
    flex: 1;
    font-size: var(--font-size-large);
    font-weight: 700;
    text-align: center;
    /* 柔和深暖灰色 */
    color: #6D5E55;
    letter-spacing: 1px;
}

/* ========================================
   使用時間計時器 - 提醒幼童休息
   ======================================== */
.usage-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.9) 100%);
    border-radius: 16px;
    border: 2px solid rgba(78, 205, 196, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    min-width: 80px;
}

.timer-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.timer-icon {
    font-size: 28px;
    animation: timerPulse 2s ease-in-out infinite;
}

@keyframes timerPulse {

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

    50% {
        transform: scale(1.1);
    }
}

.timer-text {
    font-size: 24px;
    font-weight: 700;
    color: #2d3748;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

/* 時間階段變化 (10分鐘) */
.usage-timer.stage-1 {
    border-color: rgba(78, 205, 196, 0.5);
    background: linear-gradient(135deg,
            rgba(78, 205, 196, 0.1) 0%,
            rgba(255, 255, 255, 0.9) 100%);
}

.usage-timer.stage-1 .timer-text {
    color: #4ECDC4;
}

/* 時間階段變化 (15分鐘 - 注意) */
.usage-timer.stage-2 {
    border-color: rgba(255, 159, 67, 0.5);
    background: linear-gradient(135deg,
            rgba(255, 159, 67, 0.1) 0%,
            rgba(255, 255, 255, 0.9) 100%);
    animation: timerGlow 1.5s ease-in-out infinite;
}

.usage-timer.stage-2 .timer-text {
    color: #FF9F43;
}

/* 時間階段變化 (20分鐘 - 警告) */
.usage-timer.stage-3 {
    border-color: rgba(255, 107, 107, 0.5);
    background: linear-gradient(135deg,
            rgba(255, 107, 107, 0.1) 0%,
            rgba(255, 255, 255, 0.9) 100%);
    animation: timerGlow 1s ease-in-out infinite;
}

.usage-timer.stage-3 .timer-text {
    color: #FF6B6B;
}

@keyframes timerGlow {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    50% {
        box-shadow: 0 2px 16px rgba(255, 159, 67, 0.3);
    }
}

/* 計時器主體區域 */
.timer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* 固定顯示的提醒文字 */
.timer-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(255, 230, 109, 0.3) 0%, rgba(255, 217, 61, 0.3) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 230, 109, 0.5);
}

.hint-icon {
    font-size: 20px;
}

.hint-text {
    font-size: 16px;
    font-weight: 600;
    color: #5a4a20;
    white-space: nowrap;
}

/* 時間到時的強調動畫 */
.usage-timer.stage-3 .timer-hint {
    background: linear-gradient(135deg, #FFE66D 0%, #FFD93D 100%);
    animation: hintBounce 0.5s ease-in-out infinite alternate;
}

.usage-timer.stage-3 .hint-text {
    color: #5a4a20;
}

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

    100% {
        transform: translateY(-2px);
    }
}

/* 休息提醒彈窗 */
.rest-reminder-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.rest-reminder-modal.hidden {
    display: none;
}

.rest-reminder-content {
    background: linear-gradient(135deg, #FFF8E7 0%, #FFE4E1 100%);
    padding: 32px;
    border-radius: 24px;
    text-align: center;
    max-width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rest-mascot {
    font-size: 80px;
    animation: mascotWave 1s ease-in-out infinite;
}

@keyframes mascotWave {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

.rest-title {
    font-size: 28px;
    font-weight: 700;
    color: #FF6B6B;
    margin: 16px 0 8px;
}

.rest-message {
    font-size: 18px;
    color: #5a5a5a;
    margin-bottom: 24px;
    line-height: 1.6;
}

.rest-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.rest-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rest-btn-primary {
    background: linear-gradient(135deg, #4ECDC4 0%, #3DB9B0 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.rest-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(78, 205, 196, 0.4);
}

.rest-btn-secondary {
    background: rgba(255, 255, 255, 0.8);
    color: #5a5a5a;
    border: 2px solid #ddd;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 進度條 */
.progress-container {
    width: 100px;
}

.progress-bar {
    height: 12px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-green));
    border-radius: 6px;
    transition: width var(--transition-normal);
}

/* ========================================
   遊戲教育益處說明橫幅
   ======================================== */
.game-benefit-banner {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(240, 248, 255, 0.98) 100%);
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #4ECDC4, #45B7D1, #A55EEA) 1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 40;
}

.benefit-banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.benefit-banner-icon {
    font-size: 48px;
    flex-shrink: 0;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
    }
}

.benefit-banner-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.benefit-banner-category {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #4ECDC4 0%, #3DB9B0 100%);
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.3);
}

.benefit-banner-desc {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.5;
}

/* 根據發展領域變化顏色 */
.game-benefit-banner[data-category="language"] .benefit-banner-category {
    background: linear-gradient(135deg, #FF6B6B 0%, #E85555 100%);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.game-benefit-banner[data-category="cognitive"] .benefit-banner-category {
    background: linear-gradient(135deg, #45B7D1 0%, #3AA6C0 100%);
    box-shadow: 0 2px 8px rgba(69, 183, 209, 0.3);
}

.game-benefit-banner[data-category="math"] .benefit-banner-category {
    background: linear-gradient(135deg, #FFE66D 0%, #F5D952 100%);
    color: #5a5a5a;
    box-shadow: 0 2px 8px rgba(255, 230, 109, 0.3);
}

.game-benefit-banner[data-category="focus"] .benefit-banner-category {
    background: linear-gradient(135deg, #A55EEA 0%, #9447D5 100%);
    box-shadow: 0 2px 8px rgba(165, 94, 234, 0.3);
}

.game-benefit-banner[data-category="creative"] .benefit-banner-category {
    background: linear-gradient(135deg, #FF9F43 0%, #E8903D 100%);
    box-shadow: 0 2px 8px rgba(255, 159, 67, 0.3);
}

.game-benefit-banner[data-category="health"] .benefit-banner-category {
    background: linear-gradient(135deg, #7DC95E 0%, #6BB84D 100%);
    box-shadow: 0 2px 8px rgba(125, 201, 94, 0.3);
}

.game-benefit-banner[data-category="self"] .benefit-banner-category {
    background: linear-gradient(135deg, #FF8ED4 0%, #E87DC0 100%);
    box-shadow: 0 2px 8px rgba(255, 142, 212, 0.3);
}

.game-benefit-banner[data-category="knowledge"] .benefit-banner-category {
    background: linear-gradient(135deg, #45B7D1 0%, #3AA6C0 100%);
    box-shadow: 0 2px 8px rgba(69, 183, 209, 0.3);
}

.game-benefit-banner[data-category="emotional"] .benefit-banner-category {
    background: linear-gradient(135deg, #FF6B6B 0%, #E85555 100%);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.game-benefit-banner[data-category="sensory"] .benefit-banner-category {
    background: linear-gradient(135deg, #FFE66D 0%, #F5D952 100%);
    color: #5a5a5a;
    box-shadow: 0 2px 8px rgba(255, 230, 109, 0.3);
}

.game-benefit-banner[data-category="motor"] .benefit-banner-category {
    background: linear-gradient(135deg, #4ECDC4 0%, #3DB9B0 100%);
    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.3);
}

.game-benefit-banner[data-category="science"] .benefit-banner-category {
    background: linear-gradient(135deg, #A55EEA 0%, #9447D5 100%);
    box-shadow: 0 2px 8px rgba(165, 94, 234, 0.3);
}

/* 手機版調整 */
@media (max-width: 480px) {
    .game-benefit-banner {
        padding: 12px 16px;
    }

    .benefit-banner-icon {
        font-size: 36px;
    }

    .benefit-banner-category {
        font-size: 12px;
        padding: 3px 10px;
    }

    .benefit-banner-desc {
        font-size: 16px;
    }
}

/* 遊戲區域 */
.game-area {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-md);
    padding-bottom: 120px;
    /* 為底部導航列留空間 */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
    /* 較低的層級，讓 footer 在上面 */
}

/* ----- 底部導航列 ----- */
.game-footer {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: 20px;
    background: transparent;
    overflow: visible;
    position: relative;
    z-index: 9999;
    /* 最高層級，確保蓋過小精靈 */
    pointer-events: auto;
    /* 確保可以點擊 */
}

/* 首頁返回按鈕 - 只有圖示，更大更醒目 */
.btn-home-footer {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 6px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn-home-footer .nav-icon {
    font-size: 32px;
}

.btn-home-footer:hover {
    transform: translateY(-6px) scale(1.12);
    background: linear-gradient(145deg, rgba(255, 230, 200, 0.98), rgba(255, 200, 150, 0.95));
    border-color: rgba(255, 180, 100, 0.8);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(255, 180, 100, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.btn-home-footer:active {
    transform: scale(0.95) translateY(2px);
}

/* 頂部首頁返回按鈕 - 只有圖示 */
.btn-home {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 6px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn-home .nav-icon {
    font-size: 28px;
    /* 🍊 柔和橘色點綴 */
    filter: drop-shadow(0 1px 2px rgba(255, 159, 67, 0.3));
}

.btn-home:hover {
    transform: translateY(-4px) scale(1.1);
    background: linear-gradient(145deg, rgba(255, 230, 200, 0.98), rgba(255, 200, 150, 0.95));
    border-color: rgba(255, 180, 100, 0.8);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(255, 180, 100, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.btn-home:active {
    transform: scale(0.95) translateY(2px);
}

.footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
    overflow: visible;
    /* 允許按鈕浮出 */
}

/* 快速切換容器 - 包含箭頭和滾動區 */
.quick-switch-container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    /* 允許 tooltip 向上溢出 */
    overflow: visible !important;
    position: relative;
    z-index: 100;
}

/* 左右導航箭頭 */
.quick-nav-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: #666;
    transition: all 0.2s ease;
}

.quick-nav-arrow:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #333;
}

.quick-nav-arrow:active {
    transform: scale(0.9);
    background: rgba(0, 0, 0, 0.2);
}

.quick-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible !important;
    /* 允許 tooltip 向上溢出 */
    flex: 1;
    /* 關鍵：給上方留出空間放置 tooltip */
    padding: 50px 4px 12px 4px;
    margin-top: -40px;
    /* 負邊距抵消位移 */
    -webkit-overflow-scrolling: touch;
    /* Mac 風格滾動條 */
    scrollbar-width: auto;
    scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
}

/* Mac 風格滾動條 - Webkit瀏覽器 */
.quick-switch::-webkit-scrollbar {
    height: 10px;
}

.quick-switch::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    margin: 0 4px;
}

.quick-switch::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.quick-switch::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
}

.switch-label {
    font-size: 14px;
    color: var(--color-text-light);
    white-space: nowrap;
    flex-shrink: 0;
}

/* macOS Dock 風格的快速切換按鈕 - 增強 3D 效果 */
.quick-btn {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    /* 玻璃擬態背景 */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    cursor: pointer;
    /* 3D 浮起效果的過渡 */
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
        margin 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
    /* 強化 3D 陰影 - 多層次立體感 */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 12px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    /* 用於 JavaScript 動態控制 */
    transform-origin: center bottom;
    /* 底部反射效果 */
    position: relative;
    pointer-events: auto;
    /* 確保按鈕可以點擊 */
}

/* 按鈕底部反射光澤 */
.quick-btn::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 6px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

/* 懸停時顯示遊戲名稱 tooltip */
.quick-btn::before {
    content: attr(aria-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 6px 12px;
    background: linear-gradient(145deg, rgba(50, 50, 50, 0.95), rgba(30, 30, 30, 0.95));
    color: white;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 300;
}

/* 懸停時顯示 tooltip */
.quick-btn:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}

/* 禁用預設 hover，交由 JavaScript 控制 */
.quick-btn:hover {
    /* 懸停效果：上浮 + 放大 */
    transform: translateY(-8px) scale(1.18);
    /* 懸停背景：淡藍色漸層 */
    background: linear-gradient(145deg, rgba(224, 247, 255, 0.98), rgba(200, 235, 255, 0.95));
    /* 彩虹光暈邊框 */
    border: 2px solid rgba(100, 200, 255, 0.8);
    /* 確保在最上層（比所有元素都高）*/
    z-index: 99999;
    /* 強化 3D 陰影 + 光暈 */
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 16px 32px rgba(0, 0, 0, 0.12),
        0 24px 48px rgba(0, 0, 0, 0.08),
        0 0 20px rgba(100, 200, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.quick-btn:active {
    transform: scale(0.95) translateY(2px) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.quick-btn.active {
    background: linear-gradient(145deg, rgba(255, 200, 200, 0.95), rgba(255, 170, 170, 0.9));
    border-color: rgba(255, 150, 150, 0.8);
    box-shadow:
        0 4px 12px rgba(255, 107, 107, 0.4),
        0 8px 20px rgba(255, 107, 107, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ----- 遊戲通用元素 ----- */

/* 大型互動按鈕 (動物、顏色等) */
.game-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border: none;
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-card);
    font-size: 64px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.game-btn:active {
    transform: scale(0.9);
    box-shadow: var(--shadow-soft);
}

.game-btn.correct {
    background: var(--color-green);
    animation: wiggle 0.5s ease;
}

.game-btn.wrong {
    background: var(--color-red);
    animation: shake 0.5s ease;
}

/* 帶文字標籤的按鈕（非純 emoji 按鈕）*/
.game-btn.replay-btn,
.game-btn.learn-btn,
.game-btn.check-btn,
.game-btn.play-btn {
    font-size: 20px !important;
    height: auto;
    width: auto;
    padding: 14px 28px;
    gap: 8px;
}

/* 遊戲提示文字 - 確保注音緊密對齊 */
.game-prompt {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
    margin-bottom: 16px;
    padding-top: 8px;
    /* 確保 ruby 標籤不會產生額外間距 */
    word-spacing: 0;
    letter-spacing: 0;
}

/* 遊戲內教育益處橫幅 */
.game-benefit-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(78, 205, 196, 0.15) 50%, rgba(255, 230, 109, 0.1) 100%);
    border-radius: 16px;
    border: 1px solid rgba(78, 205, 196, 0.25);
    font-size: 15px;
    font-weight: 600;
    color: #4a4a4a;
    text-align: center;
    white-space: nowrap;
}

.game-benefit-banner .benefit-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.game-benefit-banner .benefit-text {
    flex-shrink: 0;
}


/* 遊戲選項網格 */
.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--touch-gap);
    max-width: 400px;
    width: 100%;
}

/* 形狀遊戲專用 */
.shape-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.shape-square {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.shape-triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid currentColor;
}

/* 拖放區域 */
.drop-zone {
    width: 150px;
    height: 150px;
    border: 4px dashed var(--color-text-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.drop-zone.highlight {
    border-color: var(--color-secondary);
    background: rgba(78, 205, 196, 0.1);
}

.drop-zone.filled {
    border-style: solid;
    border-color: var(--color-green);
    background: rgba(125, 201, 94, 0.2);
}

/* 可拖動元素 */
.draggable {
    cursor: grab;
    touch-action: none;
    transition: transform var(--transition-fast);
}

.draggable:active,
.draggable.dragging {
    cursor: grabbing;
    transform: scale(1.1);
    z-index: 100;
}

/* ----- 慶祝動畫 ----- */
.celebration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    pointer-events: none;
}

.celebration.hidden {
    display: none;
}

.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.confetti {
    position: absolute;
    font-size: 48px;
    animation: confetti-fall 2s ease-out forwards;
}

.confetti:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.confetti:nth-child(2) {
    left: 30%;
    animation-delay: 0.1s;
}

.confetti:nth-child(3) {
    left: 50%;
    animation-delay: 0.2s;
}

.confetti:nth-child(4) {
    left: 70%;
    animation-delay: 0.15s;
}

.confetti:nth-child(5) {
    left: 90%;
    animation-delay: 0.25s;
}

.celebration-text {
    font-size: var(--font-size-mega);
    font-weight: 900;
    color: var(--color-primary);
    text-shadow: 3px 3px 0 var(--color-accent);
    animation: pop-in 0.5s ease-out;
    z-index: 1;
}

/* ----- 模態框 ----- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.modal-large {
    width: 400px;
}

.modal-title {
    font-size: var(--font-size-large);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.modal-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

/* 家長門檻滑桿 */
.slider-container {
    margin-bottom: var(--spacing-lg);
}

.parent-slider {
    width: 100%;
    height: 50px;
    -webkit-appearance: none;
    background: linear-gradient(90deg, #eee 0%, var(--color-secondary) 100%);
    border-radius: 25px;
    outline: none;
}

.parent-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: white;
    box-shadow: var(--shadow-button);
    cursor: pointer;
}

.slider-label {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
}

/* 統計卡片 */
.stats-section,
.settings-section {
    text-align: left;
    margin-bottom: var(--spacing-lg);
}

.stats-section h3,
.settings-section h3 {
    font-size: var(--font-size-medium);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.stats-grid {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.stat-card {
    padding: var(--spacing-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    text-align: center;
    min-width: 100px;
}

.stat-value {
    font-size: var(--font-size-huge);
    font-weight: 700;
    color: var(--color-primary);
}

.stat-label {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}

/* 設定項 */
.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm);
    font-size: var(--font-size-base);
    cursor: pointer;
}

.setting-item input[type="checkbox"] {
    width: 50px;
    height: 28px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.setting-item input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-fast);
}

.setting-item input[type="checkbox"]:checked {
    background: var(--color-secondary);
}

.setting-item input[type="checkbox"]:checked::before {
    transform: translateX(22px);
}

/* ----- 動畫 ----- */
@keyframes bounce {

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

    50% {
        transform: translateY(-20px);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

@keyframes pulse-animation {

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

    50% {
        transform: scale(1.05);
    }
}

.pulse-animation {
    animation: pulse-animation 2s ease-in-out infinite;
}

@keyframes wiggle {

    0%,
    100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

@keyframes pop-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

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

@keyframes confetti-fall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ----- RWD 響應式 ----- */
@media (max-width: 480px) {
    :root {
        --font-size-mega: 48px;
        --font-size-huge: 36px;
        --font-size-large: 28px;
        --font-size-medium: 22px;
        --font-size-base: 18px;
    }

    .splash-mascot {
        font-size: 80px;
    }

    .game-grid {
        gap: var(--spacing-sm);
    }

    .game-card {
        min-height: 130px;
        padding: var(--spacing-sm);
    }

    .card-icon {
        font-size: 48px;
    }

    .game-btn {
        width: 100px;
        height: 100px;
        font-size: 48px;
    }

    /* 小螢幕時隱藏換遊戲標籤 */
    .switch-label {
        display: none;
    }

    .quick-btn {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .btn-nav {
        min-width: 70px;
        padding: var(--spacing-xs);
    }

    .btn-nav .nav-icon {
        font-size: 28px;
    }

    .btn-nav .nav-text {
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    .game-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 700px;
    }

    .game-card {
        min-height: 180px;
    }

    .options-grid {
        max-width: 500px;
    }
}

/* ----- 隱藏工具 ----- */
.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================
   🚀 終極破牆補丁 - 解決注音被切掉的問題
   ========================================= */

/* 1. 關鍵：擴張容器的「物理高度」 */
.quick-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;

    /* 這裡最重要！給上方留出 80px 的空白區存放注音 */
    padding: 80px 10px 20px 10px !important;
    margin-top: -80px !important;
    /* 用負邊距把整個選單拉回原位 */

    overflow-x: auto !important;
    overflow-y: visible !important;
    /* 雖然有瀏覽器限制，但配合 padding 效果最好 */

    /* 確保不會產生新的層疊上下文 */
    isolation: auto !important;
    position: relative;
    z-index: 999999 !important;
}

/* 2. 讓 Tooltip (注音) 絕對定位在預留的 Padding 空間內 */
.quick-btn::before {
    content: attr(aria-label);
    position: absolute;
    bottom: 85%;
    /* 降低位置，避免被擋住 */
    left: 50%;
    transform: translateX(-50%) scale(0.8);

    /* 確保它在最高層 */
    z-index: 1000000 !important;

    /* 🎨 藝術感玻璃擬態背景 */
    background: linear-gradient(135deg,
            rgba(255, 107, 107, 0.9) 0%,
            rgba(255, 159, 67, 0.9) 50%,
            rgba(255, 200, 113, 0.9) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* 🖌️ 字體樣式 */
    color: white;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 0 10px rgba(255, 255, 255, 0.3);

    /* 📐 外觀 */
    padding: 8px 16px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    white-space: nowrap;

    /* ✨ 柔和立體陰影 */
    box-shadow:
        0 4px 15px rgba(255, 107, 107, 0.4),
        0 8px 25px rgba(255, 159, 67, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);

    /* 初始隱藏 */
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
}

/* 小箭頭指向按鈕 */
.quick-btn::after {
    content: '';
    position: absolute;
    bottom: calc(85% - 8px);
    /* 配合 tooltip 位置 */
    left: 50%;
    transform: translateX(-50%) rotate(45deg) scale(0);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.9), rgba(255, 200, 113, 0.9));
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    z-index: 999999;
    opacity: 0;
    transition:
        opacity 0.25s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quick-btn:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1) translateY(-8px);
    box-shadow:
        0 8px 25px rgba(255, 107, 107, 0.5),
        0 15px 40px rgba(255, 159, 67, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.quick-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) rotate(45deg) scale(1);
}

/* 3. 徹底排除小精靈的干擾 */
.rive-companion {
    pointer-events: none !important;
    /* 讓滑鼠直接穿過小精靈 */
    z-index: 100 !important;
    /* 層級設定得比選單按鈕低 */
}

/* 4. 確保主畫面容器不會壓在選單上 */
.game-area {
    z-index: 1 !important;
    padding-bottom: 120px;
    /* 留出空間給選單，避免重疊 */
}

/* 5. 底部導航列確保在最上層 */
.game-footer {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}

/* 6. 移除可能產生層疊上下文的屬性 */
#game-screen,
.screen {
    transform: none !important;
    filter: none !important;
}

/* ========================================
   🌟 Zone 2: 星空智庫 專區樣式
   ======================================== */

/* 專區容器 */
.zone-section {
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
}

/* 星空智庫專區標題 */
.zone-starry-wisdom-section .zone-header {
    background: linear-gradient(135deg, #2D4A3E 0%, #3D5A4E 100%);
    color: #FFFDD0;
    padding: 24px 32px;
    border-radius: 20px;
    margin-bottom: 24px;
    text-align: center;
    box-shadow:
        0 8px 30px rgba(45, 74, 62, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* 星星背景裝飾 */
.zone-starry-wisdom-section .zone-header::before {
    content: '✨ 🌟 ✨';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    opacity: 0.6;
    animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

.zone-starry-wisdom-section .zone-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.zone-starry-wisdom-section .zone-subtitle {
    font-size: 16px;
    opacity: 0.85;
    font-weight: 500;
}

/* Zone 2 遊戲卡片 */
.zone-2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

.swh-game-card {
    background: linear-gradient(145deg,
            rgba(255, 253, 208, 0.95) 0%,
            rgba(245, 243, 198, 0.9) 100%);
    border: 2px solid rgba(45, 74, 62, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.swh-game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2D4A3E 0%, #FFD700 50%, #2D4A3E 100%);
}

.swh-game-card:hover {
    transform: translateY(-8px);
    border-color: #FFD700;
    box-shadow:
        0 15px 40px rgba(45, 74, 62, 0.25),
        0 0 20px rgba(255, 215, 0, 0.3);
}

.swh-game-card .expert-benefit {
    background: rgba(45, 74, 62, 0.08);
}

.swh-game-card .benefit-category {
    color: #2D4A3E;
    font-weight: 700;
}

/* Zone 2 快速切換按鈕分隔線 */
.quick-divider {
    color: rgba(255, 255, 255, 0.4);
    font-size: 20px;
    margin: 0 8px;
    user-select: none;
}

/* Zone 2 快速切換按鈕 */
.zone-2-btn {
    background: linear-gradient(135deg, #2D4A3E 0%, #3D5A4E 100%) !important;
    border: 2px solid rgba(255, 215, 0, 0.4) !important;
}

.zone-2-btn:hover {
    border-color: #FFD700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
}

.zone-2-btn.active {
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.6),
        inset 0 0 10px rgba(255, 215, 0, 0.2) !important;
}

/* Zone 2 快速切換按鈕 Tooltip 樣式 */
.zone-2-btn::before {
    background: linear-gradient(135deg,
            rgba(45, 74, 62, 0.95),
            rgba(61, 90, 78, 0.95)) !important;
    color: #FFFDD0 !important;
}

/* ========================================
   📱 手機適配區域 (2025-12-26 統一管理)
   ======================================== */

/* -- EPIC 1: 語音氣泡備援 -- */
.speech-bubble-hint {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 16px 24px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-family: 'Noto Sans TC', sans-serif;
    animation: bubbleIn 0.3s ease;
}

.speech-bubble-hint .bubble-icon {
    font-size: 32px;
}

.speech-bubble-hint .bubble-text {
    color: var(--color-text);
}

.speech-bubble-hint.fade-out {
    opacity: 0;
    transition: opacity 0.3s;
}

@keyframes bubbleIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 手機版氣泡調整 */
@media (max-width: 768px) {
    .speech-bubble-hint {
        top: 15%;
        padding: 12px 20px;
        font-size: 20px;
        max-width: 90%;
    }

    .speech-bubble-hint .bubble-icon {
        font-size: 28px;
    }
}

/* -- EPIC 2: 手機版故事面板 -- */

/* 手機版故事按鈕 */
.mobile-story-btn {
    display: none;
    /* 預設隱藏 */
    position: fixed;
    left: 16px;
    bottom: 16px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF9F43 100%);
    border: none;
    border-radius: 50%;
    font-size: 28px;
    box-shadow:
        0 4px 20px rgba(255, 107, 107, 0.4),
        0 0 0 4px rgba(255, 107, 107, 0.1);
    cursor: pointer;
    z-index: 500;
    transition: all 0.3s ease;
}

.mobile-story-btn:active {
    transform: scale(0.9);
}

/* 故事面板遮罩 */
.stories-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stories-overlay.active {
    display: block;
    opacity: 1;
}

/* 手機版顯示故事按鈕 */
@media (max-width: 900px) {
    .mobile-story-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 手機版故事面板 - 底部抽屜模式 */
    /* 🔧 修復：默認完全隱藏在螢幕外，不佔用空間 */
    .stories-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 50vh;
        /* 🔧 從 70vh 減少到 50vh，避免佔滿螢幕 */
        border-radius: 24px 24px 0 0;
        z-index: 1000;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom, 20px);

        /* 🔧 修復：默認隱藏 - 使用 visibility + transform */
        transform: translateY(100%);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition:
            transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
            visibility 0.4s,
            opacity 0.3s;
    }

    /* 🔧 修復：只有激活時才顯示 */
    .stories-panel.active {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        display: flex;
    }
}

/* 開場畫面時隱藏故事按鈕 */
#splash-screen.active~.mobile-story-btn {
    display: none !important;
}

/* 故事按鈕載入狀態 */
.story-play-btn.loading {
    animation: pulse 1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        \r opacity: 1;
        \r
    }

    \r \r 50% {
        \r transform: scale(1.1);
        \r opacity: 0.7;
        \r
    }

    \r
}

\r \r
/* -- EPIC 3: 視窗與版面優化 -- */
\r \r
/* M3.2: 觸控目標優化 */
\r @media (max-width: 768px) {
    \r

    /* 故事導航按鈕 */
    \r .story-nav-btn {
        \r width: 48px;
        \r height: 48px;
        \r font-size: 18px;
        \r
    }

    \r \r

    /* 背景音效按鈕 */
    \r .bgm-btn {
        \r width: 44px;
        \r height: 44px;
        \r font-size: 20px;
        \r
    }

    \r \r

    /* 故事圓點指示器 */
    \r .story-dot {
        \r width: 16px;
        \r height: 16px;
        \r
    }

    \r \r

    /* 快速導航箭頭 */
    \r .quick-nav-arrow {
        \r width: 40px;
        \r height: 40px;
        \r font-size: 18px;
        \r
    }

    \r
}

\r \r
/* M3.3: 橫向模式優化 */
\r @media (max-height: 500px) and (orientation: landscape) {
    \r #main-menu {
        \r padding-top: 12px;
        \r
    }

    \r \r .menu-header {
        \r margin-bottom: 8px;
        \r
    }

    \r \r .premium-clock {
        \r transform: scale(0.7);
        \r margin-bottom: -24px;
        \r
    }

    \r \r .game-grid {
        \r grid-template-columns: repeat(4, 1fr);
        \r gap: 10px;
        \r max-width: 90%;
        \r
    }

    \r \r .game-card {
        \r min-height: 90px;
        \r padding: 8px;
        \r
    }

    \r \r .card-icon {
        \r font-size: 32px;
        \r
    }

    \r \r .card-title {
        \r font-size: 14px;
        \r
    }

    \r \r

    /* 隱藏教育益處，節省空間 */
    \r .expert-benefit {
        \r display: none;
        \r
    }

    \r
}

\r \r
/* M3.4: iOS Safe Area 處理 */
\r @supports (padding: env(safe-area-inset-top)) {
    \r

    /* 遊戲頂部區域 */
    \r .game-header {
        \r padding-top: env(safe-area-inset-top, 0);
        \r
    }

    \r \r

    /* 底部導航列 */
    \r .game-footer {
        \r padding-bottom: env(safe-area-inset-bottom, 8px);
        \r
    }

    \r \r

    /* 故事抽屜底部 */
    \r .stories-panel.active {
        \r padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
        \r
    }

    \r \r

    /* 手機故事按鈕避開 Safe Area */
    \r .mobile-story-btn {
        \r bottom: calc(16px + env(safe-area-inset-bottom, 0));
        \r
    }

    \r
}