/* Tangram — own styles, theme variables only. */

.tg {
  width: 100%;
  max-width: 520px;
}

.tg-boardwrap {
  padding: 8px;
  border-radius: var(--gm-radius, 12px);
  background: var(--gm-surface, #1b2740);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
}

.tg-board {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tg-tray-line {
  stroke: var(--gm-line-2, rgba(255, 255, 255, 0.16));
  stroke-width: 0.04;
  stroke-dasharray: 0.12 0.16;
}

/* silhouette */
.tg-outline polygon {
  fill: var(--gm-line-2, rgba(255, 255, 255, 0.16));
  stroke: var(--gm-accent-line, rgba(192, 57, 43, 0.42));
  stroke-width: 0.16;
  stroke-linejoin: round;
}

.tg-fill polygon {
  fill: var(--gm-surface-2, #22304a);
  stroke: var(--gm-surface-2, #22304a);
  stroke-width: 0.06;
  stroke-linejoin: round;
}

.tg-seam {
  fill-opacity: 0.2;
  stroke: var(--gm-muted, rgba(242, 238, 230, 0.66));
  stroke-width: 0.035;
  stroke-dasharray: 0.1 0.08;
  stroke-linejoin: round;
}

.tg-hintshape {
  fill: var(--gm-accent-soft, rgba(192, 57, 43, 0.2));
  stroke: var(--gm-accent-bright, #e0584a);
  stroke-width: 0.07;
  stroke-dasharray: 0.16 0.1;
  animation: tg-blink 0.9s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes tg-blink {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* pieces */
.tg-piece {
  cursor: grab;
  touch-action: none;
  outline: none;
}

.tg-piece polygon {
  stroke: var(--gm-surface, #1b2740);
  stroke-width: 0.05;
  stroke-linejoin: round;
}

.tg-t0 { fill: var(--gm-accent, #c0392b); }
.tg-t1 { fill: var(--gm-accent-bright, #e0584a); }
.tg-t2 { fill: var(--gm-sq-light, #d9b26f); fill: color-mix(in srgb, var(--gm-accent, #c0392b) 38%, var(--gm-text, #f2eee6)); }
.tg-t3 { fill: var(--gm-n1, #4a9ce0); }
.tg-t4 { fill: var(--gm-n2, #4fcf7a); }
.tg-t5 { fill: var(--gm-sq-dark, #8a5b9e); }
.tg-t6 { fill: var(--gm-muted, #9aa0aa); }
.tg-piece polygon { fill: inherit; }

.tg-piece.is-selected polygon {
  stroke: var(--gm-text, #f2eee6);
  stroke-width: 0.09;
}

.tg-piece:focus-visible polygon,
.tg-piece.is-grabbed polygon {
  stroke: var(--gm-text, #f2eee6);
  stroke-width: 0.12;
  stroke-dasharray: 0.2 0.1;
}

.tg-piece.is-dragging {
  cursor: grabbing;
  opacity: 0.92;
}

.tg-board.is-solved .tg-piece { cursor: default; }
.tg-board.is-solved .tg-piece polygon { stroke: var(--gm-surface, #1b2740); stroke-width: 0.03; stroke-dasharray: none; }
.tg-board.is-solved .tg-outline polygon { stroke: #58be82; }

.tg-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tg-tools .gm-btn {
  flex: 1 1 0;
  min-height: 44px;
  touch-action: manipulation;
  padding-left: 10px;
  padding-right: 10px;
}

.gm-actions .gm-btn[hidden] { display: none; }