/* =============================================================
   GAME: Tangram
   ============================================================= */
.board-tangram {
  --tg-glow: #ff9ee6;
  width: 100%; max-width: 980px; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(ellipse at 28% 45%, rgba(255, 158, 230, .14), transparent 55%),
    linear-gradient(160deg, #2a1240, #0e0619 80%);
  box-shadow: 0 0 0 2px var(--tg-glow), 0 0 26px rgba(255, 158, 230, .32), inset 0 0 40px rgba(0, 0, 0, .45), 0 14px 30px rgba(0, 0, 0, .4);
}
.tg-svg { display: block; width: 100%; height: auto; }
.tg-tray { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 158, 230, .22); stroke-width: .04; stroke-dasharray: .2 .16; }
/* silhouette: a glow ring around the union, inner seams hidden */
.tg-sil-glow polygon { fill: var(--tg-glow); stroke: var(--tg-glow); stroke-width: .16; stroke-linejoin: round; opacity: .75; }
.tg-sil polygon { fill: #14091f; stroke: #14091f; stroke-width: .035; stroke-linejoin: round; }
.tg-sil-lines polygon { fill: none; stroke: rgba(255, 158, 230, .38); stroke-width: .035; stroke-dasharray: .12 .1; }
.tg-hint { fill-opacity: .22; stroke-width: .07; stroke-dasharray: .18 .12; stroke-linejoin: round; animation: tgHint 1s ease-in-out infinite alternate; }
@keyframes tgHint { from { fill-opacity: .1; } to { fill-opacity: .38; } }
.tg-piece { cursor: grab; outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.tg-poly { stroke-width: .045; stroke-linejoin: round; filter: url(#tg-shadow); transition: stroke-width .12s; }
.tg-piece:hover .tg-poly { stroke-width: .07; }
.tg-sel .tg-poly { stroke: #fff; stroke-width: .09; }
.tg-piece:focus-visible .tg-poly { stroke: #fff; stroke-width: .11; stroke-dasharray: .2 .1; }
.tg-drag { cursor: grabbing; }
.tg-drag .tg-poly { filter: url(#tg-shadow) brightness(1.12); }
.tg-hinted .tg-poly { animation: tgPulse .9s ease-in-out infinite alternate; }
@keyframes tgPulse { to { stroke: #fff; stroke-width: .12; } }
.tg-done .tg-poly { animation: tgWin 1.2s ease-in-out infinite alternate; cursor: default; }
@keyframes tgWin { to { filter: url(#tg-shadow) brightness(1.3) saturate(1.2); } }
.tg-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tg-tools .tg-act { min-width: 44px; padding-left: 10px; padding-right: 10px; font-size: 1.15rem; line-height: 1; }
.tg-check { color: #7dffb0; font-weight: 800; }
.tg-prog { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .tg-hint, .tg-hinted .tg-poly, .tg-done .tg-poly { animation: none; }
  .tg-hint { fill-opacity: .3; }
}