/* ================= Bande-annonce (ui/bande.js) =================
   Aucune animation CSS ici : entrées des cartons, éclairs, bandes noires et titre sont calculés image par image
   d'après l'horloge de la bande-annonce (sinon l'export image par image les verrait figés).
   Bandes noires de cinéma, cartons titres et présentations des personnages en police pixel (Silk, Pixelify),
   titre final. Rien d'autre du jeu n'est visible pendant la bande-annonce. */
body.bande-on > :not(#c):not(#o):not(#scenes):not(script) { display: none !important; }
body.bande-on #scenes > :not(#sc-bande) { display: none !important; }
body.bande-on #o { cursor: none; }

#sc-bande { overflow: hidden; pointer-events: auto; }
#sc-bande .bd-noir, #sc-bande .bd-flash { position: absolute; inset: 0; background: #07060a; opacity: 0; pointer-events: none; }
#sc-bande .bd-flash { background: #fff8e6; }

/* bandes noires 2,35:1 */
#sc-bande .bd-bar { position: absolute; left: 0; right: 0; height: 0; background: #07060a; z-index: 2; }
#sc-bande .bd-bar.top { top: 0; }
#sc-bande .bd-bar.bot { bottom: 0; display: flex; align-items: center; justify-content: center; }
#sc-bande .bd-sub { font: calc(var(--u) * 6)/1.25 'Pixelify', monospace; color: #fff3d6; text-align: center; padding: 0 calc(var(--u) * 6); }

/* carton titre */
#sc-bande .bd-card { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); z-index: 3; text-align: center; }
#sc-bande .bd-card.show { display: flex; }
#sc-bande .bd-card-t { font: calc(var(--u) * 15)/1 'Silk', monospace; color: #fff3d6; letter-spacing: calc(var(--u) * .8);
  text-shadow: var(--u) var(--u) 0 #141018, calc(var(--u) * 2) calc(var(--u) * 2) 0 #96202a; }
#sc-bande .bd-card-s { font: calc(var(--u) * 7)/1.2 'Pixelify', monospace; color: #ffd60a; text-shadow: var(--u) var(--u) 0 #141018; }
#sc-bande .bd-card.petit .bd-card-t { font-size: calc(var(--u) * 10); }
#sc-bande .bd-card.bas { justify-content: flex-end; padding-bottom: calc(max(0px, (100vh - 100vw / 2.35) / 2) + var(--u) * 8); }
#sc-bande .bd-card.haut { justify-content: flex-start; padding-top: calc(max(0px, (100vh - 100vw / 2.35) / 2) + var(--u) * 8); }

/* présentation d'un personnage : petit carton discret en bas à gauche (ou à droite) */
#sc-bande .bd-perso { position: absolute; left: calc(var(--u) * 8); bottom: calc(max(0px, (100vh - 100vw / 2.35) / 2) + var(--u) * 5); display: none; z-index: 3; }
#sc-bande .bd-perso.droite { left: auto; right: calc(var(--u) * 8); text-align: right; }
#sc-bande .bd-perso.show { display: block; }
#sc-bande .bd-perso-n { display: inline-block; font: calc(var(--u) * 7)/1 'Silk', monospace; color: #141018; background: #ffd60a; padding: calc(var(--u) * 1) calc(var(--u) * 2.5) calc(var(--u) * .6);
  box-shadow: var(--u) var(--u) 0 #141018; }
#sc-bande .bd-perso.crs .bd-perso-n { background: #9ec3ff; }
#sc-bande .bd-perso-s { margin-top: calc(var(--u) * 1.8); font: calc(var(--u) * 4.6)/1.2 'Pixelify', monospace; color: #fff3d6; text-shadow: var(--u) var(--u) 0 #141018, calc(var(--u) * -.5) calc(var(--u) * .5) 0 #141018; }

/* titre final */
#sc-bande .bd-titre { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 4); z-index: 4; }
#sc-bande .bd-titre.show { display: flex; }
#sc-bande .bd-titre canvas { image-rendering: pixelated; }
#sc-bande .bd-titre-s { font: calc(var(--u) * 8)/1.2 'Silk', monospace; color: #ffd60a; text-shadow: var(--u) var(--u) 0 #141018; visibility: hidden; }
#sc-bande .bd-titre-u { font: calc(var(--u) * 5.6)/1.2 'Pixelify', monospace; color: #fff3d6; visibility: hidden; }
#sc-bande .bd-titre-s.show, #sc-bande .bd-titre-u.show { visibility: visible; }

/* chargement, aide */
#sc-bande .bd-load { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); z-index: 5; color: #fff3d6; }
#sc-bande .bd-load.show { display: flex; }
#sc-bande .bd-load b { font: calc(var(--u) * 8)/1 'Silk', monospace; font-weight: 400; }
#sc-bande .bd-load span { font: calc(var(--u) * 4.5)/1 'Pixelify', monospace; color: #ffd60a; animation: blink .8s steps(2) infinite; }
#sc-bande .bd-hint { position: absolute; right: calc(var(--u) * 4); top: calc(var(--u) * 3); font: calc(var(--u) * 3.6)/1 'Silk', monospace; color: #8f86a6; z-index: 6; visibility: hidden; }
#sc-bande .bd-hint.show { visibility: visible; }

/* cartel du lieu : petit, discret, en bas à droite (dans l'image, au-dessus de la bande noire), façon cartel de musée */
#sc-bande .bd-lieu { position: absolute; right: calc(var(--u) * 7); bottom: calc(max(0px, (100vh - 100vw / 2.35) / 2) + var(--u) * 5); display: none; z-index: 3; text-align: right;
  border-right: calc(var(--u) * 1) solid #ffd60a; padding: calc(var(--u) * .6) calc(var(--u) * 2.4) calc(var(--u) * .8) 0; }
#sc-bande .bd-lieu.show { display: block; }
#sc-bande .bd-lieu-n { font: calc(var(--u) * 4.4)/1 'Silk', monospace; color: #fff3d6; letter-spacing: calc(var(--u) * .3); text-shadow: var(--u) var(--u) 0 #141018; }
#sc-bande .bd-lieu-s { margin-top: calc(var(--u) * 1.3); font: calc(var(--u) * 3.4)/1 'Pixelify', monospace; color: #c9bfa8; text-shadow: calc(var(--u) * .7) calc(var(--u) * .7) 0 #141018; }
/* branche ecrans : barre de chargement des cartes (par crans) */
#sc-bande .bd-load em { display: block; width: calc(var(--u) * 60); height: calc(var(--u) * 2); background: #2a2430; box-shadow: 0 0 0 calc(var(--u) * .5) #5a5060; }
#sc-bande .bd-load em i { display: block; height: 100%; width: 0; background: #ffd60a; }