/* =========================================
   1. 核心變數與全域設定 (Variables & Base)
   ========================================= */
:root {
    --gold: #d4af37; 
    --gold-bright: #ffdf73; 
    --dark-bg: #0b0c10;
    --mystic-purple: #1f1235; 
    --mystic-red: #3e1423; 
    --accent-cyan: #45a29e; 
    --text-main: #c5c6c7;
    --card-back-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --card-back-border: rgba(212, 175, 55, 0.6);
}

body {
    margin: 0; 
    padding: 0; 
    background-color: var(--dark-bg);
    color: var(--text-main); 
    font-family: 'PingFang TC', 'Microsoft JhengHei', serif;
    overflow-x: hidden; 
    min-height: 100vh; 
}

.mystic-background {
    position: fixed; top: 0; left: 0; width: 100vw; 
    height: 100vh; height: 100dvh;
    background: radial-gradient(circle at 50% 50%, var(--mystic-purple) 0%, var(--mystic-red) 50%, var(--dark-bg) 100%);
    opacity: 0.6; z-index: -2;
}

.floating-particles {
    position: fixed; top: 0; left: 0; width: 100vw; 
    height: 100vh; height: 100dvh;
    background-image: radial-gradient(rgba(255, 223, 115, 0.15) 1px, transparent 1px);
    background-size: 60px 60px; z-index: -1; 
    animation: floating 40s linear infinite;
}
@keyframes floating { 0% { background-position: 0 0; } 100% { background-position: -120px -120px; } }

.container {
    max-width: 800px; width: 95%; 
    margin: 0 auto;
    padding: 120px 0 50px; 
    text-align: center; position: relative; z-index: 1; 
    transition: padding 0.3s;
}

.hidden { display: none !important; }

.fade-section {
    opacity: 0; transform: translateY(20px); 
    transition: 0.6s all ease;
}
.fade-section.active {
    opacity: 1; transform: translateY(0);
}

/* =========================================
   2. 導覽列與選單 (Navigation)
   ========================================= */
