/* Figma 44702:194450 / 44639:272806. Playback, gates and cards share existing APIs. */
.is-play-page { --play-accent: var(--primary-color, #ff5000); }
.play-page { display: block; --home-accent: var(--play-accent); width: 1700px; max-width: calc(100% - 64px); margin: 0 auto; padding: 24px 0 60px; }
.is-play-page .play-page > .site-breadcrumb { display: flex; margin-bottom: 32px; }
.play-page [hidden] { display: none !important; }
.play-page button, .play-page a { -webkit-tap-highlight-color: transparent; }
.play-page button { font: inherit; cursor: pointer; }
.play-page :is(button, a):focus-visible { outline: 2px solid var(--play-accent); outline-offset: 3px; }
.play-layout { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 376px; gap: 24px; align-items: start; }
.play-main, .play-sidebar { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.play-player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #050505; border-radius: 32px; isolation: isolate; }
.play-player > .dplayer-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.play-player .dplayer-video-wrap, .play-player video { width: 100%; height: 100%; }
.play-player video { object-fit: contain; }
.play-player-cover { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; background: #050505; pointer-events: none; }
.play-player-cover--hidden { display: none; }
.play-player-center { position: absolute; top: 50%; left: 50%; z-index: 4; width: 84px; height: 84px; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); }
.play-player-center picture, .play-player-center img { display: block; width: 100%; height: 100%; }
.play-gate, .play-unavailable { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.play-gate { padding: 12px 24px; border: 0; border-radius: 8px; color: #fff; background: var(--play-accent); }
.play-next, .play-player .dplayer-notice-list .dplayer-notice { padding: 12px; border-radius: 8px; font-size: 14px; line-height: 20px; color: #fff; background: #000b; }
.play-next { position: absolute; right: 40px; bottom: 120px; z-index: 4; display: flex; gap: 12px; }
/* DPlayer 1.27 positions the list; reset the legacy stylesheet's item positioning. */
.play-player .dplayer-notice-list { position: absolute; inset: auto auto 120px 40px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: max-content; max-width: calc(100% - 80px); pointer-events: none; }
.play-player .dplayer-notice-list .dplayer-notice { position: static; display: block; width: max-content; max-width: 100%; box-sizing: border-box; margin: 0; white-space: normal; overflow-wrap: anywhere; transition: none; animation: play-notice-enter .2s ease-out both; }
.play-player .dplayer-notice-list .remove-notice { animation: play-notice-leave .2s ease-in both; }
@keyframes play-notice-enter { from { opacity: 0; transform: translateY(4px); } to { transform: translateY(0); } }
@keyframes play-notice-leave { to { opacity: 0; transform: translateY(4px); } }
.play-preroll { position: absolute; inset: 0; z-index: 8; background: #050505; }
.play-preroll-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.play-preroll-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.play-preroll-controls { position: absolute; right: 24px; top: 24px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; color: #fff; background: #000c; font-size: 14px; line-height: 20px; }
.play-preroll-controls a { padding-left: 12px; border-left: 1px solid #ffffff40; color: #ffe120; text-decoration: none; white-space: nowrap; }
.play-player.is-preroll-active > :not(.play-preroll) { visibility: hidden; pointer-events: none; }
@media (max-width: 860px) {
    .play-preroll-controls { right: 12px; top: 12px; gap: 8px; padding: 6px 8px; font-size: 12px; line-height: 18px; }
    .play-preroll-controls a { padding-left: 8px; }
}
/* Keep DPlayer's playback, keyboard seek, volume and fullscreen behavior. */
.play-player .dplayer-controller { z-index: 5; left: 40px; right: 40px; width: auto; bottom: 38px; height: 54px; padding: 0; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.play-player .dplayer-controller-mask { z-index: 3; height: 160px; opacity: 1 !important; transform: none !important; pointer-events: none; }
.play-player .dplayer-bar-wrap { height: 18px; margin: 0 0 11px; padding: 7px 0; box-sizing: border-box; }
.play-player .dplayer-bar-wrap .dplayer-bar { height: 4px; background: #ffffff40; }
.play-player .dplayer-bar-wrap .dplayer-played { background: #fff !important; }
.play-player .dplayer-bar-wrap .dplayer-thumb { width: 12px !important; height: 12px !important; margin-top: -6px !important; top: 50% !important; background: #fff !important; transform: scale(1) !important; }
.play-player .dplayer-icons { height: 24px !important; display: flex; align-items: center; gap: 24px; }
.play-player .dplayer-icons-left { float: left; }
.play-player .dplayer-icons-right { float: right; }
.play-player .dplayer-icon { width: 24px !important; height: 24px !important; padding: 0 !important; margin: 0; opacity: 1; }
.play-player .dplayer-icon-content, .play-player .dplayer-icon svg { width: 24px; height: 24px; }
.play-player .dplayer-time { margin: 0 !important; line-height: 24px !important; font-size: 18px !important; color: #bfbfbf; }
.play-player .dplayer-play-icon { background: url('/static/images/player/play.svg') center / 24px no-repeat; }
.play-player .dplayer-play-icon .dplayer-icon-content { visibility: hidden; }
.play-player .drama-is-playing .dplayer-play-icon { background: none; }
.play-player .drama-is-playing .dplayer-play-icon .dplayer-icon-content { visibility: visible; }
.play-player .dplayer-setting-icon { background: url('/static/images/player/settings.svg') center / 24px no-repeat; }
.play-player .dplayer-full-icon { background: url('/static/images/player/fullscreen.svg') center / 24px no-repeat; }
.play-player :is(.dplayer-setting-icon, .dplayer-full-icon) .dplayer-icon-content { visibility: hidden; }
.play-player .dplayer-full-in-icon, .play-player .dplayer-mobile-play, .play-player .dplayer-bezel { display: none !important; }
.play-player .dplayer-volume { display: flex !important; height: 24px; align-items: center; position: relative; }
.play-player .dplayer-volume-icon .dplayer-icon-content { display: none; }
.play-player .dplayer-volume-icon img { width: 24px; height: 24px; }
.play-player .drama-volume-off, .play-player .drama-is-muted .drama-volume-on { display: none; }
.play-player .drama-is-muted .drama-volume-off { display: block; }
.play-player .dplayer-volume-bar-wrap { display: none !important; }
.drama-player-next { width: 24px; height: 24px; padding: 0; border: 0; background: none; }
.drama-player-next img { width: 100%; height: 100%; }
.drama-player-next:disabled { opacity: .35; cursor: default; }
.play-player .dplayer-setting-box { bottom: 34px; }
.play-player .dplayer-setting-speed-item { position: relative; }
.play-player .dplayer-setting-speed-item.is-selected { color: var(--play-accent); background: #ffffff0d; }
.play-player .dplayer-setting-speed-item:focus-visible { outline: 1px solid var(--play-accent); outline-offset: -2px; }
.play-info { display: flex; flex-direction: column; gap: 16px; padding: 21px; border: 1px solid #1a1a1a; border-radius: 12px; background: #1a1a1a; }
.play-info-heading { display: flex; flex-direction: column; gap: 12px; }
.play-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.play-info-title { margin: 0; color: #fff; font-size: 24px; line-height: 32px; font-weight: 500; overflow-wrap: anywhere; }
.play-type-badge, .play-vip-badge, .play-coin-badge { display: inline-flex; align-items: center; flex: none; border-radius: 6px; padding: 2px 8px; font-size: 12px; line-height: 18px; font-weight: 500; }
.play-type-badge { padding: 3px 9px; border: 1px solid #f8930014; border-radius: 9px; background: #f8930014; color: #f89300; }
.play-vip-badge { background: linear-gradient(132deg, #ff6a00, #e60012); color: #fff; }
.play-coin-badge { border: 1px solid #ffe1201a; background: #ffe1201a; color: #ffe120; }
.play-info-subtitle { margin-left: 4px; color: #999; font-size: 12px; line-height: 18px; font-weight: 500; overflow-wrap: anywhere; }
.play-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 4px; color: #9ca3af; font-size: 12px; line-height: 16px; font-weight: 500; }
.play-metadata-dot { display: none; }
.play-year { color: #e5e7eb; font-weight: 400; }
.play-update-status { color: #34d399; font-weight: 400; }
.play-info-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.play-action-group { display: flex; align-items: center; gap: 24px; border-radius: 12px; padding: 10px 12px; background: #ffffff1a; }
.play-action { position: relative; display: inline-flex; align-items: center; gap: 10px; color: #f5f5f5; text-decoration: none; border: 0; padding: 0; background: none; font-size: 16px; line-height: 24px; white-space: nowrap; }
.play-action + .play-action:before { content: ''; position: absolute; left: -13px; top: calc(50% - 9px); width: 2px; height: 19px; background: #ffffff1a; }
.play-action-icon { display: block; flex: none; width: 36px; height: 36px; position: relative; }
.play-icon-like { background: currentColor; mask: url('/static/images/player/like.svg') center / contain no-repeat; }
.play-icon-feedback { background: currentColor; mask: url('/static/images/player/feedback.svg') center / contain no-repeat; }
.play-icon-share, .play-icon-collect { border-radius: 50%; background: #ffffff0d; }
.play-icon-share:after, .play-icon-collect:after { content: ''; position: absolute; inset: 0; background: currentColor; }
.play-icon-share:after { mask: url('/static/images/player/share.svg') center / 20px no-repeat; }
.play-icon-collect:after { mask: url('/static/images/player/collect.svg') center / 24px no-repeat; }
.play-action.detail-action--active { color: var(--play-accent); }
.play-download { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 24px; border: 0; border-radius: 12px; color: #fff; background: var(--play-accent); }
.play-download picture, .play-download img { display: block; width: 24px; height: 24px; }
@media (min-width: 861px) {
    .play-download img { filter: brightness(0) invert(1); }
}
.play-download-h5 { display: none; }
.play-intro-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding-top: 13px; border-top: 1px solid #282c3599; }
.play-intro-heading { margin: 0; font-size: 12px; line-height: 18px; font-weight: 500; }
.play-page .play-intro-more { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 0; color: #999; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.play-intro-more picture, .play-intro-more img { display: block; }
.play-intro-more[aria-expanded=false] img { transform: rotate(180deg); }
.play-intro { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: 12px; line-height: 18px; font-weight: 500; color: #999; overflow-wrap: anywhere; }
.play-intro.is-expanded { display: block; }
.play-info-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4.7px; }
.play-info-tags :is(a, span):not(.play-tags-label) { padding: 5px 11px; color: #999; background: #ffffff0d; border: 1px solid #2a2e37; border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 500; text-decoration: none; }
.play-tags-label { margin-right: 4px; color: #999; font-size: 12px; line-height: 18px; }
.play-page .drama-banner-ads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.play-page .drama-banner-ads img { display: block; width: 100%; aspect-ratio: 646 / 74; object-fit: fill; border-radius: 12px; }
.play-page .drama-icon-ads { display: grid; grid-template-columns: repeat(auto-fill, 80px); justify-content: space-between; gap: 16px; }
.play-page .drama-icon-ads img { width: 80px; height: 80px; border-radius: 12px; }
.play-page .drama-icon-ads a { min-width: 0; text-align: center; font-size: 12px; }
.play-page .drama-icon-ads span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.play-vip-promo { padding: 16px; border: 1px solid #997428; border-radius: 12px; background: linear-gradient(120deg, #292621, #151515); text-align: center; }
.play-vip-promo-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #876c33; color: #dfbb73; font-size: 12px; }
.play-vip-promo-head > span:first-child { display: flex; align-items: center; gap: 8px; }
.play-vip-promo-head img { width: 24px; height: 24px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: #d9b367; }
.play-vip-promo h2 { margin: 16px 0 8px; font-size: 16px; line-height: 22px; font-weight: 500; }
.play-vip-promo p { margin: 0 0 14px; font-size: 12px; color: #d6b650; line-height: 18px; }
.play-vip-promo-cta { display: block; box-sizing: border-box; width: 100%; border: 0; border-radius: 24px; background: linear-gradient(100deg, #f5d992, #d8a954); color: #694316; padding: 10px; font-size: 16px; line-height: 22px; text-decoration: none; }
.play-selection { position: relative; padding: 0 16px; min-width: 0; }
.play-selection-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ffffff1a; gap: 8px; margin-bottom: 16px; }
.play-tabs { display: flex; gap: 24px; }
.play-tabs button { position: relative; border: 0; padding: 12px 0; background: none; color: #aaa; font-size: 14px; line-height: 20px; white-space: nowrap; }
.play-tabs button[aria-selected=true] { color: #fff; }
.play-tabs button[aria-selected=true]:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 18px; height: 2px; transform: translateX(-50%); background: var(--play-accent); }
.play-tabs [data-play-tab][aria-selected=true]:before { content: ''; position: absolute; right: -10px; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--play-accent); }
.play-sort { display: flex; align-items: center; gap: 4px; padding: 8px 0; border: 0; background: none; font-size: 12px !important; color: #fff; }
.play-sort img { width: 14px; height: 14px; }
.play-episodes-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; font-size: 12px; line-height: 18px; color: #e6e6e6; }
.play-selection:has(#playEpisodesPanel:not([hidden])) .play-selection-head { margin-bottom: 0; }
.play-ep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.play-ep { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; height: 44px; box-sizing: border-box; border-radius: 12px; border: 1px solid #ffffff1a; background: #ffffff0d; backdrop-filter: blur(8px); text-decoration: none; color: #e6e6e6; }
.play-ep-num { margin-bottom: -2px; font-size: 12px; line-height: 18px; }
.play-ep-status { font-size: 10px; line-height: 16px; }
.play-ep--free .play-ep-status { color: #17ce92; }
.play-ep--vip .play-ep-status { color: #f89300; }
.play-ep--coin .play-ep-status { color: #ffe120; }
.play-ep-lock { position: absolute; right: 4.5px; top: 4.22px; display: block; filter: brightness(0) invert(1); }
.play-ep--active { background: #ff4b02; border-color: #ff4b02; color: #fff; }
.play-ep--active .play-ep-status { color: #fffc; }
.play-ep--active .play-ep-lock { display: none; }
.play-page .play-expand-episodes { display: flex; justify-content: center; align-items: center; gap: 0; width: 100%; padding: 11px 0; color: #e6e6e6; background: #ffffff0d; border: 1px solid #ffffff0d; border-radius: 12px; font-size: 12px; line-height: 18px; }
.play-expand-episodes img { display: block; flex: none; filter: brightness(0) invert(1); }
.play-expand-episodes[aria-expanded=true] img { transform: rotate(180deg); }
.play-episodes-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 20px 4px 8px; }
.play-episodes-hint { flex: 1; min-width: 0; margin: 0; font-size: 12px; line-height: 18px; color: #e6e6e6; }
.play-page .play-episodes-vip { flex: none; padding: 0; border: 0; background: none; color: #e6e6e6; font-size: 12px; line-height: 18px; text-decoration: none; }
.play-related { padding: 16px; border-radius: 12px; background: #1a1a1a; min-width: 0; }
.play-related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.play-related h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.play-related h2:after { content: ''; width: 5px; height: 5px; background: var(--play-accent); border-radius: 50%; }
.play-related-head button { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #aaa; font-size: 12px; }
.play-related-head button img { width: 12px; height: 12px; }
.play-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
/* H5 retains its existing playback-card appearance. PC cards share poster-cards.css. */
@media (max-width: 860px) {
    .play-page .play-related .poster-card { width: 100%; min-width: 0; height: auto; border-radius: 12px; border: 0; overflow: hidden; background: #262626; }
    .play-page .play-related .poster-cover { width: 100%; height: auto; aspect-ratio: 3 / 4; padding: 0; border-radius: 12px; }
    .play-page .play-related .poster-cover-img { width: 100%; height: 100%; object-fit: cover; }
    .play-page .play-related .poster-card-body { padding: 8px; gap: 4px; min-height: 0; background: transparent; }
    .play-page .play-related .poster-card-title { display: block; font-size: 14px; line-height: 20px; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .play-page .play-related .poster-card-subtitle { display: block; font-size: 12px; line-height: 16px; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .play-page .play-related .poster-card-meta { display: flex; gap: 4px; font-size: 10px; line-height: 14px; }
    .play-page .play-related .poster-card-heat { font-size: 10px; line-height: 14px; }
}
/* Figma 44702:195260: one shared discussion panel for desktop and mobile. */
.play-page .play-comments { display: flex; padding: 0 0 24px; border: 0; border-radius: 0; margin: 0; gap: 24px; background: transparent; overflow: visible; }
.play-comments .detail-comments-head { position: absolute; top: 10px; right: 16px; height: 24px; }
.play-comments .detail-comments-title, .play-comments .detail-comments-head-gap { display: none; }
.play-comments .detail-comments-sort { height: auto; padding: 0; gap: 8px; background: none; border-radius: 0; }
.play-comments .detail-sort-btn { color: #888; font-size: 12px; line-height: 20px; }
.play-comments .detail-sort-btn--active { color: #f5f5f5; }
.play-comments .detail-comment-composer { align-items: flex-start; padding: 0; gap: 12px; border-radius: 0; background: none; overflow: visible; }
.play-comments .detail-comment-composer-avatar { width: 32px; height: 32px; border-radius: 50%; margin-top: 6px; }
.play-comments .detail-comment-composer-main { gap: 8px; overflow: visible; }
.play-comments .detail-comment-composer-input { height: auto; min-height: 44px; padding: 12px 16px; border-radius: 22px; background: #ffffff0d; color: #e6e6e6; font-size: 14px; line-height: 20px; overflow-y: hidden; }
.play-comments .detail-comment-composer-input::placeholder { color: #888; }
.play-comments .detail-comment-composer-input:focus { box-shadow: 0 0 0 1px var(--play-accent); }
.play-comments .detail-comment-composer-footer { display: none; height: auto; align-items: center; gap: 8px; overflow: visible; }
.play-comments .detail-comment-composer-main:focus-within .detail-comment-composer-footer,
.play-comments .detail-comment-composer-main:has(textarea:not(:placeholder-shown)) .detail-comment-composer-footer { display: flex; }
.play-comments .detail-comment-composer-status { gap: 0; }
.play-comments .detail-comment-composer-logged, .play-comments .detail-comment-composer-user { display: none; }
.play-comments .detail-comment-composer-count { color: #888; font-size: 12px; }
.play-comments .detail-comment-composer-submit,
.play-comments .detail-comment-inline-send { display: flex; align-items: center; justify-content: center; width: auto; min-width: 84px; height: 28px; padding: 0 12px; border: 0; border-radius: 14px; font-family: inherit; font-size: 12px; font-weight: 400; line-height: 18px; background: var(--play-accent); color: #fff; }
.play-comments .detail-comments-login { display: flex; width: 100%; height: 44px; min-height: 0; padding: 0; gap: 12px; border: 0; border-radius: 0; background: none; }
.play-comment-self-avatar { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; color: #888; background: #ffffff0d; font-size: 14px; line-height: 20px; }
.play-comments .detail-comments-login-link { display: flex; align-items: center; flex: 1; min-width: 0; height: 44px; box-sizing: border-box; padding: 12px 16px; border-radius: 22px; background: #ffffff0d; color: #888; font-size: 14px; line-height: 20px; text-decoration: none; }
.play-comments .detail-comment-list { display: flex; flex-direction: column; gap: 24px; max-height: 1526px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.play-comments .detail-comment { padding: 0; gap: 12px; border: 0; overflow: visible; flex-shrink: 0; }
.play-comments .detail-comment-avatar { width: 32px; height: 32px; border-radius: 50%; }
.play-comments .detail-comment-body { gap: 8px; }
.play-comments .detail-comment-name { color: #888; font-size: 14px; line-height: 20px; }
.play-comments .detail-comment-text { color: #e6e6e6; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.play-comments .detail-comment-meta { display: grid; grid-template-columns: max-content max-content; column-gap: 20px; row-gap: 8px; height: auto; overflow: visible; }
.play-comments .detail-comment-time { grid-column: 1 / -1; grid-row: 2; color: #888; font-size: 12px; line-height: 18px; }
.play-comments .detail-comment-like { position: relative; grid-column: 1; grid-row: 1; gap: 4px; color: #888; font-size: 12px; line-height: 18px; }
.play-comments .detail-comment-like img { width: 16px; height: 16px; opacity: 0; }
.play-comments .detail-comment-like:before { content: ''; position: absolute; left: 0; top: calc(50% - 8px); width: 16px; height: 16px; background: #fff; mask: url('/static/images/player/comment-like.svg') center / 16px no-repeat; }
.play-comments .detail-comment-like--active { color: var(--play-accent); }
.play-comments .detail-comment-like--active:before { background: var(--play-accent); }
.play-comments .detail-comment-reply-label { grid-column: 2; grid-row: 1; color: #888; font-size: 12px; line-height: 18px; }
.play-comments .detail-comment-replies { margin: 0; padding: 12px; gap: 12px; background: #ffffff0d; border-radius: 8px; }
.play-comments .detail-comment-reply-item { display: block; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.play-comments .detail-comment-reply-name, .play-comments .detail-comment-reply-text, .play-comments .detail-comment-reply-to { color: #999; }
.play-comments .detail-comment-replies-toggle { color: var(--play-accent); font-size: 12px; line-height: 18px; }
.play-comments .detail-comment-inline-composer { margin: 0; padding: 12px; border-radius: 8px; background: #ffffff0d; }
.play-comments .detail-comment-inline-input { min-height: 60px; border-radius: 8px; background: #1a1a1a; overflow-y: hidden; }
.play-comments .detail-comment-inline-input:focus { border-color: var(--play-accent); }
.play-comments .detail-comments-more { height: 36px; border-radius: 18px; font-size: 12px; background: #ffffff0d; color: #999; }
.play-comments .section-empty { width: 100%; min-height: 100px; box-sizing: border-box; font-size: 12px; color: #888; }
@media (max-width: 860px) {
    /* Override the legacy detail page's mobile-only hidden comment panel. */
    .play-page .play-comments { display: flex !important; }
    .play-comments .detail-comments-head { right: 0; }
    .play-comments .detail-comment-list { max-height: none; overflow: visible; }
    .play-selection > [role=tabpanel]:not([hidden]) { animation: play-panel-enter 180ms cubic-bezier(.16, 1, .3, 1); }
}
@keyframes play-panel-enter {
    from { opacity: .65; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .play-selection > [role=tabpanel] { animation: none; }
    .play-player .dplayer-notice-list .dplayer-notice { animation-duration: .01s; }
}
@media (max-width: 860px) {
    .play-page { width: auto; max-width: none; padding: 16px 16px 32px; }
    .is-play-page .play-page > .site-breadcrumb { display: flex; margin-bottom: 16px; }
    .play-layout { display: flex; flex-direction: column; gap: 16px; }
    .play-main, .play-sidebar { width: 100%; gap: 16px; }
    .play-player { border-radius: 12px; }
    .play-player-center { width: 36px; height: 36px; }
    .play-player .dplayer-controller { left: 12px; right: 12px; bottom: 12px; height: 34px; }
    .play-player .dplayer-controller-mask { height: 70px; }
    .play-player .dplayer-bar-wrap { height: 14px; padding: 6px 0; margin-bottom: 4px; }
    .play-player .dplayer-bar-wrap .dplayer-bar { height: 2px; }
    .play-player .dplayer-bar-wrap .dplayer-thumb { width: 6px !important; height: 6px !important; margin-top: -3px !important; }
    .play-player .dplayer-icons { gap: 10px; height: 16px !important; }
    .play-player .dplayer-controller .dplayer-icons.dplayer-icons-right { width: max-content; gap: 20px; }
    .play-player .dplayer-controller .dplayer-icons-right > :is(.dplayer-volume, .dplayer-setting, .dplayer-full) { display: flex; align-items: center; flex: none; width: 16px; min-width: 16px; }
    .play-player .dplayer-icon, .play-player .dplayer-icon svg, .play-player .dplayer-icon-content, .play-player .dplayer-volume-icon img, .drama-player-next { width: 16px !important; height: 16px !important; }
    .play-player .dplayer-icon { background-size: 16px; }
    .play-player .dplayer-time { font-size: 10px !important; line-height: 16px !important; }
    .play-player .dplayer-volume { height: 16px; }
    .play-player .dplayer-volume-bar-wrap { display: none !important; }
    .play-player .dplayer-setting-box { bottom: 24px; max-height: 125px; overflow-y: auto; }
    .play-next { right: 12px; bottom: 62px; }
    .play-player .dplayer-notice-list { left: 12px; bottom: 62px; max-width: calc(100% - 24px); }
    .play-next, .play-player .dplayer-notice-list .dplayer-notice { font-size: 11px; line-height: 16px; padding: 6px; }
    .play-info { padding: 0; border: 0; border-radius: 0; background: none; gap: 12px; }
    .play-info-title { font-size: 20px; line-height: 28px; }
    .play-title-row { column-gap: 8px; row-gap: 4px; }
    .play-type-badge, .play-vip-badge, .play-coin-badge { font-size: 10px; line-height: 16px; font-weight: 400; border-radius: 6px; }
    .play-type-badge { padding: 2px 8px; }
    .play-vip-badge, .play-coin-badge { padding: 3px 9px; border: 1px solid #ffe1201a; background: #ffe1201a; color: #ffe120; }
    .play-info-subtitle { flex-basis: 100%; margin: 0; font-weight: 400; }
    .play-metadata { padding: 0; gap: 8px; line-height: 18px; color: #999; font-weight: 400; }
    .play-metadata-dot { display: inline; }
    .play-year { color: inherit; }
    .play-update-status { color: var(--play-accent); }
    .play-info-actions { gap: 0; border: 1px solid #ffffff1a; border-radius: 12px; background: #1a1a1a; padding: 8px 0; }
    .play-action-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 4; gap: 0; padding: 0; background: none; }
    .play-action { flex-direction: column; gap: 4px; font-size: 14px !important; line-height: 20px; }
    .play-action + .play-action:before { display: none; }
    .play-action-icon { width: 24px; height: 24px; }
    .play-icon-share:after { mask-size: 13.333px; }
    .play-icon-collect:after { mask-size: 16px; }
    .play-download { flex: 1; flex-direction: column; padding: 0; gap: 4px; color: #f5f5f5; background: none; font-size: 14px !important; line-height: 20px; }
    .play-download-pc { display: none; }
    .play-download-h5 { display: inline; }
    .play-intro-section { padding-top: 8px; border: 0; gap: 8px; }
    .play-intro-heading, .play-tags-label { display: none; }
    .play-page .play-intro-more { grid-row: 2; grid-column: 2; gap: 0; font-weight: 400; }
    .play-intro-more[aria-expanded=false] img { transform: none; }
    .play-intro-more[aria-expanded=true] img { transform: rotate(180deg); }
    .play-intro { grid-row: 1; -webkit-line-clamp: 3; font-weight: 400; }
    .play-info-tags { grid-column: 1; grid-row: 2; gap: 4px; padding: 0; }
    .play-info-tags :is(a, span):not(.play-tags-label) { padding: 1px 8px 2.25px; border: 0; border-radius: 4px; font-size: 10px; line-height: 16px; font-weight: 400; }
    .play-page .drama-banner-ads { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .play-page .drama-banner-ads img { border-radius: 8px; }
    .play-page .drama-icon-ads { display: none; }
    .play-page .drama-icon-ads img { width: 100%; height: auto; aspect-ratio: 1; }
    .play-vip-promo { display: none; }
    .play-selection { padding: 0; }
    .play-related { padding: 16px 0; background: none; }
    .play-related h2:after { display: none; }
    .play-related h2:before { content: ''; width: 3px; height: 16px; background: var(--play-accent); }
    .play-related-grid { gap: 12px; }
    .play-page .play-related .poster-card-meta { flex-wrap: wrap; }
}

.playback-retry { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px 24px; border: 0; border-radius: 24px; color: #fff; background: var(--play-accent); }
.play-related-grid > .empty-state { grid-column: 1 / -1; width: 100%; min-height: 240px; padding: 24px 0; }
.play-related .empty-illus { width: 140px; height: auto; }
.play-related .empty-title { font-size: 16px; }
.play-related .empty-desc { font-size: 12px; }
.play-account-blocked{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;margin:0;padding:24px;background:#111;color:#ffc1b5;font-size:14px;line-height:1.6;text-align:center;}.play-account-blocked strong{font-size:16px;font-weight:500;}
.play-account-blocked[hidden]{display:none;}
.play-player.is-account-banned .play-preroll,.play-player.is-account-banned .play-gate,.play-player.is-account-banned .play-player-center,.play-player.is-account-banned .play-next{display:none!important;}