/* Танграм (js/tasks/tangram.js): поле с силуэтом и лоток с деталями. Размеры считает tangram.js (lib/tangram-geom.js → layout):
   --S — сторона поля, --k — масштаб деталей в лотке (px на сторону поля), --lift — во сколько раз деталь вырастает,
   когда её взяли (до размера поля). У детали: --h — половина её квадратной рамки (доли поля), --r — поворот,
   --ax/--ay — центр её места на поле. Рамка детали в лотке — не меньше 72 px, между рамками 20 px.
   Без анимации — .is-rm (ctx.reducedMotion) и «уменьшить движение» (styles.css). */
.tg { width: 100%; height: 100%; min-width: 0; max-width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.tg.is-side { flex-direction: row-reverse; align-items: flex-start; } /* альбомный экран: лоток слева от поля, прижат кверху — внизу слева стоят герои */
.tg.is-side .tg-tray { align-content: flex-start; }
.tg.is-rm, .tg.is-rm * { animation: none !important; transition: none !important; }
/* тесно (маленький телефон, 7 деталей): пустую во время задания строку кнопок отдаём полю и лотку */
.stage:has(.tg.is-tight) > .stage-controls:empty { min-height: 0; }

/* поле: силуэт — места толстым контуром, поверх заливкой (контур остаётся только снаружи), сверху — пунктир мест */
.tg-field { position: relative; flex: none; box-sizing: content-box; width: var(--S, 300px); height: var(--S, 300px); background: var(--c-card); border: 3px solid var(--c-ink); box-shadow: 0 6px 0 var(--c-ink); touch-action: manipulation; }
.tg-board { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tg-board polygon { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tg-sil-line polygon { fill: #d8ccb2; stroke: #d8ccb2; stroke-width: 10px; }
.tg-sil-fill polygon { fill: #ece4d1; stroke: #ece4d1; stroke-width: 1.5px; }
.tg-sil-line polygon, .tg-sil-fill polygon { transition: fill .7s ease, stroke .7s ease; }
.tg-place { fill: none; stroke: rgba(34, 48, 74, .4); stroke-width: 2.5px; stroke-dasharray: 7 6; }
.tg-place.is-next { stroke: var(--c-accent); stroke-width: 5px; stroke-dasharray: none; animation: tg-next .8s infinite alternate ease-in-out; }
@keyframes tg-next { to { stroke-opacity: .4; } }
.tg-place.is-filled { stroke: none; }
.tg-layer { position: absolute; inset: 0; pointer-events: none; transition: opacity .7s ease .15s; }

/* лоток: рамки деталей одного размера при любом повороте; ушедшая на поле деталь оставляет пустое место */
.tg-tray { flex: none; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 20px; }
.tg-piece, .tg-hole { flex: none; width: max(72px, calc(2 * var(--h) * var(--k))); height: max(72px, calc(2 * var(--h) * var(--k))); }
.tg-piece { position: relative; padding: 0; border: 0; background: none; display: grid; place-items: center; touch-action: none; cursor: grab;
  filter: drop-shadow(0 4px 0 rgba(34, 48, 74, .22)); }
.tg-shape { display: block; width: calc(2 * var(--h) * var(--k)); height: calc(2 * var(--h) * var(--k)); overflow: visible; pointer-events: none;
  transform: rotate(var(--r, 0deg)); transition: transform .22s ease-out; }
.tg-shape polygon { stroke: var(--c-ink); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* взяли — деталь вырастает до размера поля (центр на месте: рамка — квадрат вокруг центра детали) */
.tg-piece.is-lifted .tg-shape { transform: scale(var(--lift, 1)) rotate(var(--r, 0deg)); }
.tg-piece.is-dragging { z-index: 20; cursor: grabbing; filter: drop-shadow(0 14px 12px rgba(31, 43, 61, .3)); }
.tg-piece.is-returning { transition: transform .3s ease-out; }
.tg-piece.is-picked { outline: 5px solid var(--c-accent); outline-offset: 2px; }
.tg-piece.is-wrong { animation: nope .5s; }
/* значок «повернуть» (rotate: true) */
.tg-turn { position: absolute; right: -2px; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--c-card); color: var(--c-ink); border: 2px solid var(--c-ink); display: grid; place-items: center; pointer-events: none; }
.tg-turn svg { width: 20px; height: 20px; }
.tg-piece.is-turn .tg-turn { background: #fff1c9; border-color: var(--c-accent); animation: tg-turn .6s infinite alternate ease-in-out; }
@keyframes tg-turn { to { transform: rotate(50deg) scale(1.15); } }

/* деталь на поле: рамка вокруг центра места, в масштабе поля; поставленную заданием — пунктиром */
.tg-layer .tg-piece { position: absolute; left: calc((var(--ax) - var(--h)) * var(--S)); top: calc((var(--ay) - var(--h)) * var(--S));
  width: calc(2 * var(--h) * var(--S)); height: calc(2 * var(--h) * var(--S)); cursor: default; pointer-events: none; filter: none; }
.tg-layer .tg-shape { width: 100%; height: 100%; transition: none; }
.tg-layer .tg-turn { display: none; }
.tg-piece.is-shown polygon { stroke-dasharray: 8 5; }

/* собрано: детали растворяются, силуэт наливается цветом фигуры с тёмным контуром */
.tg.is-done .tg-sil-line polygon { fill: var(--c-ink); stroke: var(--c-ink); stroke-width: 8px; }
.tg.is-done .tg-sil-fill polygon { fill: var(--tg-done, var(--c-ezh)); stroke: var(--tg-done, var(--c-ezh)); }
.tg.is-done .tg-places { display: none; }
.tg.is-done .tg-layer { opacity: 0; }

@media (max-width: 700px) {
  .tg-turn { width: 26px; height: 26px; }
  .tg-turn svg { width: 17px; height: 17px; }
}