/* --- 全局設定：傳統中式風格 --- */
:root { 
    --primary: #1c1917; /* 墨黑 */
    --secondary: #b91c1c; /* 印泥紅 */
    --bg-color: #fdfbf7; /* 米宣紙色 */
    --border-color: #57534e;
    --ui-scale: 1; 
}

body { 
    font-family: 'Noto Serif TC', serif; 
    background-color: var(--bg-color); 
    color: var(--primary); 
    margin: 0; padding: 0; 
    user-select: none; -webkit-user-select: none; 
    touch-action: pan-x pan-y; 
    overflow: hidden; 
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px); 
    background-size: 20px 20px; 
    font-size: calc(16px * var(--ui-scale)); 
}

/* --- 頂部導航 (Top Bar) --- */
.top-bar { 
    position: fixed; top: 0; left: 0; width: 100%; 
    padding: 10px 15px; 
    display: flex; justify-content: space-between; align-items: center; 
    z-index: 50; 
    background: linear-gradient(to bottom, rgba(253,251,247,0.95), rgba(253,251,247,0)); 
    pointer-events: none; 
}

.top-left, .top-right { 
    display: flex; align-items: center; gap: 8px; 
    pointer-events: auto; 
}

.res-badge { 
    background: white; padding: 4px 10px; border-radius: 50px; 
    font-weight: bold; border: 2px solid var(--primary); 
    display: flex; align-items: center; gap: 4px; 
    font-size: 0.85rem; box-shadow: 2px 2px 0 rgba(0,0,0,0.1); 
    white-space: nowrap; 
}

.icon-btn { 
    background: white; width: 36px; height: 36px; 
    border-radius: 50%; border: 2px solid var(--primary); 
    display: flex; justify-content: center; align-items: center; 
    font-size: 1.1rem; cursor: pointer; 
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1); 
    transition: transform 0.1s; 
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 0 0; }

.ad-btn { 
    background: #fef3c7; border: 1px solid #d97706; color: #d97706; 
    border-radius: 50%; width: 24px; height: 24px; 
    display: flex; justify-content: center; align-items: center; 
    font-size: 0.8rem; margin-left: 5px; cursor: pointer; 
    animation: pulse 2s infinite; 
}
@keyframes pulse { 
    0% {transform: scale(1);} 
    50% {transform: scale(1.1);} 
    100% {transform: scale(1);} 
}

/* --- 視圖切換系統 --- */
.view { 
    display: none; width: 100vw; height: 100vh; 
    flex-direction: column; align-items: center; 
    padding: 20px; padding-top: 70px; 
    box-sizing: border-box; overflow-y: auto; 
    position: absolute; top: 0; left: 0; 
    background: var(--bg-color); 
}
.view.active { display: flex; }

/* --- 按鈕元件 --- */
.btn-primary { 
    background-color: var(--primary); color: #fdfbf7; 
    font-weight: bold; border-radius: 4px; padding: 12px 24px; 
    border: 2px solid var(--primary); 
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2); 
    transition: transform 0.1s; cursor: pointer; letter-spacing: 2px; 
    font-size: 1rem; display: block; opacity: 1; visibility: visible; 
}
.btn-primary:active { transform: translateY(2px); box-shadow: 2px 2px 0 rgba(0,0,0,0.2); }

