/* =============================================================================
   PATCHWORK DEAD × TapNow LP — film（本編フルムービー1本。v12でブロック映像廃止）
   ========================================================================== */
.film-hero { margin-bottom: var(--s-7); }
/* v20: 本編は 1280x720（16:9）。旧ファイルの実測比 99:56 から更新。
   v21: YouTube埋め込みになっても同じ16:9枠のまま（レイアウトシフト無し）。 */
.film-hero .media-frame { aspect-ratio: 16/9; border-radius: var(--r-lg); }

/* v21（ユーザー指示）: 自前ホスティングをやめ YouTube 埋め込みに変更。
   クリックするまで何も読み込まない facade（枠全体がボタン）。 */
.film-facade {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
}
.film-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 批評R2: 中央固定だとポスターの顔に重なることがあるため、右下の隅に置く
   （被写体は通常フレーム中央付近に来るため、隅なら衝突しにくい）。 */
.film-facade-play {
  position: absolute; right: var(--s-6); bottom: var(--s-6); width: 72px; height: 72px; z-index: 2;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(23,19,15,.6); border: 1px solid rgba(245,236,220,.35);
  color: var(--cream-100); backdrop-filter: blur(4px);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.film-facade:hover .film-facade-play,
.film-facade:focus-visible .film-facade-play { transform: scale(1.06); background: var(--accent); color: var(--umber-950); }

/* facade をクリックした後に挿入する iframe。枠自体のサイズは変えないので
   レイアウトシフトは起きない。 */
.film-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; z-index: 1; }

.film-noscript { position: absolute; inset: auto var(--s-4) var(--s-4) var(--s-4); z-index: 2; }
.film-noscript a { color: var(--cream-100); text-decoration: underline; }

.film-hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); color: var(--ink-muted); font-size: var(--t-caption); }
/* 直接の子だけをチップ化する（子孫セレクタだと 99+秒 の内側 .num にまで
   二重にピルが付いてしまっていた・批評R2で発覚） */
.film-hero-meta > span { padding: 2px var(--s-3); border: 1px solid var(--hairline); border-radius: var(--r-pill); }

/* v20: TapTV投稿ページへのリンク（ユーザー指示）。 */
.film-hero-link { margin-top: var(--s-4); }