:root { --ink:#11182d; --paper:#f8f5ee; --cream:#fffdf8; --x:#ef624d; --o:#4d79d8; --line:#dcd6ca; --muted:#736f68; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 10% 0%,#ffe5b8 0,transparent 28rem), radial-gradient(circle at 90% 100%,#cdddfa 0,transparent 32rem),var(--paper); font-family:"DM Mono",monospace; }
.app-shell { width:min(100% - 2rem, 640px); margin:0 auto; padding:clamp(2.5rem,8vw,5rem) 0 2rem; text-align:center; }
.eyebrow { color:var(--o); font-size:.69rem; font-weight:500; letter-spacing:.15em; margin:0 0 .8rem; }
h1 { margin:0; font-family:Fraunces,serif; font-size:clamp(3rem,10vw,5rem); letter-spacing:-.075em; line-height:.9; }
h1 em { color:var(--x); font-style:italic; }
.intro { color:var(--muted); font-size:.82rem; line-height:1.65; margin:1.25rem auto 2.5rem; max-width:27rem; }
.game-card { background:rgba(255,253,248,.82); border:1px solid rgba(17,24,45,.1); box-shadow:0 18px 50px rgba(48,53,66,.13); padding:clamp(1rem,4vw,2rem); text-align:left; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-bottom:1px solid var(--line); padding-bottom:1rem; }
.mode-picker { display:flex; gap:.25rem; background:#eeebe4; padding:.22rem; }
button { font:inherit; cursor:pointer; }
.mode { border:0; background:transparent; color:var(--muted); padding:.48rem .6rem; font-size:.62rem; white-space:nowrap; }
.mode.active { background:var(--cream); box-shadow:0 1px 3px #0001; color:var(--ink); }
.new-game { border:0; color:var(--ink); background:transparent; padding:.45rem 0; font-size:.65rem; text-decoration:underline; text-underline-offset:.25rem; }
.new-game span { color:var(--x); font-size:1rem; vertical-align:-.1rem; }
.status-row { display:flex; justify-content:center; align-items:center; gap:.5rem; padding:1.35rem 0 .8rem; font-size:.75rem; }
.status-row p { margin:0; }.status-row strong { color:var(--x); font-size:1.1rem; }.turn-dot { width:8px;height:8px;border-radius:50%;background:var(--x); }.turn-dot.o-dot { background:var(--o); }
.board { display:grid; grid-template-columns:repeat(3,1fr); aspect-ratio:1; max-width:400px; margin:0 auto; border:2px solid var(--ink); background:var(--ink); gap:2px; }
.cell { position:relative; border:0; background:var(--cream); color:var(--ink); min-width:0; display:grid; place-items:center; font-family:Fraunces,serif; font-size:clamp(2.7rem,12vw,5rem); line-height:1; transition:background .2s,transform .15s; }
.cell:not(:disabled):hover { background:#fff1d8; }.cell:focus-visible { outline:3px solid var(--o); outline-offset:-5px; z-index:1; }.cell.x { color:var(--x); }.cell.o { color:var(--o); }.cell.pop { animation:pop .2s ease-out; }.cell.winner { background:#ffe2bd; }.cell:disabled { cursor:default; }
.scoreboard { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; border-top:1px solid var(--line); margin-top:1.5rem; padding-top:1.1rem; }.score { border-right:1px solid var(--line); }.score:last-child { border:0; }.score span { color:var(--muted); display:block; font-size:.55rem; letter-spacing:.04em; white-space:nowrap; }.score strong { display:block; font-family:Fraunces,serif; font-size:1.55rem; margin-top:.1rem; }.x-score strong{color:var(--x)}.o-score strong{color:var(--o)}
.footer-note { color:var(--muted); font-size:.61rem; margin:1.5rem 0; } @keyframes pop { 0%{transform:scale(.5);opacity:0} 80%{transform:scale(1.14)} 100%{transform:scale(1)} }
@media (max-width:440px) { .toolbar{align-items:flex-start;flex-direction:column}.new-game{align-self:flex-end;margin-top:-2rem}.mode{font-size:.56rem}.game-card{padding:1rem}.score span{font-size:.48rem} }