/* --- 森林風格主題 (完整豪華版) v2.1 --- */
:root {
    /* --- 顏色定義 --- */
    /* 核心色調 */
    --forest-green: #2F4F4F;
    --tree-bark: #5C3317;
    --sunbeam-yellow: #E6A84E; /* 微調，更柔和 */
    --sky-blue: #428BCA;
    --danger-red: #D9534F;
    --stone-gray: #A9A9A9;
    --leaf-green: #5CB85C;
    --parchment-bg: #F5F5DC; /* 羊皮紙背景色 */
    --dark-parchment-bg: #EAE5C9;

    /* 漸層定義 */
    --primary-gradient: linear-gradient(135deg, #2F4F4F 0%, #4A7C59 100%);
    --secondary-gradient: linear-gradient(135deg, #5C3317 0%, #8B4513 100%);
    --success-gradient: linear-gradient(135deg, var(--leaf-green) 0%, #6B8E23 100%);
    --warning-gradient: linear-gradient(135deg, var(--sunbeam-yellow) 0%, #DAA520 100%);

    /* --- 淺色主題 (森林白天) --- */
    --body-bg: var(--parchment-bg);
    --bg-primary: white;
    --bg-secondary: #F8F5ED;
    --text-primary: #3D2B1F; /* 深棕色文字 */
    --text-secondary: #70543E;
    --border-color: #D2B48C; /* 鞣革色邊框 */
    --card-bg: white;
    /* 柔和陰影 */
    --shadow-color-soft: rgba(92, 51, 23, 0.1);
    --shadow-color-medium: rgba(92, 51, 23, 0.15);


    /* --- 六頂思考帽顏色 --- */
    --color-white: #6c757d;
    --color-red: #dc3545;
    --color-black: #343a40;
    --color-yellow: #ffc107;
    --color-green: #28a745;
    --color-blue: #007bff;
}

/* --- 深色模式美化 (動物蹤跡的午夜森林) --- */
[data-theme="dark"] {
    --body-bg: linear-gradient(135deg, #1a1a1a 0%, #292a20 100%); /* 深綠棕漸層 */
    --bg-primary: #212121;
    --bg-secondary: #2d2d2d;
    --card-bg: #383838;
    --text-primary: #c5c8c6;   /* 苔蘚灰文字 */
    --text-secondary: #8c918d; /* 石板灰文字 */
    --border-color: #4a4a4a;
    /* 深色模式下的柔和陰影 */
    --shadow-color-soft: rgba(0, 0, 0, 0.3);
    --shadow-color-medium: rgba(0, 0, 0, 0.5);


    /* --- 新增的點綴色 --- */
    --moonlight-glow: #708090; /* 霧氣/月光 */
    --firefly-yellow: #9acd32; /* 螢光綠/蘑菇光 */

    /* 深色模式下的漸變色 */
    --secondary-gradient: linear-gradient(135deg, #4a4a4a 0%, #383838 100%);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    margin: 0;
    padding: 20px;
    background-color: var(--body-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    transition: background 0.5s ease, color 0.5s ease;
}

/* 淺色模式背景圖案 (模擬陽光穿透樹林) */
[data-theme="light"] body {
    background:
        radial-gradient(circle at 50% 0%, rgba(245, 245, 220, 0.2) 0%, transparent 60%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><path fill="%23D2B48C" fill-opacity="0.1" d="M0 0h40v40H0zM40 40h40v40H40z"></path></svg>'),
        var(--parchment-bg);
}

/* 深色模式下的動物腳印背景 (增加月光/螢火蟲光暈) */
[data-theme="dark"] body {
    background:
        radial-gradient(circle at 50% 10%, var(--moonlight-glow, rgba(112, 128, 144, 0.15)) 0%, transparent 70%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M24.6 5.8C23.6 5.2 22.3 5.3 21.4 6 18.2 8.2 16.2 11.7 16.3 15.4c0.2 4.2 2.3 8 5.8 10.3 0.9 0.6 2 0.5 2.8 -0.3 2.6 -2.4 4.1 -5.6 4.1 -9.1C29 11.2 27.2 8 24.6 5.8zM53.8 17.2c-1 -0.6 -2.3 -0.5 -3.2 0.2 -3.2 2.2 -5.2 5.7 -5.1 9.4 0.2 4.2 2.3 8 5.8 10.3 0.9 0.6 2 0.5 2.8 -0.3 2.6 -2.4 4.1 -5.6 4.1 -9.1C58.2 22.6 56.4 19.4 53.8 17.2zM80.2 5.8c-1 -0.6 -2.3 -0.5 -3.2 0.2 -3.2 2.2 -5.2 5.7 -5.1 9.4 0.2 4.2 2.3 8 5.8 10.3 0.9 0.6 2 0.5 2.8 -0.3 2.6 -2.4 4.1 -5.6 4.1 -9.1C84.6 11.2 82.8 8 80.2 5.8zM36.4 52.2c-1.3 0 -2.6 -0.6 -3.4 -1.7 -2.1 -2.7 -2.9 -6.2 -2.2 -9.5 0.9 -4.4 3.7 -8.2 7.7 -10.1 1.2 -0.6 2.6 -0.1 3.2 1.1 0.6 1.2 0.1 2.6 -1.1 3.2 -2.7 1.3 -4.6 4 -5.1 6.9 -0.4 2.1 0.1 4.3 1.5 5.9 0.8 0.9 0.9 2.3 0.2 3.2C40.1 51.7 38.3 52.2 36.4 52.2z" fill-opacity="0.05" fill="%23c5c8c6"/></svg>'),
        var(--body-bg);
}


.container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-primary);
    border-radius: 20px;
    box-shadow: 0 10px 25px var(--shadow-color-medium), 0 5px 10px var(--shadow-color-soft);
    border: 3px solid var(--tree-bark);
    overflow: hidden;
    flex-grow: 1;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease;
}

[data-theme="dark"] .container {
    border: 2px solid var(--border-color);
    box-shadow: 0 0 25px var(--shadow-color-medium), inset 0 0 15px var(--shadow-color-soft);
}


.theme-switcher {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background: var(--bg-primary);
    border: 2px solid var(--tree-bark);
    border-radius: 50px;
    padding: 8px 16px;
    box-shadow: 0 4px 15px var(--shadow-color-medium);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-theme="dark"] .theme-switcher {
    border: 1px solid var(--border-color);
}

.theme-switcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-color-medium);
}

.theme-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.theme-switcher:hover .theme-icon {
    transform: rotate(180deg);
}

.theme-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.header {
    background: var(--secondary-gradient);
    color: white;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--tree-bark);
}

[data-theme="dark"] .header {
    border-bottom: 1px solid var(--border-color);
    text-shadow: 0 0 10px var(--moonlight-glow); /* 標題月光效果 */
}


.header::before {
    content: '🌿';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    font-size: 300px;
    color: rgba(255, 255, 255, 0.1);
    animation: float 8s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.header h1 {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.header p {
    margin: 15px 0 0 0;
    font-size: 1.1rem;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.progress-container {
    background: var(--bg-primary);
    padding: 20px 30px;
    border-bottom: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.progress-text {
    font-weight: 600;
    color: var(--text-primary);
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--leaf-green);
    width: 0%;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* 深色模式下的螢火蟲進度條 */
[data-theme="dark"] .progress-bar {
    background: var(--firefly-yellow);
    box-shadow: 0 0 10px var(--firefly-yellow);
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.question-navigation {
    background: var(--bg-secondary);
    padding: 20px 30px;
    border-bottom: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.nav-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.question-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: 8px;
    max-width: 600px;
}

.question-nav-item {
    width: 40px;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: var(--bg-primary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}

.question-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transition: left 0.5s;
}

.question-nav-item:hover::before {
    left: 100%;
}

.question-nav-item:hover {
    border-color: var(--leaf-green);
    background: #F1FFF1;
    transform: translateY(-2px);
}

.question-nav-item.completed {
    background: var(--leaf-green);
    color: white;
    border-color: var(--leaf-green);
    animation: pulse 2s infinite;
}

.question-nav-item.current {
    background: var(--sky-blue);
    color: white;
    border-color: var(--sky-blue);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(66, 139, 202, 0.4);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 深色模式下的導航按鈕 */
[data-theme="dark"] .question-nav-item:hover {
    border-color: var(--firefly-yellow);
    background: rgba(154, 205, 50, 0.1);
}
[data-theme="dark"] .question-nav-item.completed {
    background: var(--moonlight-glow);
    color: #1a1a1a;
    border-color: var(--moonlight-glow);
    box-shadow: 0 0 8px var(--moonlight-glow);
}

[data-theme="dark"] .question-nav-item.current {
    background: var(--firefly-yellow);
    color: #1a1a1a;
    border-color: var(--firefly-yellow);
    box-shadow: 0 0 12px var(--firefly-yellow);
}

.content {
    padding: 40px 30px;
}

.instructions {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--dark-parchment-bg);
    border-radius: 15px;
    border-left: 6px solid var(--tree-bark);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

[data-theme="dark"] .instructions {
    background: var(--bg-secondary);
    border-left: 6px solid var(--moonlight-glow);
}

.instructions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    animation: instructionShine 3s infinite;
}

@keyframes instructionShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.instructions p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.questions-container {
    display: grid;
    gap: 25px;
}

.question-item {
    display: flex;
    background: var(--bg-secondary);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 15px var(--shadow-color-soft);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--sky-blue);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .question-item {
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--sky-blue);
}

.question-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(66, 139, 202, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.question-item:hover::before {
    opacity: 1;
}

.question-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 30px var(--shadow-color-medium);
}

.question-item.completed {
    border-left-color: var(--leaf-green);
    background: linear-gradient(135deg, #F1FFF1 0%, #E8F5E8 100%);
}

[data-theme="dark"] .question-item.completed {
    border-left-color: var(--moonlight-glow);
    background: linear-gradient(135deg, rgba(112, 128, 144, 0.1) 0%, rgba(112, 128, 144, 0.05) 100%);
}

.question-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tree-bark);
    margin-right: 20px;
    min-width: 30px;
    text-align: center;
    transition: color 0.3s ease;
}
[data-theme="dark"] .question-number { color: var(--moonlight-glow); }

.question-item:hover .question-number {
    color: var(--forest-green);
}
[data-theme="dark"] .question-item:hover .question-number { color: var(--firefly-yellow); }

.question-content {
    flex: 1;
}

.question-text {
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.question-item:hover .question-text {
    color: var(--text-secondary);
}

.rating-scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.scale-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 5px;
}

.radio-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex: 1;
}

.radio-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.radio-option:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.radio-option input[type="radio"] {
    width: 22px;
    height: 22px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 50%;
}
[data-theme="dark"] .radio-option input[type="radio"] {
    background-color: transparent;
}


.radio-option input[type="radio"]:checked {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(47, 79, 79, 0.2);
    background-color: var(--leaf-green);
    border-color: var(--leaf-green);
    animation: radio-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes radio-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1.2); }
}

[data-theme="dark"] .radio-option input[type="radio"]:checked {
     box-shadow: 0 0 8px var(--firefly-yellow);
     background-color: var(--firefly-yellow);
     border-color: var(--firefly-yellow);
}

.radio-option label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px; /* 增加點擊範圍 */
}

.radio-option input[type="radio"]:checked + label {
    font-weight: bold;
    color: var(--forest-green);
}
[data-theme="dark"] .radio-option input[type="radio"]:checked + label {
    color: var(--firefly-yellow);
    text-shadow: 0 0 8px var(--firefly-yellow);
}

/* --- 結果分析區塊 --- */
.results-section {
    margin-top: 40px;
    padding: 30px;
    background: var(--bg-primary);
    border-radius: 15px;
    display: none;
    animation: fadeIn 0.8s ease-out;
    transition: all 0.3s ease;
}

.results-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--text-primary);
    position: relative;
    padding-bottom: 15px;
}

.results-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: var(--secondary-gradient);
    border-radius: 2px;
}

