:root{color-scheme:dark;--blue:#5bd6ff;--gold:#ffc85d;--ink:#f5f9ff;--muted:#aabbd4}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 18% 0,#2b4e77 0,transparent 34%),radial-gradient(circle at 90% 85%,#633b67 0,transparent 33%),linear-gradient(145deg,#071226,#111d3b 58%,#1b1636)}button{font:inherit}.header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,54px);border-bottom:1px solid #a9d8ff25;background:#071226b8}.brand,.back{color:inherit;text-decoration:none;font-weight:850}.brand{font-size:23px;letter-spacing:-.05em}.brand span{color:var(--blue)}.brand small{font-size:9px;letter-spacing:.15em;border:1px solid #75dfff66;border-radius:5px;padding:4px 6px;margin-left:9px;vertical-align:middle}.back{color:#c8d6e9;font-size:12px}.page{max-width:1060px;margin:auto;padding:24px clamp(10px,3vw,30px) 50px}.intro{text-align:center}.eyebrow{margin:0 0 6px;color:#79ddff;letter-spacing:.24em;font-size:10px;font-weight:900}.intro h1{font-size:clamp(42px,7vw,72px);letter-spacing:-.07em;line-height:1;margin:0}.intro>p:last-child{font-size:13px;color:var(--muted);margin:11px 0 21px}.layout{display:grid;grid-template-columns:minmax(0,630px) minmax(220px,1fr);gap:22px;align-items:start}.game-shell{border:1px solid #a9dfff55;border-radius:26px;padding:14px 16px 24px;background:linear-gradient(155deg,#1e3a66,#111e3a 66%,#24204c);box-shadow:0 34px 90px #000a,inset 0 1px #fff3}.scorebar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.scorebar div{border:1px solid #ffffff24;border-radius:12px;padding:8px;text-align:center;background:#081a378c;color:#a9bbd3;font-size:9px;font-weight:900;letter-spacing:.1em}.scorebar b{display:block;color:#fff;font-size:20px;letter-spacing:0}.stage{perspective:1000px;perspective-origin:50% 28%;padding:12px 35px 36px;touch-action:manipulation;user-select:none}.board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:13px;aspect-ratio:1;padding:17px;border:2px solid #a9e2ff94;border-radius:31px;background:linear-gradient(145deg,#294d78,#142948 65%,#1d2d54);transform:rotateX(13deg) rotateY(-7deg);transform-style:preserve-3d;box-shadow:20px 28px 0 #071125,20px 31px 0 3px #345a89,30px 55px 60px #000b,inset 0 3px 12px #b8e5ff35}.cell{position:relative;border:1px solid #8bcfff55;border-radius:20px;background:linear-gradient(145deg,#0b1d3a,#294a70);box-shadow:inset 4px 5px 12px #040a1c,inset -3px -3px 7px #6d9bca5c;cursor:pointer;transform-style:preserve-3d;color:transparent;overflow:visible}.cell::after{content:"";position:absolute;inset:10%;border-radius:15px;background:radial-gradient(circle at 35% 20%,#87d6ff18,transparent 68%);pointer-events:none}.cell:hover:not(:disabled),.cell:focus-visible:not(:disabled){border-color:#d4f3ff;box-shadow:inset 4px 5px 12px #040a1c,inset -3px -3px 7px #6d9bca5c,0 0 0 3px #6ddaff3b}.cell:focus-visible{outline:0}.piece{position:absolute;z-index:2;inset:18%;transform:translateZ(32px);filter:drop-shadow(7px 13px 7px #0009);animation:pieceIn .32s cubic-bezier(.2,.9,.25,1.35);pointer-events:none}.piece.x::before,.piece.x::after{content:"";position:absolute;left:43%;top:-8%;width:18%;height:116%;border-radius:12px;background:linear-gradient(90deg,#2474cc,#91f1ff 45%,#35bff0 70%,#185db3);box-shadow:inset 3px 0 #c6f8ff90,inset -4px 0 #0e3f8880,0 0 18px #52d7ff55}.piece.x::before{transform:rotate(45deg)}.piece.x::after{transform:rotate(-45deg)}.piece.o{inset:16%;border:clamp(15px,3.8vw,28px) solid var(--gold);border-radius:50%;background:transparent;box-shadow:inset 5px 7px 7px #8a3e35,inset -4px -6px 5px #fff4aa,0 0 19px #ffc96055}.cell.win .piece{animation:winPulse .8s ease-in-out infinite alternate;filter:drop-shadow(0 0 14px #fff) drop-shadow(7px 13px 7px #0008)}@keyframes pieceIn{from{opacity:0;transform:translateZ(80px) scale(.15) rotate(-35deg)}to{opacity:1;transform:translateZ(32px) scale(1)}}@keyframes winPulse{to{transform:translateZ(45px) scale(1.08)}}.status{margin:0 0 11px;text-align:center;color:#dcecff;font-size:13px;font-weight:800;min-height:20px}.status strong.x{color:var(--blue)}.status strong.o{color:var(--gold)}.panel{border:1px solid #b6d9f044;border-radius:21px;padding:20px;background:#172a4d9e;box-shadow:inset 0 1px #fff2}.panel h2{margin:0 0 14px;font-size:18px}.group{margin-bottom:17px}.group>span{display:block;margin-bottom:7px;color:#9db2ce;font-size:9px;font-weight:900;letter-spacing:.14em}.segmented{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.segmented.three{grid-template-columns:repeat(3,1fr)}.segmented button,.actions button{cursor:pointer;border:1px solid #a8cdf044;border-radius:10px;background:#203b63;color:#c5d4e8;padding:9px 7px;font-size:10px;font-weight:850}.segmented button.active{color:#07182d;background:linear-gradient(145deg,#a9efff,#55c9ff);border-color:transparent}.segmented.three button.active{background:linear-gradient(145deg,#ffe9a3,#ffbd55)}.actions{display:flex;gap:8px;margin-bottom:18px}.actions button{flex:1;color:#fff;padding:11px}.actions .primary{background:linear-gradient(145deg,#428bd9,#3dcbe9)}.panel p{font-size:12px;line-height:1.65;color:#b8c9df;margin:0 0 12px}.panel strong{color:#f5dc9b}.hint{font-size:11px!important;color:#91a8c6!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:760px){.page{padding:16px 6px 34px}.intro h1{font-size:46px}.intro>p:last-child{font-size:11px;margin:9px 0 14px}.layout{display:flex;flex-direction:column;gap:13px}.game-shell,.panel{width:100%}.game-shell{border-radius:18px;padding:9px 7px 16px}.stage{padding:5px 17px 27px}.board{gap:8px;padding:11px;border-radius:20px;box-shadow:11px 16px 0 #071125,11px 18px 0 2px #345a89,18px 35px 42px #000a}.cell{border-radius:13px}.piece{transform:translateZ(22px)}.piece.o{border-width:clamp(14px,6vw,25px)}.scorebar{margin-bottom:8px}.scorebar div{padding:6px;font-size:8px}.scorebar b{font-size:16px}.panel{padding:15px}.group{margin-bottom:12px}.panel p{margin-bottom:9px}}