/*!
 * Bells & Beats v2 — the cover's flat world and the brand over the same grid composer.
 */
html, body.is-v2 { background: #8fd6f4; }
.v2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.v2-world .kk-scene { position: absolute; inset: 0; }
body.is-v2 .shell { position: relative; z-index: 1; background: transparent; }
body.is-v2 .hero-bar { background: transparent; }
body.is-v2 .composition-name {
  flex-basis: 420px; border-bottom: 0;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(28px, 4vw, 44px); color: #fff; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.32);
  /* an input clips to its line box, and Grobold's capitals overshoot its ascent:
     at line-height normal their tops were shaved flat */
  line-height: 1.2;
}
/* the transport: chunky round buttons */
body.is-v2 .transport-icon-btn { width: 56px; min-width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; color: #1b233e; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.15); }
body.is-v2 .transport-icon-btn svg { width: 24px; height: 24px; }
body.is-v2 .play-icon-btn { background: #009999; box-shadow: 0 5px 0 #007474; }
body.is-v2 .stop-icon-btn { background: #E72829; box-shadow: 0 5px 0 #b51f20; }
/* the grid: a white board on the sky */
body.is-v2 .workspace { background: rgba(255, 255, 255, 0.9); border-radius: 28px; box-shadow: 0 8px 0 rgba(27, 35, 62, 0.08); padding: 10px; }
body.is-v2 .grid-cell { border-radius: 14px; }
body.is-v2 .row-label { border-radius: 16px; }
/* "more this way": shown only while the grid overflows to the right (phone portrait) */
body.is-v2 .timeline-shell { position: relative; }
body.is-v2 .timeline-shell::after { content: ""; position: absolute; top: 0; right: 0; bottom: 12px; width: 56px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96)); opacity: 0; transition: opacity 0.2s; border-radius: 0 18px 18px 0; }
body.is-v2 .timeline-shell.bb-more::after { opacity: 1; }
body.is-v2 .bb-more-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 3; display: none;
  width: 48px; height: 48px; border-radius: 50%; border: 0; background: #1b233e; color: #fff; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.25); cursor: pointer; }
body.is-v2 .bb-more-btn svg { width: 24px; height: 24px; display: block; margin: auto; }
body.is-v2 .timeline-shell.bb-more .bb-more-btn { display: block; }
@media (prefers-reduced-motion: reduce) { body.is-v2 .timeline-shell::after { transition: none; } }

/* ── art pass 2026-10-13 (after Bell Train) ───────────────────────────────
   No card around the song: the grid sits right on the sky, like Bell Composer's
   beat boxes. The song's name and the transport share one slim row between the
   back button and the coins, so a phone on its side sees the whole grid. The
   prompt is three words ("Tap a square!", grid-composer.js). */
body.is-v2 .workspace { background: transparent; box-shadow: none; }
body.is-v2 .timeline-shell::after { background: linear-gradient(to right, rgba(143, 214, 244, 0), rgba(143, 214, 244, 0.96)); }
body.is-v2 .little-song-bar { padding: 4px 0 8px; }
body.is-v2 .little-song-bar p { font-weight: 900; color: #1b233e; }
@media (min-width: 600px) {
  body.is-v2 .hero-bar {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(84px, env(safe-area-inset-right, 0px)) 4px max(84px, env(safe-area-inset-left, 0px));
  }
  body.is-v2 .title-row { flex: 1 1 auto; min-width: 0; }
  body.is-v2 .composition-name { flex: 1 1 auto; flex-basis: auto; width: 100%; min-width: 0; }
  body.is-v2 .transport-cluster { flex-wrap: nowrap; justify-content: flex-end; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.is-v2 .composition-name { font-size: 26px; }
  body.is-v2 .transport-icon-btn { width: 50px; min-width: 50px; height: 50px; min-height: 50px; }
}