@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;min-height:100vh;background:linear-gradient(135deg,#0a0e27,#1a1f3a)}:root{--color-player-x: #00f0ff;--color-player-o: #ff00ff;--color-bg-primary: #0a0e27;--color-bg-secondary: #131935;--color-bg-tertiary: #1e2542;--color-text-primary: #ffffff;--color-text-secondary: #c5d3f0;--color-text-muted: #7889ab;--color-accent-cyan: #00f0ff;--color-accent-magenta: #ff00ff;--color-accent-yellow: #ffff00;--color-accent-green: #00ff88;--color-current-player: #00ff88;--color-win-highlight: #ffff00;--color-hover: #2a3255;--color-border: #2a3562;--color-border-strong: #3d4b7a;--color-border-neon: rgba(0, 240, 255, .5);--color-success: #00ff88;--color-error: #ff0066;--color-warning: #ffaa00;--glow-cyan: 0 0 10px rgba(0, 240, 255, .4), 0 0 20px rgba(0, 240, 255, .2);--glow-magenta: 0 0 10px rgba(255, 0, 255, .4), 0 0 20px rgba(255, 0, 255, .2);--glow-yellow: 0 0 10px rgba(255, 255, 0, .4), 0 0 20px rgba(255, 255, 0, .2);--glow-green: 0 0 10px rgba(0, 255, 136, .4), 0 0 20px rgba(0, 255, 136, .2);--shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, .5);--shadow-md: 0 4px 8px -2px rgba(0, 0, 0, .6);--shadow-lg: 0 10px 20px -5px rgba(0, 0, 0, .7);--shadow-neon: 0 0 30px rgba(0, 240, 255, .3)}:root{--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem}:root{--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700}:root{--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px}:root{--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out}:root{--z-base: 0;--z-dropdown: 1000;--z-modal: 2000;--z-tooltip: 3000}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}kbd{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-neon);border-radius:var(--radius-sm);padding:3px 8px;font-family:JetBrains Mono,monospace;font-size:.875em;color:var(--color-accent-cyan);box-shadow:var(--glow-cyan)}body{background:linear-gradient(135deg,var(--color-bg-primary) 0%,#1a1f3a 100%);color:var(--color-text-primary);position:relative;overflow:hidden;margin:0;padding:0;height:100vh;width:100vw}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(0,240,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,0,255,.1) 0%,transparent 50%);pointer-events:none;z-index:0}#app{display:flex;flex-direction:column;height:100vh;width:100vw;position:relative;z-index:1;overflow:hidden}.game-header{background:#131935f2;backdrop-filter:blur(10px);border-bottom:2px solid var(--color-border-neon);box-shadow:0 4px 20px #00f0ff33;padding:var(--space-md) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);position:relative;flex-shrink:0;z-index:10}.header-title{text-align:center}.header-title h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);background:linear-gradient(135deg,var(--color-accent-cyan),var(--color-accent-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(0,240,255,.3);letter-spacing:.05em;margin:0;line-height:1.2}.scoreboard-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);width:100%}.player-scoreboard{flex:1;display:flex;align-items:center;gap:var(--space-md);background:#1e254299;backdrop-filter:blur(10px);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md);transition:all var(--transition-fast)}.player-scoreboard.player-x{border-left:4px solid var(--color-player-x);box-shadow:0 0 15px #00f0ff33}.player-scoreboard.player-o{border-left:4px solid var(--color-player-o);box-shadow:0 0 15px #f0f3}.player-scoreboard:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00f0ff4d}.player-info{display:flex;flex-direction:column;gap:var(--space-xs);flex:1}.player-label{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0;line-height:1}.player-name-input-compact{width:100%;padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#0a0e27cc;color:var(--color-text-primary);transition:all var(--transition-fast)}.player-name-input-compact:focus{outline:none;border-color:var(--color-accent-cyan);box-shadow:0 0 8px #00f0ff4d}.player-name-input-compact::placeholder{color:var(--color-text-muted);font-size:var(--font-size-xs)}.score-compact{display:flex;gap:var(--space-md)}.score-stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.stat-label{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:1}.current-turn-compact{padding:var(--space-md) var(--space-xl);background:linear-gradient(135deg,var(--color-accent-green),var(--color-accent-cyan));color:var(--color-bg-primary);border-radius:var(--radius-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);box-shadow:0 0 15px #0f86;letter-spacing:.05em;text-transform:uppercase;text-align:center;white-space:nowrap;animation:pulse-glow 2s ease-in-out infinite;flex-shrink:0}@keyframes pulse-glow{0%,to{box-shadow:0 0 15px #0f86;transform:scale(1)}50%{box-shadow:0 0 25px #0f89;transform:scale(1.02)}}.game-arena{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);position:relative;overflow:hidden;min-height:0}#game-board-container{width:min(calc(100vh - 300px),90vw,600px);height:min(calc(100vh - 300px),90vw,600px);aspect-ratio:1;background:#1e254299;backdrop-filter:blur(15px);border:3px solid var(--color-border-neon);border-radius:var(--radius-xl);box-shadow:var(--shadow-neon),var(--shadow-lg);overflow:hidden;cursor:pointer;position:relative;transition:all var(--transition-base)}#game-board-container:hover{box-shadow:0 0 40px #00f0ff66,var(--shadow-lg);transform:scale(1.01)}#game-board-container:focus{outline:3px solid var(--color-accent-cyan);outline-offset:4px}.game-footer{background:#131935f2;backdrop-filter:blur(10px);border-top:2px solid var(--color-border-neon);box-shadow:0 -4px 20px #00f0ff1a;padding:var(--space-md) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);position:relative;flex-shrink:0;z-index:10}.game-status-bar{text-align:center}.game-status-compact{display:inline-block;min-height:32px;padding:var(--space-sm) var(--space-xl);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);border-radius:var(--radius-lg);transition:all var(--transition-base)}.game-status-compact:not(:empty){background:linear-gradient(135deg,var(--color-accent-yellow),var(--color-accent-green));color:var(--color-bg-primary);box-shadow:0 0 20px #f59e0b66;animation:pulse-status 2s ease-in-out infinite}@keyframes pulse-status{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.02)}}.game-status-compact.win{background:linear-gradient(135deg,var(--color-success),var(--color-accent-cyan));box-shadow:0 0 20px #0f86}.game-status-compact.draw{background:linear-gradient(135deg,var(--color-warning),var(--color-accent-yellow));box-shadow:0 0 20px #f59e0b66}.game-controls-bar{display:flex;gap:var(--space-md);justify-content:center;align-items:center;flex-wrap:wrap}.btn-compact{padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);border:2px solid;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);text-transform:uppercase;letter-spacing:.05em;position:relative;overflow:hidden;white-space:nowrap}.btn-compact:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-compact:hover:before{width:300px;height:300px}.btn-compact:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-compact:active{transform:translateY(0)}.btn-compact:focus{outline:2px solid var(--color-accent-cyan);outline-offset:2px}.btn-compact.btn-primary{background:linear-gradient(135deg,var(--color-accent-green),var(--color-accent-cyan));color:var(--color-bg-primary);border-color:var(--color-accent-cyan)}.btn-compact.btn-primary:hover{box-shadow:0 0 15px #00f0ff66;filter:brightness(1.2)}.btn-compact.btn-secondary{background:#1e2542cc;color:var(--color-text-primary);border-color:var(--color-border-neon)}.btn-compact.btn-secondary:hover{background:var(--color-bg-tertiary);box-shadow:0 0 15px #ff00ff4d}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;backdrop-filter:blur(10px);z-index:var(--z-modal);align-items:center;justify-content:center;animation:fadeIn var(--transition-base)}.modal-overlay.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:linear-gradient(135deg,#131935f2,#1e2542f2);backdrop-filter:blur(20px);border:3px solid var(--color-border-neon);border-radius:var(--radius-xl);padding:var(--space-3xl);max-width:500px;width:90%;text-align:center;box-shadow:var(--shadow-neon),0 20px 60px #000c;animation:slideIn var(--transition-slow);position:relative}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-content h2{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-lg);background:linear-gradient(135deg,var(--color-accent-yellow),var(--color-accent-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(255,255,0,.3)}.modal-content p{font-size:var(--font-size-xl);color:var(--color-text-primary);margin-bottom:var(--space-2xl)}.modal-emoji{font-size:4rem;margin-bottom:var(--space-lg);display:block;animation:bounce 1s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.modal-controls{display:flex;gap:var(--space-lg);justify-content:center;flex-wrap:wrap}.modal-help{max-width:600px}.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-lg);margin-bottom:var(--space-2xl)}.help-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:#1e254299;border:1px solid var(--color-border-neon);border-radius:var(--radius-md)}.help-item kbd{margin-bottom:var(--space-xs)}.help-item span{color:var(--color-text-secondary);font-size:var(--font-size-sm);text-align:center}.btn{padding:var(--space-lg) var(--space-2xl);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);border:2px solid;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md);text-transform:uppercase;letter-spacing:.05em;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:hover:before{width:300px;height:300px}.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.btn:active{transform:translateY(-1px)}.btn:focus{outline:2px solid var(--color-accent-cyan);outline-offset:3px}.btn-primary{background:linear-gradient(135deg,var(--color-accent-green),var(--color-accent-cyan));color:var(--color-bg-primary);border-color:var(--color-accent-cyan)}.btn-primary:hover{box-shadow:var(--glow-cyan);filter:brightness(1.2)}.btn-secondary{background:#1e2542cc;color:var(--color-text-primary);border-color:var(--color-border-neon)}.btn-secondary:hover{background:var(--color-bg-tertiary);box-shadow:var(--glow-magenta)}@media(max-width:768px){.game-header{padding:var(--space-sm) var(--space-md)}.header-title h1{font-size:var(--font-size-xl)}.scoreboard-bar{flex-direction:column;gap:var(--space-sm)}.player-scoreboard{padding:var(--space-sm) var(--space-md)}.player-label{font-size:var(--font-size-sm)}.player-name-input-compact{font-size:var(--font-size-xs);padding:4px var(--space-xs)}.stat-value{font-size:var(--font-size-lg)}.current-turn-compact{order:-1;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-base)}.game-arena{padding:var(--space-sm)}#game-board-container{width:min(calc(100vh - 250px),85vw,500px);height:min(calc(100vh - 250px),85vw,500px)}.game-footer{padding:var(--space-sm) var(--space-md)}.game-status-compact{font-size:var(--font-size-base);padding:var(--space-xs) var(--space-md);min-height:28px}.game-controls-bar{gap:var(--space-sm)}.btn-compact{padding:var(--space-xs) var(--space-md);font-size:var(--font-size-sm)}.modal-content{padding:var(--space-2xl);max-width:90%}.modal-content h2{font-size:var(--font-size-3xl)}}@media(max-width:480px){.header-title h1{font-size:var(--font-size-lg)}.scoreboard-bar{gap:var(--space-xs)}.player-scoreboard{flex-direction:column;align-items:flex-start;padding:var(--space-xs) var(--space-sm)}.score-compact{gap:var(--space-sm);width:100%;justify-content:space-around}.current-turn-compact{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm)}.game-arena{padding:var(--space-xs)}#game-board-container{width:min(calc(100vh - 200px),90vw,400px);height:min(calc(100vh - 200px),90vw,400px)}.game-footer{padding:var(--space-xs) var(--space-sm);gap:var(--space-xs)}.game-status-compact{font-size:var(--font-size-sm);padding:4px var(--space-sm);min-height:24px}.game-controls-bar{gap:var(--space-xs)}.btn-compact{padding:6px var(--space-sm);font-size:var(--font-size-xs)}.modal-emoji{font-size:3rem}.help-grid{grid-template-columns:1fr}}@media(max-height:600px)and (orientation:landscape){.game-header{padding:var(--space-xs) var(--space-md)}.header-title h1{font-size:var(--font-size-lg)}.scoreboard-bar{gap:var(--space-xs)}.player-scoreboard{padding:var(--space-xs) var(--space-sm)}.current-turn-compact{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm)}.game-arena{padding:var(--space-xs)}#game-board-container{width:min(calc(100vh - 150px),50vw,400px);height:min(calc(100vh - 150px),50vw,400px)}.game-footer{padding:var(--space-xs) var(--space-sm);gap:var(--space-xs)}.game-status-compact{font-size:var(--font-size-sm);padding:4px var(--space-sm);min-height:20px}.btn-compact{padding:4px var(--space-sm);font-size:var(--font-size-xs)}}@media(max-width:360px){.player-label{font-size:var(--font-size-xs)}.stat-label{font-size:.625rem}.stat-value{font-size:var(--font-size-base)}.player-name-input-compact{font-size:.625rem}}*:focus-visible{outline:3px solid var(--color-accent-cyan);outline-offset:2px;border-radius:var(--radius-sm)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.btn:before{display:none}}@media(prefers-contrast:high){.btn,.player-card,#game-board-container,.modal-content{border-width:4px}.game-header,.game-footer{border-width:3px}}