@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap";:root{--primary: #00f0ff;--secondary: #b000ff;--accent: #ff00aa;--bg: #0a0a12;--bg-secondary: #12121f;--card-bg: rgba(15,15,30,.8);--x-color: #00f0ff;--o-color: #ff00aa;--x-glow: 0 0 15px rgba(0,240,255,.6), 0 0 40px rgba(0,240,255,.2);--o-glow: 0 0 15px rgba(255,0,170,.6), 0 0 40px rgba(255,0,170,.2)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:Inter,-apple-system,sans-serif;background:var(--bg);color:#e0e0e0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:var(--bg);transition:background .6s ease}.ambient-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;transition:background 1s ease}.orb-1{width:600px;height:600px;top:-200px;right:-200px;animation:orbFloat1 15s ease-in-out infinite}.orb-2{width:500px;height:500px;bottom:-150px;left:-150px;animation:orbFloat2 18s ease-in-out infinite}@keyframes orbFloat1{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-30px,40px) scale(1.1)}66%{transform:translate(20px,-20px) scale(.95)}}@keyframes orbFloat2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(40px,-30px) scale(1.05)}66%{transform:translate(-20px,30px) scale(1.1)}}.screen-container{position:relative;z-index:1;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.screen-container::-webkit-scrollbar{display:none}.screen-enter{animation:screenIn .4s cubic-bezier(.16,1,.3,1) forwards}.screen-exit{animation:screenOut .3s cubic-bezier(.55,0,1,.45) forwards}@keyframes screenIn{0%{opacity:0;transform:translateY(20px) scale(.98);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes screenOut{0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}to{opacity:0;transform:translateY(-10px) scale(.98);filter:blur(4px)}}.home-screen{display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem 6rem;min-height:100vh;min-height:100dvh}.logo-section{margin-top:2rem;margin-bottom:2rem;text-align:center}.logo-glow{display:inline-block;padding:1.5rem 2.5rem;border-radius:1.5rem;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.06);animation:logoPulse 3s ease-in-out infinite}@keyframes logoPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.logo-text{font-family:Orbitron,monospace;font-size:3.5rem;font-weight:900;letter-spacing:.15em;line-height:1;animation:logoGlow 4s ease-in-out infinite}@keyframes logoGlow{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}.logo-t,.logo-i,.logo-c{display:inline-block;animation:letterFloat 3s ease-in-out infinite}.logo-i{animation-delay:.2s}.logo-c{animation-delay:.4s}@keyframes letterFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.logo-subtitle{font-family:Orbitron,monospace;font-size:1.8rem;font-weight:700;letter-spacing:.3em;margin-top:.25rem}.logo-tagline{font-family:Inter,sans-serif;font-size:.65rem;letter-spacing:.5em;color:#ffffff4d;margin-top:.5rem}.player-card{display:flex;align-items:center;gap:1rem;width:100%;max-width:360px;padding:1rem 1.25rem;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid;border-radius:1rem;margin-bottom:2rem;transition:all .3s ease}.player-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px #0000004d}.player-avatar{width:48px;height:48px;border-radius:50%;border:2px solid;display:grid;place-items:center;font-size:1.5rem;background:#0000004d;flex-shrink:0}.player-info{flex:1;display:flex;flex-direction:column;gap:.15rem}.player-name{font-family:Orbitron,monospace;font-size:.85rem;font-weight:600;color:#fff}.player-rank{font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}.level-badge{font-family:Orbitron,monospace;font-size:.65rem;font-weight:700;padding:.3rem .6rem;border-radius:.5rem;color:#000;letter-spacing:.05em}.modes-section{width:100%;max-width:360px}.section-title{font-family:Orbitron,monospace;font-size:.65rem;font-weight:600;letter-spacing:.25em;margin-bottom:1rem}.modes-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.mode-card{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1.25rem .75rem;background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);border-radius:1rem;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;color:#e0e0e0;font-family:inherit}.mode-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--mode-accent, var(--primary))10,transparent);opacity:0;transition:opacity .3s ease}.mode-card:hover:before{opacity:1}.mode-card:hover{transform:translateY(-3px);border-color:var(--mode-accent, var(--primary))40;box-shadow:0 10px 30px #0006,0 0 20px var(--mode-accent, var(--primary)) 15}.mode-card:active{transform:translateY(0) scale(.97)}.mode-icon{font-size:2rem;position:relative;z-index:1}.mode-name{font-family:Orbitron,monospace;font-size:.75rem;font-weight:700;letter-spacing:.05em;color:#fff;position:relative;z-index:1}.mode-desc{font-size:.6rem;color:#fff6;position:relative;z-index:1}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:.75rem 1rem;padding-bottom:max(.75rem,env(safe-area-inset-bottom));background:#0a0a12d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.06);z-index:100}.nav-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:none;border:none;cursor:pointer;padding:.5rem 1rem;border-radius:.75rem;transition:all .2s ease;color:#888;font-family:inherit}.nav-btn:hover{color:#fff;background:#ffffff0d}.nav-icon{font-size:1.25rem}.nav-label{font-size:.6rem;font-weight:500;letter-spacing:.05em}.game-screen{display:flex;flex-direction:column;align-items:center;padding:1.5rem 1.5rem 6rem;min-height:100vh;min-height:100dvh}.score-section{display:flex;align-items:center;gap:1rem;width:100%;max-width:360px;margin-bottom:1.5rem}.score-card{flex:1;display:flex;align-items:center;gap:.6rem;padding:.75rem;background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);border-radius:.75rem;position:relative;transition:all .3s ease}.score-card.active{border-color:#ffffff26;transform:scale(1.03)}.turn-indicator{position:absolute;bottom:-3px;left:50%;transform:translate(-50%);width:30px;height:3px;border-radius:2px;animation:turnPulse 1.5s ease-in-out infinite}@keyframes turnPulse{0%,to{opacity:1;transform:translate(-50%) scaleX(1)}50%{opacity:.6;transform:translate(-50%) scaleX(.7)}}.score-avatar{width:36px;height:36px;border-radius:50%;border:2px solid;display:grid;place-items:center;background:#0006;font-family:Orbitron,monospace;font-weight:800;font-size:.9rem;flex-shrink:0}.score-info{display:flex;flex-direction:column;gap:.1rem;min-width:0}.score-name{font-size:.65rem;color:#fff9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-value{font-family:Orbitron,monospace;font-size:1.25rem;font-weight:800}.score-vs{display:flex;flex-direction:column;align-items:center;gap:.1rem}.vs-text{font-family:Orbitron,monospace;font-size:.7rem;font-weight:700;color:#ffffff4d;letter-spacing:.1em}.draw-count{font-size:.55rem;color:#ffffff40}.game-status{font-family:Orbitron,monospace;font-size:.8rem;font-weight:600;letter-spacing:.1em;margin-bottom:1.5rem;min-height:1.5rem;text-align:center}.status-win{animation:winPulse 1s ease-in-out infinite alternate}@keyframes winPulse{0%{opacity:.8;transform:scale(1)}to{opacity:1;transform:scale(1.05)}}.thinking-dots:after{content:"";animation:dots 1.5s steps(4) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.board-container{position:relative;width:100%;max-width:340px;aspect-ratio:1;margin-bottom:1.5rem}.board-glass{width:100%;height:100%;border-radius:1.5rem;padding:1rem;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);position:relative;transition:box-shadow .5s ease}.board-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.5rem;width:100%;height:100%}.cell{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;cursor:pointer;display:grid;place-items:center;transition:all .2s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;font-family:inherit;color:inherit}.cell:not(.filled):not(:disabled):hover{background:var(--cell-hover-glow, rgba(0,240,255,.08));border-color:#ffffff26;transform:scale(1.03);box-shadow:inset 0 0 20px #0003}.cell:not(.filled):not(:disabled):active{transform:scale(.96)}.cell.filled{cursor:default}.cell.win-cell{animation:winCellPulse 1s ease-in-out infinite alternate}@keyframes winCellPulse{0%{background:#ffffff0d}to{background:#ffffff1f}}.symbol{font-family:Orbitron,monospace;font-weight:900;font-size:2.5rem;line-height:1;-webkit-user-select:none;user-select:none}.symbol-appear{animation:symbolDrop .4s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes symbolDrop{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.15) rotate(5deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.symbol-x{animation:xGlow 2s ease-in-out infinite alternate}@keyframes xGlow{0%{filter:brightness(1)}to{filter:brightness(1.3)}}.symbol-o{animation:oGlow 2s ease-in-out infinite alternate;animation-delay:1s}@keyframes oGlow{0%{filter:brightness(1)}to{filter:brightness(1.3)}}@keyframes winLineGlow{0%{opacity:.8;filter:brightness(1)}to{opacity:1;filter:brightness(1.5)}}.victory-particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:20}.particle{position:absolute;width:6px;height:6px;border-radius:50%;animation:particleBurst 2s ease-out forwards}@keyframes particleBurst{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--tx, 0),var(--ty, 0)) scale(0);opacity:0}}.particle:nth-child(odd){--tx: 80px;--ty: -60px}.particle:nth-child(2n){--tx: -70px;--ty: -50px}.particle:nth-child(3n){--tx: 50px;--ty: 70px}.particle:nth-child(4n){--tx: -90px;--ty: 30px}.particle:nth-child(5n){--tx: 60px;--ty: -80px}.particle:nth-child(7n){--tx: -40px;--ty: -70px}.particle:nth-child(8n){--tx: 80px;--ty: 40px}.particle:nth-child(9n){--tx: -60px;--ty: 60px}.particle:nth-child(10n){--tx: 30px;--ty: -90px}.reactions-bar{display:flex;gap:.5rem;margin-bottom:1rem}.reaction-btn{width:40px;height:40px;border-radius:50%;background:var(--card-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);font-size:1.1rem;cursor:pointer;transition:all .2s ease;display:grid;place-items:center;font-family:inherit;color:inherit}.reaction-btn:hover{transform:scale(1.15);background:#ffffff1a}.reaction-btn:active{transform:scale(.9)}.reaction-float{position:fixed;font-size:2.5rem;left:50%;top:40%;transform:translate(-50%);z-index:200;pointer-events:none}@keyframes floatUp{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-100px) scale(1.5)}}.game-controls{display:flex;gap:1rem}.btn-secondary,.btn-primary{padding:.75rem 1.5rem;border-radius:.75rem;font-family:Orbitron,monospace;font-size:.7rem;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);border:none;display:flex;align-items:center;gap:.5rem;color:inherit}.btn-secondary{background:var(--card-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);color:#aaa}.btn-secondary:hover{background:#ffffff14;color:#fff;transform:translateY(-2px)}.btn-primary{color:#000;font-weight:700}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0006}.btn-primary:active{transform:translateY(0) scale(.97)}.btn-icon{font-size:1rem}.ai-select-screen,.leaderboard-screen,.profile-screen,.settings-screen,.stats-screen{padding:2rem 1.5rem 3rem;min-height:100vh;min-height:100dvh}.back-btn{background:none;border:none;color:#ffffff80;font-family:Inter,sans-serif;font-size:.8rem;cursor:pointer;padding:.5rem 0;transition:color .2s;margin-bottom:1.5rem}.back-btn:hover{color:#fff}.screen-title{font-family:Orbitron,monospace;font-size:1.5rem;font-weight:800;letter-spacing:.05em;margin-bottom:.3rem}.screen-subtitle{font-size:.8rem;color:#fff6;margin-bottom:2rem}.difficulty-list{display:flex;flex-direction:column;gap:.75rem;max-width:400px}.difficulty-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);border-radius:1rem;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);color:#e0e0e0;font-family:inherit}.difficulty-card:hover{transform:translate(6px);border-color:var(--diff-accent, var(--primary))40;box-shadow:0 0 20px var(--diff-accent, var(--primary)) 10}.difficulty-card:active{transform:translate(3px) scale(.98)}.diff-icon{font-size:2rem;width:48px;text-align:center}.diff-info{flex:1;display:flex;flex-direction:column;gap:.15rem}.diff-name{font-family:Orbitron,monospace;font-size:.85rem;font-weight:700;color:#fff}.diff-desc{font-size:.7rem;color:#fff6}.diff-stars{display:flex;gap:.15rem}.star{font-size:.9rem;color:#ffffff26}.star.filled{animation:starPop .3s ease-out forwards}@keyframes starPop{0%{transform:scale(0)}60%{transform:scale(1.3)}to{transform:scale(1)}}.leaderboard-list{display:flex;flex-direction:column;gap:.6rem;max-width:400px}.lb-card{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);border-radius:1rem;transition:all .3s ease;animation:lbSlideIn .5s cubic-bezier(.16,1,.3,1) forwards;opacity:0;transform:translate(-20px)}@keyframes lbSlideIn{to{opacity:1;transform:translate(0)}}.lb-card.top-three{border-color:var(--lb-accent, rgba(255,255,255,.1));background:linear-gradient(135deg,var(--card-bg),rgba(255,255,255,.04))}.lb-rank{font-family:Orbitron,monospace;font-size:.9rem;font-weight:800;min-width:36px}.lb-avatar{font-size:1.5rem;width:36px;text-align:center}.lb-info{flex:1;display:flex;align-items:center;gap:.4rem}.lb-name{font-family:Orbitron,monospace;font-size:.75rem;font-weight:600;color:#fff}.lb-badge{font-size:.9rem}.lb-stats{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}.lb-points{font-family:Orbitron,monospace;font-size:.85rem;font-weight:700}.lb-wins{font-size:.6rem;color:#fff6}.profile-header{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.06)}.profile-avatar-lg{width:80px;height:80px;border-radius:50%;border:3px solid;display:grid;place-items:center;font-size:2.5rem;background:#0000004d;margin-bottom:1rem;animation:avatarFloat 4s ease-in-out infinite}@keyframes avatarFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.profile-name{font-family:Orbitron,monospace;font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:.25rem}.profile-rank-title{font-family:Orbitron,monospace;font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem}.xp-bar{width:200px;height:6px;background:#ffffff14;border-radius:3px;overflow:hidden;margin-bottom:.5rem}.xp-fill{height:100%;border-radius:3px;transition:width .5s ease}.xp-label{font-size:.65rem;color:#fff6}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:2rem}.stat-card{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:1rem .5rem;background:var(--card-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid;border-radius:.75rem;transition:all .2s ease}.stat-card:hover{transform:translateY(-2px)}.stat-value{font-family:Orbitron,monospace;font-size:1.3rem;font-weight:800}.stat-label{font-size:.6rem;color:#fff6;letter-spacing:.05em}.achievements-section{margin-top:1rem}.achievements-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.achievement-card{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem .75rem;background:var(--card-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.06);border-radius:.75rem;text-align:center;transition:all .2s ease}.achievement-card.locked{opacity:.5}.achievement-card.unlocked{border-color:#ffffff1f;animation:achUnlock .5s ease-out}@keyframes achUnlock{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.ach-icon{font-size:1.8rem}.ach-name{font-family:Orbitron,monospace;font-size:.6rem;font-weight:600;color:#fff}.ach-desc{font-size:.55rem;color:#fff6;line-height:1.3}.ach-progress{width:100%;height:3px;background:#ffffff0f;border-radius:2px;overflow:hidden;margin-top:.3rem}.ach-progress-fill{height:100%;border-radius:2px;transition:width .5s ease}.themes-grid{display:flex;flex-direction:column;gap:.75rem;max-width:400px}.theme-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:2px solid;border-radius:1rem;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);color:#e0e0e0;font-family:inherit}.theme-card:hover{transform:translate(6px)}.theme-card.active{box-shadow:0 0 30px var(--theme-primary, var(--primary)) 20}.theme-preview{display:flex;flex-direction:column;gap:.4rem;align-items:center}.theme-swatch{width:40px;height:40px;border-radius:.5rem}.theme-board-mini{display:flex;gap:.3rem;font-family:Orbitron,monospace;font-size:.6rem;font-weight:800}.theme-name{flex:1;font-family:Orbitron,monospace;font-size:.8rem;font-weight:600;color:#fff}.theme-active-badge{font-size:.7rem;font-weight:600}.stats-overview{display:flex;align-items:center;gap:2rem;margin-bottom:2rem;padding:1.5rem;background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);border-radius:1rem}.big-stat{display:flex;flex-direction:column;align-items:center;gap:.25rem}.big-stat-value{font-family:Orbitron,monospace;font-size:2.5rem;font-weight:900}.big-stat-label{font-size:.7rem;color:#fff6}.win-rate-ring{position:relative;width:100px;height:100px;flex-shrink:0}.ring-svg{width:100%;height:100%}.ring-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.ring-value{font-family:Orbitron,monospace;font-size:1.2rem;font-weight:800}.ring-label{font-size:.55rem;color:#fff6}.stats-detail-grid{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.detail-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--card-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.06);border-radius:.75rem}.detail-bar{flex:1;height:8px;background:#ffffff0f;border-radius:4px;overflow:hidden}.detail-fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.16,1,.3,1)}.detail-label{font-size:.7rem;color:#ffffff80;min-width:50px}.detail-value{font-family:Orbitron,monospace;font-size:1rem;font-weight:700;min-width:40px;text-align:right}.streak-section{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.streak-card{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1.25rem .5rem;background:var(--card-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid;border-radius:.75rem}.streak-icon{font-size:1.5rem}.streak-value{font-family:Orbitron,monospace;font-size:1.5rem;font-weight:800}.streak-label{font-size:.55rem;color:#fff6;text-align:center}@media(max-width:380px){.logo-text{font-size:2.8rem}.logo-subtitle{font-size:1.4rem}.modes-grid{gap:.5rem}.mode-card{padding:1rem .5rem}.symbol{font-size:2rem}.stats-grid{grid-template-columns:repeat(2,1fr)}.achievements-grid,.streak-section{grid-template-columns:1fr}}@media(min-width:768px){.home-screen,.game-screen,.ai-select-screen,.leaderboard-screen,.profile-screen,.settings-screen,.stats-screen{max-width:480px;margin:0 auto}.board-container{max-width:380px}}