.ttt-body{transition:background-color .22s ease,color .22s ease}.ttt-header .theme-toggle{min-width:52px;min-height:44px;white-space:nowrap}.ttt-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(40px,8vw,120px);padding:clamp(56px,7vw,90px) 0 72px;align-items:start}.ttt-intro h1{margin:0;font-size:clamp(2.8rem,5vw,4.6rem);font-weight:500;line-height:1.04;letter-spacing:-.04em;text-wrap:balance}.ttt-intro h1 span{color:var(--blue)}.ttt-description{margin:24px 0 36px;color:var(--muted);font-size:1.1rem}.ttt-settings fieldset{margin:0;padding:0;border:0}.ttt-settings legend{padding:0;margin-bottom:12px;font-size:1rem;font-weight:600}.starter-options{display:grid;gap:8px;max-width:340px}.starter-options label{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer;transition:border-color .18s ease,background-color .18s ease,color .18s ease}.starter-options label:has(input:checked){border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--canvas));color:var(--ink)}.starter-options label:hover{border-color:var(--blue);color:var(--ink)}.starter-options input{width:18px;height:18px;margin:0;accent-color:var(--blue);flex-shrink:0}.settings-note,.score-note{margin:10px 0 0;color:var(--muted);font-size:.8rem}.ttt-help{max-width:34ch;margin-top:38px;color:var(--muted);font-size:.88rem}.ttt-help p{margin:0 0 12px}.ttt-help a{color:var(--blue)}.round-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;color:var(--muted);font-size:.88rem}.round-heading p{margin:0}.round-heading strong{color:var(--blue);margin-left:4px}.round-heading span{margin:0 8px}.board-wrap{position:relative}.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--muted)}.square{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;padding:25%;border:0;border-radius:0;background:var(--canvas);color:var(--blue);cursor:pointer;transition:background-color .18s ease;touch-action:manipulation}.square[aria-disabled=false]:hover{background:color-mix(in srgb,var(--blue) 8%,var(--canvas))}.square[aria-disabled=true]{cursor:default}.square:focus-visible{outline-offset:-6px;z-index:1}.square[data-mark=O]{color:var(--ink)}.square svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round}.square .mark-stroke{stroke-dasharray:160;stroke-dashoffset:160;animation:draw-mark .34s cubic-bezier(.16,1,.3,1) forwards}.square .cross-second{animation-delay:.09s}.square.is-winner{background:color-mix(in srgb,var(--blue) 10%,var(--canvas))}.winning-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.winning-line line{stroke:var(--blue);stroke-width:3;stroke-linecap:round;opacity:0}.winning-line.is-visible line{opacity:1;stroke-dasharray:400;stroke-dashoffset:400;animation:draw-mark .45s .12s cubic-bezier(.16,1,.3,1) forwards}.game-feedback{display:flex;align-items:center;gap:10px;min-height:58px}.game-feedback p{margin:0;font-weight:500;font-size:1rem}.thinking-dots{display:none;gap:4px}.thinking-dots i{width:4px;height:4px;border-radius:50%;background:var(--blue);animation:thinking 1s ease-in-out infinite}.thinking-dots i:nth-child(2){animation-delay:.15s}.thinking-dots i:nth-child(3){animation-delay:.3s}.ttt-game.is-thinking .thinking-dots{display:flex}.round-actions{display:flex;align-items:center;gap:16px}.round-button{min-height:44px;border:1px solid var(--blue);border-radius:8px;padding:9px 18px;background:var(--blue);color:var(--canvas);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:filter .16s ease,transform .16s ease}.round-button:hover{filter:brightness(1.12)}.round-button:active{transform:translateY(1px)}.round-actions p{margin:0;color:var(--muted);font-size:.82rem}.score-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}.score-heading h2{margin:0;font-size:.95rem;font-weight:500}.score-heading button{min-height:44px;padding:0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.8rem;text-decoration:underline;text-underline-offset:.22em;cursor:pointer}.score-heading button:hover{color:var(--blue)}.scorecard{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0 0}.scorecard div{padding-left:22px;border-left:1px solid var(--line)}.scorecard div:first-child{padding-left:0;border:0}.scorecard dt{color:var(--muted);font-size:.85rem}.scorecard dd{margin:2px 0 0;font-size:2rem;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.scorecard dd.score-changed{animation:score-tick .3s ease-out}.ttt-footer{display:flex;justify-content:space-between;gap:20px;padding:22px 0 28px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}@keyframes draw-mark{to{stroke-dashoffset:0}}@keyframes thinking{0%,to{opacity:.35}50%{opacity:1}}@keyframes score-tick{0%{transform:translateY(4px);opacity:.4}to{transform:translateY(0);opacity:1}}@media(max-width:760px){.ttt-layout{grid-template-columns:1fr;gap:32px;padding:38px 0 48px}.ttt-intro h1{font-size:clamp(2.4rem,9vw,3.8rem)}.ttt-description{margin:16px 0 24px;font-size:1rem}.starter-options{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:6px}.starter-options label{flex-direction:column;align-items:flex-start;gap:8px;padding:10px;font-size:.8rem;line-height:1.35}.ttt-help{margin:22px 0 0;max-width:none;font-size:.8rem}.ttt-help p{margin-bottom:6px}.ttt-game{width:100%;max-width:440px;justify-self:center}.ttt-footer{font-size:.75rem}}@media(prefers-reduced-motion:reduce){.ttt-body,.square,.starter-options label,.round-button{transition:none}.square .mark-stroke{animation:mark-appear .12s linear forwards;stroke-dashoffset:0}.square .cross-second{animation-delay:0s}.winning-line.is-visible line{animation:mark-appear .12s linear forwards;stroke-dashoffset:0}.thinking-dots i,.scorecard dd.score-changed{animation:none}@keyframes mark-appear{0%{opacity:.4}to{opacity:1}}}@media(max-width:420px){.ttt-header nav{display:none}.ttt-header{gap:12px}}