.setup { display: grid; gap: 10px; margin-bottom: 12px; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.opt[hidden] { display: none; }
.lbl { width: 64px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pics { display: flex; flex-wrap: wrap; gap: 6px; }
.pk { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font: 800 0.9rem var(--font); cursor: pointer; }
.pk.done { background: color-mix(in srgb, var(--green) 22%, var(--surface)); border-color: var(--green); }
.pk[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold); }
.titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 8px; }
.titlebar b { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; }
.row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.wrap { display: grid; place-items: center; overflow-x: auto; }
.board {
  --cs: min(36px, calc((min(100vw, 900px) - 40px) / (var(--n) + var(--maxrow) * 0.62)));
  display: grid; grid-template-columns: calc(var(--maxrow) * var(--cs) * 0.62) repeat(var(--n), var(--cs));
  grid-auto-rows: var(--cs); grid-template-rows: calc(var(--maxcol) * var(--cs) * 0.58) repeat(var(--n), var(--cs));
  user-select: none; -webkit-user-select: none; touch-action: none; border-radius: 6px; padding: 4px;
}
.board:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.cclue { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 4px; font: 800 calc(var(--cs) * 0.42) var(--font); color: var(--ink); gap: 1px; }
.rclue { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--cs) * 0.22); padding-right: 6px; font: 800 calc(var(--cs) * 0.42) var(--font); color: var(--ink); }
.cclue.ok, .rclue.ok { color: var(--green); opacity: 0.75; }
.cclue:nth-child(2n), .rclue { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.cell { background: var(--surface); border: 1px solid var(--line-strong); margin: 0 -1px -1px 0; cursor: pointer; transition: background 0.08s; }
.cell.vr { border-right: 2px solid var(--muted); }
.cell.hr { border-bottom: 2px solid var(--muted); }
.cell.fill { background: var(--ink); }
.cell.mark { background: var(--surface) center / 60% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1L9 9M9 1L1 9' stroke='%23e5484d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cell.cur { box-shadow: inset 0 0 0 3px var(--focus); }
.cell.wrong { background: #e5484d !important; }
.cell.hinted.fill { background: var(--gold); }
.board.solved .cell.fill { background: var(--pic, var(--ink)); transition: background 0.6s; }
.board.solved .cell.mark { background-image: none; }
.result { margin: 14px auto 0; max-width: 520px; padding: 18px; border-radius: 20px; text-align: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.result[hidden] { display: none; }
.result h2 { margin: 0 0 6px; }
.result p { margin: 0 0 12px; color: var(--muted); }
.rules { margin-top: 18px; color: var(--muted); }
.rules li { margin: 4px 0; line-height: 1.5; }