/* ========================================
   📱 手機版面修復 - 第二輪 (2025-12-26)
   修復視覺審查中發現的問題
   ======================================== */

/* ========================================
   C1 & C2: Rive 角色（小精靈）強制縮小
   問題：在 375px 下仍顯示 220px，遮擋互動元素
   ======================================== */

/* 手機版強制縮小 - 使用更高特異性 */
@media (max-width: 600px) {

    /* 強制覆蓋所有位置的角色尺寸 */
    .rive-companion canvas,
    .rive-companion.pos-home canvas,
    .rive-companion.pos-menu canvas,
    .rive-companion.pos-game canvas {
        width: 80px !important;
        height: 80px !important;
    }

    /* 調整角色容器 */
    .rive-companion {
        width: 80px !important;
        height: auto !important;
    }

    /* 遊戲模式下移到右下角，避開互動區域 */
    .rive-companion.pos-game {
        bottom: 100px !important;
        right: 8px !important;
        z-index: 50 !important;
        /* 降低層級，不遮擋按鈕 */
    }

    /* 主選單模式下也縮小 */
    .rive-companion.pos-menu,
    .rive-companion.pos-home {
        transform: scale(0.5) !important;
        transform-origin: bottom right !important;
    }

    /* 名字標籤縮小 */
    .companion-name {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
}

/* ========================================
   C3: 快速切換區域被遮擋修復
   問題：小精靈蓋住快速切換按鈕
   ======================================== */

@media (max-width: 600px) {

    /* 提高快速切換區域的層級 */
    .quick-switch-container {
        z-index: 100 !important;
        position: relative !important;
    }

    /* 快速切換按鈕確保可點擊 */
    .quick-btn {
        z-index: 101 !important;
        position: relative !important;
    }

    /* 底部遊戲控制區域提高層級 */
    .game-footer {
        z-index: 200 !important;
        position: relative !important;
        background: var(--color-bg-game) !important;
    }
}

/* ========================================
   M1: 主選單標題斷行修復
   問題：「選一個遊戲吧！」被拆成兩行
   ======================================== */

@media (max-width: 600px) {

    /* 縮小標題字體 */
    .menu-header h1,
    .menu-title {
        font-size: 24px !important;
        white-space: nowrap !important;
        letter-spacing: normal !important;
    }

    /* 時鐘區域縮小 */
    .premium-clock {
        transform: scale(0.7) !important;
        margin-bottom: -16px !important;
    }

    /* 遊戲網格緊湊化 */
    .game-grid {
        gap: 12px !important;
        padding: 12px !important;
    }

    /* 遊戲卡片縮小 */
    .game-card {
        min-height: 120px !important;
        padding: 10px !important;
    }

    .card-icon {
        font-size: 36px !important;
    }

    .card-title {
        font-size: 14px !important;
    }
}

/* ========================================
   M2: 故事面板底部抽屜修復
   問題：佔滿全螢幕，不像抽屜
   🔧 2025-12-26 20:15 修復：增加默認隱藏邏輯
   🔧 2025-12-26 20:20 修復：強制完全隱藏在視窗外
   ======================================== */

@media (max-width: 900px) {

    /* 🔧 故事面板手機版 - 強制完全隱藏 */
    .stories-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 40vh !important;
        /* 最高只佔 40% 螢幕 */
        overflow-y: auto !important;

        /* 🔧 強制隱藏在視窗外 */
        transform: translateY(100%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

        /* 動畫過渡 */
        transition:
            transform 0.3s ease-out,
            visibility 0.3s,
            opacity 0.3s !important;

        z-index: 99999 !important;
        border-radius: 20px 20px 0 0 !important;
        background: linear-gradient(180deg, #FFF9E8 0%, #FFEFD5 100%) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    }

    /* 🔧 只有激活時才從底部滑出 */
    .stories-panel.active {
        transform: translateY(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 故事面板內容緊湊化 */
    .story-card {
        padding: 12px !important;
    }

    .story-emoji {
        font-size: 40px !important;
    }

    .story-content {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* BGM 按鈕排列緊湊 */
    .bgm-selector {
        gap: 8px !important;
    }

    .bgm-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }

    /* 🔧 故事面板標題欄樣式 */
    .stories-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    /* 🔧 關閉按鈕樣式 */
    .stories-close-btn {
        width: 36px !important;
        height: 36px !important;
        border: none !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #666 !important;
        transition: all 0.2s !important;
    }

    .stories-close-btn:active {
        background: rgba(255, 107, 107, 0.3) !important;
        color: #FF6B6B !important;
        transform: scale(0.9) !important;
    }
}

/* ========================================
   🔧 全局文字溢出修復 (2025-12-26 20:25)
   問題：遊戲中文字超出螢幕
   ======================================== */

@media (max-width: 600px) {

    /* 強制所有文字容器不溢出 */
    .game-prompt,
    .counting-prompt,
    .prompt-text,
    .result-title,
    .result-message,
    .story-content,
    .story-moral,
    .card-title,
    .menu-title,
    .splash-title,
    .splash-subtitle,
    h1,
    h2,
    h3,
    p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 遊戲提示文字響應式 */
    .game-prompt {
        font-size: 18px !important;
        padding: 0 16px !important;
        text-align: center !important;
    }

    /* 數數看遊戲提示 */
    .counting-prompt {
        padding: 0 12px !important;
    }

    .prompt-text {
        font-size: 16px !important;
    }

    .target-number {
        font-size: 48px !important;
    }

    /* 結果頁面文字 */
    .result-title {
        font-size: 24px !important;
    }

    .result-message {
        font-size: 16px !important;
        padding: 0 16px !important;
    }

    /* 強制所有遊戲容器不溢出 */
    .counting-game,
    .shapes-game,
    .memory-game,
    .weather-game,
    .drum-game,
    .rhythm-game,
    .stickers-game,
    .bubbles-game,
    .squeeze-ball-game,
    .drawing-game,
    .colors-game,
    .animals-game {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* 遊戲區域整體限制 */
    #game-area {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }
}

/* ========================================
   M3: 形狀遊戲佈局修復
   問題：目標區域垂直堆疊
   ======================================== */

@media (max-width: 600px) {

    /* 形狀目標區域水平排列 */
    .shape-targets,
    .drop-zones {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* 目標區域縮小 */
    .drop-zone,
    .shape-target {
        width: 60px !important;
        height: 60px !important;
    }

    /* 可拖動形狀縮小 */
    .draggable-shape {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ========================================
   M4: 顏色遊戲比例修復
   問題：蔬菜圖片太小，按鈕太大
   ======================================== */

@media (max-width: 600px) {

    /* 顏色遊戲主圖放大 */
    .color-target,
    .target-image {
        font-size: 64px !important;
        min-height: 80px !important;
    }

    /* 顏色選項縮小 */
    .color-options {
        gap: 8px !important;
    }

    .color-option,
    .color-btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   通用遊戲區域優化
   ======================================== */

@media (max-width: 600px) {

    /* 遊戲頂部區域緊湊化 */
    .game-header {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    .game-title {
        font-size: 18px !important;
    }

    /* 進度條區域 */
    .progress-container {
        padding: 4px 8px !important;
    }

    /* 遊戲區域最大化 */
    #game-area {
        padding: 8px !important;
        min-height: calc(100vh - 180px) !important;
    }

    /* 動物/水果等大圖標遊戲 */
    .animal-grid,
    .fruit-grid,
    .vehicle-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .animal-btn,
    .fruit-btn,
    .vehicle-btn {
        font-size: 48px !important;
        min-height: 80px !important;
    }
}

/* ========================================
   數數看遊戲優化 (L2)
   ======================================== */

@media (max-width: 600px) {

    /* 數字顯示縮小 */
    .target-number {
        font-size: 64px !important;
    }

    /* 數數物件區域 */
    .counting-items {
        gap: 8px !important;
    }

    .counting-item {
        font-size: 32px !important;
    }
}

/* ========================================
   主選單家長按鈕位置修復 (L1)
   ======================================== */

@media (max-width: 600px) {

    /* 家長按鈕移到安全位置 */
    #parent-gate-btn,
    .parent-gate-btn {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 500 !important;
        font-size: 14px !important;
        padding: 6px 10px !important;
    }
}

/* ========================================
   🚀 第三輪修復 (2025-12-26 19:12)
   根據大量手機版截圖採樣分析
   ======================================== */

/* ========================================
   C2: 主選單單欄佈局（嚴重）
   問題：375px 下雙欄卡片右側被切割
   ======================================== */

@media (max-width: 600px) {

    /* 主選單遊戲網格改為單欄 */
    .game-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 16px !important;
    }

    /* 遊戲卡片撐滿寬度 */
    .game-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100px !important;
    }

    /* 教育益處標籤緊湊化 */
    .expert-benefit {
        padding: 8px !important;
    }

    .benefit-desc {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}

/* ========================================
   C3: 遊戲內容頂部間距（嚴重）
   問題：天氣等遊戲第一排被標題遮擋
   ======================================== */

@media (max-width: 600px) {

    /* 統一遊戲區域上邊距 */
    #game-area {
        padding-top: 20px !important;
    }

    /* 天氣遊戲特別處理 */
    .weather-grid {
        margin-top: 20px !important;
    }

    /* 水果/身體等卡片網格 */
    .fruit-grid,
    .body-grid {
        margin-top: 16px !important;
    }

    /* 遊戲標題區域緊湊化 */
    .game-header {
        min-height: 48px !important;
        padding: 8px 16px !important;
    }
}

/* ========================================
   C4: 快速切換欄層級修復（嚴重）
   問題：部分遊戲中快速切換欄不可見
   ======================================== */

@media (max-width: 600px) {

    /* 🔧 2025-12-26 20:18 修復：底部遊戲控制區域 - 強制可點擊 */
    .game-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
        /* 最高層級 */
        background: linear-gradient(to top, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)) !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        padding-bottom: env(safe-area-inset-bottom, 8px) !important;

        /* 🔧 強制可點擊 */
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* 🔧 快速切換區域強制可見可點擊 */
    #quick-switch-area,
    .quick-switch-area,
    .quick-switch-container,
    .quick-switch {
        z-index: 1000000 !important;
        /* 超高層級 */
        position: relative !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* 🔧 快速切換按鈕強制可點擊 */
    .quick-btn {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        z-index: 1000001 !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }

    /* 🔧 確保左右箭頭按鈕也可點擊 */
    #quick-scroll-left,
    #quick-scroll-right {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        z-index: 1000001 !important;
    }

    /* 遊戲容器為底部留空間 */
    #game-container {
        padding-bottom: 100px !important;
    }
}

/* ========================================
   M1: 啟動頁標題單行顯示（中等）
   問題：「寶寶學習樂園」斷成兩行
   ======================================== */

@media (max-width: 600px) {

    /* 啟動頁標題強制單行 */
    .splash-title {
        font-size: 28px !important;
        white-space: nowrap !important;
        letter-spacing: 2px !important;
    }

    /* 啟動頁副標題 */
    .splash-subtitle {
        font-size: 16px !important;
        white-space: nowrap !important;
    }
}

/* ========================================
   M2: 小精靈遊戲模式避讓（中等）
   問題：遮擋貼貼樂/疊疊樂底部選單
   ======================================== */

@media (max-width: 600px) {

    /* 遊戲模式下小精靈進一步上移 */
    .rive-companion.pos-game {
        bottom: 120px !important;
        right: 4px !important;
        opacity: 0.85 !important;
    }

    /* 貼貼樂/疊疊樂等有底部選單的遊戲 */
    #game-area:has(.sticker-palette),
    #game-area:has(.block-palette) {
        padding-bottom: 120px !important;
    }
}

/* ========================================
   M3: 記憶卡片邊距增加（中等）
   問題：4x2 卡片緊貼螢幕邊緣
   ======================================== */

@media (max-width: 600px) {

    /* 記憶遊戲網格增加內邊距 */
    .memory-grid {
        padding: 16px !important;
        gap: 12px !important;
    }

    /* 記憶卡片縮小 */
    .memory-card {
        width: 70px !important;
        height: 70px !important;
    }

    .memory-card-inner {
        font-size: 32px !important;
    }
}

/* ========================================
   M4: 數數看物件網格化（中等）
   問題：物件水平排列超出螢幕
   ======================================== */

@media (max-width: 600px) {

    /* 數數物件改為網格 */
    .counting-items {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        max-width: 280px !important;
        margin: 16px auto !important;
    }

    /* 確保每個物件可點擊 */
    .counting-item {
        min-width: 60px !important;
        min-height: 60px !important;
        font-size: 36px !important;
    }
}

/* ========================================
   M5: 形狀遊戲間距優化（中等）
   問題：標籤文字與形狀陰影重疊
   ======================================== */

@media (max-width: 600px) {

    /* 形狀目標區域增加高度 */
    .drop-zone {
        min-height: 80px !important;
        padding-top: 24px !important;
    }

    /* 標籤文字上移 */
    .drop-zone-label {
        position: absolute !important;
        top: 4px !important;
        font-size: 12px !important;
    }

    /* 可拖動形狀 */
    .draggable-shape {
        margin: 8px !important;
    }
}

/* ========================================
   L1: 快速切換按鈕間距（輕微）
   問題：17 個按鈕間距太近
   ======================================== */

@media (max-width: 600px) {

    .quick-btn {
        margin: 0 6px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    #quick-switch-area {
        gap: 12px !important;
        padding: 8px 16px !important;
    }

    /* 左右箭頭按鈕增大 */
    #quick-scroll-left,
    #quick-scroll-right {
        min-width: 36px !important;
        font-size: 18px !important;
    }
}

/* ========================================
   L2: 注音符號放大（輕微）
   問題：rt 標籤字體太小
   ======================================== */

@media (max-width: 600px) {

    rt {
        font-size: 10px !important;
        line-height: 1.2 !important;
        color: #666 !important;
    }

    /* 遊戲標題的注音 */
    .game-title rt,
    .card-title rt {
        font-size: 8px !important;
    }
}

/* ========================================
   L3: 敲敲鼓底部間距（輕微）
   問題：提示文字過低
   ======================================== */

@media (max-width: 600px) {

    .drum-hint,
    .game-hint {
        margin-bottom: 80px !important;
        font-size: 14px !important;
        color: #555 !important;
        /* 提升對比度至 WCAG AA (≥4.5:1) */
    }
}

/* ========================================
   L4: 進度條頂部間距（輕微）
   問題：分數/進度緊貼頂部
   ======================================== */

@media (max-width: 600px) {

    .progress-bar,
    .score-display,
    .game-progress {
        margin-top: 8px !important;
    }
}

/* ========================================
   額外優化：遊戲區域整體佈局
   ======================================== */

@media (max-width: 600px) {

    /* 確保遊戲內容不被底部導航遮擋 */
    #game-area {
        min-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 動物/交通工具網格優化 */
    .animal-grid,
    .vehicle-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 16px !important;
    }

    /* 大按鈕確保可點擊 */
    .animal-btn,
    .vehicle-btn,
    .fruit-btn {
        min-height: 100px !important;
        font-size: 48px !important;
    }

    /* 回饋區域固定底部 */
    .feedback-fixed {
        bottom: 80px !important;
    }
}

/* ========================================
   🛡️ 防禦性視覺修復 (2025-12-26 Code Audit)
   針對代碼靜態分析發現的潛在風險進行修復
   ======================================== */

@media (max-width: 600px) {

    /* 1. 全局字體大小防護 */
    /* 確保除注音、標籤、emoji外的所有文字至少 16px */
    p,
    span:not(.card-icon):not(.weather-emoji):not(.story-emoji):not(.feedback-emoji):not(.deco):not(.result-emoji),
    div:not(.decorations),
    button:not(.swh-tool):not(.story-nav-btn):not(.quick-btn) {
        font-size: 16px !important;
    }

    /* 允許注音和小標籤使用較小字體，但不得低於 12px */
    rt {
        font-size: 12px !important;
    }

    .benefit-desc,
    .drop-zone-label,
    .companion-name {
        font-size: 13px !important;
    }

    /* 2. 遊戲卡片內容保護 */
    /* 移除 overflow:hidden 以免切斷注音或陰影 */
    .game-card {
        overflow: visible !important;
        contain: layout style;
    }

    /* 3. 確保所有遊戲容器都有頂部安全距離 */
    /* 防止被標題列或瀏覽器 UI 遮擋 */
    .weather-game,
    .counting-game,
    .memory-game,
    .shapes-game,
    .colors-game {
        padding-top: 24px !important;
        margin-top: 20px !important;
    }

    /* 4. 天氣遊戲網格強制適配 */
    /* 覆蓋 JS 注入的內聯樣式風險 */
    .weather-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .weather-btn {
        min-height: 110px !important;
        width: 100% !important;
        flex-direction: column !important;
    }

    /* 5. 確保輸入框在 iOS 上不縮放 (16px rule) */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* 6. 修正標題列 Z-Index 確保在吉祥物之上 */
    .game-header,
    .menu-header {
        z-index: 800 !important;
        position: relative !important;
    }

    /* 7. 主選單單列防禦 (針對 375px) */
    #main-menu .game-grid {
        display: grid !important;
        grid-template-columns: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ========================================
   🔧 第四輪修復 (2025-12-26 19:40)
   根據 TODO List 完成剩餘問題修復
   ======================================== */

@media (max-width: 600px) {

    /* P2: 捏捏球/敲敲鼓 底部導航修復 */
    /* 確保這兩個遊戲的容器不會遮擋底部導航 */
    .squeeze-ball-game,
    .drum-game {
        padding-top: 24px !important;
        padding-bottom: 120px !important;
        margin-top: 20px !important;
        overflow: visible !important;
    }

    /* P2: 確保樂器/球容器不遮擋底部 */
    .ball-container,
    .instruments-grid {
        z-index: 10 !important;
        position: relative !important;
    }

    /* P3: 形狀遊戲目標區標籤重疊修復 */
    .shapes-game .drop-zone {
        min-height: 90px !important;
        padding-top: 28px !important;
        position: relative !important;
    }

    .shapes-game .drop-zone-label {
        position: absolute !important;
        top: 6px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.9) !important;
        padding: 2px 8px !important;
        border-radius: 8px !important;
        z-index: 10 !important;
    }

    /* P4: 記憶遊戲標題間距修復 */
    .memory-game .game-title,
    .memory-game .card-title {
        white-space: nowrap !important;
        letter-spacing: 0 !important;
    }

    /* P4: 記憶卡片網格優化 */
    .memory-grid {
        gap: 10px !important;
        padding: 12px !important;
    }

    .memory-card {
        width: 65px !important;
        height: 65px !important;
    }

    /* P5: 確保所有遊戲容器都包含在修復範圍內 */
    .animals-game,
    .vehicles-game,
    .fruits-game,
    .body-parts-game,
    .hide-seek-game,
    .bubbles-game,
    .stickers-game,
    .stacking-game,
    .size-compare-game,
    .emotions-game,
    .drawing-game {
        padding-top: 24px !important;
        margin-top: 20px !important;
        padding-bottom: 100px !important;
    }

    /* 額外：確保 Emoji 圖標不受字體限制 */
    .card-icon,
    .weather-emoji,
    .story-emoji,
    .feedback-emoji,
    .result-emoji,
    .instrument-emoji,
    .ball-face,
    .deco {
        font-size: inherit !important;
    }

    /* 放大遊戲中的 emoji 確保清晰 */
    .game-btn .weather-emoji,
    .instrument-emoji {
        font-size: 48px !important;
    }

    .ball-face {
        font-size: 48px !important;
    }
}

/* ========================================
   🔧 第五輪修復 (2025-12-26 20:02)
   Vision-Test 代碼審計結果修復
   統一覆蓋所有遊戲內聯樣式問題
   ======================================== */

@media (max-width: 600px) {

    /* ----------------------------------------
       VT-1: 對比度統一修復
       問題：多個遊戲使用 color: #888 對比度不足
       修復：統一改為 #555 以符合 WCAG AA (≥4.5:1)
       ---------------------------------------- */
    .squeeze-hint,
    .rhythm-hint,
    .tray-label,
    .scene-btn:not(.active),
    .song-btn:not(.active) {
        color: #555 !important;
    }

    /* ----------------------------------------
       VT-2: 捏捏球遊戲響應式優化
       問題：ball-container 高度固定 300px
       修復：使用 dvh 並限制最小高度
       ---------------------------------------- */
    .ball-container {
        height: auto !important;
        min-height: 200px !important;
        max-height: 280px !important;
    }

    .ball {
        width: 100px !important;
        height: 100px !important;
    }

    .ball-face {
        font-size: 40px !important;
    }

    /* ----------------------------------------
       VT-3: 樂器遊戲網格優化
       問題：3欄網格在窄屏上按鈕太小
       修復：改為 2 欄，增加按鈕大小
       ---------------------------------------- */
    .instruments-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .instrument-btn {
        min-height: 100px !important;
        padding: 16px 8px !important;
    }

    /* ----------------------------------------
       VT-4: 貼貼樂遊戲優化
       問題：貼紙選單按鈕太小、場景選擇按鈕間距不足
       修復：增加觸控區域
       ---------------------------------------- */
    .sticker-item {
        font-size: 36px !important;
        padding: 12px !important;
        min-width: 56px !important;
        min-height: 56px !important;
    }

    .scene-btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 16px !important;
    }

    /* 貼紙畫布使用 dvh 優化 */
    .sticker-canvas {
        aspect-ratio: 4/3 !important;
        min-height: 180px !important;
        max-height: 50dvh !important;
    }

    /* ----------------------------------------
       VT-5: 數數看遊戲優化
       問題：數字顯示太大，佔用過多空間
       修復：縮小數字，增加物件點擊區域
       ---------------------------------------- */
    .target-number {
        font-size: 56px !important;
    }

    .counting-item {
        width: 80px !important;
        height: 80px !important;
        font-size: 40px !important;
    }

    .items-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    /* ----------------------------------------
       VT-6: 節奏遊戲優化
       問題：歌曲按鈕觸控區太小
       修復：增加高度和字體
       ---------------------------------------- */
    .song-btn {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }

    .tap-button {
        width: 100px !important;
        height: 100px !important;
    }

    .tap-emoji {
        font-size: 40px !important;
    }

    .rhythm-stage {
        width: 160px !important;
        height: 160px !important;
    }

    /* ----------------------------------------
       VT-7: 泡泡遊戲高度修復
       問題：使用 calc(100vh - 200px) 在 iOS 有問題
       修復：同時使用 vh 和 dvh（漸進增強）
       ---------------------------------------- */
    .bubbles-game {
        height: calc(100vh - 200px) !important;
        height: calc(100dvh - 200px) !important;
        min-height: 350px !important;
        max-height: 550px !important;
    }

    /* ----------------------------------------
       VT-8: 形狀遊戲優化
       問題：拖放區域在窄屏上可能重疊
       修復：增加間距並優化放置區
       ---------------------------------------- */
    .drop-zones {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    .drop-zone {
        min-width: 100px !important;
        min-height: 100px !important;
        padding: 12px !important;
    }

    .shape-item {
        width: 80px !important;
        height: 80px !important;
    }

    .draggable-shapes {
        gap: 16px !important;
    }

    /* ----------------------------------------
       VT-9: 統一遊戲容器底部間距
       問題：部分遊戲底部被快速切換欄遮擋
       修復：確保所有遊戲有足夠的底部空間
       ---------------------------------------- */
    .counting-game,
    .rhythm-game,
    .stickers-game,
    .squeeze-ball-game {
        padding-bottom: 130px !important;
    }
}