*,:before,:after{box-sizing:border-box}:root{--primary:#4f46e5;--primary-dark:#4338ca;--accent:#ec4899;--bg:#f9fafb;--surface:#fff;--text:#111827;--text-muted:#6b7280;--border:#e5e7eb;--shadow:#0000001a;--x-color:#4f46e5;--o-color:#ec4899;--win-bg:#4f46e51a}body{-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.screen{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem 1rem;display:flex}.game-container{width:100%;max-width:500px}.header{text-align:center;margin-bottom:2rem}.header h1{color:var(--primary);margin:0 0 .5rem;font-size:2.5rem}.turn-indicator{color:var(--text-muted);font-size:1.25rem;font-weight:500}.turn-indicator .player{color:var(--text);font-weight:700}.turn-indicator .player.x{color:var(--x-color)}.turn-indicator .player.o{color:var(--o-color)}.board{background:var(--surface);box-shadow:0 4px 6px var(--shadow);border-radius:1rem;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:2rem;padding:1rem;display:grid}.cell{aspect-ratio:1;background:var(--bg);border:3px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.5rem;justify-content:center;align-items:center;font-size:3rem;font-weight:700;transition:all .2s;display:flex}.cell:hover:not(.filled){border-color:var(--primary);background:#f3f4f6;transform:scale(1.05)}.cell:active:not(.filled){transform:scale(.95)}.cell.filled{cursor:not-allowed}.cell.x{color:var(--x-color)}.cell.o{color:var(--o-color)}.cell.winning{background:var(--win-bg);border-color:var(--primary);animation:.5s ease-in-out pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.controls{justify-content:center;display:flex}.restart-btn{background:var(--primary);color:#fff;cursor:pointer;box-shadow:0 2px 4px var(--shadow);border:none;border-radius:.5rem;padding:.875rem 2rem;font-size:1rem;font-weight:600;transition:all .2s}.restart-btn:hover{background:var(--primary-dark);box-shadow:0 4px 8px var(--shadow);transform:translateY(-2px)}.restart-btn:active{transform:translateY(0)}.game-over-overlay{z-index:1000;background:#000000b3;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-modal{background:var(--surface);text-align:center;border-radius:1rem;width:90%;max-width:400px;padding:3rem 2rem;animation:.3s slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.game-over-modal h2{color:var(--primary);margin:0 0 1rem;font-size:2rem}.game-over-modal .winner{margin:1rem 0;font-size:3rem;font-weight:700}.game-over-modal .winner.x{color:var(--x-color)}.game-over-modal .winner.o{color:var(--o-color)}.game-over-modal p{color:var(--text-muted);margin:0 0 2rem;font-size:1.125rem}.play-again-btn{background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 2px 4px var(--shadow);border:none;border-radius:.5rem;padding:1rem 2.5rem;font-size:1.125rem;font-weight:600;transition:all .2s}.play-again-btn:hover{box-shadow:0 4px 8px var(--shadow);background:#db2777;transform:translateY(-2px)}.play-again-btn:active{transform:translateY(0)}@media (width<=640px){.header h1{font-size:2rem}.turn-indicator{font-size:1rem}.cell{font-size:2.5rem}.board{gap:.5rem;padding:.75rem}.game-over-modal{padding:2rem 1.5rem}.game-over-modal h2{font-size:1.5rem}.game-over-modal .winner{font-size:2.5rem}}