:root{color-scheme:light;--font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;--color-bg: #f3eee3;--color-bg-deep: #e7ddcb;--color-surface: #fffdf8;--color-surface-muted: #f8f2e7;--color-text: #20242d;--color-muted: #686d78;--color-border: #d8cfbf;--color-border-strong: #bcb09c;--color-cell: #f8f3e9;--color-cell-hover: #efe6d6;--color-cell-press: #e8dcc8;--color-cell-disabled: #f2ecdf;--color-x: #cf4728;--color-x-soft: rgb(207 71 40 / 12%);--color-x-border: rgb(207 71 40 / 26%);--color-o: #24709b;--color-o-soft: rgb(36 112 155 / 12%);--color-o-border: rgb(36 112 155 / 26%);--color-focus: #1e628d;--color-win: #ffe9a8;--color-win-border: #c79a12;--color-win-text: #594300;--color-win-glow: rgb(199 154 18 / 22%);--color-draw: #6f6759;--color-white: #fffdf9;--page-pad-block: clamp(1rem, 4vw, 2.5rem);--page-pad-inline: clamp(.75rem, 3vw, 2rem);--gap: clamp(.4rem, 2vw, .75rem);--stack-gap: clamp(.9rem, 3vw, 1.4rem);--board-width: min(100%, 30rem);--content-width: min(100%, 32rem);--radius-sm: .65rem;--radius-md: 1rem;--radius-lg: 1.5rem;--radius-pill: 999px;--shadow-sm: 0 .35rem 1rem rgb(63 49 26 / 8%);--shadow-md: 0 1.25rem 3rem rgb(63 49 26 / 13%);--shadow-control: 0 .5rem 1.25rem rgb(32 36 45 / 18%);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-press: cubic-bezier(.3, .7, .4, 1);--duration-fast: .12s;--duration-base: .18s;--duration-mark: .26s;--duration-win: .46s}@supports (height: 100svh){:root{--board-width: min(100%, 30rem, 64svh)}}*,*:before,*:after{box-sizing:border-box}html{min-width:20rem;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-width:20rem;min-height:100vh;min-height:100svh;margin:0;padding:max(var(--page-pad-block),env(safe-area-inset-top,0px)) max(var(--page-pad-inline),env(safe-area-inset-right,0px)) max(var(--page-pad-block),env(safe-area-inset-bottom,0px)) max(var(--page-pad-inline),env(safe-area-inset-left,0px));display:grid;place-items:center;overflow-x:hidden;background:radial-gradient(circle at 12% 8%,rgb(255 253 248 / 90%) 0 18%,transparent 45%),radial-gradient(circle at 88% 92%,rgb(207 71 40 / 9%) 0 12%,transparent 38%),linear-gradient(145deg,var(--color-bg),var(--color-bg-deep));color:var(--color-text);font-family:var(--font-sans);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}::selection{background:var(--color-text);color:var(--color-white)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.app{width:var(--content-width);min-inline-size:0;display:flex;flex-direction:column;align-items:center;gap:var(--stack-gap)}.app>*{max-width:100%}.app>noscript{display:contents}.app__header{max-width:30rem;text-align:center}.app__eyebrow{margin-bottom:.3rem;color:var(--color-x);font-size:clamp(.68rem,2.2vw,.78rem);font-weight:750;letter-spacing:.16em;line-height:1.3;text-transform:uppercase}.title{font-size:clamp(1.9rem,8vw,3rem);font-weight:850;letter-spacing:-.045em;line-height:1.05;text-wrap:balance}.app__subtitle{max-width:27rem;margin:.55rem auto 0;color:var(--color-muted);font-size:clamp(.82rem,2.6vw,.95rem);line-height:1.45;text-wrap:pretty}.notice{width:var(--board-width);padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-muted);font-size:.9rem;text-align:center}.status{--status-dot: var(--color-white);position:relative;max-width:100%;min-width:9.5rem;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.55rem 1.2rem;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--color-text);box-shadow:var(--shadow-sm);color:var(--color-white);font-size:clamp(.95rem,3vw,1.15rem);font-weight:750;line-height:1.25;text-align:center;text-wrap:balance;overflow-wrap:anywhere;transition:background-color var(--duration-base) ease,border-color var(--duration-base) ease,box-shadow var(--duration-base) ease,color var(--duration-base) ease,transform var(--duration-base) var(--ease-out)}.status:before{content:"";flex:none;width:.55em;height:.55em;border-radius:50%;background:var(--status-dot);box-shadow:0 0 0 .18em #ffffff24;transition:background-color var(--duration-base) ease,box-shadow var(--duration-base) ease}.status--x{--status-dot: var(--color-x);box-shadow:var(--shadow-sm),inset 0 -.2rem 0 var(--color-x)}.status--o{--status-dot: #57b6df;box-shadow:var(--shadow-sm),inset 0 -.2rem 0 var(--color-o)}.status--win{--status-dot: var(--color-win-border);border-color:var(--color-win-border);background:var(--color-win);box-shadow:0 .55rem 1.5rem var(--color-win-glow);color:var(--color-win-text)}.status--win:before{box-shadow:0 0 0 .18em #5943001f}.status--draw{--status-dot: var(--color-draw);border-color:var(--color-border-strong);background:var(--color-surface);box-shadow:var(--shadow-sm);color:var(--color-text)}.status--draw:before{box-shadow:0 0 0 .18em #6f67591f}.status--pulse{animation:status-pulse .28s var(--ease-out)}.scoreboard{width:var(--board-width);display:grid;gap:.55rem;padding:.7rem .85rem .8rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}.scoreboard__title{margin:0;color:var(--color-muted);font-size:clamp(.68rem,2.2vw,.78rem);font-weight:800;letter-spacing:.12em;line-height:1.2;text-align:center;text-transform:uppercase}.scoreboard__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:0}.scoreboard__item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem .35rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-muted)}.scoreboard__item--x{border-color:var(--color-x-border)}.scoreboard__item--o{border-color:var(--color-o-border)}.scoreboard__label{color:var(--color-muted);font-size:clamp(.68rem,2.2vw,.78rem);font-weight:700;line-height:1.2;text-align:center}.scoreboard__value{margin:0;font-size:clamp(1.2rem,4vw,1.55rem);font-variant-numeric:tabular-nums;font-weight:850;line-height:1.1}.scoreboard__value--x{color:var(--color-x)}.scoreboard__value--o{color:var(--color-o)}.scoreboard__value--draw{color:var(--color-draw)}@media (max-width: 22.5rem){.scoreboard{padding:.55rem .6rem .6rem}.scoreboard__label{font-size:.65rem}}@media (max-height: 40rem){.scoreboard{gap:.35rem;padding:.45rem .6rem .5rem}}@media (orientation: landscape) and (max-height: 32rem){.scoreboard{grid-area:score;width:100%;gap:.2rem;padding:.25rem .45rem .3rem}.scoreboard__title{display:none}.scoreboard__list{gap:.3rem}.scoreboard__item{flex-direction:row;justify-content:center;gap:.35rem;padding:.15rem .25rem}.scoreboard__label{font-size:.7rem}.scoreboard__value{font-size:.95rem}}.board{position:relative;width:var(--board-width);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--gap);padding:var(--gap);border:1px solid rgb(188 176 156 / 55%);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-md);isolation:isolate;touch-action:manipulation;transition:border-color .24s ease,box-shadow .26s ease}.board--win{border-color:#c79a128c;box-shadow:var(--shadow-md),0 0 0 .3rem #c79a121a}.board--draw{border-color:var(--color-border-strong)}.board--over .cell,.board--over .cell:hover{cursor:default}.cell{position:relative;min-width:0;min-height:2.75rem;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:var(--radius-md);background:var(--color-cell);color:var(--color-text);font-family:inherit;font-size:clamp(2.25rem,13vmin,4.25rem);font-weight:850;line-height:1;cursor:pointer;overflow:hidden;appearance:none;-webkit-appearance:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease,box-shadow var(--duration-base) ease,color var(--duration-base) ease,opacity var(--duration-base) ease,transform var(--duration-fast) var(--ease-press)}.cell__mark{position:relative;z-index:1;display:block;font-size:1em;line-height:1;transform-origin:center;pointer-events:none}.cell--x{border-color:var(--color-x-border);background:var(--color-x-soft);color:var(--color-x)}.cell--o{border-color:var(--color-o-border);background:var(--color-o-soft);color:var(--color-o)}.cell--x .cell__mark{animation:mark-x-in var(--duration-mark) var(--ease-out) both}.cell--o .cell__mark{animation:mark-o-in var(--duration-mark) var(--ease-out) both}.cell.is-disabled,.cell[aria-disabled=true]{cursor:default}.cell.is-disabled:not(.cell--x):not(.cell--o):not(.cell--win){background:var(--color-cell-disabled)}@media (hover: hover) and (pointer: fine){.cell:not(.is-disabled):hover{border-color:var(--color-border);background:var(--color-cell-hover)}}.cell:not(.is-disabled):active{background:var(--color-cell-press);transform:scale(.96)}.cell:after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:radial-gradient(circle at center,rgb(255 255 255 / 72%),transparent 62%);opacity:0;transform:scale(.35);transition:opacity .15s ease,transform .22s var(--ease-out);pointer-events:none}.cell:not(.is-disabled):active:after{opacity:.65;transform:scale(1)}.cell:focus-visible,.reset:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.cell:focus-visible{z-index:2}.cell--invalid{animation:cell-invalid .26s var(--ease-press)}.cell--win{border-color:var(--color-win-border);background:var(--color-win);color:var(--color-win-text);box-shadow:inset 0 0 0 2px #c79a1259,0 0 1.2rem var(--color-win-glow);animation:win-cell-in var(--duration-win) var(--ease-out) both;animation-delay:calc(var(--win-order, 0) * 70ms)}.cell--win .cell__mark{color:var(--color-win-text);filter:drop-shadow(0 0 .14em rgb(199 154 18 / 30%))}.board--win .cell:not(.cell--win){opacity:.55}.board--draw .cell{background:var(--color-cell-disabled);border-color:transparent}.board--draw .cell__mark{opacity:.82;filter:grayscale(.35)}.controls{width:var(--board-width);display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:var(--gap)}.reset{width:var(--board-width);min-height:3rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.25rem;border:1px solid var(--color-text);border-radius:var(--radius-pill);background:var(--color-text);box-shadow:var(--shadow-control);color:var(--color-white);font-weight:750;letter-spacing:.01em;line-height:1.25;text-align:center;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease,box-shadow var(--duration-base) ease,transform var(--duration-fast) var(--ease-press)}.controls .reset{width:100%}.reset:active{transform:translateY(1px) scale(.99);box-shadow:var(--shadow-sm)}.reset:disabled{opacity:.5;cursor:default}@media (hover: hover) and (pointer: fine){.reset:hover:not(:disabled){border-color:#343b49;background:#343b49}}.score-reset{grid-column:1 / -1;width:100%;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font-weight:700;line-height:1.25;text-align:center;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease,transform var(--duration-fast) var(--ease-press)}.score-reset:active{transform:translateY(1px) scale(.99)}.score-reset:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}@media (hover: hover) and (pointer: fine){.score-reset:hover{border-color:var(--color-text);background:var(--color-cell-hover)}}[hidden],.hidden{display:none!important}.game{display:contents}.setup{width:var(--board-width);display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:clamp(1rem,4vw,1.5rem);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-md);text-align:center}.setup__title{margin:0;font-size:clamp(1.05rem,3.5vw,1.3rem);font-weight:800;letter-spacing:-.02em;line-height:1.2}.setup__label{max-width:24rem;margin:0;color:var(--color-muted);font-size:clamp(.82rem,2.6vw,.95rem);line-height:1.45;text-wrap:pretty}.setup__choices{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:.25rem}.choice{min-height:8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:.9rem .75rem;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-cell);color:var(--color-text);cursor:pointer;appearance:none;-webkit-appearance:none;transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease,box-shadow var(--duration-base) ease,transform var(--duration-fast) var(--ease-press)}.choice__mark{font-size:clamp(2.4rem,11vmin,3.4rem);font-weight:850;letter-spacing:-.04em;line-height:1}.choice__hint{color:var(--color-muted);font-size:clamp(.72rem,2.3vw,.82rem);font-weight:650;line-height:1.25}.choice--x{border-color:var(--color-x-border);color:var(--color-x)}.choice--o{border-color:var(--color-o-border);color:var(--color-o)}.choice:active{transform:scale(.97)}@media (hover: hover) and (pointer: fine){.choice--x:hover{border-color:var(--color-x);background:var(--color-x-soft)}.choice--o:hover{border-color:var(--color-o);background:var(--color-o-soft)}}.choice:focus-visible,.secondary:focus-visible,.strategy select:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.controls .reset{grid-column:1 / -1;width:100%}.strategy{grid-column:1 / -1;width:100%;min-height:2.75rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem .65rem .45rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:var(--shadow-sm);color:var(--color-muted);font-size:.9rem;font-weight:650}.strategy select{min-height:2rem;padding:.25rem .55rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-cell);color:var(--color-text);font:inherit;font-weight:700;cursor:pointer}.secondary{grid-column:1 / -1;width:100%;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font-weight:700;line-height:1.25;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease,transform var(--duration-fast) var(--ease-press)}.secondary:active{transform:translateY(1px) scale(.99)}@media (hover: hover) and (pointer: fine){.secondary:hover{border-color:var(--color-text);background:var(--color-cell-hover)}}@media (max-width: 22.5rem){.choice{min-height:6.75rem;padding:.65rem .45rem}.setup{gap:.6rem;padding:.9rem .75rem}.strategy{font-size:.82rem}}@media (orientation: landscape) and (max-height: 32rem){.app.app--setup{display:flex}.app--setup .setup{width:min(100%,30rem)}}@keyframes status-pulse{0%{opacity:.72;transform:translateY(2px) scale(.985)}55%{opacity:1;transform:translateY(-1px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes mark-x-in{0%{opacity:0;transform:scale(.35) rotate(-24deg)}65%{opacity:1;transform:scale(1.08) rotate(4deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes mark-o-in{0%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.07)}to{opacity:1;transform:scale(1)}}@keyframes win-cell-in{0%{background-color:var(--color-cell);box-shadow:inset 0 0 #c79a1200;transform:scale(.94)}55%{background-color:var(--color-win);box-shadow:inset 0 0 0 3px #c79a1273,0 0 .9rem #c79a124d;transform:scale(1.045)}to{background-color:var(--color-win);box-shadow:inset 0 0 0 2px #c79a1259,0 0 1.2rem var(--color-win-glow);transform:scale(1)}}@keyframes cell-invalid{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}@media (max-width: 22.5rem){:root{--gap: .35rem;--stack-gap: .75rem;--radius-sm: .5rem;--radius-md: .55rem;--radius-lg: 1.1rem}.app__eyebrow{font-size:.64rem}.title{font-size:1.7rem}.app__subtitle{font-size:.78rem}.status{min-height:2.4rem;padding:.45rem .9rem;font-size:.95rem}.cell{font-size:clamp(1.9rem,15vmin,3rem)}.reset,.score-reset{min-height:2.75rem;padding:.6rem 1rem;font-size:.95rem}}@media (max-width: 20rem){:root{--page-pad-inline: .6rem;--gap: .3rem}.title{font-size:1.5rem}.app__subtitle{font-size:.74rem}.status{min-width:8.5rem;font-size:.9rem}}@media (max-height: 40rem){:root{--stack-gap: .7rem;--board-width: min(100%, 30rem, 58svh)}body{padding-block:max(.75rem,env(safe-area-inset-top,0px)) max(.75rem,env(safe-area-inset-bottom,0px))}.app__subtitle{display:none}.title{font-size:clamp(1.45rem,6vh,2rem)}.status{min-height:2.35rem;padding:.4rem 1rem}.reset{min-height:2.75rem}}@media (min-width: 48rem){:root{--content-width: min(100%, 34rem);--board-width: min(100%, 31rem, 54svh)}}@media (min-width: 64rem){:root{--content-width: min(100%, 36rem);--board-width: min(100%, 32rem, 54svh);--stack-gap: clamp(1.1rem, 2vw, 1.6rem)}.title{font-size:clamp(2.4rem,4vw,3.1rem)}}@media (min-width: 80rem){:root{--content-width: min(100%, 38rem);--board-width: min(100%, 33rem, 54svh)}.app__subtitle{max-width:29rem;font-size:1rem}}@media (min-width: 90rem){:root{--content-width: min(100%, 40rem);--board-width: min(100%, 34rem, 54svh);--page-pad-block: 3rem}.title{font-size:3.25rem}}@media (orientation: landscape) and (max-height: 32rem){:root{--gap: .4rem;--stack-gap: .5rem;--board-width: min(100%, 30rem, 72svh)}body{padding:max(.75rem,env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) max(.75rem,env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px))}.app{width:min(100%,44rem);display:grid;grid-template-columns:minmax(11rem,1fr) minmax(0,var(--board-width));grid-template-areas:"header board" "status board" "score board" "controls board";grid-template-rows:auto auto auto auto;align-content:center;align-items:center;justify-items:center;column-gap:clamp(1rem,4vw,2rem);row-gap:.55rem}.app__header{grid-area:header;max-width:20rem}.app__eyebrow,.app__subtitle{display:none}.title{font-size:clamp(1.25rem,5vh,1.7rem)}.status{grid-area:status;min-height:2rem;padding:.25rem .85rem;font-size:.9rem}.board{grid-area:board;width:100%;align-self:center;justify-self:center}.controls{grid-area:controls;width:100%}.reset{min-height:2.5rem;padding:.45rem 1rem;font-size:.9rem}.notice{grid-column:1 / -1;width:100%}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.status--pulse,.cell--x .cell__mark,.cell--o .cell__mark,.cell--win,.cell--invalid{animation:none!important}.cell:not(.is-disabled):active,.reset:active,.score-reset:active{transform:none}}@media (prefers-contrast: more){:root{--color-muted: #4a4f59;--color-border: #8f8574;--color-border-strong: #6f6658;--color-cell: #fffdf8;--color-cell-hover: #f1e8d8;--color-x: #a82e12;--color-o: #14557a;--color-focus: #0b3f5e}.cell{border-color:var(--color-border)}.status{border-color:var(--color-border-strong)}.cell--win{box-shadow:inset 0 0 0 3px var(--color-win-border),0 0 0 3px var(--color-win-border)}}@media (forced-colors: active){.cell,.reset,.score-reset,.status,.scoreboard,.scoreboard__item{border:1px solid CanvasText;forced-color-adjust:none;background:Canvas;color:CanvasText}.cell--x,.cell--o{border-color:Highlight;color:Highlight}.cell--win,.status--win{outline:3px solid Highlight;outline-offset:2px;background:Canvas;color:CanvasText}.cell:focus-visible,.reset:focus-visible,.score-reset:focus-visible{outline:3px solid Highlight}}