@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Space+Grotesk:wght@500;700&display=swap";:root{--bg-top:#0b2d4a;--bg-bottom:#04111f;--card:#081828db;--card-border:#99d1ff47;--text-main:#f1fbff;--text-soft:#b7d5ea;--accent:#39d98a;--accent-soft:#39d98a2e;--danger:#ff9090}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--text-main);background:radial-gradient(circle at 20% 15%, #0e4876 0%, transparent 45%), radial-gradient(circle at 80% 85%, #11365b 0%, transparent 40%), linear-gradient(160deg, var(--bg-top), var(--bg-bottom));font-family:Outfit,sans-serif}.app-shell{place-items:center;min-height:100svh;padding:16px;display:grid}.result-shell{position:relative}.card{border:1px solid var(--card-border);background:var(--card);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:24px;width:min(560px,100%);padding:18px;box-shadow:0 20px 50px #00000059}.intro-card,.result-card,.status-card{flex-direction:column;align-items:center;gap:14px;display:flex}.quiz-logo{object-fit:cover;transform-origin:50%;border:2.5px solid #ffffff61;border-radius:50%;width:88px;height:88px;animation:3s ease-in-out infinite logoFloat;box-shadow:0 6px 16px #00000047}.quiz-logo.placeholder{background:#ffffff24;place-items:center;font-family:Space Grotesk,sans-serif;font-size:2rem;display:grid}.title{text-align:center;margin:0;font-family:Space Grotesk,sans-serif;font-size:1.6rem}.subtitle{color:var(--text-soft);margin:0}.name-input,.answer-input{width:100%;color:var(--text-main);background:#ffffff17;border:1px solid #b1d6f059;border-radius:14px;outline:none;padding:12px 14px;font-size:1rem}.name-input::placeholder,.answer-input::placeholder{color:#c1dff4cc}.primary-btn,.next-btn{color:#f3fff8;cursor:pointer;background:linear-gradient(160deg,#2fb876,#2ba66c);border:1px solid #39d98ab3;border-radius:999px;padding:11px 20px;font-size:.98rem;font-weight:700;transition:transform .14s,filter .14s,opacity .14s}.primary-btn:disabled,.next-btn:disabled{opacity:.55;cursor:not-allowed}.primary-btn:hover:not(:disabled),.next-btn:hover:not(:disabled){filter:brightness(1.04);transform:translateY(-1px)}.quiz-card{position:relative}.card-top-row{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.logo-wrap{justify-content:center;align-items:center;display:flex}.card-logo{object-fit:cover;transform-origin:50%;border:2.5px solid #ffffff61;border-radius:50%;width:75px;height:75px;animation:3s ease-in-out infinite logoFloat;box-shadow:0 6px 16px #00000047}.card-logo-placeholder{background:#ffffff24;place-items:center;font-family:Space Grotesk,sans-serif;font-size:1.3rem;display:grid}@keyframes logoFloat{0%{transform:translateY(0)rotate(0)scale(1)}30%{transform:translateY(-5px)rotate(6deg)scale(1.05)}60%{transform:translateY(-3px)rotate(-5deg)scale(1.03)}to{transform:translateY(0)rotate(0)scale(1)}}.counter-chip{color:var(--text-soft);background:#ffffff1a;border-radius:999px;padding:5px 10px;font-size:.82rem}.question-row{justify-content:center;margin-top:18px;margin-bottom:10px;display:flex}.q-circle-wrap{perspective:900px;justify-content:center;align-items:center;display:flex}.q-circle{isolation:isolate;width:88px;height:88px;transform-style:preserve-3d;background:radial-gradient(circle at 30% 28%,#ffffffbf,#fff0 38%),linear-gradient(145deg,#5ef4ff 0%,#0fd3de 52%,#0a8d98 100%);border:2px solid #ffffffb8;border-radius:50%;justify-content:center;align-items:center;font-family:Space Grotesk,sans-serif;font-weight:900;animation:.32s cubic-bezier(.22,1,.36,1) circleIn;display:flex;position:relative;transform:rotateX(10deg)rotateY(-8deg);box-shadow:inset 0 8px 12px #ffffff59,inset 0 -8px 12px #00000038,0 12px 22px #00000052,0 3px #00000040}.q-circle:before{content:"";border:2px solid #fffffff2;border-color:#fffffff2 #ffffff59 #0000 #0000;border-radius:50%;animation:3.6s linear infinite spinBorder;position:absolute;inset:-6px}.q-circle-num{color:#fff;text-shadow:0 2px #00000040,0 5px 10px #00000059;font-size:2.6rem;font-weight:900;line-height:1;display:inline-block}@keyframes spinBorder{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes circleIn{0%{opacity:0;transform:rotateX(10deg)rotateY(-8deg)scale(.7)}to{opacity:1;transform:rotateX(10deg)rotateY(-8deg)scale(1)}}.choice-row{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px;margin-bottom:24px;display:flex}.choice-btn{min-width:76px;color:var(--text-main);cursor:pointer;background:#ffffff14;border:1px solid #9ccef06b;border-radius:14px;padding:10px 16px;font-family:Space Grotesk,sans-serif;font-size:1.06rem;transition:transform .14s,background .14s,border-color .14s}.choice-btn.selected{background:var(--accent-soft);border-color:var(--accent)}.choice-btn:hover{transform:translateY(-1px)}.option-list{flex-direction:column;gap:10px;margin-top:20px;margin-bottom:16px;display:flex}.option-btn{width:100%;color:var(--text-main);cursor:pointer;text-align:left;background:#ffffff12;border:1px solid #9ccef061;border-radius:14px;align-items:center;gap:14px;padding:11px 16px;font-family:Outfit,sans-serif;font-size:1rem;transition:transform .14s,background .14s,border-color .14s;display:flex}.option-btn.selected{background:var(--accent-soft);border-color:var(--accent)}.option-btn:hover:not(.selected){background:#ffffff1f;transform:translateY(-1px)}.option-letter{background:#ffffff24;border:1px solid #9ccef073;border-radius:50%;flex-shrink:0;place-items:center;width:32px;height:32px;font-family:Space Grotesk,sans-serif;font-size:.95rem;font-weight:700;display:grid}.option-btn.selected .option-letter{background:var(--accent);border-color:var(--accent);color:#03200f}.option-text{flex:1;font-weight:600;line-height:1.3}.input-row{flex-direction:column;gap:12px;display:flex}.ml-grid{flex-wrap:wrap;justify-content:center;gap:7px;display:flex}.ml-cell{border-radius:9px;place-items:center;width:44px;height:50px;font-family:Space Grotesk,sans-serif;font-size:1.2rem;font-weight:700;display:grid}.ml-fixed{color:var(--text-main);background:#ffffff14;border:1px solid #a7d5f48c}.ml-blank-input{color:#fff;text-align:center;text-transform:uppercase;cursor:text;background:#00000047;border:3px dashed #ffffffeb;border-radius:9px;outline:none;width:44px;height:50px;padding:0;font-family:Space Grotesk,sans-serif;font-size:1.25rem;font-weight:700;transition:border-color .15s,box-shadow .15s,background .15s;box-shadow:0 0 0 2px #00000080,0 0 16px #ffffff4d}.ml-blank-input:focus{border-style:solid;border-color:var(--accent);box-shadow:0 0 0 2px #00000080,0 0 18px #39d98a8c}.ml-blank-input.ml-blank-filled{background:#39d98a24;border-style:solid;border-color:#39d98abf}.ml-space{width:10px}.next-row{justify-content:flex-end;margin-top:12px;display:flex}.result-name{letter-spacing:.02em;margin:0;font-size:1.28rem;font-weight:700}.score-showcase{background:radial-gradient(circle at 0 0,#ffffff24,#0000 44%),linear-gradient(160deg,#ffffff1a,#ffffff0a);border:1px solid #ffffff1f;border-radius:22px;grid-template-columns:auto 1fr;align-items:center;gap:18px;width:100%;padding:18px;display:grid}.score-ring{background:radial-gradient(circle at 30% 25%,#ffffffd1,#fff0 38%),conic-gradient(from 230deg,#f0d9a8 0%,#e7c98f 38%,#b8f0e4 72%,#ffffff1f 72% 100%);border-radius:50%;place-items:center;width:128px;height:128px;display:grid;box-shadow:0 16px 30px #00000038,inset 0 1px #ffffff8c}.score-ring-inner{color:#f8fcff;text-align:center;background:#06121ef0;border-radius:50%;justify-content:center;align-items:center;gap:1px;width:100px;height:100px;font-family:Space Grotesk,sans-serif;line-height:1;display:flex;box-shadow:inset 0 0 0 1px #ffffff14}.score-value{font-size:2.2rem;font-weight:800;line-height:1;display:inline-block;transform:translateY(1px)}.score-slash,.score-total{opacity:.78;font-size:1rem;font-weight:700;line-height:1;display:inline-block}.score-copy{min-width:0}.score-kicker{text-transform:uppercase;letter-spacing:.18em;color:var(--text-soft);margin:0 0 4px;font-size:.72rem}.result-score{margin:0;font-family:Space Grotesk,sans-serif;font-size:clamp(2rem,4vw,2.6rem);line-height:1;animation:.48s ease-out pulseIn}.score-label{color:var(--accent);margin:8px 0 6px;font-size:1rem;font-weight:700}.score-subtext{color:var(--text-soft);margin:0;line-height:1.45}.submit-error{color:var(--danger);margin:0}.submit-ok{color:var(--accent);margin:0}.error{color:var(--danger)}.confetti-wrapper{pointer-events:none;z-index:40;width:100%;height:100vh;position:fixed;inset:0;overflow:hidden}.result-shell .result-card{z-index:20;position:relative}.confetti{filter:saturate(.9)brightness(1.02);opacity:0;will-change:transform, opacity;width:10px;height:10px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #ffffff38,0 8px 22px #0000001f}@keyframes premiumBurst{0%{opacity:1;transform:translate(0)scale(1)}18%{opacity:1}to{transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(.2);opacity:0}}.confetti.animate{animation:2.35s cubic-bezier(.16,1,.3,1) forwards premiumBurst}.confetti:nth-child(3n){transform:rotate(18deg)}.confetti:nth-child(3n+1){transform:rotate(-12deg)}.confetti:nth-child(3n+2){transform:rotate(6deg)}@keyframes pulseIn{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@media (width<=520px){.score-showcase{text-align:center;grid-template-columns:1fr;justify-items:center}.score-copy{width:100%}.score-ring{width:112px;height:112px}.score-ring-inner{width:86px;height:86px}.score-value{font-size:1.9rem}}