/* Quiet, cinema, quiet. The film is a large plate on paper until it takes the room. Dark arrives as a cut. */

[data-world="cinema"] body { background: var(--cinema); color: var(--on-cinema); }
[data-world="cinema"] .case, [data-world="cinema"] .nav { color: var(--on-cinema-2); }
[data-world="cinema"] .case img:not(.keep) { opacity: 0.18; }
/* everything outside the room recedes but stays readable (AA on cinema graphite) */
[data-world="cinema"] :is(.case, .nav) *:not(.room, .room *) { color: var(--on-cinema-2) !important; }   /* a state override, wins over every paper colour */
[data-world="cinema"] .placeholder:not(.room *) { color: var(--on-cinema-2); }
[data-world="cinema"] .case .rule-h, [data-world="cinema"] .nav-rule { background: rgba(232, 226, 213, 0.06); }

.room { position: relative; height: 100svh; min-height: 520px; display: grid; place-items: center; padding: 0 var(--m); }
.room .frame { position: relative; width: calc(10 * var(--u) - var(--g)); max-width: calc((100svh - 140px) * 16 / 9); aspect-ratio: 16 / 9;
  background: #0E1211; overflow: hidden; border-radius: 1px; box-shadow: 0 50px 80px -50px rgba(40, 32, 20, 0.55); will-change: transform; }
.room video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0E1211; }
.room .poster-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 26px; padding: 22px 26px 24px;
  color: var(--on-cinema); background: linear-gradient(to top, rgba(14, 18, 17, 0.55), rgba(14, 18, 17, 0)); }
.room .poster-bar .play { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-cinema); }
.room .poster-bar .track { flex: 1; height: 1px; background: rgba(232, 226, 213, 0.35); position: relative; }
.room .poster-bar .track::before { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 9%; background: var(--on-cinema); }
.room .poster-bar .label { color: var(--on-cinema); }

/* the room's own furniture: only present in cinema */
.room .bar, .room .foot, .room .length { position: absolute; visibility: hidden; opacity: 0; color: var(--on-cinema); }
.room .bar { top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; padding: 0 var(--m); z-index: 3; }
.room .bar .wordmark { margin-right: auto; }
.room .bar .title { position: absolute; left: 50%; transform: translateX(-50%); }
.room .bar .close { min-height: 44px; display: inline-flex; align-items: center; }
/* at 200% text on a phone the wordmark and "Close film" do not fit side by side and pushed the page sideways (even
   while the bar is hidden); the label may now wrap inside its own button, which happens only when the bar is too
   narrow for it (P06 200% text fix; at normal size nothing changes) */
