/* Band video chrome (BD7; band DESIGN §2.8, §2.9): the playback back button, the end screen S7 with its controls and corner
   tiles, the theme ribbon (end screen and shelf), the casting call card and the premiere curtain S9. Every selector names a
   bd- class (check-rules); colours come from the core tokens (the curtain palette below mixes them, no hex of its own);
   edges read the safe-area variables of band.css. Under the end screen Band's lights rest at 40 % (views/video.js) and a
   soft warm vignette keeps the controls clear; nothing here pulses faster than once a second. */

/* The curtain palette (DESIGN §2.9: --coral-deep with a darker fold, gold), mixed from the core tokens: the velvet is
   --coral-deep cooled with --grape so it sits beside the 3D dance stage's raspberry curtains, its fold darkens toward
   --night, and the gold is --butter warmed with --coral-deep. The theme ribbon and the premiere curtain share it. */
.bd-end, .bd-premiere {
  --bd-velvet: color-mix(in oklch, var(--coral-deep) 72%, var(--grape));
  --bd-velvet-hi: color-mix(in oklab, var(--bd-velvet) 90%, var(--card));
  --bd-velvet-deep: color-mix(in oklab, var(--bd-velvet) 68%, var(--night));
  --bd-gold: color-mix(in oklab, var(--butter) 80%, var(--coral-deep));
  --bd-gold-hi: color-mix(in oklab, var(--butter) 88%, var(--coral-deep));
  --bd-gold-mid: color-mix(in oklab, var(--bd-gold) 86%, var(--ink));
  --bd-gold-deep: color-mix(in oklab, var(--bd-gold) 72%, var(--ink));
}

/* ── S6: the core back button over the film (60 px, top left; it stops the video and shows the end screen) */
.bd-video .bd-vback { position: fixed; z-index: var(--z-top); top: calc(var(--sat) + 8px); left: calc(var(--sal) + 16px);
  width: var(--tap); height: var(--tap); min-width: var(--tap); padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--overlay-bg); color: var(--overlay-ink); box-shadow: var(--shadow), var(--press); }
.bd-video .bd-vback .ico { width: 28px; height: 28px; }
.bd-video .bd-vback[hidden] { display: none; }

/* ── S7: the end screen, over the film's last frame */
.bd-end { position: fixed; inset: 0; z-index: var(--z-view); display: grid; grid-template-rows: 1fr auto auto 1fr; justify-items: center; align-items: center;
  gap: 18px; padding: calc(var(--sat) + 24px) calc(var(--sar) + 16px) calc(var(--sab) + 104px) calc(var(--sal) + 16px);
  background: radial-gradient(ellipse at 50% 55%, rgba(36, 30, 51, .16), rgba(36, 30, 51, .44));
  opacity: 0; transition: opacity var(--t-card) ease; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bd-end.is-on { opacity: 1; }
.bd-end[hidden] { display: none; }
.bd-end .bd-end-top { align-self: end; min-height: 1px; }
.bd-end .bd-end-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 1px; justify-self: stretch; }
.bd-end .bd-end-row { display: flex; align-items: center; justify-content: center; gap: 22px; }

/* the round controls: 72 px, Back to the stage 96 px coral */
.bd-end .bd-round { position: relative; width: 72px; height: 72px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-lift), var(--press); cursor: pointer; touch-action: manipulation;
  transition: transform var(--t-micro) var(--spring); }
