/* ================================================================
   PROJECT MIRROR - ULTIMATE STYLE
   ================================================================
   Cyberpunk 2077 Instagram 美學 + 結局卡片系統
   版本: 14.0 ULTIMATE
   ================================================================ */

:root {
    --a11y-font-scale: 1;        /* 無障礙字級倍率（A−/A＋ 調整） */
    /* 三心顏色系統 */
    --voice-vanity: #ff0080;     /* 妻音 (粉紅 - 自戀) */
    --voice-fear: #00ffff;       /* 妾音 (青色 - 恐懼) */
    --voice-utility: #ffff00;    /* 客音 (黃色 - 理性) */
    
    /* 第二章三心 */
    --voice-ambition: #ff4500;   /* 野心 (橘紅) */
    --voice-guilt: #9370db;      /* 愧疚 (紫色) */
    --voice-survival: #32cd32;   /* 求生 (綠色) */
    
    /* 洞察力 */
    --insight-color: #00ff9f;
    
    /* Cyberpunk 主題色 */
    --neon-pink: #ff0080;
    --neon-cyan: #00ffff;
    --neon-yellow: #ffff00;
    --neon-green: #00ff9f;
    
    /* 背景 */
    --bg-dark: #0a0e27;
    --bg-darker: #050810;
    --bg-card: #1a1e3a;
    
    /* 文字 */
    --text-primary: #ffffff;
    --text-secondary: #b4b4b4;
    --text-dim: #666666;
    
    /* 特效 */
    --glow-intensity: 0 0 20px;
    --scan-line-color: rgba(0, 255, 255, 0.1);
}

/* ================================================================
   基礎佈局 - 全螢幕沉浸式
   ================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* ================================================================
   [v17.4] 場景背景系統 — 依場景類別切換情境圖
   ================================================================ */
#bg-layer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
#bg-layer::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 暗色漸層罩：頂部較亮、下方加深，確保劇情文字可讀 */
    background: linear-gradient(
        to bottom,
        rgba(5, 8, 16, 0.55) 0%,
        rgba(5, 8, 16, 0.72) 45%,
        rgba(5, 8, 16, 0.88) 100%
    );
}
body[data-bg] #bg-layer { opacity: 1; }

body[data-bg="bedroom_mirror"] #bg-layer { background-image: url('assets/images/bg_bedroom_mirror.webp'); }
body[data-bg="studio_stage"]   #bg-layer { background-image: url('assets/images/bg_studio_stage.webp'); }
body[data-bg="corp_office"]    #bg-layer { background-image: url('assets/images/bg_corp_office.webp'); }
body[data-bg="social_storm"]   #bg-layer { background-image: url('assets/images/bg_social_storm.webp'); }
body[data-bg="night_alone"]    #bg-layer { background-image: url('assets/images/bg_night_alone.webp'); }
body[data-bg="ending_light"]   #bg-layer { background-image: url('assets/images/bg_ending_light.webp'); }

/* 有背景圖時，原本的 body 漸層與網格稍微淡化，避免雜訊 */
/* 排除 echo-chamber 狀態，讓紅色預警特效維持原本強度 */
body[data-bg]:not(.echo-chamber)::before { opacity: 0.15; }

/* Cyberpunk 背景網格 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(0deg, transparent 24%, var(--scan-line-color) 25%, var(--scan-line-color) 26%, transparent 27%, transparent 74%, var(--scan-line-color) 75%, var(--scan-line-color) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, var(--scan-line-color) 25%, var(--scan-line-color) 26%, transparent 27%, transparent 74%, var(--scan-line-color) 75%, var(--scan-line-color) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
}

/* 掃描線動畫 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 255, 255, 0.05) 50%,
        transparent 100%
    );
    animation: scanline 8s linear infinite;
    pointer-events: none;
    z-index: 999;
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* ================================================================
   遊戲容器
   ================================================================ */

#game-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
    z-index: 1;
}

/* ================================================================
   標題區 - Instagram 風格 Header
   ================================================================ */

.game-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 30px;
    background: rgba(26, 30, 58, 0.6);
    border-radius: 20px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
}

.game-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        var(--neon-cyan),
        var(--neon-pink),
        transparent
    );
    animation: neon-sweep 3s ease-in-out infinite;
}

@keyframes neon-sweep {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

h1 {
    font-size: 2.5em;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(255, 0, 128, 0.5);
    letter-spacing: 2px;
}

.subtitle {
    font-size: 0.9em;
    color: var(--neon-yellow);
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.8;
}

/* ================================================================
   三心儀表板 - HUD 風格
   ================================================================ */

#voices-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 40px;
    padding: 20px;
    background: rgba(10, 14, 39, 0.8);
    border-radius: 15px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.voice-bar {
    position: relative;
}

.voice-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.voice-label span:first-child {
    opacity: 0.7;
}

.voice-label span:last-child {
    font-weight: 700;
}

.voice-progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.voice-fill {
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* 發光效果 */
.voice-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 三心顏色 */
.voice-bar[data-voice="vanity"] .voice-fill { background: var(--voice-vanity); }
.voice-bar[data-voice="fear"] .voice-fill { background: var(--voice-fear); }
.voice-bar[data-voice="utility"] .voice-fill { background: var(--voice-utility); }

.voice-bar[data-voice="vanity"] .voice-label { color: var(--voice-vanity); }
.voice-bar[data-voice="fear"] .voice-label { color: var(--voice-fear); }
.voice-bar[data-voice="utility"] .voice-label { color: var(--voice-utility); }

/* 洞察力顯示 */
#insight-display {
    text-align: center;
    padding: 15px;
    margin-bottom: 30px;
    background: rgba(0, 255, 159, 0.1);
    border-radius: 10px;
    border: 1px solid var(--insight-color);
    font-size: 1.1em;
    font-weight: 600;
    color: var(--insight-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 0 20px rgba(0, 255, 159, 0.3);
}

/* ================================================================
   場景卡片 - Instagram Post 風格
   ================================================================ */

#scene-container {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

/* Glitch 效果邊框 */
#scene-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        var(--neon-cyan),
        var(--neon-pink),
        var(--neon-yellow),
        var(--neon-cyan)
    );
    background-size: 300% 300%;
    animation: gradient-shift 4s ease infinite;
    opacity: 0.3;
    border-radius: 20px;
    z-index: -1;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 說話者標籤 */
.speaker {
    font-size: 0.9em;
    color: var(--neon-cyan);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.3);
}

/* [U179] 中文子句不拆散：斷行只落在標點後；子句超寬時 inline-block 內部自動退回逐字換行 */
.nobr { display: inline-block; }

/* 場景文本 */
.scene-text {
    font-size: calc(1.1em * var(--a11y-font-scale, 1));
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

/* ================================================================
   冰山註解系統 - 三次點擊解鎖
   ================================================================ */

/* 冰山註解：原本整段純黃 (#ffff00) + 虛線，長段落會變成刺眼的「教科書」黃牆。
   改為內斂的暖金、極淡點線底線，長段照樣好讀；結局卡內再進一步收斂。 */
.subtext-trigger {
    position: relative;
    color: #e0c074;
    cursor: pointer;
    transition: color 0.25s ease;
    border-bottom: 1px dotted rgba(224, 192, 116, 0.35);
}

.subtext-trigger:hover {
    color: #f3d98a;
}

/* 結局卡內的註解不再搶戲：跟正文同色，只用極淡底線暗示可點 */
.ending-card .subtext-trigger {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.22);
}
.ending-card .subtext-trigger:hover { color: #fff !important; }

.subtext-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(10, 14, 39, 0.95);
    color: var(--neon-cyan);
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 0.85em;
    max-width: 400px;
    white-space: normal;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    border: 1px solid var(--neon-cyan);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.4);
}

