.film-player {
  --film-accent: #b4d4a5;
  --film-muted: #a3aaa3;
  --film-stage-width: 100vw;
  --film-stage-height: 100dvh;
  --film-safe-top: env(safe-area-inset-top, 0px);
  --film-safe-right: env(safe-area-inset-right, 0px);
  --film-safe-bottom: env(safe-area-inset-bottom, 0px);
  --film-safe-left: env(safe-area-inset-left, 0px);
  position: fixed;
  inset: 0;
  z-index: 2000;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  color: #f2f4ef;
  background: rgba(5, 9, 7, 0.84);
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.film-player[open] { display: grid; place-items: center; }
.film-player::backdrop { background: rgba(5, 9, 7, 0.65); backdrop-filter: blur(12px); }
.film-player *, .film-player *::before, .film-player *::after { box-sizing: border-box; }
.film-player [hidden] { display: none !important; }
.film-player button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.film-player button:focus-visible { outline: 2px solid var(--film-accent); outline-offset: 4px; }
.film-player svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.film-sheet {
  width: min(100%, 1080px);
  max-height: 100%;
  overflow-y: auto;
  border: 1px solid #ffffff15;
  border-radius: 22px;
  background: radial-gradient(ellipse at 10% 0, #25302570, transparent 55%), #111612;
  box-shadow: 0 28px 100px #0008;
  animation: film-arrive 240ms ease-out both;
}

.film-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; }
.film-brand { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 2px; }
.film-brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--film-accent); box-shadow: 0 0 12px #b4d4a530; }
.film-brand-divider { width: 1px; height: 12px; margin: 0 2px; background: #ffffff25; }
.film-brand-label { color: var(--film-muted); font-size: 11px; font-weight: 400; letter-spacing: 2px; }
.film-icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff1f; border-radius: 50%; color: #e8eee4; background: #ffffff06; }
.film-icon-button:hover { background: #ffffff12; }
.film-icon-button:active { background: #ffffff20; }

.film-screen { position: relative; margin: 0 24px; overflow: hidden; border: 1px solid #ffffff0f; border-radius: 10px; background: #000; }
.film-video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100dvh - 340px); object-fit: contain; background: #000; touch-action: manipulation; }
.film-message { position: absolute; inset: 0 0 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; color: #fff; background: linear-gradient(#0004, #0008); text-align: center; pointer-events: none; }
.film-message-label { font-size: 13px; line-height: 1.6; text-shadow: 0 1px 8px #000; }
.film-message-action { min-width: 112px; min-height: 44px; padding: 10px 22px; border: 1px solid #e8f0e2aa; border-radius: 24px; color: #10200e; background: #dfecd7; font-weight: 600 !important; font-size: 14px !important; pointer-events: auto; }
.film-message-action:active { background: #b4d4a5; }
.film-spinner { display: none; width: 24px; height: 24px; border: 2px solid #ffffff40; border-top-color: var(--film-accent); border-radius: 50%; animation: film-spin 800ms linear infinite; }
.film-player[data-state="loading"] .film-spinner { display: block; }

.film-details { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; }
.film-caption { min-width: 0; }
.film-category { margin: 0 0 8px; color: var(--film-accent); font-size: 11px; line-height: 1.5; letter-spacing: 2px; }
#film-title { margin: 0; font-size: clamp(22px, 2.5vw, 30px); font-weight: 500; line-height: 1.4; letter-spacing: 0.03em; text-wrap: balance; }
.film-fullscreen { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 14px; border: 1px solid #ffffff1c; border-radius: 24px; color: #c3cbbf; background: transparent; font-size: 12px !important; }
.film-fullscreen:hover { color: #fff; border-color: #ffffff50; }
.film-fullscreen:active { background: #ffffff10; }
.film-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 24px; padding: 14px 0 18px; border-top: 1px solid #ffffff12; }
.film-signoff { color: var(--film-muted); font-size: 11px; letter-spacing: 2px; }
.film-return { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid #b4d4a526; border-radius: 12px; color: #d9e6d0; background: #b4d4a50a; font-size: 13px !important; }
.film-return:hover { background: #b4d4a518; }
.film-return:active { background: #b4d4a525; }
.film-page { padding-left: 12px; border-left: 1px solid #ffffff20; color: var(--film-muted); font-size: 11px; }
.is-watching-film #reader-shell { pointer-events: none; }
html.is-watching-film, body.is-watching-film { touch-action: manipulation; }

.film-player[data-layout="portrait"] { padding: 0; }
.film-player[data-layout="portrait"] .film-sheet { display: flex; flex-direction: column; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.film-player[data-layout="portrait"] .film-header { flex: none; padding: max(16px, var(--film-safe-top)) 20px 12px; }
.film-player[data-layout="portrait"] .film-brand { font-size: 11px; letter-spacing: 1.8px; gap: 8px; }
.film-player[data-layout="portrait"] .film-brand-label { font-size: 10px; letter-spacing: 1px; }
.film-player[data-layout="portrait"] .film-content { width: 100%; margin: auto 0; padding: 24px 0; }
.film-player[data-layout="portrait"] .film-screen { margin: 0 16px; border-radius: 8px; }
.film-player[data-layout="portrait"] .film-video { max-height: calc(var(--film-stage-height) - 310px); min-height: 140px; }
.film-player[data-layout="portrait"] .film-details { align-items: flex-start; gap: 14px; padding: 24px 22px 0; }
.film-player[data-layout="portrait"] #film-title { font-size: 25px; line-height: 1.5; }
.film-player[data-layout="portrait"] .film-category { font-size: 10px; letter-spacing: 1.5px; }
.film-player[data-layout="portrait"] .film-fullscreen { margin-top: 22px; padding: 10px; }
.film-player[data-layout="portrait"] .film-fullscreen span { display: none; }
.film-player[data-layout="portrait"] .film-footer { flex: none; flex-direction: column; gap: 18px; margin: 0 22px; padding: 22px 0 max(24px, var(--film-safe-bottom)); border: 0; }
.film-player[data-layout="portrait"] .film-signoff { color: #949f91; font-size: 10px; }
.film-player[data-layout="portrait"] .film-return { width: 100%; min-height: 52px; font-size: 14px !important; border-radius: 14px; }
.film-player[data-layout="portrait"] .film-page { margin-left: auto; }
.film-player[data-layout="portrait"] .film-return svg { margin-right: 2px; }

.film-player:is([data-layout="landscape"], [data-layout="rotated"]) { padding: 0; }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) .film-sheet { width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0 var(--film-safe-right) 0 var(--film-safe-left); }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) .film-header { height: 58px; padding: max(4px, var(--film-safe-top)) 20px 4px; }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) .film-screen { margin: 0 20px; border-radius: 6px; }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) .film-video { max-height: calc(var(--film-stage-height) - 138px - var(--film-safe-bottom)); }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) .film-details { gap: 16px; padding: 10px 20px max(10px, var(--film-safe-bottom)); }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) .film-caption { display: flex; flex-direction: row-reverse; align-items: center; gap: 18px; }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) #film-title { font-size: 18px; }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) .film-category { margin: 0; font-size: 10px; letter-spacing: 1px; }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) .film-fullscreen { padding: 8px 12px; }
.film-player:is([data-layout="landscape"], [data-layout="rotated"]) .film-footer { display: none; }

/* Rotate the complete UI so video, native controls and captions match the book.
   Its logical landscape dimensions are swapped before the clockwise turn. */
.film-player[data-layout="rotated"] {
  --film-safe-top: env(safe-area-inset-right, 0px);
  --film-safe-right: env(safe-area-inset-bottom, 0px);
  --film-safe-bottom: env(safe-area-inset-left, 0px);
  --film-safe-left: env(safe-area-inset-top, 0px);
  overflow: hidden;
}
.film-player[data-layout="rotated"] .film-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--film-stage-width);
  height: var(--film-stage-height);
  max-height: none;
  transform: translate(-50%, -50%) rotate(90deg);
  animation-name: film-arrive-rotated;
}

@keyframes film-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes film-arrive-rotated { from { opacity: 0; } to { opacity: 1; } }
@keyframes film-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .film-sheet, .film-spinner { animation: none; }
}