/* ============================================================
   🎨 Scene 1 Theme – Taisho Roman (大正浪漫 - 枯玫瑰色版)
   設計語言：復古、沉穩、幾何紋樣、金箔質感
============================================================ */

:root {
    /* --- 核心色調 --- */
    --theme-color: rgb(158, 122, 122); /* 枯玫瑰紅 #9E7A7A */
    --bg-color: #2b2525;               /* 深灰褐 (背景基底) */
    --dialog-bg: rgba(40, 32, 32, 0.95); /* 對話框底色 (深紅褐) */
    --border-color: #dccbba;           /* 香檳金 (邊框) */
    --text-color: #f2e8cf;             /* 乳白/古紙色 (文字) */
    --accent-gold: #c5a059;            /* 暗金 (強調色) */

    /* 對話框底部距離 (讓對話框上移) */
    --dialogue-bottom: 60px; 
}

/* ============================================================
   🌫 Background (全域背景紋理)
============================================================ */
#game-screen {
    background-color: var(--bg-color);
}

/* 層次1: 矢絣 (Yagasuri) 圖案 */
#game-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.15;
    z-index: 0;
   
    background-image: 
        linear-gradient(135deg, var(--theme-color) 25%, transparent 25%),
        linear-gradient(225deg, var(--theme-color) 25%, transparent 25%),
        linear-gradient(45deg, var(--theme-color) 25%, transparent 25%),
        linear-gradient(315deg, var(--theme-color) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
    background-repeat: repeat;
   
    mix-blend-mode: overlay;
}

/* 層次2: 光影與雜訊 (新增的效果) */
#game-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.18;

    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 40%),
      radial-gradient(circle at 70% 80%, rgba(255,255,255,.06), transparent 45%),
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.02) 0px,
        rgba(255,255,255,.02) 1px,
        transparent 1px,
        transparent 4px
      );
}

/* ============================================================
   🌊 Dialogue Box (核心：雙線邊框復古風 + 修正背景位置)
============================================================ */
#dialogue-box {
    background-color: var(--dialog-bg);

    /* 2. 指定紋理圖片 */
    background-image: url('../assets/ui/paper_texture.png'); 

    /* 3. ★ 置中 */
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;

    /* 4. 混合模式 (維持 soft-light) */
    background-blend-mode: soft-light;

    /* --- 以下保持原有設定 --- */
    border: 1px solid var(--border-color);
    outline: 1px solid var(--border-color);
    outline-offset: -6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.5);
    
    border-radius: 4px;
    backdrop-filter: blur(2px) saturate(110%);
    
    overflow: visible; 
    animation: floatBox 10s ease-in-out infinite;

    padding: 20px 35px;
    box-sizing: border-box;
}

/* ============================================================
   🏷️ Style 3: Stained Glass (玻璃鑲金風)
============================================================ */
#name-plate {
    position: absolute;
    top: -28px;
    left: 40px;
   
    padding: 4px 30px;
    min-width: 130px;
    text-align: center;
   
    color: #fff;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
   
    /* 半透明背景 */
    background: rgba(40, 30, 30, 0.9);
    backdrop-filter: blur(4px);
   
    /* ★ 關鍵：雙層邊框 (Outline + Border) */
    border: 1px solid var(--border-color);
    outline: 1px solid var(--border-color);
    outline-offset: 3px; /* 外擴 3px 的第二條線 */
   
    /* 稍微圓角 */
    border-radius: 2px;
   
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
   
    animation: nameSlide .8s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 10;
}

/* 裝飾：左右兩側的菱形釘飾 */
#name-plate::before, #name-plate::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--accent-gold);
    transform: translateY(-50%) rotate(45deg); /* 菱形 */
    box-shadow: 0 0 2px rgba(255,255,255,0.8);
}

#name-plate::before { left: 8px; }
#name-plate::after { right: 8px; }

@keyframes nameSlide {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
/* ============================================================
   bust 3. 立繪層 (Avatars)
============================================================ */
#avatar-container {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 15vh;
    height: 75vh;
    z-index: 50;
    pointer-events: none; 
    display: flex;
    justify-content: flex-start;
    align-items: flex-end; 
    padding-left: 5vw; 
    box-sizing: border-box;
}

