/* How it works film: own pixel player (plates, bar, time), no autoplay. Loaded only when src/video/howto.mp4 exists. */
.film { position: relative; margin: 20px 0 0; border: 4px solid var(--ink); background: var(--night); }
.film-stage { position: relative; aspect-ratio: 16 / 9; }
.film-poster, .film video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; background: var(--night); }
.film-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.film-big .pl-f { font-size: 48px; min-height: 64px; padding: 6px 32px 10px; font-family: Alagard, serif; }
.film-bar { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 12px; background: var(--slate-deep); border-top: 4px solid var(--ink); }
.film-bar .pl-f { min-height: 40px; padding: 2px 14px 4px; font-size: 24px; }
.film-t { flex: 1; min-width: 60px; height: 24px; border: 4px solid var(--ink); background: var(--night); position: relative; cursor: pointer; touch-action: none; }
.film-t i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); box-shadow: inset 0 4px 0 var(--gold-hi), inset 0 -4px 0 var(--gold-deep); pointer-events: none; }
.film-time { font: 500 14px/1 Plex, "IBM Plex Mono", monospace; color: var(--pewter); min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.film.is-play .film-big, .film.is-play .film-poster { display: none; }
@media (max-width: 639px) { .film-t { order: -1; flex: 1 0 100%; } .film-time { display: none; } .film-big .pl-f { font-size: 32px; min-height: 48px; } .film-bar { gap: 8px; padding: 6px 8px; } }