/* Kapitel-Filme (js/filme.js): Kino-Bühne mit gemalter Kulisse, Untertitel- und Knopfleiste aus Holz und Gold.
   Eigene Datei, lädt nach style.css und überschreibt dort die alten #film-Regeln. */
#film { background: radial-gradient(ellipse at 50% 40%, rgba(30,14,6,.9), rgba(0,0,0,.96) 70%); padding: 12px 12px calc(12px + var(--sab)); }
.film-box { width: min(1000px, 100%, calc((100vh - 220px) * 16 / 9)); min-width: min(100%, 340px); }

/* Bühne: Rahmen wie ein Bilderrahmen aus dunklem Holz mit Goldkante */
.film-buehne { position: relative; padding: 5px; background: linear-gradient(#6e4424, #3a2212); border: 2px solid #120804; border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--gold-d), inset 0 0 0 3px #120804, 0 18px 50px rgba(0,0,0,.7), 0 0 60px rgba(244,194,60,.12); }
.film-box canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; box-shadow: 0 0 0 2px #120804; background: #000; cursor: pointer; image-rendering: auto; }
.film-box canvas.scharf { image-rendering: pixelated; }

/* Kapiteltitel über dem Bild: ruhiges Aufblenden, dunkler Hof hinter der Schrift */
.film-title { top: 8%; padding: 14px 10px 16px; background: radial-gradient(ellipse at center, rgba(10,4,0,.55), rgba(10,4,0,0) 70%); animation: filmTitel 1.2s ease-out; }
.film-title b { text-shadow: 3px 3px 0 #2a1206, 0 0 24px rgba(0,0,0,.9); }
@keyframes filmTitel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Untertitel-Leiste: Holzbrett mit Goldkante, Name als Pixel-Schild, Knöpfe rechts daneben */
.film-leiste { position: relative; display: flex; align-items: flex-end; gap: 12px; margin-top: 18px; padding: 16px 14px 12px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 46px, rgba(0,0,0,.08) 46px 48px), linear-gradient(#5c3a1e, #3e2512);
  border: 2px solid #120804; border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--gold-d), inset 0 3px 0 rgba(255,220,140,.18), 0 10px 30px rgba(0,0,0,.6); }
.film-text { flex: 1; min-height: 52px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: var(--cream);
  font-size: 20px; line-height: 1.32; text-shadow: 1px 2px 0 rgba(0,0,0,.6); }
.film-text b { display: table; position: relative; margin: -30px 0 8px -2px; max-width: 100%; line-height: 1.5; padding: 5px 9px 4px; font-family: var(--pix); font-size: 10px; letter-spacing: 1px;
  color: var(--gold-l); background: linear-gradient(#8a1a1e, #5a0c12); border: 2px solid #120804; box-shadow: inset 0 0 0 1px var(--gold-d), 0 2px 0 #000; text-shadow: 1px 1px 0 #000; }
.film-text b:empty { display: none; }
.film-text.fertig span::after { content: ' ▸'; color: var(--gold); animation: filmWeiter 1s steps(2) infinite; }
@keyframes filmWeiter { 50% { opacity: 0; } }
.film-btns { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.film-btns .btn { white-space: nowrap; }

@media (max-width: 640px) {
  #film { padding: 8px 8px calc(8px + var(--sab)); }
  .film-buehne { padding: 3px; }
  .film-leiste { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; padding: 16px 12px 10px; }
  .film-text { font-size: 18px; min-height: 72px; }
  .film-text b { font-size: 9px; }
  .film-btns { flex-direction: row; justify-content: flex-end; }
  .film-btns .btn { flex: 1; }
}