/* style.css */
body {
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* PC双栏布局 */
@media (min-width: 768px) { /* md breakpoint from Tailwind */
    #app-container {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* 左侧内容区占2份，右侧图片区占1份, minmax for responsiveness */
        gap: 2rem; /* 列之间的间隙 */
        align-items: flex-start; /* 顶部对齐 */
    }

    .quiz-main-area {
        max-width: none; /* 在双栏布局中，内容区不需要最大宽度限制 */
    }

    #pc-image-column {
        position: sticky;
        top: 2rem; /* 图片区域距离顶部的距离 */
        height: calc(100vh - 4rem); /* 图片区域高度，减去上下padding */
        /* overflow-y: auto; If image caption makes it too tall */
    }
}

/* 选项按钮的最小点击区域和激活效果 */
.option-button {
    min-height: 48px; /* As per requirement */
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease;
}

.option-button:active {
    transform: translateY(1px);
    filter: brightness(95%);
}

/* 选中状态的选项 - JS会添加此类 */
/* Base selected style, specific colors added by JS based on dimension */
.option-button.selected {
    /* Example: ring-2, specific ring color set by JS */
}

/* 进度条颜色 - JS会根据季节更新 */
/* Base class for progress bar fill, specific color class added by JS */
#progress-bar-fill {
    /* Default color can be set here if needed, e.g. bg-blue-500 */
}


/* 结果解读区域边框和背景 - JS会根据季节更新 */
/* Base class for interpretation, specific color classes added by JS */
#interpretation-container {
    /* Default border/bg if needed */
}

#detailed-interpretation {
    /* Base style for detailed interpretation if needed */
}

/* Ensure buttons have a clear visual hierarchy */
button {
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* For D3 chart text to inherit body font */
#radarChartContainer text {
    font-family: inherit;
}

/* Hide elements meant to be shown by JS initially */
.hidden {
    display: none !important; /* Tailwind's hidden class might be overridden by specificity */
}

/* Active section (quiz or results) */
.active-section {
    display: block;
}
.inactive-section {
    display: none;
}

/* Styling for the dynamic image caption if needed */
#dynamic-image-caption {
    /* e.g., font-style: italic; */
}

/* Mixed type alert animation */
.mixed-type-alert {
    animation: pulse-bg-gentle 2.5s infinite ease-in-out;
}

@keyframes pulse-bg-gentle {
    0% { background-color: #fef9c3; } /* Tailwind yellow-100 */
    50% { background-color: #fef08a; } /* Tailwind yellow-200 */
    100% { background-color: #fef9c3; } /* Tailwind yellow-100 */
}

/* Custom seasonal classes that JS will toggle for various elements */
/* These are more specific and will be applied by JS */

/* Example for a spring themed element (applied by JS) */
.theme-spring #progress-bar-fill { background-color: #34d399; } /* Tailwind color: spring */
.theme-spring #toggle-details-button { background-color: #34d399; }
.theme-spring #interpretation-container { border-color: #34d399; background-color: #ecfdf5; } /* bg-emerald-50 */
.theme-spring #result-title { color: #059669; } /* spring-dark */
.theme-spring .option-button.selected { background-color: #a7f3d0; border-color: #34d399; color: #065f46; ring: 2px #34d399; } /* spring-light, spring, spring-dark */

/* Example for a summer themed element */
.theme-summer #progress-bar-fill { background-color: #fb923c; }
.theme-summer #toggle-details-button { background-color: #fb923c; }
.theme-summer #interpretation-container { border-color: #fb923c; background-color: #fff7ed; }
.theme-summer #result-title { color: #f97316; } /* summer-dark */
.theme-summer .option-button.selected { background-color: #fed7aa; border-color: #fb923c; color: #c2410c; ring: 2px #fb923c; }

/* Example for an autumn themed element */
.theme-autumn #progress-bar-fill { background-color: #facc15; }
.theme-autumn #toggle-details-button { background-color: #facc15; }
.theme-autumn #interpretation-container { border-color: #facc15; background-color: #fefce8; }
.theme-autumn #result-title { color: #f59e0b; } /* autumn-dark */
.theme-autumn .option-button.selected { background-color: #fde68a; border-color: #facc15; color: #b45309; ring: 2px #facc15; }

/* Example for a winter themed element */
.theme-winter #progress-bar-fill { background-color: #60a5fa; }
.theme-winter #toggle-details-button { background-color: #60a5fa; }
.theme-winter #interpretation-container { border-color: #60a5fa; background-color: #eff6ff; }
.theme-winter #result-title { color: #2563eb; } /* winter-dark */
.theme-winter .option-button.selected { background-color: #bfdbfe; border-color: #60a5fa; color: #1e40af; ring: 2px #60a5fa; }

/* For mixed type, we might use a neutral theme or the theme of the first dominant season */
.theme-mixed #progress-bar-fill { background-color: #9ca3af; } /* gray-400 */
.theme-mixed #toggle-details-button { background-color: #6b7280; } /* gray-500 */
.theme-mixed #interpretation-container { border-color: #9ca3af; background-color: #f3f4f6; } /* gray-100 */
.theme-mixed #result-title { color: #374151; } /* gray-700 */
/* Selected option for mixed can default to a neutral or be handled by JS to pick one of the dominant season's styles */
.theme-mixed .option-button.selected { background-color: #e5e7eb; border-color: #9ca3af; color: #374151; ring: 2px #9ca3af; }