/*
 * Board rendered as plain SVG polygons for now (a bud in the center,
 * petals around it) using flat colors. When real art assets are ready,
 * swap the fill/stroke rules below (or add <image>/pattern fills inside
 * board.js) without needing to change the layout/geometry logic.
 */

.board-container {
  width: auto;
  height: 100%;
  max-width: min(100%, 420px);
  max-height: 420px;
  aspect-ratio: 1 / 1;
  touch-action: manipulation;
}

.board-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cell-petal {
  fill: var(--petal-primary-light, #f4c6dc);
  stroke: var(--petal-primary, #d96c9c);
  stroke-width: 2;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.1s ease;
}

.cell-bud {
  fill: var(--petal-bud, #f6c94c);
  stroke: var(--petal-bud-dark, #e0a92a);
  stroke-width: 3;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.1s ease;
}

/* Real hover only applies on devices with an actual pointer (mouse/trackpad).
   Touch browsers simulate :hover on tap and never fire a "leave" event, so
   scoping this out avoids tiles getting stuck darkened until the next tap. */
@media (hover: hover) and (pointer: fine) {
  .cell-petal:hover {
    fill: var(--petal-primary, #d96c9c);
  }

  .cell-bud:hover {
    fill: var(--petal-bud-dark, #e0a92a);
  }
}

/* Brief tap-feedback flash, added/removed by board.js on click. */
.cell-petal.is-tapped {
  fill: var(--petal-primary, #d96c9c);
}

.cell-bud.is-tapped {
  fill: var(--petal-bud-dark, #e0a92a);
}

.cell-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 700;
  fill: var(--petal-ink, #3a2e2e);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

.cell-label.is-used {
  font-weight: 900;
  fill: var(--petal-primary-dark, #b84f80);
}

.progress-wrap {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.progress-bar {
  display: flex;
  width: 100%;
  max-width: 420px;
  gap: 5px;
}

.progress-segment {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--petal-primary-light, #f4c6dc);
  transition: background-color 0.2s ease;
}

.progress-segment.is-filled {
  background: var(--petal-primary, #d96c9c);
}