/* A compact clue board on felt. Native controls and generous cell targets. */
body[data-page-game=nonogram] #app{background:radial-gradient(ellipse at 50% 35%,#315f48 0%,#204b3a 48%,#143c30 100%);color:#fff5dc}
.ng-shell{--ng-paper:#fff6df;--ng-ink:#163f34;--ng-gold:#ffda87;--ng-muted:#d7ddc7;--ng-edge:#d3bd89;max-width:760px;margin:auto;padding:calc(12px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));color:var(--ng-paper);text-align:center}
.ng-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 auto 16px;max-width:620px;min-height:44px}
.ng-header a{display:inline-flex;align-items:center;justify-self:start;min-height:44px;color:var(--ng-paper);text-underline-offset:4px;font-size:.875rem}
.ng-header a:last-child{justify-self:end}
.ng-shell h1{font:500 27px/1.15 Georgia,serif;margin:0;letter-spacing:-.5px;text-shadow:0 2px 2px #09291f66}
.ng-shell h2{font:500 25px/1.2 Georgia,serif;margin:0;letter-spacing:-.3px;scroll-margin-top:12px}
.ng-shell p{line-height:1.5}
.ng-shell button,.ng-shell select{font:inherit;touch-action:manipulation}
.ng-shell button:not(.ng-cell){min-height:44px;border:1px solid var(--ng-edge);border-radius:10px;background:linear-gradient(#fff6df,#e9dbb6);color:var(--ng-ink);padding:9px 16px;cursor:pointer;font-weight:700;box-shadow:inset 0 1px #fffbed,0 3px 0 #102f24}
.ng-shell button:disabled{cursor:default;opacity:.55;box-shadow:none}
.ng-shell button:focus-visible,.ng-shell select:focus-visible,.ng-shell a:focus-visible,.ng-shell summary:focus-visible,.ng-board-scroll:focus-visible,.ng-shell #ng-status:focus-visible,.ng-shell #ng-success:focus-visible{outline:3px solid var(--ng-gold);outline-offset:3px}
.ng-playfield{max-width:620px;margin:auto;scroll-margin-top:12px}
.ng-hud{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto 15px;text-align:left;border-bottom:1px solid #e5d6a72f;padding:0 0 12px}
.ng-kicker{margin:0 0 5px;font-size:.73rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ng-muted)}
.ng-progress{flex-shrink:0;color:var(--ng-muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.ng-modes,.ng-actions{display:flex;justify-content:center;gap:8px}
.ng-tool-tray{position:sticky;top:8px;z-index:3;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:8px;width:max-content;max-width:100%;margin:0 auto 12px;padding:5px;background:#12382df5;border:1px solid #b6ca973d;border-radius:15px;box-shadow:0 3px 8px #05251c33,inset 0 1px 3px #05251c66}
.ng-modes{max-width:100%;flex-wrap:wrap;margin:0;padding:0}
.ng-shell .ng-modes button{min-width:88px;background:transparent;color:var(--ng-paper);border-color:transparent;box-shadow:none;font-size:.9rem}
.ng-shell .ng-modes button[aria-pressed=true]{background:linear-gradient(#ffe4a0,#e2c07a);border-color:#f5dfa8;color:#173e33;box-shadow:inset 0 1px #fff2cd,0 2px 0 #92733f}
.ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ng-board-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline-start:100px;padding:4px 4px 12px;scrollbar-color:#f0cc80 #163c30;scrollbar-width:auto}
.ng-board{border-collapse:separate;border-spacing:0;margin:auto;table-layout:fixed;background:var(--ng-paper);color:var(--ng-ink);border:2px solid #e8d7b5;box-shadow:0 4px 0 #a68d59,0 8px 0 #09291e99,0 14px 24px #09291e40}
.ng-board td{padding:0;border-right:1px solid #7c9282;border-bottom:1px solid #7c9282}
.ng-board th{font:700 14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;background:#e9dec1;color:#173e33;padding:6px;white-space:nowrap}
.ng-board .ng-row-clue{position:sticky;left:0;z-index:1;min-width:43px;text-align:right;border-right:2px solid #365b4b}
.ng-col-clue{vertical-align:bottom;border-bottom:2px solid #365b4b}
.ng-col-clue span{display:block}
.ng-board .met{color:#34574a;background:#d0dfce}
.ng-corner{font-size:11px!important;position:sticky;left:0;z-index:2}
.ng-shell .ng-cell{width:44px;height:44px;min-width:44px;scroll-margin-top:var(--ng-focus-offset,84px);scroll-margin-bottom:12px;display:block;border:0;border-radius:0;padding:0;background:var(--ng-paper);color:var(--ng-ink);font:700 31px/1 ui-monospace,monospace;cursor:pointer}
.ng-playfield[data-size="5"]{--ng-cell-size:clamp(44px,calc((100vw - 104px)/5),64px)}
.ng-playfield[data-size="5"] .ng-row-clue,.ng-playfield[data-size="5"] .ng-corner{width:56px;min-width:56px;max-width:56px}
.ng-playfield[data-size="10"][data-view="large"] .ng-row-clue,.ng-playfield[data-size="10"][data-view="large"] .ng-corner{width:96px;min-width:96px;max-width:96px}
.ng-playfield[data-size="10"][data-view="large"] .ng-board-scroll{scroll-padding-inline-start:112px}
.ng-playfield[data-size="5"] .ng-cell{width:var(--ng-cell-size);height:var(--ng-cell-size)}
.ng-shell .ng-cell.filled,.ng-overview-cell.filled{background:#163f34;box-shadow:inset 0 0 0 3px #274f40}
.ng-shell .ng-cell.marked,.ng-overview-cell.marked{color:#526859}
.ng-shell .ng-cell:disabled{opacity:1;cursor:default}
.ng-shell .ng-cell:focus-visible{outline:3px solid #c07800;outline-offset:-4px;position:relative;z-index:1}
.ng-board .ng-five-col{border-right:3px solid #365b4b}
.ng-board .ng-five-row{border-bottom:3px solid #365b4b}
.ng-view-choice{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:520px;margin:0 auto 8px;font-size:.75rem;color:var(--ng-muted)}
.ng-shell .ng-view-choice button{font-size:.8rem;padding:8px 11px;background:#1d4736;color:var(--ng-paper);border-color:#c2c89570;box-shadow:none}
/* Legal 10-cell lines can need nine spaced row glyphs or five stacked column clues.
   Budget the actual scroller content box: 88 px clue rail + 12 px cell borders
   (nine 1 px dividers and one 3 px divider) + 4 px frame + 2 px rounding slack.
   A conservative 18 px read-only fallback also fits the supported narrow view. */
.ng-playfield[data-view="overview"]{--ng-overview-rail:88px;--ng-overview-cell-borders:12px;--ng-overview-frame:4px;--ng-overview-slack:2px}
.ng-playfield[data-view="overview"] .ng-row-clue,.ng-playfield[data-view="overview"] .ng-corner{width:var(--ng-overview-rail);min-width:var(--ng-overview-rail);max-width:var(--ng-overview-rail);padding:4px}
.ng-playfield[data-view="overview"] .ng-col-clue{padding:4px 0}
.ng-overview-cell{--ng-overview-cell:18px;display:block;width:var(--ng-overview-cell);height:var(--ng-overview-cell);background:var(--ng-paper);font:700 19px/1 ui-monospace,monospace;text-align:center;line-height:var(--ng-overview-cell)}
/* Declare query units on the descendant marks, inside this exact-width container.
   They must never fall back to a viewport width that includes a page scrollbar. */
@supports (container-type:inline-size) and (width:1cqw){
 .ng-playfield[data-view="overview"] .ng-board-scroll{container-type:inline-size}
 .ng-overview-cell{--ng-overview-cell:clamp(18px,calc((100cqw - var(--ng-overview-rail) - var(--ng-overview-cell-borders) - var(--ng-overview-frame) - var(--ng-overview-slack))/10),27px)}
}
.ng-scroll-cue{font-size:.78rem;color:var(--ng-muted);margin:4px auto 8px}
.ng-actions{margin-top:12px}
.ng-shell .ng-actions button{font-size:.875rem;min-width:106px}
.ng-success,.ng-confirm{background:#102f26;border:1px solid #d7c79d75;padding:12px 16px;border-radius:12px;max-width:520px;margin:14px auto;font-size:.9rem}
.ng-success{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;border-color:#edc97d}
.ng-success p{margin:0;max-width:290px}
.ng-success button{flex-shrink:0}
.ng-confirm p{margin:0 0 8px}
.ng-confirm button{margin:4px}
.ng-secondary{max-width:520px;margin:22px auto 0;text-align:left}
.ng-disclosure{border-top:1px solid #ead5a833;font-size:.875rem;color:var(--ng-muted)}
.ng-disclosure summary{min-height:46px;padding:13px 4px;cursor:pointer;color:var(--ng-paper);font-weight:700}
.ng-disclosure summary span{float:right;margin-left:10px;color:var(--ng-muted);font-size:.75rem;font-weight:400}
.ng-select,.ng-help-copy{padding:0 4px 16px}
.ng-select label{display:block;margin:2px 0 9px;font-size:.8rem}
.ng-select select{display:block;width:100%;min-height:46px;border:1px solid #c5b997;border-radius:8px;background:var(--ng-paper);color:var(--ng-ink);padding:10px 8px}
.ng-help-copy p{margin:8px 0 12px}
.ng-help-copy a{display:inline-flex;align-items:center;min-height:44px;color:var(--ng-gold);text-underline-offset:3px}
.ng-first{padding-left:12px;border-left:2px solid var(--ng-gold);color:var(--ng-paper)}
.ng-message,.ng-notice{font-size:.85rem;max-width:520px;margin:14px auto 0}
.ng-message:empty{display:none}
.ng-notice{background:#0b2e24;padding:12px;border:1px solid #e3c99380;border-radius:10px}
@media(hover:hover){.ng-shell .ng-cell:not(:disabled):hover{box-shadow:inset 0 0 0 3px #b68a37}.ng-shell button:not(.ng-cell):not(:disabled):hover{filter:brightness(1.06)}}
@media(prefers-reduced-motion:no-preference){.ng-shell button:not(.ng-cell){transition:transform .1s,filter .1s}.ng-shell button:not(.ng-cell):not(:disabled):active{transform:translateY(1px)}}
@media(max-width:480px){.ng-shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.ng-header{gap:8px;margin-bottom:12px}.ng-shell h1{font-size:24px}.ng-shell h2{font-size:23px}.ng-hud{margin-bottom:12px;gap:8px}.ng-progress{max-width:84px;text-align:right;line-height:1.5}.ng-tool-tray{margin-bottom:10px;gap:6px;padding:4px}.ng-modes{gap:4px}.ng-shell .ng-modes button{padding:9px 8px;min-width:68px}.ng-shell #ng-undo{padding:9px 10px;font-size:.85rem}.ng-secondary{margin-top:18px}}
@media(max-width:340px){.ng-shell h1{font-size:22px}.ng-header a{font-size:.8rem}.ng-kicker{font-size:.68rem;letter-spacing:.025em}.ng-shell h2{font-size:21px}.ng-progress{font-size:.72rem;max-width:76px}.ng-shell .ng-modes button{min-width:64px;font-size:.85rem}.ng-disclosure summary span{font-size:.7rem}.ng-confirm{padding:10px 8px}}
/* Small-height and zoomed views use normal page scrolling; never shrink 10×10 targets. */
@media(max-height:620px){.ng-header{margin-bottom:8px}.ng-hud{padding-bottom:8px;margin-bottom:10px}.ng-playfield[data-size="5"]{--ng-cell-size:clamp(44px,calc((100vw - 104px)/5),54px)}}

/* System colours alone can erase a fill. Keep an explicit mark in high-contrast mode. */
@media(forced-colors:active){.ng-shell .ng-cell.filled,.ng-overview-cell.filled{background:Canvas;color:CanvasText;box-shadow:none}.ng-shell .ng-cell.filled::after,.ng-overview-cell.filled::after{content:'■';display:block;color:CanvasText}.ng-shell .ng-modes button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-4px}.ng-shell .ng-cell:focus-visible{outline-color:Highlight}}
@media(max-height:400px){.ng-tool-tray{position:static}}

/* A full-sized 10×10 desktop board gets a side rail instead of stacked chrome.
   At 1165×747 (zero safe-area inset), board top is 12+44+16+4 = 76 px.
   96 px clue rail + ten 44 px cells + 12 px dividers + 4 px frame = 552 px wide.
   Legal maximum: 5×21 px clues + 14 px clue padding/divider + 452 px rows + 4 px frame = 575 px high. */
@media(min-width:900px) and (min-height:621px){
 .ng-shell:has(.ng-playfield[data-size="10"]){max-width:940px}
 .ng-shell:has(.ng-playfield[data-size="10"]) .ng-header{max-width:820px}
 .ng-playfield[data-size="10"]{display:grid;max-width:820px;grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"hud board" "tools board" "view board" "actions board" ". cue";column-gap:24px;row-gap:12px;align-items:start}
 .ng-playfield[data-size="10"] .ng-hud{grid-area:hud;display:block;margin:0;padding-bottom:12px}
 .ng-playfield[data-size="10"] .ng-progress{display:block;margin-top:8px}
 .ng-playfield[data-size="10"] .ng-tool-tray{grid-area:tools;position:static;width:100%;margin:0;flex-direction:column;align-items:stretch}
 .ng-playfield[data-size="10"] .ng-modes{flex-direction:column;gap:4px}
 .ng-playfield[data-size="10"] .ng-view-choice{grid-area:view;flex-direction:column;align-items:stretch;width:100%;margin:0;text-align:left}
 .ng-playfield[data-size="10"] .ng-board-scroll{grid-area:board;align-self:start;width:100%;margin:0}
 .ng-playfield[data-size="10"] .ng-cell{scroll-margin-top:12px}
 .ng-playfield[data-size="10"] .ng-scroll-cue{grid-area:cue;margin:0;font-size:.78rem}
 .ng-playfield[data-size="10"] .ng-actions{grid-area:actions;justify-content:stretch;margin:0}
 .ng-playfield[data-size="10"] .ng-actions button{width:100%}
 .ng-playfield[data-size="10"] .ng-success,.ng-playfield[data-size="10"] .ng-confirm{grid-column:1/-1;max-width:none;width:100%;margin:0}
}

/* Read-only reasoning stays below the playfield in normal flow, never over cells. */
.ng-actions{flex-wrap:wrap}
.ng-reasoning{max-width:620px;margin:18px auto 0;padding:14px;border:1px solid #d7c79d75;border-radius:12px;background:#102f26;text-align:left;font-size:.875rem;overflow-wrap:anywhere}
.ng-reasoning p{margin:0 0 12px}
.ng-reasoning select{max-width:100%;min-height:44px;background:var(--ng-paper);color:var(--ng-ink);border:1px solid var(--ng-edge);border-radius:8px;padding:8px;margin-bottom:12px}
.ng-reasoning summary{cursor:pointer;min-height:44px;padding:10px 0}
.ng-reason-limit{margin-top:12px!important;color:var(--ng-muted);font-size:.8rem}
.ng-arrangements{max-height:220px;overflow:auto;padding-left:34px}
.ng-arrangements span{font-family:ui-monospace,monospace;white-space:nowrap}
#ng-reason-summary:focus-visible{outline:3px solid var(--ng-gold);outline-offset:3px}

/* A numbered read-only line stays beside its explanation on small screens. */
.ng-line-reference{margin:8px 0 14px;padding:10px;border:1px solid #d7c79d75;border-radius:8px;background:#173e33}
.ng-line-reference p{margin:0 0 7px}
.ng-reference-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;text-align:center}
.ng-reference-numbers{font:700 .75rem/1.5 ui-monospace,monospace}
.ng-line-reference .ng-reference-label{margin:7px 0 4px;font-size:.78rem}
.ng-reference-cell{min-width:0;min-height:24px;border:1px solid #bdc8af66;background:#fff6df;color:#163f34;font:700 19px/24px ui-monospace,monospace}
.ng-reference-cell.ng-proved-cell{border:2px solid #ffda87;background:#254b3b;color:#ffda87;line-height:22px}
.ng-line-reference .ng-reference-key{margin:8px 0 0;font-size:.75rem;color:var(--ng-muted)}
.ng-reasoning #ng-back-line{margin:0 0 12px}
.ng-target-line .ng-cell,.ng-target-line .ng-overview-cell{outline:2px solid #c07800;outline-offset:-2px}
.ng-board .ng-target-clue{box-shadow:inset 0 0 0 3px #c07800}
@media(forced-colors:active){.ng-reference-cell.ng-proved-cell{border:2px solid Highlight}.ng-target-line .ng-cell,.ng-target-line .ng-overview-cell{outline-color:Highlight}.ng-board .ng-target-clue{outline:2px solid Highlight;outline-offset:-2px}}