.bd-end .bd-round .ico { width: 34px; height: 34px; }
.bd-end .bd-round:active, .bd-end .bd-corner:active .bd-tile, .bd-end .bd-name:active, .bd-cast .bd-cast-cam:active, .bd-cast .bd-cast-brush:active { transform: scale(.94); }
.bd-end .bd-backstage { width: 96px; height: 96px; background: var(--coral); color: var(--card); }
/* the casting call takes the premiere's place: an empty 72 px slot keeps Back to the stage in the centre */
.bd-end .bd-round-gap { width: 72px; height: 72px; flex: none; }
.bd-end .bd-backstage .ico { width: 48px; height: 48px; }
.bd-end .bd-theme-btn { align-self: flex-end; margin-right: calc(50% - 130px); background: var(--butter); }
.bd-end .bd-theme-btn[disabled] { opacity: .7; }
.bd-end .bd-theme-line { margin: 6px 0 0; padding: 6px 14px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: var(--label); font-weight: 800;
  box-shadow: var(--shadow); align-self: flex-end; max-width: min(320px, 90vw); text-align: center; }

/* the show theme's shelf badge (BCR-5, §2.9): a small butter bookmark ribbon with the curtain pictogram, no words */
.bd-ribbon { display: inline-grid; justify-items: center; align-content: start; width: 30px; height: 38px; padding-top: 5px; box-sizing: border-box;
  background: var(--butter); color: var(--ink); border-radius: 4px 4px 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.bd-ribbon .ico { width: 20px; height: 20px; }
.bd-songs-view .film-badge { top: 0; filter: drop-shadow(0 2px 3px rgba(93, 63, 26, .28)); }
/* the end screen's ribbon: a notched raspberry sash with gold edges and a stitched seam (the stage curtains' colours) that
   drops across the theme button's foot in 300 ms, like a prize ribbon; it has no picture of its own, so it never reads as
   a second button */
.bd-end .bd-theme-ribbon { position: absolute; left: 50%; bottom: -10px; width: 96px; height: 24px; pointer-events: none;
  background: linear-gradient(180deg, var(--bd-gold) 0 3px, var(--bd-velvet-hi) 3px 45%, var(--bd-velvet) 55%, var(--bd-velvet-deep) calc(100% - 3px), var(--bd-gold) calc(100% - 3px));
  clip-path: polygon(0 0, 100% 0, 89% 50%, 100% 100%, 0 100%, 11% 50%);
  filter: drop-shadow(0 2px 2px rgba(60, 14, 30, .35));
  transform: translate(-50%, -22px) scaleX(.6); opacity: 0; transition: transform var(--t-card) var(--spring), opacity var(--t-card) ease; }
.bd-end .bd-theme-ribbon::before { content: ''; position: absolute; left: 15%; right: 15%; top: calc(50% - 1px); border-top: 2px dashed color-mix(in srgb, var(--butter) 85%, transparent); }
.bd-end .bd-theme-btn.is-theme .bd-theme-ribbon { transform: translate(-50%, 0) scaleX(1); opacity: 1; }
.bd-end .bd-theme-btn.is-theme { box-shadow: var(--shadow-lift), inset 0 0 0 3px var(--bd-gold); }

/* name the star: the member's portrait (96) with the core drum */
.bd-end .bd-name { position: relative; width: 96px; height: 96px; border-radius: 28px; border: 0; padding: 6px; background: var(--card);
  box-shadow: var(--shadow-lift), var(--press); transition: transform var(--t-micro) var(--spring); }
.bd-end .bd-name .bd-name-pic { width: 100%; height: 100%; object-fit: contain; }
.bd-end .bd-name .bd-name-drum { position: absolute; right: -8px; bottom: -8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--butter); color: var(--ink); box-shadow: var(--shadow); }
.bd-end .bd-name .bd-name-drum .ico { width: 24px; height: 24px; }

/* the casting call: a 120 px card (the add picture, the camera with its key badge, the brush) and its one line */
.bd-cast { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 8px 12px; align-items: center; justify-items: center;
  padding: 12px 14px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow-lift); min-width: 220px; }
.bd-cast .bd-cast-cam { position: relative; width: 120px; height: 120px; border: 0; padding: 0; border-radius: 20px; background: var(--coral-field);
  display: grid; place-items: center; transition: transform var(--t-micro) var(--spring); }
