/* Portrait viewing stage. Episode controls keep their own space on the right. */
.drama-player .player-theater {
  position: relative; display: grid;
  grid-template-columns: minmax(0, min(360px, 38svh)) minmax(160px, 1fr);
  align-items: start; gap: clamp(20px, 4vw, 48px);
  max-width: 760px; padding: 24px; border-radius: 28px;
  background:
    radial-gradient(ellipse at 90% 12%, #73898438, transparent 60%),
    radial-gradient(ellipse at 70% 95%, #b7825630, transparent 58%), #19211e;
  border: 1px solid #3c4740; box-shadow: 0 14px 38px #13201a0d;
}
.drama-player .video-wrap {
  position: relative; width: 100%; min-width: 0; aspect-ratio: 9 / 16;
  border-radius: 16px; background: #070b09; overflow: hidden;
}
.drama-player .video-wrap video { width: 100%; height: 100%; object-fit: contain; }
.drama-player .episode-picker { position: relative; min-width: 0; margin: 0; z-index: 2; }
.episode-toggle {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 22px;
  width: 100%; max-width: 170px; min-height: 48px; padding: 12px 20px;
  border: 1px solid #d6e9dc40; border-radius: 999px;
  background: linear-gradient(155deg, #c6d8d51c, #d7e8dc06);
  box-shadow: inset 0 1px 1px #effff332, 0 4px 12px #00000018;
  color: #d7e6db; font: 500 16px/1.3 var(--body); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms, border-color 180ms;
}
.episode-toggle svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-soft); }
.episode-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.episode-toggle:is(:hover, [aria-expanded="true"]) { background-color: #d3e4d71a; border-color: #e8ffed70; }
.episode-menu {
  position: absolute; top: 62px; right: 0; z-index: 3;
  width: min(192px, calc(66.6667vw - 37.3333px)); padding: 10px;
  border: 1px solid #e5f4ef61; border-radius: 26px;
  color: #edf5f0; text-shadow: 0 1px 4px #07130e66;
  background: linear-gradient(145deg, #e0f0ed14, #c6d2ed05 45%, #eaf2ff0f), #26372f33;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: inset 0 1px 1px #ffffff7a, inset 0 -1px 1px #dcecff2b,
    0 16px 40px #020b0845, 0 2px 6px #0000001a;
  transform-origin: top right;
}
.episode-menu[hidden] { display: none; }
.drama-player .episode-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 5px 6px 12px; }
.drama-player .episode-heading h2 { margin: 0; font: 600 14px/1.5 var(--body); letter-spacing: 0; }
.drama-player .episode-heading > span { color: #d1dfd3bd; font-size: 11px; }
.drama-player .episode-list { position: relative; isolation: isolate; display: grid; gap: 5px; }
.drama-player .episode-list button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-width: 0; min-height: 56px; padding: 12px;
  border: 1px solid transparent; border-radius: 18px; background: transparent;
  color: #d4e2d8; font: 500 16px/1.5 var(--body); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms, border-color 180ms;
}
.drama-player .episode-list button:hover { background: #edf4ff12; border-color: #edf4ff26; }
.drama-player .episode-list button[aria-pressed="true"] {
  background: transparent; border-color: transparent; color: #f3fff4;
  box-shadow: none;
}
.episode-state { color: #c1d5c8b0; font-size: 18px; }
[aria-pressed="true"] > .episode-state { color: #dbf6df; font-size: 11px; }
.drama-player .player-theater :focus-visible { outline-color: #ddf4e0; outline-offset: 3px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .episode-menu { background-color: #2c3c35f5; }
}
@media (max-width: 670px) {
  .drama-player .player-page { padding-top: 16px; }
  .drama-player .player-heading { margin-block: 16px 20px; }
  .drama-player .player-heading h1 { font-size: clamp(29px, 7vw, 40px); }
  .drama-player .player-theater { grid-template-columns: minmax(0, 1fr) 62px; gap: 10px; padding: 10px; border-radius: 22px; }
  .drama-player .video-wrap { border-radius: 13px; }
  .episode-toggle { gap: 5px; min-height: 44px; padding: 10px 8px; font-size: 13px; }
  .episode-toggle svg { width: 11px; height: 11px; }
  .episode-menu { top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .episode-toggle svg { transition: none; }
}

.episode-snapshot { z-index: 1; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.episode-snapshot[hidden] { display: none; }
.player-original { margin-top: 28px; color: var(--muted); font-size: 11px; letter-spacing: .06em; }

.episode-glass {
  position: absolute; z-index: 2; inset: -12%; pointer-events: none;
  background: linear-gradient(155deg, #eff8ff24, #ffffff08 36%, #d5e5ed14 66%, #ffffff1c);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  box-shadow: inset 0 1px 0 #ffffff50;
}
.episode-glass[hidden] { display: none; }

/* Shared moving glass plate, matching Xuncuiji's selector motion. */
.episode-indicator {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  opacity: 0; border: 1px solid #e9f5ef40; border-radius: 999px;
  background: linear-gradient(180deg, #effff21f, #daebff08 55%, #b0cbb50c);
  box-shadow: inset 0 1px 1px #ffffff45, inset 0 -1px 1px #ddf2e314,
    0 6px 14px -6px #b9dccb25, 0 1px 3px #00000018;
  transition: transform 420ms cubic-bezier(.45,0,.55,1);
}
@media (prefers-reduced-motion: reduce) {
  .episode-indicator { transition: none; }
}

.drama-player .episode-heading h2 { min-width: 0; overflow-wrap: anywhere; }
.drama-player .episode-heading > span { flex: none; white-space: nowrap; }