.btn-secondary { 
    background-color: transparent; color: var(--primary); 
    font-weight: bold; border-radius: 4px; padding: 10px 20px; 
    border: 2px solid var(--primary); 
    box-shadow: 4px 4px 0 #d6d3d1; cursor: pointer; 
    font-size: 1rem; 
}
.btn-secondary:active { transform: translateY(2px); box-shadow: 2px 2px 0 #d6d3d1; }

.btn-disabled { 
    background-color: #e5e5e5 !important; 
    color: #a3a3a3 !important; 
    border-color: #d4d4d4 !important; 
    cursor: not-allowed !important; 
    box-shadow: none !important; 
    pointer-events: none; 
}

/* --- 遊戲主舞台元件 --- */
.scroll-header { 
    position: relative; display: inline-flex; align-items: center; 
    background: #f5f5f4; border: 2px solid #57534e; border-radius: 4px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}
.scroll-content { 
    padding: 5px 25px; font-weight: bold; font-size: 1.1rem; 
    color: var(--primary); letter-spacing: 2px; 
}
.scroll-stick { 
    position: absolute; width: 10px; height: 130%; 
    background: #44403c; border-radius: 4px; 
    top: -15%; border: 1px solid #78716c; 
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3); 
}
.scroll-stick.left { left: -5px; } 
.scroll-stick.right { right: -5px; }

.game-top-section { 
    width: 100%; max-width: 600px; 
    display: flex; flex-direction: column; align-items: center; 
    flex-grow: 1; 
}

.towers-wrapper { 
    display: flex; flex-direction: row; justify-content: center; 
    align-items: flex-end; flex-wrap: wrap; 
    gap: 12px; width: 100%; padding: 10px; 
    min-height: 200px; 
}

.tower-col { 
    display: flex; flex-direction: column; gap: 2px; 
    padding: 15px 8px 10px 8px; 
    background-color: #f5f5f4; border-radius: 4px; 
    border-bottom: 5px solid #57534e; border-top: 4px solid var(--secondary); 
    position: relative; box-shadow: 3px 3px 6px rgba(0,0,0,0.1); 
}

/* 字塊樣式 */
.char-tile { 
    width: calc(44px * var(--ui-scale)); height: calc(44px * var(--ui-scale)); 
    background: white; color: var(--primary); 
    font-size: 1.4rem; font-weight: bold; border-radius: 4px; 
    display: flex; justify-content: center; align-items: center; 
    box-shadow: 1px 1px 0 rgba(0,0,0,0.1); border: 2px solid var(--primary); 
    cursor: pointer; position: relative; 
}
.char-tile.selected { 
    background-color: var(--primary); color: white; 
    transform: scale(1.1); z-index: 100 !important; 
}

.drop-zone { 
    width: calc(44px * var(--ui-scale)); height: calc(44px * var(--ui-scale)); 
    background: #e7e5e4; border: 2px dashed #a8a29e; border-radius: 4px; 
}

/* 底部字塊區 (上提版) */
.game-bottom-section { 
    width: 100%; max-width: 500px; 
    margin-top: auto; 
    margin-bottom: 20vh; 
    padding-bottom: 20px; 
}
@media (max-height: 700px) {
    .game-bottom-section { margin-bottom: 10vh; }
}

.grid-box { 
    background: #e7e5e4; border-radius: 8px; padding: 10px; 
    width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; 
    border: 2px inset #d6d3d1; min-height: 120px; 
}

/* --- 關卡選擇 --- */
.realm-selector { 
    width: 100%; max-width: 400px; 
    background: #e7e5e4; border-radius: 8px; padding: 10px; 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 20px; border: 2px solid #d6d3d1; 
}
.realm-nav-btn { font-size: 1.5rem; color: var(--primary); cursor: pointer; padding: 0 15px; user-select: none; }
.realm-nav-btn.disabled { color: #a8a29e; cursor: not-allowed; }
.realm-info { text-align: center; }
.realm-name { font-size: 1.2rem; font-weight: bold; color: var(--primary); letter-spacing: 2px; }

.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; width: 100%; max-width: 400px; padding-bottom: 50px; }
.level-btn { 
    aspect-ratio: 1; background: white; border-radius: 8px; 
    display: flex; justify-content: center; align-items: center; 
    font-size: 1.1rem; font-weight: bold; color: var(--primary); 
    border: 2px solid var(--primary); cursor: pointer; 
    box-shadow: 3px 3px 0 #d6d3d1; flex-direction: column; line-height: 1.2; 
}
.level-btn.locked { background: #e7e5e4; color: #a8a29e; border-color: #a8a29e; box-shadow: none; }
.level-btn.completed { background: #fdfbf7; border-color: var(--secondary); color: var(--secondary); }

/* --- 模態視窗 (Modal) --- */
.modal-mask { 
    position: fixed; top:0; left:0; width:100%; height:100%; 
    background:rgba(0,0,0,0.7); 
    z-index: 3000; 
    display:none; justify-content:center; align-items:center; 
    backdrop-filter: blur(2px); 
}
.modal-body { 
    background: #fdfbf7; width:90%; max-width:320px; padding:24px; 
    border-radius: 8px; text-align:center; 
    border: 4px double var(--primary); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
    position: relative; z-index: 3001; 
}
.close-modal { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; color: #a8a29e; cursor: pointer; }

/* 字彙列表 */
.vocab-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px dashed #d6d3d1; text-align: left; }
.vocab-row:last-child { border-bottom: none; }
.heart-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 0 0 10px; filter: grayscale(100%); transition: filter 0.3s, transform 0.2s; }
.heart-btn.saved { filter: grayscale(0%); transform: scale(1.1); }
.heart-btn:active { transform: scale(0.9); }

/* --- 新手教學 --- */
#tutorial-mask { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background-color: rgba(0, 0, 0, 0.7); z-index: 2000; 
    display: none; pointer-events: auto; 
}

/* 高亮樣式 */
.tutorial-highlight { 
    position: relative !important; 
    z-index: 4000 !important; 
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8) !important; 
    transform: scale(1.1) translateZ(0); 
    transition: all 0.3s ease; 
    pointer-events: auto !important; 
}

.char-tile.tutorial-highlight, 
.drop-zone.tutorial-highlight { 
    background-color: white !important; 
    border: 2px solid #ef4444 !important; 
}

.tower-clear-btn { 
    position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; 
    background-color: #ef4444; color: white; 
    border-radius: 50%; display: flex; justify-content: center; align-items: center; 
    cursor: pointer; font-size: 18px; font-weight: bold; line-height: 1; 
    z-index: 150; box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
    border: 2px solid white; transition: transform 0.2s; 
}
.tower-clear-btn:active { transform: scale(0.9); background-color: #dc2626; }

.tower-clear-btn.tutorial-highlight { 
    position: absolute !important; top: -12px !important; right: -12px !important; 
    background-color: #ef4444 !important; color: white !important; 
    box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.8) !important; 
    transform: scale(1.2) translateZ(0) !important; z-index: 4000 !important; 
}

.heart-btn.tutorial-highlight { 
    background-color: transparent !important; 
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.8) !important; 
    transform: scale(1.5) !important; z-index: 4000 !important; 
}

