/* V2-PC: loaded after both legacy themes, only on the play page. */
@media (min-width: 1024px) {
  /* Same shared Header markup and site tokens; do not load global site CSS into the player. */
  #desktop-site-header { display: block; font-family: system-ui,"PingFang SC","Microsoft YaHei",sans-serif; }
  #desktop-site-header .site-head { background: #202a39; color: #f0f2f5; border-bottom: 1px solid #39485b; color-scheme: dark; }
  #desktop-site-header .head-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 1200px; margin: auto; padding: 12px 24px 0; }
  #desktop-site-header a { text-decoration: none; }
  #desktop-site-header .h5-wordmark { display: inline-flex; align-items: center; margin-right: 24px; color: #f0f2f5; font-size: 18px; font-weight: 750; letter-spacing: -.03em; }
  #desktop-site-header .search-box { display: flex; position: relative; width: min(40%,440px); margin-right: auto; }
  #desktop-site-header .search-box input { width: 100%; min-width: 0; height: 48px; padding: 10px 52px 10px 14px; border: 1px solid #8395b0; border-radius: 6px; background: #2c394b; color: #f0f2f5; font: inherit; font-size: 16px; }
  #desktop-site-header .search-box input::placeholder { color: #bbc7d8; }
  #desktop-site-header .search-go { display: grid; place-items: center; position: absolute; width: 44px; height: 44px; right: 2px; top: 2px; padding: 0; background: none; border: 0; color: #ff8068; cursor: pointer; }
  #desktop-site-header .search-go svg { width: 22px; height: 22px; }
  #desktop-site-header .h5-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #desktop-site-header .tabs { order: 2; display: flex; width: 100%; gap: 0 8px; flex-wrap: wrap; }
  #desktop-site-header .tabs a,#desktop-site-header .me-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px; color: #bbc7d8; font-size: 14px; }
  #desktop-site-header .tabs a.on,#desktop-site-header a:hover { color: #ff8068; }
  #desktop-site-header .tabs a { color: #f0f2f5; font-size: 15px; font-weight: 650; }
  #desktop-site-header .tabs a.on { color: #ff8068; font-weight: 800; }
  #desktop-site-header .pwa-install-btn { background: none; border: 0; gap: 4px; }
  #desktop-site-header .pwa-install-btn svg { width: 18px; height: 18px; }
  #desktop-site-header [hidden] { display: none; }
  #desktop-site-header .site-head :is(a,button,input):focus-visible { outline: 2px solid #ff8068; outline-offset: 3px; }
  #desktop-watch-layout #stage .player-site-nav { display: none; }
  #desktop-watch-layout {
    display: grid; grid-template-columns: minmax(0,1fr) 304px; gap: 16px;
    max-width: 1440px; margin: 24px auto 0; width: calc(100% - 48px);
    height: clamp(540px,76dvh,800px); align-items: stretch;
  }
  body.theme-deep-purple-v2 #desktop-watch-layout #stage:not(:fullscreen):not(:-webkit-full-screen) {
    position: relative; inset: auto; margin: 0; width: 100%; height: 100%;
    min-width: 0; aspect-ratio: auto; border-radius: 8px; background: #141c29;
  }
  #desktop-watch-layout #deck video { object-fit: contain; }
  #desktop-watch-sidebar {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    background: #263346; border: 1px solid #526078; border-radius: 8px;
    color: #f0f2f5; overflow: hidden;
  }
  #desktop-watch-sidebar .watch-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); flex-shrink: 0; padding: 6px; gap: 2px; border-bottom: 1px solid #526078; }
  #desktop-watch-sidebar .watch-tabs button { min-height: 48px; padding: 8px 4px; font: inherit; font-size: 14px; border: 0; border-radius: 6px; background: transparent; color: #bac6d6; cursor: pointer; }
  #desktop-watch-sidebar .watch-tabs [aria-selected="true"] { background: #ff8068; color: #202a39; font-weight: 700; }
  #desktop-watch-sidebar .watch-panel { overflow-y: auto; min-height: 0; padding: 16px 12px; overscroll-behavior-y: contain; scrollbar-width: thin; scroll-padding: 8px; }
  #desktop-watch-sidebar .watch-panel[hidden] { display: none; }
  :is(#desktop-watch-sidebar,#desktop-player-info) .watch-note { color: #bac6d6; font-size: 13px; line-height: 1.7; margin: 0 0 16px; }
  #sidebar-episode-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
  #sidebar-episode-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  #sidebar-episode-grid:has([data-label-range]) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #desktop-watch-sidebar :is(.ep-item,.tab) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; height: auto; aspect-ratio: auto; padding: 8px; border: 1px solid #64738a; border-radius: 6px; color: #f0f2f5; background: #202a39; text-decoration: none; font-size: 14px; cursor: pointer; overflow-wrap: anywhere; }
  #desktop-watch-sidebar :is(.ep-item.current,.tab.active) { background: #ff8068; border-color: #ff8068; color: #202a39; font-weight: 700; }
  #desktop-watch-sidebar .ep-item.current::after { background: #202a39; box-shadow: none; }
  #desktop-watch-sidebar .watch-recommendation { display: flex; align-items: center; gap: 12px; color: #f0f2f5; text-decoration: none; margin-bottom: 16px; }
  .watch-recommendation img { width: 72px; height: 108px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
  .watch-recommendation span { min-width: 0; }
  .watch-recommendation strong { display: block; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .watch-recommendation small { display: block; color: #bac6d6; margin-top: 8px; font-size: 12px; }
  body.theme-deep-purple-v2 #desktop-player-info { width: calc(100% - 48px); max-width: 1440px; margin: 24px auto 48px; padding: 0; }
  #desktop-player-info h1 { font-size: 26px; line-height: 1.5; overflow-wrap: anywhere; }
  #desktop-player-info .desktop-intro { max-width: 1000px; }
  #desktop-player-info #desktop-episodes { margin-top: 28px; }
  #desktop-related { margin-top: 28px; }
  #desktop-related h2 { margin-bottom: 16px; }
  #desktop-related .watch-card-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 20px; }
  #desktop-related .card { min-width: 0; background: transparent; border: 0; }
  #desktop-related .card-main { color: #f0f2f5; text-decoration: none; }
  #desktop-related .card-cover { display: block; position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: 6px; }
  #desktop-related img { display: block; width: 100%; height: 100%; object-fit: cover; }
  #desktop-related .card-ep { position: absolute; left: auto; right: 5px; bottom: 6px; max-width: calc(100% - 10px); padding: 2px 5px; border-radius: 4px; font-style: normal; font-size: 11px; line-height: 16px; color: #f0f2f5; background: rgba(12,18,28,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #desktop-related .card-title { display: block; margin-top: 10px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  #desktop-watch-sidebar :is(a,button,[tabindex]):focus-visible { outline: 3px solid #ffab99; outline-offset: -3px; }
  #desktop-related a:focus-visible { outline: 3px solid #ffab99; outline-offset: 3px; }
  #desktop-watch-sidebar .watch-recommendation:hover strong { color: #ffab99; }
}
@media (min-width: 1200px) {
  #desktop-watch-layout { grid-template-columns: minmax(0,1fr) 340px; gap: 24px; }
}

@media (min-width: 1024px) {
  /* Keep the document as the scrolling ancestor of the sticky Header. */
  body:has(#desktop-player-info) { overflow: visible; }
  #desktop-site-header { position: sticky; top: 0; z-index: 15; }
  #desktop-site-header .site-head { background: #263346; border-color: #526078; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
  #desktop-site-header a.me-link { border: 1px solid #64738a; border-radius: 6px; font-weight: 650; }
  #desktop-site-header a.vip-nav-link { border-color: #ff8068; color: #ffab99; background: #2c394b; }
  #desktop-site-header a.me-link[href="/me"] { color: #202a39; border-color: #ff8068; background: #ff8068; }
  #desktop-site-header a.me-link:hover { border-color: #ffab99; }
  #desktop-related .card-cover, #desktop-related .card-cover img { transition: none; }
  #desktop-related .card:hover .card-cover img { transform: none; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #desktop-related .card-cover { transition: box-shadow .2s ease; }
  #desktop-related .card-cover img { transition: transform .2s ease; }
  #desktop-related .card:hover .card-cover { box-shadow: 0 4px 12px rgba(0,0,0,.18); }
  #desktop-related .card:hover .card-cover img { transform: scale(1.025); }
}

/* PC work summary only; existing player and mobile DOM remain unchanged. */
@media (min-width: 1024px) {
  #desktop-player-info .desktop-work-summary { display: grid; grid-template-columns: clamp(156px,14vw,200px) minmax(0,1fr); gap: 28px; align-items: start; }
  #desktop-player-info .desktop-work-cover { position: relative; display: block; aspect-ratio: 2/3; overflow: hidden; border-radius: 8px; background: #141c29; color: #f0f2f5; }
  #desktop-player-info .desktop-work-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
  #desktop-player-info .desktop-cover-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12,18,28,.55); opacity: 0; pointer-events: none; }
  #desktop-player-info .desktop-cover-play svg { box-sizing: content-box; padding: 14px; border: 1px solid rgba(240,242,245,.65); border-radius: 50%; background: rgba(20,28,41,.35); }
  #desktop-player-info .desktop-work-cover:focus-visible { outline: 3px solid #ffab99; outline-offset: 4px; }
  #desktop-player-info .desktop-work-cover:focus-visible .desktop-cover-play { opacity: 1; }
  #desktop-player-info .desktop-work-copy { min-width: 0; }
  #desktop-player-info .desktop-work-copy h1 { margin: 0 0 8px; }
  #desktop-player-info .desktop-work-copy .desktop-intro,
  #desktop-player-info .desktop-work-copy .desktop-intro p { max-width: none; width: auto; }
  #desktop-player-info .desktop-work-copy .desktop-intro p { margin-bottom: 12px; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  #desktop-player-info .desktop-work-cover:hover .desktop-cover-play { opacity: 1; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #desktop-player-info .desktop-cover-play { transition: opacity .18s ease; }
}

/* V2 desktop transport and interaction placement; no global Header changes. */
@media(min-width:1024px) {
  body.theme-deep-purple-v2 #stage > #bottom { z-index:12; pointer-events:auto; }
  #stage #ep-bar { flex-wrap:wrap; }
  #stage #btn-eps { flex:1; min-width:100px; }
  #stage #playback-clock { display:block; min-width:96px; font-size:12px; white-space:nowrap; }
  #desktop-actions { flex-shrink:0; border-bottom:1px solid #526078; }
  #desktop-actions #rail { position:static; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:8px; width:100%; }
  #desktop-actions .rail-btn { width:100%; min-width:0; min-height:52px; gap:3px; }
  #desktop-actions .rail-btn svg { width:22px; height:22px; }
  #desktop-actions .rail-btn i { font-size:12px; }
  #desktop-watch-sidebar .watch-panel { flex:1; }
  #stage.immersive #playback-clock { display:none; }
}

/* Compact only the PC drawer; keep the shared episode order, states and mobile grid. */
@media (min-width:1024px) {
  body.theme-deep-purple-v2 #desktop-watch-layout #stage #drawer {
    height:auto; max-height:min(68%,420px);
  }
  body.theme-deep-purple-v2 #stage #drawer > #drawer-head,
  body.theme-deep-purple-v2 #stage #drawer > #drawer-tabs { flex-shrink:0; }
  body.theme-deep-purple-v2 #stage #drawer #drawer-grid {
    flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:48px;
    align-content:start; gap:8px; padding:4px 16px 16px;
  }
  body.theme-deep-purple-v2 #stage #drawer #drawer-grid .ep-item {
    box-sizing:border-box; aspect-ratio:auto; width:auto; min-width:0;
    height:48px; min-height:48px; max-height:48px; padding:6px 8px; line-height:1.2;
  }
}