*{margin:0;padding:0;box-sizing:border-box}body{font-family:Orbitron,Inter,Segoe UI,system-ui,sans-serif;background:linear-gradient(90deg,rgba(0,200,255,.1) 1px,transparent 1px),linear-gradient(180deg,rgba(0,200,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,50,80,.05) 1px,transparent 1px),linear-gradient(180deg,rgba(255,50,80,.05) 1px,transparent 1px),radial-gradient(ellipse at center,#0a0a0f,#000 70%),linear-gradient(135deg,#0a0a0f,#1a1a2e,#16213e);background-size:100px 100px,100px 100px,50px 50px,50px 50px,100% 100%,100% 100%;min-height:100vh;display:flex;justify-content:center;align-items:center;color:#fff;margin:0;padding:0;overflow-x:hidden;animation:gridPulse 8s ease-in-out infinite alternate}.App{width:100%;max-width:1200px;margin:0 auto;padding:20px}.App.fade-out{opacity:0;transition:opacity .25s ease}.App.fade-in{opacity:1;transition:opacity .25s ease}@media (prefers-reduced-motion: reduce){.App.fade-out,.App.fade-in{transition:none}}body.perf-low .App.fade-out,body.perf-low .App.fade-in{transition:none}@keyframes borderGlow{0%{opacity:.6}to{opacity:.9}}@keyframes gridPulse{0%{background-size:100px 100px,100px 100px,50px 50px,50px 50px,100% 100%,100% 100%}to{background-size:120px 120px,120px 120px,60px 60px,60px 60px,100% 100%,100% 100%}}@keyframes titlePulse{0%,to{text-shadow:0 0 15px rgba(255,255,255,.3),0 0 25px rgba(0,200,255,.3)}50%{text-shadow:0 0 25px rgba(255,255,255,.6),0 0 40px rgba(0,200,255,.6)}}@keyframes titlePulseRed{0%,to{text-shadow:0 0 15px rgba(255,255,255,.3),0 0 25px rgba(255,50,80,.6)}50%{text-shadow:0 0 25px rgba(255,255,255,.6),0 0 40px rgba(255,50,80,.9)}}@keyframes titlePulseBlue{0%,to{text-shadow:0 0 15px rgba(255,255,255,.3),0 0 25px rgba(0,200,255,.6)}50%{text-shadow:0 0 25px rgba(255,255,255,.6),0 0 40px rgba(0,200,255,.9)}}@keyframes textFlow{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes textShimmer{0%{background-position:-100% 0}to{background-position:100% 0}}@keyframes currentPlayerGlow{0%,to{border-color:#00c8ff4d;box-shadow:0 0 20px #00c8ff66,0 0 40px #00c8ff33,inset 0 0 20px #00c8ff1a}50%{border-color:#00c8ff99;box-shadow:0 0 30px #00c8ff99,0 0 60px #00c8ff66,inset 0 0 30px #00c8ff33}}@keyframes currentPlayerGlowRed{0%,to{border-color:#ff325099;box-shadow:0 0 20px #ff325066,0 0 40px #ff325033,inset 0 0 20px #ff32501a}50%{border-color:#ff3250e6;box-shadow:0 0 30px #ff325099,0 0 60px #ff325066,inset 0 0 30px #ff325033}}@keyframes currentPlayerGlowBlue{0%,to{border-color:#00c8ff99;box-shadow:0 0 20px #00c8ff66,0 0 40px #00c8ff33,inset 0 0 20px #00c8ff1a}50%{border-color:#00c8ffe6;box-shadow:0 0 30px #00c8ff99,0 0 60px #00c8ff66,inset 0 0 30px #00c8ff33}}@keyframes currentPlayerHalo{0%,to{opacity:.6;filter:blur(8px)}50%{opacity:.9;filter:blur(12px)}}@keyframes boardGlow{0%,to{opacity:.4}50%{opacity:.8}}@keyframes activeGlow{0%,to{box-shadow:0 0 0 4px #00c8ff,0 0 40px #00c8ffb3,0 0 80px #00c8ff66,inset 0 0 40px #00c8ff26,0 10px 30px #000c}50%{box-shadow:0 0 0 6px #00c8ff,0 0 60px #00c8ffe6,0 0 120px #00c8ff99,inset 0 0 60px #00c8ff40,0 15px 40px #000000e6}}@keyframes activeGlowRed{0%,to{box-shadow:0 0 0 4px #ff3250,0 0 40px #ff3250b3,0 0 80px #ff325066,inset 0 0 40px #ff325026,0 10px 30px #000c}50%{box-shadow:0 0 0 6px #ff3250,0 0 60px #ff3250e6,0 0 120px #ff325099,inset 0 0 60px #ff325040,0 15px 40px #000000e6}}@keyframes activeGlowBlue{0%,to{box-shadow:0 0 0 4px #00c8ff,0 0 40px #00c8ffb3,0 0 80px #00c8ff66,inset 0 0 40px #00c8ff26,0 10px 30px #000c}50%{box-shadow:0 0 0 6px #00c8ff,0 0 60px #00c8ffe6,0 0 120px #00c8ff99,inset 0 0 60px #00c8ff40,0 15px 40px #000000e6}}@keyframes activeBoardGlow{0%,to{opacity:.3}50%{opacity:.7}}@keyframes boardWin{0%{transform:scale(1) rotate(0);filter:brightness(1) saturate(1)}25%{transform:scale(1.05) rotate(1deg);filter:brightness(1.2) saturate(1.3)}50%{transform:scale(1.1) rotate(0);filter:brightness(1.4) saturate(1.6)}75%{transform:scale(1.05) rotate(-1deg);filter:brightness(1.2) saturate(1.3)}to{transform:scale(1) rotate(0);filter:brightness(1) saturate(1)}}@keyframes boardWinRed{0%{box-shadow:0 0 0 6px #ff3250,0 0 60px #ff3250cc,0 0 120px #ff325080,0 0 180px #ff32504d,inset 0 0 60px #ff325033,0 20px 50px #000000e6;background:#ff325026}25%{box-shadow:0 0 0 8px #ff3250,0 0 80px #ff3250,0 0 160px #ff3250b3,0 0 240px #ff325066,inset 0 0 80px #ff32504d,0 25px 60px #000000e6;background:#ff325040}50%{box-shadow:0 0 0 10px #ff3250,0 0 100px #ff3250,0 0 200px #ff3250e6,0 0 300px #ff325080,inset 0 0 100px #ff325066,0 30px 70px #000000e6;background:#ff325059}75%{box-shadow:0 0 0 8px #ff3250,0 0 80px #ff3250,0 0 160px #ff3250b3,0 0 240px #ff325066,inset 0 0 80px #ff32504d,0 25px 60px #000000e6;background:#ff325040}to{box-shadow:0 0 0 6px #ff3250,0 0 60px #ff3250cc,0 0 120px #ff325080,0 0 180px #ff32504d,inset 0 0 60px #ff325033,0 20px 50px #000000e6;background:#ff325026}}@keyframes boardWinBlue{0%{box-shadow:0 0 0 6px #00c8ff,0 0 60px #00c8ffcc,0 0 120px #00c8ff80,0 0 180px #00c8ff4d,inset 0 0 60px #00c8ff33,0 20px 50px #000000e6;background:#00c8ff26}25%{box-shadow:0 0 0 8px #00c8ff,0 0 80px #00c8ff,0 0 160px #00c8ffb3,0 0 240px #00c8ff66,inset 0 0 80px #00c8ff4d,0 25px 60px #000000e6;background:#00c8ff40}50%{box-shadow:0 0 0 10px #00c8ff,0 0 100px #00c8ff,0 0 200px #00c8ffe6,0 0 300px #00c8ff80,inset 0 0 100px #00c8ff66,0 30px 70px #000000e6;background:#00c8ff59}75%{box-shadow:0 0 0 8px #00c8ff,0 0 80px #00c8ff,0 0 160px #00c8ffb3,0 0 240px #00c8ff66,inset 0 0 80px #00c8ff4d,0 25px 60px #000000e6;background:#00c8ff40}to{box-shadow:0 0 0 6px #00c8ff,0 0 60px #00c8ffcc,0 0 120px #00c8ff80,0 0 180px #00c8ff4d,inset 0 0 60px #00c8ff33,0 20px 50px #000000e6;background:#00c8ff26}}@keyframes boardWinTie{0%,to{box-shadow:0 0 0 4px #888,0 0 40px #96969699,0 0 80px #9696964d,inset 0 0 40px #9696961a;background:#9696961a}50%{box-shadow:0 0 0 6px #aaa,0 0 60px #969696cc,0 0 120px #96969680,inset 0 0 60px #96969633;background:#96969633}}@keyframes cellHover{0%{transform:scale(1);background:transparent;box-shadow:none}50%{transform:scale(1.05);background:#00c8ff1a;box-shadow:0 0 20px #00c8ff4d,inset 0 0 15px #00c8ff1a}to{transform:scale(1);background:transparent;box-shadow:none}}@keyframes cellHoverRed{0%{transform:scale(1);background:transparent;box-shadow:none}50%{transform:scale(1.05);background:#ff32501a;box-shadow:0 0 20px #ff32504d,inset 0 0 15px #ff32501a}to{transform:scale(1);background:transparent;box-shadow:none}}@keyframes cellHoverBlue{0%{transform:scale(1);background:transparent;box-shadow:none}50%{transform:scale(1.05);background:#00c8ff1a;box-shadow:0 0 20px #00c8ff4d,inset 0 0 15px #00c8ff1a}to{transform:scale(1);background:transparent;box-shadow:none}}@keyframes winnerAppear{0%{opacity:0;transform:scale(.5) rotate(-180deg);filter:blur(10px)}50%{opacity:.8;transform:scale(1.1) rotate(0);filter:blur(2px)}to{opacity:1;transform:scale(1) rotate(0);filter:blur(0px)}}@keyframes winnerGlow{0%,to{filter:brightness(1) saturate(1)}50%{filter:brightness(1.3) saturate(1.5)}}@keyframes winnerGlowRed{0%,to{text-shadow:0 0 20px rgba(255,50,80,.8)}50%{text-shadow:0 0 30px rgba(255,50,80,1),0 0 60px rgba(255,50,80,.6)}}@keyframes winnerGlowBlue{0%,to{text-shadow:0 0 20px rgba(0,200,255,.8)}50%{text-shadow:0 0 30px rgba(0,200,255,1),0 0 60px rgba(0,200,255,.6)}}@keyframes buttonGlow{0%{filter:blur(5px);opacity:.6}to{filter:blur(10px);opacity:.9}}@keyframes buttonGlowRed{0%{filter:blur(8px);opacity:.5}to{filter:blur(15px);opacity:.8}}@keyframes activePulse{0%{transform:scale(1.05);filter:brightness(1)}50%{transform:scale(1.06);filter:brightness(1.05)}to{transform:scale(1.05);filter:brightness(1)}}@keyframes textGlow{0%{opacity:.95;text-shadow:0 0 6px currentColor}to{opacity:1;text-shadow:0 0 8px currentColor,0 0 12px currentColor}}@keyframes valueGlow{0%{transform:scale(1);text-shadow:0 0 15px currentColor}to{transform:scale(1.01);text-shadow:0 0 12px currentColor,0 0 18px currentColor}}@keyframes arrowPulse{0%{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}@keyframes subtitleGlow{0%{opacity:.7;text-shadow:0 0 8px rgba(255,255,255,.3),0 0 15px rgba(0,200,255,.3),0 0 25px rgba(0,200,255,.1)}to{opacity:.9;text-shadow:0 0 10px rgba(255,255,255,.4),0 0 20px rgba(0,200,255,.5),0 0 30px rgba(0,200,255,.3)}}@keyframes menuBorderGlow{0%{opacity:.6;background:linear-gradient(45deg,#00c8ff4d,#ff325033,#00c8ff4d,#ff325026)}to{opacity:1;background:linear-gradient(45deg,#00c8ff80,#ff325066,#00c8ff80,#ff32504d)}}@keyframes winnerPulse{0%{transform:scale(1);filter:brightness(1) saturate(1)}50%{transform:scale(1.02);filter:brightness(1.15) saturate(1.3)}to{transform:scale(1);filter:brightness(1) saturate(1)}}@keyframes tieWinnerPulse{0%{transform:scale(1);filter:brightness(1) saturate(.8)}50%{transform:scale(1.01);filter:brightness(1.1) saturate(1)}to{transform:scale(1);filter:brightness(1) saturate(.8)}}@keyframes winnerBorderGlow{0%{opacity:.8;filter:blur(15px)}to{opacity:1;filter:blur(20px)}}@keyframes tieBorderGlow{0%{opacity:.6;filter:blur(12px)}to{opacity:.9;filter:blur(18px)}}@keyframes winnerStatusGlow{0%{filter:brightness(1) saturate(1);text-shadow:0 0 15px currentColor}to{filter:brightness(1.2) saturate(1.4);text-shadow:0 0 25px currentColor,0 0 40px currentColor}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}body.perf-low{--pulse-scale: 1}body.perf-low .game-container,body.perf-low .super-board,body.perf-low .small-board,body.perf-low .cell,body.perf-low .timer,body.perf-low .game-title,body.perf-low .rules,body.perf-low .button{animation:none!important}body.perf-low .cell,body.perf-low .small-board,body.perf-low .super-board,body.perf-low .game-container{box-shadow:0 0 0 2px #0003!important;filter:none!important}body.perf-low .game-title,body.perf-low .rules-title,body.perf-low .timer .time-value,body.perf-low .timer .time-label{text-shadow:none!important}.game-container{background:#05050ffa;border:3px solid rgba(0,200,255,.6);border-radius:20px;box-shadow:0 0 60px #00c8ff80,0 0 120px #00c8ff4d,0 0 180px #ff325033,inset 0 0 40px #00c8ff14,0 20px 60px #000000e6;padding:1.5rem;text-align:center;max-width:800px;margin:1rem auto;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.game-container.x-turn{border-color:#ff3250cc;box-shadow:0 0 60px #ff325099,0 0 120px #ff325066,0 0 180px #ff325040,inset 0 0 40px #ff32501a,0 20px 60px #000000e6}.game-container.o-turn{border-color:#00c8ffcc;box-shadow:0 0 60px #00c8ff99,0 0 120px #00c8ff66,0 0 180px #00c8ff40,inset 0 0 40px #00c8ff1a,0 20px 60px #000000e6}.game-container.x-winner{border-color:#ff3250;background:#05050ffa;box-shadow:0 0 100px #ff3250cc,0 0 200px #ff325099,0 0 300px #ff325066,0 30px 80px #000000e6;animation:winnerPulse 3s ease-in-out infinite alternate}.game-container.o-winner{border-color:#00c8ff;background:#05050ffa;box-shadow:0 0 100px #00c8ffcc,0 0 200px #00c8ff99,0 0 300px #00c8ff66,0 30px 80px #000000e6;animation:winnerPulse 3s ease-in-out infinite alternate}.game-container.tie-winner{border-color:#969696cc;background:#05050ffa;box-shadow:0 0 80px #96969699,0 0 160px #96969666,0 0 240px #96969633,0 30px 80px #000000e6;animation:tieWinnerPulse 4s ease-in-out infinite alternate}.game-container:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:20px;z-index:-1;animation:borderGlow 4s ease-in-out infinite alternate;transition:all .3s ease}.game-container:after{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:25px;z-index:-2;filter:blur(15px);animation:borderGlow 4s ease-in-out infinite alternate reverse;transition:all .3s ease}.game-container.x-winner:before{animation:winnerBorderGlow 2s ease-in-out infinite alternate}.game-container.x-winner:after{animation:winnerBorderGlow 2s ease-in-out infinite alternate reverse}.game-container.o-winner:before{animation:winnerBorderGlow 2s ease-in-out infinite alternate}.game-container.o-winner:after{animation:winnerBorderGlow 2s ease-in-out infinite alternate reverse}.game-container.tie-winner:before{animation:tieBorderGlow 3s ease-in-out infinite alternate}.game-container.tie-winner:after{animation:tieBorderGlow 3s ease-in-out infinite alternate reverse}h1{font-family:Orbitron,monospace;color:#fff;margin-bottom:1rem;font-size:3rem;font-weight:900;text-transform:uppercase;letter-spacing:.2em;text-shadow:0 0 12px rgba(255,255,255,.3),0 0 20px rgba(0,200,255,.3);position:relative;transition:all .3s ease}h1.x-glow{color:#ff3250;text-shadow:0 0 15px rgba(255,50,80,.6)}h1.o-glow{color:#00c8ff;text-shadow:0 0 15px rgba(0,200,255,.6)}.current-player{font-size:1.4rem;font-weight:900;margin-bottom:.8rem;font-family:Orbitron,monospace;text-transform:uppercase;letter-spacing:.1em;color:#fff;text-shadow:0 0 15px rgba(255,255,255,.3),0 0 25px rgba(0,200,255,.2);background:#0a0a19cc;padding:12px 20px;border-radius:15px;border:2px solid rgba(0,200,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:inline-block;position:relative;animation:currentPlayerGlow 1s ease-in-out infinite alternate;transition:all .3s ease}.current-player.x-player{border-color:#ff325099;background:#19050acc;text-shadow:0 0 15px rgba(255,255,255,.3),0 0 25px rgba(255,50,80,.3);animation:currentPlayerGlowRed 3s ease-in-out infinite alternate}.current-player.x-player .current-player-label{color:#ff3250;text-shadow:0 0 15px rgba(255,50,80,.6)}.current-player.o-player{border-color:#00c8ff99;background:#050f19cc;animation:currentPlayerGlowBlue 3s ease-in-out infinite alternate}.current-player.o-player .current-player-label{color:#00c8ff;text-shadow:0 0 15px rgba(0,200,255,.6)}.current-player-label{color:#fff;transition:all .3s ease}.current-player:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(45deg,#00c8ff4d,#ff325033,#00c8ff4d);border-radius:18px;z-index:-1;filter:blur(8px);opacity:.6;animation:currentPlayerHalo 4s ease-in-out infinite;transition:all .3s ease}.current-player.x-player:before{background:linear-gradient(45deg,#ff325066,#ff325033,#ff325066)}.current-player.o-player:before{background:linear-gradient(45deg,#00c8ff66,#00c8ff33,#00c8ff66)}.game-instruction{color:#666;font-style:italic;font-family:Orbitron,monospace;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:all .3s ease}.game-instruction.x-theme{color:#ff3250;text-shadow:0 0 10px rgba(255,50,80,.6),0 0 20px rgba(255,50,80,.3)}.game-instruction.o-theme{color:#00c8ff;text-shadow:0 0 10px rgba(0,200,255,.6),0 0 20px rgba(0,200,255,.3)}.current-player.winner{font-size:1.8rem;padding:16px 24px;border-width:3px;animation:winnerStatusGlow 2s ease-in-out infinite alternate;transform:scale(1.1)}.current-player.winner .current-player-label{color:#fff;text-shadow:none}.current-player.winner:before{animation:none;opacity:.8}.current-player.winner.x-winner{border-color:#ff3250;background:#28050af2;box-shadow:0 0 50px #ff3250cc,0 0 100px #ff325099,inset 0 0 40px #ff325033}.current-player.winner.o-winner{border-color:#00c8ff;background:#051428f2;box-shadow:0 0 50px #00c8ffcc,0 0 100px #00c8ff99,inset 0 0 40px #00c8ff33}.current-player.winner.tie-winner{border-color:#969696cc;background:#141414f2;box-shadow:0 0 40px #96969699,0 0 80px #96969666,inset 0 0 30px #96969626}.super-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:650px;margin:1.5rem auto;background:#05050ffa;padding:25px;border-radius:20px;box-shadow:0 0 40px #00c8ff66,0 0 80px #ff325040,inset 0 0 40px #000000b3,0 15px 40px #000c;border:2px solid rgba(0,200,255,.3);position:relative;transition:all .3s ease}.super-board.x-turn{border-color:#ff325099;box-shadow:0 0 40px #ff325080,0 0 80px #ff32504d,inset 0 0 40px #000000b3,0 15px 40px #000c}.super-board.o-turn{border-color:#00c8ff99;box-shadow:0 0 40px #00c8ff80,0 0 80px #00c8ff4d,inset 0 0 40px #000000b3,0 15px 40px #000c}.super-board:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(45deg,#00c8ff66,#ff325066,#00c8ff66,#ff325066);border-radius:25px;z-index:-1;animation:boardGlow 5s ease-in-out infinite;transition:all .3s ease}.super-board.x-turn:before{background:linear-gradient(45deg,#ff325080,#ff32504d,#ff325080,#ff32504d)}.super-board.o-turn:before{background:linear-gradient(45deg,#00c8ff80,#00c8ff4d,#00c8ff80,#00c8ff4d)}.super-board:after{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;background:linear-gradient(45deg,#00c8ff33,#ff325026,#00c8ff33,#ff325026);border-radius:30px;z-index:-2;filter:blur(20px);animation:boardGlow 5s ease-in-out infinite reverse;transition:all .3s ease}.super-board.x-turn:after{background:linear-gradient(45deg,#ff32504d,#ff325026,#ff32504d,#ff325026)}.super-board.o-turn:after{background:linear-gradient(45deg,#00c8ff4d,#00c8ff26,#00c8ff4d,#00c8ff26)}.super-board.x-winner{border-color:#ff3250e6;box-shadow:0 0 60px #ff3250cc,0 0 120px #ff325099,0 0 180px #ff325066,inset 0 0 50px #ff325033,0 20px 50px #000c;animation:boardWinRed 3s ease-in-out infinite}.super-board.o-winner{border-color:#00c8ffe6;box-shadow:0 0 60px #00c8ffcc,0 0 120px #00c8ff99,0 0 180px #00c8ff66,inset 0 0 50px #00c8ff33,0 20px 50px #000c;animation:boardWinBlue 3s ease-in-out infinite}.super-board.tie-winner{border-color:#969696b3;box-shadow:0 0 40px #96969699,0 0 80px #96969666,inset 0 0 30px #9696961a,0 15px 40px #000c;animation:boardWinTie 3s ease-in-out infinite}.small-board{background:#0a0a19f2;border-radius:12px;padding:8px;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);border:2px solid rgba(255,255,255,.1);box-shadow:inset 0 0 20px #000000b3,0 4px 15px #00000080,0 0 15px #00c8ff1a}.small-board.active{background:#00c8ff14;box-shadow:0 0 0 3px #00c8ff,0 0 30px #00c8ffb3,0 0 60px #00c8ff66,inset 0 0 30px #00c8ff26,0 8px 25px #000c;transform:scale(1.03);animation:activeGlow 2.5s ease-in-out infinite alternate;border:2px solid rgba(0,200,255,.6);transition:all .3s ease}.small-board.active-x{background:#ff325014;box-shadow:0 0 0 4px #ff3250,0 0 40px #ff3250b3,0 0 80px #ff325066,inset 0 0 40px #ff325026,0 10px 30px #000c;border-color:#ff325099;animation:activeGlowRed 2.5s ease-in-out infinite alternate}.small-board.active-o{background:#00c8ff14;box-shadow:0 0 0 4px #00c8ff,0 0 40px #00c8ffb3,0 0 80px #00c8ff66,inset 0 0 40px #00c8ff26,0 10px 30px #000c;border-color:#00c8ff99;animation:activeGlowBlue 2.5s ease-in-out infinite alternate}.small-board.active:before,.small-board.active-x:before,.small-board.active-o:before{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;background:linear-gradient(45deg,#00c8ff4d,#00c8ff1a,#00c8ff4d);border-radius:20px;z-index:-1;filter:blur(15px);animation:activeBoardGlow 2s ease-in-out infinite alternate;transition:all .6s ease}.small-board.active-x:before{background:linear-gradient(45deg,#ff325066,#ff325033,#ff325066)}.small-board.active-o:before{background:linear-gradient(45deg,#00c8ff66,#00c8ff33,#00c8ff66)}.small-board.won{opacity:.8;pointer-events:none}.small-board.won.x{background:#ff325026;border-color:#ff3250cc;box-shadow:0 0 0 4px #ff3250,0 0 40px #ff3250cc,0 0 80px #ff325080,inset 0 0 40px #ff325033;animation:boardWinRed 3s ease-in-out infinite}.small-board.won.o{background:#00c8ff26;border-color:#00c8ffcc;box-shadow:0 0 0 4px #00c8ff,0 0 40px #00c8ffcc,0 0 80px #00c8ff80,inset 0 0 40px #00c8ff33;animation:boardWinBlue 3s ease-in-out infinite}.small-board.won.tie{background:#9696961a;border-color:#96969699;box-shadow:0 0 0 3px #888,0 0 30px #96969680,inset 0 0 30px #9696961a;animation:boardWinTie 3s ease-in-out infinite}.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.cell{width:55px;height:55px;border:2px solid rgba(255,255,255,.2);background:#0009;font-size:1.7rem;font-weight:900;font-family:Orbitron,monospace;cursor:pointer;transition:transform .16s cubic-bezier(.4,0,.2,1),box-shadow .16s cubic-bezier(.4,0,.2,1),border-color .16s cubic-bezier(.4,0,.2,1),background-color .16s cubic-bezier(.4,0,.2,1);border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 15px #00000080,0 2px 8px #0000004d;will-change:transform}.cell:hover:not(:disabled){background:#00c8ff26;border-color:#00c8ff99;box-shadow:0 0 20px #00c8ff66,inset 0 0 20px #00c8ff1a,0 5px 15px #0006;transform:scale(1.05)}.cell:disabled{cursor:not-allowed;opacity:.7}.cell.x{color:#ff3250;text-shadow:0 0 15px rgba(255,50,80,.8),0 0 30px rgba(255,50,80,.5);background:#ff32501a;border-color:#ff325080;box-shadow:0 0 20px #ff32504d,inset 0 0 20px #ff32501a}.cell.o{color:#00c8ff;text-shadow:0 0 15px rgba(0,200,255,.8),0 0 30px rgba(0,200,255,.5);background:#00c8ff1a;border-color:#00c8ff80;box-shadow:0 0 20px #00c8ff4d,inset 0 0 20px #00c8ff1a}.cell.winning{animation:winningCell 1s ease-in-out infinite alternate}.cell.winning.x{box-shadow:0 0 30px #ff3250cc,0 0 60px #ff325080,inset 0 0 30px #ff325033}.cell.winning.o{box-shadow:0 0 30px #00c8ffcc,0 0 60px #00c8ff80,inset 0 0 30px #00c8ff33}.cell.current-x:hover:not(:disabled){background:#ff325026;border-color:#ff325099;box-shadow:0 0 20px #ff325066,inset 0 0 20px #ff32501a,0 5px 15px #0006;transform:scale(1.05)}.cell.current-o:hover:not(:disabled){background:#00c8ff26;border-color:#00c8ff99;box-shadow:0 0 20px #00c8ff66,inset 0 0 20px #00c8ff1a,0 5px 15px #0006;transform:scale(1.05)}@keyframes winningCell{0%{transform:scale(1);filter:brightness(1)}to{transform:scale(1.1);filter:brightness(1.3)}}.button{background:#000000e6;color:#00c8ff;border:2px solid rgba(0,200,255,.8);padding:15px 30px;border-radius:30px;font-size:1rem;font-weight:700;font-family:Orbitron,monospace;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);margin:.5rem;box-shadow:0 0 20px #00c8ff66,0 0 40px #00c8ff33,inset 0 0 20px #00c8ff0d,0 8px 25px #0009;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 0 10px rgba(0,200,255,.6)}.x-turn .button{border-color:#ff3250cc;color:#ff3250;box-shadow:0 0 20px #ff325066,0 0 40px #ff325033,inset 0 0 20px #ff32500d,0 8px 25px #0009;text-shadow:0 0 10px rgba(255,50,80,.6)}.o-turn .button{border-color:#00c8ffcc;color:#00c8ff;box-shadow:0 0 20px #00c8ff66,0 0 40px #00c8ff33,inset 0 0 20px #00c8ff0d,0 8px 25px #0009;text-shadow:0 0 10px rgba(0,200,255,.6)}.button:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(45deg,#00c8ff66,#00c8ff33,#00c8ff66);border-radius:33px;z-index:-1;display:none}.button:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;display:none}.button:hover{transform:translateY(-4px) scale(1.02);border-color:#ff3250e6;color:#ff3250;box-shadow:0 0 30px #ff3250b3,0 0 60px #ff325066,0 0 90px #ff325033,0 12px 35px #000c}.button:active{transform:translateY(-1px) scale(.98);border-color:#ff3250;box-shadow:0 0 20px #ff3250e6,0 0 40px #ff325099,inset 0 0 20px #ff325033,0 6px 20px #ff3250cc;background:#000}.x-turn .button:hover{transform:translateY(-4px) scale(1.02);border-color:#00c8ffe6;color:#00c8ff;box-shadow:0 0 30px #00c8ffb3,0 0 60px #00c8ff66,0 0 90px #00c8ff33,0 12px 35px #000c;text-shadow:0 0 15px rgba(0,200,255,.8)}.x-turn .button:active{transform:translateY(-1px) scale(.98);border-color:#00c8ff;box-shadow:0 0 20px #00c8ffe6,0 0 40px #00c8ff99,inset 0 0 20px #00c8ff33,0 6px 20px #00c8ffcc;background:#000}.timers{display:flex;justify-content:center;gap:2rem;margin:1rem 0}.timer{background:#0a0a14e6;padding:1rem 1.5rem;border-radius:25px;font-weight:700;border:2px solid rgba(255,255,255,.1);color:#aaa;font-family:Orbitron,monospace;letter-spacing:.1em;transition:all .4s ease;position:relative;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:120px;box-shadow:0 4px 15px #00000080,inset 0 0 15px #0000004d}.timer-label{font-size:.8rem;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.2em}.timer-value{font-size:1.6rem;font-weight:900;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.3)}.timer.x-player{border-color:#ff325099;background:#19050ae6;box-shadow:0 0 30px #ff325066,0 5px 20px #0009,inset 0 0 25px #ff32501a}.timer.x-player .timer-label{color:#ff3250;text-shadow:0 0 8px rgba(255,50,80,.6)}.timer.x-player .timer-value{color:#ff3250;text-shadow:0 0 15px rgba(255,50,80,.8)}.timer.o-player{border-color:#00c8ff99;background:#050f19e6;box-shadow:0 0 30px #00c8ff66,0 5px 20px #0009,inset 0 0 25px #00c8ff1a}.timer.o-player .timer-label{color:#00c8ff;text-shadow:0 0 8px rgba(0,200,255,.6)}.timer.o-player .timer-value{color:#00c8ff;text-shadow:0 0 15px rgba(0,200,255,.8)}.timer.warning{animation:timerWarning 1s ease-in-out infinite alternate}.timer.critical{animation:timerCritical .5s ease-in-out infinite alternate}@keyframes timerWarning{0%{opacity:1}to{opacity:.7}}@keyframes timerCritical{0%{opacity:1;transform:scale(1)}to{opacity:.8;transform:scale(1.05)}}.timer.active{animation:activePulse 1s ease-in-out infinite;border-width:3px;transform:scale(1.05)}.timer.active.player-x{border-color:#ff3250e6;background:#28050af2;box-shadow:0 0 50px #ff325099,0 0 100px #ff32504d,0 5px 25px #000000b3,inset 0 0 30px #ff325026}.timer.active.player-x .timer-label{color:#ff6080;text-shadow:0 0 12px rgba(255,50,80,.9);animation:textGlow 1s ease-in-out infinite alternate}.timer.active.player-x .timer-value{color:#ff4060;text-shadow:0 0 20px rgba(255,50,80,1);animation:valueGlow 1s ease-in-out infinite alternate}.timer.active.player-o{border-color:#00c8ffe6;background:#051423f2;box-shadow:0 0 50px #00c8ff99,0 0 100px #00c8ff4d,0 5px 25px #000000b3,inset 0 0 30px #00c8ff26}.timer.active.player-o .timer-label{color:#40d8ff;text-shadow:0 0 12px rgba(0,200,255,.9);animation:textGlow 1s ease-in-out infinite alternate}.timer.active.player-o .timer-value{color:#20d0ff;text-shadow:0 0 20px rgba(0,200,255,1);animation:valueGlow 1s ease-in-out infinite alternate}.game-over{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);background:#14141efa;padding:3rem 2.5rem;border-radius:20px;box-shadow:0 0 100px #000000e6,0 0 200px #ff325080,0 0 300px #ff32504d,inset 0 0 50px #ff32501a;font-size:3rem;font-weight:700;font-family:Orbitron,monospace;text-transform:uppercase;letter-spacing:.2em;z-index:1001;color:#fff;border:3px solid rgba(255,50,80,.6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:winModalEntrance 1s cubic-bezier(.4,0,.2,1) forwards,winModalGlow 2s ease-in-out 1s infinite alternate}.game-over.x{color:#ff3250;text-shadow:0 0 20px rgba(255,50,80,1),0 0 40px rgba(255,50,80,.8),0 0 60px rgba(255,50,80,.6);border-color:#ff3250cc;box-shadow:0 0 100px #000000e6,0 0 200px #ff3250b3,0 0 300px #ff325080,inset 0 0 50px #ff325033}.game-over.o{color:#00c8ff;text-shadow:0 0 20px rgba(0,200,255,1),0 0 40px rgba(0,200,255,.8),0 0 60px rgba(0,200,255,.6);border-color:#00c8ffcc;box-shadow:0 0 100px #000000e6,0 0 200px #00c8ffb3,0 0 300px #00c8ff80,inset 0 0 50px #00c8ff33}.game-over.tie{color:#c9c9c9;text-shadow:0 0 20px rgba(200,200,200,.8),0 0 40px rgba(200,200,200,.6);border-color:#96969699;box-shadow:0 0 100px #000000e6,0 0 200px #96969680,inset 0 0 50px #9696961a}.board-winner{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:900;font-family:Orbitron,monospace;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:winnerAppear .6s cubic-bezier(.4,0,.2,1) .2s both}.board-winner.x{color:#ff3250;text-shadow:0 0 20px rgba(255,50,80,1),0 0 40px rgba(255,50,80,.6);background:#ff32501a;animation:winnerAppear .6s cubic-bezier(.4,0,.2,1) .2s both,winnerGlowRed 2s ease-in-out .8s infinite alternate}.board-winner.o{color:#00c8ff;text-shadow:0 0 20px rgba(0,200,255,1),0 0 40px rgba(0,200,255,.6);background:#00c8ff1a;animation:winnerAppear .6s cubic-bezier(.4,0,.2,1) .2s both,winnerGlowBlue 2s ease-in-out .8s infinite alternate}.board-winner.tie{color:#888;text-shadow:0 0 15px rgba(150,150,150,.6);background:#9696961a}.rules{margin-top:2rem;text-align:left;background:#0a0a14e6;padding:2rem;border-radius:20px;border:2px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 5px 20px #00000080,inset 0 0 20px #0000004d;transition:all .3s ease}.rules h3{color:#fff;margin-bottom:1.5rem;text-shadow:0 0 10px rgba(0,200,255,.8),0 0 20px rgba(0,200,255,.4),0 0 30px rgba(0,200,255,.2);font-family:Orbitron,monospace;font-weight:700;text-transform:uppercase;letter-spacing:.15em;font-size:1.3rem;animation:textShimmer 3s ease-in-out infinite}.rules ul{list-style:none;padding-left:0}.rules li{margin-bottom:1rem;position:relative;padding-left:2.5rem;color:#e8e8e8;font-size:1rem;line-height:1.5;font-family:Orbitron,monospace;font-weight:400;letter-spacing:.05em;text-shadow:0 0 5px rgba(255,255,255,.2);transition:all .3s ease}.rules li:hover{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.6),0 0 15px rgba(0,200,255,.5),0 0 25px rgba(0,200,255,.3);transform:translate(5px)}.rules li:before{content:"▶";color:#00c8ff;position:absolute;left:0;font-size:1rem;text-shadow:0 0 8px rgba(0,200,255,.8),0 0 15px rgba(0,200,255,.4);animation:arrowPulse 2s ease-in-out infinite alternate;transition:all .3s ease}.rules li:hover:before{color:#40d8ff;text-shadow:0 0 12px rgba(64,216,255,1),0 0 20px rgba(64,216,255,.6),0 0 30px rgba(64,216,255,.3);transform:scale(1.2)}.rules:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0009,inset 0 0 25px #0006}.rules.x-theme{border-color:#ff325099;background:#19050ae6;box-shadow:0 0 30px #ff325066,0 5px 20px #0009,inset 0 0 25px #ff32501a}.rules.x-theme h3{color:#fff;text-shadow:0 0 10px rgba(255,50,80,.9),0 0 20px rgba(255,50,80,.6),0 0 30px rgba(255,50,80,.3)}.rules.x-theme li:before{color:#ff3250;text-shadow:0 0 8px rgba(255,50,80,.8),0 0 15px rgba(255,50,80,.4)}.rules.x-theme li:hover{text-shadow:0 0 8px rgba(255,255,255,.6),0 0 15px rgba(255,50,80,.5),0 0 25px rgba(255,50,80,.3)}.rules.x-theme li:hover:before{color:#ff6080;text-shadow:0 0 12px rgba(255,96,128,1),0 0 20px rgba(255,96,128,.6),0 0 30px rgba(255,96,128,.3)}.rules.o-theme{border-color:#00c8ff99;background:#050f19e6;box-shadow:0 0 30px #00c8ff66,0 5px 20px #0009,inset 0 0 25px #00c8ff1a}.rules.o-theme h3{color:#fff;text-shadow:0 0 10px rgba(0,200,255,.9),0 0 20px rgba(0,200,255,.6),0 0 30px rgba(0,200,255,.3)}.rules.o-theme li:before{color:#00c8ff;text-shadow:0 0 8px rgba(0,200,255,.8),0 0 15px rgba(0,200,255,.4)}.rules.o-theme li:hover{text-shadow:0 0 8px rgba(255,255,255,.6),0 0 15px rgba(0,200,255,.5),0 0 25px rgba(0,200,255,.3)}.rules.o-theme li:hover:before{color:#40d8ff;text-shadow:0 0 12px rgba(64,216,255,1),0 0 20px rgba(64,216,255,.6),0 0 30px rgba(64,216,255,.3)}.rules.neutral-theme{border-color:#96969666;box-shadow:0 5px 20px #00000080,0 0 30px #9696964d,inset 0 0 20px #0000004d}.rules.neutral-theme h3{color:#c9c9c9;text-shadow:0 0 10px rgba(200,200,200,.6),0 0 20px rgba(200,200,200,.3)}.rules.neutral-theme li:before{color:#999;text-shadow:0 0 8px rgba(150,150,150,.6)}.rules.neutral-theme li:hover{color:#f0f0f0;text-shadow:0 0 8px rgba(200,200,200,.4)}.rules.neutral-theme li:hover:before{color:#bbb;text-shadow:0 0 10px rgba(200,200,200,.8),0 0 15px rgba(200,200,200,.4)}.rules-title.neutral-glow{color:#c9c9c9;text-shadow:0 0 10px rgba(200,200,200,.6),0 0 20px rgba(200,200,200,.3)}.rules li:nth-child(1),.rules li:nth-child(4){font-weight:600;color:#f0f0f0;text-shadow:0 0 8px rgba(255,255,255,.3)}.rules li:nth-child(1):hover,.rules li:nth-child(4):hover{text-shadow:0 0 10px rgba(255,255,255,.6),0 0 20px rgba(0,200,255,.4),0 0 30px rgba(0,200,255,.2)}.start-menu{background:#05050f4d;border-radius:25px;box-shadow:0 0 60px #00c8ff66,0 0 120px #00c8ff33,0 0 180px #ff325026,inset 0 0 40px #00000080,0 20px 60px #0006;padding:3rem 2.5rem 2.5rem;max-width:450px;margin:40px auto 0;text-align:center;border:2px solid rgba(0,200,255,.6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:relative;transition:all .6s ease}.start-menu:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:28px;z-index:-1;opacity:.8;filter:blur(8px)}.start-menu h2.menu-title{display:flex;flex-direction:column;gap:.2em;align-items:center;margin-bottom:.75em}.menu-title-line{font-family:Orbitron,monospace;font-weight:900;text-transform:uppercase;letter-spacing:.12em;line-height:1.05}.menu-title-super{font-size:2.4em;color:#ff3250;text-shadow:0 0 12px rgba(255,50,80,.6),0 0 24px rgba(255,50,80,.35),0 0 48px rgba(255,50,80,.2)}.menu-title-ttt{font-size:2.1em;color:#00c8ff;white-space:nowrap;text-shadow:0 0 12px rgba(0,200,255,.6),0 0 24px rgba(0,200,255,.35),0 0 48px rgba(0,200,255,.2)}.start-menu .subtitle{color:#fff;font-size:1em;margin:.8em 0 2em;font-family:Orbitron,monospace;font-weight:400;letter-spacing:.15em;text-transform:uppercase;opacity:.8;text-shadow:0 0 8px rgba(255,255,255,.3),0 0 15px rgba(0,200,255,.4),0 0 25px rgba(0,200,255,.2);animation:subtitleGlow 4s ease-in-out infinite alternate;transition:all .3s ease}.start-menu .subtitle:hover{opacity:1;text-shadow:0 0 10px rgba(255,255,255,.5),0 0 20px rgba(0,200,255,.6),0 0 30px rgba(0,200,255,.4),0 0 40px rgba(255,50,80,.2);transform:scale(1.05)}.start-menu button{margin:.7em 0;padding:15px 35px;font-size:1.1em;font-weight:700;font-family:Orbitron,monospace;text-transform:uppercase;letter-spacing:.05em;background:#000c;color:#00c8ff;border:2px solid rgba(0,200,255,.6);border-radius:30px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 20px #00c8ff4d,0 8px 25px #0009,inset 0 0 15px #00c8ff0d;display:block;width:100%;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 0 10px rgba(0,200,255,.5)}.start-menu button:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(45deg,#00c8ff4d,#00c8ff1a,#00c8ff4d);border-radius:33px;z-index:-1;opacity:0;transition:opacity .4s ease;filter:blur(8px)}.start-menu button:hover{transform:translateY(-4px) scale(1.02);border-color:#ff3250e6;color:#ff3250;box-shadow:0 0 35px #ff3250b3,0 0 70px #ff325066,0 0 105px #ff325033,0 15px 40px #000c;text-shadow:0 0 15px rgba(255,50,80,.7)}.start-menu button:hover:before{opacity:1;background:linear-gradient(45deg,#ff325066,#ff325033,#ff325066)}.start-menu button:active{transform:translateY(-1px) scale(.98)}.online-options{background:#05050f66;border-radius:15px;padding:2rem 1.5rem 1.5rem;margin-top:1.5em;border:2px solid rgba(0,200,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 30px #00c8ff4d,inset 0 0 30px #00000080,0 10px 30px #0000004d;transition:all .3s ease}.display-name-input,.join-code-input{width:92%;padding:12px 15px;border-radius:15px;border:2px solid rgba(0,200,255,.4);margin-bottom:1em;font-size:1em;font-family:Orbitron,monospace;background:#000000b3;color:#00c8ff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;text-shadow:0 0 5px rgba(0,200,255,.3)}.display-name-input:focus,.join-code-input:focus{outline:none;border-color:#ff325099;box-shadow:0 0 20px #ff325066,inset 0 0 15px #ff32501a;color:#ff3250;text-shadow:0 0 10px rgba(255,50,80,.5)}.display-name-input::placeholder,.join-code-input::placeholder{color:#00c8ff99;font-style:italic}.game-code-box{background:#00c8ff1a;color:#00c8ff;border:3px dashed rgba(0,200,255,.6);border-radius:15px;padding:15px 0;font-size:1.4em;letter-spacing:3px;margin:1em auto 0;width:85%;font-weight:700;font-family:Orbitron,monospace;box-shadow:0 0 30px #00c8ff4d,inset 0 0 20px #00c8ff1a;-webkit-user-select:all;user-select:all;text-shadow:0 0 10px rgba(0,200,255,.6);animation:codeGlow 3s ease-in-out infinite alternate}@keyframes codeGlow{0%{box-shadow:0 0 30px #00c8ff4d,inset 0 0 20px #00c8ff1a}to{box-shadow:0 0 40px #00c8ff80,inset 0 0 30px #00c8ff33}}.join-error{color:#ff3250;font-size:.9em;margin-top:.5em;text-shadow:0 0 5px rgba(255,50,80,.5);font-family:Orbitron,monospace;font-weight:600}.start-menu:hover{border-color:#ff3250cc;box-shadow:0 0 80px #ff325080,0 0 160px #ff32504d,0 0 240px #00c8ff33,inset 0 0 40px #00000080,0 25px 70px #00000080;transform:translateY(-2px)}.start-menu:hover:before{opacity:0}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}