:root{
  /* dreamy pink-white palette */
  --cream:#fff8fb;
  --pink-050:#fff2f7;
  --pink-100:#ffe6f1;
  --pink-200:#ffd6e8;
  --pink-300:#ffbcd9;
  --pink-400:#ff9ec7;
  --pink-500:#ff7fb6;
  --rose:#ff5fa2;
  --lilac:#e9d7ff;
  --lilac-2:#d9c2ff;
  --sky:#dff0ff;
  --gold:#ffe6a7;
  --ink:#6b4a5c;
  --ink-soft:#a2778b;
  --white:#ffffff;
  --glass:rgba(255,255,255,.55);
  --glass-brd:rgba(255,255,255,.75);
  --shadow-pink:rgba(255,120,180,.35);
  --font-cute:"Comic Sans MS","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:linear-gradient(160deg,var(--pink-050) 0%,var(--cream) 40%,#fdf4ff 75%,var(--pink-100) 100%);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  cursor:default;
}
@media (pointer:coarse){ body{cursor:auto} .cursor-dot,.cursor-ring{display:none!important} }

/* ============ BACKGROUND ============ */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;will-change:transform}
.aurora-1{width:60vw;height:60vw;left:-10vw;top:-15vw;background:radial-gradient(circle at 30% 30%,var(--pink-300),transparent 70%);animation:drift1 22s ease-in-out infinite}
.aurora-2{width:55vw;height:55vw;right:-12vw;top:10vh;background:radial-gradient(circle at 60% 40%,var(--lilac-2),transparent 70%);animation:drift2 26s ease-in-out infinite}
.aurora-3{width:50vw;height:50vw;left:20vw;bottom:-18vw;background:radial-gradient(circle at 50% 50%,var(--sky),transparent 70%);animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-5vw,6vh) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-5vh) scale(1.15)}}
.grain{position:absolute;inset:0;opacity:.05;background-image:radial-gradient(var(--ink) .5px,transparent .5px);background-size:4px 4px}

#fx{position:fixed;inset:0;z-index:1;pointer-events:none;contain:strict}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--rose);box-shadow:0 0 10px var(--pink-400);z-index:9999;pointer-events:none;transform:translate(-50%,-50%);transition:transform .12s ease}
.cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;border:2px solid var(--pink-400);z-index:9998;pointer-events:none;transform:translate(-50%,-50%);transition:width .18s ease,height .18s ease,border-color .18s ease,background .18s ease}
.cursor-ring.is-hot{width:52px;height:52px;border-color:var(--rose);background:rgba(255,159,199,.14)}

/* ============ SOUND TOGGLE ============ */
.sound-toggle{position:fixed;top:18px;right:18px;z-index:50;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--rose);font-size:18px;cursor:pointer;box-shadow:0 6px 18px var(--shadow-pink);transition:transform .2s ease,opacity .2s ease}
.sound-toggle:hover{transform:scale(1.1) rotate(-8deg)}
.sound-toggle.is-muted{opacity:.45}
.sound-toggle.is-muted .si::after{content:"\00d7";margin-left:2px}

