:root{
  --oat:#e6dcc6;--sheet:#f3ecdc;--indigo:#1f3a6b;--indigo-deep:#172c52;--madder:#a13a26;--ink:#2b2a26;--muted:#655c4c;--line:#b9ad94;
  --font: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(--ink);font-family:var(--font);line-height:1.45;background-color:var(--oat);
  background-image:repeating-linear-gradient(0deg,#7a684414 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#7a684414 0 1px,#0000 1px 3px)}
#app{max-width:1040px;margin:0 auto;padding:14px 12px 40px}
.masthead{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:2px solid var(--madder)}
.masthead img{width:40px;height:40px}
#title{margin:0;font-size:2rem;line-height:1.1;font-weight:700;letter-spacing:-.01em;color:var(--indigo)}
#title em{font-style:normal;color:var(--madder)}
button{font:inherit;color:var(--indigo);background:none;border:0;min-height:44px;cursor:pointer;touch-action:manipulation}
button:disabled{color:var(--muted);cursor:default}
:focus-visible{outline:3px solid var(--madder);outline-offset:2px}
.selectors{display:flex;gap:18px}
#mode-select,#size-select{display:flex;flex:1}
#mode-select button,#size-select button{flex:1;padding:0 6px;border-bottom:3px solid #0000;white-space:nowrap}
#mode-select button[aria-pressed=true],#size-select button[aria-pressed=true]{border-bottom-color:var(--indigo);font-weight:700}
#info{margin:10px 0 8px;color:var(--muted);font-variant-numeric:tabular-nums}
.view-row{display:none;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;font-size:.875rem;color:var(--muted)}
.view-toggle{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--indigo);font-weight:600;cursor:pointer;white-space:nowrap}
.view-toggle input{width:22px;height:22px;margin:0;accent-color:var(--indigo)}
#board-wrap{background:var(--sheet);border:1px solid var(--line);overflow:auto;max-height:66svh;-webkit-overflow-scrolling:touch}
.nono-board{--nono-cell-size:max(44px,min(64px,calc((100vw - 5.5rem)/var(--nono-cols))));
  display:inline-grid;grid-template-columns:auto repeat(var(--nono-cols),var(--nono-cell-size));grid-auto-rows:auto;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;vertical-align:top;font-variant-numeric:lining-nums}
.nono-board:focus{outline:none}
.nono-board:focus-visible{outline:3px solid var(--madder);outline-offset:-3px}
.nono-corner{position:sticky;top:0;left:0;z-index:3;background:var(--sheet);touch-action:pan-x pan-y}
.nono-clue{position:sticky;z-index:2;display:flex;gap:5px;font-size:.9375rem;font-weight:700;line-height:1.15;color:var(--indigo);background:var(--sheet);touch-action:pan-x pan-y}
.nono-clue--row{left:0;justify-content:flex-end;align-items:center;padding:0 7px 0 8px;border-right:2px solid var(--indigo);min-height:var(--nono-cell-size)}
.nono-clue--col{top:0;flex-direction:column;gap:2px;justify-content:flex-end;align-items:center;padding:8px 0 6px;border-bottom:2px solid var(--indigo)}
.nono-clue.is-complete{color:var(--muted);font-weight:400}
.nono-cell{height:var(--nono-cell-size);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer}
.nono-cell.is-major-right{border-right:2px solid var(--indigo)}
.nono-cell.is-major-bottom{border-bottom:2px solid var(--indigo)}
.nono-cell[data-state=filled]{background-color:var(--indigo);background-image:repeating-linear-gradient(0deg,#ffffff14 0 1px,#0000 1px 3px)}
.nono-cell[data-state=marked]::after{content:"\00d7";color:var(--madder);font-size:calc(var(--nono-cell-size)*.62);line-height:1}
.nono-cell.is-error{background:#efc9bb repeating-linear-gradient(45deg,#a13a26 0 2px,#0000 2px 6px);box-shadow:inset 0 0 0 2px var(--madder)}
.nono-cell.is-hinted{box-shadow:inset 0 0 0 3px var(--madder)}
.nono-cell.is-cursor{outline:3px dashed var(--madder);outline-offset:-3px}
#game[data-won=true] #board-wrap{border-color:var(--madder)}
.actions{margin-top:10px}
#tools{display:flex;border:2px solid var(--indigo)}
#tools button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;font-weight:600}
#tools button[aria-pressed=true]{background:var(--indigo);color:var(--sheet)}
svg.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
svg.ico.solid{fill:currentColor;stroke:none}
#btn-hint svg{color:var(--madder)}
#controls{display:flex;flex-wrap:nowrap;margin-top:6px}
#controls button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;font-size:.8125rem;line-height:1.1}
#controls button+button{border-left:1px solid var(--line)}
#status{min-height:1.45em;margin:8px 0 0;color:var(--muted)}
#result{margin-top:14px;padding-top:12px;border-top:2px solid var(--madder)}
#result-title{margin:0 0 6px;color:var(--madder);font-size:1.5rem}
#share-text{display:block;width:100%;font:.9375rem/1.45 ui-monospace,Menlo,monospace;color:var(--ink);background:var(--sheet);border:1px solid var(--line);padding:8px;resize:none}
#btn-share{padding:0 20px;background:var(--indigo);color:var(--sheet);font-weight:600}
#result p{margin:8px 0 0}
#stats{margin-top:18px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted)}
#stats p{margin:0 0 4px}
#stats span{color:var(--indigo);font-weight:700}
@media (max-width:719px){
  #game:not(:has(.nono-board[data-size="5x5"])) .view-row{display:flex}
  #game:has(#view-fit:checked) .nono-board{--nono-cell-size:calc((100vw - 5.5rem)/var(--nono-cols))}
  #game:has(#view-fit:checked) .nono-clue{font-size:.6875rem;gap:2px}
  #game:has(#view-fit:checked) .nono-clue--row{padding:0 3px}
  #game:has(#view-fit:checked) .view-hint{visibility:hidden}
}
@media (max-width:419px){.selectors{gap:6px}#mode-select button,#size-select button{padding:0 2px;font-size:.9375rem}}
@media (min-width:720px){
  #app{padding:24px 28px 40px}
  .top{display:flex;align-items:center;gap:32px;border-bottom:2px solid var(--madder);margin-bottom:6px}
  .masthead{border:0;padding:0 0 8px;flex:none}
  #title{font-size:2.5rem}
  .selectors{flex:1;justify-content:flex-end;gap:32px}
  #mode-select,#size-select{flex:none}
  #mode-select button,#size-select button{padding:0 12px}
  #game{display:grid;grid-template-columns:auto 240px;justify-content:center;gap:0 40px;grid-template-rows:auto auto 1fr;grid-template-areas:"info info" "board actions" "board status"}
  #info{grid-area:info}#board-wrap{grid-area:board;max-height:none;overflow:visible;align-self:start}
  .actions{grid-area:actions;margin-top:0}#status{grid-area:status}
  .nono-board{--nono-cell-size:clamp(26px,calc((100svh - 310px)/var(--nono-rows)),64px)}
  #controls{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:12px;border-top:1px solid var(--line)}
  #controls button{flex-direction:row;justify-content:flex-start;gap:10px;font-size:1rem;padding:0 8px;border-bottom:1px solid var(--line);min-height:50px}
  #controls button+button{border-left:0}
  #result,#stats{max-width:760px;margin-inline:auto}
  #stats{display:flex;gap:32px}
}
@media (prefers-reduced-motion:no-preference){.nono-cell{transition:background-color .08s}}

/* Content pages and footer */
#title[href]{text-decoration:none}
.page-top{max-width:680px;margin:0 auto;padding:14px 16px 0}
.page{max-width:680px;margin:0 auto;padding:8px 16px 32px;font-size:1.0625rem;line-height:1.7;color:var(--ink)}
.page h1{margin:20px 0 8px;font-size:1.875rem;line-height:1.2;color:var(--indigo)}
.page h2{margin:32px 0 6px;font-size:1.3125rem;line-height:1.3;color:var(--indigo)}
.page h3{margin:20px 0 2px;font-size:1.0625rem;color:var(--indigo-deep)}
.page p,.page ul{margin:0 0 12px}
.page ul{padding-left:1.25em}
.page li{margin-bottom:8px}
.page a,.game-note a{color:var(--madder);text-underline-offset:2px}
.page code{font:.9375em ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
.lede{font-size:1.1875rem;color:var(--muted)}
.updated{color:var(--muted);font-size:.9375rem}
.play-link{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 0;padding:0 20px;background:var(--indigo);color:var(--sheet)!important;font-weight:600;text-decoration:none}
.game-note{max-width:1040px;margin:-16px auto 0;padding:0 12px 16px;color:var(--muted)}
.game-note p{margin:0;max-width:66ch}
.site-foot{border-top:1px solid var(--line);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;color:var(--indigo);font-size:.9375rem;text-underline-offset:3px}
.site-foot a[aria-current]{color:var(--madder)}
@media (min-width:720px){.page-top{padding:24px 16px 0}.game-note{padding:0 28px 20px}}

/* Retention panels */
:root{--rt-fg:var(--ink);--rt-soft:var(--muted);--rt-bg:var(--sheet);--rt-acc:var(--indigo);--rt-on:var(--sheet);--rt-line:var(--line)}
#mode-select #open-stats{flex:0 0 auto;padding:0 6px}
.rt-gallery{display:flex;flex-wrap:wrap;gap:8px}
.rt-gallery canvas{image-rendering:pixelated;width:72px;height:72px;background:var(--oat);border:1px solid var(--line)}
body[data-pending] #game{display:none}
.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:176px;--ob-w-lg:290px;--nono-cell-size:calc(var(--ob-w)/7.5);--ob-dot:var(--nono-cell-size);grid-template-columns:1fr repeat(5,var(--nono-cell-size));background:var(--sheet)}
.ob-stage>*{grid-row:1}
.ob-stage .nono-clue{position:static;grid-column:1}
.ob-stage .nono-cell{cursor:default}
.nono-cell.ob-l{height:100%}
.ob-sw .nono-cell{height:40px;--nono-cell-size:40px;border:1px solid var(--line)}
.ob-sw .nono-clue{justify-content:center;align-items:center;position:absolute}
@media (min-width:720px) and (max-width:1120px){.top{padding-right:52px}}
.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}}
.ob-card .ob-frame .ob-stage{--ob-w:150px}

/* Reserve the first board's space until JS renders it (CLS). */
.nono-board:empty{display:block;min-height:354px}
@media (min-width:720px){.nono-board:empty{min-height:372px}}
#game:has(.nono-board:empty) .view-row{display:none!important}