:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg:#0f1115;--panel:#12161c;--card:hsla(0,0%,100%,.03);--ink:#e6eaf2;--muted:#9aa5b1;--primary:#7cf6d4;--primary-ink:#0b1320;--ring:rgba(124,246,212,.35);--win:#82ffa9;--lose:#ff8a8a;--draw:#9aa5b1}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1000px 600px at 80% -10%,#1b2130 0%,transparent 60%),var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.page{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:48px 16px;gap:28px;transition:transform .18s ease}.hero{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.logo{font-size:28px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}.title{margin:0;font-size:40px;line-height:1.1;letter-spacing:.3px}.brand{background:linear-gradient(90deg,#8ef8ff,#7cf6d4 60%,#b3ffa8);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}.dim{opacity:.75;font-weight:700}.status{margin:6px 0 2px;color:var(--muted)}.actions{display:flex;gap:10px;margin-top:4px}.btn{padding:10px 16px;border-radius:12px;border:1px solid transparent;font-weight:700;letter-spacing:.2px;cursor:pointer;transition:.18s transform ease,.18s box-shadow ease,.18s background ease}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 6px 24px var(--ring)}.btn-primary:hover{box-shadow:0 8px 28px var(--ring)}.btn-ghost{background:transparent;color:var(--ink);border-color:#2a3240}.btn-ghost:hover{background:#1a202b}.board-wrap{display:flex;justify-content:center;width:100%}.board{display:grid;grid-template-columns:repeat(3,minmax(92px,120px));gap:12px;padding:16px;background:linear-gradient(180deg,#ffffff0a,#fff0);border:1px solid #242b38;border-radius:20px;box-shadow:inset 0 0 0 1px #ffffff05,0 10px 40px #00000059}.board.board-frozen{filter:saturate(.7)}.cell{width:100%;aspect-ratio:1/1;background:var(--card);border:1px solid #2a3240;border-radius:16px;display:grid;place-items:center;cursor:pointer;transition:.2s transform ease,.25s background ease,.2s border-color ease,.2s box-shadow ease;outline:none}.cell:hover{transform:translateY(-2px);border-color:#3a4458;box-shadow:0 6px 18px #00000059}.cell:focus-visible{box-shadow:0 0 0 3px #7cf6d459}.cell.x{background:linear-gradient(180deg,#9be2ff1f,#9be2ff0a)}.cell.o{background:linear-gradient(180deg,#ffd29b1f,#ffd29b0a)}.cell.win{box-shadow:0 0 0 3px #82ffa980,0 0 24px #82ffa940 inset;background:linear-gradient(180deg,#82ffa92e,#82ffa90f);transform:translateY(-2px)}.cell.win-draw{box-shadow:0 0 0 3px #9aa5b173,inset 0 0 24px #9aa5b126}.glyph{font-size:44px;font-weight:900;letter-spacing:.5px;text-shadow:0 3px 12px rgba(0,0,0,.35);color:#fff}.pulse{animation:pulse .7s ease-out}@keyframes pulse{0%{box-shadow:0 0 #7cf6d473}to{box-shadow:0 0 0 18px #7cf6d400}}.footer{opacity:.6;font-size:12px;padding:10px}@media (max-width: 420px){.title{font-size:32px}.board{grid-template-columns:repeat(3,100px)}}.overlay{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#00000040,#0009);animation:fadeIn .25s ease forwards;z-index:50}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-card{background:#12161cd9;border:1px solid #2a3240;border-radius:20px;box-shadow:0 20px 60px #0000008c,inset 0 0 0 1px #ffffff08;padding:28px 24px;width:min(94vw,520px);text-align:center;transform:translateY(6px);animation:rise .28s ease forwards}@keyframes rise{to{transform:translateY(0)}}.overlay-title{margin:0 0 6px;font-size:40px;font-weight:900;letter-spacing:.6px;background:linear-gradient(90deg,#fff,#c7ffde);-webkit-background-clip:text;background-clip:text;color:transparent}.overlay-sub{margin:4px 0 16px;color:var(--muted)}.overlay-actions{display:flex;justify-content:center}.page.shake-lose .board{animation:shake .38s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti span{--size: 7px;position:absolute;top:-10px;left:50%;width:var(--size);height:var(--size);border-radius:2px;background:hsl(calc(var(--i)*9deg),90%,65%);transform:translate(calc((var(--i) - 20) * 10px));animation:drop calc(.9s + (var(--i) * .01s)) ease-out forwards;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}@keyframes drop{to{transform:translate(calc((var(--i) - 20) * 14px)) translateY(110vh) rotate(calc(var(--i)*18deg));opacity:.85}}