/* Shape Mold. Layout only; colours come from the drawn shapes, never from inline styles. */
.sm-stage{display:grid;gap:14px}
.sm-levels{margin-top:4px}
.sm-level-name{display:block;font-size:.8em;opacity:.8}

.sm-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:520px;width:100%;margin:0 auto}
.sm-board[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:380px}
.sm-hole{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:8px;border:0;border-radius:20px;background:rgba(255,255,255,.06);color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .18s ease,background-color .18s ease}
.sm-hole:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.sm-hole.sm-over{transform:scale(1.04);background:rgba(255,213,79,.22)}
.sm-hole.sm-filled{cursor:default;background:transparent}
.sm-hole-art{position:absolute;inset:8px;display:block}
.sm-hole-art svg,.sm-inlay svg{display:block;width:100%;height:100%}
.sm-inlay{position:absolute;inset:8px;display:block;pointer-events:none}
.sm-inlay-art{display:block;width:100%;height:100%}

.sm-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:112px;padding:12px;border-radius:18px;background:rgba(255,255,255,.06);touch-action:none}
.sm-piece{position:relative;display:grid;place-items:center;width:88px;height:88px;padding:6px;border:3px solid rgba(255,255,255,.35);border-radius:18px;background:#fff;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .18s ease,box-shadow .18s ease}
.sm-piece[hidden]{display:none}
.sm-piece:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.sm-piece.sm-selected{border-color:#ffd54f;box-shadow:0 0 0 4px rgba(255,213,79,.45)}
.sm-piece.sm-drag{cursor:grabbing;z-index:5;transition:none;box-shadow:0 14px 26px rgba(0,0,0,.4)}
.sm-piece.sm-shake{animation:sm-shake .45s ease}
.sm-art{display:block;width:100%;height:100%}

.sm-actions{justify-content:center}
.sm-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sm-win:focus{outline:none}
.sm-howto{margin-top:28px}
.sm-steps{display:grid;gap:8px;padding-left:1.2em}

@keyframes sm-shake{
 0%,100%{transform:translateX(0)}
 20%{transform:translateX(-7px)}
 40%{transform:translateX(7px)}
 60%{transform:translateX(-5px)}
 80%{transform:translateX(4px)}
}

@media (max-width:520px){
 .sm-board{gap:8px}
 .sm-hole{padding:4px}
 .sm-hole-art,.sm-inlay{inset:4px}
}

@media (max-width:420px){
 .sm-piece{width:72px;height:72px}
}

@media (prefers-reduced-motion:reduce){
 .sm-piece,.sm-hole{transition:none}
 .sm-piece.sm-shake{animation:none}
}