.result-container {
    margin-bottom: 25px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 15px;
    background: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color-soft);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: slideInRight 0.6s ease-out forwards;
    opacity: 0;
    border: 1px solid var(--border-color);
    border-left: 5px solid transparent;
    position: relative;
    overflow: hidden;
}

.result-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.6s ease;
}

.result-item:hover::before {
    left: 100%;
}

.result-item:nth-child(1) { animation-delay: 0.1s; }
.result-item:nth-child(2) { animation-delay: 0.2s; }
.result-item:nth-child(3) { animation-delay: 0.3s; }
.result-item:nth-child(4) { animation-delay: 0.4s; }
.result-item:nth-child(5) { animation-delay: 0.5s; }
.result-item:nth-child(6) { animation-delay: 0.6s; }

.result-item:hover {
    transform: translateX(8px) translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-color-medium);
}

/* 根據思維帽類型設定側邊框顏色 (取代:has()) */
.result-item--white { border-left-color: var(--color-white); }
.result-item--red { border-left-color: var(--color-red); }
.result-item--black { border-left-color: var(--color-black); }
.result-item--yellow { border-left-color: var(--color-yellow); }
.result-item--green { border-left-color: var(--color-green); }
.result-item--blue { border-left-color: var(--color-blue); }

.result-hat {
    display: flex;
    align-items: center;
    font-weight: 500;
    flex: 1;
}

