.nono-tools{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.nono-tools button{min-height:44px;padding:8px 12px;border:1px solid #d8af8a;border-radius:10px;background:#fff0db;color:#623d28;font:600 14px/1.2 inherit;font-family:inherit;cursor:pointer}
.nono-tools button[aria-pressed=true]{background:#5a3a28;border-color:#3b2518;color:#fff}
.nono-tools button:disabled{opacity:.55;cursor:default}
.nono-wrap{width:100%;overflow-x:auto;padding:2px 0 6px}
.nono-board{display:grid;grid-template-columns:max-content repeat(var(--nono-size),minmax(0,1fr));width:100%;max-width:calc(var(--nono-size)*44px + 120px);margin:6px auto;touch-action:none;user-select:none;-webkit-user-select:none}
.nono-col-clue,.nono-row-clue{color:#4f3526;font:700 clamp(10px,2.6vw,15px)/1.15 Arial,sans-serif;border-radius:5px}
.nono-col-clue{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;padding:3px 0 5px;min-width:0}
.nono-row-clue{display:flex;justify-content:flex-end;align-items:center;gap:5px;padding:0 7px 0 3px;white-space:nowrap}
.nono-col-clue[data-active=true],.nono-row-clue[data-active=true]{background:#ffe6b8}
.nono-col-clue[data-state=done],.nono-row-clue[data-state=done]{color:#b6a493}
.nono-col-clue[data-state=error],.nono-row-clue[data-state=error]{color:#c3261f;background:#ffe1dc}
.nono-board .nono-cell{display:block;position:relative;box-sizing:border-box;width:100%;min-width:0;min-height:0;aspect-ratio:1;padding:0;margin:0;border:0;border-right:1px solid #d6bea3;border-bottom:1px solid #d6bea3;border-radius:0;background:#fffaf2;cursor:pointer;touch-action:none}
.nono-board .nono-top{border-top:2px solid #7c5b43}
.nono-board .nono-edge-x{border-right:2px solid #7c5b43}
.nono-board .nono-edge-y{border-bottom:2px solid #7c5b43}
.nono-row-clue+.nono-cell{border-left:2px solid #7c5b43}
.nono-board .nono-cell[data-v="1"]{background:#4a3024}
.nono-board .nono-cell[data-v="2"]::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#b09478;font:700 clamp(9px,2.6vw,17px)/1 Arial,sans-serif}
.nono-board .nono-cell:focus-visible{outline:3px solid #c55a12;outline-offset:-3px;z-index:1}
.nono-board .nono-cell:disabled{cursor:default;opacity:1}
@media(hover:hover){.nono-board .nono-cell:not(:disabled):hover{background:#ffe3ad}.nono-board .nono-cell[data-v="1"]:not(:disabled):hover{background:#6a4633}}
@media(max-width:480px){.nono-row-clue{gap:3px;padding-right:4px}.nono-tools button{padding:8px 9px;font-size:13px}}