/* Shape Shadows */
.sh-board { width: min(100%, 420px); margin: 6px auto 0; padding: 8px; border-radius: 22px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.sh-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }
.sh-grid line { stroke: color-mix(in srgb, var(--text) 8%, transparent); stroke-width: .02; }
.sh-tray { fill: color-mix(in srgb, var(--text) 6%, transparent); }
.sh-shadow polygon { fill: #39405A; stroke: #39405A; stroke-width: .03; stroke-linejoin: round; }
:root[data-theme="dark"] .sh-shadow polygon { fill: #5A6690; stroke: #5A6690; }
.sh-guide polygon { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .05; stroke-dasharray: .14 .1; stroke-linejoin: round; }
.sh-piece { stroke: rgba(0,0,0,.35); stroke-width: .04; stroke-linejoin: round; cursor: grab; outline: none; filter: drop-shadow(0 .06px .08px rgba(0,0,0,.35)); }
.sh-piece.sel { stroke: #fff; stroke-width: .08; }
.sh-piece:focus-visible { stroke: #7FD8FF; stroke-width: .1; }
.sh-piece.clash { stroke: #E5484D; stroke-width: .09; }
.sh-piece.locked { cursor: default; opacity: .92; stroke-dasharray: none; }
.sh-svg.solved .sh-piece { stroke: #fff; stroke-width: .05; animation: sh-glow 1s ease-out; }
@keyframes sh-glow { 50% { filter: drop-shadow(0 0 .2px #FFD964); } }
@media (prefers-reduced-motion: reduce) { .sh-svg.solved .sh-piece { animation: none; } }