/* ============ STAGE / SCREENS ============ */
.stage{position:relative;z-index:5;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:32px 20px;opacity:0;visibility:hidden;transform:translateY(24px) scale(.98);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1.2),visibility .5s}
.screen.is-active{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.screen.is-leaving{opacity:0;visibility:hidden;transform:translateY(-24px) scale(.98)}

/* ============ GLASS CARD ============ */
.glass{position:relative;background:var(--glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1.5px solid var(--glass-brd);border-radius:34px;box-shadow:0 24px 60px rgba(255,120,180,.28),0 4px 18px rgba(180,140,255,.18),inset 0 1px 0 rgba(255,255,255,.8);overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,190,225,.5),rgba(220,200,255,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.8}

/* ============ WELCOME + RESULT ============ */
.welcome-card,.result-card{width:min(560px,94vw);padding:44px 40px 38px;text-align:center}
.welcome-glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:120%;height:120%;background:radial-gradient(circle,rgba(255,180,220,.35),transparent 60%);pointer-events:none}
.mascot-halo{position:relative;width:200px;height:200px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center}
.mascot-halo picture{display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.mascot{width:200px;height:auto;filter:drop-shadow(0 12px 22px rgba(255,120,180,.4));position:relative;z-index:2}
.mascot--float{animation:floaty 4.5s ease-in-out infinite}
.mascot--pop{animation:popIn .9s cubic-bezier(.2,1.4,.4,1) both,floaty 4.5s ease-in-out 1s infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
@keyframes popIn{0%{transform:scale(.3) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.halo-ring{position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,240,.9),rgba(255,220,240,0) 68%);z-index:1;animation:halo 4s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}

.eyebrow{font-family:var(--font-cute);letter-spacing:2px;color:var(--pink-500);font-size:14px;font-weight:700;margin-bottom:6px}
.title{font-family:var(--font-cute);font-size:clamp(34px,7vw,52px);line-height:1.05;font-weight:800;background:linear-gradient(120deg,var(--rose),var(--pink-400) 40%,var(--lilac-2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 0 rgba(255,255,255,.5);margin-bottom:14px}
.title--result{animation:wobble 3s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.subtitle{color:var(--ink-soft);font-size:16px;line-height:1.7;margin-bottom:26px}
.subtitle b{color:var(--rose)}

/* ============ PRIMARY BUTTON ============ */
.btn-primary{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-cute);font-size:19px;font-weight:800;color:#fff;padding:16px 40px;border:none;border-radius:999px;cursor:pointer;background:linear-gradient(120deg,var(--pink-400),var(--rose));box-shadow:0 12px 26px var(--shadow-pink),inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(220,60,130,.3);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;animation:beat 2.6s ease-in-out infinite}
.btn-primary:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 36px var(--shadow-pink),inset 0 2px 0 rgba(255,255,255,.6)}
.btn-primary:active{transform:translateY(0) scale(.98)}
@keyframes beat{0%,100%{box-shadow:0 12px 26px var(--shadow-pink)}50%{box-shadow:0 12px 40px rgba(255,95,162,.55)}}
.btn-heart{font-size:20px;animation:heartbob 1.4s ease-in-out infinite}
@keyframes heartbob{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.btn-shine{position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}
.hint{margin-top:18px;font-size:12.5px;color:var(--ink-soft);opacity:.85}
kbd{font-family:var(--font-cute);background:var(--white);border:1px solid var(--pink-200);border-bottom-width:2px;border-radius:6px;padding:1px 7px;margin:0 1px;font-size:12px;color:var(--rose)}

/* ============ PROGRESS ============ */
.screen--quiz{flex-direction:column;gap:22px}
.progress-wrap{width:min(680px,94vw)}
.progress-meta{display:flex;justify-content:flex-start;align-items:center;margin-bottom:10px;gap:12px}
.pill{font-family:var(--font-cute);font-size:13.5px;font-weight:700;padding:7px 16px;border-radius:999px;background:var(--glass);border:1.5px solid var(--glass-brd);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 12px rgba(255,150,200,.2);white-space:nowrap}
.pill--index{color:var(--rose)}
.pill--index b{font-size:16px}
.pill--label{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
.progress-track{position:relative;height:16px;border-radius:999px;background:rgba(255,255,255,.55);border:1.5px solid var(--glass-brd);box-shadow:inset 0 2px 5px rgba(255,150,200,.25);overflow:visible}
.progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--lilac-2),var(--pink-300),var(--rose));box-shadow:0 0 14px rgba(255,120,180,.6);transition:width .6s cubic-bezier(.2,.9,.3,1.1);position:relative;overflow:hidden}
.progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);background-size:40% 100%;animation:flow 1.8s linear infinite}
@keyframes flow{0%{background-position:-40% 0}100%{background-position:140% 0}}
.progress-paw{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-size:20px;filter:drop-shadow(0 2px 4px rgba(255,120,180,.5));transition:left .6s cubic-bezier(.2,.9,.3,1.1);z-index:2}

/* ============ QUIZ CARD ============ */
.quiz-card{width:min(680px,94vw);padding:40px 38px 36px;text-align:left}
.card-sheen{position:absolute;top:-50%;right:-30%;width:80%;height:120%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 60%);pointer-events:none}
.q-badge{width:56px;height:56px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-family:var(--font-cute);font-weight:800;font-size:26px;color:#fff;background:linear-gradient(135deg,var(--pink-400),var(--rose));box-shadow:0 8px 18px var(--shadow-pink),inset 0 2px 0 rgba(255,255,255,.5);margin-bottom:18px;transform:rotate(-6deg)}
.q-text{font-family:var(--font-cute);font-size:clamp(20px,3.4vw,26px);line-height:1.5;color:var(--ink);margin-bottom:26px;font-weight:800}

/* ============ OPTIONS ============ */
.options{display:flex;flex-direction:column;gap:14px}
.option{position:relative;display:flex;align-items:center;gap:16px;width:100%;text-align:left;font-family:var(--font-body);font-size:16.5px;font-weight:600;color:var(--ink);padding:18px 20px;border-radius:20px;border:1.5px solid rgba(255,190,225,.7);background:rgba(255,255,255,.62);cursor:pointer;overflow:hidden;box-shadow:0 6px 16px rgba(255,150,200,.14),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s ease,border-color .18s ease,background .18s ease;opacity:0;transform:translateY(18px)}
.option .opt-key{flex:none;width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-cute);font-weight:800;font-size:16px;color:var(--rose);background:var(--pink-100);border:1.5px solid var(--pink-200);transition:all .2s ease}
.option .opt-text{flex:1}
.option .opt-heart{flex:none;font-size:18px;color:var(--pink-300);opacity:0;transform:scale(.4) rotate(-30deg);transition:all .25s cubic-bezier(.2,1.5,.4,1)}
.option:hover{transform:translateY(-3px) scale(1.015);border-color:var(--pink-400);background:rgba(255,255,255,.85);box-shadow:0 14px 28px rgba(255,130,190,.28)}
.option:hover .opt-key{background:linear-gradient(135deg,var(--pink-400),var(--rose));color:#fff;transform:rotate(-6deg) scale(1.08)}
.option:hover .opt-heart{opacity:1;transform:scale(1) rotate(0)}
.option:focus-visible{outline:3px solid var(--pink-400);outline-offset:2px}
.option .opt-sweep{position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);opacity:0}
.option:hover .opt-sweep{opacity:1;animation:optsweep .8s ease}
@keyframes optsweep{0%{left:-70%}100%{left:130%}}
.option.is-picked{border-color:var(--rose);background:linear-gradient(120deg,var(--pink-100),#fff);box-shadow:0 14px 30px rgba(255,95,162,.35);transform:scale(1.02)}
.option.is-picked .opt-key{background:linear-gradient(135deg,var(--rose),var(--pink-500));color:#fff}
.option.is-picked .opt-heart{opacity:1;transform:scale(1.15)}
/* staggered entrance */
.options .option.reveal{animation:optIn .5s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes optIn{to{opacity:1;transform:translateY(0)}}

/* ripple */
.ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,120,180,.5),transparent 70%);transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:ripple .7s ease-out forwards}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* card swap animations */
.quiz-card.swap-out{animation:swapOut .38s ease forwards}
.quiz-card.swap-in{animation:swapIn .5s cubic-bezier(.2,.9,.3,1.15)}
@keyframes swapOut{to{opacity:0;transform:translateX(-40px) scale(.96) rotate(-1deg)}}
@keyframes swapIn{from{opacity:0;transform:translateX(46px) scale(.96) rotate(1deg)}to{opacity:1;transform:none}}

.back-link{font-family:var(--font-cute);font-size:14px;font-weight:700;color:var(--ink-soft);background:transparent;border:none;cursor:pointer;padding:6px 14px;border-radius:999px;transition:all .18s ease;opacity:0;pointer-events:none}
.back-link.is-shown{opacity:1;pointer-events:auto}
.back-link:hover{color:var(--rose);background:rgba(255,255,255,.5)}

/* ============ RESULT SUMMARY ============ */
.answer-summary{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 26px;max-height:160px;overflow:auto;padding:4px}
.ans-chip{font-family:var(--font-cute);font-size:12.5px;font-weight:700;color:var(--rose);background:var(--pink-050);border:1.5px solid var(--pink-200);border-radius:12px;padding:6px 11px;display:flex;align-items:center;gap:6px}
.ans-chip b{background:var(--pink-200);color:var(--ink);width:20px;height:20px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}

/* ============ RESPONSIVE ============ */
@media (max-width:520px){
  .welcome-card,.result-card{padding:34px 24px 30px}
  .quiz-card{padding:30px 22px 26px}
  .mascot,.mascot-halo{width:150px}
  .halo-ring{width:130px;height:130px}
  .pill--label{max-width:44vw}
  .option{font-size:15px;padding:15px 16px;gap:12px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.12s!important}
  .aurora,.btn-shine,.progress-fill::after{animation:none!important}
}

/* ===== 结果情绪主题 & 特效 ===== */
.result-card.rt-sad{--accentA:#8fb8ff;--accentB:#c9b6ff}
.result-card.rt-ok{--accentA:#ffb36b;--accentB:#ff8fce}
.result-card.rt-great{--accentA:#ff7fb6;--accentB:#ffd36b}
.result-card.rt-perfect{--accentA:#ff5fa2;--accentB:#8be0ff}
.result-card[class*="rt-"] .title--result{background:linear-gradient(120deg,var(--accentA),var(--accentB));-webkit-background-clip:text;background-clip:text;color:transparent}
.result-card[class*="rt-"] .eyebrow{color:var(--accentA)}
.result-card.rt-sad .welcome-glow{background:radial-gradient(circle,rgba(150,180,255,.4),transparent 60%)}
.result-card.rt-sad .halo-ring{background:radial-gradient(circle,rgba(200,215,255,.9),rgba(200,215,255,0) 68%)}
.result-card.rt-perfect .welcome-glow{background:radial-gradient(circle,rgba(255,180,220,.5),transparent 60%)}
.result-card.rt-ok .title--result{animation:wobble 1.6s ease-in-out infinite}
.stage.shake{animation:shakefx .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shakefx{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-9px)}40%,60%{transform:translateX(9px)}}
.ans-chip.ans-ok{color:#2fa36b;background:#eafff4;border-color:#b6f0d2}
.ans-chip.ans-ok b{background:#b6f0d2;color:#1c7a4d}
.ans-chip.ans-no{color:#e2648b;background:#fff0f4;border-color:#ffc9d8}
.ans-chip.ans-no b{background:#ffc9d8;color:#b23a63}

.no-peek{display:inline-block;margin-top:.5em;font-weight:800;color:#e2648b;letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,255,255,.6)}