.room .bar .close .link { white-space: normal; text-align: right; -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* each line keeps its underline */
.room .bar .close .link { color: var(--on-cinema); }
.room .length { top: 84px; left: var(--m); z-index: 3; color: var(--on-cinema-2); }
.room .foot { left: 0; right: 0; bottom: 0; z-index: 3; padding: 70px var(--m) 26px;
  background: linear-gradient(to top, rgba(18, 22, 20, 0.92) 0%, rgba(18, 22, 20, 0.6) 55%, rgba(18, 22, 20, 0) 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; row-gap: 12px; align-items: end; }
.room .now { display: flex; align-items: baseline; gap: 26px; grid-column: 1; }
.room .now .chap { display: inline-block; overflow: hidden; vertical-align: bottom; }
.room .now .chap span { display: inline-block; color: var(--on-cinema); }
.room .now .chap.swap span { animation: chapRise 400ms var(--expo); }
@keyframes chapRise { from { transform: translateY(110%); } to { transform: none; } }
.room .now .num, .room .now .time { color: var(--on-cinema-2); }
.room .now .time { margin-left: auto; font-variant-numeric: tabular-nums; }
.scrub { grid-column: 1; display: flex; gap: 6px; height: 28px; align-items: center; }
.scrub button { position: relative; height: 28px; flex: var(--w) 1 0; min-width: 24px; }
.scrub button::before { content: ''; position: absolute; left: 0; right: 0; top: 13.5px; height: 1px; background: rgba(232, 226, 213, 0.30); }
.scrub button i { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--on-cinema); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.scrub button:hover::before { background: rgba(232, 226, 213, 0.6); }
.room .ctrl { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 12px; align-items: center; }
.pill { min-height: 44px; padding: 0 22px; border-radius: 999px; color: var(--on-cinema);
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  transition: background-color var(--t-micro) var(--expo), box-shadow var(--t-micro) var(--expo); }
.pill:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
/* a pressed toggle (Captions) must look different from an unpressed one, not only sound different */
.pill[aria-pressed="true"], .room.is-cinema.on-light .pill[aria-pressed="true"] {
  background-color: rgba(232, 226, 213, 0.2); box-shadow: inset 0 0 0 1.5px rgba(232, 226, 213, 0.72); }
.room .credit { grid-column: 1 / span 2; color: var(--on-cinema-2); display: flex; gap: 2.4em; flex-wrap: wrap; }

.room.is-cinema { padding: 0; }
/* The film ends on a light paper card (19.4 to 24.15 s). While it is on screen, each piece of the player's chrome
   (desktop: it sits over the picture) gets its own small dark plate, so its text keeps 4.5:1 (WCAG 1.4.3) whatever is
   behind it. The plates take no space (a spread shadow) and cover only the chrome, never the film's own type. */
@media (min-width: 820px) {
  .room.is-cinema .cc { bottom: 132px; }
  .room.is-cinema.on-light :is(.length, .bar .wordmark, .bar .title, .bar .close .link, .now .num, .now .chap, .now .time, .credit span, .scrub) {
    background-color: rgba(18, 22, 20, 0.88); box-shadow: 0 0 0 5px rgba(18, 22, 20, 0.88); border-radius: 1px; }
  .room.is-cinema.on-light .pill { background-color: rgba(18, 22, 20, 0.88); }
  /* P02 fix: a pressed Captions over the light end card kept its light "pressed" plate, 3.3:1 behind its text
     (found with captions on; Gate 1 measured them off). It keeps the dark plate there; the pressed state shows as a
     stronger ring instead, so on and off still look different (D3) */
  /* P02 fix: the length line sits over the moving picture; in its dimmer colour the described film's longer line
     measured 4.50:1 at its worst moment (no margin). In the title's colour it keeps about 8:1 */
  .room.is-cinema .length { color: var(--on-cinema); }
  .room.is-cinema.on-light .pill[aria-pressed="true"] { background-color: rgba(18, 22, 20, 0.88); box-shadow: inset 0 0 0 1.5px rgba(232, 226, 213, 0.9); }
}
/* captions: Sarah's line over the picture, on its own dark backing */
.room .cc { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 2; max-width: min(80%, 900px); margin: 0; padding: 6px 12px;
  background: rgba(18, 22, 20, 0.88); color: #E8E2D5; font: 500 clamp(0.875rem, 1.5vw, 1.375rem)/1.35 var(--sans); text-align: center; border-radius: 2px; }
.room .cc[hidden] { display: none; }
/* the audio-described version's own lines: marked as description by a small mono tag and a slanted line */
.room .cc.is-desc { font-style: italic; }
.room .cc .cc-tag { font: 400 0.75em/1 var(--mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: #C9C3B5; margin-right: 0.6em; }
.room .ctrl { flex-wrap: wrap; }
.room.is-cinema .frame { width: 100%; max-width: calc(100svh * 16 / 9); box-shadow: none; }
.room.is-cinema .poster-bar { display: none; }
.room.is-cinema .bar, .room.is-cinema .foot, .room.is-cinema .length { visibility: visible; opacity: 1; transition: opacity 500ms var(--expo) 180ms; }

/* phones: the film keeps its 16:9 and the controls sit under it, never over the picture */
@media (max-width: 819px) {
  .room { height: auto; min-height: 0; padding: 40px var(--m); }
  .room .frame { width: 100%; max-width: none; }
  .room .poster-bar { padding: 12px 14px; gap: 14px; }
  .room.is-cinema { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 64px 0 0; }
  .room.is-cinema .foot { position: relative; background: none; padding: 18px var(--m) 24px; grid-template-columns: 1fr; }
  .room.is-cinema .ctrl { grid-column: 1; grid-row: auto; }
  .room.is-cinema .credit { grid-column: 1; gap: 0.8em 2em; }
  .room .length { top: 70px; }
  .room .bar .title { display: none; }
}