@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500;700;800;900&display=swap";:root{color:#f8fbff;background:#08175d;font-family:Noto Sans SC,ui-rounded,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button{font:inherit}.scene{isolation:isolate;background:radial-gradient(circle at 82% 15%,#4079e4 0,#0000 24%),radial-gradient(circle at 9% 82%,#2749cc 0,#0000 28%),linear-gradient(135deg,#07154f 5%,#142b96 58%,#251787);place-items:center;min-height:100vh;padding:38px 24px;display:grid;position:relative;overflow:hidden}.stars,.stars:before,.stars:after{content:"";z-index:-1;opacity:.72;background-image:radial-gradient(#fff 1px,#0000 1.8px),radial-gradient(#d8e5ff 1px,#0000 1.5px);background-position:5px 12px,36px 26px;background-size:42px 45px,73px 83px;position:absolute;inset:0}.stars:before{opacity:.32;transform:rotate(20deg)}.planet{z-index:-1;filter:blur(.2px);opacity:.78;border-radius:50%;position:absolute}.planet-left{background:radial-gradient(circle at 66% 22%,#75c6ff,#2777e6 42%,#4032b8 72%);width:310px;height:310px;bottom:-130px;left:-150px;box-shadow:0 0 70px #75b8ff}.planet-right{background:radial-gradient(circle at 33% 27%,#9195ff,#4e4cc8 55%,#232080);width:280px;height:280px;top:130px;right:-115px;box-shadow:0 0 70px #9675ff}.planet-ring{z-index:-1;border:18px solid #9a9eff7a;border-radius:50%;width:410px;height:100px;position:absolute;top:186px;right:-140px;transform:rotate(-18deg);box-shadow:0 0 30px #786dff5c}.nebula{z-index:-1;filter:blur(36px);opacity:.55;border-radius:50%;position:absolute}.nebula-one{background:#7d55fc;width:280px;height:180px;top:1%;left:18%}.nebula-two{background:#1cb5e0;width:260px;height:200px;bottom:5%;right:5%}.cute-stars{z-index:-1;pointer-events:none;position:absolute;inset:0}.twinkle{color:#fff2a1;filter:drop-shadow(0 0 8px #ffd35a);animation:2.6s ease-in-out infinite twinkle;position:absolute}.star-a{font-size:30px;top:26%;left:8%}.star-b{color:#ffdd71;font-size:42px;animation-delay:-.8s;bottom:17%;left:13%}.star-c{color:#c89aff;font-size:35px;animation-delay:-1.4s;top:26%;right:9%}.star-d{color:#a8edff;font-size:27px;animation-delay:-.4s;bottom:14%;right:16%}.star-e{font-size:29px;bottom:33%;right:5%}.star-f{color:#c1c0ff;font-size:23px;animation-delay:-1.8s;top:60%;left:4%}@keyframes twinkle{0%,to{opacity:.45;transform:scale(.78)rotate(0)}50%{opacity:1;transform:scale(1.18)rotate(12deg)}}.game-shell{width:min(1110px,100%);position:relative}.hero{align-items:center;height:178px;padding-left:260px;display:flex;position:relative}.robot{z-index:2;filter:drop-shadow(0 15px 11px #02083a99);width:232px;height:auto;position:absolute;bottom:-23px;left:7px}.mascot-star{z-index:3;color:#ffdb72;text-shadow:0 4px #dc9e36,0 0 16px #ffe067;font-size:38px;animation:2.8s ease-in-out infinite bob;position:absolute;bottom:31px;left:20px;transform:rotate(-12deg)}.brand{z-index:1;position:relative;transform:translateY(-8px)}.brand h1{margin:0;line-height:0}.title-art{clip-path:inset(0 0 0 9px);mix-blend-mode:screen;filter:drop-shadow(0 8px 14px #715cff88);width:455px;max-width:100%;height:auto;display:block}.brand p{letter-spacing:.055em;text-shadow:0 2px 7px #0a135e;margin:16px 0 0 4px;font-size:22px;font-weight:900}.brand p i{color:#ffe682;vertical-align:1px;text-shadow:0 0 10px #ffcc57;font-size:.8em;font-style:normal}.shooting-star{width:82px;height:42px;margin:-50px 0 0 24px;position:relative;transform:rotate(-14deg)}.shooting-star:before{content:"";background:linear-gradient(90deg,#0000,#7c5cff,#c2b3ff);border-radius:50% 0 0 50%;width:56px;height:11px;position:absolute;top:23px;left:0;box-shadow:0 0 13px #927aff}.shooting-star b{color:#ffdd63;text-shadow:0 4px #ecab36,0 0 17px #ffe161;font-size:48px;line-height:1;animation:2.6s ease-in-out infinite bob;position:absolute;top:0;right:0}@keyframes bob{0%,to{transform:translateY(0)rotate(-12deg)}50%{transform:translateY(-7px)rotate(5deg)}}.fullscreen-button{color:#e9f6ff;cursor:pointer;background:#284696a8;border:1px solid #9cc2ff;border-radius:15px;place-items:center;width:46px;height:46px;font-size:25px;transition:transform .18s,background .18s;display:grid;position:absolute;top:23px;right:7px;box-shadow:inset 0 1px #ffffff60,0 5px 14px #03093c77}.fullscreen-button:hover{background:#4672d1;transform:translateY(-2px)}.game-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(125deg,#17388bcc,#152c79dc 58%,#30288bd6);border:2px solid #71a1ff;border-radius:38px;grid-template-columns:1.17fr .83fr;gap:34px;padding:34px;display:grid;box-shadow:inset 0 1px #ffffff73,0 25px 70px #0204398f,0 0 45px #5b54ff55}.play-zone{border-right:1px solid #9ebaff77;flex-direction:column;align-items:center;min-width:0;padding-right:34px;display:flex}.turn-pill{color:#bce7ff;letter-spacing:.08em;background:#0d2365;border:1px solid #7195e8;border-radius:100px;margin-bottom:13px;padding:6px 18px;font-size:14px;font-weight:800}.pulse:before{content:"";background:#71f0bd;border-radius:50%;width:8px;height:8px;margin-right:8px;display:inline-block;box-shadow:0 0 8px #71f0bd}.board{aspect-ratio:1;grid-template-columns:repeat(var(--grid-size), minmax(0, 1fr));grid-template-rows:repeat(var(--grid-size), minmax(0, 1fr));background:#081857;border-radius:30px;gap:13px;width:min(100%,536px);padding:13px;display:grid;box-shadow:inset 0 0 0 1px #4570cc,0 16px 24px #06124299}.board-4{gap:11px;padding:12px}.board-5{border-radius:26px;gap:8px;padding:10px}.board-5 .cell{border-radius:14px}.cell{cursor:pointer;min-width:0;min-height:0;color:inherit;background:linear-gradient(135deg,#fffdf4,#f3eadc);border:0;border-radius:20px;place-items:center;padding:0;transition:transform .16s,filter .16s;display:grid;overflow:hidden;box-shadow:inset 0 2px 2px #fff,inset 0 -5px 8px #dacdb9aa,0 7px 12px #02072b50;container-type:inline-size}.cell:not(.occupied):hover{filter:brightness(1.05);transform:translateY(-3px)}.cell.winner{box-shadow:inset 0 0 0 4px #71ffc2,0 0 24px #54ffc1b0}.piece{filter:drop-shadow(0 7px 4px #00123555);font-family:Arial Rounded MT Bold,Arial,sans-serif;font-size:74cqw;font-weight:900;line-height:.8;animation:.2s ease-out land}.x-piece{color:#0000;width:63cqw;height:63cqw;text-shadow:none;filter:drop-shadow(0 7px 4px #00123555);display:block;position:relative}.x-piece:before,.x-piece:after{content:"";background:linear-gradient(#75ceff 0%,#3ba5ff 44%,#1680e7 100%);border-radius:999px;position:absolute;inset:40% -4%;box-shadow:inset 0 4px 3px #ccf2ff96,inset 0 -5px 5px #0862c3b0,0 0 14px #59b9ff77}.x-piece:before{transform:rotate(45deg)}.x-piece:after{transform:rotate(-45deg)}.o-piece{color:#ff7773;text-shadow:0 3px #e34b53,0 0 18px #ff9a8a88}@keyframes land{0%{opacity:.2;transform:scale(.35)rotate(-12deg)}to{opacity:1;transform:scale(1)}}.game-status{text-align:center;color:#c9eaff;min-height:24px;margin:18px 0 0;font-weight:800}.game-status.result{color:#ffee91}.control-zone{flex-direction:column;justify-content:center;gap:20px;display:flex}fieldset{border:0;margin:0;padding:0}legend{letter-spacing:.06em;padding:0 0 12px;font-size:24px;font-weight:900}.segmented{background:#101f61;border:1px solid #91b3ff;border-radius:20px;display:grid;overflow:hidden}.segmented.three{grid-template-columns:repeat(3,1fr)}.segmented.two{grid-template-columns:repeat(2,1fr)}.segmented button{color:#fff;cursor:pointer;background:0 0;border:0;border-right:1px solid #7598e666;padding:14px 8px;font-weight:800;transition:all .2s}.segmented button:last-child{border-right:0}.segmented button.selected{background:linear-gradient(135deg,#55caff,#3985ed);box-shadow:inset 0 1px 4px #d7f8ff77,0 0 15px #4fc7ff88}.start-button,.reset-button{cursor:pointer;letter-spacing:.05em;border-radius:21px;font-weight:900}.start-button{color:#0b3b46;background:linear-gradient(135deg,#b6ffda,#5eedae);border:0;padding:19px;font-size:27px;box-shadow:inset 0 2px 2px #eafff6,0 8px 17px #04135066}.start-button:hover{filter:brightness(1.06)}.start-button span{margin-right:7px;font-size:21px}.reset-button{color:#f6f9ff;background:#213f8a;border:2px solid #7197ff;padding:14px;font-size:19px}.reset-button span{vertical-align:-2px;margin-right:8px;font-size:27px}.scoreboard{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.score{text-align:center;background:#183474;border:1px solid #5f83cc;border-radius:19px;min-height:94px;padding:11px 6px}.score span,.score strong{display:block}.score span{font-weight:800}.score strong{font-size:43px;line-height:1.18}.you strong{color:#62cbff}.draw strong{color:#fff}.cpu{border-color:#ba7fc3}.cpu span,.cpu strong{color:#ff9a98}.clear-score{color:#c6dbff;cursor:pointer;background:0 0;border:0;font-size:13px;text-decoration:underline}.utility-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.sound-toggle,.modal-sound{color:#b9d7ff;cursor:pointer;background:#183474;border:1px solid #6e97ee;border-radius:999px;padding:7px 11px;font-size:13px;font-weight:700}.sound-toggle.on,.modal-sound.on{color:#d7ffef;background:#1d6970;border-color:#6de9b5}.clear-score{flex:none}.result-overlay{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#02082ab8;place-items:center;padding:20px;animation:.28s ease-out overlay-in;display:grid;position:fixed;inset:0}.result-modal{text-align:center;background:radial-gradient(circle at 50% 0,#4c68ba,#0000 34%),linear-gradient(145deg,#284b99,#172b75 62%,#29216e);border:2px solid #8eb6ff;border-radius:36px;width:min(590px,100%);min-height:465px;padding:264px 44px 30px;animation:.42s cubic-bezier(.2,.8,.2,1) modal-in;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff9a,0 28px 80px #00042fb3,0 0 50px #7684ff8f}.celebration-art{object-fit:cover;object-position:center top;mix-blend-mode:screen;pointer-events:none;width:560px;max-width:108%;height:300px;position:absolute;top:-5px;left:50%;transform:translate(-50%)}.result-icon{filter:drop-shadow(0 9px 8px #080c4b88);font-size:110px;position:absolute;top:42px;left:50%;transform:translate(-50%)}.result-modal h2{color:#ffe86f;letter-spacing:.06em;text-shadow:0 4px #b46e19,0 9px 15px #160d5f9c;margin:0;font-size:clamp(34px,6vw,55px);line-height:1.12;position:relative}.result-modal p{color:#f4f8ff;margin:14px 0 23px;font-size:19px;font-weight:800;position:relative}.play-again,.back-settings{cursor:pointer;letter-spacing:.06em;border-radius:19px;width:min(360px,100%);margin:0 auto;font-weight:900;display:block;position:relative}.play-again{color:#0d414c;background:linear-gradient(135deg,#baffd8,#57e9ae);border:0;padding:16px;font-size:24px;box-shadow:inset 0 2px 1px #fff,0 9px 18px #06174b88}.back-settings{color:#f5f8ff;background:#223d8c;border:2px solid #7e9fff;margin-top:12px;padding:11px;font-size:17px}.modal-sound{margin-top:17px;position:relative}.result-modal.lose h2{color:#ffd07b;text-shadow-color:#a55825}.result-modal.draw h2{color:#a6eaff;text-shadow-color:#376bb4}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(22px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=760px){.scene{padding:16px 12px 28px}.hero{height:130px;padding-left:130px}.robot{width:142px;height:auto;bottom:-11px;left:-5px}.mascot-star{font-size:23px;bottom:20px;left:-1px}.title-art{width:290px}.brand p{margin:8px 0 0;font-size:13px}.shooting-star,.cute-stars .star-a,.cute-stars .star-c{display:none}.fullscreen-button{width:38px;height:38px;font-size:21px;top:8px;right:0}.game-card{border-radius:28px;grid-template-columns:1fr;gap:26px;padding:21px}.play-zone{border-bottom:1px solid #9ebaff77;border-right:0;padding:0 0 20px}.control-zone{gap:16px}legend{font-size:20px}.start-button{font-size:22px}.score{min-height:80px}.score strong{font-size:34px}.result-modal{border-radius:29px;min-height:430px;padding:244px 24px 26px}.celebration-art{width:510px}.result-modal p{font-size:16px}.result-icon{font-size:94px;top:32px}}