:root{
  --walnut:#3a2417;--walnut-deep:#2a190f;--brass:#d7b56a;--brass-deep:#8a6a2f;--ivory:#f4ecdc;--ink:#24150b;--alert:#8e1b12;--hint:#0b3c8c;
  --r0:#6f9a5e;--r1:#f0dc96;--r2:#5f8fc9;--r3:#eaa398;--r4:#c9b2e4;--r5:#4fb3a3;--r6:#d39a35;--r7:#f5f1e6;--r8:#f0bcd6;--r9:#8f8a72;
  --pat:#24150b26;
  --font:"Didot","Bodoni 72",ui-serif,"New York","Iowan Old Style",Georgia,serif;
  --text:ui-serif,"New York","Iowan Old Style",Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ivory);font-family:var(--text);line-height:1.5;background-color:var(--walnut);
  background-image:repeating-linear-gradient(91deg,#0000 0 13px,#1a0d0533 13px 14px,#0000 14px 37px,#6b462b26 37px 39px,#0000 39px 61px)}
#site-header{padding:14px 16px 8px;text-align:center}
.crest{display:flex;align-items:center;justify-content:center;gap:12px}
.crest::before,.crest::after{content:"";flex:1;max-width:150px;height:1px;background:var(--brass)}
.crest img{width:44px;height:44px;display:block}
#site-title{margin:2px 0 0;font-family:var(--font);font-weight:400;font-size:clamp(1.75rem,8vw,2.5rem);line-height:1.15}
button,select,textarea{font:inherit}
button,select{min-height:44px;color:var(--ivory);background:var(--walnut-deep);border:1px solid var(--brass);border-radius:2px;cursor:pointer;touch-action:manipulation}
button[aria-pressed=true]{background:var(--brass);color:var(--ink)}
button:disabled,select:disabled{border-color:var(--brass-deep);color:#c9b9a0;cursor:default}
:focus-visible{outline:3px solid var(--ivory);outline-offset:2px}
#game{display:flex;flex-direction:column;align-items:center;padding-bottom:40px}
#game>section,#puzzle-title,#game-info,#status{width:100%;padding-inline:12px}
#mode-controls{display:grid;grid-template-columns:1fr 1fr auto 1fr;gap:6px;align-items:center}
#mode-controls label{font-size:.875rem}
#mode-controls select{padding:0 6px;width:100%}
#new-puzzle{grid-column:1/-1}
#puzzle-title{margin:12px 0 0;font-size:1.0625rem;font-weight:400;text-align:center}
#game-info{margin:0 0 8px;text-align:center;color:var(--brass);font-variant-numeric:tabular-nums}
#game-info span{margin-right:12px}
#board{--cell:min(calc((100vw - 8px)/var(--size,8)),64px);display:inline-block;border:4px solid var(--brass-deep);background:var(--walnut-deep);touch-action:none;user-select:none;-webkit-user-select:none}
.board-row{display:flex}
.cell{position:relative;width:var(--cell);height:var(--cell);padding:0;min-height:0;border:1px solid #24150b47;border-radius:0;color:var(--ink);font-size:calc(var(--cell)*.5);background-size:var(--p,10px) var(--p,10px);cursor:pointer}
.cell:focus-visible{outline:3px solid var(--ink);outline-offset:-5px;box-shadow:inset 0 0 0 2px var(--ivory)}
/* Region identity is carried three ways: fill, weave pattern and letter, plus a heavy outline. */
.region-0{background-color:var(--r0);background-image:radial-gradient(var(--pat) 18%,#0000 20%);--p:9px}
.region-1{background-color:var(--r1);background-image:repeating-linear-gradient(45deg,var(--pat) 0 1.5px,#0000 1.5px 7px);background-size:auto}
.region-2{background-color:var(--r2);background-image:repeating-linear-gradient(0deg,var(--pat) 0 2px,#0000 2px 7px);background-size:auto}
.region-3{background-color:var(--r3);background-image:repeating-linear-gradient(-45deg,var(--pat) 0 1.5px,#0000 1.5px 7px);background-size:auto}
.region-4{background-color:var(--r4);background-image:repeating-linear-gradient(90deg,var(--pat) 0 2px,#0000 2px 7px);background-size:auto}
.region-5{background-color:var(--r5);background-image:linear-gradient(var(--pat) 1.5px,#0000 1.5px),linear-gradient(90deg,var(--pat) 1.5px,#0000 1.5px);--p:9px}
.region-6{background-color:var(--r6);background-image:repeating-linear-gradient(45deg,var(--pat) 0 1.5px,#0000 1.5px 7px),repeating-linear-gradient(-45deg,var(--pat) 0 1.5px,#0000 1.5px 7px);background-size:auto}
.region-7{background-color:var(--r7)}
.region-8{background-color:var(--r8);background-image:radial-gradient(#0000 34%,var(--pat) 36%,var(--pat) 48%,#0000 50%);--p:12px}
.region-9{background-color:var(--r9);background-image:conic-gradient(var(--pat) 25%,#0000 0 50%,var(--pat) 0 75%,#0000 0);--p:12px}
.cell.edge-top{border-top:3px solid var(--ink)}.cell.edge-bottom{border-bottom:3px solid var(--ink)}
.cell.edge-left{border-left:3px solid var(--ink)}.cell.edge-right{border-right:3px solid var(--ink)}
.region-tag{position:absolute;left:3px;top:0;font:700 10px/1.3 ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:#f5f1e6b3;padding:0 2px;display:none}
.cell.edge-top.edge-left .region-tag{display:block}
.cell-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700}
.cell[data-state=queen] .cell-glyph{inset:17%;font-size:0}
.cell[data-state=queen] .cell-glyph::before,.cell[data-state=queen] .cell-glyph::after{content:"";position:absolute;clip-path:polygon(10% 90%,2% 34%,22% 54%,30% 12%,42% 46%,50% 2%,58% 46%,70% 12%,78% 54%,98% 34%,90% 90%)}
.cell[data-state=queen] .cell-glyph::before{inset:0;background:var(--ink)}
.cell[data-state=queen] .cell-glyph::after{inset:13%;background:var(--brass)}
.cell.in-conflict-zone{box-shadow:inset 0 0 0 2px var(--alert)}
.cell.is-conflict{box-shadow:inset 0 0 0 3px var(--alert),inset 0 0 0 5px var(--ivory)}
.cell.is-conflict .cell-glyph::after{background:var(--alert)}
.cell.is-hint{box-shadow:inset 0 0 0 3px var(--hint),inset 0 0 0 5px var(--ivory)}
#board.is-won{border-color:var(--brass)}
#game-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
#game-actions button{min-height:52px;font-family:var(--font);font-size:1.125rem}
#status{min-height:1.5em;margin:8px 0 0;text-align:center}
#win-panel{margin-top:8px;padding-block:14px;background:var(--ivory);color:var(--ink)}
#win-title{margin:0;font-family:var(--font);font-weight:400;font-size:1.75rem}
#win-message{margin:0 0 8px}
#win-panel label{display:block;font-size:.875rem}
#share-text{display:block;width:100%;padding:8px;border:1px solid var(--brass-deep);background:#fffaf0;color:var(--ink);font:.9375rem/1.45 ui-monospace,Menlo,monospace;resize:none}
#share-copy{margin-top:8px;padding:0 20px;background:var(--walnut);border-color:var(--walnut)}
#stats,#rules{margin-top:20px}
#stats h2,#rules h2{margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--brass-deep);font-family:var(--font);font-weight:400;font-size:1.375rem}
#stats h3{margin:12px 0 4px;font-size:.9375rem;font-weight:400;color:var(--brass)}
#stats dl{display:grid;grid-template-columns:1fr 1fr;margin:0}
#stats dt{grid-row:2;font-size:.875rem;color:var(--brass)}
#stats dd{grid-row:1;margin:0;font-size:1.75rem}
#stat-best-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:2px 12px;list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
#rules p{margin:0 0 8px}
@media (min-width:900px){
  #site-header{padding-top:20px}
  #game{display:grid;justify-content:center;gap:0 44px;padding:8px 32px 40px;
    grid-template-columns:auto 340px;
    grid-template-rows:auto auto auto auto auto auto auto 1fr;
    grid-template-areas:"board modes" "board title" "board info" "board actions" "board status" "board win" "board stats" "board rules"}
  #board{grid-area:board;align-self:start;--cell:min(calc((100svh - 150px)/var(--size,8)),72px)}
  #game>section,#puzzle-title,#game-info,#status{padding-inline:0}
  #mode-controls{grid-area:modes}#puzzle-title{grid-area:title;text-align:left}
  #game-info{grid-area:info;text-align:left}#game-actions{grid-area:actions;margin-top:0}
  #status{grid-area:status;text-align:left}#win-panel{grid-area:win;padding-inline:14px!important}
  #stats{grid-area:stats}#rules{grid-area:rules}
  body:not(:has(#win-panel[hidden])) #rules{display:none}
}
@media (prefers-reduced-motion:no-preference){.cell-glyph{transition:opacity .1s}}

/* Content pages and footer */
#site-title[href]{display:block;color:inherit;text-decoration:none}
.page{box-sizing:border-box;max-width:720px;margin:8px auto 28px;padding:12px 20px 28px;background:var(--ivory);color:var(--ink);font-size:1.0625rem;line-height:1.7}
.page h1{margin:12px 0 8px;font-family:var(--font);font-weight:400;font-size:2.125rem;line-height:1.2}
.page h2{margin:32px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--brass-deep);font-family:var(--font);font-weight:400;font-size:1.5rem;line-height:1.25}
.page h3{margin:20px 0 2px;font-size:1.0625rem}
.page p,.page ul{margin:0 0 12px}
.page ul{padding-left:1.25em}
.page li{margin-bottom:8px}
.page a{color:#6a3f12;text-underline-offset:2px}
.page :focus-visible{outline-color:var(--ink)}
.page code{font:.9375em ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
.lede{font-size:1.1875rem}
.updated{font-size:.9375rem}
.play-link{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 0;padding:0 20px;background:var(--walnut);color:var(--ivory)!important;text-decoration:none}
.game-note{max-width:760px;margin:-16px auto 0;padding:0 16px 20px;text-align:center}
.game-note p{margin:0}
.game-note a,.site-foot a{color:var(--brass);text-underline-offset:3px}
.site-foot{border-top:1px solid var(--brass-deep);padding:6px 12px 24px}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px}
.site-foot a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem}
.site-foot a[aria-current]{color:var(--ivory)}

/* Retention panels and phone pan view */
:root{--rt-fg:var(--ink);--rt-soft:#5a4632;--rt-bg:var(--ivory);--rt-acc:var(--walnut);--rt-on:var(--ivory);--rt-line:var(--brass-deep)}
#open-stats{grid-column:1/-1}
#rt-banner{width:calc(100% - 24px);margin:10px 12px}
.view-row{display:none}
#board-scroll{display:contents}
.pan-corner,.pan-top,.pan-left{display:none}
@media (max-width:719px){
  #game:has(#board[data-size="9"],#board[data-size="10"]) .view-row{display:flex;width:100%;padding-inline:12px;align-items:center;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--brass)}
  .view-toggle{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--ivory);font-weight:600;cursor:pointer;white-space:nowrap}
  .view-toggle input{width:22px;height:22px;margin:0;accent-color:var(--brass)}
  #game:has(#board[data-size="9"],#board[data-size="10"]):not(:has(#view-fit:checked)) #board-scroll{display:grid;grid-template-columns:24px max-content;width:calc(100% - 16px);overflow:auto;max-height:66svh;-webkit-overflow-scrolling:touch}
  #game:has(#board[data-size="9"],#board[data-size="10"]):not(:has(#view-fit:checked)) #board{--cell:48px;grid-column:2;grid-row:2}
  #game:has(#board[data-size="9"],#board[data-size="10"]):not(:has(#view-fit:checked)) :is(.pan-corner,.pan-top,.pan-left){display:block;position:sticky;background-color:var(--walnut-deep);touch-action:pan-x pan-y;z-index:5}
  .pan-corner{top:0;left:0;z-index:6!important;grid-column:1;grid-row:1;height:24px}
  .pan-top{top:0;grid-column:2;grid-row:1;height:24px;background-image:repeating-linear-gradient(90deg,var(--brass-deep) 0 1px,#0000 1px 48px)}
  .pan-left{left:0;grid-column:1;grid-row:2;background-image:repeating-linear-gradient(0deg,var(--brass-deep) 0 1px,#0000 1px 48px)}
}
body[data-pending] #board-scroll,body[data-pending] #game-actions,body[data-pending] .view-row{display:none!important}
body[data-pending] #size-select,body[data-pending] label[for=size-select]{display:none!important}
.rt p{margin:0}
#rt-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;padding:10px 12px;background:var(--rt-bg);color:var(--rt-fg);border:1px solid var(--rt-line);border-left:4px solid var(--rt-acc)}
.rt button,.rt .rt-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;font:inherit;color:var(--rt-fg);background:none;border:1px solid var(--rt-line);border-radius:2px;text-decoration:none;cursor:pointer}
.rt .rt-primary{background:var(--rt-acc);color:var(--rt-on);border-color:var(--rt-acc);font-weight:700}
#win.rt,#result.rt,#win-panel.rt{margin-top:14px;padding:14px;background:var(--rt-bg);color:var(--rt-fg);border:1px solid var(--rt-line);border-top:3px solid var(--rt-acc);display:flex;flex-direction:column;gap:8px}
.rt-title{margin:0;font-size:1.5rem;color:var(--rt-acc)}
.rt-big{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.rt-vs{font-weight:600}
.rt-line,.rt-next,.rt-msg{font-size:.9375rem;color:var(--rt-soft)}
.rt-next{font-variant-numeric:tabular-nums}
.rt-row{display:flex;flex-wrap:wrap;gap:8px}
.rt-tray{display:flex;flex-direction:column;gap:8px}
.rt input[type=text],.rt textarea{width:100%;min-height:44px;padding:8px;font:inherit;font-size:1rem;color:var(--rt-fg);background:var(--rt-bg);border:1px solid var(--rt-line)}
.rt-share{margin:0;padding:8px;font:.875rem/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap;border:1px dashed var(--rt-line)}
dialog.rt{width:min(520px,calc(100vw - 16px));max-height:calc(100dvh - 24px);padding:16px;color:var(--rt-fg);background:var(--rt-bg);border:1px solid var(--rt-line)}
dialog.rt::backdrop{background:#0006}
.rt-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rt-dlg-head h2{margin:0;font-size:1.25rem}
dialog.rt h3{margin:16px 0 6px;font-size:.9375rem}
.rt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin:12px 0 0}
.rt-grid dd{margin:0;font-size:1.5rem;font-weight:700}.rt-grid dt{font-size:.8125rem;color:var(--rt-soft)}
.rt-list{list-style:none;margin:0;padding:0}
.rt-list li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--rt-line);font-variant-numeric:tabular-nums}
.rt-cal{display:grid;grid-template-columns:repeat(14,1fr);gap:3px}
.rt-cal i{aspect-ratio:1;background:var(--rt-line);opacity:.4}.rt-cal i.on{background:var(--rt-acc);opacity:1}
.rt-bars{display:flex;align-items:flex-end;gap:2px;height:48px}
.rt-bars i{flex:1;background:var(--rt-acc);min-height:2px}

/* Onboarding */
.ob-q{position:absolute;top:8px;right:8px;z-index:20;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--rt-line);border-radius:50%;background:var(--rt-bg);color:var(--rt-fg);font:700 1.25rem/1 var(--ob-font,inherit);cursor:pointer}
.ob-card{position:fixed;left:8px;right:8px;bottom:8px;z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;padding:10px;background:var(--rt-bg);color:var(--rt-fg);border:1px solid var(--rt-line);border-top:3px solid var(--rt-acc);box-shadow:0 4px 14px #0005}
.ob-text{margin:0;font-size:.9375rem;line-height:1.35}
.ob-ctl{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.ob-ctl button:last-child{margin-left:auto}
.ob-strip{position:fixed;left:8px;right:8px;bottom:8px;z-index:30;display:flex;gap:8px;padding:6px;background:var(--rt-bg);border:1px solid var(--rt-line)}
.ob-strip button:first-child{flex:1}
.ob-demo{display:flex;gap:10px;justify-content:center;pointer-events:none}
.ob-stage{position:relative;display:grid;width:var(--ob-w);overflow:hidden}
.ob-dot{position:absolute;top:0;left:0;z-index:6;width:var(--ob-dot);height:var(--ob-dot);pointer-events:none}
.ob-dot::before{content:"";display:block;width:56%;height:56%;margin:22%;border-radius:50%;background:var(--ob-tap,#0009);box-shadow:0 0 0 2px #fff}
.ob-frame{margin:0;text-align:center;font-size:.75rem}
.ob-dlg .ob-demo{margin:12px 0}
.ob-dlg .ob-text{margin:8px 0}
.ob-dlg .ob-stage{--ob-w:var(--ob-w-lg)}
.ob-legend{list-style:none;margin:12px 0;padding:0}
.ob-legend li{display:flex;align-items:center;gap:12px;padding:5px 0}
.ob-sw{position:relative;flex:none;display:block;width:40px;height:40px}
.ob-sw>*{position:absolute;inset:0;height:40px}
#rt-banner .ob-how{padding:0;border:0;background:none;color:inherit;text-decoration:underline}
.ob-cue::after{content:"";position:absolute;inset:1px;border:3px solid var(--ob-cue,var(--rt-acc));pointer-events:none;z-index:4;animation:ob-pulse .9s ease-out 3}
@keyframes ob-pulse{from{transform:scale(.7);opacity:.2}to{transform:scale(1.05);opacity:1}}
@media (prefers-reduced-motion:reduce){.ob-cue::after{animation:none}}
.ob-stage{--ob-w:130px;--ob-w-lg:220px;--cell:calc(var(--ob-w)/5);--ob-dot:20%;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);aspect-ratio:1;border:2px solid var(--brass-deep)}
.ob-stage .cell{cursor:default;width:100%;height:100%;font-size:calc(var(--cell)*.5)}
.ob-stage .cell.ob-l{border:0;background:none}
.ob-sw{--cell:40px}.ob-sw .cell{width:40px;font-size:20px}
:root{--ob-cue:var(--hint);--ob-tap:#0b3c8cb3}
.cell.ob-cue::after{inset:2px}
.cell.is-hint:not(:focus-visible){outline:2px dashed var(--hint);outline-offset:-7px}
#board:empty{width:calc(var(--cell)*var(--size,8) + 8px);height:calc(var(--cell)*var(--size,8) + 8px)}
.ob-card:has(.ob-frame){grid-template-columns:1fr}
.ob-card .ob-frame .ob-stage{--ob-w:110px}
@media (min-width:900px){.ob-card{left:auto;right:24px;bottom:24px;width:344px}}

/* Reserve the title line until JS fills it (CLS). */
#puzzle-title:empty{min-height:1.5em}