.subtext-trigger:hover .subtext-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* ================================================================
   選項按鈕 - Cyberpunk 風格
   ================================================================ */

#choices-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.choice-btn {
    background: rgba(26, 30, 58, 0.8);
    color: var(--text-primary);
    border: 2px solid var(--neon-cyan);
    padding: 20px 30px;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: left;
}

/* 按鈕動畫背景 */
.choice-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.choice-btn:hover::before {
    left: 100%;
}

.choice-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--neon-pink);
    transform: translateX(10px);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

.choice-btn:active {
    transform: translateX(10px) scale(0.98);
}

/* 不同類型的選項顏色 */
.choice-btn[data-type="vanity"] {
    border-color: var(--voice-vanity);
}

.choice-btn[data-type="fear"] {
    border-color: var(--voice-fear);
}

.choice-btn[data-type="utility"] {
    border-color: var(--voice-utility);
}

/* ================================================================
   結局卡片系統 - 新增!
   ================================================================ */

.ending-card {
    animation: ending-reveal 1s ease-out;
    position: relative;
    overflow: hidden;
    background: radial-gradient(130% 100% at 50% -10%, rgba(110,130,240,0.16) 0%, rgba(13,16,32,0.97) 58%) !important;
    border: 1px solid rgba(150,168,255,0.22) !important;
    border-radius: 18px !important;
    padding: 42px 30px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}

@keyframes ending-reveal {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.ending-card h1, .ending-card h2, .ending-card h3 {
    color: #eaeefc !important;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-align: center;
    text-shadow: 0 0 24px rgba(125,145,255,0.45);
    margin-bottom: 18px;
}

.ending-card h1 { font-size: 2.1em; }
.ending-card h2 { font-size: 1.7em; }

.ending-card p {
    color: rgba(255,255,255,0.82) !important;
    font-size: 1.04em;
    line-height: 2.05;
}

.ending-card p b { color: #fff !important; font-weight: 600; }

/* 柔和環境光（不再大幅位移，避免閃爍/模糊感） */
.ending-card::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background: radial-gradient(circle, rgba(140,160,255,0.06) 0%, transparent 65%);
    animation: ending-glow 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ending-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ===== B5 結局分頁播放器（電影感一頁一句） ===== */
.cine-slide {
    font-size: calc(clamp(1.1rem, 3vw, 1.5rem) * var(--a11y-font-scale, 1));
    line-height: 1.7;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-align: center;
    color: #eef;
    max-width: 640px;
    margin: 0 auto;
    text-shadow: 0 0 22px rgba(120,140,255,0.35);
    animation: fadeIn 0.55s ease-out;
}
.cine-slide b { color: #fff; font-weight: 600; }
.slide-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.slide-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.22); transition: all 0.3s ease; }
.slide-dot.on { background: #9fb4ff; box-shadow: 0 0 8px rgba(140,160,255,0.7); transform: scale(1.3); }
/* 負面/迷失結局換頁時的雜訊爆裂（沿用既有 glitch keyframe） */
.glitch-burst { animation: glitch 0.28s steps(2) 2 !important; }

/* ===== 無障礙 ===== */
.choice-btn { font-size: calc(1em * var(--a11y-font-scale, 1)); }

#a11y-panel {
    position: fixed; top: 52px; right: 8px; z-index: 2100;
    background: rgba(10,14,39,0.97); border: 1px solid var(--neon-cyan);
    border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column;
    gap: 10px; max-width: 92vw; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#a11y-panel.hidden { display: none; }
#a11y-panel .a11y-title { color: var(--neon-cyan); font-weight: 700; font-size: 0.85rem; }
.a11y-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #cde; }
.a11y-row button {
    background: #223; color: var(--neon-cyan); border: 1px solid var(--neon-cyan);
    border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 700; font-size: 0.85rem;
}
.a11y-row button:hover { background: var(--neon-cyan); color: #000; }
.a11y-row label { cursor: pointer; }

/* 減少動態 / 關閉刺眼特效（光敏性安全；OS 要求時預設開啟） */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
    animation: none !important;
    transition: none !important;
}
/* 同溫層紅光與雜訊：保留淡淡靜態提示、移除閃爍 */
body.a11y-reduce-motion.echo-chamber::before,
body.a11y-reduce-motion.echo-chamber::after,
body.a11y-reduce-motion #filter-overlay {
    opacity: 0.15 !important;
}
@media (prefers-reduced-motion: reduce) {
    .glitch-burst, body.echo-chamber::before, body.echo-chamber::after { animation: none !important; }
}

/* 易讀模式：加大行距/字距 + 較好辨識的字型堆疊（離線安全、中英通用、不貼標籤） */
body.a11y-readable .scene-text,
body.a11y-readable .choice-btn,
body.a11y-readable .cine-slide,
body.a11y-readable .speaker,
body.a11y-readable #report-summary-content {
    font-family: "Noto Sans TC", "Inter", system-ui, "Segoe UI", sans-serif !important;
    letter-spacing: 0.04em !important;
    word-spacing: 0.12em !important;
    line-height: 2.05 !important;
}

