@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0f;--surface: #13131a;--border: #1e1e2a;--border-hover: #2a2a3a;--text: #e8e8ed;--text-muted: #6b6b7b;--accent-x: #6c8cff;--accent-o: #ff6c9d;--accent-win: #6cffa0;--accent-draw: #ffd76c;--radius: 16px}html{font-family:Space Grotesk,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text);background:var(--bg)}body{min-height:100dvh;display:flex;align-items:center;justify-content:center}#root{width:100%;max-width:420px;padding:1.5rem}.game{display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.title-group{text-align:center;margin-bottom:.5rem}.title-group h1{font-size:2.2rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent-x),var(--accent-o));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-muted);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.25rem}.mode-select{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:260px}.mode-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem;font-family:inherit;font-size:1rem;font-weight:500;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s ease}.mode-btn:hover{border-color:var(--border-hover);background:#1a1a24;transform:translateY(-1px)}.mode-btn:active{transform:translateY(0)}.mode-icon{font-size:1.2rem;opacity:.6}.diff-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.diff-easy{background:var(--accent-win)}.diff-medium{background:var(--accent-draw)}.diff-hard{background:var(--accent-o)}.difficulty-easy:hover{border-color:var(--accent-win)}.difficulty-medium:hover{border-color:var(--accent-draw)}.difficulty-hard:hover{border-color:var(--accent-o)}.back-link{font-family:inherit;font-size:.85rem;color:var(--text-muted);background:none;border:none;cursor:pointer;letter-spacing:.08em;transition:color .2s ease}.back-link:hover{color:var(--text)}.top-bar{display:flex;align-items:center;gap:1rem;width:100%}.back-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .2s ease;flex-shrink:0;font-family:inherit}.back-btn:hover{color:var(--text);border-color:var(--border-hover)}.scoreboard{display:flex;flex:1;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}.score{flex:1;display:flex;flex-direction:column;align-items:center;padding:.5rem .25rem}.score+.score{border-left:1px solid var(--border)}.score-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.score-x .score-label{color:var(--accent-x)}.score-o .score-label{color:var(--accent-o)}.score-value{font-size:1.2rem;font-weight:700;line-height:1;margin-top:.15rem}.status{font-size:.85rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);transition:all .3s ease}.status-done{color:var(--accent-win)}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:320px;aspect-ratio:1}.cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:all .2s ease;padding:20%;position:relative;overflow:hidden}.cell:hover:not(:disabled){background:#16161f;border-color:var(--border-hover)}.cell:active:not(:disabled){transform:scale(.96)}.cell:disabled{cursor:default}.cell-filled{cursor:default}.cell-win{border-color:var(--accent-win);background:#0d1f14;box-shadow:0 0 20px #6cffa014}.mark{width:100%;height:100%;fill:none;stroke-linecap:round}.mark-x{stroke:var(--accent-x);stroke-width:3.5;animation:drawX .3s ease forwards}.mark-o{stroke:var(--accent-o);stroke-width:3.5;animation:drawO .3s ease forwards}@keyframes drawX{0%{stroke-dasharray:40;stroke-dashoffset:40;opacity:.5}to{stroke-dasharray:40;stroke-dashoffset:0;opacity:1}}@keyframes drawO{0%{stroke-dasharray:88;stroke-dashoffset:88;opacity:.5}to{stroke-dasharray:88;stroke-dashoffset:0;opacity:1}}.cell-win .mark-x,.cell-win .mark-o{stroke:var(--accent-win)}.play-again{padding:.75rem 2rem;font-family:inherit;font-size:.9rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);background:var(--text);border:none;border-radius:12px;cursor:pointer;transition:all .2s ease;animation:fadeIn .3s ease}.play-again:hover{opacity:.85;transform:translateY(-1px)}.play-again:active{transform:translateY(0)}