:root{--bg: #222;--surface: #2a2a2a;--surface-2: #323232;--hairline: #3a3a3a;--text: #e5d0cc;--muted: #a39ea6;--x: #23a254;--o: #bfacb5;--x-tint: rgba(35, 162, 84, .16);--o-tint: rgba(191, 172, 181, .14);--radius: 14px;--ease: cubic-bezier(.65, 0, .35, 1);--font-head: "Oxanium", ui-sans-serif, system-ui, sans-serif;--font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--gutter: 16px;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body{overflow-x:hidden}#root{min-height:100dvh;display:flex;flex-direction:column}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--text);outline-offset:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--radius);border:1px solid var(--hairline);background:var(--surface);color:var(--text);font-weight:500;font-size:15px;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),opacity .2s var(--ease)}.btn:hover:not(:disabled){background:var(--surface-2);border-color:#4a4a4a}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--x);border-color:var(--x);color:#0f2618;font-weight:600}.btn--primary:hover:not(:disabled){background:#29b660;border-color:#29b660}.btn--large{min-height:54px;font-size:17px;padding:0 28px}.btn--block{width:100%}.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}.icon-btn:hover{background:var(--surface);color:var(--text)}.link-btn{border:0;background:none;color:var(--muted);font-size:15px;padding:10px;cursor:pointer;text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:4px;transition:color .2s var(--ease)}.link-btn:hover{color:var(--text);text-decoration-color:var(--muted)}.wordmark{font-family:var(--font-head);font-weight:500;letter-spacing:-.02em;margin:0;font-size:clamp(44px,12vw,76px);line-height:1}.wordmark__no{color:var(--x)}.wordmark--small{font-size:18px;letter-spacing:0}.title{flex:1;display:grid;place-items:center;padding:32px var(--gutter)}.title__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:440px;width:100%}.title__logo{display:grid;grid-template-columns:repeat(3,34px);gap:6px;margin-bottom:10px}.title__logo-cell{width:34px;height:34px;border-radius:9px;background:var(--surface);border:1px solid var(--hairline);display:grid;place-items:center;font-family:var(--font-head);font-size:20px;animation:pop-in .5s var(--ease) both}.title__logo-cell--x{color:var(--x)}.title__logo-cell--o{color:var(--o)}.title__tagline{margin:0 0 14px;color:var(--muted);font-size:16px;line-height:1.5;max-width:34ch}.title__actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.sheet{padding:0;border:1px solid var(--hairline);border-radius:20px;background:var(--surface);color:var(--text);width:min(480px,calc(100vw - 2 * var(--gutter)));max-height:calc(100dvh - 48px);box-shadow:0 24px 80px #00000080}.sheet[open]{animation:sheet-in .35s var(--ease)}.sheet::backdrop{background:#0a0a0a99;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.sheet__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:16px}.sheet__header{display:flex;align-items:center;justify-content:space-between;margin:-6px -10px 0 0}.sheet__header h2{margin:0;font-family:var(--font-head);font-weight:500;font-size:24px}.choice{border:0;margin:0;padding:0}.choice legend{padding:0;margin-bottom:8px;color:var(--muted);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}.segmented{display:grid;gap:8px}.segmented--3{grid-template-columns:repeat(3,1fr)}.segmented--2{grid-template-columns:repeat(2,1fr)}.segmented__option{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:12px;border:1px solid var(--hairline);background:var(--bg);cursor:pointer;text-align:center;transition:border-color .2s var(--ease),background .2s var(--ease)}.segmented__option input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;margin:0;cursor:pointer}.segmented__option:has(input:checked){border-color:var(--x);background:var(--x-tint)}.segmented__option--o:has(input:checked){border-color:var(--o);background:var(--o-tint)}.segmented__option:has(input:focus-visible){outline:2px solid var(--text);outline-offset:2px}.segmented__label{font-weight:600;font-size:15px}.segmented__label--glyph{font-family:var(--font-head);font-weight:500;font-size:26px;line-height:1.1}.segmented__option--x .segmented__label--glyph{color:var(--x)}.segmented__option--o .segmented__label--glyph{color:var(--o)}.segmented__note{font-size:12px;color:var(--muted)}.howto__lead{margin:0;color:var(--muted);line-height:1.5}.howto__list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px;line-height:1.5;font-size:15px}.howto__list li::marker{color:var(--muted);font-family:var(--font-head)}.howto__list strong{color:var(--text);font-weight:600}.howto__keys{margin:0;font-size:13px;color:var(--muted)}kbd{font-family:var(--font-ui);font-size:12px;padding:1px 6px;border-radius:6px;border:1px solid var(--hairline);background:var(--bg)}.send-diagram{display:flex;align-items:center;gap:12px;margin-top:10px;color:var(--muted)}.mini{display:grid;grid-template-columns:repeat(3,18px);gap:3px;padding:5px;border-radius:8px;background:var(--bg);border:1px solid var(--hairline)}.mini__cell{width:18px;height:18px;border-radius:4px;background:var(--surface-2);display:grid;place-items:center;font-family:var(--font-head);font-size:12px}.mini__cell--x{color:var(--x);box-shadow:inset 0 0 0 1px var(--x)}.mini--big{grid-template-columns:repeat(3,22px)}.mini__board{width:22px;height:22px;border-radius:5px;background:var(--surface-2);opacity:.45}.mini__board--lit{opacity:1;box-shadow:inset 0 0 0 1.5px var(--o),0 0 10px #bfacb559}.game{--board: min(calc(100vw - 2 * var(--gutter)), calc(100dvh - 290px) , 640px);--board: max(260px, min(calc(100vw - 2 * var(--gutter)), calc(100dvh - 290px) , 640px));flex:1;width:100%;max-width:calc(var(--board) + 2 * var(--gutter));margin:0 auto;padding:8px var(--gutter) max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;gap:12px}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0 -10px}.topbar__title{display:flex;flex-direction:column;align-items:center;gap:2px}.topbar__mode{font-size:12px;color:var(--muted)}.topbar__actions{display:flex}.chips{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}.chip{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--hairline);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease);opacity:.7;min-width:0}.chip--active,.chip--won{opacity:1}.chip--x.chip--active,.chip--x.chip--won{border-color:var(--x);box-shadow:0 0 0 3px var(--x-tint)}.chip--o.chip--active,.chip--o.chip--won{border-color:var(--o);box-shadow:0 0 0 3px var(--o-tint)}.chip__glyph{font-family:var(--font-head);font-weight:500;font-size:28px;line-height:1;width:24px;text-align:center}.chip--x .chip__glyph{color:var(--x)}.chip--o .chip__glyph{color:var(--o)}.chip__text{display:flex;flex-direction:column;gap:4px;min-width:0}.chip__name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip__pips{display:flex;align-items:center;gap:4px}.pip{width:8px;height:8px;border-radius:50%;background:var(--hairline);transition:background .3s var(--ease),transform .3s var(--ease)}.chip--x .pip--on{background:var(--x)}.chip--o .pip--on{background:var(--o)}.pip--on{animation:pip-in .45s var(--ease)}.chip__count{margin-left:4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.status{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}.status__text{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px}.status__text--thinking{color:var(--muted)}.status__text--thinking .turn-dot{animation:pulse 1s var(--ease) infinite}.turn-dot{width:10px;height:10px;border-radius:50%}.turn-dot--x{background:var(--x)}.turn-dot--o{background:var(--o)}.status__hint{font-size:13px;color:var(--muted)}.status__hint--free{color:var(--text);animation:fade-in .3s var(--ease)}.result{display:flex;flex-direction:column;align-items:center;gap:2px;animation:pop-in .5s var(--ease) both}.result__title{font-family:var(--font-head);font-weight:500;font-size:26px;line-height:1.1}.result--x .result__title{color:var(--x)}.result--o .result__title{color:var(--o)}.result__reason{font-size:13px;color:var(--muted)}.controls{margin-bottom:auto;display:flex;justify-content:center;gap:10px}.controls .btn{flex:1;max-width:200px}.board-wrap{position:relative;width:var(--board);height:var(--board);margin:0 auto;flex:none}.board{--gap: calc(var(--board) * .03);width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--gap)}.board-wrap--busy .board{pointer-events:none}.small{--accent: var(--x);--accent-tint: var(--x-tint);position:relative;border-radius:var(--radius);background:var(--surface);border:1px solid var(--hairline);padding:calc(var(--board) * .012);transition:opacity .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);min-width:0;min-height:0}.turn-o .small{--accent: var(--o);--accent-tint: var(--o-tint)}.small--dim{opacity:.38}.small--active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 22px var(--accent-tint);animation:glow 2.4s var(--ease) infinite}.board-wrap--over .small{opacity:.6}.board-wrap--over .small--win{opacity:1}.cells{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:calc(var(--board) * .008)}.cell{position:relative;display:grid;place-items:center;padding:0;border:0;border-radius:calc(var(--radius) * .55);background:var(--surface-2);cursor:default;min-width:0;min-height:0;font-family:var(--font-head);font-weight:500;font-size:calc(var(--board) * .058);line-height:1;transition:background .2s var(--ease)}.cell--playable{cursor:pointer}.cell--playable:hover{background:#3d3d3d}.cell--playable:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;opacity:0;transition:opacity .15s var(--ease)}@media(hover:hover){.turn-x .cell--playable:hover:after{content:"X";color:var(--x);opacity:.35}.turn-o .cell--playable:hover:after{content:"O";color:var(--o);opacity:.35}}.cell:focus-visible{outline:2px solid var(--text);outline-offset:1px;z-index:2}.cell--x{color:var(--x)}.cell--o{color:var(--o)}.cell--last{box-shadow:inset 0 0 0 1.5px currentColor}.mark{display:block;animation:draw-in .28s var(--ease) both}.claim{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;display:grid;place-items:center;pointer-events:none;animation:claim-fill .6s var(--ease) both}.claim span{font-family:var(--font-head);font-weight:500;font-size:calc(var(--board) * .3);line-height:1;opacity:.8;animation:claim-mark .6s .1s var(--ease) both;text-shadow:0 2px 24px rgba(0,0,0,.35)}.claim--x{background:var(--x-tint);box-shadow:inset 0 0 0 2px #23a2548c}.claim--x span{color:var(--x)}.claim--o{background:var(--o-tint);box-shadow:inset 0 0 0 2px #bfacb580}.claim--o span{color:var(--o)}.small--claimed .cell{background:#3232328c}.small--claimed .mark{opacity:.45}.winline{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.winline line{stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw-line .7s .15s var(--ease) forwards;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}.winline--x line{stroke:#3fd57b}.winline--o line{stroke:#e3d3da}@keyframes draw-in{0%{clip-path:inset(0 70% 0 0);transform:scale(.8) rotate(-6deg)}to{clip-path:inset(0 0 0 0);transform:none}}@keyframes claim-fill{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}@keyframes claim-mark{0%{transform:scale(1.6);opacity:0}}@keyframes draw-line{to{stroke-dashoffset:0}}@keyframes glow{0%,to{box-shadow:0 0 0 1px var(--accent),0 0 14px var(--accent-tint)}50%{box-shadow:0 0 0 1px var(--accent),0 0 28px var(--accent-tint),0 0 0 4px var(--accent-tint)}}@keyframes pop-in{0%{transform:scale(.85);opacity:0}}@keyframes sheet-in{0%{transform:translateY(16px) scale(.98);opacity:0}}@keyframes fade-in{0%{opacity:0}}@keyframes pip-in{0%{transform:scale(.2)}60%{transform:scale(1.5)}}@keyframes pulse{50%{opacity:.25}}@media(min-width:720px){.chip__glyph{font-size:32px}.status__text{font-size:17px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.winline line{stroke-dashoffset:0}}