:root {
    --quiz-ink: #302821;
    --quiz-muted: #827266;
    --quiz-paper: #fffdf8;
    --quiz-pink: #ef789d;
    --quiz-pink-dark: #d95f87;
    --quiz-green: #b9df8d;
    --quiz-shadow: rgba(70, 50, 40, .13);
    --quiz-hand: "Huninn", "Yomogi", cursive;
}

html[lang="zh-Hans"] .personality-page,
html[lang="zh-Hans"] .personality-hero,
html[lang="zh-Hans"] .personality-stage,
html[lang="zh-Hans"] .personality-toast {
    --quiz-hand: "ZCOOL KuaiLe", "Huninn", cursive;
}

html[lang="zh-Hant"] .personality-page,
html[lang="zh-Hant"] .personality-hero,
html[lang="zh-Hant"] .personality-stage,
html[lang="zh-Hant"] .personality-toast,
html[lang="ja"] .personality-page,
html[lang="ja"] .personality-hero,
html[lang="ja"] .personality-stage,
html[lang="ja"] .personality-toast {
    --quiz-hand: "Huninn", "Yomogi", cursive;
}

html[lang="ko"] .personality-page,
html[lang="ko"] .personality-hero,
html[lang="ko"] .personality-stage,
html[lang="ko"] .personality-toast {
    --quiz-hand: "Gaegu", cursive;
}

.personality-hero {
    position: relative;
    overflow: hidden;
    color: var(--quiz-ink);
    background:
        radial-gradient(circle at 14% 24%, rgba(183, 224, 139, .34), transparent 25%),
        radial-gradient(circle at 88% 28%, rgba(255, 196, 211, .34), transparent 26%),
        #fffcf5;
}

.personality-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 6px;
    content: "";
    opacity: .35;
    background: radial-gradient(circle at 6px -1px, transparent 7px, var(--quiz-ink) 7.5px, transparent 8px) 0 0 / 14px 8px repeat-x;
}

.personality-hero-inner {
    position: relative;
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
    padding: 44px 0 38px;
    text-align: center;
}

.personality-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 7px 16px;
    border: 2px solid var(--quiz-ink);
    border-radius: 999px 920px 999px 860px;
    background: #fff;
    box-shadow: 3px 4px 0 rgba(48, 40, 33, .12);
    color: #8a5c69;
    font-family: var(--quiz-hand);
    font-size: 16px;
    font-weight: 700;
}

