:root{--wot-void: #000000;--wot-surface: #111111;--wot-elevated: #1A1A1A;--wot-border: #222222;--wot-subtle: #2A2A2A;--wot-text: #FFFFFF;--wot-text-secondary: #A1A1AA;--wot-text-muted: #52525B;--wot-violet: #8B5CF6;--wot-violet-glow: rgba(139, 92, 246, .06);--wot-violet-border: rgba(139, 92, 246, .4);--wot-teal: #14B8A6;--wot-teal-glow: rgba(20, 184, 166, .06);--wot-teal-border: rgba(20, 184, 166, .4);--wot-coral: #F43F5E;--wot-coral-glow: rgba(244, 63, 94, .06);--wot-coral-border: rgba(244, 63, 94, .4);--realm-arena: #EF4444;--realm-eureka: #06B6D4;--realm-chronicles: #F59E0B;--realm-atlas: #10B981;--realm-spotlight: #8B5CF6;--realm-soundwave: #EC4899;--realm-feast: #F97316;--realm-cosmos: #3B82F6;--realm-enigma: #D97706;--realm-nexus: #2DD4BF;--realm-active: var(--wot-violet);--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", monospace;--text-logo: clamp(3rem, 10vw, 5rem);--text-screen-title: 2rem;--text-question: 1.375rem;--text-heading: 1.125rem;--text-body: 1rem;--text-caption: .875rem;--text-micro: .75rem;--text-score-lg: 1.75rem;--text-score-md: 1.25rem;--text-code: .875rem;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-black: 900;--tracking-tight: -.03em;--tracking-normal: 0;--tracking-wide: .05em;--tracking-wider: .1em;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 9999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--duration-instant: .12s;--duration-fast: .2s;--duration-normal: .35s;--duration-slow: .6s;--duration-dramatic: 1s;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--z-base: 0;--z-elevated: 10;--z-sticky: 20;--z-overlay: 50;--z-modal: 100;--timer-safe: var(--wot-teal);--timer-warning: var(--wot-violet);--timer-critical: var(--wot-coral);--timer-height: 4px;--nav-height: 72px;--scoreboard-height: 48px;--answer-min-height: 64px;--avatar-size: 80px;--avatar-size-sm: 44px;--accent-bar-width: 8px;--letter-badge-size: 24px;--touch-target: 44px}@media (prefers-reduced-motion: reduce){:root{--duration-instant: 0ms;--duration-fast: 0ms;--duration-normal: 0ms;--duration-slow: 0ms;--duration-dramatic: 0ms}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-sans);background:#000;color:#fff;min-height:100vh;min-height:100dvh;overflow-x:hidden;line-height:1.4}#root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.text-mono{font-family:var(--font-mono)}.text-center{text-align:center}.page-home{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;height:100dvh;padding:12px 20px 68px;gap:10px;overflow:hidden}.wot-logo{font-family:var(--font-sans);font-size:clamp(2.5rem,10vh,7rem);font-weight:900;font-style:italic;letter-spacing:-.03em;line-height:.85;-webkit-user-select:none;user-select:none;text-align:center;margin:0;flex-shrink:1;display:flex;justify-content:center;gap:0;cursor:default}.wot-letter{display:inline-block;background:linear-gradient(135deg,#fff,#8b5cf6,#14b8a6,#f59e0b,#fff);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:logo-shimmer 6s ease-in-out infinite;transition:transform .2s ease}.wot-letter:nth-child(1){animation-delay:0s}.wot-letter:nth-child(2){animation-delay:.3s}.wot-letter:nth-child(3){animation-delay:.6s}.wot-logo:hover .wot-letter{transform:translateY(-4px) scale(1.05)}.wot-subtitle{font-family:var(--font-mono);font-size:.55rem;color:#333;letter-spacing:.3em;text-transform:uppercase;text-align:center;flex-shrink:0}@keyframes logo-shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.home-setup{width:100%;max-width:420px;display:flex;flex-direction:column;gap:6px;flex-shrink:0}.home-name-input{width:100%;background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:10px 16px;color:#fff;font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:.08em;outline:none;text-align:center;transition:border-color .2s}.home-name-input::placeholder{color:#444}.home-name-input:focus{border-color:#8b5cf6}.home-qcount{display:flex;gap:6px;justify-content:center}.qcount-btn{background:#111;border:1px solid #2a2a2a;border-radius:6px;padding:4px 12px;color:#555;font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:3px}.qcount-btn.active{background:#1a1a2e;border-color:#8b5cf6;color:#fff}.qcount-star{color:#f59e0b;font-size:9px}.home-actions{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px;flex:1;min-height:0;justify-content:center}.action-card{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px 16px 28px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:16px;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s ease,border-color .15s ease;-webkit-tap-highlight-color:transparent;flex-shrink:1}.action-card:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:8px;border-radius:0 6px 6px 0;background:var(--accent-color, #8B5CF6)}.action-card:hover{transform:translateY(-2px);border-color:#3a3a3a}.action-card:active{transform:scale(.98)}.action-card:disabled{opacity:.3;pointer-events:none}.action-card-label{font-family:var(--font-sans);font-weight:900;font-size:clamp(1rem,3.5vw,1.5rem);text-transform:uppercase;letter-spacing:.02em;color:#fff}.action-card-icon{width:22px;height:22px;color:#666;flex-shrink:0}.home-join{flex-shrink:0;display:flex;justify-content:center}.home-join-row{display:flex;gap:8px;width:100%;max-width:300px}.live-ticker{width:100%;max-width:480px;overflow:hidden;flex-shrink:0;position:relative;height:20px;mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%)}.live-ticker-track{display:flex;gap:40px;white-space:nowrap;animation:ticker-scroll 40s linear infinite;will-change:transform}.live-ticker-item{font-family:var(--font-mono);font-size:.65rem;color:#444;letter-spacing:.04em;flex-shrink:0;text-transform:uppercase}.live-ticker-item strong{color:#888;font-weight:700}.ticker-realm{color:#8b5cf6;font-weight:700}@keyframes ticker-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:clamp(32px,8vw,80px);align-items:center;height:72px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 30%,#000 100%);z-index:100;padding-bottom:env(safe-area-inset-bottom,0)}.nav-item{background:none;border:none;cursor:pointer;padding:8px 16px;display:flex;align-items:center;justify-content:center;color:#555;transition:color .2s;-webkit-tap-highlight-color:transparent}.nav-item:hover{color:#888}.nav-item.active{color:#14b8a6}.nav-item.disabled{opacity:.25;pointer-events:none}.nav-icon{width:26px;height:26px}.nav-volume-btn{position:absolute;top:-2px;right:-6px;background:#222;border:1px solid #333;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:#888;cursor:pointer;padding:0;font-size:0}.volume-popup{position:absolute;bottom:56px;right:-20px;background:#111;border:1px solid #333;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:200}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100px;height:4px;background:#333;border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#8b5cf6;cursor:pointer}.volume-label{font-family:var(--font-mono);font-size:.6rem;color:#666;font-weight:600}.page-lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:24px;gap:24px}.room-code{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:#14b8a6;letter-spacing:.1em}.radar-container{position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center}.radar-ring{position:absolute;border:2px solid rgba(139,92,246,.6);border-radius:50%;animation:radar-pulse 3s ease-out infinite}.radar-ring:nth-child(1){width:40px;height:40px;animation-delay:0s}.radar-ring:nth-child(2){width:70px;height:70px;animation-delay:.25s}.radar-ring:nth-child(3){width:100px;height:100px;animation-delay:.5s}.radar-ring:nth-child(4){width:140px;height:140px;animation-delay:.75s}.radar-ring:nth-child(5){width:180px;height:180px;animation-delay:1s}.radar-ring:nth-child(6){width:220px;height:220px;animation-delay:1.25s}.radar-ring:nth-child(7){width:260px;height:260px;animation-delay:1.5s}.radar-ring:nth-child(8){width:300px;height:300px;animation-delay:1.75s}.radar-ring:nth-child(9){width:340px;height:340px;animation-delay:2s}.radar-ring:nth-child(10){width:380px;height:380px;animation-delay:2.25s}@keyframes radar-pulse{0%{opacity:.8;transform:scale(.95)}50%{opacity:.4}to{opacity:0;transform:scale(1.15)}}.radar-center{width:14px;height:14px;border-radius:50%;background:#8b5cf6;z-index:2}.lobby-status{font-size:1.1rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff}.lobby-queue{font-family:var(--font-mono);font-size:.9rem;color:#666}.lobby-wait{font-family:var(--font-mono);font-size:.9rem;color:#555}.page-game{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:0}.timer-bar{width:100%;height:6px;background:#111;position:fixed;top:0;left:0;z-index:200}.timer-bar-fill{height:100%;border-radius:0 3px 3px 0;transition:width .1s linear;background:linear-gradient(90deg,#14b8a6,#f43f5e,#8b5cf6)}.scoreboard{display:flex;align-items:center;justify-content:center;gap:20px;padding:28px 20px 20px;width:100%;max-width:600px;margin:0 auto}.scoreboard-player{display:flex;align-items:baseline;gap:8px}.scoreboard-name{font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.05em}.scoreboard-score{font-family:var(--font-mono);font-weight:700;font-size:1.2rem}.scoreboard-round{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:#999;background:#1a1a1a;padding:6px 16px;border-radius:30px}.realm-tag{display:inline-block;font-size:1.25rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#14b8a6;padding:0 40px;margin-top:24px}.question-text{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:#fff;line-height:1.15;padding:0 40px;margin-top:24px}.game-content-wrapper{max-width:1200px;margin:0 auto;width:100%;display:flex;flex-direction:column;flex:1}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 40px 40px;width:100%;max-width:1000px;margin:0 auto;flex:1;align-content:end}.answer-card{display:flex;align-items:center;justify-content:flex-start;min-height:clamp(80px,10vh,120px);text-align:left;gap:24px;padding:20px 24px;background:#1a1a1a;border:3px solid #2a2a2a;border-radius:24px;cursor:pointer;font-size:clamp(1rem,1.5vw,1.5rem);font-weight:700;color:#fff;transition:border-color .15s,background .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}.answer-card:hover{border-color:#444}.answer-card.answer-selected{border-color:#8b5cf6;box-shadow:0 0 20px #8b5cf633,inset 0 0 20px #8b5cf60d}.answer-card.answer-correct{border-color:#14b8a6;background:#14b8a61a}.answer-card.answer-wrong{border-color:#f43f5e;background:#f43f5e1a}.answer-card.answer-locked{opacity:.35;pointer-events:none}.letter-badge{font-weight:800;font-size:clamp(1.5rem,2vw,2rem);color:#8b5cf6;min-width:32px}.opponent-indicator{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:0 24px;color:#14b8a6;font-size:.85rem;font-weight:500}.opponent-dot{width:8px;height:8px;border-radius:50%;background:#14b8a6}.countdown-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:500}.countdown-number{font-size:8rem;font-weight:900;color:#fff;animation:countdown-pop .5s ease-out}@keyframes countdown-pop{0%{opacity:0;transform:scale(2)}60%{opacity:1}to{transform:scale(1)}}.page-results{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;height:100dvh;padding:16px 20px;gap:12px;overflow:hidden}.result-header{font-size:.7rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:#555}.result-outcome{font-size:clamp(2.5rem,10vh,5rem);font-weight:900;font-style:italic;color:#fff;letter-spacing:-.02em;line-height:1;position:relative;padding-bottom:8px;margin:0}.result-outcome:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#8b5cf6;border-radius:2px}.result-score-block{display:flex;flex-direction:column;align-items:center;gap:2px}.result-player-name{font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#666}.result-player-score{font-family:var(--font-mono);font-weight:800;font-size:1.8rem;line-height:1;color:#fff}.stat-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%;max-width:360px}.stat-card{background:#111;border:1px solid #222;border-radius:12px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:3px}.stat-value{font-family:var(--font-mono);font-weight:700;font-size:1.2rem}.stat-label{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#555}.result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.page-realms{display:flex;flex-direction:column;align-items:center;height:100vh;height:100dvh;padding:12px 20px;gap:10px;overflow:hidden}.screen-title{font-size:clamp(1.8rem,6vw,3rem);font-weight:900;font-style:italic;color:#fff;letter-spacing:-.02em;line-height:1;flex-shrink:0}.realm-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:100%;max-width:800px;flex:1;min-height:0;align-content:center}.realm-card{display:flex;align-items:center;padding:10px 12px 10px 22px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .15s,transform .15s;-webkit-tap-highlight-color:transparent;gap:8px}.realm-card:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:6px;border-radius:0 4px 4px 0;background:var(--realm-color, #8B5CF6)}.realm-card:hover{border-color:#3a3a3a;transform:translateY(-1px)}.realm-card:active{transform:scale(.98)}.realm-card.realm-selected{border-color:var(--realm-color, #8B5CF6)}.realm-card-content{display:flex;flex-direction:column;flex:1;text-align:left;gap:2px;min-width:0}.realm-card-name{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:#fff}.realm-card-desc{font-size:.7rem;font-weight:500;color:#666;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.realm-card-icon{width:20px;height:20px;color:var(--realm-color, #666);flex-shrink:0}.page-profile{display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100dvh;padding:24px 24px 96px;gap:28px}.avatar{width:100px;height:100px;border-radius:50%;border:3px solid #8B5CF6;background:#1a1a1a;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:#8b5cf6}.profile-name{font-size:1.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.profile-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;width:100%;max-width:420px}.stat-card.stat-teal{background:#14b8a61a;border-color:#14b8a633}.stat-card.stat-neutral{background:#111;border-color:#222}.stat-card.stat-violet{background:#8b5cf61a;border-color:#8b5cf633}.match-section{width:100%;max-width:420px}.match-section-title{font-family:var(--font-mono);font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}.match-row{display:flex;align-items:center;padding:14px 16px;background:#111;border-bottom:1px solid #1a1a1a;gap:12px}.match-row:first-child{border-radius:12px 12px 0 0}.match-row:last-child{border-radius:0 0 12px 12px;border-bottom:none}.match-opponent{font-weight:600;flex:1}.match-score{font-family:var(--font-mono);font-size:.9rem;color:#999}.match-tag{font-family:var(--font-mono);font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:6px;text-transform:uppercase}.match-tag.win{background:#14b8a626;color:#14b8a6}.match-tag.loss{background:#f43f5e26;color:#f43f5e}.mastery-section{width:100%;max-width:420px}.mastery-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.mastery-bar-label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:#666;width:100px;text-align:right}.mastery-bar{flex:1;height:8px;background:#111;border-radius:4px;overflow:hidden}.mastery-bar-fill{height:100%;border-radius:4px;transition:width .3s ease}.mastery-pct{font-family:var(--font-mono);font-size:.7rem;color:#555;width:36px}.btn{font-family:var(--font-sans);font-weight:700;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:14px 28px;border-radius:14px;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent;border:2px solid transparent;background:none;color:#fff}.btn-primary{border-color:#8b5cf6;color:#8b5cf6}.btn-primary:hover{background:#8b5cf61a}.btn-secondary{border-color:#444;color:#aaa}.btn-secondary:hover{border-color:#666;color:#fff}.btn-ghost{border:none;color:#666}.btn-ghost:hover{color:#fff}.btn-full{width:100%}.btn:disabled{opacity:.3;pointer-events:none}.input{background:#111;border:1px solid #333;border-radius:14px;padding:14px 20px;color:#fff;font-family:var(--font-sans);font-size:15px;font-weight:500;outline:none;transition:border-color .2s;width:100%}.input::placeholder{color:#555}.input:focus{border-color:#8b5cf6}.input-code{font-family:var(--font-mono);letter-spacing:.2em;text-align:center;text-transform:uppercase;font-weight:700}.points-float{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:#14b8a6;animation:float-up 1s ease-out}@keyframes float-up{0%{opacity:0;transform:translateY(20px)}30%{opacity:1}to{opacity:0;transform:translateY(-20px)}}.explanation{font-size:.9rem;color:#888;padding:16px 24px;border-left:3px solid #333;max-width:480px}.animate-in{animation:fade-slide-in .3s ease-out both}@keyframes fade-slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-state{padding:48px 24px;text-align:center;color:#555;font-size:.9rem;border:1px solid #1a1a1a;border-radius:12px}@media (max-width: 480px){.answer-grid{padding:16px;gap:10px}}.premium-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.premium-modal{background:#111;border:1px solid #2a2a2a;border-radius:20px;padding:40px 32px;max-width:340px;width:90%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}.premium-modal-star{font-size:48px;color:#f59e0b;line-height:1}.premium-modal-title{font-family:var(--font-sans);font-size:1.5rem;font-weight:900;letter-spacing:.1em;color:#fff;margin:0}.premium-modal-text{font-family:var(--font-sans);font-size:.85rem;color:#888;line-height:1.5;margin:0}.premium-modal-btn{width:100%;padding:14px;background:#f59e0b;border:none;border-radius:10px;color:#000;font-family:var(--font-sans);font-weight:800;font-size:.9rem;letter-spacing:.08em;cursor:pointer;transition:background .2s}.premium-modal-btn:hover{background:#eab308}.premium-modal-close{background:none;border:none;color:#555;font-family:var(--font-sans);font-size:.8rem;letter-spacing:.05em;cursor:pointer;padding:8px;transition:color .2s}.premium-modal-close:hover{color:#999}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}