.result-rank {
    font-size: 1.4rem;
    margin-right: 15px;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}

.hat-icon {
    font-size: 1.5rem;
    margin-right: 12px;
    width: 35px;
    text-align: center;
}

.hat-name {
    font-size: 1.15rem;
    font-weight: 600;
    flex: 1;
    color: var(--text-primary);
}

.result-score {
    font-size: 1.4rem;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 25px;
    color: white;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.result-score::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.result-item:hover .result-score::before {
    left: 100%;
}

.result-item:hover .result-score {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.hat-description {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 25px;
    margin-top: 15px;
    border: 1px solid var(--border-color);
    border-left-width: 5px;
    border-style: solid;
    box-shadow: 0 4px 15px var(--shadow-color-soft);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.8s ease-out;
}

.hat-description::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hat-description:hover::before {
    opacity: 1;
}

.hat-description:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow-color-medium);
}

.hat-description h4 {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hat-description p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1rem;
}

.hat-characteristics, .hat-suggestions {
    background: var(--card-bg);
    padding: 18px;
    border-radius: 10px;
    margin: 15px 0;
    border-left: 3px solid;
    border-color: inherit;
}

.hat-suggestions strong, .hat-characteristics strong {
    color: var(--text-primary);
    font-size: 1rem;
    display: flex;         /* 改為 flex 排版 */
    align-items: center;   /* 垂直置中對齊圖示與文字 */
    gap: 8px;              /* 在圖示和文字之間增加 8px 的間距 */
    margin-bottom: 8px;
}

