.ttt{--ttt-paper:#fbf7ec;--ttt-rule:#d7e3f0;--ttt-ink:#3b4757;--ttt-x:#1f4fa3;--ttt-o:#c2412d;--ttt-faint-mix:32%;--ttt-active:#f6e7a8;--ttt-strike:#2b2f36;--ttt-edge:#e6dcc3}.ttt[data-palette=night]{--ttt-paper:#1f2633;--ttt-rule:#2a3445;--ttt-ink:#b9c4d6;--ttt-x:#eef2f8;--ttt-o:#f2b45a;--ttt-active:#33405a;--ttt-strike:#ffd66b;--ttt-edge:#121821}.ttt[data-palette=chalk]{--ttt-paper:#2c3d35;--ttt-rule:#33463d;--ttt-ink:#d9e3da;--ttt-x:#f5f7f1;--ttt-o:#f4d77c;--ttt-active:#3b5248;--ttt-strike:#f6a98b;--ttt-edge:#1b2620}.ttt-play{justify-items:center;gap:10px;display:grid}.ttt-match,.ttt-tally,.ttt-message{color:var(--ink);text-align:center;margin:0}.ttt-match{color:var(--muted);font-size:.9rem}.ttt-tally{font-variant-numeric:tabular-nums;font-weight:600}.ttt-paper{justify-items:center;width:100%;display:grid}.ttt-board{--board-chrome:150px;aspect-ratio:1;border:1px solid var(--ttt-edge);background-color:var(--ttt-paper);background-image:linear-gradient(var(--ttt-rule) 1px, transparent 1px), linear-gradient(90deg, var(--ttt-rule) 1px, transparent 1px);background-position:-1px -1px;background-size:20px 20px;border-radius:18px;max-width:480px;position:relative;box-shadow:0 10px 24px #0000001f}.ttt-art,.ttt-cells{width:94%;height:94%;position:absolute;inset:3%}.ttt-art{pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.ttt-line{stroke:var(--ttt-ink);stroke-width:4px}.ttt-board.is-nine .ttt-line{stroke-width:3px}.ttt-board.is-nine .ttt-line.is-heavy{stroke-width:9px}.ttt-active{fill:var(--ttt-active)}.ttt-mark{stroke-width:9px}.ttt-board.is-nine .ttt-mark{stroke-width:8px}.ttt-x{stroke:var(--ttt-x)}.ttt-o{stroke:var(--ttt-o)}.ttt-mark.is-faint{stroke-dasharray:.06 .05}.ttt-x.is-faint{stroke:color-mix(in srgb, var(--ttt-x) var(--ttt-faint-mix), var(--ttt-paper))}.ttt-o.is-faint{stroke:color-mix(in srgb, var(--ttt-o) var(--ttt-faint-mix), var(--ttt-paper))}.ttt-mark.is-new path{stroke-dasharray:1;animation:.2s ease-out both ttt-draw}.ttt-mark.is-new path+path{animation-delay:90ms}.ttt-claim rect{fill:color-mix(in srgb, var(--ttt-paper) 82%, transparent);stroke:none}.ttt-claim :is(path,circle){stroke-width:16px;stroke-dasharray:1;animation:.26s ease-out both ttt-draw}.ttt-strike{stroke:var(--ttt-strike);stroke-width:10px;stroke-dasharray:1;animation:.28s ease-out .12s both ttt-draw}.ttt-board.is-nine .ttt-strike{stroke-width:18px}@keyframes ttt-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.ttt-banner{z-index:1;border:2px solid var(--ttt-ink);background:var(--ttt-paper);color:var(--ttt-ink);white-space:nowrap;pointer-events:none;border-radius:999px;margin:0;padding:8px 18px;font-size:clamp(1.15rem,5cqi,1.6rem);font-weight:800;animation:.22s ease-out .26s both ttt-banner;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-3deg);box-shadow:0 6px 16px #0000002e}@keyframes ttt-banner{0%{opacity:0}}.ttt-cells{grid-template-rows:repeat(var(--board-rows), minmax(0, 1fr));display:grid}.ttt-row{grid-template-columns:repeat(var(--board-cols), minmax(0, 1fr));display:grid}.ttt-row>[role=gridcell]{min-width:0;display:grid}.ttt-cell{cursor:default;background:0 0;border:0;border-radius:10px;width:100%;height:100%;padding:0;transition:background-color .14s}.ttt-cell.is-open{cursor:pointer}.ttt-cell:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}@media (hover:hover) and (pointer:fine){.ttt-cell.is-open:hover{background:color-mix(in srgb, var(--ttt-x) 10%, transparent)}}.ttt-message{max-width:34rem;min-height:2.6em}.ttt-choices{border:0;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px;margin:0 0 12px;padding:0;display:grid}.ttt-choices.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ttt-choices legend{color:var(--ink);margin-bottom:4px;padding:0;font-size:.9rem;font-weight:700}.ttt-choices .game-button{text-align:center;justify-content:center;min-width:0;min-height:44px;padding:6px 10px;font-size:.95rem}.ttt-choices .game-button[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}.ttt-hint{color:var(--muted);grid-column:1/-1;margin:2px 0 0;font-size:.88rem}.ttt-note{color:var(--ink)}@container game (height<=460px){.ttt-match,.ttt-message{display:none}.ttt-play{gap:6px}.ttt-board{--board-chrome:40px}.ttt-board.is-nine{--board-min-cell:22px}}@media (prefers-reduced-motion:reduce){.ttt-mark.is-new path,.ttt-claim :is(path,circle),.ttt-strike,.ttt-banner{animation:none}.ttt-cell{transition:none}}