:root{color-scheme:light;--ink: #18352f;--muted: #718079;--paper: #f8f4ea;--panel: #fffdf7;--line: #d9d3c4;--x: #e85844;--x-soft: #fff0eb;--o: #247b6b;--o-soft: #e6f5f0;--yellow: #f3c64e;--shadow: 0 24px 60px rgba(34, 56, 49, .13);font-family:Be Vietnam Pro,sans-serif}*{box-sizing:border-box}html{min-width:320px;background:var(--paper)}body{margin:0;min-height:100svh;overflow-x:hidden;color:var(--ink);background:radial-gradient(circle at 10% 15%,rgba(243,198,78,.14),transparent 24rem),radial-gradient(circle at 88% 88%,rgba(36,123,107,.12),transparent 28rem),var(--paper)}button,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,canvas:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.paper-noise{position:fixed;inset:0;pointer-events:none;opacity:.38;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");z-index:10}.topbar{width:min(1440px,calc(100% - 48px));height:92px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(24,53,47,.13);animation:enter-down .6s cubic-bezier(.22,.8,.25,1) both}.brand{justify-self:start;display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-family:Fredoka,sans-serif;font-size:1.55rem}.brand strong{color:var(--x)}.brand-mark{position:relative;width:33px;height:33px;transform:rotate(-7deg)}.brand-mark i,.brand-mark i:after{position:absolute;content:"";left:14px;top:1px;width:5px;height:31px;border-radius:10px;background:var(--x);transform:rotate(45deg)}.brand-mark i:after{left:0;top:0;transform:rotate(90deg)}.brand-mark b{position:absolute;right:-2px;bottom:-1px;width:15px;height:15px;border:4px solid var(--o);border-radius:50%;background:var(--paper)}.tagline{margin:0;color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.quick-actions{justify-self:end;display:flex;gap:8px}.icon-button{width:40px;height:40px;border:1px solid rgba(24,53,47,.16);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;font-size:1.15rem;transition:transform .18s ease,background .18s ease}.icon-button:hover{transform:translateY(-2px);background:#fff}.icon-button.is-muted{color:var(--muted);opacity:.62}.game-layout{width:min(1280px,calc(100% - 48px));min-height:calc(100svh - 92px);margin:0 auto;padding:34px 0 44px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(30px,5vw,72px);align-items:center}.board-zone{min-width:0;animation:enter-up .7s 80ms cubic-bezier(.22,.8,.25,1) both}.turn-banner{display:flex;align-items:center;gap:12px;margin:0 0 15px 6px;min-height:48px}.turn-banner small{display:block;margin-bottom:2px;color:var(--muted);font-size:.62rem;font-weight:800;letter-spacing:.15em}.turn-banner strong{display:block;font-size:clamp(1rem,2vw,1.26rem)}.turn-dot{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;font-family:Fredoka,sans-serif;font-size:1.45rem;transform:rotate(-3deg);transition:all .24s ease}.turn-dot.x-turn{color:var(--x);background:var(--x-soft)}.turn-dot.o-turn{color:var(--o);background:var(--o-soft);transform:rotate(3deg)}.turn-dot.win-turn{color:var(--ink);background:var(--yellow);animation:pulse-win .9s ease-in-out infinite alternate}.board-frame{position:relative;width:min(100%,calc(100svh - 195px));aspect-ratio:1;min-width:300px}#game-board{display:block;width:100%;height:100%;border-radius:clamp(12px,2vw,22px);background:#fffcf3;box-shadow:var(--shadow),inset 0 0 0 1px #18352f1a;cursor:crosshair;touch-action:manipulation}#game-board.is-thinking{cursor:wait}.corner-note{position:absolute;z-index:2;right:-17px;top:-23px;display:grid;place-items:center;width:60px;height:60px;color:var(--ink);background:var(--yellow);border-radius:50% 42% 48% 45%;font:700 1.4rem Fredoka,sans-serif;transform:rotate(9deg);box-shadow:0 8px 24px #82620f33}.keyboard-hint{margin:11px 0 0;color:var(--muted);text-align:center;font-size:.7rem;opacity:.75}.control-panel{padding:20px 0;animation:enter-right .7s .15s cubic-bezier(.22,.8,.25,1) both}.scoreboard{display:grid;grid-template-columns:1fr 48px 1fr;gap:8px;align-items:center}.score-player{display:flex;gap:10px;align-items:center;opacity:.48;transition:opacity .2s ease,transform .2s ease}.score-player:last-child{text-align:right;justify-content:flex-end}.score-player.is-active{opacity:1;transform:translateY(-2px)}.score-player small,.score-divider span{display:block;color:var(--muted);font-size:.57rem;font-weight:800;letter-spacing:.12em;white-space:nowrap}.score-player strong{display:block;margin-top:-2px;font:700 1.8rem Fredoka,sans-serif}.mini-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;font:700 1.4rem Fredoka,sans-serif}.mini-mark.x{color:var(--x);background:var(--x-soft)}.mini-mark.o{color:var(--o);background:var(--o-soft)}.score-divider{text-align:center}.score-divider strong{font:700 1.1rem Fredoka,sans-serif}.rule{height:1px;margin:28px 0;background:#18352f21}.option-group+.option-group{margin-top:27px}.section-label{display:flex;align-items:baseline;gap:9px;margin-bottom:13px}.section-label span{color:var(--x);font:700 .62rem Fredoka,sans-serif}.section-label h2{margin:0;font-size:.9rem}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-button{min-height:76px;padding:12px;border:1px solid rgba(24,53,47,.12);border-radius:15px;display:flex;align-items:center;gap:9px;text-align:left;color:var(--ink);background:#ffffff59;cursor:pointer;transition:border .18s ease,transform .18s ease,background .18s ease}.mode-button:hover{transform:translateY(-2px);border-color:#18352f47}.mode-button.is-selected{border-color:var(--o);background:var(--o-soft);box-shadow:inset 0 0 0 1px var(--o)}.mode-icon{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;color:var(--o);background:#fff;border-radius:50%}.mode-button strong,.mode-button small{display:block}.mode-button strong{font-size:.75rem;white-space:nowrap}.mode-button small{margin-top:3px;color:var(--muted);font-size:.56rem}.difficulty-switch{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border:1px solid rgba(24,53,47,.12);border-radius:13px;background:#ffffff6b}.difficulty-switch button{padding:9px 5px;border:0;border-radius:9px;color:var(--muted);background:transparent;font-size:.71rem;font-weight:700;cursor:pointer;transition:all .18s ease}.difficulty-switch button.is-selected{color:#fff;background:var(--ink);box-shadow:0 4px 12px #18352f33}.difficulty-note{margin:10px 3px 0;color:var(--muted);font-size:.62rem}.difficulty-note span{color:var(--o);font-size:.45rem;vertical-align:2px}#difficulty-group.is-hidden{display:none}.new-game-button{width:100%;padding:15px 18px;border:0;border-radius:14px;display:flex;justify-content:space-between;align-items:center;color:#fff;background:var(--ink);font-weight:700;cursor:pointer;box-shadow:0 9px 22px #18352f38;transition:transform .18s ease,box-shadow .18s ease}.new-game-button:hover{transform:translateY(-3px);box-shadow:0 13px 28px #18352f47}.new-game-button b{font-size:1.25rem;transition:transform .3s ease}.new-game-button:hover b{transform:rotate(90deg)}.tiny-rule{margin:16px 10px 0;color:var(--muted);font-size:.63rem;line-height:1.65;text-align:center}.tiny-rule span{color:var(--yellow)}.confetti{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-20px;width:9px;height:16px;border-radius:2px;animation:confetti-fall 1.8s cubic-bezier(.15,.75,.3,1) forwards}@keyframes enter-down{0%{opacity:0;transform:translateY(-18px)}}@keyframes enter-up{0%{opacity:0;transform:translateY(24px) scale(.985)}}@keyframes enter-right{0%{opacity:0;transform:translate(26px)}}@keyframes pulse-win{to{transform:rotate(3deg) scale(1.08)}}@keyframes confetti-fall{to{transform:translate3d(var(--drift),105vh,0) rotate(540deg)}}@media(max-width:900px){.topbar{height:76px;width:min(100% - 28px,720px)}.tagline{display:none}.topbar{grid-template-columns:1fr auto}.game-layout{width:min(100% - 28px,720px);min-height:auto;padding:24px 0 50px;grid-template-columns:1fr;gap:22px}.board-frame{width:100%;min-width:0}.control-panel{display:grid;grid-template-columns:1fr 1fr;gap:24px 18px;padding:8px 0}.scoreboard,.control-panel>.rule,.new-game-button,.tiny-rule{grid-column:1 / -1}.control-panel>.rule{display:none}.scoreboard{padding-bottom:20px;border-bottom:1px solid rgba(24,53,47,.13)}.option-group+.option-group{margin-top:0}.new-game-button{margin-top:-4px}}@media(max-width:560px){.brand{font-size:1.3rem}.brand-mark{transform:rotate(-7deg) scale(.85);margin-right:-3px}.icon-button{width:36px;height:36px}.turn-banner{margin-left:2px}.corner-note{width:46px;height:46px;right:-8px;top:-12px;font-size:1.1rem}.keyboard-hint{display:none}.control-panel{grid-template-columns:1fr}.scoreboard,.control-panel>.rule,.new-game-button,.tiny-rule{grid-column:auto}.scoreboard{grid-template-columns:1fr 44px 1fr}.mode-button{min-height:70px;padding:10px}.mode-icon{display:none}.mode-button strong{font-size:.7rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}