@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#11111b;--panel:#191923;--cell:#1d1d27;--line:#2b2b37;--text:#f1f0f5;--muted:#888794;--faint:#585763;--pink:#fb7fa5;--purple:#aa91ff;--mint:#83e5c4;--font:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace}
*{box-sizing:border-box}html{min-width:320px;background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 72% 48%,#20202a 0,transparent 48%),var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}.shell{width:min(1060px,calc(100% - 64px));min-height:100svh;margin:0 auto;display:flex;flex-direction:column}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #272630}.brand{text-decoration:none;color:#e5e3ec;font-size:13px;font-weight:700;letter-spacing:.025em;display:flex;align-items:center;gap:8px}.brand-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#282430;color:var(--pink);font-size:16px}.brand-dot,.title-period{color:var(--pink)}.top-note{color:var(--muted);font:11px var(--mono);letter-spacing:.02em}.online-dot,.caption-pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px #83e5c477;margin-right:7px}.game-layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:76px;align-items:center;padding:44px 0 54px}.intro{max-width:430px}.eyebrow{display:flex;align-items:center;gap:10px;font:10px var(--mono);letter-spacing:.2em;color:var(--pink);margin:0 0 17px}.eyebrow-line{width:22px;height:1px;background:var(--pink)}h1{font-size:clamp(47px,6vw,69px);line-height:1;letter-spacing:-.07em;margin:0 0 17px;font-weight:700}.subtitle{color:#b1afba;font-size:14px;line-height:1.8;margin:0 0 30px}.subtitle span{color:#777582}.mode-switch{display:inline-flex;padding:4px;background:#1c1b24;border:1px solid #2c2a35;border-radius:10px;gap:3px}.mode-button{height:34px;padding:0 13px;border:0;border-radius:7px;background:transparent;color:#96939f;font:500 11px var(--font);cursor:pointer;transition:background .2s,color .2s,transform .15s}.mode-button:hover{color:var(--text)}.mode-button:active{transform:scale(.97)}.mode-button.is-active{background:#302735;color:#f7d5e0;box-shadow:inset 0 0 0 1px #75445755}.mode-button:first-child span{color:var(--pink);margin-right:4px}.mode-button:last-child span{color:var(--purple);margin-right:5px}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:19px;margin:34px 0 23px;padding:18px 2px;border-top:1px solid #2c2b35;border-bottom:1px solid #2c2b35}.score-card{display:grid;grid-template-columns:25px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:9px;opacity:.53;transition:opacity .2s}.score-card.is-current{opacity:1}.score-symbol{grid-row:span 2;font-size:24px;font-weight:400;line-height:1;color:var(--pink)}.score-o .score-symbol{color:var(--purple)}.score-name{font-size:11px;color:#aaa8b3}.score-number{font:500 19px var(--mono);margin-top:3px;color:#f1eef7}.score-divider{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--faint);font:9px var(--mono);letter-spacing:.12em}.divider-rule{height:23px;width:1px;background:#393742}.score-o{text-align:left}.status-line{min-height:40px;display:flex;align-items:center;gap:11px;color:#dedce5;font-size:13px}.turn-indicator{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;color:var(--pink);background:#2b202a;font-size:16px;font-weight:600}.turn-indicator.is-o{color:var(--purple);background:#262232}.reset-button{display:flex;align-items:center;gap:9px;margin-top:14px;padding:0;border:0;background:none;color:#9c99a6;font:500 11px var(--font);cursor:pointer;transition:color .2s}.reset-button:hover{color:#fff}.reset-button span{font-size:17px;color:var(--pink)}.keyboard-hint{margin:25px 0 0;color:#62606d;font:10px var(--mono)}kbd{font:inherit;color:#a7a4b0;background:#23222c;padding:3px 5px;border:1px solid #34333e;border-radius:4px}.keyboard-hint>span{margin:0 5px;color:#4e4c58}.board-wrap{position:relative;width:100%;max-width:440px;justify-self:end}.board-glow{position:absolute;inset:9% -8%;border-radius:50%;background:radial-gradient(ellipse,#69465c20,transparent 68%);filter:blur(22px);pointer-events:none}.board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;aspect-ratio:1/1}.cell{position:relative;display:grid;place-items:center;border:1px solid #302e39;border-radius:13px;background:linear-gradient(145deg,#20202b,#1b1b25);color:var(--pink);font-family:var(--font);font-size:clamp(46px,8vw,78px);font-weight:500;cursor:pointer;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}.cell:hover:not(:disabled){transform:translateY(-2px);background:#27232e;border-color:#644052;box-shadow:0 7px 20px #0003}.cell:focus-visible,.mode-button:focus-visible,.reset-button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}.cell:disabled{cursor:default}.cell.mark-o{color:var(--purple)}.cell.is-winning{background:#382936;border-color:#8b536f;box-shadow:inset 0 0 30px #fb7fa518}.cell-mark{display:block;animation:pop .2s cubic-bezier(.2,.9,.3,1.4)}@keyframes pop{from{transform:scale(.48);opacity:.3}to{transform:scale(1);opacity:1}}.board-caption{position:relative;display:flex;justify-content:space-between;padding:17px 4px 0;color:#6f6d79;font:9px var(--mono);letter-spacing:.13em}.board-caption strong{color:#b5b1bf;font-weight:400;margin-left:5px}.caption-right{color:#85818f;font-size:9px}.caption-pulse{width:5px;height:5px;margin:0 6px 1px 0}.footer{min-height:49px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #272630;color:#656370;font:10px var(--mono)}.footer-star{color:var(--pink);padding-left:4px}.footer-sep{color:#373540;padding:0 6px}.cell:disabled:not(.is-winning){opacity:.92}
@media(max-width:800px){.shell{width:min(560px,calc(100% - 40px))}.game-layout{grid-template-columns:1fr;gap:31px;padding:40px 0 38px}.intro{max-width:none}.board-wrap{width:min(100%,430px);justify-self:center;grid-row:1}.board{gap:8px}.cell{border-radius:11px}.eyebrow{margin-bottom:13px}h1{font-size:54px}.subtitle{margin-bottom:20px}.mode-switch{margin-top:2px}.scoreboard{margin:24px 0 15px;padding:14px 2px}.keyboard-hint{margin-top:17px}}
@media(max-width:420px){.shell{width:calc(100% - 32px)}.topbar{height:64px}.top-note{font-size:9px}.game-layout{gap:28px;padding:27px 0 27px}.board{gap:6px}.cell{border-radius:9px}.subtitle{font-size:13px}.scoreboard{gap:12px}.mode-button{padding:0 9px;font-size:10px}.footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}