:root {
    --primary-color: #ff8fab;
    --primary-dark: #fb6f92;
    --bg-color: #333; /* 電腦版外圍背景設為深色 */
    --app-bg: #ffe5ec; /* App 內部背景色 */
    --text-color: #333;
    --modal-bg: rgba(0, 0, 0, 0.7);
    
    /* 屬性顏色 */
    --color-academic: #4361ee;
    --color-energy: #2a9d8f;
    --color-stress: #e63946;
    --color-charm: #f4a261;
    --color-depravity: #9c6644;
    --color-popularity: #e0a96d;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
body { 
    font-family: "PingFang HK", "Microsoft JhengHei", sans-serif; 
    background: var(--bg-color); 
    color: var(--text-color); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /* 🌟 關鍵：改用 100dvh (Dynamic Viewport Height)，這會自動扣除手機瀏覽器的網址列與底邊欄！ */
    height: 100dvh; 
    min-height: 100%; /* 備用相容性 100dvh*/
    margin: 0;
    overflow: hidden; 
}

/* --- 電腦版模擬手機直式容器 --- */
#app-container {
    width: 100%;
    max-width: 480px; 
    /* 🌟 讓容器的高度 100% 貼合 body */
    height: 100%; 
    max-height: 100%; /* 拿掉寫死的 900px，讓它在手機上能完全伸展但不會超出去 */
    background: var(--app-bg);
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

.screen { display: flex; flex-direction: column; height: 100%; width: 100%; flex: 1; }
.hidden { display: none !important; }

/* --- 過場動畫用 --- */
.fade-transition {
    transition: opacity 0.5s ease-in-out;
}

/* --- 開始畫面 --- */
#start-screen { 
    display: flex; /* 改回 flex，原本可能是 flex:1 被覆蓋了 */
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    position: relative; 
    height: 100%; /* 確保佔滿整個容器 */
}

/* 確保 bg-blur 填滿整個容器，並且有模糊效果 */
.bg-blur { position: absolute; inset: 0; filter: blur(4px); z-index: 1; }

/* 標題區塊置中 */
.start-content { 
    background: rgba(255,255,255,0.6); 
    padding: 30px; 
    border-radius: 15px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    width: 80%; 
    max-width: 300px;
    z-index: 2; 
    /* 這裡拿掉 position: relative，讓它自然在 Flex 裡置中 */
}
.start-content h1 { font-size: 38px; color: var(--primary-dark); margin-bottom: 30px; font-weight: 900;}

/* 警告字句修正回底部 */
.warning-text { 
    position: absolute; 
    bottom: 30px; /* 釘死在底部 30px 處 */
    left: 50%; /* 搭配 transform 確保水平置中 */
    transform: translateX(-50%);
    font-size: 13px; 
    color: #333; 
    width: 90%; 
    background: rgba(255,255,255,0.8); 
    padding: 10px; 
    border-radius: 8px; 
    font-weight: bold; 
    line-height: 1.5; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 2; /* 確保在背景圖之上 */
}

/* --- 通用按鈕 --- */
.primary-btn { padding: 12px 30px; background: var(--primary-color); color: white; border: none; border-radius: 25px; font-size: 18px; font-weight: bold; cursor: pointer; transition: background 0.2s; }
.primary-btn:active { background: var(--primary-dark); transform: scale(0.98); }

/* --- 主遊戲畫面 --- */
.top-bar { display: flex; justify-content: space-between; padding: 15px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-weight: bold; font-size: 18px; z-index: 10; }

/* 屬性網格 (改為 3列2行 排版) */
.stats-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 切成三等份 */
    gap: 10px 8px; /* 垂直間距10px，水平間距8px */
    padding: 10px 15px; 
    background: rgba(255,255,255,0.9); 
}

.stat-item { 
    display: flex; 
    align-items: flex-start; /* 讓文字跟進度條頂部對齊 */
    gap: 6px; 
}

.stat-label { 
    font-size: 13px; 
    font-weight: bold; 
    white-space: nowrap; 
    padding-top: 1px; /* 微調讓中文字對齊進度條 */
}

/* 將進度條跟數字包在一起，垂直排列 */
.stat-bar-container { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; /* 進度條和數字之間的距離 */
}

