/*
 * 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.
 */

/* Deliberately no aspect-ratio/max-width math here: a plain (non-replaced)
   box can't reliably self-size to "fit both dimensions of the parent while
   preserving a ratio" the way a replaced element can. Instead the container
   just fills whatever board-wrap gives it, and the <svg> inside (a true
   replaced element, via viewBox + preserveAspectRatio) does the actual
   aspect-fit -- which is exactly what preserveAspectRatio is for. */
.board-container {
  position: absolute;
  /* Pin top/bottom/left/right (no width/height) so board.js's dynamic
     `top`/`bottom` overrides (geometric-mode's overlay reserves) still take
     effect -- setting width/height too would over-constrain the box and the
     overrides get silently ignored.
     left/right are pulled out by 16px so the artwork bleeds under .app's
     side padding and can span the full screen width; the .board-topbar and
     .controls-panel overlays stay at board-wrap's (inset) width so their
     text/chips keep their margin. */
  top: 0;
  bottom: 0;
  left: -16px;
  right: -16px;
  /* The board never scrolls, pans, or zooms -- `none` (not `manipulation`)
     so the browser never holds a tap back to disambiguate it from the start
     of a pan gesture, which was swallowing letter taps that had any finger
     drift. board.js resolves taps on pointerup itself; see bindTap(). */
  touch-action: none;
}

.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;
  touch-action: none;
  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;
  touch-action: none;
  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;
  /* A soft halo in the theme's own background color, drawn behind the fill
     (paint-order) rather than a hard white-on-black outline -- keeps letters
     readable against real flower art (photographed/painted petals can land
     any color right under a letter) using a color that's already part of
     the theme instead of an unrelated stark contrast. Scales with --fs (set
     per-label in board.js) so it stays proportionate at every board size. */
  paint-order: stroke fill;
  stroke: var(--petal-bg, #fdfaf6);
  stroke-width: calc(var(--fs, 32px) * 0.05);
  stroke-opacity: 0.7;
  stroke-linejoin: round;
  transition: opacity 0.2s ease, font-size 0.08s ease;
}

/* Shuffle animation: outer letters (never the center) fade out, get
   relabeled while invisible, then fade back in. Added/removed by
   board.js's shuffle(). */
.cell-label.is-shuffling {
  opacity: 0;
}

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

/* Image mode: invisible click regions drawn by the admin over real flower
   art (board.js renderImage()). fill must stay a paint (not "none") for SVG
   hit-testing, and pointer-events:all makes that certain across browsers. */
.cell-hit {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  pointer-events: all;
  touch-action: none;
}

/* Pseudo-haptic press feedback: the letter darkens and shrinks slightly for
   as long as the pointer is actually held down on it (board.js's
   bindPressFeedback), like it's being pressed into the screen, then springs
   back to full size on release. A thumb usually covers the letter while
   this happens, but it still reads as a response to the touch.
   Shrinking via font-size (not transform: scale) is deliberate: text-anchor
   + dominant-baseline already keep the glyph centered on its (x, y) at any
   size, so it shrinks in place with no transform-origin math needed. A
   transform-based scale needs transform-box: fill-box to center correctly,
   and that box is computed unreliably for SVG <text> across browsers --
   it visibly drifted the letter out of its petal instead of shrinking it. */
.cell-label.is-pressed {
  fill: var(--petal-primary-dark, #b84f80);
  font-size: calc(var(--fs, 1em) * 0.82);
}

.progress-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.progress-bar {
  display: flex;
  width: 100%;
  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);
}