/* HeyDrama — home page styles. Layout follows the original site: no hero, poster rails start under the header. */
:root {
  --bg: #0B0A10;
  --surface: #16141D;
  --surface-2: #1E1B27;
  --line: #26232F;
  --text: #F6F3FA;
  --muted: #A39FB0;
  --accent: #FFB020;
  --accent-ink: #0B0A10;
  --free: #22C55E;
  --free-bg: rgba(34, 197, 94, .16);
  --radius: 16px;
  --pad: clamp(16px, 2.6vw, 40px);
  --header-h: 64px;
  --gap: 16px;
  --card-w: 180px;   /* fixed poster width: a wider screen shows more titles, not bigger posters */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` must always win. The browser's own [hidden]{display:none} loses to any author `display`, so an element
   like .dp-center (display:grid) stayed on screen after `center.hidden = true` -- the play button sat in the middle
   of a playing video. The original site never saw it: Tailwind's preflight carries this rule; this stylesheet replaced Tailwind. */
[hidden]:not([hidden="until-found"]) { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 28px;
  padding-inline: var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.logo { font-size: 24px; font-weight: 800; font-style: italic; letter-spacing: -.02em; white-space: nowrap; }
.logo b { color: var(--accent); font-weight: 800; }
.main-nav { display: flex; gap: 26px; }
.main-nav a { position: relative; white-space: nowrap; color: var(--muted); font-weight: 600; font-size: 15px; padding: 20px 0; }
.main-nav a:hover { color: var(--text); }
.main-nav a[aria-current="page"] { color: var(--text); }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 2px; border-radius: 2px; background: var(--accent);
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.search {
  display: flex; align-items: center; gap: 10px;
  width: min(420px, 26vw); height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.search:focus-within { border-color: var(--accent); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.search input::placeholder { color: var(--muted); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px;
  border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap;
}
.pill-ghost { border: 1px solid var(--line); color: var(--text); }
.pill-ghost:hover { border-color: var(--muted); }
.pill-accent { background: var(--accent); color: var(--accent-ink); }
.pill-accent:hover { filter: brightness(1.06); }
.icon-btn {
  display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
}
.icon-btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Genre chips ---------- */
.chips {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  padding: 10px var(--pad) 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 36px; display: inline-flex; align-items: center; padding: 0 16px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-weight: 600; font-size: 14px;
}
.chip:hover { color: var(--text); border-color: var(--muted); }

/* ---------- Rails ---------- */
main { padding-bottom: 24px; }
.rail { padding: 16px 0 4px; }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--pad); margin-bottom: 10px; }
.rail-title { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.rail-title::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: var(--accent); }
.see-all {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 13px;
}
.see-all:hover { color: var(--text); border-color: var(--accent); }
.see-all .icon { width: 16px; height: 16px; }
.rail-actions { display: flex; gap: 8px; flex: none; }
button.see-all { font-family: inherit; background: none; cursor: pointer; }
.see-all .label-short { display: none; }

.rail-body { position: relative; }
.rail-track {
  list-style: none; margin: 0; padding: 0 var(--pad);
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: var(--card-w);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad); scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > li { scroll-snap-align: start; }
.rail-btn {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(11, 10, 16, .85); color: var(--text); cursor: pointer;
  transition: opacity .15s;
}
.rail-btn:hover { border-color: var(--accent); }
.rail-btn.prev { left: calc(var(--pad) - 12px); }
.rail-btn.next { right: calc(var(--pad) - 12px); }
.rail-btn[disabled] { opacity: 0; pointer-events: none; }

/* ---------- Poster card ---------- */
.card { display: block; }
.card-media {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); isolation: isolate;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card-media::after {
  content: ""; position: absolute; inset: 45% 0 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(11, 10, 16, 0), rgba(11, 10, 16, .92));
}
.badge-free {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  /* dark base keeps the badge readable on bright posters */
  padding: 3px 8px; border-radius: 6px; background: rgba(11, 10, 16, .72); color: #4ADE80;
  border: 1px solid rgba(34, 197, 94, .55);
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.card-info { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; }
.card-title {
  margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.card-eps { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--accent); }
.card:hover .card-title { color: #fff; }

/* ---------- Popular grid ---------- */
.grid {
  list-style: none; margin: 0; padding: 0 var(--pad);
  display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 32px; padding: 28px var(--pad) 36px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  color: var(--muted); font-size: 14px;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer nav a:hover { color: var(--text); }
.site-footer .logo { font-size: 20px; color: var(--text); }

/* ---------- Bottom nav (phones) ---------- */
.bottom-nav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(11, 10, 16, .97); border-top: 1px solid var(--line);
  grid-template-columns: repeat(4, 1fr);
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.bottom-nav a[aria-current="page"] { color: var(--accent); }
.bottom-nav .icon { width: 22px; height: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1439px) {
  .pill-ghost span { display: none; }
  .pill-ghost { padding: 0 11px; }
}
@media (max-width: 1279px) {
  :root { --card-w: 176px; }
  .search { width: min(300px, 24vw); }
  .main-nav { gap: 20px; }
}
@media (max-width: 1023px) {
  .main-nav, .search, .pill { display: none; }
  .icon-btn { display: grid; }
}
@media (max-width: 1023px) {
  :root { --card-w: 160px; }
  .rail-btn { display: none; }
}
@media (max-width: 767px) {
  :root { --header-h: 58px; --gap: 12px; --radius: 14px; }
  .logo { font-size: 22px; }
  .rail { padding-top: 18px; }
  .rail-title { font-size: 19px; }
  .see-all { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .see-all .label { display: none; }
  .rail-track { --visible: 2.35; grid-auto-columns: calc((100% - (var(--visible) - 0.5) * var(--gap)) / var(--visible)); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-title { font-size: 13px; }
  .bottom-nav { display: grid; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .site-footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .card-media img, .rail-btn { transition: none; }
  .card:hover .card-media img { transform: none; }
}

/* =====================================================================
   Inner pages (detail, watch, hubs, rankings, explore, search, library, legal)
   ===================================================================== */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.page { padding-inline: var(--pad); }
.page.narrow { max-width: 880px; margin-inline: auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; padding: 20px 0 18px; }
.page-head h1 { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.02em; flex-basis: 100%; }
.page-head p { margin: 0; color: var(--muted); }
.chip[aria-current="page"], .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.chip { cursor: pointer; }

/* breadcrumb */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 18px 0 0; font-size: 13px; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current] { color: var(--text); }
.breadcrumb [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
@media (max-width: 639px) { .breadcrumb .m-hide { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: 15px; cursor: pointer; background: none; white-space: nowrap; }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.btn-google .g-logo { width: 20px; height: 20px; }
.btn[aria-pressed="true"], .round-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.btn[aria-pressed="true"] .icon, .round-btn[aria-pressed="true"] .icon { fill: currentColor; }
.btn.disabled { opacity: .35; pointer-events: none; }
.round-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; }
.round-btn:hover { border-color: var(--muted); }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font-weight: 700; cursor: pointer; }

/* detail */
.detail { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; padding: 20px 0 8px; }
.detail-poster img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); }
.detail-info h1 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; }
a.tag:hover { color: var(--text); border-color: var(--accent); }
.meta { margin: 12px 0 0; color: var(--muted); font-weight: 600; }
.synopsis h2 { margin: 20px 0 6px; font-size: 16px; font-weight: 800; }
.synopsis p { margin: 0; color: #D9D4E2; max-width: 75ch; line-height: 1.65; }
.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.open { display: block; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 14px; }
.ep-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.ep { position: relative; display: grid; place-items: center; height: 58px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 800; }
.ep small { position: absolute; right: 6px; bottom: 4px; font-size: 9px; font-weight: 800; color: #4ADE80; letter-spacing: .03em; }
.ep:hover { border-color: var(--muted); }
.ep[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ep[aria-current] small { color: var(--accent-ink); }

/* watch */
.watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; padding-top: 20px; }
.watch-main { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.player {
  position: relative; aspect-ratio: 9 / 16; height: min(calc(100vh - var(--header-h) - 40px), 780px); max-width: 100%;
  border-radius: var(--radius); overflow: hidden; background: #000 var(--poster) center / cover no-repeat;
}
.player::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, rgba(0,0,0,.75)); }
.player-big { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; z-index: 1; }
.player-big .icon { width: 32px; height: 32px; }
.player.playing .player-big { display: none; }
.player-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.pbtn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.pbtn:hover { background: rgba(255,255,255,.12); }
.progress { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width 8s linear; }
.player.playing .progress span { width: 35%; }
.time, .quality { font-size: 12px; font-weight: 700; white-space: nowrap; }
.quality { padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,.35); }
.watch-info { width: min(100%, 720px); }
.watch-info .breadcrumb ol { padding-top: 16px; }
.watch-info h1 { margin: 8px 0 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.01em; }
.watch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.watch-actions .spacer { flex: 1; }
.watch-side { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; padding: 4px 16px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.watch-side .section-head { margin: 12px 0; }
.watch-side .ep-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.watch-side .ep { height: 48px; }
.watch-synopsis { max-width: 980px; padding-top: 8px; }
.watch-synopsis h2 { margin: 26px 0 10px; font-size: 22px; }
/* "Before You Watch" panel (ui.js::beforeYouWatchHtml): trope labels are spans, not links */
.watch-extra .tags { margin-top: 14px; }
.watch-extra .tag { cursor: default; }
.watch-extra .extra-line { margin-top: 10px; color: var(--muted); max-width: 75ch; line-height: 1.6; }
.watch-extra .extra-line b { color: var(--text); font-weight: 700; }

/* hubs: pagination */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 28px 0 8px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; gap: 4px; min-width: 42px; height: 42px; padding: 0 12px; justify-content: center; border-radius: 12px; border: 1px solid var(--line); font-weight: 700; }
.pagination [aria-current] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pagination [aria-disabled="true"] { opacity: .35; }
.pagination .icon { width: 16px; height: 16px; }

/* rankings */
.tabs { display: flex; gap: 8px; }
.tabs button { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: none; font-weight: 700; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rank-row { display: grid; grid-template-columns: 56px 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.rank-no { font-size: 34px; font-weight: 800; font-style: italic; color: var(--accent); text-align: center; font-variant-numeric: tabular-nums; }
.rank-row:nth-child(n+4) .rank-no { color: var(--muted); }
.rank-thumb img, .hist-thumb img { width: 72px; height: 108px; object-fit: cover; border-radius: 10px; }
.rank-title { font-weight: 800; font-size: 16px; }
.rank-title:hover { color: var(--accent); }
.rank-info p { margin: 4px 0 0; font-size: 13px; }
.rank-desc { color: #CFC9DA; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* explore + search */
.filters { display: grid; gap: 12px; padding-bottom: 6px; }
.filter-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 12px; }
.filter-label { padding-top: 8px; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.result-count { margin: 10px 0 14px; font-size: 14px; }
.search-big { display: flex; align-items: center; gap: 12px; height: 56px; margin-top: 22px; padding: 0 8px 0 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.search-big:focus-within { border-color: var(--accent); }
.search-big input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 17px; }
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.search-title { margin: 26px 0 0; font-size: 24px; font-weight: 800; }

/* empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 16px; }
.empty-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--accent); }
.empty-icon .icon { width: 30px; height: 30px; }
.empty-state h2 { margin: 6px 0 0; font-size: 20px; }
.empty-state p { margin: 0 0 8px; color: var(--muted); max-width: 46ch; }

/* history */
.hist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hist-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.hist-info p { margin: 4px 0 8px; font-size: 13px; }
.bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; max-width: 320px; }
.bar span { display: block; height: 100%; background: var(--accent); }

/* account + sign in */
.profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 24px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.profile-card h1 { margin: 0; font-size: 22px; }
.profile-card p { margin: 4px 0 0; }
.avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.avatar .icon { width: 30px; height: 30px; }
.menu-list { list-style: none; margin: 18px 0 0; padding: 0; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.menu-list a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); font-weight: 600; }
.menu-list li:last-child a { border-bottom: 0; }
.menu-list a:hover { background: var(--surface); }
.menu-list span { flex: 1; }
.menu-list .chev { color: var(--muted); width: 18px; height: 18px; }
.auth { display: grid; place-items: center; min-height: calc(100vh - var(--header-h) - 160px); padding-block: 32px; }
.auth-card { width: min(100%, 420px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 36px 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.auth-card h1 { margin: 6px 0 0; font-size: 26px; }
.auth-card p { margin: 0; }
.auth-card .btn-google { width: 100%; margin-top: 8px; }
.fine { font-size: 12px; color: var(--muted); }
.fine a { text-decoration: underline; }

/* legal text */
.prose { padding-bottom: 24px; color: #D9D4E2; line-height: 1.7; max-width: 75ch; }
.prose h2 { margin: 28px 0 8px; font-size: 19px; color: var(--text); }
.prose p, .prose ul { margin: 0 0 12px; }
.prose ul { padding-left: 22px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong, .prose b { color: var(--text); }

.toast { position: fixed; left: 50%; bottom: 96px; translate: -50% 0; z-index: 90; padding: 10px 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 700; }

@media (max-width: 1023px) {
  .watch-layout { grid-template-columns: minmax(0, 1fr); }
  .watch-side { position: static; max-height: none; }
  .watch-side .ep-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
  .rank-row { grid-template-columns: 44px 64px minmax(0, 1fr); }
  .rank-row .btn { display: none; }
}
@media (max-width: 767px) {
  .detail { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .detail-info h1 { font-size: 22px; }
  .synopsis, .actions { grid-column: 1 / -1; }
  .detail-info { display: contents; }
  .detail-poster { grid-row: span 3; }
  .detail-info h1, .detail-info .tags, .detail-info .meta { grid-column: 2; }
  .actions .btn-primary { flex: 1 1 100%; }
  .ep-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
  .ep { height: 50px; }
  .player { height: auto; width: 100%; max-height: 78vh; }
  .watch-actions .btn { flex: 1; }
  .watch-actions .spacer { display: none; }
  .filter-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .filter-label { padding-top: 0; }
  .hist-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .hist-row .btn { display: none; }
  .rank-thumb img, .hist-thumb img { width: 64px; height: 96px; }
  .profile-card { grid-template-columns: auto minmax(0, 1fr); }
  .profile-card .btn { grid-column: 1 / -1; }
  .toast { bottom: 84px; }
}

/* rating (detail page + compact on the watch page) */
.rating { margin-top: 12px; }
.rating-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.stars { display: inline-flex; gap: 2px; }
.star { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .22); cursor: pointer; }
.star .icon { width: 22px; height: 22px; stroke-width: 1.5; }
.star.on { color: rgba(255, 176, 32, .65); }
.star.on .icon { fill: currentColor; }
.rating.mine .star.on { color: var(--accent); }
.rating-avg { font-size: 16px; }
.rating .muted.you { color: #4ADE80; font-weight: 700; }
.rating.compact { position: relative; margin: 0; display: flex; align-items: center; gap: 8px; }
.rate-open { width: auto; min-width: 44px; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; color: var(--accent); }
.rate-open .icon { fill: currentColor; }
.rate-open b { color: var(--text); font-size: 14px; }
.rating.compact .rating-row { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; white-space: nowrap; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.rating.compact .rating-row[hidden] { display: none; }
@media (max-width: 767px) {
  .detail .rating { grid-column: 1 / -1; }
  .rating.compact .rating-row { right: auto; left: 0; }
}

/* source collections: in the main nav on desktop, an underlined tab row under the header below 1024px */
.cat-tabs { display: none; }
.site-footer nav[aria-label="Browse"] a { color: var(--text); }
@media (max-width: 1023px) {
  .cat-tabs {
    display: flex; gap: 28px; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--line); background: var(--bg);
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tabs a { position: relative; flex: none; padding: 14px 0 12px; color: var(--muted); font-weight: 700; font-size: 16px; }
  .cat-tabs a[aria-current] { color: var(--text); }
  .cat-tabs a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px; background: var(--accent); }
  body.immersive .cat-tabs { display: none; }
}

/* ---------- Page container + side banners (original layout) ----------
   As on the original site, content stops at 1600px and is centred; the header and footer bands stay full width
   but their contents line up with the content column. The free space either side carries a 160×600
   banner, but only from 1800px, where the content column still fits 7 posters a row (original: 6).
   Measured: 1800-1990px shows 7 instead of 8 without banners; from 1952px the column is the full 1600. */
:root { --wrap: 1600px; --rail-w: 160px; }
.shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--wrap)) minmax(0, 1fr); }
.shell > main { grid-column: 2; grid-row: 1; min-width: 0; }
.site-header, .site-footer { padding-inline: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad))); }
.ad-rail { display: none; }
.ad-rail[hidden] { display: none !important; }
@media (min-width: 1800px) {
  /* side column = banner + 16px to the window edge; the content column takes what is left, up to 1600 */
  .shell { grid-template-columns: minmax(calc(var(--rail-w) + 16px), 1fr) minmax(0, var(--wrap)) minmax(calc(var(--rail-w) + 16px), 1fr); }
  .site-header, .site-footer { padding-inline: calc((100% - min(var(--wrap), 100% - 2 * (var(--rail-w) + 16px))) / 2 + var(--pad)); }
  .ad-rail {
    grid-row: 1; align-self: start; position: sticky; top: calc(var(--header-h) + 16px);
    width: var(--rail-w); height: 600px; margin-top: 16px;
    display: grid; place-content: center; gap: 4px; text-align: center;
    border: 1px dashed #3A3646; border-radius: 10px; color: #8A859A; font-size: 12px; font-weight: 600;
    background: repeating-linear-gradient(45deg, #110F17 0 10px, #14121B 10px 20px);
  }
  .ad-rail span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .ad-left { grid-column: 1; justify-self: end; }
  .ad-right { grid-column: 3; justify-self: start; }
}

/* ---------- Signed in / signed out ----------
   Every element that exists in only one state carries .signed-in or .signed-out. The mockup keeps the state in
   localStorage (set before first paint by the inline script in <head>); the real site takes it from the session. */
html:not([data-auth="in"]) .signed-in, html[data-auth="in"] .signed-out { display: none !important; }
.account { position: relative; }
.avatar-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 800 16px/1 var(--font);
  position: relative; overflow: hidden;
}
/* The initial stays underneath as the fallback (the img removes itself on error); a loaded Google picture covers it
   exactly. Without this the grid stacked the two and the picture spilled out at its own size. */
.avatar-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.acc-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 240px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.acc-menu[hidden] { display: none; }
.acc-who { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.acc-who span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-menu a, .acc-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 0; background: none;
  color: var(--text); font: 600 14px/1.3 var(--font); text-align: left; cursor: pointer;
}
.acc-menu button { border-top: 1px solid var(--line); }
.acc-menu a:hover, .acc-menu button:hover { background: rgba(255, 255, 255, .05); }
.acc-menu .icon { width: 18px; height: 18px; color: var(--muted); }
.profile-card .h1-like { margin: 0; font-size: 22px; font-weight: 800; }

/* =====================================================================================================
   SPA additions (heydrama-web). Everything above is the approved mockup's stylesheet, unchanged; the SPA
   builds the same markup. Below: pieces only a live app has (loading states, sign-in dialog, search
   suggestions, load-more), drawn in the same tokens.
   ===================================================================================================== */
@keyframes hd-spin { to { transform: rotate(360deg); } }
@keyframes hd-pulse { 50% { opacity: .45; } }
@keyframes hd-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fadein { animation: hd-in .22s ease both; }
@media (prefers-reduced-motion: reduce) { .fadein { animation: none; } }

.spinner { display: flex; justify-content: center; padding: 80px 0; }
.spinner::after, .loader { content: ""; display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: hd-spin .8s linear infinite; }
.loader { width: 24px; height: 24px; margin: 0 auto; }
.skel { border-radius: var(--radius); background: var(--surface); animation: hd-pulse 1.4s ease-in-out infinite; }
.skel-card { aspect-ratio: 2 / 3; }
.skel-line { height: 12px; border-radius: 6px; }

/* load more: a sentinel under grids, a dashed card at the end of a rail */
.more-wrap { display: flex; justify-content: center; padding: 22px 0; }
.rail-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%;
  aspect-ratio: 2 / 3; border-radius: var(--radius); border: 1px dashed var(--line); background: none; color: var(--muted);
  font: 600 13px var(--font); cursor: pointer; }
.rail-more:hover { color: var(--text); border-color: var(--accent); }
.rail-track > .rail-sentinel { width: 1px; }

/* header search suggestions */
.search { position: relative; }
.sg-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.sg-list { max-height: 62vh; overflow-y: auto; padding: 4px 0; }
.sg-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0;
  border-left: 2px solid transparent; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.sg-row:hover, .sg-row.active { background: rgba(255, 176, 32, .08); border-left-color: var(--accent); }
.sg-thumb { flex: none; width: 40px; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: var(--surface); }
.sg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-text { min-width: 0; }
.sg-name { font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-name mark { background: none; color: var(--accent); }
.sg-meta { font-size: 12px; color: var(--muted); }
.sg-all { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.sg-all:hover { color: var(--text); }
.sg-all .icon { width: 16px; height: 16px; }

/* sign-in dialog */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
.modal-panel { position: relative; width: min(380px, 100%); padding: 28px 24px 22px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; }
.modal-panel h2 { margin: 0; font-size: 22px; font-weight: 800; }
.modal-panel p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.modal-panel .btn { width: 100%; justify-content: center; margin-top: 12px; }
.modal-panel .fine { font-size: 12px; }
.modal-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.modal-x:hover { color: var(--text); background: var(--surface); }
.btn-facebook { background: #1877F2; color: #fff; border-color: #1877F2; }
@media (max-width: 767px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal-panel { width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
}

/* the ad-contact strip (adcontact.js), the same tokens as the header */
#adcontact .adc-band { border-bottom: 1px solid var(--line); background: var(--surface); }
#adcontact .adc { display: flex; align-items: center; gap: 10px; max-width: var(--wrap); margin: 0 auto; padding: 8px var(--pad);
  font-size: 13px; color: var(--muted); }
#adcontact .adc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
#adcontact .adc-mail { color: var(--accent); font-weight: 700; }
#adcontact .adc-go { margin-left: auto; }
#adcontact .adc-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }

/* ---------- SPA shell ---------- */
/* The chrome mounts are wrappers only: without display:contents the sticky header would stick inside a div of its
   own height (i.e. not at all) and the bottom nav would sit in a zero-size box. */
#chrome-top, #chrome-bottom { display: contents; }
.splash { min-height: 60vh; display: grid; place-content: center; gap: 16px; text-align: center; }
/* A real banner fills the rail; the dashed placeholder look of the mockup stays in the mockup. */
.ad-rail.filled { border: 0; background: none; display: block; height: auto; min-height: 600px; }

/* ---------- THEOplayer chrome (.dp-*), ported from the original index.html, HeyDrama tokens ---------- */
/* -- THEOplayer chrome (.dp-) -- accent colour -- */
:root { --dp-accent: var(--accent); }
.dp { position:relative; width:100%; height:100%; background:#000; overflow:hidden; user-select:none; }
.dp-mount { position:absolute; inset:0; }
.dp-mount > video { width:100%; height:100%; object-fit:contain; }
.dp-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12); backdrop-filter:blur(4px); display:grid; place-items:center; cursor:pointer; z-index:10; }
.dp-center:hover { background:rgba(255,255,255,.2); }
.dp-spin { position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.2); border-top-color:var(--dp-accent); border-radius:50%; animation:dpspin 1s linear infinite; z-index:10; }
@keyframes dpspin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.dp-err { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,.75); color:#ff9a9a; padding:10px 16px; border-radius:8px; font-size:13px; max-width:80%; text-align:center; z-index:12; }
.dp-bar { position:absolute; inset-inline:0; bottom:0; padding:28px 14px 12px; background:linear-gradient(transparent, rgba(0,0,0,.82)); transition:opacity .2s; z-index:11; }
/* Ad overlay. While an ad runs the site's own bar is hidden: the seek bar must not let anyone scrub
   past an ad, and the episode buttons must not be reachable by mistake. */
/* Only the BAR is hidden during an ad (no scrubbing past it, no mis-tapping "next episode").
   The centre play button stays: if the ad ends up paused -- the network's click-through pauses it --
   it is the only way back, and hiding it strands the viewer with a frozen frame. */
.dp.dp-ad-on .dp-bar { display:none; }
.dp-ad { position:absolute; inset:0; pointer-events:none; z-index:13; }
.dp-ad > * { pointer-events:auto; }
.dp-ad-badge { position:absolute; top:12px; inset-inline-start:12px; display:flex; gap:8px; align-items:center;
  background:rgba(11,10,16,.82); border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:5px 9px; }
.dp-ad-badge b { font:600 13px/1 system-ui; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.dp-ad-badge span { font:500 16px/1 system-ui; color:var(--text); font-variant-numeric:tabular-nums; }
/* The call-to-action and the skip button share one line at the bottom of the frame, so they are laid
   out as one flex row rather than as two absolutely-positioned elements.
   Both were doubled in size at the project owner's request, and that is what forced the change: the
   button is now 210px wide in Vietnamese, 264px in German and over 300px in Bulgarian, while the
   portrait player is only 461px across on a desktop. Absolute positioning cannot see a sibling's
   width, so reserving room for the button with a fixed `max-width` was tried and measured -- it still
   overlapped in Bulgarian by 30px, and since the button paints later the text simply vanished beneath
   it. A flex row cannot overlap by construction: the button never shrinks, the link takes what is left
   and ellipsises. Verified across all 25 translations at 375px, 461px and 1190px. */
.dp-ad-row { position:absolute; bottom:max(16px, env(safe-area-inset-bottom));
  inset-inline-start:12px; inset-inline-end:max(16px, env(safe-area-inset-right));
  display:flex; align-items:center; gap:12px; pointer-events:none; }
/* The row spans the full width, so it must not swallow clicks on the video; only its children take them.
   (.dp-ad > * gives pointer-events to direct children, and the row is now the direct child.) */
.dp-ad-row > * { pointer-events:auto; }
.dp-ad-cta { flex:0 1 auto; min-width:0; font:400 24px/1.2 system-ui; color:var(--muted);
  text-decoration:none; border-bottom:1px solid #3a3450;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* margin auto, not justify-content:space-between: the link is hidden whenever the VAST carries no
   click-through, and space-between would then park the button on the LEFT. */
/* Twice the original size. Checked on beta that the earlier 1.5x really was applied (48px tall) --
   it simply still read small against a full-width player, which is what the project owner saw. This
   is the one control a viewer reaches for while an ad runs, so it is deliberately the loudest thing
   on the frame: heavier weight and a more opaque plate, not just bigger text. */
.dp-ad-skip { flex:0 0 auto; margin-inline-start:auto;
  background:rgba(11,10,16,.9); border:1px solid rgba(255,255,255,.3); color:var(--text); border-radius:10px;
  padding:16px 28px; font:600 24px/1 system-ui; cursor:pointer; }
.dp-ad-skip:disabled { opacity:.55; cursor:default; }
/* A phone in portrait gives the player about 210px of height; a 60px button would eat a third of it. */
@media (max-width: 520px) {
  .dp-ad-skip { padding:12px 18px; font:600 18px/1 system-ui; }
  .dp-ad-cta { font-size:18px; }
  .dp-ad-badge span { font:500 14px/1 system-ui; }
}
.dp-ad-bar { position:absolute; inset-inline:0; bottom:0; height:3px; background:rgba(255,255,255,.10); }
.dp-ad-bar > div { height:100%; width:0; background:var(--accent); transition:width .2s linear; }
.dp-bar.hide { opacity:0; }
.dp-seek { position:relative; height:6px; border-radius:999px; background:rgba(255,255,255,.25); cursor:pointer; margin-bottom:10px; }
.dp-buf { position:absolute; inset-block:0; left:0; width:0; border-radius:999px; background:rgba(255,255,255,.3); }
.dp-prog { position:absolute; inset-block:0; left:0; width:0; border-radius:999px; background:var(--dp-accent); }
.dp-ctl { display:flex; align-items:center; gap:12px; color:#fff; }
.dp-ctl button { background:none; border:0; color:#fff; cursor:pointer; padding:4px; display:grid; place-items:center; border-radius:6px; }
.dp-ctl button:hover { background:rgba(255,255,255,.15); }
.dp-time { font-family:var(--font); font-size:12px; opacity:.9; }
/* volume: the slider slides out on hover/focus (as in the player-desktop mockup) */
.dp-vol { display:flex; align-items:center; gap:2px; }
.dp-vol input[type=range] { -webkit-appearance:none; appearance:none; background:transparent;
  width:0; opacity:0; margin:0; padding:0; cursor:pointer; transition:width .18s ease, opacity .18s ease; }
.dp-vol:hover input[type=range], .dp-vol input[type=range]:focus-visible { width:80px; opacity:1; margin-inline-end:6px; }
.dp-vol input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:999px;
  background:linear-gradient(to right, var(--dp-accent) var(--fill,100%), rgba(255,255,255,.3) var(--fill,100%)); }
.dp-vol input[type=range]::-moz-range-track { height:4px; border-radius:999px; background:rgba(255,255,255,.3); }
.dp-vol input[type=range]::-moz-range-progress { height:4px; border-radius:999px; background:var(--dp-accent); }
.dp-vol input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%; background:#fff; margin-top:-4px; }
.dp-vol input[type=range]::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:#fff; }
/* touch devices: volume is controlled by the OS hardware keys and video.volume is locked -> keep only the mute toggle */
@media (hover:none) { .dp-vol input[type=range] { display:none; } }
.dp-right { margin-left:auto; display:flex; align-items:center; gap:6px; position:relative; }
.dp-menu { position:absolute; bottom:38px; right:0; min-width:120px; background:rgba(0,0,0,.92); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:5px; max-height:260px; overflow-y:auto; }
.dp-menu button { display:block; width:100%; text-align:left; padding:7px 12px; font-size:12.5px; border-radius:6px; color:#fff; background:none; border:0; cursor:pointer; }
.dp-menu button:hover { background:rgba(255,255,255,.12); }
.dp-menu button.on { color:var(--dp-accent); }
.dp-q { font-size:12px; font-weight:700; padding:5px 9px !important; }
/* Soft subtitles: the self-hosted THEOplayer renders the "bottom" cue region at the TOP of the video by mistake (hidden behind the header).
   Anchor the cue region to the bottom, above the control bar. Applies to both reelshort (manifest) and netshort (VTT). */
.dp-mount .theoplayer-texttracks { bottom:64px !important; }
.dp-mount .theoplayer-webvtt-region-bottom,
.dp-mount .theoplayer-webvtt-region-default { top:auto !important; bottom:max(104px,13%) !important; height:auto !important; }

/* ---------- watch page: the real player inside the design's .player frame ---------- */
.player .dp-host { position: absolute; inset: 0; z-index: 1; }
.player.landscape { height: auto; width: 100%; }
.player-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px; pointer-events: none; }
.player-back { display: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(11, 10, 16, .6); pointer-events: auto; }
.player:has(.dp-ad-on) .player-top { display: none; }
.player-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
button.ep { width: 100%; padding: 0; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
button.ep .ep-lock { position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; opacity: .55; }
.ep-range { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
.ep-range .chip { flex: none; }
.btn:disabled { opacity: .35; pointer-events: none; }
@media (max-width: 767px) {
  .player-back { display: grid; }
  .watch-page { padding-inline: 0; }
  .watch-page .watch-info, .watch-page .watch-side, .watch-page .watch-synopsis { margin-inline: var(--pad); }
  .watch-page .watch-info { width: auto; }
  .watch-page .player { border-radius: 0; }
}
.pagination .pg-gap { border: 0; min-width: 0; padding: 0 2px; color: var(--muted); }