: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}}