*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--accent-cyan: #00f5ff;--accent-magenta: #ff00aa;--accent-gold: #ffd700;--text-primary: #e0e0e0;--text-muted: #6a6a7a;--glow-cyan: 0 0 10px rgba(0, 245, 255, .4);--glow-magenta: 0 0 10px rgba(255, 0, 170, .4);--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem}body{font-family:Rajdhani,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow:hidden;min-height:100vh;min-height:100dvh}#container{position:relative;width:100vw;height:100vh;height:100dvh;background:radial-gradient(ellipse at 50% 0%,rgba(0,245,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(255,0,170,.05) 0%,transparent 40%),var(--bg-primary)}#game-canvas{display:block;width:100%;height:100%;touch-action:manipulation;pointer-events:auto}#mode-select-overlay:not(.hidden)~#game-canvas{pointer-events:none}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;align-items:center;padding:var(--space-md);padding-bottom:calc(var(--space-md) + env(safe-area-inset-bottom,0))}#ui-overlay.hidden{display:none}h1{font-family:Orbitron,sans-serif;font-size:1rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-sm)}#status-panel{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:#12121ad9;border:1px solid rgba(0,245,255,.15);border-radius:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#mode-indicator{display:none}#game-mode-label{font-family:Orbitron,sans-serif;font-size:.55rem;letter-spacing:.1em;color:var(--accent-magenta);padding:.2rem .5rem;border:1px solid var(--accent-magenta);border-radius:10px}#player-indicator{display:flex;align-items:center;gap:var(--space-xs)}.player-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}#current-player{font-family:Orbitron,sans-serif;font-size:1.25rem;font-weight:900;line-height:1;transition:all .2s ease}#current-player.player-x{color:var(--accent-cyan);text-shadow:var(--glow-cyan)}#current-player.player-o{color:var(--accent-magenta);text-shadow:var(--glow-magenta)}#score-board{display:flex;align-items:center;gap:var(--space-sm)}.score{display:flex;align-items:center;gap:.2rem}.score-label{font-family:Orbitron,sans-serif;font-size:.7rem;font-weight:700}.player-x-score .score-label{color:var(--accent-cyan)}.player-o-score .score-label{color:var(--accent-magenta)}.score span:last-child{font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:700}.score-divider{font-family:Orbitron,sans-serif;font-size:.9rem;color:var(--text-muted);margin:0 -2px}#your-role{display:flex;align-items:center;gap:var(--space-xs)}#your-role.hidden{display:none}.role-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}#role-value{font-family:Orbitron,sans-serif;font-size:1rem;font-weight:900}#role-value.player-x{color:var(--accent-cyan)}#role-value.player-o{color:var(--accent-magenta)}#turn-indicator{padding:.2rem .5rem;background:#00f5ff1a;border:1px solid var(--accent-cyan);border-radius:10px}#turn-indicator.hidden{display:none}#turn-indicator.your-turn{animation:turnPulse 1s ease-in-out infinite}#turn-indicator.waiting{background:#ff00aa1a;border-color:var(--accent-magenta)}#turn-text{font-family:Orbitron,sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}#turn-indicator.your-turn #turn-text{color:var(--accent-cyan)}#turn-indicator.waiting #turn-text{color:var(--accent-magenta)}@keyframes turnPulse{0%,to{opacity:1}50%{opacity:.6}}#timers-container{display:flex;justify-content:center;gap:var(--space-lg);margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#0000004d;border-radius:8px;border:1px solid rgba(255,255,255,.1)}#timers-container.hidden{display:none}.player-timer{display:flex;align-items:center;gap:var(--space-xs);opacity:.5;transition:opacity .3s ease}.player-timer.active{opacity:1}.timer-label{font-family:Orbitron,sans-serif;font-size:.65rem;font-weight:700;min-width:22px;text-align:center}#timer-p1 .timer-label{color:var(--accent-cyan)}#timer-p2 .timer-label{color:var(--accent-magenta)}.timer-bar{width:50px;height:5px;background:#ffffff1a;border-radius:3px;overflow:hidden}.timer-fill{height:100%;border-radius:3px;transition:width .1s linear,background-color .3s ease;width:100%}.timer-fill[data-player=x]{background:var(--accent-cyan)}.timer-fill[data-player=o]{background:var(--accent-magenta)}.timer-fill.warning{background:var(--accent-gold)!important}.timer-fill.critical{background:#f36!important;animation:timerPulse .5s ease-in-out infinite}@keyframes timerPulse{0%,to{opacity:1}50%{opacity:.6}}.timer-text{font-family:Orbitron,sans-serif;font-size:.75rem;font-weight:700;min-width:18px;text-align:center;color:var(--text-primary);transition:color .3s ease}.timer-text.warning{color:var(--accent-gold)}.timer-text.critical{color:#f36}#timer-select,#ai-timer-select,#remote-timer-select{width:100%;animation:slideUp .25s ease}#timer-select.hidden,#ai-timer-select.hidden,#remote-timer-select.hidden{display:none}#timer-buttons,#ai-timer-buttons,#remote-timer-buttons{display:flex;gap:var(--space-sm);justify-content:center;margin-bottom:var(--space-md)}.timer-btn{flex:1;max-width:70px;padding:var(--space-sm) var(--space-md);font-family:Orbitron,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.05em;color:var(--text-primary);background:transparent;border:1px solid rgba(0,245,255,.3);border-radius:6px;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.timer-btn:active,.timer-btn.selected{background:#00f5ff26;border-color:var(--accent-cyan)}.timer-btn[data-timer="0"]{border-color:#fff3}.timer-btn[data-timer="0"]:active,.timer-btn[data-timer="0"].selected{background:#ffffff1a;border-color:var(--text-muted)}.difficulty-btn{display:flex;flex-direction:column;align-items:center;gap:.15rem}.diff-name{font-size:inherit}.diff-timer{font-size:.5rem;font-weight:400;color:var(--text-muted);letter-spacing:.05em}#message{margin-top:var(--space-md);padding:var(--space-sm) var(--space-lg);font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;background:#12121af2;border:2px solid var(--accent-gold);border-radius:6px;color:var(--accent-gold);animation:messagePop .3s ease}#message.hidden{display:none}@keyframes messagePop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}#game-buttons{margin-top:auto;display:flex;gap:var(--space-sm);pointer-events:auto}#reset-btn,#menu-btn{padding:var(--space-sm) var(--space-lg);font-family:Orbitron,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary);background:transparent;border-radius:4px;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}#reset-btn{border:1px solid var(--accent-cyan)}#menu-btn{border:1px solid var(--accent-magenta)}#reset-btn:active{background:#00f5ff33}#menu-btn:active{background:#f0a3}#mode-select-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#0a0a0ff7;z-index:100;padding:var(--space-lg);padding-bottom:calc(var(--space-lg) + env(safe-area-inset-bottom,0));overflow-y:auto}#mode-select-overlay.hidden{display:none}#mode-select-panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);width:100%;max-width:360px}#mode-select-panel h1{font-size:1.3rem;letter-spacing:.2em;margin-bottom:0}.mode-subtitle{font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted);margin-top:-.5rem}#mode-buttons{display:flex;flex-direction:column;gap:var(--space-md);width:100%}.mode-btn{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:#12121acc;border:1px solid rgba(0,245,255,.25);border-radius:10px;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.mode-btn:active{background:#00f5ff1a;border-color:var(--accent-cyan)}.mode-btn.selected{border-color:var(--accent-magenta)}.mode-icon{font-size:1.5rem}.mode-info{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}.mode-title{font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:700;color:var(--text-primary);letter-spacing:.08em}.mode-desc{font-size:.7rem;color:var(--text-muted)}#pvp-type-select{width:100%;animation:slideUp .25s ease}#pvp-type-select.hidden{display:none}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#pvp-type-buttons{display:flex;gap:var(--space-md)}.pvp-type-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:var(--space-md);background:#12121acc;border:1px solid rgba(0,245,255,.25);border-radius:10px;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.pvp-type-btn:active{background:#00f5ff1a;border-color:var(--accent-cyan)}.pvp-icon{font-size:1.3rem}.pvp-title{font-family:Orbitron,sans-serif;font-size:.75rem;font-weight:700;color:var(--text-primary);letter-spacing:.08em}.pvp-desc{font-size:.6rem;color:var(--text-muted)}#difficulty-select{width:100%;animation:slideUp .25s ease}#difficulty-select.hidden{display:none}.difficulty-label{text-align:center;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);margin-bottom:var(--space-md)}#difficulty-buttons{display:flex;gap:var(--space-sm)}.difficulty-btn{flex:1;padding:var(--space-sm) var(--space-md);font-family:Orbitron,sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.08em;color:var(--text-primary);background:transparent;border:1px solid rgba(255,0,170,.3);border-radius:6px;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.difficulty-btn:active{background:#ff00aa26}#remote-setup{width:100%;animation:slideUp .25s ease}#remote-setup.hidden{display:none}.section-label{text-align:center;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:var(--space-sm)}.action-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;padding:var(--space-md) var(--space-lg);font-family:Orbitron,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--text-primary);background:#00f5ff1a;border:1px solid var(--accent-cyan);border-radius:8px;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.action-btn:active{background:#00f5ff40}.or-divider{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-lg) 0;color:var(--text-muted)}.or-divider:before,.or-divider:after{content:"";flex:1;height:1px;background:#ffffff26}.or-divider span{font-family:Orbitron,sans-serif;font-size:.6rem;letter-spacing:.15em}.input-group{display:flex;gap:var(--space-sm)}.input-group input{flex:1;padding:var(--space-sm) var(--space-md);font-family:Orbitron,sans-serif;font-size:.9rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-primary);background:#12121acc;border:1px solid rgba(0,245,255,.3);border-radius:6px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input-group input:focus{border-color:var(--accent-cyan)}.input-group input::placeholder{color:var(--text-muted);text-transform:none;letter-spacing:.05em;font-size:.75rem}.input-group .action-btn{width:auto;padding:var(--space-sm) var(--space-md);font-size:.7rem}.back-btn{margin-top:var(--space-lg);padding:var(--space-sm) var(--space-md);font-family:Rajdhani,sans-serif;font-size:.75rem;font-weight:500;color:var(--text-muted);background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;-webkit-tap-highlight-color:transparent}#waiting-room{width:100%;animation:slideUp .25s ease}#waiting-room.hidden{display:none}.waiting-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:#12121acc;border:1px solid rgba(0,245,255,.2);border-radius:10px}.waiting-title{font-family:Orbitron,sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.1em;color:var(--accent-cyan)}.room-code-display{display:flex;flex-direction:column;align-items:center;gap:.25rem}.room-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted)}#room-code-value{font-family:Orbitron,sans-serif;font-size:1.5rem;font-weight:900;letter-spacing:.2em;color:var(--accent-gold)}.share-link-container{width:100%}.share-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:var(--space-xs);text-align:center}.link-box{display:flex;gap:var(--space-xs)}.link-box input{flex:1;padding:var(--space-sm);font-family:Rajdhani,sans-serif;font-size:.7rem;color:var(--text-primary);background:#0a0a0fcc;border:1px solid rgba(255,255,255,.2);border-radius:4px;outline:none;min-width:0}.copy-btn{padding:var(--space-sm) var(--space-md);font-family:Orbitron,sans-serif;font-size:.6rem;font-weight:700;color:var(--text-primary);background:#f0a3;border:1px solid var(--accent-magenta);border-radius:4px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}.copy-btn.copied{background:#0f83;border-color:#0f8;color:#0f8}.loading-dots{display:flex;gap:.3rem;justify-content:center}.loading-dots span{width:6px;height:6px;background:var(--accent-cyan);border-radius:50%;animation:loadingDot 1.4s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes loadingDot{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}#connection-status{width:100%;animation:slideUp .25s ease}#connection-status.hidden{display:none}.connecting-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-xl)}#connection-message{font-family:Orbitron,sans-serif;font-size:.75rem;letter-spacing:.08em;color:var(--accent-cyan);text-align:center;line-height:1.5}@media(min-width:480px){:root{--space-md: 1rem;--space-lg: 1.25rem}h1{font-size:1.25rem;letter-spacing:.2em}#status-panel{gap:var(--space-lg);padding:var(--space-md) var(--space-lg)}#mode-indicator{display:block}#current-player{font-size:1.5rem}.score-label{font-size:.8rem}.score span:last-child{font-size:1rem}#reset-btn,#menu-btn{padding:var(--space-sm) var(--space-xl);font-size:.75rem}.mode-btn{padding:var(--space-lg)}.mode-icon{font-size:2rem}.mode-title{font-size:1rem}}@media(min-width:768px){h1{font-size:1.5rem;letter-spacing:.25em;margin-bottom:var(--space-md)}#status-panel{padding:var(--space-md) var(--space-xl)}#current-player{font-size:1.75rem}#reset-btn:hover{background:#00f5ff1a;box-shadow:var(--glow-cyan)}#menu-btn:hover{background:#ff00aa1a;box-shadow:var(--glow-magenta)}.mode-btn:hover{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan);transform:translateY(-2px)}.pvp-type-btn:hover{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.difficulty-btn:hover{background:#ff00aa1a;border-color:var(--accent-magenta)}.action-btn:hover{background:#00f5ff33;box-shadow:var(--glow-cyan)}#mode-select-panel{max-width:420px}#mode-select-panel h1{font-size:1.75rem}}@media(min-width:1024px){#ui-overlay{padding:var(--space-xl)}h1{font-size:1.75rem}#status-panel{gap:var(--space-xl)}#current-player{font-size:2rem}#message{font-size:1rem;padding:var(--space-md) var(--space-xl)}}@supports (padding: max(0px)){#ui-overlay{padding-left:max(var(--space-md),env(safe-area-inset-left));padding-right:max(var(--space-md),env(safe-area-inset-right))}#mode-select-overlay{padding-left:max(var(--space-lg),env(safe-area-inset-left));padding-right:max(var(--space-lg),env(safe-area-inset-right))}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.modal.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:linear-gradient(145deg,#1a1a2ef2,#0f0f1efa);border:2px solid var(--accent-cyan);border-radius:16px;padding:var(--space-xl) var(--space-xxl);text-align:center;max-width:360px;width:90%;box-shadow:0 0 40px #00f5ff4d,inset 0 0 20px #00f5ff0d;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--accent-cyan);margin-bottom:var(--space-md);text-shadow:0 0 20px rgba(0,245,255,.5);letter-spacing:.1em}.modal-content p{font-family:var(--font-body);font-size:1rem;color:#ffffffe6;margin-bottom:var(--space-lg);line-height:1.5}.modal-buttons{display:flex;gap:var(--space-md);justify-content:center;margin-bottom:6px}#cancel-rematch-btn{margin-bottom:6px}.modal-btn{font-family:var(--font-display);font-size:.9rem;font-weight:700;padding:var(--space-sm) var(--space-lg);border:2px solid;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.05em;min-width:100px}.modal-btn.accept{background:#00f5ff1a;border-color:var(--accent-cyan);color:var(--accent-cyan)}.modal-btn.accept:hover{background:#00f5ff40;box-shadow:0 0 20px #00f5ff66;transform:translateY(-2px)}.modal-btn.decline,.modal-btn.cancel{background:#ff00aa1a;border-color:var(--accent-magenta);color:var(--accent-magenta)}.modal-btn.decline:hover,.modal-btn.cancel:hover{background:#ff00aa40;box-shadow:0 0 20px #f0a6;transform:translateY(-2px)}.modal-dots{margin-bottom:var(--space-lg)}#waiting-rematch-modal .modal-content{border-color:var(--accent-magenta);box-shadow:0 0 40px #ff00aa4d,inset 0 0 20px #ff00aa0d}#waiting-rematch-modal .modal-title{color:var(--accent-magenta);text-shadow:0 0 20px rgba(255,0,170,.5)}