#player-mount.watch-frame {
  position: relative;
}
.watch-desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--watch-side);
  min-height: calc(100dvh - var(--nav-h));
  background: #000;
}
.watch-stage {
  display: grid; place-items: center; background: #000; min-height: calc(100dvh - var(--nav-h));
}
.watch-frame {
  height: min(calc(100dvh - var(--nav-h) - 24px), 100%);
  aspect-ratio: 9 / 16;
  max-width: 100%;
  background: #000;
  position: relative;
}
.watch-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.watch-side {
  overflow-y: auto; position: sticky; top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
  background: var(--bg); padding: 18px 16px; border-left: 1px solid var(--line);
}
.watch-side h2 { margin: 0 0 8px; font-size: 22px; }
.watch-actions { display: flex; gap: 8px; margin: 12px 0; }
.watch-actions button {
  padding: 8px 12px; border-radius: 10px; background: var(--card); font-weight: 800; font-size: 13px;
}
.watch-actions button.on { background: var(--yellow); color: #111; }

.player-overlay {
  position: fixed; inset: 0; z-index: 25; background: #000;
}
.player-overlay video { width: 100%; height: 100%; object-fit: cover; }
.player-overlay .back {
  position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: 22px;
}
.player-overlay .speed {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 4;
  padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.45); font-size: 12px; font-weight: 800; color: #fff;
}
.player-rail { position: absolute; right: 10px; bottom: 140px; z-index: 4; display: grid; gap: 16px; justify-items: center; }
.player-rail button { color: #fff; font-size: 11px; font-weight: 800; display: grid; gap: 4px; place-items: center; }
.player-meta { position: absolute; left: 14px; right: 72px; bottom: 54px; z-index: 4; }
.bar { position: absolute; left: 12px; right: 12px; bottom: 18px; height: 3px; background: rgba(255,255,255,.25); border-radius: 99px; z-index: 4; }
.bar i { display: block; height: 100%; width: 0; background: var(--yellow); }

@media (max-width: 959px) and (min-width: 640px) {
  .watch-desk { grid-template-columns: 1fr; }
  .watch-stage { min-height: auto; }
  .watch-frame { width: 100%; max-height: 70dvh; height: auto; aspect-ratio: 9 / 16; }
  .watch-side { position: static; height: auto; border-left: 0; }
}