:root{--x: #e35b3d;--x-glow: rgba(227, 91, 61, .45);--o: #3f8dd4;--o-glow: rgba(63, 141, 212, .42);--win-line: #e7b64b;--win-glow: rgba(231, 182, 75, .55);--win-bg: rgba(231, 182, 75, .18);--well-shadow: rgba(0, 0, 0, .2);--well-hi: rgba(255, 255, 255, .35);--frame-edge: rgba(0, 0, 0, .16)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--x: #ff7a5b;--x-glow: rgba(255, 122, 91, .5);--o: #6cb2f0;--o-glow: rgba(108, 178, 240, .48);--win-line: #f0c85f;--win-glow: rgba(240, 200, 95, .6);--win-bg: rgba(240, 200, 95, .2);--well-shadow: rgba(0, 0, 0, .42);--well-hi: rgba(255, 255, 255, .06);--frame-edge: rgba(0, 0, 0, .4)}}:root[data-theme=dark]{--x: #ff7a5b;--x-glow: rgba(255, 122, 91, .5);--o: #6cb2f0;--o-glow: rgba(108, 178, 240, .48);--win-line: #f0c85f;--win-glow: rgba(240, 200, 95, .6);--win-bg: rgba(240, 200, 95, .2);--well-shadow: rgba(0, 0, 0, .42);--well-hi: rgba(255, 255, 255, .06);--frame-edge: rgba(0, 0, 0, .4)}@property --o-sweep{syntax: "<angle>"; inherits: false; initial-value: 0deg;}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.game{width:min(92vw,412px);display:flex;flex-direction:column;gap:14px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;align-items:center;justify-content:space-between}.title{font-size:clamp(30px,8.5vw,44px);font-weight:800;line-height:1;letter-spacing:-1px}.stats{display:flex;gap:8px}.stat{flex:1;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px 10px;text-align:center}.stat .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.7;font-weight:700}.stat .value{font-size:22px;font-weight:800;line-height:1.1}.stats .stat:nth-child(1) .value{color:var(--x)}.stats .stat:nth-child(2) .value{color:var(--o)}.status{font-size:16px;font-weight:700;text-align:center;min-height:22px;letter-spacing:.2px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2.6vw,12px);background:linear-gradient(160deg,color-mix(in srgb,var(--board-bg) 88%,white 12%),color-mix(in srgb,var(--board-bg) 90%,black 10%));padding:clamp(10px,3vw,14px);border-radius:18px;border:1px solid var(--frame-edge);box-shadow:inset 0 2px 6px var(--well-shadow),inset 0 -1px 1px var(--well-hi),0 10px 26px -14px #00000080}.cell{position:relative;aspect-ratio:1 / 1;border:none;border-radius:12px;background:linear-gradient(160deg,color-mix(in srgb,var(--cell-bg) 92%,white 8%),color-mix(in srgb,var(--cell-bg) 94%,black 6%));cursor:pointer;color:transparent;font-size:1px;box-shadow:inset 0 1px 1px var(--well-hi),inset 0 -2px 5px var(--well-shadow);transition:transform 90ms ease,box-shadow .16s ease,filter .16s ease}.cell:not(.filled):hover{filter:brightness(1.05);box-shadow:inset 0 1px 1px var(--well-hi),inset 0 -2px 5px var(--well-shadow),0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}.cell:not(.filled):active{transform:scale(.96)}.cell.cursor{outline:3px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px}.cell.filled{cursor:default}.cell.filled{animation:place-pop .22s cubic-bezier(.34,1.56,.64,1)}.cell.x:before,.cell.x:after{content:"";position:absolute;inset:0;margin:auto;width:13%;height:58%;border-radius:999px;background:var(--x);box-shadow:0 0 14px -2px var(--x-glow);transform-origin:center}.cell.x:before{transform:rotate(45deg) scaleY(1);animation:x-stroke .2s ease both}.cell.x:after{transform:rotate(-45deg) scaleY(1);animation:x-stroke .2s ease 90ms both}@keyframes x-stroke{0%{transform:rotate(var(--r, 45deg)) scaleY(0);opacity:0}to{opacity:1}}.cell.x:before{--r: 45deg}.cell.x:after{--r: -45deg}.cell.o:before{content:"";position:absolute;inset:0;margin:auto;width:62%;height:62%;border-radius:50%;background:conic-gradient(from -90deg,var(--o) var(--o-sweep),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 9px));mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 9px));filter:drop-shadow(0 0 9px var(--o-glow));animation:o-draw .34s ease forwards}@keyframes o-draw{0%{--o-sweep: 0deg}to{--o-sweep: 360deg}}@keyframes place-pop{0%{transform:scale(.9)}60%{transform:scale(1.03)}to{transform:scale(1)}}.cell.win{background:linear-gradient(160deg,color-mix(in srgb,var(--cell-bg) 70%,var(--win-line) 30%),color-mix(in srgb,var(--cell-bg) 80%,var(--win-line) 20%));box-shadow:inset 0 1px 1px var(--well-hi),inset 0 0 0 2px var(--win-line),0 0 20px -2px var(--win-glow);animation:win-pulse 1.4s ease-in-out infinite}@keyframes win-pulse{0%,to{box-shadow:inset 0 1px 1px var(--well-hi),inset 0 0 0 2px var(--win-line),0 0 14px -3px var(--win-glow)}50%{box-shadow:inset 0 1px 1px var(--well-hi),inset 0 0 0 2px var(--win-line),0 0 26px 1px var(--win-glow)}}.controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.how{font-size:13px;opacity:.82;flex:1}.how b{font-weight:700}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 12px -6px #00000080;transition:filter .12s ease,transform 90ms ease}.btn:hover{filter:brightness(1.06)}.btn:active{filter:brightness(.95);transform:translateY(1px)}@media(prefers-reduced-motion:reduce){.cell.filled,.cell.x:before,.cell.x:after,.cell.o:before,.cell.win{animation:none}.cell.o:before{--o-sweep: 360deg}}