:root{--cell: 30px;--line: #cfcfcf;--cell-bg: #fafafa;--cell-hover: #eaeeff;--x: #c0392b;--o: #2471a3;--fg: #222;--muted: #666}*{box-sizing:border-box}body{margin:0;padding:1.5rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--fg);line-height:1.4}h1{font-size:1.25rem;margin:0 0 .25rem}.tagline{margin:0 0 1rem;color:var(--muted);font-size:.9rem}.controls{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem}.controls label{display:inline-flex;gap:.4rem;align-items:center;font-size:.9rem}.controls select,.controls button{font:inherit;padding:.25rem .5rem}.status{margin:.5rem 0 1rem;font-weight:600;min-height:1.4em}.status .x{color:var(--x)}.status .o{color:var(--o)}.board-wrap{overflow-x:auto;padding-bottom:.5rem}.board{display:grid;gap:0;width:max-content}.cell,.gap{width:var(--cell);height:var(--cell)}.cell{padding:0;border:1px solid var(--line);background:var(--cell-bg);font-size:1.05rem;line-height:1;display:grid;place-items:center;cursor:pointer}.cell:not(:disabled):hover{background:var(--cell-hover)}.cell:disabled{cursor:default}.cell.x{color:var(--x);font-weight:700}.cell.o{color:var(--o);font-weight:700}.cell.last{outline:2px solid #f1c40f;outline-offset:-2px}