:root { color-scheme: light; --bg:#f5f5f7; --card:#fff; --ink:#111114; --muted:#6e6e73; --line:#d1d1d6; --soft:#ececf0; --accent:#111114; --accent-ink:#fff; --selected:#e2e2e8; --related:#f0f0f4; --match:#e8e8ed; --error:#e95050; --given:#4a4a50; }
:root.dark { color-scheme: dark; --bg:#151516; --card:#242426; --ink:#f4f4f6; --muted:#aaaab1; --line:#55555b; --soft:#343438; --accent:#f6f6f7; --accent-ink:#19191a; --selected:#515157; --related:#303034; --match:#38383d; --given:#c4c4ca; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button, select { font:inherit; }
button { cursor:pointer; color:var(--ink); }
.game { width:min(100%, 590px); margin:0 auto; padding:clamp(20px,5vw,40px) 18px 42px; }
.game-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.eyebrow { margin:0 0 5px; color:var(--muted); font-size:13px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(36px,8vw,52px); letter-spacing:-.06em; line-height:.95; }
.game-header p:not(.eyebrow) { margin:10px 0 0; color:var(--muted); font-size:15px; }
.icon-button { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:var(--card); font-size:22px; }
.setup-card { padding:16px; margin-bottom:20px; border:1px solid var(--line); border-radius:17px; background:var(--card); box-shadow:0 2px 10px rgb(0 0 0 / .03); }
.field-label { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.generator-row { display:flex; gap:10px; }
select, .primary-button, .controls button { min-height:43px; border:1px solid var(--line); border-radius:10px; background:var(--card); padding:0 13px; }
select { flex:1; color:var(--ink); }
.primary-button { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:700; }
.stats { display:flex; gap:8px; margin-top:14px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.board-wrap { overflow:hidden; border:2px solid var(--ink); border-radius:8px; background:var(--line); box-shadow:0 8px 24px rgb(0 0 0 / .08); }
.board { display:grid; grid-template-columns:repeat(9,1fr); gap:1px; }
.cell { position:relative; aspect-ratio:1; min-width:0; border:0; border-radius:0; background:var(--card); color:var(--ink); font-size:clamp(18px,5.6vw,30px); font-weight:600; line-height:1; }
.cell:nth-child(3n) { border-right:2px solid var(--ink); }.cell:nth-child(9n) { border-right:0; }.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54) { border-bottom:2px solid var(--ink); }
.cell.given { color:var(--given); font-weight:800; }.cell.related { background:var(--related); }.cell.match { background:var(--match); }.cell.selected { background:var(--selected); outline:2px solid var(--ink); outline-offset:-2px; z-index:1; }.cell.conflict,.cell.mistake { color:var(--error); }.cell:focus-visible { outline:3px solid #4c8dff; outline-offset:-3px; z-index:2; }
.notes { display:grid; grid-template-columns:repeat(3,1fr); place-items:center; position:absolute; inset:3px; color:var(--muted); font-size:clamp(8px,2.2vw,12px); font-weight:650; }.notes span { line-height:1; }
.number-pad { display:grid; grid-template-columns:repeat(9,1fr); gap:6px; margin:18px 0 10px; }.number-button { aspect-ratio:1; min-width:0; border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:20px; font-weight:700; }.number-button.active { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }.number-button:disabled { opacity:.36; cursor:default; }
.controls { display:flex; flex-wrap:wrap; gap:8px; }.controls button { flex:1 1 90px; font-size:14px; }.controls button.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }.controls button:disabled { opacity:.4; cursor:default; }
.status { min-height:24px; margin:17px 0 4px; font-weight:650; }.instructions { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
@media (max-width:420px) { .game { padding-inline:12px; } .number-pad { gap:4px; } .number-button { border-radius:8px; font-size:18px; } .controls { gap:6px; } .controls button { flex-basis:70px; padding-inline:8px; } }