/* Band stage HUD (BD5b; band DESIGN §2.1, §2.3, §2.4, §2.7): the play ring, the chips, the deck (pads, build, tune), the
   tray and its short-layout drawer, the top-bar controls, the groove strip, the newcomer ring, the drag ghost and the slot
   targets, the floor's star bursts and the reveal pops. Every edge offset reads --sat --sab --sal --sar (band.css), never
   env(); every selector names a bd- class (check-rules); colours come from the core tokens. Sizes per layout class (on #app,
   stage/layout.js): tall 390 × 844, short 844 × 390, tablet 820 × 1180 / 1180 × 820, wide. "Press" (§2.3): on pointerdown
   the control shrinks to 0.94 with --press in that same frame (no transition in), and springs back over --t-micro. Chips are
   placed with the individual translate property and pressed with scale: the scale then works about each box's own centre
   (with transform: translate() it would scale the placement too, and a pressed or soloed chip would jump). */
:root {
  --bd-chip: 60px;
  --bd-padsz: 96px;
  --bd-padgap: 14px;
  --bd-buildsz: 112px;
  --bd-tunesz: 72px;
  --bd-ringsz: 120px;
  --bd-moviesz: 72px;
  --bd-groovesz: 64px;
  --bd-songsz: 60px;
  --bd-membersz: 72px;
  --bd-cardw: 96px;
  --bd-cardh: 112px;
  --bd-deck-bottom: calc(var(--bd-tray) + var(--sab) + 12px);
}
.bd-l-short { --bd-padsz: 80px; --bd-padgap: 12px; --bd-buildsz: 104px; --bd-tunesz: 64px; --bd-moviesz: 64px;
  --bd-deck-bottom: calc(var(--sab) + 12px); }
.bd-l-tablet-tall, .bd-l-tablet-wide { --bd-chip: 64px; --bd-buildsz: 128px; --bd-tunesz: 80px; --bd-ringsz: 140px; --bd-moviesz: 80px;
  --bd-groovesz: 72px; --bd-songsz: 64px; --bd-membersz: 88px; --bd-cardw: 112px; --bd-cardh: 128px; }

/* ── every Band control: a drawn button that answers on pointerdown, no callout, no magnifier, no menu */
.bd-ctl { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: var(--ink); background: var(--card); cursor: pointer;
  display: grid; place-items: center; border-radius: 50%; box-shadow: var(--shadow), var(--press); touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: scale var(--t-micro) var(--spring), translate var(--t-micro) var(--spring), box-shadow var(--t-micro) ease, opacity var(--t-micro) ease; }
.bd-ctl .ico { width: 44%; height: 44%; pointer-events: none; }
.bd-ctl img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.bd-ctl.is-pressed { scale: .94; box-shadow: var(--press); transition: none; }
.bd-ctl:focus-visible { outline: 4px solid var(--cobalt); outline-offset: 3px; }

