.gnonogram-tools{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px;display:flex}.gnonogram-pen{justify-content:center;gap:8px;margin-bottom:12px;display:none}@media (pointer:coarse){.gnonogram-pen{display:flex}}.gnonogram-tools .g-btn,.gnonogram-pen .g-btn{color:#2b2420;background:#fffaf1;border:2px solid #2b2420;border-radius:10px;font-weight:700;transition:transform 60ms,box-shadow 60ms;position:relative;box-shadow:inset 0 -3px #e0cfb3,0 2px #2b242038}.gnonogram-tools .g-btn:hover:not(:disabled),.gnonogram-pen .g-btn:hover{background:#fff3df}.gnonogram-tools .g-btn:active:not(:disabled),.gnonogram-pen .g-btn:active{transform:translateY(2px);box-shadow:inset 0 -1px #e0cfb3}.gnonogram-tools .g-btn:disabled{box-shadow:none;color:#a89a88;border-color:#c9bba8}.gnonogram-tools .g-btn.is-on,.gnonogram-pen .g-btn.is-on{color:#7a2e0e;background:#ffbf85;border-color:#2b2420;box-shadow:inset 0 -3px #e79552,0 2px #2b242038}.gnonogram-scroll{-webkit-overflow-scrolling:touch;padding:4px 4px 10px;overflow-x:auto}.gnonogram-board{--cell:30px;--cw:18px;--ch:18px;--n:10;--rs:4;--cs:4;--clue-font:13px;--ink:#2b2420;grid-template-columns:calc(var(--rs) * var(--cw)) calc(var(--n) * var(--cell));grid-template-rows:calc(var(--cs) * var(--ch)) calc(var(--n) * var(--cell));-webkit-user-select:none;user-select:none;width:max-content;margin:0 auto;display:grid}.gnonogram-colclues{grid-template-columns:repeat(var(--n), var(--cell));align-items:end;display:grid}.gnonogram-cc{background:#f3eadb;border-radius:6px 6px 0 0;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;display:flex}.gnonogram-cc:nth-child(2n){background:#ebdfca}.gnonogram-rowclues{grid-template-rows:repeat(var(--n), var(--cell));display:grid}.gnonogram-rc{background:#f3eadb;border-radius:6px 0 0 6px;justify-content:flex-end;align-items:center;height:100%;display:flex}.gnonogram-rc:nth-child(2n){background:#ebdfca}.gnonogram-cc i,.gnonogram-rc i{font:800 var(--clue-font)/1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink);place-items:center;font-style:normal;transition:color .15s,opacity .15s;display:grid}.gnonogram-cc i{width:var(--cell);height:var(--ch)}.gnonogram-rc i{width:var(--cw);height:var(--cell)}.gnonogram-cc.is-done i,.gnonogram-rc.is-done i{color:#9a8b7a;opacity:.55}.gnonogram-cc:nth-child(5n):not(:last-child){box-shadow:inset -2px 0 0 var(--ink)}.gnonogram-rc:nth-child(5n):not(:last-child){box-shadow:inset 0 -2px 0 var(--ink)}.gnonogram-grid{grid-template-columns:repeat(var(--n), var(--cell));grid-template-rows:repeat(var(--n), var(--cell));border:2px solid var(--ink);background:var(--ink);box-shadow:0 0 0 1.5px var(--ink), 0 5px 0 1.5px #a48d74, 0 9px 14px #2b242029;touch-action:none;border-radius:4px;display:grid}.gnonogram-cell{width:var(--cell);height:var(--cell);font:900 calc(var(--cell) * .66)/1 var(--font);color:#c0503a;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fffaf1;border:1px solid #cdbfa9;border-top:0;border-left:0;place-items:center;margin:0;padding:0;display:grid;position:relative}.gnonogram-cell[data-b="1"]{background:#efe5d3}.gnonogram-cell.is-b5{border-right:2px solid var(--ink)}.gnonogram-cell.is-r5{border-bottom:2px solid var(--ink)}.gnonogram-cell:hover{background:#ffe7c7}.gnonogram-cell.is-fill,.gnonogram-cell.is-fill[data-b="1"]{box-shadow:inset 0 0 0 max(1px, calc(var(--cell) * .04)) #2b2420, inset 0 calc(var(--cell) * -.12) 0 #211b17, inset 0 calc(var(--cell) * .06) 0 #54483f;background:#3b322c;animation:.14s ease-out gnono-pop}.gnonogram-cell.is-fill:before{content:"";pointer-events:none;background:#ffffff8c;border-radius:99px;width:30%;height:11%;position:absolute;top:14%;left:14%;transform:rotate(-14deg)}.gnonogram-cell.is-fill:hover{background:#2f2823}@keyframes gnono-pop{0%{transform:scale(.72)}70%{transform:scale(1.06)}to{transform:scale(1)}}.gnonogram-cell.is-cross{color:#c0503a}.gnonogram-cell.is-wrong,.gnonogram-cell.is-wrong[data-b="1"]{color:#fff;box-shadow:inset 0 0 0 max(1px, calc(var(--cell) * .04)) #2b2420, inset 0 calc(var(--cell) * -.12) 0 #a93c17;background:#e0562b}.gnonogram-board.is-done .gnonogram-cell{cursor:default;background:#fffaf1;border-color:#0000}.gnonogram-board.is-done .gnonogram-cell.is-cross{color:#0000}.gnonogram-board.is-done .gnonogram-cell.is-fill{box-shadow:inset 0 calc(var(--cell) * -.1) 0 #b8451d;background:#ef6a35;animation:.26s ease-out gnono-win}@keyframes gnono-win{0%{transform:scale(1)}45%{transform:scale(1.14)}to{transform:scale(1)}}.gnonogram-board.is-done .gnonogram-cell:hover{background:#fffaf1}.gnonogram-board.is-done .gnonogram-cell.is-fill:hover{background:#ef6a35}.gnonogram-board.is-done .gnonogram-grid{background:#fffaf1;border-color:#ded5c8}@media (max-width:720px){.gnonogram-scroll{margin:0 -4px;padding:4px 4px 10px}.gnonogram-tools,.gnonogram-pen{gap:6px}.gnonogram-cell:hover{background:#fffaf1}.gnonogram-cell[data-b="1"]:hover{background:#efe5d3}.gnonogram-cell.is-fill:hover{background:#3b322c}.gnonogram-cell.is-wrong:hover{background:#e0562b}}@media (prefers-reduced-motion:reduce){.gnonogram-cell.is-fill,.gnonogram-board.is-done .gnonogram-cell.is-fill{animation:none}.gnonogram-tools .g-btn,.gnonogram-pen .g-btn{transition:none}}
