@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark:#0a0a1a;--bg-gradient:linear-gradient(135deg, #1a0a2e 0%, #16213e 50%, #0f3460 100%)}html{scroll-behavior:smooth;font-size:16px}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-dark);color:#fff;font-family:Rajdhani,system-ui,-apple-system,sans-serif;line-height:1.5;overflow-x:hidden}#root{min-height:100vh;position:relative}a{color:#00d4ff;text-decoration:none;transition:color .3s}a:hover{color:#f0f}button,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:inherit}.game-board{-webkit-user-select:none;user-select:none}:focus-visible{outline-offset:2px;outline:2px solid #00d4ff}::selection{color:#fff;background:#00d4ff4d}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}*{-webkit-tap-highlight-color:transparent}.glass-card,.btn,.cell,.mode-option{will-change:transform, box-shadow}img{max-width:100%;height:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.5s ease-out forwards fadeIn}.game-board{justify-content:center;align-items:center;padding:20px;display:flex}.board-grid{-webkit-backdrop-filter:blur(30px);background:#0a0a28e6;border:2px solid #00d4ff66;border-radius:24px;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px;display:grid;box-shadow:0 0 60px #00d4ff4d,0 20px 60px #0009,inset 0 0 80px #00d4ff0d}.cell{color:#fff;cursor:pointer;background:#ffffff08;border:2px solid #ffffff1a;border-radius:12px;justify-content:center;align-items:center;width:100px;height:100px;font-family:Orbitron,sans-serif;font-size:48px;font-weight:800;transition:all .3s;display:flex;position:relative;overflow:hidden}.cell:before{content:"";opacity:0;background:linear-gradient(135deg,#00d4ff1a 0%,#0000 50%,#ff00ff1a 100%);transition:opacity .3s;position:absolute;inset:0}.cell:hover:not(:disabled):not(.filled):before{opacity:1}.cell:hover:not(:disabled):not(.filled){border-color:#00d4ff80;transform:scale(1.03);box-shadow:0 0 20px #00d4ff4d}.cell:disabled{cursor:not-allowed}.cell.filled{cursor:default}.cell.x{color:#e94560;text-shadow:0 0 20px #e94560cc,0 0 40px #e9456080,0 0 60px #e945604d;background:#e945600d;border-color:#e945604d}.cell.o{color:#00d4ff;text-shadow:0 0 20px #00d4ffcc,0 0 40px #00d4ff80,0 0 60px #00d4ff4d;background:#00d4ff0d;border-color:#00d4ff4d}.cell.winning{animation:.6s ease-in-out infinite alternate winningPulse}.cell.winning.x{border-color:#e94560;box-shadow:0 0 30px #e94560cc,0 0 60px #e9456080,inset 0 0 30px #e9456033}.cell.winning.o{border-color:#00d4ff;box-shadow:0 0 30px #00d4ffcc,0 0 60px #00d4ff80,inset 0 0 30px #00d4ff33}@keyframes winningPulse{0%{transform:scale(1)}to{transform:scale(1.08)}}@media (width<=480px){.cell{width:80px;height:80px;font-size:36px}.board-grid{border-radius:16px;gap:8px;padding:12px}}@media (width<=360px){.cell{width:70px;height:70px;font-size:32px}}.turn-timer{-webkit-backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;align-items:center;min-width:220px;margin-bottom:20px;padding:20px 32px;transition:all .3s;display:flex;box-shadow:0 8px 32px #0000004d}.turn-timer.warning{border-color:#ffc10780;box-shadow:0 0 30px #ffc1074d,0 8px 32px #0000004d}.turn-timer.critical{border-color:#e9456099;animation:.5s ease-in-out infinite alternate criticalPulse;box-shadow:0 0 40px #e9456066,0 8px 32px #0000004d}.turn-timer.critical.my-turn{animation:.3s ease-in-out infinite alternate criticalPulseFast}@keyframes criticalPulse{0%{box-shadow:0 0 30px #e945604d,0 8px 32px #0000004d}to{box-shadow:0 0 50px #e9456099,0 8px 32px #0000004d}}@keyframes criticalPulseFast{0%{transform:scale(1);box-shadow:0 0 30px #e9456066,0 8px 32px #0000004d}to{transform:scale(1.02);box-shadow:0 0 60px #e94560cc,0 8px 32px #0000004d}}.timer-display{flex-direction:column;align-items:center;margin-bottom:16px;display:flex}.timer-value{color:#0f8;text-shadow:0 0 20px #0f89,0 0 40px #00ff884d;font-family:Orbitron,sans-serif;font-size:56px;font-weight:800;line-height:1;transition:all .3s}.turn-timer.warning .timer-value{color:#ffc107;text-shadow:0 0 20px #ffc10799,0 0 40px #ffc1074d}.turn-timer.critical .timer-value{color:#e94560;text-shadow:0 0 20px #e94560cc,0 0 40px #e9456080}.timer-label{color:#ffffff80;text-transform:uppercase;letter-spacing:3px;margin-top:4px;font-family:Rajdhani,sans-serif;font-size:12px;font-weight:600}.timer-progress-bar{background:#ffffff1a;border-radius:4px;width:100%;height:8px;overflow:hidden;box-shadow:inset 0 2px 4px #0000004d}.timer-progress-fill{background:linear-gradient(90deg,#0f8,#00d4ff);border-radius:4px;height:100%;transition:width .3s linear,background .3s;box-shadow:0 0 10px #00ff8880}.turn-timer.warning .timer-progress-fill{background:linear-gradient(90deg,#ffc107,#ff9800);box-shadow:0 0 10px #ffc10780}.turn-timer.critical .timer-progress-fill{background:linear-gradient(90deg,#e94560,#ff6b6b);box-shadow:0 0 10px #e9456080}.timer-warning-text{color:#e94560;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px #e94560cc;margin-top:14px;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;animation:.4s ease-in-out infinite alternate blinkWarning}@keyframes blinkWarning{0%{opacity:.6}to{opacity:1}}@media (width<=480px){.turn-timer{min-width:180px;padding:16px 24px}.timer-value{font-size:42px}.timer-label{letter-spacing:2px;font-size:10px}}.mode-selector{margin-bottom:28px}.mode-selector-title{color:#fff9;text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;font-family:Orbitron,sans-serif;font-size:14px;font-weight:600}.mode-options{justify-content:center;gap:16px;display:flex}.mode-option{-webkit-backdrop-filter:blur(20px);cursor:pointer;background:#0a0a28d9;border:2px solid #00d4ff33;border-radius:18px;flex-direction:column;align-items:center;min-width:160px;padding:28px 36px;transition:all .3s;display:flex;box-shadow:0 10px 30px #0006}.mode-option:hover:not(:disabled){background:#0a0a32e6;border-color:#00d4ff80;transform:translateY(-5px);box-shadow:0 0 40px #00d4ff4d,0 15px 40px #00000080}.mode-option.selected{background:#ff572226;border-color:#ff6b35;box-shadow:0 0 50px #ff6b3580,0 15px 40px #00000080}.mode-option:disabled{opacity:.5;cursor:not-allowed}.mode-icon{margin-bottom:12px;font-size:42px;transition:all .3s}.mode-icon.timed-icon{color:#00d4ff;text-shadow:0 0 20px #00d4ffcc}.mode-option.selected .mode-icon{transform:scale(1.1)}.mode-option.selected .mode-icon.timed-icon{color:#ff6b35;text-shadow:0 0 25px #ff6b35cc}.mode-name{color:#fff;letter-spacing:1px;margin-bottom:6px;font-family:Orbitron,sans-serif;font-size:16px;font-weight:700;transition:color .3s}.mode-option.selected .mode-name{color:#ff6b35;text-shadow:0 0 20px #ff6b3580}.mode-description{color:#ffffff80;letter-spacing:.5px;font-family:Rajdhani,sans-serif;font-size:12px;font-weight:500}@media (width<=480px){.mode-options{flex-direction:column;align-items:center}.mode-option{width:100%;max-width:220px;padding:20px 28px}.mode-icon{font-size:30px}.mode-name{font-size:14px}}:root{--color-primary:#ff6b35;--color-primary-light:#ff8c5a;--color-secondary:#e94560;--color-accent-blue:#00d4ff;--color-accent-pink:#f0f;--color-accent-purple:#9d4edd;--color-success:#0f8;--color-warning:#ffc107;--color-text:#fff;--color-text-muted:#fff9;--glass-bg:#ffffff14;--glass-border:#ffffff26;--glass-shadow:0 8px 32px #0006;--font-display:"Orbitron", sans-serif;--font-body:"Rajdhani", sans-serif}.app{min-height:100vh;color:var(--color-text);font-family:var(--font-body);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;flex-direction:column;transition:background-image .5s ease-in-out;display:flex;position:relative}.app:before{content:"";z-index:1;pointer-events:none;background:#00000040;position:fixed;inset:0}.app.bg-nickname{background-image:url(/bg-main.jpg)}.app.bg-lobby{background-image:url(/bg-lobby.jpg)}.app.bg-waiting{background-image:url(/bg-nickname.jpg)}.app.bg-playing{background-image:url(/bg-playing.jpg)}.app.bg-gameover{background-image:url(/bg-gameover.jpg)}.header{text-align:center;z-index:10;padding:30px 20px 10px;position:relative}.header,.main,.footer,.nickname-screen,.game-over-screen,.status-container,.game-board,.actions,.waiting,.error-banner{z-index:10;position:relative}.header-brand{font-family:var(--font-body);color:#ffffffe6;letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 20px #ff6b35cc;margin-bottom:8px;font-size:1.1rem}.header h1{font-family:var(--font-display);color:#fff;text-shadow:0 0 30px #00d4ffe6,0 0 60px #f0f9,0 0 100px #00d4ff66,0 4px 10px #00000080;letter-spacing:6px;margin:0;font-size:3rem;font-weight:900}.subtitle{font-family:var(--font-body);color:var(--color-text-muted);letter-spacing:1px;margin-top:8px;font-size:1rem}.main{z-index:10;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:20px;display:flex;position:relative}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px;padding:40px}.error-banner{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:400px;font-family:var(--font-body);background:#e9456026;border:1px solid #e9456080;border-radius:12px;align-items:center;gap:12px;padding:12px 20px;font-weight:500;display:flex}.error-banner button{border:1px solid var(--color-secondary);color:var(--color-secondary);cursor:pointer;font-size:.875rem;font-family:var(--font-body);background:0 0;border-radius:20px;padding:6px 16px;font-weight:600;transition:all .3s}.error-banner button:hover{background:#e9456033;box-shadow:0 0 15px #e9456066}.nickname-screen{-webkit-backdrop-filter:blur(30px);background:#0a0a28d9;border:2px solid #00d4ff66;border-radius:24px;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:480px;padding:50px;display:flex;box-shadow:0 0 60px #00d4ff4d,0 20px 60px #0009,inset 0 1px #ffffff1a}.nickname-screen h2{font-family:var(--font-display);color:#fff;letter-spacing:2px;text-shadow:0 0 20px #00d4ff99;margin:0;font-size:1.4rem;font-weight:700}.nickname-input{width:100%;font-size:1.25rem;font-family:var(--font-body);color:#fff;text-align:center;letter-spacing:2px;background:#001428cc;border:2px solid #00d4ff4d;border-radius:16px;outline:none;padding:20px 28px;font-weight:600;transition:all .3s;box-shadow:inset 0 2px 10px #0006}.nickname-input:focus{border-color:var(--color-accent-blue);box-shadow:0 0 30px #00d4ff80,inset 0 2px 10px #0006}.nickname-input::placeholder{color:#fff6}.status-container{text-align:center;-webkit-backdrop-filter:blur(25px);background:#0a0a28d9;border:2px solid #00d4ff4d;border-radius:20px;padding:24px 48px;box-shadow:0 0 40px #00d4ff33,0 15px 50px #00000080}.status{font-family:var(--font-display);letter-spacing:1px;margin:0;font-size:1.25rem;font-weight:600;transition:all .3s}.status.your-turn{color:var(--color-success);animation:1.5s ease-in-out infinite alternate neonGlow}@keyframes neonGlow{0%{text-shadow:0 0 10px #00ff8880,0 0 20px #00ff884d}to{text-shadow:0 0 20px #0f8c,0 0 40px #00ff8880,0 0 60px #00ff884d}}.player-info{flex-direction:column;gap:8px;margin-top:16px;display:flex}.mark-info,.opponent-info{color:var(--color-text-muted);font-size:1rem;font-family:var(--font-body);margin:0;font-weight:500}.mark{font-family:var(--font-display);font-size:1.25rem;font-weight:700}.mark.x{color:var(--color-secondary);text-shadow:0 0 10px #e9456080}.mark.o{color:var(--color-accent-blue);text-shadow:0 0 10px #00d4ff80}.actions{flex-direction:column;align-items:center;gap:20px;display:flex}.btn{font-size:1.125rem;font-family:var(--font-display);letter-spacing:2px;text-transform:uppercase;cursor:pointer;border:none;border-radius:50px;justify-content:center;align-items:center;gap:10px;padding:16px 48px;font-weight:700;transition:all .3s;display:flex;position:relative;overflow:hidden}.btn.primary{color:#fff;text-shadow:0 2px 4px #0000004d;background:linear-gradient(135deg,#ff5722 0%,#ff6b35 40%,#ff8c5a 100%);border:1px solid #fff3;box-shadow:0 0 40px #ff5722b3,0 10px 40px #ff6b3580,inset 0 2px #ffffff4d,inset 0 -2px #0003}.btn.primary:before{content:"";background:linear-gradient(90deg,#0000,#fff6,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn.primary:hover:not(:disabled):before{left:100%}.btn.primary:hover:not(:disabled){transform:translateY(-4px)scale(1.02);box-shadow:0 0 60px #ff5722e6,0 15px 50px #ff6b35b3,inset 0 2px #ffffff4d}.btn.primary:active:not(:disabled){transform:translateY(-2px)scale(1.01)}.btn:disabled{color:var(--color-text-muted);cursor:not-allowed;box-shadow:none;background:#ffffff1a;transform:none}.btn.secondary{border:2px solid var(--color-accent-blue);color:var(--color-accent-blue);background:0 0;box-shadow:0 0 20px #00d4ff33}.btn.secondary:hover:not(:disabled){background:#00d4ff1a;box-shadow:0 0 30px #00d4ff66}.spinner{border:2px solid #0000;border-top-color:currentColor;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}.spinner.large{border-width:3px;border-top-color:var(--color-accent-blue);border-right-color:var(--color-accent-pink);width:50px;height:50px}@keyframes spin{to{transform:rotate(360deg)}}.waiting{-webkit-backdrop-filter:blur(30px);background:#0a0a28d9;border:2px solid #00d4ff4d;border-radius:24px;flex-direction:column;align-items:center;gap:24px;padding:60px 70px;display:flex;box-shadow:0 0 60px #00d4ff33,0 20px 60px #00000080}.waiting p{color:#ffffffe6;font-size:1.25rem;font-family:var(--font-body);letter-spacing:1px;text-shadow:0 0 20px #00d4ff66;font-weight:600}.game-over-screen{flex-direction:column;align-items:center;gap:24px;width:100%;max-width:500px;padding:30px;display:flex}.game-result{font-family:var(--font-display);text-align:center;letter-spacing:3px;-webkit-backdrop-filter:blur(25px);background:#0a0a28e6;border-radius:20px;padding:28px 50px;font-size:2.2rem;font-weight:900;animation:.5s ease-out resultPop}@keyframes resultPop{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.game-result.win{border:2px solid var(--color-success);color:var(--color-success);text-shadow:0 0 20px #00ff8880;box-shadow:0 0 40px #0f86}.game-result.lose{border:2px solid var(--color-secondary);color:var(--color-secondary);text-shadow:0 0 20px #e9456080;box-shadow:0 0 40px #e9456066}.game-result.draw{border:2px solid var(--color-warning);color:var(--color-warning);text-shadow:0 0 20px #ffc10780;box-shadow:0 0 40px #ffc10766}.winner-name{font-family:var(--font-body);color:var(--color-success);margin:0;font-size:1.125rem;font-weight:600}.leaderboard-section{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:20px;width:100%;max-width:420px;margin-top:8px;padding:24px}.leaderboard-section h3{font-family:var(--font-display);text-align:center;color:var(--color-accent-blue);letter-spacing:2px;text-transform:uppercase;margin:0 0 20px;font-size:1.125rem;font-weight:600}.loading-leaderboard{color:var(--color-text-muted);font-family:var(--font-body);justify-content:center;align-items:center;gap:12px;padding:20px;display:flex}.leaderboard-table{border-collapse:collapse;width:100%}.leaderboard-table th,.leaderboard-table td{text-align:center;font-family:var(--font-body);padding:14px 10px}.leaderboard-table th{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid var(--glass-border);font-size:.75rem;font-weight:600}.leaderboard-table td{border-bottom:1px solid #ffffff0d;font-size:1rem;font-weight:500}.leaderboard-table tr:last-child td{border-bottom:none}.leaderboard-table tr.highlight{background:#00d4ff1a}.leaderboard-table tr.highlight td{color:var(--color-accent-blue);font-weight:700}.no-entries{text-align:center;color:var(--color-text-muted);font-family:var(--font-body);margin:0;padding:24px;font-size:1rem}.footer{text-align:center;color:var(--color-text-muted);font-size:.875rem;font-family:var(--font-body);letter-spacing:1px;z-index:10;padding:24px;position:relative}@media (width<=480px){.header h1{letter-spacing:2px;font-size:1.75rem}.status{font-size:1rem}.btn{letter-spacing:1px;padding:14px 32px;font-size:1rem}.nickname-screen{margin:0 16px;padding:30px 24px}.nickname-screen h2{font-size:1.25rem}.nickname-input{padding:14px 18px;font-size:1rem}.game-result{padding:16px 28px;font-size:1.5rem}.leaderboard-section{padding:18px}.leaderboard-table th,.leaderboard-table td{padding:10px 6px;font-size:.875rem}.status-container{padding:16px 24px}.waiting{padding:30px}}