.bd-cast .bd-cast-add { width: 96px; height: 96px; object-fit: contain; }
.bd-cast .bd-cast-small { position: absolute; right: -6px; bottom: -6px; width: 48px; height: 48px; border-radius: 50%; background: var(--card);
  box-shadow: var(--shadow); display: grid; place-items: center; }
.bd-cast .bd-cast-small img { width: 34px; height: 34px; object-fit: contain; }
.bd-cast .bd-cast-brush { width: 72px; height: 72px; border: 0; padding: 0; border-radius: 50%; background: var(--sand); display: grid; place-items: center;
  box-shadow: var(--press); transition: transform var(--t-micro) var(--spring); }
.bd-cast .bd-cast-brush img { width: 48px; height: 48px; object-fit: contain; }
.bd-cast .bd-cast-line { grid-column: 1 / -1; margin: 0; font-size: var(--body); font-weight: 800; color: var(--ink); text-align: center; max-width: 260px; }

/* the key badge: a grown-ups' control, or the camera before the first look */
.bd-keybadge { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--card); box-shadow: 0 0 0 2px var(--card); }
.bd-keybadge .ico { width: 14px; height: 14px; }
.bd-cast .bd-keybadge { top: -4px; right: -4px; }

/* the grown-ups' corner tiles: Make it real 3D (bottom left) and Save the video (bottom right), 60 px */
.bd-end .bd-corner { position: fixed; bottom: calc(var(--sab) + 16px); display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; padding: 0;
  background: none; color: var(--card); }
.bd-end .bd-make3d { left: calc(var(--sal) + 16px); max-width: 128px; }
.bd-end .bd-export { right: calc(var(--sar) + 16px); }
.bd-end .bd-tile { position: relative; width: var(--tap); height: var(--tap); border-radius: 18px; display: grid; place-items: center; background: var(--overlay-bg);
  color: var(--ink); box-shadow: var(--shadow), var(--press); transition: transform var(--t-micro) var(--spring); }
.bd-end .bd-tile img { width: 48px; height: 48px; object-fit: contain; }
.bd-end .bd-tile .ico { width: 28px; height: 28px; }
.bd-end .bd-corner-label { font-size: var(--label); font-weight: 700; line-height: 1.15; text-align: center; color: var(--card); text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  text-wrap: balance; }
.bd-end .bd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* landscape phone: the row and the card side by side, the corners stay */
.bd-l-short .bd-end { grid-template-rows: auto 1fr; grid-template-columns: 1fr 1fr; padding-bottom: calc(var(--sab) + 16px); }
.bd-l-short .bd-end .bd-end-top { grid-column: 1 / -1; align-self: center; }
.bd-l-short .bd-end .bd-end-mid { grid-column: 2; grid-row: 2; }
.bd-l-short .bd-end .bd-end-row { grid-column: 1; grid-row: 2; }
.bd-l-short .bd-end .bd-theme-btn { margin-right: 0; align-self: center; }

/* ── the songs shelf */
.bd-songs-view .film-card { position: relative; }

/* ── S9: the premiere curtain in the curtain palette (above): two raspberry velvet panels (soft folds, a mustard lining on the
   inner edge, a gold fringe), a scalloped pelmet that stays on top, and gold rope tie-backs. Shut, the panels meet in the
   middle; open, each is gathered to its side (scaleX from its outer edge, the folds bunch) and tied back, so the video
   plays framed like a little theatre. The close button sits top left over the pelmet. */
.bd-premiere .bd-curtain { position: fixed; inset: 0; z-index: var(--z-view); pointer-events: none; overflow: hidden; }
.bd-premiere .bd-curtain[hidden] { display: none; }
.bd-premiere .bd-curtain-panel { position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    repeating-linear-gradient(90deg, rgba(40, 6, 18, .34) 0, rgba(40, 6, 18, 0) 9px, rgba(255, 214, 228, .14) 19px, rgba(40, 6, 18, 0) 29px, rgba(40, 6, 18, .34) 38px),
    linear-gradient(180deg, var(--bd-velvet-hi) 0%, var(--bd-velvet) 48%, var(--bd-velvet-deep) 100%);
  will-change: transform; }