.stats-summary {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 15px;
    margin: 20px 0;
    display: none;
    animation: fadeIn 0.8s ease-out;
}

.stats-title {
    margin: 0 0 15px 0;
    color: var(--text-primary);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.stat-item {
    text-align: center;
    padding: 15px;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 2px 5px var(--shadow-color-soft);
    transition: all 0.3s ease;
    animation: slideInUp 0.6s ease-out forwards;
    opacity: 0;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }
.stat-item:nth-child(4) { animation-delay: 0.4s; }

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--shadow-color-medium);
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--forest-green);
    display: block;
}
[data-theme="dark"] .stat-number { color: var(--moonlight-glow); }

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 5px;
}

.comparison-chart {
    background: var(--bg-secondary);
    border-radius: 15px;
    padding: 25px;
    margin-top: 20px;
    box-shadow: 0 4px 15px var(--shadow-color-soft);
    display: none;
    animation: fadeIn 0.8s ease-out;
}

.chart-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    text-align: center;
    position: relative;
}

.chart-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: var(--primary-gradient);
    border-radius: 1px;
}

.chart-bar {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--card-bg);
    border-radius: 10px;
    animation: slideInRight 0.6s ease-out forwards;
    opacity: 0;
}

.chart-bar:nth-child(1) { animation-delay: 0.1s; }
.chart-bar:nth-child(2) { animation-delay: 0.2s; }
.chart-bar:nth-child(3) { animation-delay: 0.3s; }
.chart-bar:nth-child(4) { animation-delay: 0.4s; }
.chart-bar:nth-child(5) { animation-delay: 0.5s; }
.chart-bar:nth-child(6) { animation-delay: 0.6s; }

.chart-label {
    min-width: 120px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.chart-bar-container {
    flex: 1;
    height: 20px;
    background: var(--border-color);
    border-radius: 10px;
    margin: 0 15px;
    overflow: hidden;
    position: relative;
}

.chart-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-out;
    position: relative;
    overflow: hidden;
}

.chart-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: chartShimmer 2s infinite;
}

@keyframes chartShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.chart-score {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 40px;
    transition: all 0.3s ease;
}

.chart-bar:hover .chart-score {
    transform: scale(1.2);
    color: var(--forest-green);
}
[data-theme="dark"] .chart-bar:hover .chart-score { color: var(--firefly-yellow); }

