.act5 {
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
}

.act5__heading {
  font-size: var(--size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  opacity: 0;
}

.act5__subheading {
  font-size: var(--size-base);
  font-weight: var(--font-weight-light);
  color: var(--color-gray-500);
  font-style: italic;
  opacity: 0;
  margin-bottom: var(--space-sm);
}

/* Grid: 5 columns at 160px. Pieces are 178px wide, overflowing 18px right for tabs. */
.act5__puzzle {
  display: grid;
  grid-template-columns: repeat(5, 160px);
  grid-template-rows: repeat(2, 180px);
  gap: 0;
  justify-items: start;
  align-items: start;
  justify-content: center;
  overflow: visible;
}

/* Each piece is 178x198 to include tab space */
.act5__piece {
  position: relative;
  width: 178px;
  height: 198px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 12px 20px;
  box-sizing: border-box;
  background: var(--color-bg-secondary);
  border: none;
  text-align: center;
  opacity: 0;
  transform: scale(0.85);
  filter: drop-shadow(0 0 1px rgba(120, 120, 140, 0.7))
          drop-shadow(0 0 1px rgba(120, 120, 140, 0.7));
}

/* ---- Clip paths for 6 puzzle piece types ----
   Body: 0-160 x, 0-180 y
   Tab: 18px protrusion (extends to 178 or 198)
   Blank: 18px indent (curves inward)
   Tab/blank arc spans ~44px centered on edge midpoint
*/

/* r1c1: flat-top, flat-left, tab-right, tab-bottom */
.act5__piece[data-pos="r1c1"] {
  clip-path: path('M 0,0 L 160,0 L 160,68 C 160,68 178,76 178,90 C 178,104 160,112 160,112 L 160,180 L 102,180 C 102,180 94,198 80,198 C 66,198 58,180 58,180 L 0,180 Z');
}

/* r1c2-c4: flat-top, blank-left, tab-right, tab-bottom */
.act5__piece[data-pos="r1c2"],
.act5__piece[data-pos="r1c3"],
.act5__piece[data-pos="r1c4"] {
  clip-path: path('M 0,0 L 160,0 L 160,68 C 160,68 178,76 178,90 C 178,104 160,112 160,112 L 160,180 L 102,180 C 102,180 94,198 80,198 C 66,198 58,180 58,180 L 0,180 L 0,112 C 0,112 18,104 18,90 C 18,76 0,68 0,68 Z');
}

/* r1c5: flat-top, blank-left, flat-right, tab-bottom */
.act5__piece[data-pos="r1c5"] {
  clip-path: path('M 0,0 L 160,0 L 160,180 L 102,180 C 102,180 94,198 80,198 C 66,198 58,180 58,180 L 0,180 L 0,112 C 0,112 18,104 18,90 C 18,76 0,68 0,68 Z');
}

/* r2c1: blank-top, flat-left, tab-right, flat-bottom */
.act5__piece[data-pos="r2c1"] {
  clip-path: path('M 0,0 L 58,0 C 58,0 66,18 80,18 C 94,18 102,0 102,0 L 160,0 L 160,68 C 160,68 178,76 178,90 C 178,104 160,112 160,112 L 160,180 L 0,180 Z');
}

/* r2c2-c4: blank-top, blank-left, tab-right, flat-bottom */
.act5__piece[data-pos="r2c2"],
.act5__piece[data-pos="r2c3"],
.act5__piece[data-pos="r2c4"] {
  clip-path: path('M 0,0 L 58,0 C 58,0 66,18 80,18 C 94,18 102,0 102,0 L 160,0 L 160,68 C 160,68 178,76 178,90 C 178,104 160,112 160,112 L 160,180 L 0,180 L 0,112 C 0,112 18,104 18,90 C 18,76 0,68 0,68 Z');
}

/* r2c5: blank-top, blank-left, flat-right, flat-bottom */
.act5__piece[data-pos="r2c5"] {
  clip-path: path('M 0,0 L 58,0 C 58,0 66,18 80,18 C 94,18 102,0 102,0 L 160,0 L 160,180 L 0,180 L 0,112 C 0,112 18,104 18,90 C 18,76 0,68 0,68 Z');
}

/* Active glow via drop-shadow since box-shadow doesn't work with clip-path */
.act5__piece.active {
  filter: drop-shadow(0 0 1px rgba(120, 120, 140, 0.7))
          drop-shadow(0 0 1px rgba(120, 120, 140, 0.7))
          drop-shadow(0 0 10px rgba(0, 120, 230, 0.5));
  background: var(--color-bg-secondary);
}

.act5__piece-img {
  width: 90px;
  height: 65px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--color-dark-deep);
}

.act5__piece-label {
  font-size: var(--size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  line-height: 1.2;
}

.act5__piece.active .act5__piece-label {
  color: var(--color-white);
}

.act5__piece-detail {
  font-size: var(--size-xs);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-light);
}