/* 西方哲學回聲卡（結局最後一頁）：淡紫 🌐，與正文/黃色註解區隔 */
.echo-block {
    font-size: clamp(0.95rem, 2.7vw, 1.12rem);
    line-height: 1.85;
    font-weight: 300;
    color: #d8c8ff;
    background: rgba(150,120,255,0.08);
    border: 1px solid rgba(170,140,255,0.3);
    border-left: 3px solid #c4a7ff;
    border-radius: 12px;
    padding: 20px 22px;
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    letter-spacing: 0.02em;
    text-shadow: none;
}
.echo-block .echo-title { display:block; color:#c4a7ff; font-weight:600; letter-spacing:0.06em; margin-bottom:10px; }
.echo-block b { color: #efe8ff; font-weight:600; }

/* ===== #3b 數據儀表板卡（iOS 螢幕使用時間 / Spotify Wrapped 風，可截圖分享）===== */
.stat-screen {
    background: linear-gradient(155deg, #161a30, #0a0c18);
    border: 1px solid rgba(120,140,255,0.28);
    border-radius: 16px;
    padding: 16px 20px;
    max-width: 460px;
    margin: 8px auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    text-align: left;
}
.stat-screen-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.74rem; letter-spacing: 2px; color: #8aa0d8;
    text-transform: uppercase; margin-bottom: 10px;
}
.stat-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stat-row:last-child { border-bottom: none; }
.stat-row > span { color: #aeb8da; font-size: 0.9rem; }
.stat-row > b {
    font-family: 'Share Tech Mono', monospace; font-size: 1.35rem; font-weight: 700;
    color: #eef2ff; white-space: nowrap;
}
.stat-row > b.up { color: #00ff9f; }
.stat-row > b.down { color: #ff7a7a; }

/* ===== #3a 原型角色卡（RPG 屬性卡：大 Emoji + 🌟/⚠️ 條列）===== */
.rpg-emoji { font-size: 3.2rem; line-height: 1; margin: 4px 0 2px; filter: drop-shadow(0 0 16px rgba(120,140,255,0.55)); }
.rpg-block { text-align: left; background: rgba(255,255,255,0.03); border-radius: 12px; padding: 12px 16px; margin-top: 12px; border-left: 3px solid #00ff9f; }
.rpg-block.warn { border-left-color: #ffb066; }
.rpg-block-title { font-weight: 700; font-size: 0.92rem; color: #cdeeff; margin-bottom: 8px; }
.rpg-block .rpg-tag { display: inline-block; font-size: 0.76rem; background: rgba(0,255,159,0.14); color: #9fffcf; border-radius: 10px; padding: 2px 10px; margin-left: 4px; vertical-align: middle; }
.rpg-block.warn .rpg-tag { background: rgba(255,176,102,0.14); color: #ffce9c; }
.rpg-block ul { margin: 0; padding-left: 20px; }
.rpg-block li { font-size: 0.88rem; line-height: 1.95; color: #ccd6f0; margin-bottom: 5px; }

/* v17.3 桌面版：全畫面不捲動佈局 */
@media (min-width: 769px) {
    body {
        overflow: hidden;
        height: 100vh;
    }

    #game-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        padding: 10px 20px;
        overflow: hidden;
    }

    /* 標題壓成迷你條 */
    .game-header {
        margin-bottom: 6px;
        padding: 6px 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 10px;
    }
    .game-header h1 {
        font-size: 1.1em;
        margin-bottom: 0;
        white-space: nowrap;
    }
    .game-header .subtitle {
        font-size: 0.7em;
        letter-spacing: 1px;
    }
    .game-header::before { display: none; }

    /* 三心 + 洞察力合併成一行 */
    #voices-display {
        margin-bottom: 6px;
        padding: 6px 12px;
        gap: 8px;
    }
    .voice-bar .voice-label {
        margin-bottom: 2px;
    }
    .voice-progress {
        height: 4px !important;
    }
    #insight-display {
        margin-bottom: 6px;
        padding: 5px 8px;
        font-size: 0.85em;
        border-radius: 6px;
    }

    /* 場景佔滿剩餘空間，但內容「垂直置中成一組」而非把文字釘在最上、選項釘在最下 */
    #scene-container {
        flex: 1;
        min-height: 0;       /* 關鍵：讓 flex 子元素可以縮小 */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;   /* [Fix] 內容靠上：長劇情從最上面開始，不再被置中裁掉頂端、被迫往上滑 */
        gap: 14px;
        overflow: hidden;
        margin-bottom: 0;
        padding: 22px 32px;
    }

    /* 劇情文字取自然高度、過長才內部捲動；不再 flex:1 撐滿留下空洞 */
    .scene-text {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-gutter: stable;   /* 避免出現捲軸時右緣跳動 */
        margin-bottom: 0;
    }
    #choices-container {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 10px !important;
    }
    /* 按鈕瘦身 */
    .choice-btn {
        padding: 12px 20px !important;
        font-size: 0.92em !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.8em;
    }
    
    #voices-display {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    #scene-container {
        padding: 25px;
    }
    
    .choice-btn {
        padding: 15px 20px;
    }
}

/* ================================================================
   滾動條樣式
   ================================================================ */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-pink);
}

/* ================================================================
   動畫效果庫
   ================================================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-up {
    animation: slideUp 0.6s ease-out;
}

/* ================================================================
   彩蛋:Konami Code 效果
   ================================================================ */

body.konami-active {
    animation: glitch 0.3s infinite;
}

body.konami-active #game-container {
    filter: hue-rotate(180deg);
}
/* ==================== 系統介面補丁 v15.0 ==================== */

/* 1. 系統按鈕 (右上角懸浮) */
#system-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000; /* Mobile Fixed Strategy: 確保高於一切 */
    background: rgba(10, 14, 39, 0.9);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 10px 20px;
    border-radius: 20px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    cursor: pointer;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
}

#system-btn:hover {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 20px var(--neon-cyan);
}

/* [i18n] 語言切換鈕：置於系統選單鈕正下方 */
#lang-btn {
    position: fixed;
    top: 64px;
    right: 20px;
    z-index: 2000;
    background: rgba(10, 14, 39, 0.9);
    border: 1px solid var(--neon-pink);
    color: var(--neon-pink);
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 0.85em;
    cursor: pointer;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 0, 128, 0.2);
    transition: all 0.3s ease;
}

#lang-btn:hover {
    background: var(--neon-pink);
    color: #000;
    box-shadow: 0 0 20px var(--neon-pink);
}

@media (max-width: 767px) {
    #lang-btn {
        top: 52px !important;
        right: 15px !important;
        padding: 5px 10px !important;
    }
}

/* 2. 模態窗 (Glassmorphism) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}

.modal-overlay.hidden {
    display: none;
}

.modal-window {
    width: 90%;
    max-width: 500px;
    background: var(--bg-card);
    border: 2px solid var(--neon-pink);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 50px rgba(255, 0, 128, 0.2);
    animation: slideUp 0.3s ease-out;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.modal-header h2 {
    font-size: 1.2em;
    color: var(--neon-pink);
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
}

/* 3. 存檔槽位樣式 */
.save-slot {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--neon-cyan);
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slot-info {
    font-size: 0.9em;
    color: var(--text-secondary);
}

.slot-actions button {
    background: transparent;
    border: 1px solid var(--neon-yellow);
    color: var(--neon-yellow);
    padding: 5px 10px;
    margin-left: 5px;
    cursor: pointer;
    font-size: 0.8em;
    transition: all 0.2s;
}

.slot-actions button:hover {
    background: var(--neon-yellow);
    color: black;
}

/* 4. 浮動數值 (Floating Numbers) - 黃金庫功能 */
.floating-number {
    position: fixed; /* 使用 Fixed 定位避免被父元素 overflow 切掉 */
    z-index: 9999;
    font-weight: bold;
    font-size: 1.2em;
    pointer-events: none;
    text-shadow: 0 0 5px black;
    animation: floatUp 1.5s ease-out forwards;
}

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-50px) scale(1.2); }
}

/* 5. 系統通知 (Toast) */
.game-toast {
    position: fixed;
    top: 80px; /* 避開頂部按鈕 */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 255, 159, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    z-index: 10000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    animation: fadeIn 0.3s;
}

.game-toast.error {
    background: var(--neon-pink);
    color: white;
}

.game-toast.fade-out {
    opacity: 0;
    transition: opacity 0.5s;
}
/* ========================================
   v16 ENHANCED 新增樣式
   ======================================== */

/* 成就通知 */
.achievement-notification {
    position: fixed;
    top: -150px;
    right: 20px;
    background: linear-gradient(135deg, #1a1e3a 0%, #2d1b4e 100%);
    border: 2px solid var(--neon-cyan);
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.3);
    z-index: 10000;
    transition: top 0.5s ease-out;
    max-width: 350px;
}

