/* The swipes, the neighbour panel and the film-name subtitles (MT-2, MT-14). */
#player {
  touch-action: none; overflow: hidden;
  --line: 2px; --frame: clamp(8px, 2vmin, 16px);
  --pad: calc(var(--frame) + var(--line) + 1.2vmin); --ctl: calc(var(--frame) + var(--line) + 10px);
}
@media (min-height: 500px) { #player { --line: 3px; } }
.stage {
  position: absolute;
  top: calc(var(--pad) + var(--safe-t)); right: calc(var(--pad) + var(--safe-r));
  bottom: calc(var(--pad) + var(--safe-b)); left: calc(var(--pad) + var(--safe-l));
}

/* The "mini" frame: a line around the player with a red dot and "mini" cut into its top edge. */
.mini-frame {
  position: absolute; z-index: 2; pointer-events: none; border: var(--line) solid rgba(255,255,255,.7); border-radius: 6px;
  top: calc(var(--frame) + var(--safe-t)); right: calc(var(--frame) + var(--safe-r));
  bottom: calc(var(--frame) + var(--safe-b)); left: calc(var(--frame) + var(--safe-l));
}
.mini-frame span {
  position: absolute; left: 20px; top: calc(var(--line) / -2); transform: translateY(-50%);
  display: flex; align-items: center; gap: .45em; padding: 0 .6em; background: #000;
  color: #fff; font-size: clamp(12px, 3.4vh, 15px); font-weight: 600; letter-spacing: .06em; line-height: 1;
}
.mini-frame span::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #e24b4a; }
.mini-frame span::after { content: "mini"; }
/* On Full: no frame and no dot, just "full trailer" over the video in the top left. */
#player[data-view="trailer"] .mini-frame { border-color: transparent; }
#player[data-view="trailer"] .mini-frame span { background: none; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.8); }
#player[data-view="trailer"] .mini-frame span::before { display: none; }
#player[data-view="trailer"] .mini-frame span::after { content: "full trailer"; }

.subtitle {
  position: absolute; left: 0; right: 0; bottom: calc(40px + var(--safe-b)); z-index: 2;
  display: flex; justify-content: center; pointer-events: none; padding: 0 calc(72px + var(--safe-r)) 0 calc(72px + var(--safe-l));
}
#player.swiping .subtitle { visibility: hidden; }
.subtitle span {
  max-width: 100%; padding: 4px 14px 5px; border-radius: 8px; background: rgba(0,0,0,.55);
  font-size: clamp(16px, 5.4vh, 24px); font-weight: 700; letter-spacing: .02em; text-align: center;
  text-shadow: 0 1px 3px #000; white-space: pre-line;
}

/* MT-116: the timeline bar. A thin line low over the video while it plays; held, a thick bar with a knob and the time.
   Its touch area is taller than the line and kept off the screen's edges, which belong to the phone's own gestures. */
.timeline {
  position: absolute; z-index: 4; height: 32px; display: flex; align-items: center; touch-action: none; cursor: pointer;
  left: calc(48px + var(--safe-l)); right: calc(48px + var(--safe-r)); bottom: calc(var(--frame) + var(--line) + 2px + var(--safe-b));
}
.timeline-track { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); transition: height .15s; }
.timeline-fill { position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.8); transform-origin: left; transform: scaleX(0); }
.timeline-knob {
  position: absolute; top: 50%; left: calc(var(--at, 0) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); transform: scale(0); transition: transform .15s;
}
.timeline-time {
  position: absolute; bottom: 30px; left: calc(var(--at, 0) * 100%); transform: translateX(-50%); display: none;
  padding: 3px 10px; border-radius: 8px; background: rgba(0,0,0,.65); font-size: 14px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000;
}
.timeline:hover .timeline-track, .timeline.held .timeline-track { height: 6px; }
.timeline.held .timeline-track { height: 8px; }
.timeline.held .timeline-fill { background: var(--accent); }
.timeline.held .timeline-knob { transform: scale(1); }
.timeline.held .timeline-time { display: block; }
#player.swiping .timeline { visibility: hidden; }

