/* Холст, инструменты и галерея игр с рисованием (shared/sketch.js). */
.sk-wrap{flex:1;min-height:0;position:relative;width:100%}
.sk-board{position:absolute;inset:0;margin:auto;width:0;height:0;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-xl);overflow:hidden}
.sk-board>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.sk-board.can>canvas{cursor:crosshair}
.sk-board.can{border-color:var(--color-ink)}
.sk-cover{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:repeating-linear-gradient(135deg,var(--color-surface) 0 14px,var(--color-paper) 14px 28px);color:var(--color-muted);font-size:14px;font-weight:700;text-align:center;pointer-events:none}
.sk-tools{flex:none;display:flex;flex-direction:column;gap:6px}
.sk-colors{display:flex;gap:6px}
.sk-sw{flex:1;min-width:36px;height:40px;padding:0;border-radius:var(--radius-lg);border:2px solid transparent;cursor:pointer;touch-action:manipulation}
.sk-sw.on{border-color:var(--color-ink);box-shadow:inset 0 0 0 2px var(--color-surface)}
.sk-row{display:flex;gap:6px}
.sk-sizes{display:flex;gap:6px}
.sk-sz,.sk-undo{width:44px;height:44px}
.sk-sz i{display:block;border-radius:50%;background:var(--color-ink)}
.sk-sz.on{border:2px solid var(--color-ink)}
.sk-row .btn{flex:1}
.sk-undo:disabled{opacity:.35;cursor:default}

.sk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.sk-item{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px;border:1px solid var(--color-line);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-ink);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;transition:border-color .15s,background .15s}
.sk-item>canvas{display:block;width:100%;aspect-ratio:1;border-radius:var(--radius-lg);border:1px solid var(--color-line-soft);background:var(--color-surface)}
.sk-cap{display:flex;flex-direction:column;gap:1px;min-width:0;padding:0 2px 2px}
.sk-cap b{overflow:hidden;font-size:13px;line-height:17px;white-space:nowrap;text-overflow:ellipsis}
.sk-cap small{overflow:hidden;color:var(--color-muted);font-size:11px;line-height:15px;white-space:nowrap;text-overflow:ellipsis}
.sk-item.on{border-color:var(--me);background:var(--color-signal-faint);box-shadow:inset 0 0 0 1px var(--me)}
.sk-item.dim{opacity:.55}
.sk-tag{position:absolute;left:12px;top:12px;padding:2px 7px;border-radius:99px;background:var(--color-ink);color:var(--color-on-ink);font-size:10px;font-style:normal;font-weight:700;line-height:15px}
.sk-tag.on{background:var(--color-signal-deep);color:#fff}
.sk-zoom{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-lg);border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-muted)}
.sk-zoom svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sk-strip{display:flex;gap:6px;width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:2px 0}
.sk-strip::-webkit-scrollbar{display:none}
.sk-strip button{position:relative;flex:none;width:62px;padding:0;overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);cursor:zoom-in}
.sk-strip canvas{display:block;width:100%;aspect-ratio:1}
.sk-star{position:absolute;right:3px;top:2px;color:var(--color-signal-deep);font-size:13px;font-style:normal;line-height:1}

.sk-view{gap:12px}
.sk-view-art{position:relative}
.sk-view-art canvas{display:block;width:100%;aspect-ratio:1;border:1px solid var(--color-line);border-radius:var(--radius-xl);background:var(--color-surface)}
.sk-nav{position:absolute;top:50%;margin-top:-20px}
.sk-nav.prev{left:8px}
.sk-nav.next{right:8px}
.sk-view-acts{display:flex;gap:8px}
.sk-view-acts .btn{flex:1;color:var(--color-ink)}
.sk-view-acts .sk-again{flex:none;width:52px;padding:0}
.sk-view .dialog-title{position:static;box-shadow:none}
.sk-view h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sk-pool{display:flex;flex-direction:column;gap:6px;width:100%}