.achievement-notification.show {
    top: 80px;
}

.achievement-icon {
    font-size: 40px;
    animation: bounce 0.6s ease-in-out;
}

.achievement-details {
    flex: 1;
}

.achievement-title {
    color: var(--neon-cyan);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.achievement-name {
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 3px;
}

.achievement-desc {
    color: #888;
    font-size: 0.85em;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Konami Code 彩蛋效果 */
body.konami-active {
    animation: rainbow-shift 2s linear, glitch-effect 0.3s infinite;
}

@keyframes rainbow-shift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes glitch-effect {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

/* 音樂按鈕樣式 */
#music-toggle {
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

#music-toggle:hover {
    transform: scale(1.1);
    text-shadow: 0 0 10px var(--neon-cyan);
}

#music-toggle:active {
    transform: scale(0.95);
}

/* 浮動數值動畫增強 */
.floating-number {
    position: fixed;
    pointer-events: none;
    font-weight: bold;
    font-size: 1.5em;
    animation: float-up 1.5s ease-out forwards;
    z-index: 9999;
    text-shadow: 0 0 10px currentColor;
}

@keyframes float-up {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px);
    }
}

/* Toast 訊息增強 */
.game-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--neon-cyan);
    border-radius: 8px;
    padding: 12px 24px;
    color: white;
    z-index: 9999;
    animation: toast-in 0.3s ease-out;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
}

.game-toast.error {
    border-color: var(--neon-pink);
    box-shadow: 0 4px 20px rgba(255, 0, 128, 0.3);
}

.game-toast.success {
    border-color: var(--neon-green);
    box-shadow: 0 4px 20px rgba(0, 255, 159, 0.3);
}

.game-toast.fade-out {
    animation: toast-out 0.3s ease-out forwards;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

/* 立繪圖片增強效果 */
#portrait {
    animation: portrait-fade-in 0.5s ease-out;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));
}

@keyframes portrait-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 手機優化 */
@media (max-width: 768px) {
    .achievement-notification {
        max-width: calc(100% - 40px);
        right: 20px;
        left: 20px;
    }
    
    .achievement-notification.show {
        top: 70px;
    }
    
    #music-toggle {
        font-size: 0.85em;
        padding: 8px 12px;
    }
}

/* 載入動畫 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #050810 0%, #0a0e27 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease-out;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(0, 255, 255, 0.1);
    border-top-color: var(--neon-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: var(--neon-cyan);
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
/* ========================================
   v16.4 TOAST FIX - 通知樣式緊急修復
   ======================================== */

.game-toast {
    /* 1. 強制重置定位：移到上方，避開中間立繪 */
    position: fixed !important;
    top: 130px !important;      /* 放在標題下方 */
    left: 50% !important;
    bottom: auto !important;    /* 關鍵：取消底部定位，防止拉伸 */
    right: auto !important;
    
    /* 2. 修正尺寸：變回小膠囊 */
    transform: translateX(-50%) !important;
    width: auto !important;
    height: auto !important;
    min-width: 150px;           /* 保持最小寬度 */
    max-width: 80vw;
    
    /* 3. 優化外觀：半透明膠囊 */
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid var(--neon-cyan) !important;
    border-radius: 50px !important; /* 圓角膠囊狀 */
    padding: 10px 25px !important;
    
    /* 4. 文字與層級 */
    color: var(--neon-cyan) !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    text-align: center !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    
    z-index: 100000 !important; /* 確保在最上層 */
    pointer-events: none;       /* 關鍵：讓滑鼠可以穿透它點擊後面的東西 */
}

/* 確保消失動畫正常 */
.game-toast.fade-out {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(-20px) !important; /* 往上飄走 */
    transition: all 0.5s ease-out !important;
}
/* ========================================
   v16.5 LAYOUT PATCH - 左右對位立繪系統
   ======================================== */

#portrait-container {
    z-index: 1 !important;
    pointer-events: none;
    position: fixed !important;
    bottom: env(safe-area-inset-bottom, 0px) !important; /* 貼底 + iOS 安全區，避免被底部網址列擋住 */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* 滑順移動效果 */
    
    /* 預設重置定位，由 JS 決定 Left/Right */
    left: auto !important;
    right: auto !important;
    transform: none !important;
    
    /* 讓圖片底邊對齊容器底邊 */
    display: flex;
    align-items: flex-end;
}

/* 圖片尺寸優化：完整顯示 */
#portrait {
    max-height: 90vh !important; /* 增加高度，顯示更多身體 */
    max-width: 50vw;             /* 限制寬度，避免太胖 */
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.5)); /* 增加立體感 */
}

/* --- 位置定義 --- */
/* v17.3 統一靠右：避免立繪壓住左對齊的選項文字 */

/* 鄒忌：靠右 (避免蓋選項) */
#portrait-container[data-pos="left"] {
    right: -8% !important;
    left: auto !important;
}

/* 徐公：靠右 */
#portrait-container[data-pos="right"] {
    right: -8% !important;
    left: auto !important;
}

/* (選用) 如果將來有兩人同框的需求，可以擴充 */
/* 目前引擎暫時只支援單圖，但這樣寫保留了擴充性 */

/* 平板適配 (學校平板 ~768-1024px)：縮小 + 降透明度 + 推到右邊 */
@media (max-width: 1024px) and (min-width: 769px) {
    #portrait {
        max-height: 70vh !important;
        opacity: 0.35 !important;
        filter: brightness(0.5) !important;
    }
    #portrait-container[data-pos="left"],
    #portrait-container[data-pos="right"] {
        right: -15% !important;
        left: auto !important;
    }
}

/* 手機版適配：人物真正分左右、少被截掉 */
@media (max-width: 768px) {
    #portrait {
        max-height: 58vh !important;
        max-width: 78vw !important;
        object-fit: contain !important;
    }
    #portrait-container[data-pos="left"] {
        left: -2% !important;
        right: auto !important;
    }
    #portrait-container[data-pos="right"] {
        right: -2% !important;
        left: auto !important;
    }
}

/* ========================================
   v16.9 VISUAL FIX - 結局文字高對比修正
   ======================================== */

/* 針對結局卡片裡的黃色潛台詞，加上「黑色半透明底」 */
.ending-card .subtext-trigger {
    /* 1. 文字改回亮黃色，因為我們要有黑底了 */
    color: #ffe600 !important; 
    
    /* 2. 關鍵：加上半透明黑底，確保跟背景隔開 */
    background-color: rgba(0, 0, 0, 0.6) !important;
    
    /* 3. 優化外觀：像是一個標籤 */
    padding: 2px 6px !important;
    border-radius: 4px !important;
    
    /* 4. 去掉虛線底線 (因為已經有黑底了，不需要線) */
    border-bottom: none !important;
    text-decoration: none !important;
    
    font-weight: bold !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    
    /* 讓它看起來稍微浮起來 */
    display: inline-block; 
    line-height: 1.4;
    margin: 0 2px;
}

