/* StanRank V6 Motion + Sound Experience Layer */
:root{--mx:0;--my:0}
body{overflow-x:hidden}
#app{position:relative;z-index:2}
.topbar,.mobile-nav{z-index:70}
.icon-button.is-live{border-color:rgba(244,63,142,.38);box-shadow:0 0 0 1px rgba(244,63,142,.08),0 0 24px rgba(244,63,142,.08)}

#sr-atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 120%,rgba(124,58,237,.08),transparent 45%)}
.sr-aurora{position:absolute;width:55vw;height:55vw;border-radius:50%;filter:blur(80px);opacity:.12;mix-blend-mode:screen;will-change:transform}
.sr-aurora.a1{left:-20vw;top:-18vw;background:#ff2d8f;animation:srAurora1 16s ease-in-out infinite alternate}
.sr-aurora.a2{right:-20vw;top:15vh;background:#7c3aed;animation:srAurora2 20s ease-in-out infinite alternate}
.sr-aurora.a3{left:30vw;bottom:-30vw;background:#22d3ee;opacity:.055;animation:srAurora3 24s ease-in-out infinite alternate}
.sr-beam{position:absolute;width:18vw;height:120vh;top:-10vh;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 75%);filter:blur(18px);transform-origin:top center;opacity:.055}
.sr-beam.b1{left:18%;transform:rotate(18deg);animation:srBeam 9s ease-in-out infinite alternate}.sr-beam.b2{right:14%;transform:rotate(-22deg);animation:srBeam2 12s ease-in-out infinite alternate}
.sr-stars i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:white;box-shadow:0 0 8px rgba(255,255,255,.8);opacity:.15;animation:srTwinkle 2.6s var(--delay) ease-in-out infinite}
.sr-grain{position:absolute;inset:-50%;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");animation:srGrain .28s steps(2) infinite}
:root[data-theme="light"] #sr-atmosphere{opacity:.33;mix-blend-mode:multiply}

@keyframes srAurora1{to{transform:translate(calc(9vw + var(--mx)*14px),calc(12vh + var(--my)*10px)) scale(1.16)}}
@keyframes srAurora2{to{transform:translate(calc(-11vw + var(--mx)*-12px),calc(-8vh + var(--my)*8px)) scale(.9)}}
@keyframes srAurora3{to{transform:translate(calc(-8vw + var(--mx)*10px),-10vh) scale(1.08)}}
@keyframes srBeam{to{transform:rotate(31deg) translateX(10vw)}}@keyframes srBeam2{to{transform:rotate(-12deg) translateX(-9vw)}}
@keyframes srTwinkle{0%,100%{opacity:.08;transform:scale(.75)}50%{opacity:.65;transform:scale(1.7)}}
@keyframes srGrain{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}}

/* Opening stage */
.sr-gate{position:fixed;inset:0;z-index:9999;background:#05050a;color:white;overflow:hidden;display:grid;place-items:center;isolation:isolate;transition:opacity .6s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.sr-gate.leaving{opacity:0;transform:scale(1.035);pointer-events:none}
.sr-gate-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;transform:scale(1.08)}
.sr-gate-photo{overflow:hidden;position:relative;filter:saturate(.85) contrast(1.08)}.sr-gate-photo img{width:100%;height:100%;object-fit:cover;animation:srGatePan 10s ease-in-out infinite alternate}.sr-gate-photo:nth-child(even) img{animation-direction:alternate-reverse}
.sr-gate-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,4,10,.1),rgba(4,4,10,.55))}
.sr-gate-scrim{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(124,58,237,.08),transparent 28%),linear-gradient(90deg,rgba(5,5,10,.82),rgba(5,5,10,.52) 48%,rgba(5,5,10,.82)),linear-gradient(0deg,#05050a 0%,transparent 40%,rgba(5,5,10,.5));backdrop-filter:blur(1px)}
.sr-gate-content{position:relative;z-index:3;width:min(760px,calc(100% - 40px));text-align:center;display:grid;justify-items:center}.sr-gate-content>img{width:190px;margin-bottom:32px;filter:drop-shadow(0 0 24px rgba(244,63,142,.25))}.sr-gate-content>span{font-size:11px;font-weight:950;letter-spacing:.28em;color:#ff71b4}.sr-gate-content h1{font-size:clamp(58px,7.5vw,112px);line-height:.83;letter-spacing:-.075em;margin:15px 0 20px}.sr-gate-content h1 em{font-style:normal;background:linear-gradient(90deg,#ff55a4,#bd73ff,#67e8f9);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:srGradient 4s linear infinite}.sr-gate-content p{max-width:620px;color:#d0c7d5;font-size:16px}.sr-gate-actions{display:flex;gap:10px;margin:24px 0 15px;flex-wrap:wrap;justify-content:center}.sr-gate-content>small{font-size:10px;color:#8d8799}.sr-gate-eq{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);height:46px;display:flex;align-items:end;gap:5px;z-index:4}.sr-gate-eq i{width:4px;height:12px;border-radius:8px;background:linear-gradient(#ff4f9a,#8b5cf6);animation:srEq .65s ease-in-out infinite alternate}.sr-gate-eq i:nth-child(3n){animation-duration:.44s}.sr-gate-eq i:nth-child(4n){animation-duration:.8s}.sr-gate-eq i:nth-child(5n){animation-delay:.18s}
@keyframes srGatePan{to{transform:scale(1.09) translateY(-1.5%)}}@keyframes srEq{to{height:42px;filter:brightness(1.3)}}@keyframes srGradient{to{background-position:200% center}}

/* Persistent soundscape dock */
.sr-sound-dock{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:15px;border:1px solid rgba(255,255,255,.1);background:rgba(10,10,17,.78);backdrop-filter:blur(16px);color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.2);pointer-events:none;transition:.3s}.sr-sound-dock>div:nth-child(2){display:grid}.sr-sound-dock b{font-size:8px;letter-spacing:.12em}.sr-sound-dock small{font-size:7px;color:#b9b2c2}.sr-sound-dock>span{font-size:7px;font-weight:950;color:#4ade80}.sr-sound-dock.muted{opacity:.42}.sr-sound-dock.muted>span{color:#aaa}.sr-eq{height:20px;display:flex;align-items:center;gap:2px}.sr-eq i{display:block;width:2px;height:5px;border-radius:2px;background:#ff4f9a;animation:srMiniEq .5s ease-in-out infinite alternate}.sr-eq i:nth-child(2){animation-duration:.72s}.sr-eq i:nth-child(3){animation-duration:.38s}.sr-eq i:nth-child(4){animation-duration:.6s}.sr-eq i:nth-child(5){animation-duration:.46s}.sr-sound-dock.muted .sr-eq i{animation-play-state:paused;height:3px}
@keyframes srMiniEq{to{height:18px;background:#a855f7}}

/* Global motion language */
:root[data-motion="on"] .page{animation:srPageIn .55s cubic-bezier(.18,.8,.2,1)}
:root[data-motion="on"] .quiz-card,:root[data-motion="on"] .v5-portal,:root[data-motion="on"] .group-card,:root[data-motion="on"] .arena-mode-card,:root[data-motion="on"] .mini-mode-card{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease,border-color .2s,box-shadow .2s;transform-style:preserve-3d;will-change:transform}
:root[data-motion="on"] .quiz-card:hover,:root[data-motion="on"] .v5-portal:hover,:root[data-motion="on"] .group-card:hover{box-shadow:0 24px 65px rgba(122,52,190,.15)}
:root[data-motion="on"] .hero-main-photo img,:root[data-motion="on"] .event-hero>img,:root[data-motion="on"] .club-feature img{animation:srHeroBreath 11s ease-in-out infinite alternate}
:root[data-motion="on"] .hero-stack a:nth-child(1){animation:srFloat 4.3s ease-in-out infinite}:root[data-motion="on"] .hero-stack a:nth-child(2){animation:srFloat 5.2s .4s ease-in-out infinite}:root[data-motion="on"] .hero-stack a:nth-child(3){animation:srFloat 4.8s .8s ease-in-out infinite}
:root[data-motion="on"] .live-badge i,.online-dot,.live-dot{animation:srPulseDot 1.25s ease-in-out infinite}
:root[data-motion="on"] .world-core{animation:srWorldFloat 5s ease-in-out infinite}
:root[data-motion="on"] .v4-hero-stage:after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 30deg,transparent,rgba(255,255,255,.09),transparent 20%);animation:srStageSweep 8s linear infinite;pointer-events:none}
:root[data-motion="on"] .score-meter span,:root[data-motion="on"] .quiz-progress span,:root[data-motion="on"] .arena-round-progress span{background-size:200% 100%;animation:srMeter 2.6s linear infinite}
:root[data-motion="on"] .btn.primary{background-size:180% 180%;animation:srButtonGlow 5s ease-in-out infinite}
@keyframes srPageIn{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes srHeroBreath{to{transform:scale(1.045) translate(calc(var(--mx)*-3px),calc(var(--my)*-2px))}}
@keyframes srFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes srPulseDot{50%{opacity:.35;box-shadow:0 0 0 7px rgba(74,222,128,0)}}
@keyframes srWorldFloat{50%{transform:translateY(-8px) rotate(1.5deg)}}@keyframes srStageSweep{to{transform:rotate(360deg)}}@keyframes srMeter{to{background-position:200% center}}@keyframes srButtonGlow{0%,100%{background-position:0 50%;box-shadow:0 12px 35px rgba(244,63,142,.18)}50%{background-position:100% 50%;box-shadow:0 14px 45px rgba(139,92,246,.28)}}

/* Round punctuation */
.sr-round-splash{position:fixed;inset:0;z-index:400;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,rgba(139,92,246,.2),rgba(5,5,10,.02) 35%,transparent 65%);pointer-events:none;color:white;animation:srRoundOut .65s ease both}.sr-round-splash span{font-size:9px;font-weight:950;letter-spacing:.28em;color:#ff75b5}.sr-round-splash b{font-size:clamp(44px,7vw,95px);letter-spacing:-.06em;text-shadow:0 0 38px rgba(168,85,247,.5);animation:srRoundPop .55s cubic-bezier(.15,.85,.2,1)}.sr-round-splash i{width:140px;height:2px;background:linear-gradient(90deg,transparent,#ff55a4,#a855f7,transparent);margin-top:11px;animation:srLine .6s ease both}
@keyframes srRoundPop{0%{opacity:0;transform:scale(.65) rotate(-2deg);filter:blur(8px)}55%{opacity:1;transform:scale(1.06)}100%{transform:scale(1)}}@keyframes srRoundOut{0%,62%{opacity:1}100%{opacity:0}}@keyframes srLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Answer / win bursts */
.sr-burst{position:fixed;inset:0;z-index:500;pointer-events:none;display:grid;place-items:center;overflow:hidden}.sr-burst-flash{position:absolute;inset:0;animation:srFlash .52s ease-out both}.sr-burst-correct .sr-burst-flash{background:radial-gradient(circle,rgba(74,222,128,.26),transparent 40%)}.sr-burst-wrong .sr-burst-flash,.sr-burst-loss .sr-burst-flash{background:radial-gradient(circle,rgba(248,113,113,.18),transparent 38%)}.sr-burst-win .sr-burst-flash{background:radial-gradient(circle,rgba(250,204,21,.24),rgba(244,63,142,.1),transparent 48%)}.sr-burst-match .sr-burst-flash{background:radial-gradient(circle,rgba(168,85,247,.26),transparent 42%)}
.sr-burst-bits{position:absolute;left:50%;top:50%;width:10px;height:10px}.sr-burst-bits i{position:absolute;width:8px;height:16px;border-radius:4px;background:hsl(calc(var(--i)*39 + 300) 90% 65%);animation:srParticle .9s var(--d) cubic-bezier(.12,.7,.2,1) both;transform:translate(-50%,-50%)}.sr-burst>b{font-size:clamp(36px,7vw,88px);font-weight:950;letter-spacing:-.06em;background:linear-gradient(90deg,#fff,#ff8cc2,#c69cff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:srCombo .9s ease both}
@keyframes srFlash{from{opacity:1}to{opacity:0}}@keyframes srParticle{from{opacity:1;transform:translate(-50%,-50%) scale(.3) rotate(0)}to{opacity:0;transform:translate(calc(-50% + var(--x)*42vw),calc(-50% + var(--y)*42vh)) scale(1) rotate(500deg)}}@keyframes srCombo{0%{opacity:0;transform:scale(.5)}28%{opacity:1;transform:scale(1.12)}100%{opacity:0;transform:scale(.94) translateY(-35px)}}

/* Quiz/Arena extra energy */
:root[data-motion="on"] .quiz-screen .question-wrap,:root[data-motion="on"] .arena-question{animation:srQuestionIn .48s .36s cubic-bezier(.15,.85,.2,1) both}
:root[data-motion="on"] .answer-option{position:relative;overflow:hidden}
:root[data-motion="on"] .answer-option:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.07),transparent 70%);transform:translateX(-130%);transition:.4s}
:root[data-motion="on"] .answer-option:hover:before{transform:translateX(130%)}
:root[data-motion="on"] .answer-option.correct{animation:srCorrect .5s ease both}:root[data-motion="on"] .answer-option.wrong{animation:srWrong .42s ease both}
:root[data-motion="on"] .timer-pill.danger,:root[data-motion="on"] .arena-timer-pill.danger{animation:srDanger .55s ease-in-out infinite;color:#ff6b8e}
:root[data-motion="on"] .arena-waiting{animation:srWaitingGlow .8s ease-in-out infinite alternate}
:root[data-motion="on"] .matchmaking-card{animation:srMatchCard 2.2s ease-in-out infinite alternate}
:root[data-motion="on"] .radar-line{animation-duration:1.15s!important}
@keyframes srQuestionIn{from{opacity:0;transform:translateY(24px) scale(.985);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}@keyframes srCorrect{35%{transform:scale(1.025);box-shadow:0 0 0 3px rgba(74,222,128,.18),0 0 40px rgba(74,222,128,.12)}}@keyframes srWrong{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}@keyframes srDanger{50%{transform:scale(1.08);box-shadow:0 0 28px rgba(244,63,94,.28)}}@keyframes srWaitingGlow{to{box-shadow:0 0 35px rgba(168,85,247,.12)}}@keyframes srMatchCard{to{transform:translateY(-6px);box-shadow:0 35px 100px rgba(120,45,190,.25)}}

/* Scene-specific atmosphere */
:root[data-scene="quiz"] .sr-aurora.a1{opacity:.19}:root[data-scene="quiz"] .sr-aurora.a2{opacity:.17}
:root[data-scene="arena"] .sr-aurora,:root[data-scene="matching"] .sr-aurora{opacity:.2;filter:blur(65px)}
:root[data-scene="result"] .sr-stars i{animation-duration:1s;opacity:.35}

/* Motion off / accessibility */
:root[data-motion="off"] #sr-atmosphere .sr-aurora,:root[data-motion="off"] #sr-atmosphere .sr-beam,:root[data-motion="off"] #sr-atmosphere .sr-stars i,:root[data-motion="off"] .sr-eq i,:root[data-motion="off"] .sr-gate-eq i{animation:none!important}
:root[data-motion="off"] .quiz-card,:root[data-motion="off"] .v5-portal,:root[data-motion="off"] .group-card{transform:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.sr-round-splash,.sr-burst{display:none!important}}

@media(max-width:760px){.sr-gate-bg{grid-template-columns:1fr 1fr}.sr-gate-photo.p3,.sr-gate-photo.p4{display:none}.sr-gate-content>img{width:145px;margin-bottom:24px}.sr-gate-content h1{font-size:58px}.sr-gate-content p{font-size:13px}.sr-gate-content>small{font-size:8px;max-width:320px}.sr-gate-eq{bottom:2.5vh}.sr-sound-dock{right:10px;bottom:76px;padding:7px 9px}.sr-sound-dock b{font-size:7px}.sr-sound-dock small{display:none}.sr-round-splash b{font-size:44px}.sr-burst-bits i{width:6px;height:12px}.sr-beam{display:none}}

/* Readable brand wordmark on dark fanverse surfaces */
.sr-brand-wordmark{width:auto;gap:8px;color:#fff}.sr-brand-wordmark>span,.sr-footer-wordmark>span,.sr-gate-wordmark>span{font-size:29px;line-height:1;background:linear-gradient(145deg,#ff4f9a,#a855f7,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(244,63,142,.28))}.sr-brand-wordmark b,.sr-footer-wordmark b,.sr-gate-wordmark b{font-style:italic;font-size:24px;letter-spacing:-.055em}.sr-brand-wordmark em,.sr-footer-wordmark em,.sr-gate-wordmark em{font-style:inherit;color:#ff4f9a}.sr-footer-wordmark,.sr-gate-wordmark{display:flex;align-items:center;gap:8px}.sr-footer-wordmark b{color:var(--text)}.sr-gate-wordmark{margin-bottom:30px}.sr-gate-wordmark>span{font-size:46px}.sr-gate-wordmark b{font-size:36px;color:#fff}.sr-gate-content>img{display:none}@media(max-width:760px){.sr-brand-wordmark b{font-size:22px}.sr-brand-wordmark>span{font-size:27px}.sr-gate-wordmark{margin-bottom:24px}.sr-gate-wordmark b{font-size:29px}.sr-gate-wordmark>span{font-size:38px}}