/* 提示相關 (絕對定位) */
/* --- 提示訊息：中央懸浮通知樣式 (Toast) --- */
#hint-result-area {
    position: fixed;
    top: 15%; /* 視窗上方約 15% 的位置 */
    left: 50%;
    transform: translateX(-50%); /* 水平置中 */
    
    background-color: rgba(255, 255, 255, 0.98);
    border: 3px solid #b91c1c; /* 紅色邊框 */
    color: #b91c1c; /* 紅色字體 */
    padding: 10px 25px;
    border-radius: 50px;
    
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 2px;
    
    z-index: 8000; /* 確保蓋過所有遊戲物件 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    pointer-events: none; /* 讓點擊穿透，不擋手 */
    
    /* 初始隱藏，有內容時由 JS 顯示 */
    opacity: 0;
    transition: opacity 0.3s;
}

/* 當裡面有內容時的 class (稍後會在 JS 加上) */
#hint-result-area.show {
    opacity: 1;
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.red-circle-mark { 
    position: relative; border: 4px solid #ef4444 !important; 
    border-radius: 8px !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); 
    z-index: 1900 !important; background-color: #fff1f2 !important; 
}
.hint-float-label { 
    position: absolute; top: -45px; left: 50%; transform: translateX(-50%); 
    background: #b91c1c; color: white; padding: 6px 10px; 
    border-radius: 6px; font-size: 14px; font-weight: bold; 
    white-space: nowrap; z-index: 2005; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); animation: bounce 1s infinite alternate; 
}
.hint-float-label::after { 
    content: ''; position: absolute; bottom: -6px; left: 50%; margin-left: -6px; 
    border-width: 6px 6px 0; border-style: solid; 
    border-color: #b91c1c transparent transparent transparent; 
}
@keyframes bounce { from{transform:translate(-50%, 0);} to{transform:translate(-50%, -5px);} }

/* --- NPC 對話視窗 --- */
.npc-container { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    z-index: 9500; display: flex; align-items: flex-end; justify-content: center; 
    background-color: transparent; pointer-events: auto; padding-bottom: 20px; 
}
.npc-wrapper { 
    display: flex; align-items: flex-end; width: 100%; max-width: 600px; padding: 0 20px; 
}
.npc-image-box { 
    width: 160px; /* 縮小寬度，讓圖片靠左 */
    height: 300px; margin-right: -20px; /* 減少重疊間距 */
    flex-shrink: 0; 
    font-size: 150px; text-align: center; line-height: 300px; 
    filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.4)); z-index: 2; 
}
.npc-img { width: 100%; height: 100%; object-fit: contain; }

.npc-dialog-box { 
    background: white; border: 3px solid var(--primary); border-radius: 12px; padding: 15px; 
    position: relative; flex-grow: 1; box-shadow: 4px 4px 0 rgba(0,0,0,0.2); 
    min-height: 120px; z-index: 1; margin-bottom: 20px; 
}
.npc-dialog-box::before { 
    content: ''; position: absolute; left: -12px; bottom: 40px; 
    border-width: 12px 12px 12px 0; border-style: solid; 
    border-color: transparent var(--primary) transparent transparent; 
}
.npc-dialog-box::after { 
    content: ''; position: absolute; left: -6px; bottom: 40px; 
    border-width: 10px 10px 10px 0; border-style: solid; 
    border-color: transparent white transparent transparent; 
}
.npc-name { 
    position: absolute; top: -15px; left: 10px; 
    background: var(--secondary); color: white; 
    padding: 2px 10px; border-radius: 4px; font-size: 0.8rem; 
    font-weight: bold; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); 
}
.npc-text { 
    font-size: 1rem; color: #44403c; margin-bottom: 10px; 
    line-height: 1.5; font-weight: bold; 
}
.npc-action-btn { 
    float: right; background: var(--primary); color: white; border: none; 
    padding: 5px 15px; border-radius: 4px; font-weight: bold; 
    cursor: pointer; font-size: 0.9rem; pointer-events: auto; 
}

.npc-action-btn:active { transform: scale(0.95); }
/* --- 廣告 Loading 動畫 --- */
#ad-loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); /* 深色半透明背景 */
    z-index: 10000; /* 層級必須最高，蓋過所有 UI */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    backdrop-filter: blur(4px); /* 模糊背景增加質感 */
}

.ad-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* 淺灰底色 */
    border-top: 5px solid #fbbf24; /* 金黃色轉動條 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.ad-loading-text {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    animation: pulse-text 1.5s infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}