@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap";:root{--bg-deep: #0b1026;--bg-panel: #141b33;--bg-card: #1a2340;--text-primary: #e8dcc8;--text-secondary: #8b7e6a;--text-dim: #4a5568;--gold: #d4a850;--gold-bright: #ffd666;--gold-dim: rgba(212, 168, 80, .2);--border: #2a3555;--pyro: #ef7a56;--hydro: #4fc1e8;--electro: #9b7fd4;--anemo: #74c2a8;--cryo: #a0d2e7;--dendro: #7bb662;--geo: #f0c75e;--radius-card: 16px;--radius-btn: 10px;--shadow-card: 0 4px 24px rgba(0, 0, 0, .4);--transition: .3s cubic-bezier(.4, 0, .2, 1);--font-heading: "Noto Serif SC", "Georgia", serif;--font-body: "Noto Sans SC", "Helvetica Neue", sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);color:var(--text-primary);background:var(--bg-deep);min-height:100vh;overflow-x:hidden;line-height:1.6}#root{min-height:100vh}.app-shell{position:relative;min-height:100vh;background:radial-gradient(ellipse at 20% 50%,rgba(26,35,64,.6) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(20,27,51,.8) 0%,transparent 50%),radial-gradient(ellipse at 50% 100%,rgba(30,20,50,.4) 0%,transparent 40%),var(--bg-deep);display:flex;flex-direction:column;align-items:center;justify-content:center}.starfield{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.star{position:absolute;border-radius:50%;background:radial-gradient(circle,#fffff0e6,#fffff000 70%);animation:twinkle var(--duration) ease-in-out infinite;animation-delay:var(--delay)}@keyframes twinkle{0%,to{opacity:.15;transform:scale(.8)}50%{opacity:.8;transform:scale(1.2)}}.starfield:after{content:"";position:absolute;top:15%;left:-10%;width:80px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,214,102,.6),transparent);animation:shootingStar 8s ease-in-out infinite;animation-delay:3s}@keyframes shootingStar{0%{transform:translate(-100px) translateY(0) rotate(35deg);opacity:0}2%{opacity:1}5%{transform:translate(calc(100vw + 200px)) translateY(200px) rotate(35deg);opacity:0}to{opacity:0}}.screen{position:relative;z-index:1;width:100%;max-width:640px;padding:24px 20px;animation:fadeSlideIn .5s ease-out both}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.gold-text{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-bright) 50%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;line-height:1.3}.intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-top:10vh;padding-bottom:10vh}.intro__star-icon{width:48px;height:48px;opacity:.7;animation:floatStar 4s ease-in-out infinite}@keyframes floatStar{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(10deg)}}.intro__star-icon svg{width:100%;height:100%}.intro__title{font-family:var(--font-heading);font-size:clamp(3rem,10vw,5rem);font-weight:700;letter-spacing:.15em;text-shadow:0 0 40px rgba(212,168,80,.3)}.intro__subtitle{font-family:var(--font-heading);font-size:clamp(1rem,3vw,1.35rem);color:var(--text-secondary);letter-spacing:.3em}.intro__desc{font-size:.95rem;color:var(--text-secondary);max-width:360px;line-height:1.7}.intro__version{font-size:.75rem;color:var(--text-dim);letter-spacing:.1em}.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 48px;border:none;border-radius:var(--radius-btn);background:linear-gradient(135deg,var(--gold) 0%,#c49a3c 50%,var(--gold-bright) 100%);color:#1a1207;font-family:var(--font-heading);font-size:1.1rem;font-weight:600;letter-spacing:.1em;cursor:pointer;transition:var(--transition);box-shadow:0 0 20px #d4a85040,0 4px 12px #0000004d;position:relative;overflow:hidden}.btn-gold:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);transform:translate(-100%);transition:transform .6s ease}.btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 32px #d4a85066,0 6px 20px #0006}.btn-gold:hover:before{transform:translate(100%)}.btn-gold:active{transform:translateY(0)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 32px;border:1px solid var(--gold-dim);border-radius:var(--radius-btn);background:#141b3399;color:var(--gold);font-family:var(--font-heading);font-size:.95rem;font-weight:500;letter-spacing:.05em;cursor:pointer;transition:var(--transition);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.btn-secondary:hover{background:#d4a8501a;border-color:var(--gold);box-shadow:0 0 16px #d4a85026}.quiz{display:flex;flex-direction:column;gap:28px;padding-top:8vh;padding-bottom:8vh}.quiz__header{display:flex;flex-direction:column;gap:12px}.quiz__counter{font-family:var(--font-heading);font-size:.85rem;color:var(--text-secondary);letter-spacing:.15em;text-align:center}.progress-bar{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;position:relative}.progress-bar__fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold-bright) 100%);transition:width .4s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 0 8px #d4a85080}.progress-bar__fill:after{content:"";position:absolute;right:0;top:-2px;width:10px;height:10px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 12px #ffd666cc;transition:opacity var(--transition)}.quiz__question{font-family:var(--font-heading);font-size:clamp(1.1rem,3.5vw,1.35rem);color:var(--text-primary);text-align:center;line-height:1.6;padding:0 8px;animation:fadeSlideIn .35s ease-out both}.quiz__options{display:flex;flex-direction:column;gap:12px}.option-btn{position:relative;width:100%;padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--bg-panel);color:var(--text-primary);font-family:var(--font-body);font-size:.95rem;line-height:1.5;text-align:left;cursor:pointer;transition:var(--transition);overflow:hidden}.option-btn:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--gold);transform:scaleY(0);transition:transform var(--transition);border-radius:0 2px 2px 0}.option-btn:hover{border-color:var(--gold-dim);background:var(--bg-card);box-shadow:0 0 16px #d4a85014}.option-btn:hover:before{transform:scaleY(1)}.option-btn--selected{border-color:var(--gold);background:#d4a85014;box-shadow:0 0 20px #d4a85026;pointer-events:none}.option-btn--selected:before{transform:scaleY(1);background:var(--gold-bright);box-shadow:0 0 8px #ffd66699}.option-btn__label{display:inline-block;color:var(--gold);font-family:var(--font-heading);font-weight:600;margin-right:12px;min-width:20px}@keyframes splashReveal{0%{opacity:0;transform:scale(1.08);filter:blur(6px) brightness(.3)}to{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes starPop{0%{opacity:0;transform:scale(0) rotate(-30deg)}60%{transform:scale(1.3) rotate(5deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes shimmerFloat{0%,to{transform:translateY(0) scale(1);opacity:0}15%{opacity:.8}50%{transform:translateY(-60px) scale(.6);opacity:.4}to{transform:translateY(-120px) scale(.2);opacity:0}}@keyframes barGrow{0%{width:0}}.result{width:100%;max-width:720px;margin:0 auto;background:var(--bg-deep);color:var(--text-primary);position:relative;overflow:hidden}.result__hero{position:relative;width:100%;min-height:58vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow:hidden}.result__splash-viewport{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.result__splash-art{width:100%;height:100%;object-fit:cover;object-position:top center;animation:splashReveal 1.6s cubic-bezier(.22,1,.36,1) forwards;-webkit-user-select:none;user-select:none;pointer-events:none}.result__splash-fade{position:absolute;bottom:0;left:0;right:0;height:75%;background:linear-gradient(to top,var(--bg-deep) 0%,var(--bg-deep) 18%,rgba(11,16,38,.88) 42%,rgba(11,16,38,.45) 68%,transparent 100%);z-index:1}.result__splash-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(11,16,38,.75) 100%);z-index:1}.result__splash-top{position:absolute;top:0;left:0;right:0;height:25%;background:linear-gradient(to bottom,rgba(11,16,38,.4),transparent);z-index:1}.result__shimmer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;overflow:hidden}.result__shimmer:before,.result__shimmer:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold-bright, #f0d080);box-shadow:80px 60px #d4a85080,200px 30px 0 -1px #d4a85066,320px 80px #d4a85099,450px 20px 0 -1px #d4a8504d,160px 120px #d4a85073,520px 90px 0 -1px #d4a85059,60px 180px #d4a85080,380px 160px #d4a85066;animation:shimmerFloat 4s ease-in-out infinite}.result__shimmer:after{width:3px;height:3px;left:40px;top:40px;animation-delay:-2s;animation-duration:5s}.result__identity{position:relative;z-index:3;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 24px 32px;text-align:center;animation:fadeUp .8s .6s cubic-bezier(.22,1,.36,1) both}.result__stars{display:flex;gap:6px;font-size:1.1rem;color:var(--gold-bright, #f0d080);margin-bottom:4px}.result__stars span{display:inline-block;animation:starPop .5s cubic-bezier(.22,1,.36,1) both}.result__stars span:nth-child(1){animation-delay:.9s}.result__stars span:nth-child(2){animation-delay:1s}.result__stars span:nth-child(3){animation-delay:1.1s}.result__stars span:nth-child(4){animation-delay:1.2s}.result__stars span:nth-child(5){animation-delay:1.3s}.result__name-group{display:flex;align-items:center;gap:14px}.result__el-icon{width:36px;height:36px;filter:drop-shadow(0 0 10px var(--el-color, #d4a850));animation:fadeUp .6s .8s cubic-bezier(.22,1,.36,1) both}.result__char-name{font-family:"Noto Serif SC","Source Han Serif SC",STSong,serif;font-size:clamp(2rem,6vw,3.2rem);font-weight:700;letter-spacing:.08em;text-shadow:0 0 20px var(--el-color, #d4a850),0 0 60px color-mix(in srgb,var(--el-color, #d4a850) 40%,transparent),0 2px 4px rgba(0,0,0,.9),0 4px 16px rgba(0,0,0,.7);margin:0;line-height:1.2}.result__rule{width:200px;height:1px;margin:4px 0}.result__badge{font-size:.95rem;color:var(--gold-bright, #f0d080);font-weight:600;letter-spacing:.06em;margin:0;text-shadow:0 1px 6px rgba(0,0,0,.8)}.result__sub{font-size:.82rem;color:var(--text-dim, #888a9e);margin:0;text-shadow:0 1px 4px rgba(0,0,0,.7)}.result__similarity{font-size:.9rem;color:var(--text-secondary, #a0a3b8);margin:4px 0 0}.result__similarity strong{font-size:1.5rem;font-weight:700;color:var(--gold-bright, #f0d080);margin-left:4px}.result__body{position:relative;z-index:3;padding:0 28px 40px;display:flex;flex-direction:column;gap:36px}.result__text-section{display:flex;flex-direction:column;gap:14px;animation:fadeUp .7s 1s cubic-bezier(.22,1,.36,1) both}.result__intro{font-size:1.05rem;color:var(--gold-bright, #f0d080);font-style:italic;line-height:1.7;text-align:center;margin:0}.result__desc{font-size:.92rem;color:var(--text-secondary, #a0a3b8);line-height:1.8;text-align:justify;margin:0}.result__heading{font-family:"Noto Serif SC","Source Han Serif SC",serif;font-size:1.15rem;font-weight:600;color:var(--text-primary);text-align:center;display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 20px}.result__heading-ornament{font-size:.65rem;color:var(--gold-bright, #f0d080);opacity:.7}.result__dimensions{animation:fadeUp .7s 1.2s cubic-bezier(.22,1,.36,1) both}.result__dim-grid{display:flex;flex-direction:column;gap:16px}.result__dim{display:flex;flex-direction:column;gap:6px}.result__dim-header{display:flex;justify-content:space-between;align-items:baseline}.result__dim-name{font-size:.88rem;color:var(--text-primary);font-weight:500}.result__dim-level{font-size:.78rem;font-weight:700;font-family:JetBrains Mono,Fira Code,monospace;letter-spacing:.06em}.result__dim-level--H{color:var(--gold-bright, #f0d080)}.result__dim-level--M{color:var(--text-primary)}.result__dim-level--L{color:var(--text-dim, #888a9e)}.result__bar{width:100%;height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden}.result__bar-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.22,1,.36,1);animation:barGrow 1s cubic-bezier(.22,1,.36,1) both;animation-delay:1.4s}.result__dim-desc{font-size:.78rem;color:var(--text-dim, #888a9e);line-height:1.5;margin:0}.result__ranking{animation:fadeUp .7s 1.5s cubic-bezier(.22,1,.36,1) both}.result__top3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.result__rank{display:grid;grid-template-columns:28px 44px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:6px;align-items:center;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.05)}.result__rank:last-child{border-bottom:none;padding-bottom:0}.result__rank-n{grid-row:1 / 3;font-size:1.3rem;font-weight:700;font-family:"Noto Serif SC",serif;color:var(--text-dim, #888a9e);text-align:center}.result__rank:first-child .result__rank-n{color:var(--gold-bright, #f0d080)}.result__rank-avatar{grid-row:1 / 3;width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.1)}.result__rank-meta{display:flex;justify-content:space-between;align-items:baseline}.result__rank-name{font-size:.92rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px}.result__rank-el{width:16px;height:16px;vertical-align:middle}.result__rank-pct{font-size:.82rem;color:var(--text-dim, #888a9e);font-family:JetBrains Mono,Fira Code,monospace}.result__rank-bar{grid-column:3 / 4;height:4px;background:#ffffff0f;border-radius:2px;overflow:hidden}.result__rank-bar-fill{height:100%;border-radius:2px;transition:width .6s ease}.result__actions{display:flex;gap:16px;justify-content:center;animation:fadeUp .7s 1.7s cubic-bezier(.22,1,.36,1) both}.result__btn{padding:12px 32px;font-size:.92rem;font-weight:600;border-radius:6px;cursor:pointer;transition:transform .2s,opacity .2s;letter-spacing:.04em;background:none;font-family:inherit}.result__btn:active{transform:scale(.96)}.result__btn--restart{border:1.5px solid rgba(255,255,255,.15);color:var(--text-secondary, #a0a3b8);background:transparent}.result__btn--restart:hover{background:#ffffff0d;border-color:#ffffff40}.result__disclaimer{font-size:.72rem;color:var(--text-dim, #888a9e);text-align:center;line-height:1.7;opacity:.6;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.04)}.intro__disclaimer{width:90%;max-width:400px;font-size:.68rem;color:var(--text-dim, #888a9e);text-align:center;line-height:1.6;opacity:.45;margin-top:auto;padding-top:24px}@media(max-width:600px){.result__hero{min-height:50vh}.result__splash-fade{height:60%}.result__identity{gap:4px;padding:12px 20px 20px}.result__stars{font-size:.9rem;gap:4px;margin-bottom:0}.result__char-name{font-size:clamp(1.6rem,7vw,2.2rem)}.result__el-icon{width:24px;height:24px}.result__name-group{gap:10px}.result__rule{width:140px;margin:2px 0}.result__badge{font-size:.82rem}.result__sub{font-size:.72rem}.result__similarity{font-size:.8rem;margin-top:0}.result__similarity strong{font-size:1.2rem}.result__body{padding:0 18px 32px;gap:28px}.result__intro{font-size:.95rem}.result__desc{font-size:.85rem}.result__actions{flex-direction:column;align-items:center}.result__btn{width:100%;max-width:280px;text-align:center}}@media(max-width:380px){.result__hero{min-height:44vh}.result__splash-fade{height:50%}.result__identity{gap:2px;padding:8px 16px 16px}.result__stars{font-size:.75rem;gap:3px}.result__char-name{font-size:clamp(1.3rem,7vw,1.8rem)}.result__el-icon{width:20px;height:20px}.result__badge{font-size:.75rem}.result__sub{font-size:.68rem}.result__similarity{font-size:.75rem}.result__similarity strong{font-size:1.05rem}.result__body{padding:0 14px 28px}.result__dim-desc{font-size:.72rem}}@media(max-width:480px){.screen{padding:16px}.intro{padding-top:15vh}.btn-gold{padding:12px 36px;font-size:1rem}.dim-row__name{width:64px;font-size:.75rem}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}::selection{background:#d4a8504d;color:var(--text-primary)}