/*
  Hex Bells — Tonnetz harmonic-table layout, flat-top hexes.

  Geometry (flat-top hexagon):
    width  = corner-to-corner horizontally (W)
    height = flat-to-flat vertically         (H = W * √3 / 2 ≈ 0.866 W)

  Tiling (col-major, with column offset):
    Horizontal distance between adjacent cols = 3W/4  (cols interlock so the
      pointy left/right corners share with the adjacent col's slanted edges)
    Vertical offset between adjacent cols     = H/2   (every col shifted up
      half a hex height relative to its left neighbor — gives the staggered
      "honeycomb-rotated-90°" tiling)
    Within a col, hexes stack vertically by H per row (flat edges touch).
*/

.hex-stage {
  /* Tight padding — just enough clearance for the home pill at top */
  padding: calc(48px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
  align-items: center;
  justify-items: center;
}

.hex-board {
  /* Hex size — viewport-HEIGHT based, since the board (4.5 hex-heights tall
     with the stagger) is always height-constrained in landscape orientation.
     21vh keeps 4 rows + ½ hex offset fitting cleanly under the home pill.
     Min 54 for phones, max 170 so iPads don't go absurdly big. */
  --hex-w: clamp(54px, 21vh, 170px);
  --hex-h: calc(var(--hex-w) * 0.866);

  position: relative;
  /* Explicit board size from JS-set --board-w-units / --board-h-units */
  width: calc(var(--board-w-units, 1) * var(--hex-w));
  height: calc(var(--board-h-units, 1) * var(--hex-h));
}

/* ---- a hex key ---- */
.hex {
  position: absolute;
  width: var(--hex-w);
  height: var(--hex-h);
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  place-items: center;
  transition: transform 0.06s ease;
  /* paint above the .bell-glow-host so neighbor glows can't cover this hex */
  z-index: 1;

  /* THE SAME HEXAGON AS .hex-face, ON THE BUTTON ITSELF.

     Columns are only 0.75 hex-widths apart, so as plain rectangles every hex
     overlapped its neighbours' by 25% and the one later in DOM order won every
     shared point. The practical effect: press the right-hand tip of a hex and
     you heard the hex beyond it. That is what "the bells aren't responsive"
     was on this board -- not a missed touch, a touch credited to the wrong
     note, which is worse, because it sounds like the instrument is wrong
     rather than asleep.

     clip-path clips hit-testing as well as painting in WebKit and Blink, so
     with the button clipped to the shape the child already draws, the two
     right-hand triangles of the overlap band tile instead of fighting, and
     document.elementFromPoint starts agreeing with what the kid can see. No
     JavaScript involved, which is why it also fixes taps, glides, and the
     pointer capture path at once. */
  clip-path: polygon(
    25% 0%,      /* upper-left corner */
    75% 0%,      /* upper-right corner */
    100% 50%,    /* right point */
    75% 100%,    /* lower-right corner */
    25% 100%,    /* lower-left corner */
    0% 50%       /* left point */
  );
}

/* Make the inner pieces transparent to pointer events so the .hex button
   is the consistent target for glide hit-testing (elementFromPoint will
   still resolve to .hex via the click-through). */
.hex-face,
.hex-label,
.hex-label * { pointer-events: none; }

.hex:active { transform: translateY(2px); }

.hex-face {
  position: absolute;
  /* 1px inset on all sides shrinks the visible hex slightly so adjacent
     hexes have a ~2px gap between them — lets the radial underglow shine
     through and gives a flatter, cleaner look. */
  inset: 1px;
  /* FLAT-TOP hex: flat top + bottom edges, pointy left + right corners. */
  clip-path: polygon(
    25% 0%,      /* upper-left corner */
    75% 0%,      /* upper-right corner */
    100% 50%,    /* right point */
    75% 100%,    /* lower-right corner */
    25% 100%,    /* lower-left corner */
    0% 50%       /* left point */
  );
  background: var(--hex-color);
  /* No 3D bottom-sliver or outer drop shadow — flat fill */
}

/* Label inside the hex */
.hex-label {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  color: #ffffff;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.hex-name {
  font-size: clamp(1.05rem, 2vw, 1.8rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hex-sub {
  font-size: clamp(0.6rem, 1vw, 0.85rem);
  line-height: 1;
  font-weight: 800;
  opacity: 0.85;
}

/* Yellow naturals (E) use brown text per project convention */
.hex[style*="#F1E606"] .hex-label,
.hex[style*="#f1e606"] .hex-label { color: #512d1b; text-shadow: none; }

/* ---- active state ----
   .is-playing is added by BellsCore.flashBell when a hex is triggered;
   .is-active stays as a fallback for any manual press handling. */
.hex.is-active .hex-face,
.hex.is-playing .hex-face {
  filter: brightness(1.12) saturate(1.12);
  transform: scale(0.97);
}