.mark{width:100%;height:100%;overflow:visible}.mark__stroke{fill:none;stroke-width:9px;stroke-linecap:round;transform-origin:50%;transform:rotate(-90deg)}.mark--x .mark__stroke{stroke:var(--x-color)}.mark--o .mark__stroke{stroke:var(--o-color)}.mark:not(.mark--ghost) .mark__stroke{stroke-dasharray:160;stroke-dashoffset:0;animation:mark-draw var(--duration-base) var(--ease-out) backwards}.mark:not(.mark--ghost) .mark__stroke--2{animation-delay:calc(var(--duration-base) * .45)}@keyframes mark-draw{0%{stroke-dashoffset:160px}to{stroke-dashoffset:0}}.mark--ghost{opacity:.22}.mark--ghost .mark__stroke{stroke-dasharray:none;stroke-dashoffset:0}.square{--tile-padding:17%;aspect-ratio:1;padding:var(--tile-inset);transition:opacity var(--duration-base) var(--ease-out);display:block}.square:not(.square--playable){cursor:default}.square__tile{width:100%;height:100%;padding:var(--tile-padding);background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-tile);box-shadow:var(--shadow-tile);transition:transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-out);place-items:center;display:grid;position:relative}@media (hover:hover){.square--playable:hover .square__tile{box-shadow:var(--shadow-tile-hover);transform:translateY(-3px)}}.square--playable:active .square__tile{box-shadow:var(--shadow-tile);transition-duration:var(--duration-fast);transform:scale(.96)}.square__ghost{inset:var(--tile-padding);opacity:0;transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-spring);pointer-events:none;position:absolute;transform:scale(.85)}@media (hover:hover){.square--playable:hover .square__ghost{opacity:1;transform:scale(1)}}.square--playable:focus-visible .square__ghost{opacity:1;transform:scale(1)}.square--winning .square__tile{box-shadow:var(--shadow-tile-hover);transform:translateY(-4px)}.square--dimmed{opacity:.4}.winning-line{width:100%;height:100%;overflow:visible}.winning-line__stroke{fill:none;stroke-width:2.2px;opacity:.9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:winning-line-draw var(--duration-slow) var(--ease-out) backwards;animation-delay:var(--duration-base)}.winning-line__stroke--x{stroke:var(--x-color)}.winning-line__stroke--o{stroke:var(--o-color)}@keyframes winning-line-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.board-wrap{width:var(--board-width);position:relative}.board{aspect-ratio:1;grid-template-rows:repeat(3,1fr);display:grid}.board__row{grid-template-columns:repeat(3,1fr);display:grid}.board-wrap>.winning-line{pointer-events:none;position:absolute;inset:0}.scoreboard{gap:var(--tile-gap);width:var(--board-width);padding-inline:var(--tile-inset);grid-template-columns:repeat(3,1fr);display:grid}.score{padding:var(--space-3) var(--space-2);background-color:var(--surface);border-radius:var(--radius-panel);box-shadow:var(--shadow-tile);transition:border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-out);border:1px solid #0000;flex-direction:column;align-items:center;gap:2px;display:flex}.score--active{box-shadow:var(--shadow-tile-hover);transform:translateY(-2px)}.score--x.score--active{border-color:var(--x-color)}.score--o.score--active{border-color:var(--o-color)}.score__label{letter-spacing:.09em;text-transform:uppercase;height:20px;color:var(--text-faint);justify-content:center;align-items:center;font-size:.7rem;font-weight:600;display:flex}.score__mark{width:20px;height:20px;display:block}.score__mark .mark--ghost{opacity:1}.score__value{font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:650;line-height:1.2}.score--x .score__value{color:var(--x-text)}.score--o .score__value{color:var(--o-text)}.score--draws .score__value{color:var(--text-muted)}.status{min-height:2rem;color:var(--text-muted);justify-content:center;align-items:center;font-size:1.05rem;font-weight:550;display:flex}.status__body{align-items:center;gap:var(--space-2);animation:status-in var(--duration-base) var(--ease-spring) both;display:inline-flex}.status__mark{width:18px;height:18px;display:block}.status__mark .mark--ghost{opacity:1}.status--settled .status__text{color:var(--text);font-size:1.15rem;font-weight:650}@keyframes status-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.app{align-items:center;gap:clamp(var(--space-4), 3vh, var(--space-5));min-height:100dvh;padding:var(--space-6) var(--space-4);padding-top:max(var(--space-6), env(safe-area-inset-top));padding-bottom:max(var(--space-6), env(safe-area-inset-bottom));flex-direction:column;justify-content:center;display:flex}.app__header{text-align:center}.app__title{letter-spacing:-.02em;font-size:clamp(1.5rem,6vw,1.9rem);font-weight:680}.app--resetting .mark,.app--resetting .winning-line{opacity:0;transition:opacity var(--duration-base) var(--ease-out)}.app--resetting .square--dimmed{opacity:1}.app__actions{align-items:center;gap:var(--space-3);min-height:2.75rem;display:flex}.button{border-radius:var(--radius-pill);transition:transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);animation:button-in var(--duration-base) var(--ease-spring) both;padding:.65rem 1.35rem;font-size:.95rem;font-weight:600}.button--primary{background-color:var(--text);color:var(--bg);box-shadow:var(--shadow-tile)}.button--quiet{color:var(--text-faint)}@media (hover:hover){.button--primary:hover{box-shadow:var(--shadow-tile-hover);transform:translateY(-2px)}.button--quiet:hover{color:var(--text);background-color:var(--surface-sunken)}}.button:active{transition-duration:var(--duration-fast);transform:scale(.97)}@keyframes button-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}:root{--bg:#f4f4f1;--bg-glow:#fff;--surface:#fff;--surface-sunken:#eeeeea;--border:#d5d5cd;--text:#1e222b;--text-muted:#5c6270;--text-faint:#666c7a;--x-color:#5b5bd6;--x-text:#5b5bd6;--x-soft:#5b5bd61a;--o-color:#d97316;--o-text:#b45c0a;--o-soft:#d973161a;--tile-inset:clamp(.25rem, 1.25vw, .375rem);--tile-gap:calc(var(--tile-inset) * 2);--board-width:min(86vw, 340px);--radius-tile:22px;--radius-panel:28px;--radius-pill:999px;--shadow-tile:0 1px 2px #181c260a, 0 4px 12px #181c260d;--shadow-tile-hover:0 2px 4px #181c260d, 0 10px 24px #181c2617;--shadow-panel:0 2px 8px #181c260a, 0 20px 48px #181c2612;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.22, 1, .36, 1);--duration-fast:.14s;--duration-base:.22s;--duration-slow:.38s;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:2.75rem}@media (prefers-color-scheme:dark){:root{--bg:#14161c;--bg-glow:#232733;--surface:#1d2029;--surface-sunken:#171a21;--border:#363c49;--text:#f0f1f4;--text-muted:#9aa1ae;--text-faint:#868d9b;--x-color:#9b9bff;--x-text:#9b9bff;--x-soft:#9b9bff21;--o-color:#ffa552;--o-text:#ffa552;--o-soft:#ffa55221;--shadow-tile:0 1px 2px #0000004d, 0 4px 12px #00000040;--shadow-tile-hover:0 2px 4px #00000059, 0 10px 24px #0006;--shadow-panel:0 2px 8px #00000040, 0 20px 48px #00000059}}*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{background-color:var(--bg);background-image:radial-gradient(120% 80% at 50% -10%, var(--bg-glow) 0%, transparent 60%);min-height:100dvh;color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-attachment:fixed;font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.5}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none}:focus-visible{outline:2px solid var(--x-color);outline-offset:3px;border-radius:6px}svg{display:block}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}