/* ── Step badge (numbered square, color by step) ── */
.badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-family: var(--font-display);
  font-weight: 800;
  background: var(--badge-bg, var(--ink));
  color: var(--badge-fg, var(--white));
}
.badge--step-0 { --badge-bg: var(--ink); --badge-fg: var(--white); }
.badge--step-1 { --badge-bg: var(--brown); --badge-fg: var(--white); }
.badge--step-2 { --badge-bg: var(--blue); --badge-fg: var(--ink); }
.badge--step-3 { --badge-bg: var(--yellow); --badge-fg: var(--ink); }
.badge--step-4 { --badge-bg: var(--green); --badge-fg: var(--ink); }

/* ── Puzzle animation ── */
.puzzle { background: var(--paper-light); border-radius: 16px; overflow: hidden; }
.puzzle__svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.puzzle__piece, .puzzle__cup { transform-origin: 0 0; }
/* Set by the script after the first render, so the pieces don't fly in from the top left corner */
.puzzle--animated .puzzle__piece { transition: transform .85s cubic-bezier(.2, .85, .25, 1), opacity .4s ease; }
.puzzle--animated .puzzle__cup { transition: transform .7s cubic-bezier(.2, .9, .3, 1.2), opacity .4s ease; }
.puzzle__piece {
  --stroke-opacity: .5;
  --stroke-width: 2;
}
.puzzle__piece--current { --stroke-opacity: .9; --stroke-width: 3.5; }
.puzzle__body {
  fill: var(--piece-color);
  stroke: var(--ink);
  stroke-opacity: var(--stroke-opacity);
  stroke-width: var(--stroke-width);
  stroke-linejoin: round;
}
.puzzle__tab { fill: var(--piece-color); stroke: var(--ink); stroke-opacity: .5; stroke-width: 2; }
.puzzle__tab-shade { fill: var(--ink); fill-opacity: .22; }
.puzzle__cup-shadow { fill: var(--ink); fill-opacity: .12; }
.puzzle__cup-body { fill: var(--white); stroke: var(--ink); stroke-opacity: .55; stroke-width: 3; }
.puzzle__cup-coffee { fill: #6B4A35; }
.puzzle__cup-crema { fill: #8A6247; }
.puzzle__cup-foam { fill: #C9A98E; fill-opacity: .8; }
.puzzle__steam {
  fill: none;
  stroke: var(--white);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  opacity: 0;
  animation: puzzle-steam 2.6s ease-in-out infinite;
}
.puzzle__steam--2 { animation-delay: .9s; }
.puzzle__steam--3 { animation-delay: 1.7s; }
@keyframes puzzle-steam {
  0% { stroke-dashoffset: 70; opacity: 0; }
  30% { opacity: .75; }
  100% { stroke-dashoffset: -70; opacity: 0; }
}
/* Below the board instead of on top of it; the min height keeps the layout still while the step text changes */
.puzzle__caption {
  margin: 0 12px 12px;
  min-height: calc(3 * 1.4em + 20px);
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(255, 255, 255, .94);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 14px -6px rgba(42, 36, 32, .3);
}
.puzzle__caption-badge { width: 26px; height: 26px; font-size: 14px; }
.puzzle__caption-text { line-height: 1.4; min-width: 0; }

/* ── Step buttons ── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.steps__button {
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 4px;
  min-height: 64px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  border: 1.5px solid var(--line);
  background: var(--white);
}
.steps__button--active { border-color: var(--ink); background: var(--paper-light); }
.steps__number { width: 24px; height: 24px; font-size: 13px; }
.steps__title { font-size: 12.5px; font-weight: 700; line-height: 1.1; text-align: center; }

/* ── Controls ── */
.controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
/* One row on every width: the group takes the full line, so the swatches only shrink (down to 22px) when it is really too narrow */
.controls__swatches { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; max-width: 100%; }
.controls__label { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brown); }
.controls__play {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 0;
  background: var(--ink);
  color: var(--white);
}
.swatch {
  flex: 0 1 28px;
  min-width: 22px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  border: 1.5px solid rgba(42, 36, 32, .35);
  background: var(--swatch-color);
}
.swatch--mix {
  background: conic-gradient(#F1E9D8 0 51deg, #AFCBE6 0 103deg, #B9DCBF 0 154deg, #6E4E3A 0 206deg, #B48E72 0 257deg, #F4BFCB 0 309deg, #F6E08F 0);
}
.swatch--active { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .puzzle__steam { animation: none; opacity: .5; stroke-dashoffset: 0; }
}