@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
.draw-banner{position:fixed;inset:0;display:grid;place-items:center;z-index:4;pointer-events:none;font:clamp(58px,14vw,150px) 'Bangers','Press Start 2P',sans-serif;letter-spacing:.12em;color:#f4c542;text-shadow:7px 7px #e51e2a,12px 12px #071a38;opacity:0;transform:scale(.35) rotate(-5deg)}.draw-banner.show{animation:draw-pop 1.8s steps(5) forwards}@keyframes draw-pop{0%{opacity:0;transform:scale(.35) rotate(-5deg)}35%{opacity:1;transform:scale(1.12) rotate(2deg)}55%{transform:scale(.96) rotate(-1deg)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
:root{--bg:#090817;--panel:#12112b;--grid:#292451;--ink:#fff4d6;--pink:#ff4fd8;--cyan:#46e6ff;--yellow:#ffe66d;--muted:#9d9abf}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:'VT323',monospace;background:var(--bg);background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px),radial-gradient(ellipse at 50% -10%,#33257b 0,#090817 60%);background-size:4px 4px,4px 4px,100% 100%;text-shadow:2px 2px #000}.shell{max-width:1100px;min-height:100vh;margin:auto;padding:32px 55px;display:flex;flex-direction:column}.topbar{border-bottom:4px solid var(--pink);padding-bottom:22px}.brand{font:18px 'Press Start 2P';color:var(--cyan);letter-spacing:.05em}.brand-mark{color:var(--yellow);margin-right:12px}.brand-accent{color:var(--pink)}.hero{margin:58px 0 48px;max-width:700px}.eyebrow,.section-label{color:var(--yellow);font:11px 'Press Start 2P';letter-spacing:.08em;margin:0 0 24px}.hero h1{margin:0;font:clamp(38px,6vw,72px)/1.1 'Press Start 2P';letter-spacing:-.05em;color:var(--ink)}.hero h1 em{color:var(--pink);font-style:normal}.intro{max-width:430px;color:var(--muted);font-size:24px;line-height:1.15;margin-top:25px}.game-layout{display:grid;grid-template-columns:220px 1fr;gap:65px;align-items:start}.section-label{color:var(--cyan);font-size:10px}.score-card{border-top:3px solid var(--grid);padding:17px 0 20px}.score-card.active-x{border-color:var(--yellow)}.player-heading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:19px}.symbol{font-size:34px}.x-symbol{color:var(--yellow)}.o-symbol{color:var(--cyan)}.score-card strong{display:block;font-size:62px;line-height:.8;margin:20px 0 8px;color:var(--ink)}.score-caption,.draw-count{color:var(--muted);font-size:17px;letter-spacing:.08em}.draw-count{border-top:3px solid var(--grid);padding-top:14px;display:flex;justify-content:space-between}.draw-count strong{color:var(--pink);font-size:25px}.board-wrap{max-width:550px;width:100%;margin:auto}.mode-switch{display:flex;gap:5px;margin-bottom:12px}.mode-button{background:var(--panel);border:2px solid var(--grid);color:var(--muted);padding:11px 12px;font:11px 'Press Start 2P';cursor:pointer}.mode-button.selected{background:#302452;color:var(--yellow);border-color:var(--yellow)}.online-panel{border:2px solid var(--cyan);padding:12px;color:var(--cyan);font-size:18px}.small-button{background:var(--pink);border:0;padding:9px;color:#160d25;font:11px 'Press Start 2P';cursor:pointer}.status{height:55px;display:flex;align-items:center;gap:14px;color:var(--muted);font-size:20px}.turn-label{margin-right:auto;color:var(--cyan)}.status-symbol{font-size:34px}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;background:var(--pink);border:4px solid var(--pink);box-shadow:0 0 0 5px #000,0 0 30px #ff4fd866}.cell{aspect-ratio:1;border:0;background:var(--panel);color:var(--ink);font:clamp(55px,10vw,100px) 'VT323';cursor:pointer;transition:.15s}.cell:hover:not(:disabled){background:#292451;box-shadow:inset 0 0 20px #46e6ff55}.cell.x{color:var(--yellow)}.cell.o{color:var(--cyan)}.cell.win{background:#53305c;color:var(--pink);animation:blink .5s steps(2) infinite}.cell:disabled{cursor:default}.actions{display:flex;align-items:center;gap:22px;margin-top:25px}.primary-button{background:var(--yellow);border:0;padding:16px;color:#17102a;font:12px 'Press Start 2P';cursor:pointer;box-shadow:5px 5px #ff4fd8}.primary-button:hover{transform:translate(3px,3px);box-shadow:2px 2px #ff4fd8}.text-button{color:var(--muted);background:none;border:0;font:18px 'VT323';cursor:pointer}footer{border-top:3px solid var(--grid);margin-top:auto;padding-top:20px;color:var(--muted);display:flex;justify-content:space-between;font-size:17px}#confetti{position:fixed;inset:0;pointer-events:none;z-index:5}@keyframes blink{50%{background:#302452}}@media(max-width:700px){.shell{padding:24px 20px}.hero{margin:45px 0 38px}.hero h1{font-size:34px}.game-layout{display:block}.score-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-bottom:35px}.score-panel .section-label{grid-column:1/-1}.draw-count{grid-column:1/-1}.cell{font-size:22vw}.mode-button{font-size:8px;padding:9px 6px}footer{margin-top:60px;gap:12px;flex-wrap:wrap}}