/* Animister Band: tokens and frame (BD1; band DESIGN §2.1, §2.3, §8.1). The part colours, the safe-area variables every edge
   offset reads (never env() directly; under ?e2e&safe=t,b,l,r stage/layout.js sets them inline, because headless WebKit
   reports zero insets), the top bar and the grown-ups key, the tray frame, the still cards and the layout classes. Every
   selector names a bd- class (check-rules); colours come from the core tokens. The HUD controls themselves are BD5b's
   (css/stage-hud.css), the tune panel BD6's (css/tune.css), the video chrome BD7's (css/video.css). */
:root {
  --bd-beat: var(--coral);
  --bd-bass: var(--cobalt);
  --bd-melody: var(--butter);
  --bd-sparkle: var(--signal);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --bd-bar: 64px;            /* top bar height (tablet 72) */
  --bd-tray: 96px;           /* tray height above the bottom inset (tablet 112) */
  --bd-key-dot: var(--coral);
}

/* The stage route: the view floats over the live stage and only its controls take pointers (core shell). */
.bd-view { position: relative; }
.bd-hud { position: fixed; inset: 0; z-index: var(--z-view); pointer-events: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bd-hud :is(button, [role="button"], .bd-tray) { pointer-events: auto; }

/* Top bar: transparent over the stage, anchored to the safe areas. Songs, Groove and Movie! sit in .bd-top (data-stage). */
.bd-top { position: fixed; top: calc(var(--sat) + 8px); left: calc(var(--sal) + 16px); right: calc(var(--sar) + 16px + var(--tap) + 12px);
  height: var(--bd-bar); display: flex; align-items: center; gap: 12px; pointer-events: none; }
.bd-top > * { pointer-events: auto; }

/* The grown-ups key: 60 px, top right, outside [data-stage] so it keeps the core tap and data-act=grownups. A 12 px coral
   dot while a picture waits for the grown-up's look (BD5b sets data-waiting). */
.bd-key { position: fixed; z-index: var(--z-top); top: calc(var(--sat) + 8px + (var(--bd-bar) - var(--tap)) / 2); right: calc(var(--sar) + 16px);
  width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: var(--overlay-bg); color: var(--overlay-ink); box-shadow: var(--shadow), var(--press); pointer-events: auto; }
.bd-key .ico { width: 26px; height: 26px; }
.bd-key:active { transform: scale(.94); }
.bd-key[data-waiting]::after { content: ""; position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bd-key-dot); box-shadow: 0 0 0 2px var(--card); }

/* Tray frame (the members are BD5b's): bottom, card background, top radius 24, scrolls sideways inside itself only. */
.bd-tray { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bd-tray) + var(--sab)); padding: 12px calc(var(--sar) + 16px) var(--sab) calc(var(--sal) + 16px);
  background: var(--card); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lift); display: flex; align-items: center; gap: var(--tap-gap);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x; scrollbar-width: none; }
.bd-tray::-webkit-scrollbar { display: none; }

/* Still cards (no WebGL2, no sound, a screen not built yet): centred on the stage region, never a dead end. */
.bd-still { min-height: 60dvh; display: grid; place-items: center; padding: calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px); }

/* Layout classes (set on #app by stage/layout.js): bar and tray sizes per class. */
.bd-l-tablet-tall, .bd-l-tablet-wide { --bd-bar: 72px; --bd-tray: 112px; }
.bd-l-short .bd-tray { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bd-key:active { transform: none; opacity: .85; }
}