.top-nav {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(11, 12, 16, 0.98); 
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; 
    padding: 10px 5px; z-index: 2000; 
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.nav-btn {
    background: transparent; border: none; color: #888; font-size: 0.95rem; 
    cursor: pointer; transition: 0.3s; padding: 5px 10px; position: relative;
}
.nav-btn.active { color: var(--gold-bright); text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
.nav-btn.active::after {
    content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); 
    width: 20px; height: 2px; background: var(--gold-bright); box-shadow: 0 0 10px var(--gold-bright);
}

.nav-dropdown {
    display: none; position: fixed; top: 60px;
    background: rgba(20, 20, 25, 0.98); border: 1px solid var(--gold); border-radius: 8px;
    width: max-content; z-index: 2010; box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    padding: 5px 0;
}
.nav-dropdown.show { display: block; animation: fadeIn 0.2s ease; }
.nav-dropdown div {
    padding: 12px 20px; color: #ccc; cursor: pointer; transition: 0.2s;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1); text-align: left; font-size: 0.95rem;
    white-space: normal; line-height: 1.5; break-inside: avoid;
}
.nav-dropdown div:last-child { border-bottom: none; }
.nav-dropdown div:hover { background: rgba(212, 175, 55, 0.15); color: var(--gold-bright); }
@keyframes fadeIn { from{opacity:0; transform: translateY(-10px);} to{opacity:1; transform: translateY(0);} }

@media (max-width: 768px) {
    .top-nav {
        flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; 
        padding: 10px 15px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .top-nav::-webkit-scrollbar { display: none; }
    .nav-btn { flex-shrink: 0; white-space: nowrap; font-size: 1rem; }
    .nav-dropdown { top: 55px; width: 90vw; max-width: 400px; }
    .container { padding-top: 80px !important; }
}

/* =========================================
   3. 通用元件與排版 (Typography & Inputs)
   ========================================= */
h1 { color: var(--gold); font-size: 3rem; letter-spacing: 8px; text-shadow: 0 0 20px rgba(212, 175, 55, 0.4); margin-bottom: 10px; }
.subtitle { color: #8a8d91; font-size: 1.1rem; margin-bottom: 40px; letter-spacing: 2px; }
.question-display { color: var(--gold-bright); font-size: 1.25rem; margin-bottom: 20px; letter-spacing: 1.5px; font-weight: normal; text-shadow: 0 0 8px rgba(255, 223, 115, 0.3); }
.golden-title { color: var(--gold); text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); letter-spacing: 2px; margin-bottom: 20px; }

.input-group { display: flex; flex-direction: column; gap: 20px; max-width: 400px; margin: 0 auto 40px; }
input, select.mystic-select {
    background: rgba(20, 20, 25, 0.6); border: 1px solid rgba(212, 175, 55, 0.3); 
    padding: 15px 20px; color: white; font-size: 1rem; border-radius: 8px; outline: none; transition: 0.3s; 
    font-family: inherit; width: 100%; box-sizing: border-box;
}
input:focus, select.mystic-select:focus { border-color: var(--gold-bright); box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); }

.btn-glow {
    background: transparent; color: var(--gold); border: 1px solid var(--gold); padding: 15px 50px; 
    font-size: 1.2rem; cursor: pointer; border-radius: 4px; transition: 0.4s;
}
.btn-glow:hover { background-color: rgba(212, 175, 55, 0.15); box-shadow: 0 0 20px var(--gold); transform: translateY(-2px); }

.btn-outline { background: transparent; border: 1px solid #555; color: #ccc; padding: 10px 30px; border-radius: 4px; cursor: pointer; transition: 0.3s;}
.btn-outline:hover { border-color: var(--text-main); color: white; }
.btn-danger { border-color: #8a3a3a; color: #d76d77; }
.btn-danger:hover { border-color: #d76d77; background: rgba(215, 109, 119, 0.1); }

/* =========================================
   4. 抽牌區與卡牌顯示 (Cards & Slots)
   ========================================= */
.pulse-text { animation: pulseText 2s infinite; color: var(--text-main); }
@keyframes pulseText { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.slot-container { 
    display: flex; justify-content: center; gap: 15px; 
    margin: 20px 0 40px; flex-wrap: wrap; min-height: 110px; 
}
.card-slot { 
    width: 65px; height: 110px; border: 2px dashed rgba(212, 175, 55, 0.4); 
    border-radius: 6px; display: flex; align-items: center; justify-content: center; 
    transition: 0.3s; position: relative; 
}
.card-slot.filled { 
    border: 1px solid var(--gold-bright); 
    background: linear-gradient(135deg, #2a1b3d 0%, #4a192c 100%); 
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); cursor: pointer; 
}
.card-slot.loading-pulse { 
    animation: pulseGlow 1.2s infinite alternate; 
    pointer-events: none; border: 1px solid var(--accent-cyan); 
}
@keyframes pulseGlow { 0% { box-shadow: 0 0 5px rgba(69, 162, 158, 0.2); } 100% { box-shadow: 0 0 20px rgba(69, 162, 158, 0.8); } }

/* [核心修復] 處理 Flexbox 溢出裁切問題 */
.card-deck-stack { 
    display: flex; flex-direction: column; gap: 15px; 
    margin: 20px auto 40px; 
    align-items: flex-start; /* 改為 flex-start 防止手機版溢出時左側被裁切 */
    width: 100vw; position: relative; left: 50%; transform: translateX(-50%);
    overflow-x: auto; padding: 30px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    overscroll-behavior-x: contain; 
}
.card-deck-stack::-webkit-scrollbar { display: none; }
.deck-row { 
    display: flex; 
    justify-content: flex-start; /* 改為 flex-start 讓手機版能滑到最左緣 */
    height: 110px; padding: 0 30px; 
    width: max-content; 
    margin: 0 auto; /* 電腦版寬度足夠時，自動在父容器中置中 */
}
.tarot-card-overlap { 
    width: 65px; height: 110px; background: var(--card-back-bg); 
    border: 1px solid var(--card-back-border); border-radius: 6px; 
    margin-left: -48px; /* 卡牌重疊的關鍵 */
    cursor: pointer; transition: transform 0.3s, opacity 0.3s; box-shadow: -2px 0 8px rgba(0,0,0,0.6); position: relative; 
}
.tarot-card-overlap:hover { transform: translateY(-15px); border-color: var(--gold-bright); z-index: 100 !important; }
.tarot-card-overlap.hidden-deck-card { opacity: 0; pointer-events: none; }

/* [核心修復] 取消第一張牌的負邊距，避免它被拉入 padding 區域消失 */
.tarot-card-overlap:first-child {
    margin-left: 0;
}

.selection-status { margin: 20px auto; }
.progress-bar { width: 200px; height: 4px; background: #222; margin: 0 auto 10px; border-radius: 2px; overflow: hidden; }
.progress-fill { width: 0%; height: 100%; background: var(--gold); transition: width 0.5s ease; }
.selection-count { color: #aaa; font-size: 0.9rem; }
.highlight-number { color: var(--gold-bright); font-size: 1.2rem; font-weight: bold; }

/* =========================================
   5. 結果顯示 (Result UI)
   ========================================= */
.card-display-row { 
    display: flex; justify-content: center; align-items: center; 
    gap: 15px; margin-bottom: 20px; padding: 10px; flex-wrap: wrap; 
}
.display-card-wrapper { 
    width: 28%; min-width: 110px; max-width: 160px; aspect-ratio: 1/1.7; 
    perspective: 1000px; position: relative; margin-bottom: 10px; 
}
.flipper { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.display-card-wrapper.reveal .flipper { transform: rotateY(180deg); }
.flipper-front, .flipper-back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; backface-visibility: hidden; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.8); }
.flipper-front { background: var(--card-back-bg); border: 2px solid var(--card-back-border); display: flex; align-items: center; justify-content: center; z-index: 2; transform: rotateY(0deg); }
.flipper-back { transform: rotateY(180deg); }
.display-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 2px solid var(--gold); }
.is-reversed { transform: rotate(180deg); }

body.disable-3d .flipper { transition: none; transform-style: flat; }
body.disable-3d .flipper-front { display: block; z-index: 2; transition: opacity 0.4s; }
body.disable-3d .flipper-back { display: block; z-index: 1; transform: none; opacity: 0; transition: opacity 0.4s; }
body.disable-3d .display-card-wrapper.reveal .flipper-front { opacity: 0; pointer-events: none; }
body.disable-3d .display-card-wrapper.reveal .flipper-back { opacity: 1; }

.result-item { 
    background: rgba(30, 30, 40, 0.8); margin: 20px 0; padding: 25px; 
    border-radius: 12px; border-left: 4px solid var(--gold); text-align: left; 
    opacity: 0; transform: translateY(30px); transition: 1s all ease; 
}
.result-item.reveal { opacity: 1; transform: translateY(0); }

.card-header { display: flex; align-items: baseline; gap: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.card-position { font-size: 0.9rem; color: var(--accent-cyan); letter-spacing: 1px; }
.card-name { font-size: 1.5rem; color: var(--gold-bright); margin: 0; }
.keyword-list { margin-bottom: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.keyword-tag { background: rgba(212, 175, 55, 0.1); color: var(--gold); padding: 4px 12px; border-radius: 15px; margin-right: 5px; font-size: 0.85rem; display: inline-block; margin-bottom: 5px; }

/* =========================================
   6. 歷史紀錄與儀表板 (History Dashboard)
   ========================================= */
.dashboard-container { 
    background: rgba(20, 20, 25, 0.8); border: 1px solid var(--gold); 
    border-radius: 8px; padding: 20px; margin-bottom: 30px; 
    text-align: left; 
}
.dash-title { color: var(--gold-bright); font-size: 1.2rem; margin-top: 0; border-bottom: 1px dashed rgba(212,175,55,0.3); padding-bottom: 10px; }
.dash-row { display: flex; justify-content: space-between; margin-top: 15px; flex-wrap: wrap; gap: 10px; }
.dash-stat { width: 48%; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 6px; box-sizing: border-box; }
.dash-label { color: #888; font-size: 0.85rem; display: block; margin-bottom: 5px; }
.element-bar-bg { width: 100%; height: 6px; background: #333; border-radius: 3px; margin-top: 5px; overflow: hidden; display: flex; }
.bar-wands { background: #d76d77; } .bar-cups { background: #45a29e; } 
.bar-swords { background: #d4af37; } .bar-pents { background: #8fbc8f; }

.history-controls { margin-bottom: 20px; text-align: right; }
.history-item { 
    background: rgba(30, 30, 40, 0.8); border: 1px solid rgba(212,175,55,0.2); 
    padding: 20px; margin-bottom: 15px; border-radius: 8px; text-align: left;
}
.history-meta { display: flex; justify-content: space-between; align-items: center; color: #888; font-size: 0.85rem; margin-bottom: 15px; border-bottom: 1px dashed #444; padding-bottom: 10px; }
.history-question { color: var(--gold-bright); font-size: 1.1rem; margin-bottom: 15px; font-weight: bold; }
.history-cards-mini { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.mini-card { background: rgba(0,0,0,0.3); border: 1px solid rgba(212,175,55,0.3); padding: 5px 10px; border-radius: 4px; font-size: 0.9rem; text-align: center; }
.empty-history { color: #666; padding: 50px 0; text-align: center; }

/* =========================================
   7. 各類彈窗模組 (Modals)
   ========================================= */
.modal { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); display: none; justify-content: center; 
    align-items: center; z-index: 3000; opacity: 0; transition: 0.3s; 
}
.modal.active { opacity: 1; }
.modal-content {
    background: linear-gradient(180deg, #1e1e28 0%, #141419 100%);
    border: 1px solid var(--gold); border-radius: 12px; padding: 30px;
    width: 400px; max-width: 95vw; box-sizing: border-box; position: relative; text-align: left;
}
.close-btn { position: absolute; top: 10px; right: 15px; color: var(--gold); font-size: 1.8rem; cursor: pointer; transition: 0.3s; }
.close-btn:hover { color: var(--gold-bright); transform: scale(1.1); }

.text-block { margin-bottom: 15px; line-height: 1.7; color: #dcdde1; }
.text-label { color: var(--gold); font-size: 0.9rem; letter-spacing: 1px; display: block; margin-bottom: 5px; opacity: 0.8; }

/* 自訂分享彈窗專屬樣式 */
.share-textarea {
    width: 100%; height: 80px; background: rgba(0,0,0,0.5); 
    border: 1px solid rgba(212,175,55,0.5); color: #fff; 
    padding: 10px; border-radius: 6px; resize: none; 
    margin-bottom: 15px; font-size: 16px;
    word-break: break-all; box-sizing: border-box; font-family: inherit;
}
.share-textarea:focus { border-color: var(--gold-bright); outline: none; }

/* =========================================
   8. 命運轉場特效 (Loading Overlay)
   ========================================= */
.destiny-loader-overlay { 
    position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
    background: radial-gradient(circle at 50% 50%, #1f1235 0%, #0b0c10 100%); 
    z-index: 9999; display: flex; flex-direction: column; justify-content: center; 
    align-items: center; opacity: 0; pointer-events: none; transition: 0.5s opacity; 
}
.destiny-loader-overlay.active { opacity: 1; pointer-events: all; }
.destiny-spinner { 
    width: 80px; height: 80px; border: 4px solid rgba(212, 175, 55, 0.1); 
    border-top-color: var(--gold-bright); border-radius: 50%; 
    animation: spin 1.5s linear infinite; margin-bottom: 30px; 
}
.destiny-text { color: var(--gold); font-size: 1.3rem; letter-spacing: 3px; font-weight: 300; text-align: center; max-width: 80%; line-height: 1.8; animation: pulse 2s infinite; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.5; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1); } }