.peek {
  position: absolute; inset: 0; z-index: 3; background: #000; overflow: hidden; will-change: transform;
  display: flex; align-items: center; justify-content: center; gap: 4vw; pointer-events: none;
}
.peek.fade { opacity: 0; transition: opacity .25s; }
.peek-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(22px) brightness(.4) saturate(1.2); }
.peek-poster { position: relative; height: 62%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.7); }
.peek-text { position: relative; max-width: 42%; }
.peek-label { color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.peek-title { font-size: clamp(20px, 7vh, 32px); font-weight: 800; line-height: 1.15; margin-top: 4px; }

/* MT-17: in the mini's place for a film whose mini is not made yet, its poster dimmed under "Not yet available". */
.unavailable { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: #000; overflow: hidden; pointer-events: none; }
.unavailable img { position: absolute; height: 100%; aspect-ratio: 2 / 3; object-fit: cover; filter: brightness(.35); }
.unavailable p {
  position: relative; margin: 0; padding: 10px 22px; border-radius: 10px; background: rgba(0,0,0,.55);
  font-size: clamp(20px, 7vh, 32px); font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 3px #000;
}
/* MT-54: the one-time age confirmation, under the line, the only part of the card that takes a tap. */
.unavailable { grid-auto-flow: row; align-content: center; gap: 16px; }
.unavailable button { position: relative; pointer-events: auto; }

/* MT-110: at the end of the mini (or list) an app opened by a link was opened for, Done or Keep watching. */
.link-end { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0,0,0,.6); }
.link-end-panel { padding: 20px 24px; border-radius: 14px; background: rgba(20,20,20,.92); text-align: center; }
.link-end-panel h2 { margin: 0 0 14px; font-size: clamp(18px, 6vh, 26px); }

/* MT-68: Share, beside the heart. */
.share { top: calc(var(--ctl) + var(--safe-t)); left: calc(var(--ctl) + 58px + var(--safe-l)); }
.share svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.cc { top: calc(var(--ctl) + var(--safe-t)); right: calc(var(--ctl) + 58px + var(--safe-r)); }
.cc svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; opacity: .55; transition: opacity .2s; }
.cc[aria-pressed="true"] svg { opacity: 1; }
.cc[aria-pressed="true"] svg rect { fill: rgba(255,255,255,.18); }
.cc[aria-pressed="false"]::after { content: ""; position: absolute; width: 30px; height: 2px; background: #fff; transform: rotate(-40deg); opacity: .8; }

/* The sound switch, showing the video's sound as it is, also when the phone refused to start it with sound. */
.sound { top: calc(var(--ctl) + var(--safe-t)); right: calc(var(--ctl) + 116px + var(--safe-r)); }
.sound svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound .speaker { fill: rgba(255,255,255,.18); }
.sound[aria-pressed="true"] .waves, .sound[aria-pressed="false"] .cross { display: none; }

.paused { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.paused svg { width: 22vh; height: 22vh; padding: 4vh; border-radius: 50%; background: rgba(0,0,0,.45); fill: #fff; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }


/* Which one is playing (MT-15): a tab on each edge that has a column, and the swipe's label lingering a moment. */
.edge-tab {
  position: absolute; top: 50%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s;
  transform: translateY(-50%); padding: 8px 12px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: clamp(12px, 3.6vh, 15px); font-weight: 700; white-space: nowrap; text-shadow: 0 1px 2px #000;
}
.edge-tab.left { left: calc(var(--frame) + var(--line) + var(--safe-l)); border-left: 0; border-radius: 0 10px 10px 0; }
.edge-tab.right { right: calc(var(--frame) + var(--line) + var(--safe-r)); border-right: 0; border-radius: 10px 0 0 10px; }
.edge-tab.on { opacity: 1; transition-duration: .2s; pointer-events: auto; cursor: pointer; }
.switched {
  position: absolute; top: calc(var(--ctl) + var(--safe-t)); left: 50%; z-index: 2; transform: translateX(-50%); pointer-events: none;
  display: flex; align-items: baseline; gap: 10px; padding: 6px 16px; border-radius: 999px; background: rgba(0,0,0,.55);
  white-space: nowrap; transition: opacity .4s;
}
.switched.fade { opacity: 0; }
.switched-label { color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.switched-title { font-size: 15px; font-weight: 700; }
.switched-title:empty { display: none; }