progress { 
    width: 100%; /* 填滿容器 */
    height: 10px; /* 稍微變細一點點，看起來更精緻 */
    border-radius: 5px; 
    overflow: hidden; 
}
progress::-webkit-progress-bar { background-color: #e0e0e0; }

.stat-value { 
    font-size: 12px; 
    color: #555; 
    font-weight: bold;
    text-align: center; /* 讓數字置中於進度條下方 */
}

/* 各屬性進度條顏色 */
/* ==========================================
   各屬性進度條顏色 (漸層設計)
   ========================================== */
/* 學業：知識、冷靜、理性 (藍色) */
.stat-academic progress::-webkit-progress-value { background: linear-gradient(90deg, #60A5FA, #3B82F6, #1E40AF) !important; }
/* 精力：生命值、健康、活力 (鮮綠) */
.stat-energy progress::-webkit-progress-value { background: linear-gradient(90deg, #4ADE80, #22C55E, #15803D) !important; }
/* 壓力：危險、緊張、警告 (鮮紅) */
.stat-stress progress::-webkit-progress-value { background: linear-gradient(90deg, #F87171, #EF4444, #B91C1C) !important; }
/* 魅力：女性魅力、誘惑、美麗 (亮粉紅) */
.stat-charm progress::-webkit-progress-value { background: linear-gradient(90deg, #F472B6, #EC4899, #BE185D) !important; }
/* 墮落：色情、腐化、禁忌 (深紫紅) */
.stat-depravity progress::-webkit-progress-value { background: linear-gradient(90deg, #C026D3, #8B00FF, #581C87) !important; }
/* 人氣：明星光環、受歡迎 (亮橙金) */
.stat-popularity progress::-webkit-progress-value { background: linear-gradient(90deg, #FBBF24, #F59E0B, #B45309) !important; }

/* 心情簡述區 */
.mood-section { padding: 10px 15px; font-size: 14px; background: #fff3f6; border-bottom: 1px solid #ffd0df; line-height: 1.4; }
.mood-effect-text { color: var(--primary-dark); font-size: 12px; font-weight: bold; display: block; margin-top: 4px; }

/* 主角立繪與背景區 */
.portrait-section { flex: 1; display: flex; justify-content: center; align-items: flex-end; position: relative; background: #fde2e4; overflow: hidden; }
#scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0.6; }
#portrait-placeholder { font-size: 24px; color: #666; position: absolute; top: 40%; z-index: 2; font-weight: bold; background: rgba(255,255,255,0.5); padding: 10px; border-radius: 8px; }
#character-portrait { 
    height: 100%; /* 確保圖片高度完全撐滿整個容器 */
    
    object-fit: cover; /* 關鍵：保持比例放大，填滿框框，多餘部分裁切 */
    object-position: bottom center; /* 關鍵：確保裁切時，人物的底部（腳/腰）貼緊畫面下方，臉盡量保持在中間 */
    z-index: 5; 
    position: relative; 
}

/* 底部五大行動按鈕 */
.action-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 15px; background: #fff; border-top: 3px solid var(--primary-color); z-index: 10; }
.cat-btn { padding: 12px 5px; background: var(--primary-color); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; }
.cat-btn:active { background: var(--primary-dark); }
.cat-btn:disabled { background: #d3d3d3; color: #888; cursor: not-allowed; }

/* --- Modal 劇情與選項視窗 --- */
.modal { position: absolute; inset: 0; background: var(--modal-bg); display: flex; justify-content: center; align-items: center; z-index: 100; padding: 20px; }
.modal-content { 
    background: white; 
    width: 100%; 
    border-radius: 12px; 
    display: flex; 
    flex-direction: column; 
    /* 🌟 改成 90dvh 讓它在手機上有更多空間，同時留一點點上下邊距 */
    max-height: 100%; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
}
.modal-content h2 { padding: 15px; background: var(--primary-color); color: white; font-size: 18px; text-align: center; border-radius: 12px 12px 0 0; }
#modal-body { 
    padding: 15px; 
    /* 🌟 增加底部的 padding，確保最後一個選項和視窗底邊有呼吸空間 */
    padding-bottom: 15px; 
    overflow-y: auto; /* 允許內部滾動 */
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 100%; 
}

/* 劇情文本與CG */
.encounter-text { font-size: 15px; line-height: 1.6; color: #333; background: #f9f9f9; padding: 10px; border-radius: 8px; border-left: 4px solid var(--primary-color);}
.encounter-cg { 
    width: 100%; 
    /* 🌟 限制 CG 的最大高度為視窗的 40%，確保下面一定有空間留給選項 */
    max-height: 40%; 
    object-fit: cover; /* 讓圖片就算被限制高度，也不會變形變扁 */
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    margin-bottom: 5px; 
}
/* 動態生成的子項目按鈕 */
.choice-btn { width: 100%; padding: 12px; text-align: left; background: #fff; border: 2px solid var(--primary-color); border-radius: 8px; font-size: 14px; color: var(--text-color); font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; }
.choice-btn:active { background: var(--primary-color); color: white; }
.choice-cost { font-size: 12px; color: #888; }
.choice-btn:active .choice-cost { color: #ffe5ec; }

/* 打字機效果文字區塊 */
.typewriter-text { font-size: 15px; line-height: 1.6; color: #333; background: #f9f9f9; padding: 15px; border-radius: 8px; border-left: 4px solid var(--primary-color); min-height: 80px; margin-bottom: 10px;}

/* 數值變動顯示區塊 */
.effect-changes { font-size: 14px; font-weight: bold; color: var(--primary-dark); text-align: center; margin-bottom: 10px; min-height: 20px;}

/* 劇情演示確認按鈕 (預設藍色，禁用時灰色) */
.story-confirm-btn { width: 100%; padding: 12px; text-align: center; background: #4361ee; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.story-confirm-btn:disabled { background: #d3d3d3; color: #888; cursor: not-allowed; }
.story-confirm-btn:not(:disabled):active { background: #3f37c9; transform: scale(0.98); }

/* 時段標籤設計 (上午/下午/晚上) */
.time-badge {
    background: #60a5fa; /* 這是預設顏色 */
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 14px;
    margin-left: 10px;
    transition: background 0.3s ease, box-shadow 0.3s ease;  /* 加上漸變效果，變色時比較柔和 */
}

/* 🌟 新增：三種時間狀態的專屬顏色 */
.time-badge.time-morning {
    background: #60a5fa; /* 晨間藍色 */
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}
.time-badge.time-afternoon {
    background: #f59e0b; /* 午後橘橙色 */
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.time-badge.time-night {
    background: #4c1d95; /* 夜晚深紫色 */
    box-shadow: 0 0 8px rgba(76, 29, 149, 0.5);
}


/* === 壓力危險警告視窗樣式 === */
.warning-content {
    border: 3px solid #ff3333;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.4);
    background: linear-gradient(135deg, #fff 0%, #ffe6e6 100%);
}

/* 快速震動動畫 (Shake) */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* 套用震動的 Class */
.shake-animation {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    /* 動畫播放兩次，讓警告更強烈 */
    animation-iteration-count: 2; 
}

.morning-passive-box {
    margin: 16px 0 20px;
    padding: 12px 16px;
    background: #fff7fb;
    border: 2px dashed #f3a6bc;
    border-radius: 16px;
    color: #9b4b63;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

.morning-passive-item + .morning-passive-item {
    margin-top: 8px;
}
/* ==========================================
   彈出視窗(Modal) 專屬主題顏色3B82F6
   ========================================== */

/* --- 學業相關 (藍色系) --- */
/* 1. 標題列 */
div.theme-academic h2 {
    background: #3B82F6 !important;
}

/* 2. 選項按鈕 (使用 :not(:disabled) 避免影響被鎖定的按鈕) */
div.theme-academic button.choice-btn {
    border: 2px solid #3B82F6 !important;
    color: #000000 !important;
}
div.theme-academic button.choice-btn:active {
    background: #3B82F6 !important;
    color: white !important;
}
div.theme-academic button.choice-btn:active .choice-cost {
    color: white !important;
}

/* 3. 結算畫面的「確認」大按鈕 */
div.theme-academic button.story-confirm-btn {
    background: #3B82F6 !important;
}
div.theme-academic button.story-confirm-btn:active {
    background: #1E40AF !important;
}

.cat-btn.btn-academic:not(:disabled) {
    background: #3B82F6 !important; /* 基礎藍色 */
}
.cat-btn.btn-academic:not(:disabled):active {
    background: #1E40AF !important; /* 點擊時的深藍色 */
}
/* ==========================================
   分類專屬顏色：私密慾望 (深紫紅系)C026D3
   ========================================== */

/* 1. 主介面「私密慾望」按鈕顏色 (只有在沒被鎖定時才變色) */
.cat-btn.btn-desire:not(:disabled) {
    background: #C026D3 !important;
}
.cat-btn.btn-desire:not(:disabled):active {
    background: #8B00FF !important; /* 點擊時變成更深的紫紅 */
}

/* 2. 彈出視窗 標題列 */
div.theme-desire h2 {
    background: #C026D3 !important;
}

/* 3. 選項按鈕 */
div.theme-desire button.choice-btn {
    border: 2px solid #C026D3 !important;
    color: #000000 !important;
}
div.theme-desire button.choice-btn:active {
    background: #C026D3 !important;
    color: white !important;
}
div.theme-desire button.choice-btn:active .choice-cost {
    color: white !important;
}

/* 4. 結算畫面的「確認」大按鈕 */
div.theme-desire button.story-confirm-btn {
    background: #C026D3 !important;
}
div.theme-desire button.story-confirm-btn:active {
    background: #8B00FF !important;
}
/* ==========================================
   分類專屬顏色：休閒放鬆 (鮮綠系)22C55E
   ========================================== */
/* 1. 主介面按鈕 */
.cat-btn.btn-relax:not(:disabled) {
    background: #22C55E !important;
}
.cat-btn.btn-relax:not(:disabled):active {
    background: #15803D !important; /* 點擊時的深綠色 */
}

/* 2. 彈出視窗 標題列 */
div.theme-relax h2 {
    background: #22C55E !important;
}

/* 3. 選項按鈕 */
div.theme-relax button.choice-btn {
    border: 2px solid #22C55E !important;
    color: #000000 !important;
}
div.theme-relax button.choice-btn:active {
    background: #22C55E !important;
    color: white !important;
}
div.theme-relax button.choice-btn:active .choice-cost {
    color: white !important;
}

/* 4. 結算畫面的「確認」大按鈕 */
div.theme-relax button.story-confirm-btn {
    background: #22C55E !important;
}
div.theme-relax button.story-confirm-btn:active {
    background: #15803D !important;
}


/* ==========================================
   分類專屬顏色：打工賺錢 (亮橙金系)D97706
   ========================================== */
/* 1. 主介面按鈕 */
.cat-btn.btn-work:not(:disabled) {
    background: #FBBF24 !important;
}
.cat-btn.btn-work:not(:disabled):active {
    background: #F59E0B !important; /* 點擊時的深橙色 */
}

/* 2. 彈出視窗 標題列 */
div.theme-work h2 {
    background: #FBBF24 !important;
}

/* 3. 選項按鈕 (文字特別使用 #D97706 確保白底可讀性) */
div.theme-work button.choice-btn {
    border: 2px solid #FBBF24 !important;
    color: #000000 !important; 
}
div.theme-work button.choice-btn:active {
    background: #FBBF24 !important;
    color: white !important;
}
div.theme-work button.choice-btn:active .choice-cost {
    color: white !important;
}

/* 4. 結算畫面的「確認」大按鈕 */
div.theme-work button.story-confirm-btn {
    background: #FBBF24 !important;
}
div.theme-work button.story-confirm-btn:active {
    background: #F59E0B !important;
}
/* 🌟 強制移除頂部列與下方屬性列的縫隙 */
#app-container > .top-bar { margin-bottom: 0 !important; border-radius: 0 !important; }
#app-container > .stats-container { margin-top: 0 !important; padding-top: 10px !important; } /* 視你的 HTML 結構微調 */

/* 確保開始畫面容器可以相對定位內部元素 */
#start-screen {
    position: relative;
    overflow: hidden; /* 防止影片超出邊界 */
}

/* 影片背景設定 */
.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%); /* 將影片完美置中 */
    z-index: 0; /* 放在最底層 */
    object-fit: cover; /* 確保比例正確填滿 */
}

/* 選擇性：如果你想要影片暗一點，或是保留原本的 blur 感覺 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 半透明黑色遮罩，讓前面的白字更清楚 */
    /* backdrop-filter: blur(3px); 如果你想要稍微模糊影片，可以加這行 */
    z-index: 1; /* 放在影片上方，內容下方 */
}
/*
// 確保警告文字在最上層 //
.warning-text {
    z-index: 2;
    position: relative;
    // 你原本的其他警告文字樣式... //
}
*/

/* ==========================================
   頂部背景流動漸變動畫
   ========================================== */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.dynamic-gradient-bg {
    background-size: 300% 300% !important; /* 把漸變拉大，移動時才看得出效果 */
    animation: gradientBG 8s ease infinite; /* 8秒循環一次，無限播放 */
    transition: background 1s ease; /* 切換時段時的過渡效果 */
}