:root{color-scheme:light;--paper:#f6f0e4;--card:#fffdf8;--ink:#2a2f3a;--muted:#6b6474;--line:#e2dccd;--green:#1f6b4b;--amber:#c27f22;--gold:#e7c25a;--wall:#3b2f2a;--danger:#c4372b;--re-bg:var(--card);--re-ink:var(--ink);--re-muted:var(--muted);--re-line:var(--line);--re-accent:var(--green);
  /* Ten region tints, light enough for a dark queen and ✕; regions are also outlined with thick walls, so color is never the only cue. */
  --r0:#f6c28b;--r1:#9fd8c4;--r2:#c9b6ec;--r3:#f3e07a;--r4:#9ec5f0;--r5:#f2a9b9;--r6:#c8e08f;--r7:#d9cbb5;--r8:#b9c3cf;--r9:#e7b3e3}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif}[hidden]{display:none!important}button{font:inherit;color:inherit;min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--card);padding:8px 12px;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--amber);outline-offset:3px}a{color:var(--green)}
.shell{max-width:1280px;margin:auto;padding:24px 32px 10px}header{display:flex;gap:12px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px}.brand{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:800;letter-spacing:2px;text-decoration:none;color:var(--ink)}.brand span{color:var(--amber)}.utilities{display:flex;gap:6px}.utilities button{font-size:13px}.heading{margin:30px 0 22px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--green);font-weight:800}h1{font-size:clamp(36px,6vw,60px);letter-spacing:-2px;margin:0;line-height:1.1}h1 span{color:var(--green)}.howto{color:var(--muted);line-height:1.5}.layout{max-width:1140px;margin:auto}.lab{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--card);padding:20px;box-shadow:0 12px 40px #3a2f1a08}
.game-area{scroll-margin-top:76px;width:min(100%,540px);margin:auto}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#f0e9db;border-radius:12px;margin-bottom:10px}.mode{border:0;background:transparent;font-weight:750}.mode[aria-pressed="true"]{background:var(--card);box-shadow:0 1px 4px #3a2f1a26}
.practice-bar{display:flex;gap:6px;margin-bottom:10px}.sizes{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.size{padding:4px 2px;font-weight:750;font-size:14px}.size[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}#new-puzzle{font-size:14px;white-space:nowrap}
.hud{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 0 12px;padding:8px 0;border-block:1px solid var(--line);text-align:center}.hud small{font-size:12px;color:var(--muted)}.hud strong{display:block;font-size:20px;font-variant-numeric:tabular-nums;margin-top:3px}
/* The board is square and sized by its width, so a new size never shifts the page. */
.field{position:relative;container-type:inline-size;border-radius:12px;background:var(--wall);padding:3px;box-shadow:0 0 0 3px #b98a3e}
.board{--n:8;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--n),minmax(0,1fr));aspect-ratio:1;gap:1px;background:#3b2f2a66;border-radius:9px;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.cell{--c:var(--r0);position:relative;min-height:0;min-width:0;padding:0;border:0 solid var(--wall);border-radius:0;background:var(--c);display:flex;align-items:center;justify-content:center;color:var(--wall);font-size:calc(52cqi / var(--n));line-height:1}
.cell[data-region="1"]{--c:var(--r1)}.cell[data-region="2"]{--c:var(--r2)}.cell[data-region="3"]{--c:var(--r3)}.cell[data-region="4"]{--c:var(--r4)}.cell[data-region="5"]{--c:var(--r5)}.cell[data-region="6"]{--c:var(--r6)}.cell[data-region="7"]{--c:var(--r7)}.cell[data-region="8"]{--c:var(--r8)}.cell[data-region="9"]{--c:var(--r9)}
.cell.wt{border-top-width:3px}.cell.wb{border-bottom-width:3px}.cell.wl{border-left-width:3px}.cell.wr{border-right-width:3px}
.board[data-size="10"] .cell.wt{border-top-width:2.5px}.board[data-size="10"] .cell.wb{border-bottom-width:2.5px}.board[data-size="10"] .cell.wl{border-left-width:2.5px}.board[data-size="10"] .cell.wr{border-right-width:2.5px}
.cell:focus-visible{outline:3px solid var(--ink);outline-offset:-5px;z-index:2}
@media(hover:hover){.board:not(.won) .cell:hover{filter:brightness(1.06) saturate(1.1)}}
.piece{pointer-events:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.piece svg{width:70%;height:70%;color:#2b2140;--gem:#f7d774;filter:drop-shadow(0 1px 0 #fff9)}
.mark .piece::before,.auto .piece::before{content:"✕";font-weight:800;opacity:.62}.auto .piece::before{opacity:.28}.dragging .piece::before{content:"✕";font-weight:800;opacity:.45}
.queen .piece{animation:settle .25s ease-out}@keyframes settle{from{transform:scale(.6)}to{transform:scale(1)}}
.cell.conflict{background:repeating-linear-gradient(45deg,var(--c) 0 6px,#f3a69b 6px 9px)}.cell.conflict .piece svg{color:var(--danger);--gem:#fff}
.board.won .cell{animation:glow .7s ease-out}.board.won .queen .piece svg{color:#5a2d82}@keyframes glow{50%{filter:brightness(1.15)}}
.paused-note{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;border-radius:12px;background:var(--wall);color:white;font-size:24px;font-weight:800}.paused-note p{margin:0}.paused-note button{background:var(--gold);color:var(--ink)}body[data-phase="paused"] .board{visibility:hidden}
.tools{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;margin-top:12px}.tools button{font-size:14px;font-weight:650}#auto-mark[aria-pressed="true"]{background:#e6f2ec;border-color:#9cc8b2}
.solver-row{margin:8px 0 0;text-align:center}.solver-row a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.small,.instructions{font-size:13px;color:var(--muted);line-height:1.65}#status{font-size:14px;line-height:1.5;min-height:42px;margin:10px 0 4px}.small{margin:0}.instructions{margin:14px 4px}
@media(max-width:600px){.shell{padding:12px 12px 4px}header{position:sticky;top:0;z-index:3;background:var(--paper);padding:6px 0 12px;gap:6px}.lab{padding:10px}.heading{margin:14px 0 10px}.howto{font-size:14px;margin:8px 0}.eyebrow{letter-spacing:1px}.brand{font-size:12px;letter-spacing:1px}.utilities button{padding:6px 8px}.hud{margin:8px 0 10px;padding:6px 0}.hud strong{font-size:17px}.size{font-size:13px}#new-puzzle{padding:6px 8px;font-size:13px}.field{padding:2px}}
.game-help-links{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 4px}.game-help-links button,.game-help-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}.game-help-links button{border:0;background:none;color:var(--green);padding:0}#help-panel{width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink)}#help-panel::backdrop{background:#17271fd9}#help-panel[open]{display:flex;flex-direction:column}.help-body{overflow:auto;padding:20px;line-height:1.65}.help-body h2{margin-top:0}.help-actions{padding:12px 20px;border-top:1px solid var(--line)}.help-actions button{width:100%}
@media(prefers-reduced-motion:reduce){.queen .piece,.board.won .cell{animation:none}}