/* film.css — Race Film v3 stage + HUD (CLEAN_SIMPLE_FUN: one plate, one card, one status). */
.film-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #060a16; overflow: hidden; border-radius: 12px; }
.film-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film-hud { position: absolute; inset: 0; pointer-events: none; font-family: Rajdhani, system-ui, sans-serif; }
.film-plate--leader {
  position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px; border-radius: 999px; background: rgba(6, 8, 14, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em; backdrop-filter: blur(6px);
}
.film-plate--leader[hidden] { display: none; }
.film-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-weight: 900; font-size: 0.85rem; }
.film-togo { color: #fbbf24; font-variant-numeric: tabular-nums; }
.film-card {
  position: absolute; left: 50%; top: 14%; transform: translate(-50%, 0); text-align: center; padding: 8px 18px;
  background: rgba(6, 8, 14, 0.7); border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 12px; color: #fff;
  opacity: 0; transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}
.film-card.is-in { opacity: 1; transform: translate(-50%, -6px); }
.film-card[hidden] { display: none; }
.film-card-kicker { font-size: 0.66rem; letter-spacing: 0.28em; color: #fbbf24; font-weight: 800; }
.film-card-title { font-size: 1.35rem; font-weight: 900; letter-spacing: 0.06em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.film-status { position: absolute; right: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(6, 8, 14, 0.6); color: #cbd5e1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.film-tools {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; gap: 8px; pointer-events: none;
}
.film-wire, .film-results {
  position: static; pointer-events: auto;
  min-height: 36px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(251, 191, 36, 0.55); background: rgba(6, 8, 14, 0.78); color: #fbbf24;
  font: 700 0.78rem Rajdhani, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}
.film-wire[hidden], .film-results[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .film-card { transition: none; } }

/* Hub host (#track-svg becomes .film-host when the adapter mounts) */
.film-host { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #060a16; }
.film-host .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.dt-film .track-container #particle-canvas,
body.dt-film .track-container .tote-board,
body.dt-film .btn-track-action { display: none !important; }
@media (max-width: 640px) {
  .film-plate--leader { font-size: 0.8rem; padding: 4px 8px 4px 4px; top: 8px; left: 8px; }
  .film-chip { width: 20px; height: 20px; font-size: 0.72rem; }
  /* Under the leader plate, off the pack (which roams the lower half on portrait stages). */
  .film-card { top: 14%; padding: 6px 12px; }
  .film-card-title { font-size: 1.05rem; }
  .film-status { font-size: 0.66rem; bottom: 6px; right: 8px; }
  .film-tools { top: 8px; right: 8px; gap: 6px; }
  .film-wire, .film-results { min-height: 32px; padding: 4px 10px; font-size: 0.68rem; }
}
/* The film fills the hub's .track-container (which keeps its own height rules,
   e.g. min-height 55dvh while racing on phones). */
body.dt-film .track-container { aspect-ratio: 16 / 9; }
body.dt-film .track-container .film-host { position: absolute; inset: 0; aspect-ratio: auto; width: auto; height: auto; }
/* Action page: the film owns the stage; poster fades out once a race loads */
body.dt-film .action-race-stage { position: relative; }
body.dt-film .action-race-stage .film-hud { position: absolute; inset: 0; }
body.dt-film .action-race-poster.is-hidden { opacity: 0; pointer-events: none; transition: opacity 400ms ease; }
body.dt-film .action-announcer-cap { display: none; }
/* Cinema (fullscreen) header owns the top-left; drop the leader plate under it. */
body.race-cinema-active .film-plate--leader { top: 64px; }
body.race-cinema-active .film-card { top: 22%; }