:root{--bg: #030304;--surface: #0a0a0f;--card: rgba(18, 18, 26, .4);--card-hover: rgba(28, 28, 40, .6);--border: rgba(255, 255, 255, .08);--border-active: rgba(255, 255, 255, .15);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .85);--text-muted: rgba(255, 255, 255, .5);--accent: #ff3b30;--accent-glow: rgba(255, 59, 48, .35);--accent-soft: rgba(255, 59, 48, .12);--gold: #f0c35e;--gold-glow: rgba(240, 195, 94, .4);--purple: #8f6afe;--purple-glow: rgba(143, 106, 254, .3);--green: #00ff88;--orange: #ff6b1a;--orange-glow: rgba(255, 107, 26, .45);--safe-padding: 2.5rem;--ease: cubic-bezier(.16, 1, .3, 1)}*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}input,textarea{user-select:auto;-webkit-user-select:auto}html{font-size:16px}body,#root{width:100%;height:100dvh;background:linear-gradient(135deg,#353535,#151515);color:var(--text-primary);font-family:DM Sans,system-ui,-apple-system,sans-serif;line-height:1.4;-webkit-font-smoothing:antialiased;overflow:hidden}body:after{content:"";position:fixed;inset:0;background-image:url(https://grainy-gradients.vercel.app/noise.svg);opacity:.03;pointer-events:none;z-index:9999;filter:contrast(120%) brightness(120%)}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty;overflow-wrap:break-word;widows:3;orphans:3}.story-frame{width:100%;max-width:440px;height:min(92dvh,850px);aspect-ratio:9/16;background:var(--bg);position:relative;overflow:hidden;margin:4dvh auto;border-radius:16px;box-shadow:0 40px 100px -20px #000000e6,0 0 0 1px #ffffff0f,inset 0 0 20px #00000080;display:flex;flex-direction:column}@media(max-width:480px){.story-frame{max-width:100%;height:100vh;height:100dvh;border-radius:0;margin:0;aspect-ratio:auto;box-shadow:none}}.font-display{font-family:Mallanna,sans-serif;letter-spacing:.03em;font-weight:500;line-height:1.2;font-size:clamp(2rem,8vh,2.2rem)}.font-ui{font-family:DM Sans,sans-serif;font-weight:400;letter-spacing:-.01em;line-height:1.2}.font-score{font-family:Bebas Neue,system-ui,sans-serif}.text-gold{color:var(--gold)}.text-gold-glow{color:var(--gold);text-shadow:0 0 10px var(--gold-glow)}.text-accent{color:var(--accent)}.bg-accent{background-color:var(--accent)}.bg-accent-gradient{background:linear-gradient(135deg,#ff3b30,#ff6b1a,#ff3b30)}@media(max-height:700px){.btn-primary{padding-top:1rem!important;padding-bottom:1rem!important;height:auto!important}.flex-col.gap-5{gap:.75rem!important}}.screen{flex:1;width:100%;display:flex;flex-direction:column;padding:0;position:relative;overflow:hidden;padding:1rem 2rem;padding-top:calc(1rem + 56px);padding-bottom:calc(1rem + 56px)}.material-symbols-filled{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}.screen.results-screen{overflow-y:auto!important;overflow-x:hidden;height:100%;padding-left:1rem;padding-right:1rem;display:block}.global-topbar{position:absolute;top:max(10px,env(safe-area-inset-top));left:16px;right:16px;z-index:600;min-height:52px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.topbar-left,.topbar-right{display:flex;align-items:center;gap:8px;pointer-events:auto;min-width:0;max-width:100%;opacity:.8}@keyframes brandGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.topbar-brand{position:absolute;left:50%;transform:translate(-50%);font-family:DM Sans,sans-serif;font-size:18px!important;font-weight:700;letter-spacing:-.5px;background:linear-gradient(135deg,#e0291f,#d84d02,#da2319);background-size:200% auto;animation:brandGradient 4s ease infinite;text-shadow:none;white-space:nowrap;flex-shrink:0;border:none;padding:4px 12px;cursor:pointer;pointer-events:auto;transition:all .2s ease;border-radius:24px;display:flex;align-items:center;justify-content:center}.topbar-brand:hover{transform:translate(-50%) scale(1.05)}.topbar-brand:active{transform:translate(-50%) scale(.98)}@keyframes needleJump{0%,20%{transform:rotate(18deg)}30%{transform:rotate(-55deg)}45%{transform:rotate(70deg)}60%{transform:rotate(-10deg)}75%{transform:rotate(18deg)}to{transform:rotate(18deg)}}.speedometer-needle{transform-origin:12px 14px;animation:needleJump 6s ease-in-out infinite}.topbar-icon-btn{height:50px;width:50px;padding:0 10px 0 8px;border:none;background:transparent;color:#ffffffd9;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;pointer-events:auto;transition:all .2s var(--ease);flex-shrink:0;font-size:28px}.topbar-account-btn{border:0;background:transparent;display:flex;align-items:center;gap:8px;color:#fff;cursor:pointer;opacity:.86;transition:opacity .2s var(--ease),transform .2s var(--ease);min-width:0}.topbar-account-icon-wrap{width:50px;height:50px;display:grid;place-items:center;border:none;background:transparent;font-size:28px}.topbar-account-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.1}.topbar-account-copy span:first-child{font-family:DM Sans,sans-serif;font-size:13px;font-weight:600;color:#ffffffeb}.topbar-account-copy span:last-child{font-family:DM Sans,sans-serif;font-size:11px;font-weight:500;color:#ffffff8c}@media(hover:hover){.topbar-icon-btn:hover{border-color:#fff6;transform:translateY(-1px)}.topbar-account-btn:hover{opacity:1;transform:translateY(-1px)}}.topbar-icon-btn:active,.topbar-account-btn:active{transform:scale(.97)}.screen-enter{animation:screenSlideIn .55s cubic-bezier(.16,1,.3,1) forwards}@keyframes screenSlideIn{0%{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.text-reveal{animation:textReveal 1s var(--ease) forwards;opacity:0}@keyframes textReveal{0%{opacity:0;transform:translateY(20px);filter:none;letter-spacing:.1em}to{opacity:1;transform:translateY(0);filter:none;letter-spacing:normal}}.text-reveal-dramatic{opacity:1}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.gradient-animate{background-size:400% 400%;animation:gradientShift 10s ease infinite}.btn-primary{background:var(--accent);color:#fff;border:none;padding:1rem 2.25rem;border-radius:12px;font-family:DM Sans,sans-serif;font-weight:600;font-size:1.15rem;cursor:pointer;transition:all .4s var(--ease);box-shadow:0 10px 40px var(--accent-glow);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.btn-primary:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:translate(-100%);transition:transform .6s ease}@keyframes glimmerStart{0%{transform:translate(-150%) skew(-25deg)}to{transform:translate(150%) skew(-25deg)}}.glimmer{position:relative;overflow:hidden}.glimmer:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:glimmerStart 3s infinite}@media(hover:hover){.btn-primary:hover:after{transform:translate(100%)}.btn-primary:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 15px 50px var(--accent-glow)}}.btn-primary:active{transform:scale(.96)}.btn-secondary{background:#ffffff0a;color:var(--text-primary);border:1px solid var(--border);padding:.85rem 1.75rem;border-radius:10px;font-family:DM Sans,sans-serif;font-weight:500;font-size:1.05rem;cursor:pointer;transition:all .3s var(--ease);-webkit-tap-highlight-color:transparent}@media(hover:hover){.btn-secondary:hover{background:#ffffff14;border-color:#ffffff4d;transform:translateY(-2px)}}.btn-secondary:active{transform:scale(.98)}.btn-retake{background:#ffffff0a;color:var(--text-secondary);border:1px solid rgba(255,255,255,.08);padding:.75rem 1.75rem;border-radius:10px;font-family:DM Sans,sans-serif;font-weight:500;font-size:1.1rem;cursor:pointer;transition:all .2s ease;width:100%;-webkit-tap-highlight-color:transparent}@media(hover:hover){.btn-retake:hover{background:#ffffff0f;color:var(--text-primary)}}.btn-retake:active{transform:scale(.97)}.card-select{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem;cursor:pointer;transition:all .4s var(--ease);text-align:left;width:100%;font-family:Mallanna,sans-serif;color:var(--text-primary);-webkit-tap-highlight-color:transparent}@media(hover:hover){.card-select:hover{background:var(--card-hover);border-color:#ffffff40;transform:translateY(-4px) scale(1.02)}}.card-select.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 40px var(--accent-glow);transform:scale(1.04)}.answer-option{background:#ffffff0d;border:1px solid var(--border);border-radius:10px;padding:.4rem .8rem;cursor:pointer;transition:all .3s var(--ease);text-align:left;font-family:DM Sans,sans-serif;color:var(--text-primary);-webkit-tap-highlight-color:transparent}@media(hover:hover){.answer-option:hover{background:#ffffff1a;border-color:#ffffff4d;transform:translate(4px)}}.answer-option:active{transform:scale(.98)}.flip-card{perspective:1000px;cursor:pointer;-webkit-tap-highlight-color:transparent}.flip-card:active .flip-card-inner{transform:scale(.96)}.flip-card.flipped:active .flip-card-inner{transform:rotateY(180deg) scale(.96)}.flip-card-inner{position:relative;width:100%;height:100%;transition:transform .65s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.3rem .1rem;text-align:center}.flip-card-front{background:var(--card);border:1px solid var(--border-active);background-image:radial-gradient(circle at 50% 30%,rgba(255,255,255,.03) 0%,transparent 60%),radial-gradient(circle at 50% 70%,rgba(100,116,139,.02) 0%,transparent 50%);height:100%}.flip-card-front:before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.04);border-radius:10px;pointer-events:none}@keyframes cardShimmer{0%{transform:translate(-120%) skew(-20deg)}to{transform:translate(220%) skew(-20deg)}}.flip-card:not(.flipped) .flip-card-front:after{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%);animation:cardShimmer 2.8s ease-in-out infinite;animation-delay:var(--shimmer-delay, 0s);pointer-events:none}.flip-card-back{transform:rotateY(180deg);border:1px solid rgba(255,255,255,.08)}.splash-tap{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease),opacity .4s var(--ease),filter .4s var(--ease)}.splash-tap.leaving>*{opacity:0;transform:translateY(-20px) scale(.95);transition:all .3s var(--ease)}.splash-tap-hint{animation:tapHintPulse 2s ease-in-out infinite;letter-spacing:.1em;font-size:12px;opacity:.4}@keyframes tapHintPulse{0%,to{opacity:.25;transform:translateY(0)}50%{opacity:.55;transform:translateY(-4px)}}.story-carousel{position:relative;width:100%;aspect-ratio:9/16;max-height:75vh;border-radius:12px;overflow:hidden;box-shadow:0 16px 48px #00000080,0 0 0 1px #ffffff0a}.story-carousel-inner{display:flex;width:300%;height:100%;transition:transform .4s cubic-bezier(.4,0,.2,1)}.story-slide{flex:0 0 calc(100% / 3);height:100%;position:relative;overflow:hidden}.story-slide-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;text-align:center}.nav-tap-left,.nav-tap-right{position:absolute;top:92px;bottom:80px;z-index:5000;width:4%;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease)}.nav-tap-left{left:0;border-top-right-radius:20px;border-bottom-right-radius:20px}.nav-tap-right{right:0;border-top-left-radius:20px;border-bottom-left-radius:20px}.nav-arrow{width:24px;height:24px;opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}@media(hover:hover){.nav-tap-left:hover{background:linear-gradient(to right,rgba(255,255,255,.08),transparent)}.nav-tap-right:hover{background:linear-gradient(to left,rgba(255,255,255,.08),transparent)}.nav-tap-left:hover .nav-arrow,.nav-tap-right:hover .nav-arrow{opacity:.9;transform:scale(1.4)}}.nav-tap-left:active .nav-arrow,.nav-tap-right:active .nav-arrow{transform:scale(.85)}.story-dots{display:flex;gap:4px;justify-content:center;padding:10px 0 4px}.story-dot{height:3px;border-radius:2px;transition:all .3s ease;background:#ffffff26}.story-dot.active{background:var(--text-primary)}@keyframes glowPulse{0%,to{box-shadow:0 0 14px var(--accent-glow)}50%{box-shadow:0 0 28px var(--accent-glow),0 0 40px #d4382e14}}.glow-pulse{animation:glowPulse 2.5s ease-in-out infinite}@keyframes goldGlow{0%,to{box-shadow:0 0 14px var(--gold-glow)}50%{box-shadow:0 0 28px var(--gold-glow),0 0 40px #b8923c14}}.gold-glow{animation:goldGlow 3s ease-in-out infinite}@keyframes scoreReveal{0%{opacity:0;transform:scale(.4)}75%{transform:scale(1.06)}to{opacity:1;transform:scale(1)}}.score-enter{animation:scoreReveal 1.3s cubic-bezier(.16,1,.3,1) forwards}.score-bg-transition{transition:background 1.8s cubic-bezier(.4,0,.2,1),opacity 1.8s ease}@keyframes splashPulse{0%,to{opacity:.08;transform:scale(1)}50%{opacity:.15;transform:scale(1.04)}}.splash-bg-pulse{animation:splashPulse 3s ease-in-out infinite}.glass{background:#ffffff06;border:1px solid var(--border)}.blur-tease{filter:none;-webkit-user-select:none;user-select:none;pointer-events:none}@keyframes revealUnlock{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.reveal-stagger{animation:revealUnlock .5s ease forwards;opacity:0}@keyframes unlockGlow{0%,to{box-shadow:0 0 16px var(--gold-glow),0 4px 24px #0006}50%{box-shadow:0 0 32px var(--gold-glow),0 0 48px #b8923c14,0 4px 24px #0006}}.unlock-glow{animation:unlockGlow 2.5s ease-in-out infinite}@keyframes inProgressPulse{0%,to{opacity:.7}50%{opacity:1}}@keyframes ctaFade{0%{opacity:0;transform:translateY(5px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}.cta-rotating{animation:ctaFade 4s ease-in-out}@keyframes celebrationPop{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.celebration-pop{animation:celebrationPop .45s cubic-bezier(.16,1,.3,1) forwards}.progress-track{position:absolute;top:max(8px,env(safe-area-inset-top));left:18px;right:18px;height:3px;border-radius:10px;z-index:100;display:flex;gap:4px;pointer-events:none;opacity:.5}.progress-fill{height:100%;transition:width .4s var(--ease)}@media(max-width:480px){.progress-track{top:max(6px,env(safe-area-inset-top));left:12px;right:12px}}@keyframes orbFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(20px,-14px) scale(1.06)}66%{transform:translate(-14px,10px) scale(.96)}}.mystical-orb{position:absolute;border-radius:50%;animation:orbFloat 14s ease-in-out infinite;pointer-events:none}@keyframes twinkle{0%,to{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}.star{position:absolute;width:1.5px;height:1.5px;background:#ffffff80;border-radius:50%;animation:twinkle linear infinite;pointer-events:none}@keyframes floatUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.mystery-popup-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:10000;padding:2rem}.mystery-popup-content{background:var(--surface);border:1px solid var(--gold);border-radius:16px;padding:2.5rem 1.5rem;max-width:360px;width:100%;position:relative;box-shadow:0 30px 60px #00000080,0 0 40px var(--gold-glow);animation:floatUp .4s var(--ease) forwards;text-align:center;overflow:hidden}.mystery-popup-content:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--gold-glow) 0%,transparent 70%);opacity:.1;pointer-events:none}.divider{width:28px;height:2px;background:var(--accent);border-radius:100px;opacity:.35;display:none}::-webkit-scrollbar{width:0}@media(max-width:480px){html{font-size:16px}.screen{padding:1rem 1.5rem}.screen{padding-top:calc(1.25rem + 56px);padding-bottom:calc(1.25rem + 56px)}.story-carousel{max-height:72vh;border-radius:16px}.topbar-brand{font-size:20px}.topbar-account-copy span:first-child{font-size:13px}.topbar-account-copy span:last-child{font-size:11px}}@media(max-width:375px){html{font-size:15px}.screen{padding:1.25rem 1.4rem}}