:root {
    --csl-primary: #D2A054; /* 1010 Premium Gold */
    --csl-primary-gradient: linear-gradient(135deg, #E6C280, #B87333);
    --csl-secondary: #000000;
    --bg-color: #0A0A0A; /* 深黑底色 */
    --text-main: #E0E0E0;
    --text-light: #A0A0A0;
    --card-bg: #141414; /* 卡片深色背景 */
    --danger: #D93838;
    --success: #D2A054; /* 將原本的綠色成功替換為金色質感 */
    --warning: #F1C40F;
    --gold-border: rgba(210, 160, 84, 0.4);
    --gold-glow: 0 0 15px rgba(210, 160, 84, 0.2);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'PingFang HK', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    height: 90vh;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Mobile App Container */
#app-container {
    width: 100%;
    max-width: 900px;
    height: 100vh;
    background: var(--bg-color);
    position: relative;
    box-shadow: 0 0 30px rgba(210, 160, 84, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top Header */
.header {
    background: var(--csl-secondary);
    color: var(--csl-primary);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    border-bottom: 1px solid var(--gold-border);
    box-shadow: var(--gold-glow);
}

.header-title {
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.header-coins {
    background: rgba(210, 160, 84, 0.1);
    border: 1px solid var(--gold-border);
    color: var(--csl-primary);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Page Container */
.page {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-color);
    animation: fadeIn 0.4s ease;
}
.page.active { display: flex; }

/* ======== Page 1: Level Selection ======== */
.user-header {
    padding: 20px;
    text-align: center;
    background: #000;
    color: var(--csl-primary);
    border-bottom: 1px solid var(--gold-border);
}

.level-header {
    padding-top: 15px;
    padding-bottom: 5px;
    text-align: center;
    background: transparent;
    color: var(--csl-primary);
}

.level-header h3 { font-size: 1.2rem; margin-bottom: 5px; letter-spacing: 2px; }

.card-list { padding: 15px; display: flex; flex-direction: column; gap: 15px; }

.product-card, .type-card, .diff-card {
    background: var(--card-bg);
    border: 1px solid var(--gold-border);
    border-radius: 12px;
    padding: 15px;
    box-shadow: var(--gold-glow);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.product-card:active, .type-card:active, .diff-card:active { transform: scale(0.98); border-color: var(--csl-primary); }

.card-title { font-weight: bold; font-size: 1.1rem; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; color: var(--text-main); }
.progress-bar-bg { background: #222; height: 8px; border-radius: 4px; margin-bottom: 10px; overflow: hidden; border: 1px solid #333; }
.progress-bar-fill { background: var(--csl-primary-gradient); height: 100%; border-radius: 4px; box-shadow: 0 0 10px rgba(210,160,84,0.5); }
.badge { font-size: 0.8rem; background: rgba(210,160,84,0.1); color: var(--csl-primary); border: 1px solid var(--gold-border); padding: 4px 8px; border-radius: 4px; display: inline-block; }

/* ======== Page 2: Difficulty ======== */
.back-btn { padding: 12px 15px; color: var(--csl-primary); font-weight: bold; cursor: pointer; background: #000; border-bottom: 1px solid var(--gold-border); text-transform: uppercase; letter-spacing: 1px;}

.diff-card { margin: 0 15px 15px 15px; border-left: 5px solid var(--gold-border); }
.diff-card.easy { border-left-color: #A87C4F; }
.diff-card.normal { border-left-color: var(--csl-primary); }
.diff-card.hard { border-left-color: #E6C280; }
.diff-card.hell { border-left-color: var(--danger); }

.diff-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.diff-stars { font-size: 0.9rem; color: var(--csl-primary); }
.diff-name { font-weight: bold; font-size: 1.1rem; color: var(--csl-primary); }
.diff-desc { font-size: 0.85rem; color: var(--text-light); }

/* ======== Page 3: Game UI ======== */
.game-header {
    background: #0D0D0D;
    border-bottom: 1px solid var(--gold-border);
    padding: 8px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--gold-glow);
    z-index: 5;
}

.health-bar-container { display: flex; align-items: center; gap: 10px; }
.health-title { font-size: 0.85rem; font-weight: bold; color: var(--csl-primary); }
.health-score { font-size: 0.85rem; font-weight: bold; min-width: 35px; text-align: right; color: var(--csl-primary) !important; }

.scene-area {
    height: 20vh;
    background: #000;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 1px solid var(--gold-border);
}
.scene-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    background: #000;
    z-index: 1;
    padding: 5px;
}

.system-tip { background: rgba(210,160,84,0.1); color: var(--csl-primary); padding: 5px 15px; font-size: 0.8rem; text-align: center; border-bottom: 1px solid var(--gold-border); }

.chat-area {
    flex: 1;
    padding: 15px;
    padding-bottom: 30vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--bg-color);
}

.input-area {
    background: #0D0D0D;
    padding: 12px 15px;
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--gold-border);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.8);
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 900px;
}

.skills-bar {
    display: flex; gap: 10px; 
    padding: 10px 15px; 
    background: linear-gradient(to top, #0D0D0D, transparent);
    position: fixed;
    width: 100%;
    max-width: 900px;
    bottom: 65px;
}

.skill-btn { background: #1A1A1A; border: 1px solid var(--gold-border); padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; color: var(--csl-primary); cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: var(--gold-glow); transition: 0.3s;}
.skill-btn.active, .skill-btn:active { background: var(--csl-primary-gradient) !important; color: #000 !important; border: none; }

.chat-input { flex: 1; background: #141414; border: 1px solid var(--gold-border); color: #FFF; border-radius: 20px; padding: 10px 15px; font-size: 0.95rem; outline: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); }
.chat-input::placeholder { color: #666; }
.send-btn { background: var(--csl-primary-gradient); color: #000; border: none; width: 42px; height: 42px; border-radius: 21px; font-size: 1.2rem; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 0 10px rgba(210,160,84,0.4); }

/* ======== Animations ======== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* ======== Alert Modal ======== */
.modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 100;
    display: none; justify-content: center; align-items: center;
    backdrop-filter: blur(4px);
}
.modal-card {
    background: #111; width: 85%; border-radius: 16px; padding: 25px 20px;
    text-align: center; box-shadow: 0 10px 40px rgba(210,160,84,0.2);
    border: 1px solid var(--gold-border);
    transform: scale(0.9); transition: transform 0.2s;
}
.modal-overlay.active { display: flex; }
.modal-overlay.active .modal-card { transform: scale(1); }
.modal-icon { font-size: 2.5rem; margin-bottom: 10px; color: var(--csl-primary); text-shadow: var(--gold-glow); }
.modal-title { font-weight: bold; font-size: 1.2rem; margin-bottom: 10px; color: var(--csl-primary); }
.modal-desc { font-size: 0.9rem; color: var(--text-light); margin-bottom: 20px; line-height: 1.6; }
.btn-primary { background: var(--csl-primary-gradient); color: #000; border: none; padding: 12px; width: 100%; border-radius: 8px; font-size: 1rem; font-weight: bold; margin-bottom: 10px; cursor: pointer; box-shadow: var(--gold-glow);}
.btn-secondary { background: #222; color: var(--text-main); border: 1px solid #444; padding: 12px; width: 100%; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; }

/* Result Page Elements */
.result_h2 {
    background: linear-gradient(90deg, rgba(210,160,84,0.2), transparent);
    border-left: 4px solid var(--csl-primary);
    color: var(--csl-primary);
    font-weight: bold; 
    font-size: 1.1rem;
    padding: 8px 12px;
    margin-top: 15px;
    margin-bottom: 10px;
}

table { color: var(--text-main); border-collapse: collapse; }
table th, table td { border-color: #333 !important; }
table thead tr { background-color: #1A1A1A !important; color: var(--csl-primary); }

.typing-indicator { display: flex; align-items: center; font-family: sans-serif; color: var(--csl-primary); }
.typing-indicator span { margin-right: 5px; font-size: 14px; }
.typing-indicator i { font-size: 6px; margin: 0 2px; color: var(--csl-primary); animation: typingBounce 1.4s infinite ease-in-out both; }
.typing-indicator i:nth-child(2) { animation-delay: -0.32s; }
.typing-indicator i:nth-child(3) { animation-delay: -0.16s; }
.typing-indicator i:nth-child(4) { animation-delay: 0s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; box-shadow: var(--gold-glow); }
}
.chart-container { width: 100%; margin: 0 auto; padding: 20px; font-family: 'Google Sans', Arial, sans-serif; }

/* Scrollbar styling for dark mode */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--csl-primary); }