/*
  Color Bars: simple, kid-friendly. Works in portrait (vertical stack) and
  landscape (horizontal row).
*/

.bars-stage {
  align-items: stretch;
  padding: calc(64px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
}

.bars-board {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 8px;
  position: relative; /* anchor for .bell-glow-host */
  /* portrait default: bars stacked with C at the BOTTOM (low) and high c at the TOP.
     column-reverse renders the DOM order [C..c] bottom-up. */
  flex-direction: column-reverse;
}

.color-bar {
  flex: 1 1 0;
  min-height: 44px;
  border: 0;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--note-color);
  box-shadow: inset 0 -8px 0 rgba(20, 40, 65, 0.12), 0 6px 14px rgba(27, 35, 62, 0.1);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 0.06s ease, filter 0.06s ease;
}

/* Bars need to paint above the shared .bell-glow-host */
.color-bar { z-index: 1; }

.color-bar.is-playing {
  transform: scale(0.985);
  filter: brightness(1.08);
}

.color-bar-name {
  min-width: 54px;
  min-height: 54px;
  padding: 0 12px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #1b233e;
  background: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.3rem, 4.4vw, 2.1rem);
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 3px 6px rgba(20, 40, 65, 0.14);
}

/* Landscape: horizontal row (C on left, c on right). */
@media (orientation: landscape) {
  .bars-stage {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-left: calc(64px + env(safe-area-inset-left));
  }
  .bars-board {
    flex-direction: row;  /* not row-reverse — left-to-right C..c */
    gap: 10px;
  }
  .color-bar-name {
    font-size: clamp(1.4rem, 3vw, 2.4rem);
  }
}

/* Make the E (yellow) text legible on white circle */
.color-bar[style*="#f1e606"] .color-bar-name { color: #512d1b; }