/* 滑鼠移上去的效果 */
.ending-card .subtext-trigger:hover {
    background-color: #ff0080 !important; /* 變成霓虹粉底 */
    color: white !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* 確保一般白字也有足夠的陰影 */
.ending-card p {
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
    font-weight: 500;
}
/* ========================================
   v16.10 SMOOTH FLOW - 絲滑懸浮光影 (取代原本的抽動)
   ======================================== */

/* 1. 定義絲滑懸浮動畫 (只有位移與亮度，沒有變形) */
@keyframes smooth-float {
    0% {
        /* 原點 + 正常亮度 */
        transform: translateY(0);
        filter: brightness(1) drop-shadow(0 0 10px rgba(0, 255, 255, 0.1));
    }
    50% {
        /* 緩慢上浮 4px + 稍微變亮 (吸氣感) */
        transform: translateY(-4px); 
        filter: brightness(1.1) drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));
    }
    100% {
        /* 回到原點 */
        transform: translateY(0);
        filter: brightness(1) drop-shadow(0 0 10px rgba(0, 255, 255, 0.1));
    }
}

/* 2. 應用到容器 */
#portrait-container {
    /* 6秒一個循環，非常緩慢優雅 */
    animation: smooth-float 6s ease-in-out infinite !important;
    
    /* 確保不影響左右定位 (這行很重要) */
    transform-origin: center bottom;
}

/* 3. 徹底移除圖片本體的所有動畫 (消除抽搐源頭) */
#portrait {
    animation: none !important; 
    /* 保持清晰度 */
    backface-visibility: hidden;
    transform: translateZ(0); 
}

/* 手機版進一步減弱，幾乎靜止 */
@media (max-width: 768px) {
    #portrait-container {
        animation: smooth-float 8s ease-in-out infinite !important; /* 更慢 */
    }
}
/* ========================================
   v16.13 RECOVERY FIX - 讓主角清晰回歸 (手機版)
   ======================================== */

@media (max-width: 768px) {
    
    /* 1. 場景容器：保持深色漸層，確保擋得住人物花紋，讓字清晰 */
    #scene-container {
        background: linear-gradient(
            to bottom,
            rgba(5, 8, 16, 0.98) 0%,      /* 上方：全黑，保護標題與第一段話 */
            rgba(5, 8, 16, 0.85) 50%,     /* 中間：稍微透出一點 */
            rgba(5, 8, 16, 0.95) 100%     /* 下方：加深，避免選項按鈕看不清 */
        ) !important;
        backdrop-filter: none !important;
        box-shadow: 0 0 30px rgba(0,0,0,0.9);
        border: 1px solid rgba(0, 255, 255, 0.3);
        z-index: 2 !important; /* [Fix] 降低 z-index，讓立繪能顯示在兩側 */
        padding: 20px 15px !important;
    }

    /* 2. 人物立繪：清晰回歸！（pointer-events:none 不會擋按鈕） */
    #portrait-container {
        z-index: 3 !important; /* [Fix] 高於場景容器，讓立繪從兩側露出 */
        animation: none !important;
        bottom: env(safe-area-inset-bottom, 0px) !important; /* iOS 安全區：避免立繪下緣被 Safari 底列吃掉 */
        opacity: 1 !important; /* 強制完全顯示 */
    }

    /* [Fix] 手機立繪左右分立、不被左右截斷：負位移收到 -2%，避免推出螢幕 */
    #portrait-container[data-pos="left"] {
        left: -2% !important;
        right: auto !important;
        transform: scale(1) !important;
    }
    #portrait-container[data-pos="right"] {
        right: -2% !important;
        left: auto !important;
        transform: scale(1) !important;
    }

    /* [Fix] 圖片本體：放寬寬度 + contain（整張完整顯示、不裁切左右），維持淡化避免遮字 */
    #portrait {
        max-height: 55vh !important;
        max-width: 78vw !important;
        opacity: 0.28 !important;            /* 再淡一點，確保不影響選項閱讀 */
        filter: brightness(0.5) !important;
        object-fit: contain !important;
    }
    /* 選項卡底色加深、更不透明，壓住人物花紋讓字清楚 */
    #choices-container .choice-btn {
        background: rgba(8, 11, 24, 0.92) !important;
        backdrop-filter: blur(2px);
    }

    /* 3. 文字閱讀性優化（字級乘上無障礙倍率，A−/A＋ 在手機才有效） */
    .scene-text {
        font-size: calc(1.1rem * var(--a11y-font-scale, 1)) !important;
        line-height: 1.7 !important;
        text-shadow: 0 2px 5px #000; /* 強力黑影，確保在人物身上也看得到字 */
        color: #fff;
        font-weight: 500;
    }
    
    .speaker {
        font-size: 1.2rem !important;
        color: var(--neon-cyan) !important;
        text-shadow: 0 2px 5px #000;
        margin-bottom: 10px !important;
    }

    /* 4. 按鈕優化 */
    .choice-btn {
        padding: 15px 20px !important;
        margin: 10px 0 !important;
        min-height: 55px !important;
        background: rgba(0, 0, 0, 0.9) !important; /* 按鈕全黑底，確保不被干擾 */
        border: 1px solid var(--neon-cyan);
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    /* 5. 介面微調 */
    .game-header {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }
    .game-header h1 { font-size: 1.4rem !important; }
    .subtitle { display: none; }
    
    #system-btn {
        top: auto !important;
        right: auto !important;
        padding: 5px 8px !important;
    }
}
/* ========================================
   v16.8 THEME PATCH - 第二章主題色覆蓋
   ======================================== */
body.chapter-2-theme {
    /* 核心變數覆寫：將原本的 藍/粉 替換為 橘/紫 */
    --neon-cyan: #ff4500 !important; /* 主色變橘紅 (野心) */
    --neon-pink: #9370db !important; /* 副色變紫色 (愧疚) */
    --neon-yellow: #32cd32 !important; /* 點綴變綠色 (求生) */
    
    /* 調整掃描線顏色 */
    --scan-line-color: rgba(255, 69, 0, 0.1);
}

/* 1. 標題漸層變色 */
body.chapter-2-theme h1 {
    background: linear-gradient(135deg, #ff4500, #9370db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 2. 選項按鈕邊框與懸停光暈 */
body.chapter-2-theme .choice-btn {
    border-color: #ff4500;
}

body.chapter-2-theme .choice-btn:hover {
    background: rgba(255, 69, 0, 0.1);
    border-color: #9370db;
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.5);
}

/* 3. 系統按鈕 (右上角) */
body.chapter-2-theme #system-btn {
    border-color: #ff4500;
    color: #ff4500;
}
body.chapter-2-theme #system-btn:hover {
    background: #ff4500;
    color: #000;
    box-shadow: 0 0 20px #ff4500;
}

/* 4. 浮動數值顏色修正 */
body.chapter-2-theme .floating-number {
    /* 讓加分特效也變成橘色系 */
    text-shadow: 0 0 5px #ff4500;
}

/* ================================================================
   v17 ECHO CHAMBER - 同溫層濾鏡效果
   當 vanity(Ch1) 或 ambition(Ch2) >= 70 時觸發
   ================================================================ */

/* 邊緣紅色光暈 + 輕微 glitch */
body.echo-chamber::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    box-shadow: inset 0 0 80px rgba(255, 30, 30, 0.35),
                inset 0 0 160px rgba(255, 0, 0, 0.15);
    animation: echo-pulse 3s ease-in-out infinite;
}