/* ── reveal pops (§2.3: each new control pops in; reduced motion: a fade) */
.bd-pop { animation: bd-pop var(--t-pop) var(--spring) both; }
@keyframes bd-pop { 0% { opacity: 0; scale: .4; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes bd-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── top bar (band.css frames it): Songs and Groove on the left, Movie! on the right before the key */
.bd-hud .bd-top { z-index: 4; }
.bd-songs { width: var(--bd-songsz); height: var(--bd-songsz); }
.bd-groove { width: var(--bd-groovesz); height: var(--bd-groovesz); color: var(--coral); }
.bd-groove .ico { width: 58%; height: 58%; }
.bd-groove[data-groove="march"] { color: var(--cobalt); }
.bd-groove[data-groove="lullaby"], .bd-groove[data-groove="spooky"] { background: var(--night); color: var(--butter); }
.bd-groove[data-groove="spooky"] { color: var(--card); }
.bd-movie { margin-left: auto; width: calc(var(--bd-moviesz) * 1.22); height: var(--bd-moviesz); border-radius: 20px; position: relative; overflow: visible; }
.bd-movie img { width: 86%; height: 86%; object-fit: contain; }
/* armed (§2.3): the card stays lit and a ring round it fills toward bar 4 (--bd-m, BD7's movieState), then it fires */
.bd-movie::after { content: ""; position: absolute; inset: -8px; border-radius: 27px; padding: 5px; pointer-events: none; opacity: 0;
  background: conic-gradient(var(--coral) calc(var(--bd-m, 0) * 360deg), color-mix(in srgb, var(--card) 70%, transparent) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; transition: opacity 180ms ease; }
.bd-movie.is-armed { box-shadow: 0 0 22px 6px color-mix(in srgb, var(--butter) 80%, transparent), var(--shadow-lift); }
.bd-movie.is-armed::after { opacity: 1; }
.bd-movie.is-beat img { animation: bd-clap 260ms ease-out; }
@keyframes bd-clap { 0% { rotate: 0deg; } 35% { rotate: -9deg; } 100% { rotate: 0deg; } }

/* ── the play ring (opener and resting): coral, in the centre of the stage region, its rim the first-song sounds */
.bd-play { position: fixed; z-index: 3; left: var(--bd-px, 50vw); top: var(--bd-py, 40vh); width: var(--bd-ringsz); height: var(--bd-ringsz);
  margin: calc(var(--bd-ringsz) / -2) 0 0 calc(var(--bd-ringsz) / -2); background: var(--coral); color: var(--card);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--card) 70%, transparent), var(--shadow-lift), var(--press); animation: bd-breathe 1.2s ease-in-out infinite alternate; }
.bd-play .ico { width: 46%; height: 46%; translate: 6% 0; fill: currentColor; }
.bd-play::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(color-mix(in srgb, var(--butter) 90%, var(--card)) calc(var(--bd-p, 1) * 360deg), color-mix(in srgb, var(--card) 45%, transparent) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
.bd-play.is-pressed { animation: none; }
@keyframes bd-breathe { from { scale: 1; } to { scale: 1.06; } }
.bd-mutebadge { position: absolute; right: -4px; top: -4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.bd-mutebadge .ico { width: 22px; height: 22px; }
.bd-ringburst { position: fixed; z-index: 3; width: var(--bd-ringsz); height: var(--bd-ringsz); border-radius: 50%; pointer-events: none;
  margin: calc(var(--bd-ringsz) / -2) 0 0 calc(var(--bd-ringsz) / -2); border: 6px solid var(--butter); animation: bd-ringburst 260ms ease-out forwards; }
@keyframes bd-ringburst { from { scale: 1; opacity: .9; } to { scale: 1.6; opacity: 0; } }

/* ── slot chips: one per occupied slot, placed every frame under the front feet / over the back heads */
.bd-chips, .bd-targets, .bd-fx { position: fixed; inset: 0; pointer-events: none; }
.bd-chips { z-index: 2; }
.bd-chip { position: fixed; left: 0; top: 0; width: var(--bd-chip); height: var(--bd-chip); background: var(--bd-part, var(--card)); color: var(--card);
  will-change: translate; transition: scale var(--t-micro) var(--spring), box-shadow var(--t-micro) ease, filter 180ms ease, opacity 180ms ease; }
.bd-chip .ico { width: 50%; height: 50%; }
.bd-chip[data-slot="beat"] { --bd-part: var(--bd-beat); }
.bd-chip[data-slot="bass"] { --bd-part: var(--bd-bass); }
.bd-chip[data-slot="melody"] { --bd-part: var(--bd-melody); color: var(--ink); }
.bd-chip[data-slot="sparkle"] { --bd-part: var(--bd-sparkle); color: var(--ink); }
.bd-chip.is-muted { filter: saturate(.2); }
.bd-chip.is-solo, .bd-chip.is-solo.is-pressed { scale: 1.1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--butter) 80%, transparent), var(--shadow-lift); }
.bd-chip.is-gone { opacity: 0; pointer-events: none; }
.bd-chip .bd-lock { position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.bd-chip .bd-lock .ico { width: 18px; height: 18px; }
.bd-chip.is-latched .bd-lock { display: grid; animation: bd-pop var(--t-pop) var(--spring) both; }
.bd-chip-name { position: absolute; left: 50%; top: calc(100% - 6px); translate: -50% 0; max-width: 11ch; padding: 1px 8px; border-radius: 999px;
  background: var(--overlay-bg); color: var(--ink); font-size: var(--label); line-height: 1.25; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; pointer-events: none; box-shadow: var(--shadow); }
.bd-target { position: fixed; left: 0; top: 0; width: 120px; height: 46px; margin: -23px 0 0 -60px; border-radius: 50%; opacity: 0;
  border: 4px solid var(--bd-part, var(--butter)); background: color-mix(in srgb, var(--bd-part, var(--butter)) 22%, transparent); transition: opacity 120ms ease, scale 120ms ease; }
.bd-target[data-slot="beat"] { --bd-part: var(--bd-beat); }
.bd-target[data-slot="bass"] { --bd-part: var(--bd-bass); }
.bd-target[data-slot="melody"] { --bd-part: var(--bd-melody); }
.bd-target[data-slot="sparkle"] { --bd-part: var(--bd-sparkle); }
.bd-hud.is-dragging .bd-target { opacity: .75; }
.bd-hud.is-dragging .bd-target.is-hot { opacity: 1; scale: 1.18; }

/* ── the deck: pads on the left (6-8), build and tune on the right, each column anchored to its side inset */
.bd-pads { position: fixed; z-index: 3; left: calc(var(--sal) + 16px); bottom: var(--bd-deck-bottom); display: grid;
  grid-template-columns: repeat(2, var(--bd-padsz)); grid-auto-rows: var(--bd-padsz); gap: var(--bd-padgap); pointer-events: none; }
.bd-l-short .bd-pads { bottom: calc(var(--bd-deck-bottom) + 72px); }
.bd-pad { width: var(--bd-padsz); height: var(--bd-padsz); border-radius: 28px; pointer-events: auto; }
.bd-pad img { width: 82%; height: 82%; object-fit: contain; }
.bd-pad.is-lit { box-shadow: 0 0 0 6px color-mix(in srgb, var(--butter) 85%, transparent), 0 0 26px 6px color-mix(in srgb, var(--butter) 60%, transparent), var(--press); }
.bd-col { position: fixed; z-index: 3; right: calc(var(--sar) + 16px); bottom: var(--bd-deck-bottom); width: var(--bd-buildsz);
  display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.bd-col > * { pointer-events: auto; }
.bd-tune-spacer { width: var(--bd-tunesz); height: var(--bd-tunesz); pointer-events: none; }
.bd-build { width: var(--bd-buildsz); height: var(--bd-buildsz); position: relative; color: var(--coral-deep);
  background: radial-gradient(circle, var(--card) 62%, transparent 63%), conic-gradient(var(--coral) calc(var(--bd-r, 0) * 360deg), var(--sand) 0); }
.bd-build .ico { width: 46%; height: 46%; }
.bd-build.is-pressed { translate: 0 4px; scale: .97; }
.bd-build.is-building .ico { animation: bd-climb 520ms ease-in-out infinite; }
.bd-build.is-drop { animation: bd-dropburst 320ms ease-out; }
@keyframes bd-climb { 0% { translate: 0 3px; } 50% { translate: 0 -4px; } 100% { translate: 0 3px; } }
@keyframes bd-dropburst { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--butter) 90%, transparent), var(--shadow); } 100% { box-shadow: 0 0 0 26px transparent, var(--shadow); } }
.bd-tune { width: var(--bd-tunesz); height: var(--bd-tunesz); color: var(--ink); background: color-mix(in srgb, var(--butter) 45%, var(--card)); }
.bd-tune .ico { width: 52%; height: 52%; }
.bd-tune.is-hint { animation: bd-breathe 600ms ease-in-out 6 alternate; }

