/* Films (WP17; core DESIGN §1, §5.7, §7.3): the shelf (the demo's .movie-card home cinema, app.css @7aafc93, with the
   new cover, ribbon and badge slots), the watch screen over the stage, the titles overlay canvas and its caption, and the
   loading card (cut-outs bobbing, never a spinner). Tokens only; the export progress sheet is rec/export.js's (WP18). */

/* ── the shelf */
.films .say { margin-bottom: 4px; }
.films-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.film-card { appearance: none; border: 0; margin: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; position: relative;
  display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 14px; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform var(--t-micro) var(--spring), box-shadow var(--t-micro); touch-action: manipulation; }
.film-card:active { transform: scale(.97); }
.film-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--radius) - 8px); background: var(--sand); }
.film-cover-cast { display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 8% 8% 6%; box-sizing: border-box;
  background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 70%, var(--sand-deep) 100%); }
.film-cover-cast img { width: 30%; height: 86%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(74, 52, 30, .25)); }
.film-cover-cast > .ico { width: 56px; height: 56px; color: var(--muted); align-self: center; }
.film-num { font-weight: 850; font-size: 20px; letter-spacing: 0; margin: 6px 4px 0; }
.film-names { color: var(--muted); font-weight: 700; font-size: var(--label); margin: 0 4px; overflow-wrap: anywhere; }
.film-first { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px;
  border-radius: 999px; background: var(--butter); color: var(--ink); font-weight: 800; font-size: 15px; box-shadow: var(--shadow); }
.film-first .ico { width: 18px; height: 18px; }
.film-badge { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; }
.film-more { display: flex; justify-content: center; margin: 22px 0 0; }
.films-empty { display: grid; justify-items: center; gap: 12px; margin: 40px auto 0; text-align: center; }
.films-empty img { width: 200px; height: 200px; object-fit: contain; }
html.older .film-num { font-size: 18px; }

/* ── the watch screen: the film fills the stage; Replay sits clear of the bottom edge */
.film-watch { position: relative; min-height: calc(100dvh - var(--head) - 8px - var(--edge)); display: flex; flex-direction: column; justify-content: flex-end; }
.film-controls { display: flex; justify-content: center; gap: var(--tap-gap); flex-wrap: wrap; }
.film-controls .btn-quiet { background: var(--overlay-bg); }
.film-loading { position: fixed; inset: 0; z-index: 1; display: flex; flex-flow: row wrap; align-content: center; justify-content: center; gap: 10px 14px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%); pointer-events: none; }
.film-loading .bob { width: 120px; height: 120px; filter: drop-shadow(0 10px 8px rgba(60, 40, 20, .18)); }
.film-loading span { flex-basis: 100%; text-align: center; font-weight: 750; color: var(--muted); font-size: var(--label); }
.film-loading .bob:nth-child(2) { animation-delay: -.35s; }
.film-loading .bob:nth-child(3) { animation-delay: -.7s; }
.film-rest { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); pointer-events: auto; padding: var(--gutter); }

/* ── the titles over the stage (rec/player.js): drawn on a canvas that takes no pointer */
#stage canvas.film-titles { z-index: 2; pointer-events: none; touch-action: auto; }
.film-caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .film-card, .film-card:active { transition: none; transform: none; }
  .film-loading .bob { animation: none; }
}