/* ============================================================
   👤 Avatar (立繪 - 個別縮放)
============================================================ */
.avatar {
    --char-scale: 1; /* 預設變數 */

    filter: none;
    transition: all .6s ease;
    transform-origin: bottom center; 
   
    max-height: 100%;
    width: auto;
    margin-right: -20px;

    /* 基礎狀態 */
    transform: translateY(0) scale(var(--char-scale));
}

/* 說話時 (Active) - 微微上浮 */
.avatar.active {
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4));
    z-index: 51;
    /* ★ 整合：上浮 -4px 並保持縮放 */
    transform: translateY(-4px) scale(var(--char-scale));
}

/* 未說話時 (Inactive) - 變暗且模糊 */
.avatar.inactive {
    z-index: 50;
    transform: translateY(0) scale(var(--char-scale));
    /* 新增效果 */
    opacity: .45;
    filter: blur(.6px) brightness(.9);
}

/* ============================================================
   📜 Log Window & Popups
============================================================ */
#log-window .log-panel, #popup-box {
    background: #231e1e;
    border: 2px solid var(--border-color);
    color: var(--text-color);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    border-radius: 4px;
}

.log-header {
    background: var(--theme-color);
    color: #fff;
    border-bottom: 1px solid var(--border-color);
}

.log-entry {
    border-bottom-color: rgba(220, 203, 186, 0.2);
}

.log-name {
    color: var(--theme-color);
}

#close-log-btn {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 5px 15px;
    cursor: pointer;
    font-family: inherit;
}

#close-log-btn:hover {
    background: #fff;
    color: var(--theme-color);
}

/* ============================================================
   💧 Ripple Effect
============================================================ */
.click-ripple {
    z-index: 9999 !important; 
    background: radial-gradient(circle, 
        rgba(255, 240, 230, 0.9) 0%,   
        rgba(158, 122, 122, 0.6) 40%, 
        transparent 70%
    );
    mix-blend-mode: normal; 
    pointer-events: none;
}

/* ============================================================
   ✨ Golden Corners (Art Deco 階梯幾何版)
   設計：使用 SVG Mask 繪製階梯線條與太陽，並套用金箔漸層
============================================================ */
#golden-corners {
    position: absolute;
    inset: 0;
    z-index: 950;
    pointer-events: none;
}

.corner {
    position: absolute;
    /* 尺寸放大一點以顯示細節 */
    width: 120px;
    height: 120px;
    opacity: 0.95;

    /* 1. 設定背景：這裡使用你原本的金色漸層 */
    background: linear-gradient(
        135deg, 
        #c5a059 0%, 
        #f2e8cf 30%, 
        #c5a059 60%, 
        #8a6e3e 100%
    );

    /* 2. 設定遮罩：這是一個內嵌的 SVG，畫出了階梯、雙線和太陽 */
    /* SVG 解說：
       - polyline: 畫出粗的外框階梯
       - polyline: 畫出細的內框階梯
       - circle/path: 畫出太陽與光芒
       - line: 畫出裝飾點線
    */
    --mask-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- 外層粗階梯 --%3E%3Cpolyline points='100,5 65,5 65,35 35,35 35,65 5,65 5,100' stroke='black' stroke-width='6' stroke-linecap='square'/%3E%3C!-- 內層細階梯 --%3E%3Cpolyline points='100,18 72,18 72,42 42,42 42,72 18,72 18,100' stroke='black' stroke-width='2'/%3E%3C!-- 太陽裝飾 --%3E%3Cg transform='translate(25, 25)'%3E%3Ccircle cx='0' cy='0' r='5' fill='black'/%3E%3Cpath d='M0 -9 V-6 M0 6 V9 M-9 0 H-6 M6 0 H9 M-6 -6 L-4 -4 M6 6 L4 4 M6 -6 L4 -4 M-6 6 L-4 4' stroke='black' stroke-width='2'/%3E%3C/g%3E%3C!-- 裝飾點線 --%3E%3Cline x1='5' y1='80' x2='5' y2='100' stroke='black' stroke-width='2' stroke-dasharray='2 2'/%3E%3Cline x1='80' y1='5' x2='100' y2='5' stroke='black' stroke-width='2' stroke-dasharray='2 2'/%3E%3C/svg%3E");

    -webkit-mask-image: var(--mask-url);
    mask-image: var(--mask-url);
    
    -webkit-mask-size: contain;
    mask-size: contain;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* 加一點發光效果 */
    filter: drop-shadow(0 0 2px rgba(242, 232, 207, 0.6));
}

