:root{--text:#64748b;--text-h:#0f172a;--bg:#f8fafc;--border:#e2e8f0;--code-bg:#f1f5f9;--accent:#2563eb;--accent-bg:#2563eb1a;--accent-border:#2563eb80;--social-bg:#f1f5f980;--shadow:#2563eb14 0 10px 15px -3px, #2563eb0a 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}body{margin:0}#root{text-align:center;box-sizing:border-box;flex-direction:column;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.game-wrapper{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:clamp(16px,4vw,24px);min-height:100svh;padding:clamp(16px,5vw,32px);display:flex}.game-title{font-family:var(--heading,system-ui, sans-serif);letter-spacing:2px;background:linear-gradient(135deg,#1d4ed8,#60a5fa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(1.4rem,5vw,2rem);font-weight:700}.turn-indicator{color:var(--text,#9ca3af);letter-spacing:.5px;font-size:1rem;font-weight:500}.turn-indicator .player-x{color:#2563eb;font-weight:700}.turn-indicator .player-o{color:#7dd3fc;font-weight:700}.grid-container{background:linear-gradient(145deg,#2563eb0f,#60a5fa0f);border-radius:clamp(10px,3vw,16px);gap:clamp(4px,1.5vw,8px);width:fit-content;max-width:90vw;padding:clamp(8px,3vw,16px);display:grid;box-shadow:0 4px 24px #2563eb14,0 1px 4px #2563eb0a}.winner-banner{letter-spacing:.5px;text-align:center;border-radius:12px;padding:10px clamp(16px,5vw,32px);font-size:clamp(1rem,3.5vw,1.25rem);font-weight:700;animation:.35s cubic-bezier(.34,1.56,.64,1) popIn}.winner-banner.player-one{color:#2563eb;background:#2563eb1a;border:1px solid #2563eb40}.winner-banner.player-two{color:#0284c7;background:#60a5fa26;border:1px solid #60a5fa59}.winner-banner.draw-banner{color:#64748b;background:#94a3b81f;border:1px solid #94a3b84d}.game-btn{font-family:var(--heading,system-ui, sans-serif);cursor:pointer;letter-spacing:.5px;-webkit-tap-highlight-color:transparent;border:none;border-radius:10px;padding:10px clamp(20px,5vw,28px);font-size:clamp(.85rem,3vw,.95rem);font-weight:600;transition:all .2s;animation:.35s cubic-bezier(.34,1.56,.64,1) popIn}.game-btn:active{transform:scale(.96)}.restart-btn{color:#fff;background:linear-gradient(135deg,#1d4ed8,#60a5fa);box-shadow:0 2px 12px #2563eb4d}.restart-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px #2563eb73}.draw-btn{color:#64748b;background:#94a3b81a;border:1px solid #94a3b840}.draw-btn:hover{background:#94a3b82e;transform:translateY(-1px)}@keyframes popIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.grid-item{cursor:pointer;width:clamp(48px,15vw,80px);height:clamp(48px,15vw,80px);font-size:clamp(1.1rem,4vw,1.75rem);font-weight:800;font-family:var(--heading,system-ui, sans-serif);color:var(--text,#64748b);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#fff;border:1px solid #2563eb1a;border-radius:clamp(8px,2vw,12px);justify-content:center;align-items:center;transition:all .2s;display:flex}.grid-item:hover{background:#2563eb0a;border-color:#2563eb33;transform:scale(1.04)}.grid-item:active{transform:scale(.97)}.grid-item.cell-x{color:#2563eb;cursor:default;background:#2563eb14;border-color:#2563eb40;box-shadow:0 0 12px #2563eb14}.grid-item.cell-x:hover{transform:none}.grid-item.cell-o{color:#0ea5e9;cursor:default;background:#0ea5e914;border-color:#0ea5e940;box-shadow:0 0 12px #0ea5e914}.grid-item.cell-o:hover{transform:none}