@keyframes echo-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 文字對比度提高（模擬極端化視角） */
body.echo-chamber .game-text,
body.echo-chamber .choice-text {
    filter: contrast(1.3) saturate(1.4);
    text-shadow: 0 0 2px rgba(255, 100, 100, 0.3);
}

/* 隨機 glitch 閃爍 */
body.echo-chamber::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 0, 0, 0.03) 2px,
        rgba(255, 0, 0, 0.03) 4px
    );
    animation: echo-glitch 0.15s infinite;
}

@keyframes echo-glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, -1px); }
    60% { transform: translate(-1px, 0); }
    80% { transform: translate(1px, 1px); }
    100% { transform: translate(0); }
}

/* ========================================
   v17.3 REPORT SUMMARY - 數據摘要卡片
   ======================================== */

#report-summary-content .summary-section {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 12px;
}

#report-summary-content .summary-section h3 {
    color: var(--neon-cyan);
    font-size: 0.9em;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.15);
    padding-bottom: 5px;
}

#report-summary-content .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.95em;
}

#report-summary-content .summary-row .label {
    color: #aaa;
}

#report-summary-content .summary-row .value {
    color: #fff;
    font-weight: 700;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1em;
}

#report-summary-content .archetype-highlight {
    text-align: center;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 0, 128, 0.1), rgba(0, 255, 255, 0.1));
    border: 1px solid var(--neon-pink);
    border-radius: 10px;
    margin-bottom: 12px;
}

#report-summary-content .archetype-highlight .archetype-name {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--neon-pink);
}

@media (max-width: 768px) {
    #report-summary-modal .modal-window {
        max-width: 100% !important;
        margin: 10px;
        max-height: 95vh !important;
    }
    #report-summary-content .summary-row {
        font-size: 0.9em;
    }
}
/* ================================================================
   v18 版面整理：統一頂部按鈕群 + 手機壓縮高度 + 桌機間距
   （取代原本散落／重疊的 system / manual / lang / music 按鈕）
   ================================================================ */

#top-controls {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 2000;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    max-width: 70vw;
    pointer-events: none;            /* 容器不擋點擊，子按鈕各自開 */
}
#top-controls > * { pointer-events: auto; }

/* 所有頂部小按鈕統一成同尺寸的膠囊（manual/music 原本沒樣式 → 補上） */
.cyber-btn-icon {
    position: static !important;     /* 取消舊的個別 fixed 定位 */
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    margin: 0 !important;
    display: inline-flex; align-items: center;
    background: rgba(10, 14, 39, 0.92);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 7px 13px !important;
    border-radius: 18px !important;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.8rem !important;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.18);
    transition: all 0.25s ease;
}
.cyber-btn-icon:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 18px var(--neon-cyan); }
#lang-btn { border-color: var(--neon-pink) !important; color: var(--neon-pink) !important; }
#lang-btn:hover { background: var(--neon-pink) !important; color: #000 !important; }

/* 桌機：把過大的上方間距收一點，整體更俐落 */
@media (min-width: 769px) {
    #game-container { padding: 28px 20px; }
    .game-header { margin-bottom: 26px; padding: 22px; }
    #voices-display { margin-bottom: 22px; }
    #insight-display { margin-bottom: 20px; }
}

/* 手機：壓縮頂部 HUD，讓劇情與選項幾乎免捲動 */
@media (max-width: 768px) {
    /* 上方留白 48px：把標題/三心整體下推，避開右上角固定按鈕，修正重疊 */
    #game-container { padding: 72px 12px 8px !important; }  /* 上方留白足夠容納（英文時可能換行成兩排的）控制鈕，標題不被蓋 */

    .game-header { padding: 8px !important; margin-bottom: 8px !important; border-radius: 14px; }
    .game-header h1 { font-size: 1.15rem !important; margin-bottom: 0 !important; letter-spacing: 1px; }

    /* 選項收緊：間距與按鈕瘦身，減少上下滾動 */
    #choices-container { gap: 8px !important; }
    .choice-btn {
        padding: 12px 18px !important;
        font-size: calc(0.92em * var(--a11y-font-scale, 1)) !important;
        border-width: 1.5px !important;
    }
    /* 只清掉「遊戲內選項」的外距（它們靠 container gap 排版）；不要動到 modal 內
       靠 margin-bottom 分隔的下載按鈕，否則兩顆會黏在一起 */
    #choices-container .choice-btn { margin: 0 !important; }
    /* modal 內的下載/摘要按鈕：手機上保底留間距，避免黏住 */
    .modal-footer .choice-btn, #report-summary-modal .choice-btn { margin-bottom: 10px !important; }
    /* 手機沒有滑鼠 hover：移除位移與放大，避免點擊錯位 */
    .choice-btn:hover, .choice-btn:active { transform: none !important; }

    #voices-display {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
    }
    .voice-label { font-size: 0.72rem !important; margin-bottom: 3px !important; letter-spacing: 0 !important; }
    .voice-progress { height: 5px !important; }

    #insight-display {
        padding: 7px !important;
        margin-bottom: 10px !important;
        font-size: 0.85rem !important;
        letter-spacing: 1px !important;
        box-shadow: 0 0 12px rgba(0,255,159,0.25) !important;
    }

    /* 四顆按鈕收成一排、不再換行壓到標題 */
    /* 改 wrap：英文模式按鈕較寬時往「下」換行，而不是往左溢出螢幕（會把說明鈕推到訪客徽章底下、按不到）*/
    #top-controls { top: 7px; right: 7px; left: 56px; justify-content: flex-end; gap: 5px; max-width: none; flex-wrap: wrap; }
    .cyber-btn-icon { padding: 5px 8px !important; font-size: 0.64rem !important; border-radius: 14px !important; }

    /* 模式徽章縮小，避免與底部瀏覽器列打架 */
    /* 訪客徽章移到左上空白角，避免蓋住底部選項 */
    #mode-badge { top: 10px !important; bottom: auto !important; left: 10px !important; font-size: 0.62rem !important; padding: 3px 8px !important; z-index: 2000 !important; }
}

/* 手機（≤600px）：頂欄按鈕只留 emoji（隱 .btn-label），縮成右上小簇，
   不再往左壓到左上角的訪客/班級模式徽章（2026-07-22 修 Momo 回報的按鈕重疊）。
   emoji 意義由 title 屬性補足；平板（601–768）仍顯示完整文字（有空間、不重疊）。 */
@media (max-width: 600px) {
    #top-controls .btn-label { display: none; }
    #top-controls .cyber-btn-icon { padding: 5px 9px !important; }
}

/* ================================================================
   v18 開場進場（trailer）：兩位男神剪影 + 神秘標語序列
   ================================================================ */
#intro-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 38%, #0c1030 0%, #05060f 68%, #000 100%);
    overflow: hidden;
    transition: opacity 0.75s ease;
}
#intro-overlay.hidden { display: none; }
#intro-overlay.intro-out { opacity: 0; pointer-events: none; }

.intro-scanlines {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
    animation: introScan 8s linear infinite;
}
@keyframes introScan { from { background-position: 0 0; } to { background-position: 0 60px; } }

