/* Word search: a puzzle book on a café table. Letters set in a sturdy slab serif; each found word gets its own
   highlighter colour, laid over the letters like a marker stroke. */
:root { --page: #fbf4e4; --card: #fffdf6; --ink: #22190c; --soft: #6b5d47; --line: #e3d6ba; --field: #f3e9d2; --act: #b4441c; --on-act: #ffffff; --stop: #b3261e; --sel: #f9d56e; --wide: 620px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #16130c; --card: #201b12; --ink: #f4ecdb; --soft: #b0a38b; --line: #3c3324; --field: #16130c; --act: #ff9a72; --on-act: #330f02; --stop: #ff8a80; --sel: #8a6d16; color-scheme: dark; }
}
.picks { justify-content: space-between; align-items: end; } .picks label { flex: 0 1 180px; }
.grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); background: var(--card); border: 2px solid var(--ink); border-radius: 6px; padding: 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
.grid button { aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 700 clamp(13px, calc(78vw / var(--n)), 26px) Rockwell, "Roboto Slab", Georgia, serif; }
.grid button.sel { background: var(--sel); } .grid button.start { outline: 2px solid var(--act); }
.grid button.found { background: var(--hl); color: #22190c; border-radius: 4px; }
.words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; letter-spacing: .04em; }
.words li.done { text-decoration: line-through; color: var(--soft); }
.won { border: 2px solid var(--act); } .won button { justify-self: start; }