:root{--void:#06060c;--surface:#0d0d18;--surface-raised:#141425;--surface-glass:rgba(20,20,42,.6);--border-subtle:hsla(0,0%,100%,.06);--border-glow:hsla(0,0%,100%,.12);--neon-cyan:#00f0ff;--neon-magenta:#ff2d7b;--neon-lime:#b8ff00;--neon-violet:#8b5cf6;--neon-amber:#ffb800;--neon-coral:#ff6b6b;--grad-primary:linear-gradient(135deg,#00f0ff,#8b5cf6 50%,#ff2d7b);--grad-warm:linear-gradient(135deg,#ffb800,#ff2d7b);--grad-cool:linear-gradient(135deg,#00f0ff,#8b5cf6);--grad-surface:linear-gradient(180deg,#0d0d18,#06060c);--font-display:"Bricolage Grotesque",sans-serif;--font-body:"Figtree",sans-serif;--safe-zone:5%;--radius-sm:12px;--radius-md:20px;--radius-lg:32px;--radius-xl:48px;--glow-cyan:0 0 40px rgba(0,240,255,.3),0 0 80px rgba(0,240,255,.1);--glow-magenta:0 0 40px rgba(255,45,123,.3),0 0 80px rgba(255,45,123,.1);--glow-violet:0 0 40px rgba(139,92,246,.3),0 0 80px rgba(139,92,246,.1);--shadow-card:0 8px 32px rgba(0,0,0,.5),inset 0 1px 0 hsla(0,0%,100%,.05)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--void);color:#e8e8f0;font-family:var(--font-body);min-height:100vh;overflow-x:hidden}.atmosphere{inset:0;overflow:hidden;pointer-events:none;position:fixed;z-index:0}.atmosphere:before{animation:drift 25s ease-in-out infinite;background:radial-gradient(ellipse,rgba(139,92,246,.08) 0,transparent 70%);content:"";height:80vh;left:-20%;position:absolute;top:-30%;width:80vw}.atmosphere:after{animation:drift 30s ease-in-out infinite reverse;background:radial-gradient(ellipse,rgba(0,240,255,.06) 0,transparent 70%);bottom:-20%;content:"";height:70vh;position:absolute;right:-15%;width:70vw}@keyframes drift{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(5%,-3%) rotate(2deg)}66%{transform:translate(-3%,5%) rotate(-1deg)}}.grain{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");background-size:256px 256px;inset:0;opacity:.025;pointer-events:none;position:fixed;z-index:1}.tv-safe{min-height:100vh;padding:var(--safe-zone);position:relative;z-index:2}.glass-card{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.glass-card,.glass-card-sm{background:var(--surface-glass);box-shadow:var(--shadow-card)}.glass-card-sm{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.heading-mega{font-family:var(--font-display);font-size:clamp(3rem,6vw,7rem);font-weight:800;letter-spacing:-.03em;line-height:.95}.heading-xl{font-size:clamp(2rem,4vw,4.5rem);letter-spacing:-.02em;line-height:1.05}.heading-lg,.heading-xl{font-family:var(--font-display);font-weight:700}.heading-lg{font-size:clamp(1.5rem,3vw,3rem);letter-spacing:-.01em;line-height:1.1}.heading-md{font-family:var(--font-display);font-size:clamp(1.2rem,2vw,2rem);font-weight:600;line-height:1.2}.text-gradient{background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-glow-cyan{color:var(--neon-cyan);text-shadow:0 0 20px rgba(0,240,255,.5)}.text-glow-magenta{color:var(--neon-magenta);text-shadow:0 0 20px rgba(255,45,123,.5)}.btn-neon{align-items:center;border:none;border-radius:var(--radius-xl);cursor:pointer;display:inline-flex;font-family:var(--font-display);font-size:1.1rem;font-weight:700;gap:.5em;justify-content:center;overflow:hidden;padding:1em 2.2em;position:relative;transition:transform .2s ease,box-shadow .3s ease}.btn-neon:active{transform:scale(.96)}.btn-primary{background:var(--grad-primary);box-shadow:0 4px 30px #00f0ff4d,0 4px 15px #8b5cf633;color:#fff}.btn-primary:hover{box-shadow:0 6px 40px #00f0ff80,0 6px 25px #8b5cf64d;transform:translateY(-2px)}.option-btn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--surface-glass);border:2px solid var(--border-glow);border-radius:var(--radius-md);color:#e8e8f0;cursor:pointer;font-family:var(--font-display);font-size:1.15rem;font-weight:600;overflow:hidden;padding:1.2em;position:relative;text-align:left;transition:all .2s ease;width:100%}.option-btn:before{border-radius:inherit;content:"";inset:0;opacity:0;position:absolute;transition:opacity .2s ease}.option-btn:active{transform:scale(.97)}.option-btn[data-color=A]{border-color:#00f0ff4d}.option-btn[data-color=A]:hover{border-color:var(--neon-cyan);box-shadow:var(--glow-cyan)}.option-btn[data-color=A]:before{background:linear-gradient(135deg,rgba(0,240,255,.1),transparent)}.option-btn[data-color=A]:hover:before{opacity:1}.option-btn[data-color=B]{border-color:#ff2d7b4d}.option-btn[data-color=B]:hover{border-color:var(--neon-magenta);box-shadow:var(--glow-magenta)}.option-btn[data-color=B]:before{background:linear-gradient(135deg,rgba(255,45,123,.1),transparent)}.option-btn[data-color=B]:hover:before{opacity:1}.option-btn[data-color=C]{border-color:#b8ff004d}.option-btn[data-color=C]:hover{border-color:var(--neon-lime);box-shadow:0 0 40px #b8ff004d}.option-btn[data-color=C]:before{background:linear-gradient(135deg,rgba(184,255,0,.1),transparent)}.option-btn[data-color=C]:hover:before{opacity:1}.option-btn[data-color=D]{border-color:#ffb8004d}.option-btn[data-color=D]:hover{border-color:var(--neon-amber);box-shadow:0 0 40px #ffb8004d}.option-btn[data-color=D]:before{background:linear-gradient(135deg,rgba(255,184,0,.1),transparent)}.option-btn[data-color=D]:hover:before{opacity:1}.option-btn.selected{transform:scale(.97)}.option-btn[data-color=A].selected{background:#00f0ff26;border-color:var(--neon-cyan)}.option-btn[data-color=B].selected{background:#ff2d7b26;border-color:var(--neon-magenta)}.option-btn[data-color=C].selected{background:#b8ff0026;border-color:var(--neon-lime)}.option-btn[data-color=D].selected{background:#ffb80026;border-color:var(--neon-amber)}.option-btn.correct{background:#b8ff0033!important;border-color:var(--neon-lime)!important;box-shadow:0 0 40px #b8ff004d!important}.option-btn.wrong{background:#ff6b6b33!important;border-color:var(--neon-coral)!important;opacity:.7}.timer-ring{align-items:center;display:inline-flex;justify-content:center;position:relative}.timer-ring svg{transform:rotate(-90deg)}.timer-ring .track{fill:none;stroke:#ffffff0f}.timer-ring .progress{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s ease}.timer-ring .value{color:#fff;font-family:var(--font-display);font-weight:800;position:absolute}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse-glow{0%,to{opacity:.6}50%{opacity:1}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.animate-fade-up{animation:fadeInUp .7s cubic-bezier(.16,1,.3,1) both}.animate-fade-in{animation:fadeIn .5s ease both}.animate-scale-in{animation:scaleIn .5s cubic-bezier(.16,1,.3,1) both}.animate-float{animation:float 4s ease-in-out infinite}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.delay-6{animation-delay:.6s}.delay-7{animation-delay:.7s}.delay-8{animation-delay:.8s}.score-pill{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--surface-glass);border:1px solid var(--border-subtle);border-radius:100px;display:inline-flex;font-family:var(--font-display);font-size:.95rem;gap:.4em;padding:.4em 1em}.player-avatar,.score-pill{align-items:center;font-weight:700}.player-avatar{border-radius:50%;display:flex;flex-shrink:0;font-size:1.3rem;height:48px;justify-content:center;width:48px}.category-badge{align-items:center;background:#8b5cf626;border:1px solid rgba(139,92,246,.3);border-radius:100px;color:var(--neon-violet);display:inline-flex;font-family:var(--font-display);font-size:.85rem;font-weight:600;gap:.4em;letter-spacing:.08em;padding:.35em 1em;text-transform:uppercase}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}@media(max-width:768px){.tv-safe{padding:1rem}}