.history-section {
    background: var(--bg-secondary);
    padding: 25px;
    border-radius: 15px;
    margin-top: 30px;
    display: none;
    animation: fadeIn 0.8s ease-out;
}

[data-theme="dark"] .history-section {
    background: var(--bg-secondary);
}

.history-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-item {
    background: var(--card-bg);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px var(--shadow-color-soft);
    transition: all 0.3s ease;
    animation: slideInUp 0.5s ease-out forwards;
    opacity: 0;
}

[data-theme="dark"] .history-item {
    border: 1px solid var(--border-color); /* 新增 1px 邊框來強化輪廓 */
    margin-bottom: 12px;                   /* 將間距從 10px 微調至 12px */
}


.history-item:nth-child(1) { animation-delay: 0.1s; }
.history-item:nth-child(2) { animation-delay: 0.2s; }
.history-item:nth-child(3) { animation-delay: 0.3s; }
.history-item:nth-child(4) { animation-delay: 0.4s; }
.history-item:nth-child(5) { animation-delay: 0.5s; }

.history-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px var(--shadow-color-medium);
}

.history-date {
    font-weight: 500;
    color: var(--text-primary);
}

.history-top-hat {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.history-actions {
    display: flex;
    gap: 10px;
}

.history-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 15px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.history-btn-view {
    background: var(--sky-blue);
}

.history-btn-view:hover {
    background: #357ABD;
    transform: scale(1.1);
}

.history-btn-delete {
    background: var(--danger-red);
}

.history-btn-delete:hover {
    background: #C9302C;
    transform: scale(1.1);
}

.calculate-btn {
    display: block;
    width: 200px;
    margin: 30px auto;
    padding: 15px 30px;
    background: var(--secondary-gradient);
    color: white;
    border: 2px solid var(--tree-bark);
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 0px var(--tree-bark);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .calculate-btn {
    border: 1px solid var(--moonlight-glow);
    box-shadow: 0 4px 0px var(--moonlight-glow);
}


.calculate-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.calculate-btn:hover::before {
    left: 100%;
}

.calculate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0px var(--tree-bark);
}
[data-theme="dark"] .calculate-btn:hover { box-shadow: 0 6px 0px var(--moonlight-glow); }

.calculate-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0px var(--tree-bark);
}
[data-theme="dark"] .calculate-btn:active { box-shadow: 0 2px 0px var(--moonlight-glow); }

/* --- 保存與分享區塊標題 --- */
.save-share-section {
    background: var(--bg-secondary);
    padding: 25px;
    border-radius: 15px;
    margin-top: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.save-share-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px; /* 增加與按鈕的間距 */
    position: relative;
    z-index: 1;
    display: flex; /* 讓圖示與文字對齊 */
    align-items: center;
    justify-content: center;
    gap: 10px;
}
[data-theme="dark"] .save-share-title svg {
    stroke: var(--text-secondary);
}


/* --- 操作按鈕 --- */
.action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.action-btn {
    padding: 12px 24px;
    border: 2px solid transparent; /* 統一使用透明邊框佔位 */
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex; /* 使用 inline-flex */
    align-items: center;
    justify-content: center; /* << 新增這一行來水平置中 */
    gap: 8px;
    position: relative;
    overflow: hidden;
    color: white;
    box-shadow: 0 4px 15px var(--shadow-color-soft);
}

.action-btn svg {
    transition: transform 0.3s ease; /* 為圖示增加動畫 */
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow-color-medium);
}

.action-btn:hover svg {
    transform: scale(1.1) rotate(-5deg);
}

.action-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px var(--shadow-color-soft);
}

/* 按鈕顏色配置 */
.action-btn-primary {
    background: var(--sky-blue);
    color: white;
}
.action-btn-secondary {
    background: var(--success-gradient);
    color: white;
}
.action-btn-info {
    background: #17a2b8; /* 使用一個更明確的青色 */
    color: white;
}

/* 深色模式下的按鈕顏色 */
[data-theme="dark"] .action-btn-primary {
    background: #2c5a8c; /* 使用深藍色，保持顏色一致性 */
    color: #e0e0e0;
}
[data-theme="dark"] .action-btn-secondary {
    background: var(--firefly-yellow);
    color: #1a1a1a;
}
[data-theme="dark"] .action-btn-info {
    background: #2ca8ba;
    color: white;
}