/* ── the tray (band.css frames it): Add, the wish button and the members; short: a drawer behind #bd-tray-open */
.bd-hud .bd-tray { z-index: 3; }
/* Add (§2.6): the camera and the brush side by side under a "+" badge; the key badge on the camera only. Add and the wish
   button are taps only, so like the members they let a sideways finger scroll the tray (pan-x; the pan cancels the tap). */
.bd-add { flex: 0 0 auto; width: auto; height: var(--bd-membersz); border-radius: 22px; background: var(--coral-field); position: relative;
  display: flex; align-items: center; gap: 4px; padding: 0 10px 0 12px; touch-action: pan-x; }
.bd-add-pic { position: relative; flex: 0 0 auto; width: calc(var(--bd-membersz) * .6); height: calc(var(--bd-membersz) * .6); display: grid; place-items: center; }
.bd-add-pic img { width: 100%; height: 100%; object-fit: contain; }
.bd-add-plus { position: absolute; left: -2px; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); box-shadow: var(--shadow); pointer-events: none; }
.bd-add-plus img { width: 22px; height: 22px; object-fit: contain; }
.bd-add .bd-keybadge { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.bd-add .bd-keybadge .ico { width: 14px; height: 14px; }
.bd-wish { flex: 0 0 auto; display: inline-flex; width: auto; min-width: 60px; height: 60px; min-height: 60px; padding: 0 2px; border-radius: 999px; touch-action: pan-x; }
.bd-wish.is-pressed { scale: 1; }   /* the core's own press (is-down) squashes it */
.bd-member { flex: 0 0 auto; width: var(--bd-membersz); height: var(--bd-membersz); border-radius: 22px; overflow: hidden; touch-action: pan-x;
  background: var(--paper); }
.bd-member img { width: 100%; height: 100%; object-fit: contain; }
.bd-member.is-lifted { opacity: .35; }
/* short: the drawer runs from right of the left column's corner (where its close tab takes #bd-tray-open's place) to the
   right edge, so neither covers an actor */
.bd-l-short .bd-tray.is-open { display: flex; left: calc(var(--sal) + 88px); height: calc(96px + var(--sab)); padding-left: 16px; z-index: 6;
  animation: bd-drawer 240ms var(--spring) both; }
@keyframes bd-drawer { from { translate: 0 100%; } to { translate: 0 0; } }
.bd-trayopen { position: fixed; z-index: 3; left: calc(var(--sal) + 16px); bottom: calc(var(--sab) + 12px); width: 60px; height: 60px; display: none; }
.bd-l-short .bd-trayopen { display: grid; }
.bd-traytab { position: fixed; z-index: 7; left: calc(var(--sal) + 16px); bottom: calc(var(--sab) + 18px); width: 60px; height: 60px; }
.bd-hud.is-drawer .bd-pads, .bd-hud.is-drawer .bd-col, .bd-hud.is-drawer .bd-trayopen { visibility: hidden; }

/* ── the groove strip (S2): cards under the top bar, the current one ringed in ink */
.bd-strip { position: fixed; z-index: 5; top: calc(var(--sat) + 16px + var(--bd-bar)); left: calc(var(--sal) + 16px); right: calc(var(--sar) + 16px);
  display: flex; justify-content: center; gap: 12px; padding: 12px; border-radius: 28px; background: var(--overlay-bg); box-shadow: var(--shadow-lift);
  pointer-events: auto; overflow-x: auto; animation: bd-strip 300ms var(--spring) both; }
@keyframes bd-strip { from { translate: 0 -24px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.bd-card { width: var(--bd-cardw); height: var(--bd-cardh); border-radius: 24px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center; color: var(--coral); background: var(--card); }
.bd-card .ico { width: 64px; height: 64px; }
.bd-card[data-groove="march"] { color: var(--cobalt); }
.bd-card[data-groove="lullaby"] { color: var(--butter); background: var(--night); }
.bd-card[data-groove="spooky"] { color: var(--card); background: var(--night); }
.bd-card.is-current { box-shadow: 0 0 0 4px var(--ink), var(--shadow); }
.bd-card-name { font-size: var(--label); line-height: 1.1; }
.bd-card[data-groove="lullaby"] .bd-card-name, .bd-card[data-groove="spooky"] .bd-card-name { color: var(--card); }
.bd-card.is-flipped { animation: bd-flip 300ms ease both; width: auto; min-width: var(--bd-cardw); padding: 8px 12px; border-radius: 24px; }
@keyframes bd-flip { from { rotate: y 90deg; } to { rotate: y 0deg; } }
.bd-ask { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--card); }
.bd-ask-line { font-size: var(--label); max-width: 16ch; text-align: center; line-height: 1.2; }
.bd-ask-row { display: flex; gap: 12px; }
.bd-yes, .bd-no { width: 60px; height: 60px; }
.bd-yes { background: var(--green); color: var(--card); }

/* ── the sleeping newcomer (S5): a butter ring at its projected place; 9-10 a hint line */
.bd-newcomer { position: fixed; z-index: 3; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; background: transparent;
  transition: scale var(--t-micro) var(--spring), opacity var(--t-micro) ease;
  border: 6px solid var(--butter); box-shadow: 0 0 0 4px color-mix(in srgb, var(--card) 55%, transparent), 0 0 24px color-mix(in srgb, var(--butter) 70%, transparent);
  animation: bd-breathe 1.2s ease-in-out infinite alternate; }
.bd-hint { position: fixed; z-index: 3; left: 50%; translate: -50% 0; top: calc(var(--sat) + 24px + var(--bd-bar)); max-width: calc(100vw - 32px);
  padding: 8px 16px; border-radius: 999px; background: var(--overlay-bg); font-size: var(--label); pointer-events: none; box-shadow: var(--shadow); }

/* ── the drag ghost (88 px portrait), the floor's star bursts */
.bd-ghost { position: fixed; z-index: 8; left: 0; top: 0; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; overflow: hidden;
  background: var(--card); box-shadow: 0 0 0 4px var(--butter), var(--shadow-lift); pointer-events: none; }
.bd-ghost img { width: 100%; height: 100%; object-fit: contain; }
.bd-fx { z-index: 2; overflow: hidden; }
.bd-burst { position: fixed; left: 0; top: 0; width: 0; height: 0; }
.bd-star { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; color: var(--butter); animation: bd-star 500ms ease-out forwards; }
.bd-star:nth-child(3n) { color: var(--signal); }
.bd-star:nth-child(4n) { color: var(--card); }
.bd-star .ico { width: 100%; height: 100%; fill: currentColor; }
@keyframes bd-star { from { translate: 0 0; scale: .5; opacity: 1; } to { translate: var(--bd-dx) var(--bd-dy); scale: 1; opacity: 0; } }

/* ── the tune panel host (BD6 mounts into it): while it is open the deck makes room (§2.5) */
.bd-tune-host { position: fixed; z-index: 6; inset: 0; pointer-events: none; }
.bd-tune-host > * { pointer-events: auto; }
.bd-hud.is-tune .bd-pads, .bd-hud.is-tune .bd-tune, .bd-hud.is-tune .bd-tune-spacer { display: none; }
.bd-l-tall .bd-hud.is-tune .bd-col, .bd-l-short .bd-hud.is-tune .bd-col { display: none; }
.bd-l-tablet-tall .bd-hud.is-tune .bd-col { right: auto; left: calc(var(--sal) + 16px); bottom: calc(45vh + 12px); }
.bd-l-tablet-wide .bd-hud.is-tune .bd-col, .bd-l-wide .bd-hud.is-tune .bd-col { right: auto; left: calc(var(--sal) + 16px); bottom: calc(var(--bd-tray) + var(--sab) + 12px); }

/* ── no WebGL2 (S13): the starter greets on a 2D canvas, the calm card and a way to Add */
.bd-flat { position: fixed; inset: 0; z-index: 2; display: grid; grid-template-rows: 1fr auto; gap: 16px; place-items: center;
  padding: calc(var(--sat) + 88px) calc(var(--sar) + 16px) calc(var(--sab) + 24px) calc(var(--sal) + 16px); background: var(--paper); }
.bd-flat-canvas { width: min(88vw, 420px); aspect-ratio: 1; border-radius: 28px; touch-action: none; pointer-events: auto; }
.bd-flat-card { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 30rem; text-align: center; font-size: var(--body); }
.bd-flat .bd-add { height: 88px; --bd-membersz: 88px; }

@media (prefers-reduced-motion: reduce) {
  .bd-pop { animation: bd-fade var(--t-calm) ease both; }
  .bd-play, .bd-newcomer, .bd-tune.is-hint, .bd-build.is-building .ico, .bd-movie.is-beat img { animation: none; }
  .bd-play { opacity: .92; }
  .bd-ctl.is-pressed { scale: 1; opacity: .8; }
  .bd-strip, .bd-l-short .bd-tray.is-open, .bd-card.is-flipped { animation: bd-fade var(--t-calm) ease both; }
  .bd-star { animation: bd-fade 500ms ease reverse forwards; }
  .bd-ringburst { animation: bd-fade 260ms ease reverse forwards; }
}