*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;background:#101522;color:#f4f5fb}body{min-height:100dvh}button{font:inherit;cursor:pointer}#app{min-height:100dvh;padding:0 max(16px,env(safe-area-inset-left)) env(safe-area-inset-bottom);background:radial-gradient(ellipse at 50% 0,#282844 0,#171b2a 40%,#101522 100%)}.topbar{height:68px;max-width:1060px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff13}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand strong{display:block;font-size:13px;letter-spacing:.1em}.brand small{display:block;margin-top:3px;color:#9da3ba;font-size:10px}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#927bff,#6650de);display:grid;grid-template-columns:repeat(2,5px);grid-template-rows:repeat(2,5px);gap:5px;align-content:center;justify-content:center;box-shadow:0 7px 20px #725de947}.brand-mark i{background:#fff;border-radius:2px}.top-actions{display:flex;gap:8px}.top-actions button{height:38px;border:1px solid #ffffff1c;border-radius:11px;background:#252b3e;color:#ecedfa;padding:0 13px;font-weight:750}.top-actions button:hover{background:#303752}.top-actions .icon-button{width:40px;padding:0;font-size:18px}.top-actions .fullscreen-button{background:#9a87ff;color:#171529;border-color:#9a87ff}.layout{max-width:960px;margin:0 auto;padding:28px 0 18px;display:grid;grid-template-columns:minmax(0,610px) minmax(235px,280px);gap:25px;align-items:start;justify-content:center}.game-panel{min-width:0;border:1px solid #ffffff16;border-radius:22px;background:linear-gradient(145deg,#1b2030,#191e2d);padding:22px 24px 15px;box-shadow:0 24px 70px #0003}.game-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.eyebrow{font-size:9px;font-weight:900;letter-spacing:.16em;color:#a99aff}.game-heading h1{font-size:22px;letter-spacing:-.035em;margin:5px 0 0}.new-game{border:1px solid #ffffff1a;border-radius:10px;padding:9px 11px;background:#292f43;color:#eaebf7;font-size:10px;font-weight:800;white-space:nowrap}.new-game span{font-size:14px;color:#b9abff;margin-right:4px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0 13px}.mode-button{display:flex;align-items:center;gap:9px;text-align:left;min-width:0;min-height:55px;padding:8px 10px;border:1px solid #ffffff17;border-radius:13px;background:#202638;color:#bfc4d7;transition:.18s}.mode-button:hover{background:#292e42}.mode-button.active{border-color:#9a87ff98;background:linear-gradient(120deg,#393154,#252942);box-shadow:inset 0 0 0 1px #9a87ff21}.mode-icon{flex:0 0 29px;width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:#8875f72b;color:#c4b9ff;font-size:17px}.mode-icon.two{font-size:16px;font-weight:900}.mode-button strong{display:block;font-size:10px;color:#f1f1fa}.mode-button small{display:block;color:#929bb3;font-size:9px;margin-top:3px}.scoreboard{display:grid;grid-template-columns:1fr .82fr 1fr;gap:8px}.score-card{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border:1px solid #ffffff14;border-radius:12px;background:#171d2b;transition:.2s}.score-card.active-player{border-color:#a38fff75;background:#28253d}.score-card.player-x.active-player{border-color:#a38fff75}.score-card.player-o.active-player{border-color:#72d9e875}.player-label{display:flex;align-items:center;gap:7px;color:#c5c9d7;font-size:10px;font-weight:750;min-width:0}.player-label span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-card strong{font-size:21px;font-variant-numeric:tabular-nums}.player-x strong{color:#b4a5ff}.player-o strong{color:#75e2e1}.draw-card{justify-content:space-around;color:#c9cddd}.draw-card strong{color:#e0e2ed}.draw-symbol{color:#b3b8ca;font-size:13px;font-weight:900}.symbol{position:relative;display:inline-block;flex:0 0 auto;width:15px;height:15px}.mini-x:before,.mini-x:after{content:"";position:absolute;left:6px;top:0;width:3px;height:16px;border-radius:3px;background:#b4a5ff;transform:rotate(45deg)}.mini-x:after{transform:rotate(-45deg)}.mini-o{border:3px solid #75e2e1;border-radius:50%}.turn-row{height:39px;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.turn-indicator{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:850;color:#f0eff9}.turn-indicator .mini-x:before,.turn-indicator .mini-x:after{background:#b4a5ff}.status-note{font-size:9px;color:#8790aa}.board{width:min(100%,390px);aspect-ratio:1;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:9px;touch-action:manipulation}.cell{position:relative;min-width:0;min-height:0;border:1px solid #ffffff17;border-radius:17px;background:linear-gradient(145deg,#282d40,#212638);box-shadow:inset 0 1px 0 #ffffff08,0 8px 18px #0002;transition:transform .14s,border-color .14s,background .14s;display:grid;place-items:center;padding:0}.cell:not(:disabled):hover{transform:translateY(-2px);border-color:#9b89ff88;background:linear-gradient(145deg,#323550,#262b40)}.cell:disabled{cursor:default}.cell.mark-x:before,.cell.mark-x:after{content:"";position:absolute;width:11%;height:58%;min-width:7px;border-radius:99px;background:linear-gradient(#c5baff,#8e78fa);box-shadow:0 0 23px #9b87ff3b;transform:rotate(45deg);animation:markIn .18s ease-out}.cell.mark-x:after{transform:rotate(-45deg)}.cell.mark-o:before{content:"";width:46%;height:46%;border:clamp(6px,1.1vw,10px) solid #71dfde;border-radius:50%;box-shadow:0 0 24px #6ce3dd36;animation:markIn .2s ease-out}.cell.winning{border-color:#c5f483;background:linear-gradient(145deg,#354a42,#293a3a);box-shadow:0 0 0 2px #c7f28c25,0 0 28px #a4e97028}.cell.winning.mark-x:before,.cell.winning.mark-x:after{background:#c8f58e}.cell.winning.mark-o:before{border-color:#c8f58e}.cell:focus-visible{outline:2px solid #c2f382;outline-offset:2px}.result-bar{min-height:39px;margin-top:11px;padding:8px 11px;border:1px solid #ffffff12;border-radius:11px;background:#202638;display:flex;align-items:center;gap:8px;color:#b8bfd2;font-size:10px}.result-bar #resultIcon{color:#b4a5ff;font-size:13px}.result-bar button{display:none;margin-left:auto;border:0;background:#a18fff;color:#19172a;padding:7px 9px;border-radius:8px;font-size:9px;font-weight:850;white-space:nowrap}.result-bar.finished{border-color:#ffffff25;background:#252c3c}.result-bar.finished button{display:block}.game-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:0 2px;color:#777f98;font-size:9px}.game-footer button{border:0;background:transparent;color:#9e91e8;font-size:9px;font-weight:800;padding:6px}.side-panel{margin-top:6px;border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(155deg,#21263a,#1a2030);padding:17px 16px;box-shadow:0 16px 40px #0002}.side-title{display:flex;align-items:center;gap:10px;margin-bottom:17px}.side-icon{width:33px;height:33px;display:grid;place-items:center;background:#9280f641;color:#c2b5ff;border-radius:10px;font-size:16px}.side-title strong{display:block;font-size:12px}.side-title small{display:block;color:#8d96ad;font-size:9px;margin-top:3px}.rule{display:flex;align-items:flex-start;gap:10px;margin:13px 0}.rule-number{flex:0 0 22px;width:22px;height:22px;display:grid;place-items:center;border:1px solid #9e8bfd4c;border-radius:7px;color:#bdadff;font-size:8px;font-weight:900}.rule p{margin:1px 0 0;color:#b3bbce;font-size:10px;line-height:1.5}.strategy-tip{display:flex;gap:9px;margin-top:17px;padding:11px;border:1px solid #9a87ff26;border-radius:12px;background:#352f4b57}.tip-sparkle{color:#c2b0ff;font-size:17px}.strategy-tip strong{font-size:10px;color:#d5cbff}.strategy-tip p{margin:4px 0 0;color:#a4a7bf;font-size:9px;line-height:1.45}.difficulty{margin-top:14px;padding-top:13px;border-top:1px solid #ffffff12}.difficulty>strong{display:block;color:#cbd0df;font-size:9px;margin-bottom:8px}.difficulty-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}.difficulty-button{border:1px solid #ffffff16;border-radius:8px;padding:7px 5px;background:#202638;color:#9fa7bc;font-size:8px;font-weight:800}.difficulty-button.active{border-color:#a38fff77;background:#342f4a;color:#d9d0ff}.difficulty>small{display:block;margin-top:7px;color:#77819b;font-size:8px;line-height:1.4}.difficulty.hidden{display:none}.site-footer{max-width:960px;margin:3px auto 0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));border-top:1px solid #ffffff10;display:flex;justify-content:space-between;color:#6c748c;font-size:8px;letter-spacing:.04em}.site-footer span:first-child{font-weight:850;letter-spacing:.13em}@keyframes markIn{from{transform:scale(.5) rotate(0);opacity:.3}to{opacity:1}}.confetti{position:fixed;z-index:30;top:-14px;width:7px;height:11px;border-radius:2px;pointer-events:none;animation:fall 1.5s ease-in forwards}@keyframes fall{to{transform:translate(var(--drift),105vh) rotate(680deg);opacity:.1}}
@media(max-width:760px){#app{padding-inline:max(12px,env(safe-area-inset-left))}.topbar{height:58px}.brand-mark{width:34px;height:34px}.brand strong{font-size:11px}.brand small{font-size:9px}.top-actions button{height:35px;padding:0 10px}.top-actions .icon-button{width:36px}.fullscreen-button span{font-size:9px}.layout{display:block;max-width:510px;padding:13px 0 9px}.game-panel{padding:15px 13px 10px;border-radius:18px}.game-heading h1{font-size:19px}.eyebrow{font-size:8px}.new-game{font-size:9px;padding:8px}.mode-switch{margin:13px 0 10px;gap:6px}.mode-button{min-height:51px;padding:7px}.mode-icon{width:26px;height:26px;flex-basis:26px}.mode-button strong{font-size:9px}.mode-button small{font-size:8px}.scoreboard{gap:5px}.score-card{height:49px;padding:0 8px;border-radius:10px}.player-label{gap:5px;font-size:9px}.score-card strong{font-size:18px}.symbol{width:13px;height:13px}.mini-x:before,.mini-x:after{left:5px;width:3px;height:14px}.mini-o{border-width:2.5px}.turn-row{height:34px}.board{width:min(100%,390px);gap:7px}.cell{border-radius:14px}.result-bar{min-height:36px;font-size:9px;padding:7px 9px}.result-bar button{font-size:8px;padding:7px}.game-footer{font-size:8px;margin-top:7px}.side-panel{display:none}.site-footer{max-width:510px;margin-top:3px}}
@media(max-width:370px){#app{padding-inline:9px}.game-panel{padding:13px 10px 9px}.mode-button{gap:6px}.mode-button strong{font-size:8px}.mode-button small{font-size:7px}.mode-icon{width:23px;height:23px;flex-basis:23px}.player-label{font-size:8px}.score-card{padding-inline:6px}.cell{border-radius:12px}}
:fullscreen{width:100vw;height:100vh;background:#101522}:fullscreen #app{height:100dvh;overflow:auto}