.reset-btn {
    display: block;
    width: 150px;
    margin: 15px auto;
    padding: 10px 20px;
    background: var(--stone-gray);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reset-btn:hover {
    background: #8a8a8a;
    transform: translateY(-2px);
}

.alert-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.alert-content {
    background: var(--bg-primary);
    padding: 30px;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px var(--shadow-color-medium);
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.alert-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--danger-red);
    margin-bottom: 20px;
    text-align: center;
}

.alert-message {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.6;
}

.unanswered-list {
    background: var(--bg-secondary);
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
    border-left: 4px solid var(--danger-red);
}

.unanswered-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.question-number-tag {
    background: var(--danger-red);
    color: white;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.question-number-tag:hover {
    background: #C9302C;
    transform: scale(1.1);
}

.alert-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.alert-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.alert-btn-primary { background: var(--sky-blue); }
.alert-btn-primary:hover { background: #357ABD; transform: translateY(-2px); }

.alert-btn-secondary { background: var(--stone-gray); }
.alert-btn-secondary:hover { background: #8a8a8a; transform: translateY(-2px); }

.floating-progress {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-primary);
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 4px 20px var(--shadow-color-medium);
    z-index: 100;
    display: none;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    animation: slideInLeft 0.5s ease-out;
}

@keyframes slideInLeft {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.floating-progress.show {
    display: flex;
}

.floating-progress-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: conic-gradient(var(--leaf-green) 0deg, var(--border-color) 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--forest-green);
    font-weight: 700;
    animation: pulse 2s infinite;
    transition: all 0.3s ease;
}
[data-theme="dark"] .floating-progress-circle {
    background: conic-gradient(var(--firefly-yellow) 0deg, var(--border-color) 0deg);
    color: var(--firefly-yellow);
}


.auto-save-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--leaf-green);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 100;
    animation: slideInUp 0.5s ease-out;
}

.auto-save-indicator.show {
    opacity: 1;
}

.completion-celebration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.5s ease-out;
}