.intro-silhouettes { position: absolute; inset: 0; pointer-events: none; }
.intro-sil {
    position: absolute; bottom: 0; height: 86vh; max-height: 880px; opacity: 0;
    will-change: transform, opacity;
}
.intro-sil.left {
    left: -7%; transform: translateX(-70px);
    filter: brightness(0) drop-shadow(0 0 18px var(--neon-cyan)) drop-shadow(0 0 40px rgba(0,255,255,0.5));
    animation: introInLeft 1.7s cubic-bezier(.2,.7,.2,1) 0.2s forwards;
}
.intro-sil.right {
    right: -7%; transform: translateX(70px) scaleX(-1);
    filter: brightness(0) drop-shadow(0 0 18px #ff3da6) drop-shadow(0 0 40px rgba(255,61,166,0.5));
    animation: introInRight 1.7s cubic-bezier(.2,.7,.2,1) 0.45s forwards;
}
@keyframes introInLeft  { to { opacity: 0.92; transform: translateX(0); } }
@keyframes introInRight { to { opacity: 0.92; transform: translateX(0) scaleX(-1); } }

.intro-names {
    position: absolute; bottom: 6%; width: 100%; z-index: 2; pointer-events: none;
    display: flex; justify-content: space-between; padding: 0 9%;
}
.intro-name {
    font-size: 0.8rem; letter-spacing: 4px; opacity: 0; text-shadow: 0 0 12px currentColor;
    animation: introFade 1s ease 2.2s forwards;
}
.intro-name.zou { color: var(--neon-cyan); }
.intro-name.xu  { color: #ff7ac4; }

.intro-content { position: relative; z-index: 3; text-align: center; padding: 24px; max-width: 700px; }
.intro-tagline {
    color: #d7dcea; font-size: clamp(0.95rem, 3.4vw, 1.12rem); line-height: 1.95; letter-spacing: 1px;
    margin: 6px 0; opacity: 0; text-shadow: 0 2px 14px #000;
    animation: introFade 1s ease forwards;
}
.intro-tagline.t1 { animation-delay: 0.6s; }
.intro-tagline.t2 { animation-delay: 1.9s; }
.intro-tagline.t3 { animation-delay: 3.2s; color: #fff; }
@keyframes introFade {
    from { opacity: 0; transform: translateY(10px); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: none; }
}
.intro-title {
    font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 800; letter-spacing: 4px; margin: 20px 0 4px;
    background: linear-gradient(135deg, var(--neon-cyan), #ff3da6);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    opacity: 0; animation: introFade 1.2s ease 3.9s forwards;
}
.intro-sub {
    color: var(--neon-yellow); letter-spacing: 6px; font-size: 0.78rem; text-transform: uppercase;
    opacity: 0; animation: introFade 1s ease 4.4s forwards;
}
.intro-enter {
    margin-top: 26px; padding: 14px 36px; border-radius: 30px; cursor: pointer; border: none;
    font-size: 1rem; font-weight: 700; letter-spacing: 2px; color: #000;
    font-family: inherit;
    background: linear-gradient(135deg, var(--neon-cyan), #ff3da6);
    box-shadow: 0 0 26px rgba(0,255,255,0.5);
    opacity: 0;
    animation: introFade 0.8s ease 4.9s forwards, introPulse 2.6s ease-in-out 5.8s infinite;
}
@keyframes introPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.intro-skip {
    position: absolute; top: 16px; right: 18px; z-index: 4; cursor: pointer;
    color: #8893b5; font-size: 0.85rem; letter-spacing: 1px;
}
.intro-skip:hover { color: #fff; }

@media (max-width: 768px) {
    .intro-sil { height: 58vh; opacity: 0; }
    .intro-sil.left  { left: -16%; }
    .intro-sil.right { right: -16%; }
    @keyframes introInLeft  { to { opacity: 0.7; transform: translateX(0); } }
    @keyframes introInRight { to { opacity: 0.7; transform: translateX(0) scaleX(-1); } }
    .intro-names { bottom: 4%; padding: 0 6%; }
    .intro-content { padding: 18px; }
}
/* 減少動態：開場改為靜態直接呈現。上方 body.a11y-reduce-motion * 的 animation:none
   會讓這些「起始 opacity:0、靠 forwards 動畫淡入」的元素永遠停在 0——
   OS 開了減少動態的玩家只看得到右上角「跳過 ›」，標語、標題、進入鈕全部隱形（2026-10-04 Code 複驗發現）。 */
body.a11y-reduce-motion .intro-name,
body.a11y-reduce-motion .intro-tagline,
body.a11y-reduce-motion .intro-title,
body.a11y-reduce-motion .intro-sub,
body.a11y-reduce-motion .intro-enter { opacity: 1; }
body.a11y-reduce-motion .intro-sil { opacity: 0.92; }
body.a11y-reduce-motion .intro-sil.left { transform: none; }
body.a11y-reduce-motion .intro-sil.right { transform: scaleX(-1); }
@media (max-width: 768px) {
    body.a11y-reduce-motion .intro-sil { opacity: 0.7; }
}

/* ================================================================
   v18 立繪三裝置定位：桌機左右分立、不截到人；平板/手機維持淡化靠右
   ================================================================ */
@media (min-width: 1025px) {
    /* 桌機：鄒忌(ch1) 站左、徐公(ch2) 站右；再往兩旁靠一點，避免擋到選項邊緣 */
    #portrait-container[data-pos="left"]  { left: -4% !important;  right: auto !important; }
    #portrait-container[data-pos="right"] { right: -4% !important; left: auto !important; }
    #portrait {
        max-height: 90vh !important;
        max-width: 26vw !important;     /* 略縮 + 外移 → 不裁切又不壓到中間內容 */
        opacity: 0.92 !important;
        filter: drop-shadow(0 0 18px rgba(0,0,0,0.55)) !important;
    }
}

/* ============================================================
   U207 · 英文排版字身修復（2026-07-29）
   ------------------------------------------------------------
   病徵：本檔 body 的堆疊是 'Inter', 'Noto Sans TC' ——看起來已經是西文在前，
        但 Inter 是 webfont，**沒載到就整包跳過**，直接落到 Noto Sans TC；
        而 Noto Sans TC 把 U+2018/2019/201C/201D 歸為 CJK 標點、配全形字身，
        又因它同時有西文字母，瀏覽器不會再往後 fallback →
        英文所有格渲染成 `emperor’ s`（中間一個漢字寬的洞）。
        實測（Inter 未載入時）：’ 32.02px vs 西文襯線 10.66px＝3× 膨脹。
        這正是 U207 的「只寫一個裝不到的西文字型＝等於沒修」陷阱。
   修法：只在英文語系補上各平台真的裝得到的 Latin sans，排在 CJK 字型之前。
   安全性：西文字型沒有漢字字符 → 中文永遠 fallback 回 Noto Sans TC，
        中文渲染完全不變（已機器量測：zh／en 兩模式中文寬度相同）。
   範圍：僅 font-family；不動字級、字距、行距、顏色、版面、文案。
   ============================================================ */
html[lang="en"] body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial,
                 'Liberation Sans', 'DejaVu Sans', 'Noto Sans',
                 'Noto Sans TC', sans-serif;
}
/* 易讀模式（a11y-readable）原本刻意把 Noto Sans TC 排前面並帶 !important，
   英文語系同樣需要西文字身；仍保留 CJK 字型在尾端，中文不變。 */
html[lang="en"] body.a11y-readable .scene-text,
html[lang="en"] body.a11y-readable .choice-btn,
html[lang="en"] body.a11y-readable .cine-slide {
    font-family: 'Segoe UI', system-ui, -apple-system, Arial,
                 'Liberation Sans', 'DejaVu Sans', 'Noto Sans',
                 'Noto Sans TC', 'Inter', sans-serif !important;
}

/* ================================================================
   教室互動白板三修（2026-09-15）· A176／A207／A209
   ----------------------------------------------------------------
   Momo 的現場機器是 86 吋 4K 白板。A176（2026-08-11 修正）：同一台機器在
   不同 Windows 顯示縮放下是六個完全不同的斷點族，而**兩端的雷相反**：
     · 高縮放端（300%＝1280×580）寬得像桌機、矮得像手機橫放
       → 桌機零捲動佈局把容器鎖 100vh，文字被擠進內部捲動容器。
     · 低縮放端（125%＝3072×1588）寬得像超寬桌機
       → #game-container 寫死 max-width:800px，內容變成掛在 86 吋螢幕
         中間的一條窄帶（Momo 2026-09-15 原話：「完全像是手機對話，
         擠成長條形」）。背景是滿版的，所以不是黑邊——**是內容比例失真**，
         舊的溢出探針量不到。
   responsive 斷點只看 min-width，就會把這一整類教學現場最常用的螢幕整組漏掉。
   ================================================================ */

/* ---- ③ 低縮放端：內容跟著螢幕長大，不要固定在 800px ---- */
@media (min-width: 1700px) {
    #game-container {
        /* 不是把 800 換成另一個寫死的數字——用 vw 讓它連續長大，兩端各有夾點 */
        max-width: clamp(900px, 52vw, 1700px);
        /* 字級同步放大：.scene-text 是 em 基準，會跟著這裡走。
           只放大寬度不放大字＝變成一片很寬的小字，一樣看不到。 */
        font-size: clamp(1rem, 0.72vw, 1.5rem);
    }
}

/* ---- ① 高縮放端：桌機佈局 × 手機高度，把垂直空間還給劇情文字 ---- */
@media (min-width: 769px) and (max-height: 700px) {
    #game-container { padding: 6px 16px; }

    .game-header { margin-bottom: 4px; padding: 3px 12px; }
    .game-header h1 { font-size: 1em; }
    .game-header .subtitle { font-size: 0.62em; }

    #voices-display  { margin-bottom: 4px; padding: 3px 10px; }
    #insight-display { margin-bottom: 4px; padding: 3px 8px; font-size: 0.78em; }

    #scene-container { padding: 12px 22px; gap: 9px; }
    .speaker { margin-bottom: 6px; }
    .scene-text {
        font-size: calc(1em * var(--a11y-font-scale, 1));
        line-height: 1.62;
    }
    .choice-btn { padding: 8px 14px; margin-bottom: 6px; }
}

/* ---- ② 成就浮層不准壓住三心聲音條 ----
   舊值 .show{top:80px} 落在 #voices-display 身上，**連預設的 1366×800 桌機
   都會蓋到**（2026-09-15 量到，不是只有白板）。改錨定右下：頂部那一疊
   （標題／三心／洞察力）是固定結構，右上永遠會撞；右下只有左側的訪客徽章，
   不同側、不相撞。矮視窗再把它縮窄，免得壓到選項鈕。 */
.achievement-notification {
    top: auto;
    bottom: -220px;
    transition: bottom 0.5s ease-out;
}
.achievement-notification.show {
    top: auto;
    bottom: 20px;
}
/* 矮視窗（白板 300% 這類）：選項鈕離底部很近，bottom:20px 在**英文版**會壓到它
   （中文版不會——英文較長、版面不同，這正是必須中英都量的理由）。
   逐格量過：bottom:8px 中英都不壓任何東西。順帶縮窄浮層。 */
@media (max-height: 700px) {
    .achievement-notification { max-width: 270px; padding: 10px 14px; }
    .achievement-notification.show { bottom: 8px; }
}

/* 手機例外（2026-09-15 量到的回歸）：欄寬＝滿版，右下必定壓到選項鈕。
   手機上任何 fixed 浮層都會壓到某個東西——**關鍵是壓到什麼**：
     · 壓住三心數值／選項鈕 ＝ 缺陷（前者是玩家要讀的狀態，後者擋操作）
     · 壓住標題列 ＝ 可接受（純裝飾，且浮層是暫時的）
   逐格量過 0/4/8/12/56/64px：**≤12px 只壓到 .game-header**，
   56px 起就開始吃到 #voices-display。取 8px，並把這個取捨寫在這裡，
   免得下次有人「順手」把它調回視覺上比較舒服的 56px。 */
@media (max-width: 768px) {
    .achievement-notification {
        bottom: auto;
        top: -220px;
        transition: top 0.5s ease-out;
    }
    .achievement-notification.show { bottom: auto; top: 8px; }
}

/* 2026-10-09 player-reach（A350）實測：通知在顯示的約 4.6 秒內**蓋住而且吃掉點擊**——
   手機橫放整排頂欄（⚙／🍎／🌐／Aa／♪）、手機直放存檔視窗的標題與 ×、Aa 面板字級鈕、
   桌機數據摘要的 × 都點不到（學生剛做完第一個選擇、「啟程」一跳出來最容易撞上）。
   ① pointer-events:none：通知本來就沒有可點的東西，讓點擊穿過去落在底下的按鈕上；
   ② z-index 2500：仍高於頂欄／HUD（2000–2100），但低於存檔、摘要等視窗（3000）與
      「已儲存」小提示（.game-toast 9999）——視窗打開時蓋在通知上面，連看起來被擋都不會。
   位置、樣子、停留時間都不變（Momo 2026-10-09 拍板：點得穿＋存檔摘要都一起）。 */
.achievement-notification {
    z-index: 2500;
    pointer-events: none;
}

/* MIRROR-AUDIT-004: native buttons retain the original choice appearance. */
button.choice-btn { font-family: inherit; color: inherit; text-align: left; width: 100%; }
.choice-btn:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

/* 2026-10-09 player-reach（A350）實測——矮螢幕上玩家點不到的兩處（Momo 拍板：照 Code 判斷修）：
   A. 存檔視窗比視窗高：手機橫放 844×390 標題與 × 在畫面上方外、「下載完整報告」在下方外，
      .modal-overlay 置中又不捲＝打開就關不掉；白板 300%（1280×580）× 也被切。
      → 視窗最高＝畫面高扣 16px，內容多時在視窗內捲。樣子不變，只有矮螢幕才會捲。
   B. 劇情框在矮螢幕裁掉選項：手機橫放英文版「黑粉攻擊」hater_r2 四個選項，第四個掉出畫面，
      #scene-container overflow:hidden 捲不動。→ 只在矮窗（與上方 ① 高縮放端同一個條件）讓框內可捲；
      document 照樣不捲（A98／U124：要捲的是指定內容器）。桌機、直放手機不受影響。 */
#save-modal .modal-window { max-height: calc(100dvh - 16px); overflow-y: auto; }
@media (min-width: 769px) and (max-height: 700px) {
    #scene-container { overflow-y: auto; }
}