/* --- 個別角落定位與旋轉 --- */
/* 透過旋轉同一個遮罩來達成四角對稱 */

/* 左上 (TL) */
.corner.tl { 
    top: 15px; left: 15px; 
    transform: rotate(0deg); /* 原始 SVG 方向就是左上 */
}

/* 右上 (TR) */
.corner.tr { 
    top: 15px; right: 15px; 
    transform: rotate(90deg);
}

/* 左下 (BL) */
.corner.bl { 
    bottom: 15px; left: 15px; 
    transform: rotate(-90deg);
}

/* 右下 (BR) */
.corner.br { 
    bottom: 15px; right: 15px; 
    transform: rotate(180deg);
}

/* ============================================================
   🎛️ Side Controls (右側垂直控制列)
============================================================ */
.side-controls {
    position: absolute;
    right: -60px; /* 掛在對話框右側外部 (依圓鈕大小調整) */
    bottom: 0;    /* 對齊對話框底部 */
   
    display: flex;
    flex-direction: column;
    gap: 15px; /* 按鈕之間的間距 */
   
    z-index: 101;
}

/* ============================================================
   🟡 Round Buttons (金圓外框按鈕通用設定)
   適用於：章節、LOG、返回
============================================================ */
.round-btn {
    /* 形狀與大小 */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* 正圓形 */
   
    /* 顏色與材質 */
    background: rgba(43, 37, 37, 0.9); /* 深色半透明底 */
    border: 1px solid var(--border-color); /* 香檳金邊框 */
    color: var(--border-color); /* 文字顏色 */
   
    /* 排版 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
   
    /* 字體設定 */
    font-family: serif;
    font-size: 0.9rem;
    line-height: 1.2; 
   
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* 懸停效果 (Hover) - 使用新版漸層 */
.round-btn:hover {
    background: linear-gradient(
      180deg,
      rgb(180,145,145),
      rgb(140,105,105)
    );
    color: #fff;
    border-color: #fff;
    transform: scale(1.08); /* 稍微放大 */
    box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
}

/* 圖片微調 (針對返回鍵裡面的圖片) */
#back-btn img {
    width: 60%; 
    height: auto;
    filter: invert(1) sepia(1) saturate(0) brightness(0.9);
    pointer-events: none;
}

#back-btn:hover img {
    filter: brightness(2); 
}

/* 個別微調 */
#log-btn {
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* ============================================================
   🀄 Vertical Title (右上角直書標題)
============================================================ */
#vertical-title {
    position: absolute;
    
    /* 1. 定位在右上角 */
    top: 80px;
    right: 73px;
    z-index: 20; /* 確保在背景之上，但在對話框之下(或之上看需求) */

    /* 2. ★ 核心：設定為直書模式 (Vertical, Right to Left) */
    writing-mode: vertical-rl;
    text-orientation: upright; /* 確保英數字也是正的(選用) */

    /* 3. 字體與排版 */
    font-family: "Zen Old Mincho", "Hiragino Mincho ProN", serif; /* 襯線體最有大正味 */
    font-size: 1.8rem;
    letter-spacing: 0.3em; /* 直書時字距要拉開才好看 */
    font-weight: 500;
    
    /* 4. 顏色與陰影 (確保在深淺背景都清楚) */
    color: #fff;
    text-shadow: 
        0 0 5px rgba(0,0,0,0.8),
        2px 2px 0px rgba(0,0,0,0.3);

    /* 5. 進場動畫 (淡入 + 微幅下降) */
    opacity: 0;
    transform: translateY(-10px);
    transition: all 1.5s ease-out;
    pointer-events: none; /* 避免擋住點擊 */
}

/* 顯示時的狀態 */
#vertical-title.active {
    opacity: 1;
    transform: translateY(0);
}