.celebration-content {
    background: var(--bg-primary);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    animation: celebrationPop 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

.celebration-content::before {
    content: ''; 
}

@keyframes celebrationPop {
    0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
    70% { transform: scale(1.1) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.celebration-emoji {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-7px); }
}

.celebration-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.celebration-message {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 25px;
    line-height: 1.5;
}

.celebration-foreground {
    position: relative;
    z-index: 2;
}

.keyboard-shortcuts {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(47, 79, 79, 0.9);
    color: white;
    padding: 15px;
    border-radius: 10px;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 100;
    animation: slideInRight 0.5s ease-out;
}
[data-theme="dark"] .keyboard-shortcuts {
    background: rgba(11, 25, 47, 0.9);
}


.keyboard-shortcuts.show {
    opacity: 1;
}

.shortcut-item {
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.shortcut-item:hover {
    transform: translateX(5px);
}

.shortcut-key {
    background: rgba(255,255,255,0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.site-footer {
    padding: 25px 20px;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    border-top: 2px solid var(--border-color);
    flex-shrink: 0;
}

.site-footer p {
    margin: 0;
}

/* --- 動畫效果 --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- 焦點狀態優化 --- */
button:focus, input:focus {
    outline: 3px solid var(--sky-blue);
    outline-offset: 2px;
}
[data-theme="dark"] button:focus, [data-theme="dark"] input:focus {
    outline: 3px solid var(--firefly-yellow);
}

/* --- 響應式設計 --- */
@media (max-width: 768px) {
    body { padding: 10px; }
    .container { margin: 0; border-radius: 15px; }
    .header { padding: 30px 20px; }
    .header h1 { font-size: 1.8rem; }
    .content { padding: 30px 20px; }
    .progress-container, .question-navigation { padding: 15px 20px; }
    .question-nav-grid { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: 5px; }

    .radio-group { gap: 5px; flex-wrap: wrap; }
    .radio-option input[type="radio"] { width: 24px; height: 24px; }
    .radio-option label { font-size: 1rem; padding: 8px; }

    .action-buttons { flex-direction: column; align-items: center; }
    .action-btn { width: 80%; max-width: 250px; padding: 14px 20px; font-size: 1rem; }

    .question-item { flex-direction: column; text-align: center; }
    .question-number { margin-right: 0; margin-bottom: 10px; }

    .theme-switcher { top: 10px; left: 10px; padding: 6px 12px; }
    .theme-text { display: none; }

    .result-item { flex-direction: column; text-align: center; padding: 15px; }
    .result-hat { flex-direction: column; margin-bottom: 10px; width: 100%; }
    .result-rank { margin-right: 0; margin-bottom: 8px; }
    .hat-icon { margin-right: 0; margin-bottom: 8px; }
    .hat-name { margin-bottom: 10px; }
    .result-score { margin-top: 10px; }
    .hat-description { padding: 20px; }
    .hat-description h4 { font-size: 1.1rem; }
}

/* --- 美化：結果分析中的卡片樣式 --- */
.hat-characteristics, .hat-suggestions {
    transition: all 0.3s ease; /* 為所有效果增加平滑過渡動畫 */
    box-shadow: 0 2px 8px var(--shadow-color-soft); /* 增加一個柔和的基礎陰影 */
}

.hat-characteristics:hover, .hat-suggestions:hover {
    transform: translateY(-4px) scale(1.01); /* 滑鼠懸停時輕微上移放大 */
    box-shadow: 0 6px 15px var(--shadow-color-medium); /* 懸停時陰影加深，更有立體感 */
    border-left-width: 5px; /* 左側邊框加粗，突出顯示 */
}

/* --- 美化：代表動物說明的文字樣式 --- */
.hat-characteristics p b {
    color: var(--forest-green); /* 動物名稱使用森林綠，呼應主題 */
    font-size: 1.1rem; /* 讓動物名稱字體稍大一些 */
    margin-right: 5px; /* 在圖示和名稱之間增加一點間距 */
}

/* 深色模式下的動物名稱顏色 */
[data-theme="dark"] .hat-characteristics p b {
    color: var(--firefly-yellow); /* 深色模式下使用螢火蟲黃，更醒目 */
    text-shadow: 0 0 5px var(--firefly-yellow); /* 增加微光效果 */
}

/* --- 美化：區塊標題中的圖示(SVG)樣式 --- */
.hat-suggestions strong svg, 
.hat-characteristics strong svg {
    transition: transform 0.3s ease; /* 為圖示增加旋轉動畫 */
}

.hat-characteristics:hover strong svg, 
.hat-suggestions:hover strong svg {
    transform: rotate(-10deg) scale(1.1); /* 懸停在區塊上時，圖示會旋轉和放大 */
}


[data-theme="dark"] .hat-description h4 {
    color: var(--text-primary) !important; 
}

/* 問題：h4 內的 Emoji 圖示顏色也需要被修正，特別是黑帽 ⚫ 和白帽 ⚪。
  解決：同樣強制設定為淺色。
*/
[data-theme="dark"] .hat-description h4 span {
    color: var(--text-primary) !important;
}

/* 問題：「主要特徵」和「發展建議」的標題文字顏色不夠亮。
  解決：設定為主題淺色文字。
*/
[data-theme="dark"] .hat-suggestions strong,
[data-theme="dark"] .hat-characteristics strong {
    color: var(--text-primary);
}

/* 問題：「主要特徵」和「發展建議」的段落(p)文字顏色對比度不足。
  解決：將顏色從較暗的 --text-secondary 改為更亮的 --text-primary。
*/
[data-theme="dark"] .hat-description p {
    color: var(--text-primary);
}



/* --- 列印友善樣式 --- */
@media print {
    body {
        padding: 0;
        background: none;
        color: #000;
    }
    .container {
        box-shadow: none;
        border: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }
    .theme-switcher, .question-navigation, .progress-container,
    .instructions, #quizForm, .calculate-btn, .save-share-section,
    .reset-btn, .site-footer, .keyboard-shortcuts, .floating-progress {
        display: none;
    }
    .results-section {
        display: block !important;
        margin-top: 0;
    }
    .result-item, .hat-description, .chart-bar, .stat-item {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid; /* 避免結果區塊被截斷 */
    }
    .header h1, .header p { color: #000; }
    .header { background: #eee; }
    .result-score { color: #000 !important; border: 1px solid #ccc; }
    .hat-name, .text-primary, .text-secondary { color: #000 !important; }

}

/* --- 【新增】慶祝畫面的背景照片樣式 --- */
.completion-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    opacity: 0.3;
}

.background-photo-container {
    width: 20vh;
    height: 10vh;
    max-width: 500px;
    max-height: 500px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    background-color: var(--border-color);
    position: absolute;
    will-change: transform;
}

[data-theme="dark"] .background-photo-container {
    background-color: var(--card-bg);
}

#backgroundPhoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}