.personality-hero h1 {
    max-width: 850px;
    margin: 6px auto 8px;
    font-family: var(--quiz-hand);
    font-size: clamp(30px, 4.4vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.personality-hero-inner > p:last-child {
    max-width: 700px;
    margin: 0 auto;
    color: var(--quiz-muted);
    font-family: var(--quiz-hand);
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.55;
}

.personality-hero-doodle {
    position: absolute;
    color: rgba(239, 120, 157, .45);
    font-family: var(--quiz-hand);
    font-size: 46px;
    transform: rotate(-12deg);
}

.personality-hero-doodle-left { left: 4%; top: 34%; }
.personality-hero-doodle-right { right: 5%; top: 24%; color: rgba(132, 181, 79, .5); transform: rotate(11deg); }

.personality-stage {
    min-height: 720px;
    padding: 54px 16px 72px;
    color: var(--quiz-ink);
    background-color: #f9f5ec;
    background-image: radial-gradient(rgba(88, 69, 54, .09) .8px, transparent .8px);
    background-size: 15px 15px;
}

.personality-wrap {
    width: min(780px, 100%);
    margin: 0 auto;
}

.personality-app,
.personality-noscript {
    position: relative;
    border: 4px solid var(--quiz-ink);
    border-radius: 38px 31px 41px 34px / 34px 42px 32px 39px;
    background: rgba(255, 253, 248, .98);
    box-shadow: 10px 12px 0 var(--quiz-shadow);
}

.personality-app::before {
    position: absolute;
    z-index: 1;
    top: -17px;
    left: 50%;
    width: 78px;
    height: 31px;
    content: "";
    transform: translateX(-50%) rotate(-2deg);
    opacity: .82;
    background: #d6efae;
    clip-path: polygon(0 20%, 13% 26%, 20% 8%, 33% 25%, 47% 0, 58% 26%, 72% 9%, 78% 28%, 100% 19%, 97% 100%, 5% 91%);
}

.personality-loading {
    display: flex;
    min-height: 440px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: var(--quiz-muted);
    font-family: var(--quiz-hand);
    font-size: 20px;
}

.personality-loading-face {
    color: var(--quiz-pink-dark);
    font-size: 48px;
    animation: personality-bob 1.1s ease-in-out infinite alternate;
}

@keyframes personality-bob { to { transform: translateY(-8px) rotate(2deg); } }

.quiz-panel {
    padding: clamp(24px, 5vw, 44px);
}

.quiz-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 28px;
}

.quiz-progress-track {
    flex: 1;
    height: 14px;
    overflow: hidden;
    border: 2px solid var(--quiz-ink);
    border-radius: 999px;
    background: #fff;
}

.quiz-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: repeating-linear-gradient(-45deg, var(--quiz-pink) 0 8px, #f69ab5 8px 16px);
    transition: width .28s ease;
}

.quiz-count {
    min-width: 72px;
    color: var(--quiz-ink);
    font-family: var(--quiz-hand);
    font-size: 19px;
    font-weight: 700;
    text-align: right;
}

.quiz-question-number {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border: 3px solid var(--quiz-ink);
    border-radius: 51% 49% 45% 55%;
    background: var(--quiz-green);
    font-family: var(--quiz-hand);
    font-size: 22px;
    font-weight: 700;
    transform: rotate(-3deg);
}

.quiz-question {
    min-height: 2.7em;
    margin: 0 0 26px;
    font-family: var(--quiz-hand);
    font-size: clamp(25px, 4vw, 34px);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.quiz-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.quiz-answer {
    position: relative;
    display: grid;
    min-height: 132px;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    border: 3px solid rgba(48, 40, 33, .62);
    border-radius: 23px 19px 25px 18px / 18px 24px 20px 25px;
    background: var(--answer-color, #fff7f5);
    color: var(--quiz-ink);
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.quiz-answer:nth-child(2n) { border-radius: 19px 25px 18px 23px / 24px 19px 25px 18px; }
.quiz-answer:hover { transform: translateY(-3px) rotate(-.3deg); border-color: var(--quiz-ink); box-shadow: 5px 6px 0 rgba(48, 40, 33, .12); }
.quiz-answer:focus-visible { outline: 4px solid rgba(239, 120, 157, .35); outline-offset: 3px; }
.quiz-answer.is-selected { border-color: var(--quiz-ink); box-shadow: 5px 6px 0 var(--quiz-pink); transform: translateY(-2px); }

.quiz-answer-image {
    display: flex;
    width: 82px;
    height: 82px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(48, 40, 33, .18);
    border-radius: 50% 46% 52% 48%;
    background: rgba(255,255,255,.78);
}

.quiz-answer-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.quiz-answer-text { font-family: var(--quiz-hand); font-size: 18px; font-weight: 700; line-height: 1.35; }

.quiz-answer-check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--quiz-ink);
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transform: scale(.7) rotate(-8deg);
    transition: opacity .16s ease, transform .16s ease;
}

.quiz-answer.is-selected .quiz-answer-check { opacity: 1; transform: scale(1) rotate(-4deg); }
.quiz-answer-check i { color: var(--quiz-pink-dark); font-size: 15px; }

.quiz-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 30px;
}

.quiz-button,
.result-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 24px;
    border: 3px solid var(--quiz-ink);
    border-radius: 999px 920px 999px 870px;
    font-family: var(--quiz-hand);
    font-size: 18px;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.quiz-button:not(:disabled):hover,
.result-button:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 rgba(48, 40, 33, .14); }
.quiz-button-primary { min-width: 132px; background: var(--quiz-pink); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.08); }
.quiz-button-secondary { background: #fff; color: var(--quiz-ink); }
.quiz-button:disabled { cursor: not-allowed; opacity: .35; }

.quiz-helper {
    margin: 20px 0 0;
    color: var(--quiz-muted);
    font-family: var(--quiz-hand);
    font-size: 15px;
    text-align: center;
}

.analysis-panel {
    display: flex;
    min-height: 470px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px;
    text-align: center;
}

.analysis-orbit {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 22px;
}

.analysis-orbit img {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 50%;
    mix-blend-mode: multiply;
}

.analysis-orbit::before {
    position: absolute;
    inset: 0;
    content: "";
    border: 4px dashed var(--quiz-pink);
    border-radius: 50%;
    animation: personality-spin 5s linear infinite;
}

@keyframes personality-spin { to { transform: rotate(360deg); } }
.analysis-panel h2 { margin: 0; font-family: var(--quiz-hand); font-size: 34px; }
.analysis-panel p { margin: 8px 0 0; color: var(--quiz-muted); font-family: var(--quiz-hand); font-size: 19px; }

.result-panel { padding: clamp(22px, 5vw, 42px); }
.result-hero { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: center; padding: 20px; border: 3px solid var(--quiz-ink); border-radius: 30px 24px 34px 27px; background: var(--result-color); }
.result-portrait { position: relative; display: flex; width: 200px; height: 200px; align-items: center; justify-content: center; border: 3px solid var(--quiz-ink); border-radius: 48% 52% 46% 54% / 52% 45% 55% 48%; background: rgba(255,255,255,.82); transform: rotate(-1deg); }
.result-portrait::after { position: absolute; right: -9px; bottom: 2px; content: "♡"; color: var(--quiz-pink-dark); font: 700 38px/1 var(--quiz-hand); transform: rotate(9deg); }
.result-portrait img { width: 92%; height: 92%; object-fit: contain; border-radius: inherit; mix-blend-mode: multiply; }
.result-kicker { margin: 0 0 3px; color: #8d5f6c; font-family: var(--quiz-hand); font-size: 17px; font-weight: 700; }
.result-copy h2 { margin: 0; font-family: var(--quiz-hand); font-size: clamp(36px, 6vw, 52px); line-height: 1.05; }
.result-label { display: inline-block; margin-top: 7px; padding: 3px 10px; border: 2px solid var(--quiz-ink); border-radius: 999px; background: #fff; font-family: var(--quiz-hand); font-size: 15px; font-weight: 700; }
.result-copy h3 { margin: 14px 0 6px; font-family: var(--quiz-hand); font-size: 24px; line-height: 1.3; }
.result-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.result-tags li { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.72); font-family: var(--quiz-hand); font-size: 14px; }
.result-description { margin: 22px 4px 0; color: #5f5148; font-family: var(--quiz-hand); font-size: 18px; line-height: 1.7; text-align: center; }

.result-section { margin-top: 24px; padding: 22px; border: 3px solid var(--quiz-ink); border-radius: 25px 30px 23px 29px; background: #fff; }
.result-section-heading { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; font-family: var(--quiz-hand); font-size: 24px; font-weight: 700; }
.result-section-heading i { color: var(--quiz-pink-dark); }
.trait-list { display: grid; gap: 12px; }
.trait-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 42px; align-items: center; gap: 10px; font-family: var(--quiz-hand); }
.trait-name { font-weight: 700; }
.trait-hearts { display: flex; gap: 3px; color: #ded5cf; }
.trait-hearts .is-filled { color: var(--quiz-pink); }
.trait-value { color: var(--quiz-muted); font-size: 14px; text-align: right; }
.result-tip { background: #fff9df; }
.result-tip p { margin: 0; color: #665642; font-family: var(--quiz-hand); font-size: 17px; line-height: 1.65; }

.result-match-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 16px; }
.result-match-card img { width: 84px; height: 84px; object-fit: contain; border: 2px solid var(--quiz-ink); border-radius: 50%; background: var(--match-color); mix-blend-mode: multiply; }
.result-match-card strong { display: block; margin-bottom: 3px; font-family: var(--quiz-hand); font-size: 22px; }
.result-match-card p { margin: 0; color: var(--quiz-muted); font-family: var(--quiz-hand); font-size: 16px; line-height: 1.5; }

.distribution-list { display: grid; gap: 11px; }
.distribution-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-family: var(--quiz-hand); }
.distribution-track { height: 11px; overflow: hidden; border: 2px solid rgba(48,40,33,.45); border-radius: 999px; background: #f5f0e9; }
.distribution-bar { height: 100%; border-radius: inherit; background: var(--bar-color); }
.distribution-value { color: var(--quiz-muted); font-size: 14px; text-align: right; }
.distribution-note { margin: 13px 0 0; color: var(--quiz-muted); font-family: var(--quiz-hand); font-size: 13px; text-align: center; }

.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: 25px; }
.result-button-primary { background: var(--quiz-pink); color: #fff; }
.result-button-secondary { background: #fff; color: var(--quiz-ink); }
.result-button:disabled { opacity: .55; cursor: wait; }
.result-disclaimer { margin: 18px 0 0; color: #9a8d83; font-family: var(--quiz-hand); font-size: 13px; line-height: 1.5; text-align: center; }

.personality-toast {
    position: fixed;
    z-index: 80;
    right: 22px;
    bottom: 22px;
    max-width: min(380px, calc(100vw - 32px));
    padding: 12px 18px;
    border: 3px solid var(--quiz-ink);
    border-radius: 18px 14px 19px 16px;
    background: #fff;
    box-shadow: 6px 7px 0 rgba(48,40,33,.16);
    color: var(--quiz-ink);
    font-family: var(--quiz-hand);
    font-size: 16px;
}

.personality-noscript { margin-top: 15px; padding: 24px; font-family: var(--quiz-hand); text-align: center; }

@media (max-width: 640px) {
    .personality-hero-inner { padding: 32px 0 29px; }
    .personality-hero-doodle { display: none; }
    .personality-stage { min-height: 650px; padding: 38px 10px 52px; }
    .personality-app { border-width: 3px; border-radius: 26px 23px 29px 25px; box-shadow: 6px 8px 0 var(--quiz-shadow); }
    .quiz-panel { padding: 24px 14px 26px; }
    .quiz-progress-row { margin-bottom: 20px; }
    .quiz-question { min-height: 3.1em; margin-bottom: 20px; font-size: 25px; }
    .quiz-answers { gap: 9px; }
    .quiz-answer { min-height: 150px; grid-template-columns: 1fr; grid-template-rows: 72px auto; justify-items: center; gap: 6px; padding: 10px 8px 12px; text-align: center; }
    .quiz-answer-image { width: 72px; height: 72px; }
    .quiz-answer-text { font-size: 15px; line-height: 1.3; }
    .quiz-answer-check { top: 6px; right: 6px; width: 24px; height: 24px; }
    .quiz-controls { margin-top: 22px; }
    .quiz-button { min-height: 44px; padding: 8px 16px; font-size: 16px; }
    .quiz-button-primary { min-width: 114px; }
    .result-panel { padding: 20px 12px 25px; }
    .result-hero { grid-template-columns: 1fr; gap: 12px; padding: 16px; text-align: center; }
    .result-portrait { width: 155px; height: 155px; margin: 0 auto; }
    .result-tags { justify-content: center; }
    .result-description { font-size: 16px; }
    .result-section { padding: 17px 13px; }
    .trait-row { grid-template-columns: 68px minmax(0, 1fr) 33px; gap: 6px; font-size: 14px; }
    .trait-hearts { gap: 1px; font-size: 12px; }
    .distribution-row { grid-template-columns: 76px minmax(0, 1fr) 34px; gap: 7px; font-size: 14px; }
    .result-button { width: 100%; }
    .personality-toast { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .personality-loading-face,
    .analysis-orbit::before { animation: none; }
    .quiz-answer,
    .quiz-button,
    .result-button,
    .quiz-progress-bar { transition: none; }
}