.bd-premiere .bd-curtain-l { left: 0; transform-origin: 0 50%; box-shadow: inset -5px 0 0 var(--bd-gold-mid), inset -18px 0 16px rgba(40, 6, 18, .38); }
.bd-premiere .bd-curtain-r { right: 0; transform-origin: 100% 50%; box-shadow: inset 5px 0 0 var(--bd-gold-mid), inset 18px 0 16px rgba(40, 6, 18, .38); }
.bd-premiere .bd-curtain-panel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--sab) + 18px);
  background: linear-gradient(var(--bd-gold), var(--bd-gold)) top / 100% 4px no-repeat, repeating-linear-gradient(90deg, var(--bd-gold) 0 3px, var(--bd-gold-deep) 3px 5px, rgba(0, 0, 0, 0) 5px 8px); }
.bd-premiere .bd-valance { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: calc(var(--sat) + 22px);
  background: linear-gradient(180deg, var(--bd-velvet-deep), var(--bd-velvet)); box-shadow: 0 3px 0 var(--bd-gold); }
.bd-premiere .bd-valance::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% + 3px); height: 18px;
  background: radial-gradient(circle at 50% 0, var(--bd-velvet) 0 14px, var(--bd-gold) 14px 17px, rgba(0, 0, 0, 0) 17.5px) 0 0 / 44px 18px repeat-x;
  filter: drop-shadow(0 3px 3px rgba(40, 6, 18, .35)); }
/* the tie-backs: a gold rope round each gathered drape with a tassel, shown once the panels are open (.is-tied) */
.bd-premiere .bd-tie { position: absolute; z-index: 2; top: 58%; width: calc(12.3% + 12px); height: 16px; border-radius: 8px;
  background: repeating-linear-gradient(115deg, var(--bd-gold-hi) 0 4px, var(--bd-gold-mid) 4px 7px); box-shadow: 0 2px 5px rgba(40, 6, 18, .45);
  opacity: 0; transition: opacity 200ms ease, transform 260ms var(--spring); }
.bd-premiere .bd-tie::after { content: ''; position: absolute; top: 12px; width: 12px; height: 24px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--bd-gold-hi), var(--bd-gold-deep)); box-shadow: 0 2px 3px rgba(40, 6, 18, .35); }
.bd-premiere .bd-tie-l { left: -6px; transform: scaleX(.4); transform-origin: 0 50%; }
.bd-premiere .bd-tie-l::after { right: 4px; }
.bd-premiere .bd-tie-r { right: -6px; transform: scaleX(.4); transform-origin: 100% 50%; }
.bd-premiere .bd-tie-r::after { left: 4px; }
.bd-premiere .bd-curtain.is-tied .bd-tie { opacity: 1; transform: none; }
/* the panels gather and close as Web Animations (views/premiere.js): open 1.2 s, close 0.8 s; reduced motion: a 300 ms fade */
.bd-premiere .bd-pclose { position: fixed; z-index: var(--z-top); top: calc(var(--sat) + 8px); left: calc(var(--sal) + 16px); width: var(--tap); height: var(--tap);
  min-width: var(--tap); padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--overlay-bg); color: var(--overlay-ink);
  box-shadow: var(--shadow), var(--press); }
.bd-premiere .bd-pclose .ico { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
  .bd-end { transition: opacity var(--t-calm) ease; }
  .bd-end .bd-round, .bd-end .bd-name, .bd-end .bd-tile, .bd-end .bd-theme-ribbon, .bd-premiere .bd-tie { transition: none; }
  .bd-end .bd-round:active { transform: none; opacity: .85; }
}