/* ============================================================
   MBTI 测试平台 — 全局样式 (16Personalities 风格)
   ============================================================ */

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---- 动画 ---- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.3s ease-out; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}
.animate-shake { animation: shake 0.35s ease-in-out; }

/* ---- 选项选中态 ---- */
.option-label:has(.option-radio:checked) {
    border-color: #26A69A;
    background-color: rgba(38, 166, 154, 0.06);
}
.option-label:has(.option-radio:checked) .w-2\\.5 {
    opacity: 1;
}

/* ---- 提交按钮脉冲 ---- */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(38, 166, 154, 0.4); }
    50%      { box-shadow: 0 0 0 10px rgba(38, 166, 154, 0); }
}
#submitBtn:not(.hidden) { animation: pulse 2s infinite; }

/* ---- 移动端调整 ---- */
@media (max-width: 640px) {
    .question-card { border-radius: 1rem; }
    .option-label { padding: 0.75rem 1rem; }
}

/* ---- 选中文字 ---- */
::selection { background: rgba(38, 166, 154, 0.2); color: #2D3436; }

/* ---- 图表 ---- */
canvas { max-width: 100%; }