#watch-layout {
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(12px, 2vw, 28px) 48px;
}

body:has(#watch-layout:not([hidden])) #catalog-nav { display: none; }

.stage {
  --player-gutter: clamp(12px, 2vw, 27px);
  --player-line: 3px;
  --player-chrome: #030508;
  --player-signal: var(--action, #fb7a8b);
  border-color: #b5cbe02e;
  border-radius: clamp(12px, 2vw, 24px);
  max-height: max(360px, calc(100svh - var(--chrome-height) - 42px));
  background: var(--player-chrome);
  box-shadow: 0 24px 76px #010409b0;
}

.stage.has-player, .stage video { background: var(--player-chrome); }
.stage.player-fill video { object-fit: cover; }
.stage video { transition: filter 330ms var(--ease-out); }
.stage.player-paused video { filter: brightness(.53) saturate(.72); }

.stage.player-fullscreen {
  --player-gutter: clamp(14px, 2vw, 40px);
  height: 100%;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}

.stage.player-fallback-fullscreen { height: 100dvh; z-index: 20; }

.player-heading {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: clamp(10px, 2vw, 26px) var(--player-gutter) clamp(24px, 5vw, 70px);
  background: linear-gradient(#030508bd, #03050848 56%, transparent);
  transition: opacity 220ms ease, transform 310ms var(--ease-out);
  pointer-events: none;
}

.player-heading > * { pointer-events: auto; }
.player-heading > :first-child { justify-self: start; }
.player-heading > :last-child { justify-self: end; }
.player-heading h1 {
  overflow: hidden;
  color: #f7fbff;
  font-size: clamp(.82rem, 1.6vw, 1.18rem);
  font-weight: 750;
  line-height: 1.23;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 11px #000;
  white-space: nowrap;
}

.player-episode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #e0ecfb42;
  border-radius: 7px;
  color: #f7fbff;
  background: #0b111cc9;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.15;
  transition: color 170ms, border-color 170ms, background 170ms;
}

.player-episode-toggle svg { width: 17px; height: 17px; flex: none; }
.player-episode-toggle:is(:hover, [aria-expanded="true"]) { color: var(--accent); border-color: #ccf2ff80; background: #1c2b3ce6; }

.player-pause-card {
  position: absolute;
  z-index: 2;
  inset: auto auto max(18%, 87px) max(var(--player-gutter), 4.1%);
  max-width: min(40%, 31rem);
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 240ms ease, transform 360ms var(--ease-out);
  text-shadow: 0 2px 18px #000, 0 1px 4px #000;
  pointer-events: none;
}

.stage.player-paused .player-pause-card { opacity: 1; transform: none; }
.player-pause-card .episode-kicker { margin-bottom: 8px; color: #ddf3ff; }
.player-pause-card #player-pause-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(1.02rem, 3vw, 3.1rem);
  font-weight: 810;
  line-height: 1.08;
  letter-spacing: -.04em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.player-surface {
  background: linear-gradient(90deg, #03050b57, transparent 65%);
  transition: background-color 250ms ease;
}

.stage.player-playing .player-surface { background: transparent; }
.player-big-play {
  width: clamp(48px, 6.3vw, 86px);
  border-color: #fff8;
  background: #090f1bc4;
  box-shadow: 0 0 0 8px #eff6ff0f, 0 13px 45px #0009;
  animation: player-play-appear 430ms var(--ease-out) backwards;
}

.player-surface:hover .player-big-play { color: #1b0c13; background: var(--player-signal); }
@keyframes player-play-appear {
  from { opacity: 0; transform: scale(.8); }
}

.player-controls {
  gap: 0;
  padding: clamp(11px, 3vw, 38px) var(--player-gutter) max(7px, env(safe-area-inset-bottom));
  background: linear-gradient(0deg, #030508ed 0%, #030508b3 49%, transparent 100%);
}

.stage.player-fullscreen .player-controls {
  padding-inline: max(var(--player-gutter), env(safe-area-inset-left)) max(var(--player-gutter), env(safe-area-inset-right));
  padding-bottom: max(clamp(9px, 1.4vw, 22px), env(safe-area-inset-bottom));
}

.stage.player-fullscreen .player-heading {
  padding-top: max(clamp(10px, 2vw, 26px), env(safe-area-inset-top));
  padding-inline: max(var(--player-gutter), env(safe-area-inset-left)) max(var(--player-gutter), env(safe-area-inset-right));
}

.stage.player-idle .player-heading:not(:has(button:focus-visible)) { opacity: 0; transform: translateY(-8px); }
.stage.player-idle .player-heading:not(:has(button:focus-visible)) > * { pointer-events: none; }
.stage:not(.player-fullscreen).player-idle, .stage:not(.player-fullscreen).player-idle .player-surface { cursor: auto; }

.player-track { align-items: center; }
.player-track::before { display: none; }
.player-buffer {
  position: absolute;
  inset: 50% 0 auto;
  height: var(--player-line);
  overflow: hidden;
  border-radius: 4px;
  background: #fff4;
  transform: translateY(-50%);
  pointer-events: none;
}

.player-buffer i { position: absolute; top: 0; bottom: 0; background: #fff7; }
.player-timeline { position: relative; z-index: 1; width: 100%; touch-action: pan-y; }
.player-timeline::-webkit-slider-runnable-track {
  height: var(--player-line);
  background: linear-gradient(90deg, var(--player-signal) var(--range-fill, 0%), transparent 0);
}

.player-timeline::-moz-range-track {
  height: var(--player-line);
  background: linear-gradient(90deg, var(--player-signal) var(--range-fill, 0%), transparent 0);
}

.player-timeline::-webkit-slider-thumb { margin-top: -4.5px; opacity: 0; transition: opacity 150ms; }
.player-timeline::-moz-range-thumb { opacity: 0; transition: opacity 150ms; }
.player-track:hover .player-timeline::-webkit-slider-thumb, .player-timeline:focus-visible::-webkit-slider-thumb { opacity: 1; }
.player-track:hover .player-timeline::-moz-range-thumb, .player-timeline:focus-visible::-moz-range-thumb { opacity: 1; }
.player-track:focus-within, .player-track:hover { --player-line: 5px; }
.player-track:focus-within .player-timeline::-webkit-slider-thumb,
.player-track:hover .player-timeline::-webkit-slider-thumb { margin-top: -3.5px; }
.player-hover-time { z-index: 2; color: #fff; background: #080e19f4; }
.player-time { margin-left: clamp(1px, .6vw, 9px); }
.player-tool:is([aria-expanded="true"], [aria-pressed="true"]) { color: var(--accent); background: #fff2; }

.player-skip-feedback {
  position: absolute;
  z-index: 3;
  inset: 49% auto auto 22%;
  min-width: 64px;
  padding: 8px 13px;
  border: 1px solid #e0ecfb5a;
  border-radius: 50px;
  color: #fff;
  background: #080e19e5;
  transform: translate(-50%, -50%);
  font-size: .94rem;
  font-weight: 740;
  text-align: center;
  pointer-events: none;
  animation: player-skip-pop 560ms var(--ease-out) both;
}

.player-skip-feedback[data-direction="forward"] { left: 78%; }
@keyframes player-skip-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  25%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%); }
}

.player-settings-panel, .stage .library {
  position: absolute;
  z-index: 5;
  border: 1px solid #aaccf04a;
  border-radius: 12px;
  color: #f1f6fd;
  background: #0b1421f4;
  box-shadow: 0 14px 38px #0009;
}

.player-settings-panel {
  inset: auto var(--player-gutter) clamp(54px, 9vw, 90px) auto;
  width: min(280px, calc(100% - 2 * var(--player-gutter)));
  max-height: calc(100% - clamp(103px, 15vw, 157px));
  padding: 8px 14px;
  overflow: auto;
  overscroll-behavior: contain;
  animation: player-settings-in 240ms var(--ease-out) backwards;
}

@keyframes player-settings-in { from { opacity: 0; transform: translateY(9px) scale(.98); } }

.player-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 46px;
  border-bottom: 1px solid #aabcda2b;
  color: #e7eef9;
  font-size: .82rem;
  font-weight: 680;
}

.player-option select { min-width: 77px; max-width: 126px; }
.player-option input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
.player-option .player-volume { width: 92px; }
.player-shortcuts { padding-block: 8px; font-size: .77rem; }
.player-shortcuts summary { padding-block: 6px; color: var(--accent); font-weight: 670; cursor: pointer; }
.player-shortcuts dl { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 4px; margin: 7px 0 0; }
.player-shortcuts dd { margin: 0; justify-self: end; white-space: nowrap; }
.player-shortcuts kbd { padding: 2px 5px; border: 1px solid #d1e5ff49; border-radius: 4px; font: inherit; }

.stage .library {
  inset: clamp(49px, 8vw, 89px) var(--player-gutter) clamp(59px, 9vw, 95px) auto;
  width: min(348px, calc(100% - 2 * var(--player-gutter)));
  max-height: none;
  animation: player-drawer-in 300ms var(--ease-out) backwards;
}

.stage .library-header { padding: 12px 15px; }
.stage .episode-list { flex: 1; }
@keyframes player-drawer-in { from { opacity: 0; transform: translateX(15px); } }

#player-message {
  position: absolute;
  z-index: 3;
  inset: auto var(--player-gutter) clamp(52px, 10vw, 98px);
  width: fit-content;
  max-width: calc(100% - 2 * var(--player-gutter));
  padding: 7px 11px;
  border: 1px solid #aaccf04a;
  border-radius: 8px;
  background: #080e19e6;
  font-size: .82rem;
  pointer-events: none;
}

@media (max-width: 600px) {
  .stage:not(.player-fullscreen) { min-height: 210px; }
  .stage:not(.player-fullscreen):has(.player-settings-panel:not([hidden])) { min-height: min(388px, 68svh); }
  .stage:not(.player-fullscreen):has(.library:not([hidden])) { min-height: min(440px, 72svh); }
  .player-heading { grid-template-columns: 70px minmax(0, 1fr) 70px; }
  .player-episode-toggle { gap: 4px; padding: 6px; font-size: .7rem; }
  .player-episode-toggle svg { width: 13px; height: 13px; }
  .player-pause-card { display: none; }
  .player-controls { padding-top: 14px; }
  .player-tool { width: 28px; min-height: 35px; }
}

@media (max-width: 390px) {
  .stage { --player-gutter: 8px; }
  .player-tool { width: 25px; }
}

@media (max-width: 350px) {
  .player-heading { grid-template-columns: 35px minmax(0, 1fr) 35px; }
  .player-episode-toggle span, #previous { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage video, .player-heading, .player-pause-card { transition: none; }
  .player-big-play, .player-settings-panel, .stage .library, .player-skip-feedback { animation: none; }
}