/* ===== Custom video player (Yomikaze TV) ===== */
.player-page { max-width: var(--maxw); margin: 0 auto; position: relative; }
.player-body { display: flex; gap: 18px; align-items: flex-start; }

/* Ambient glow — the show's own backdrop, blurred out far behind the page so the
   watch screen carries the series' colours instead of sitting on flat black. It is
   purely decorative and never intercepts a click. */
.pv-ambient {
  position: fixed; inset: -12vh -12vw auto; height: 78vh; z-index: -1;
  background-size: cover; background-position: center 22%;
  filter: blur(70px) saturate(1.25); opacity: 0;
  transform: scale(1.08); pointer-events: none;
  transition: opacity 0.9s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
}
.pv-ambient.on { opacity: 0.34; }
@media (prefers-reduced-motion: reduce) { .pv-ambient { transition: none; } }

.player-boot { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #000; border-radius: var(--radius); }

/* ---- stage ---- */
.pv-stage {
  position: relative; flex: 1 1 auto; min-width: 0;
  aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--radius); overflow: hidden;
  /* A tinted halo instead of a plain drop shadow — it picks the video out of the dark
     page and ties the stage to the ambient glow behind it. */
  box-shadow: 0 24px 70px -18px rgba(0,0,0,0.9), 0 0 0 1px var(--border-soft),
              0 0 90px -40px var(--accent);
  user-select: none;
}
.pv-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

/* Subtitles are drawn by the browser itself, so they are styled here rather than in
   markup. Only the handful of properties ::cue accepts are allowed — a plate behind
   the text plus a shadow keeps it readable over a bright scene. Their position is set
   in player.js (cue.line), because CSS cannot move them clear of the control bar. */
.pv-video::cue {
  background: rgba(8, 8, 14, 0.72);
  color: #fff;
  font-size: 1.05em;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.pv-stage:fullscreen { border-radius: 0; }
.pv-stage:fullscreen .pv-video { height: 100vh; }
.pv-stage.pv-idle { cursor: none; }

/* ---- overlay (pass-through except its controls) ---- */
.pv-overlay { position: absolute; inset: 0; pointer-events: none; }
.pv-overlay::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 22%),
    linear-gradient(to top, rgba(0,0,0,0.78), transparent 34%);
  opacity: 1; transition: opacity 0.3s;
}
.pv-stage.pv-idle .pv-overlay::before { opacity: 0; }

.pv-top, .pv-controls, .pv-skip, .pv-bigplay, .pv-settings { pointer-events: auto; }
.pv-stage.pv-idle .pv-top,
.pv-stage.pv-idle .pv-controls { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* ---- top bar ---- */
.pv-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; transition: opacity 0.3s, transform 0.3s var(--ease);
}
.pv-titlebar { color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 1px 6px rgba(0,0,0,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- center: big play + buffering ---- */
.pv-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pv-bigplay {
  width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(10,10,16,0.5); backdrop-filter: blur(6px);
  color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: transform 0.2s var(--ease), background 0.2s, opacity 0.2s;
}
.pv-bigplay svg { width: 34px; height: 34px; margin-left: 4px; }
.pv-bigplay:hover { transform: scale(1.08); background: var(--accent); }
.pv-bigplay[hidden] { display: none; }

.pv-spin { width: 54px; height: 54px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.18); border-top-color: #fff; animation: pv-rot 0.8s linear infinite; }
.pv-buffering { position: absolute; }
.pv-buffering[hidden] { display: none; }
@keyframes pv-rot { to { transform: rotate(360deg); } }

/* ---- skip intro/outro ---- */
.pv-skip {
  position: absolute; right: 20px; bottom: 92px;
  padding: 11px 20px; border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(20,20,28,0.9); color: #fff; font-weight: 700; font-size: 14px;
  border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(6px);
  transition: background 0.15s, transform 0.15s;
}
.pv-skip:hover { background: var(--accent); transform: translateY(-1px); }

/* ---- next episode, offered over the closing credits ---- */
.pv-upnext {
  position: absolute; right: 20px; bottom: 92px; z-index: 4;
  display: flex; gap: 12px; align-items: center;
  width: min(390px, calc(100% - 40px)); padding: 12px;
  border-radius: var(--radius); background: rgba(14,14,22,0.92); backdrop-filter: blur(14px);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  animation: upnext-in 0.25s var(--ease) both;
}
.pv-upnext[hidden] { display: none; }
@keyframes upnext-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pv-upnext-thumb { flex: 0 0 auto; width: 96px; aspect-ratio: 16/9; border-radius: var(--radius-xs); overflow: hidden; background: var(--surface-3); }
.pv-upnext-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-upnext-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pv-upnext-kicker { color: var(--faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
.pv-upnext-kicker b { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.pv-upnext-title {
  color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-upnext-actions { display: flex; gap: 8px; margin-top: 6px; }
.pv-upnext-go, .pv-upnext-cancel {
  padding: 7px 14px; border-radius: var(--radius-xs); cursor: pointer;
  font-size: 12.5px; font-weight: 700; border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pv-upnext-go { background: var(--accent); border-color: var(--accent); color: #fff; }
.pv-upnext-go:hover { filter: brightness(1.12); }
.pv-upnext-cancel { background: transparent; color: var(--muted); }
.pv-upnext-cancel:hover { color: var(--text); border-color: var(--accent); }

/* ---- controls ---- */
.pv-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px;
  transition: opacity 0.3s, transform 0.3s var(--ease);
}
.pv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-left, .pv-right { display: flex; align-items: center; gap: 2px; }

.pv-icon {
  width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-grid; place-items: center;
  background: transparent; color: #fff;
  transition: background 0.15s, color 0.15s, transform 0.12s var(--ease);
}
.pv-icon svg { width: 23px; height: 23px; }
.pv-icon:hover { background: rgba(255,255,255,0.14); }
.pv-icon:active { transform: scale(0.92); }
.pv-icon:disabled { opacity: 0.35; cursor: default; }
.pv-icon.active { color: var(--accent-2); }

.pv-time { color: #e7e8f0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 6px; white-space: nowrap; }

/* volume */
.pv-volwrap { display: flex; align-items: center; }
.pv-vol {
  width: 0; opacity: 0; height: 4px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.3); border-radius: 999px;
  transition: width 0.22s var(--ease), opacity 0.22s;
}
.pv-volwrap:hover .pv-vol { width: 78px; opacity: 1; margin: 0 6px 0 2px; }
.pv-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; cursor: pointer; }
.pv-vol::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; }

/* seek bar */
.pv-seek { position: relative; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.22); cursor: pointer; touch-action: none; }
.pv-seek:hover { height: 7px; }
.pv-buffered { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,0.32); border-radius: 999px; }
.pv-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent-grad); border-radius: 999px; }
.pv-thumb { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(0); box-shadow: 0 2px 8px rgba(0,0,0,0.5); transition: transform 0.15s var(--ease); }
.pv-seek:hover .pv-thumb { transform: translate(-50%, -50%) scale(1); }
.pv-seektip {
  position: absolute; bottom: 16px; transform: translateX(-50%);
  padding: 3px 8px; border-radius: var(--radius-xs); background: rgba(10,10,16,0.92);
  color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
}
.pv-seektip[hidden] { display: none; }

/* settings panel */
.pv-settings {
  position: absolute; right: 14px; bottom: 74px; z-index: 5;
  width: min(300px, 80vw); max-height: 60%; overflow-y: auto;
  padding: 12px; border-radius: var(--radius);
  background: rgba(16,16,24,0.94); backdrop-filter: blur(16px);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.pv-settings[hidden] { display: none; }
.pv-set-group { margin-bottom: 12px; }
.pv-set-group:last-child { margin-bottom: 0; }
.pv-set-label { color: var(--faint); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.pv-set-opt {
  display: inline-flex; margin: 0 6px 6px 0; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  font-size: 13px; font-weight: 600; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pv-set-opt:hover { color: #fff; border-color: var(--accent); }
.pv-set-opt.active { color: #fff; background: var(--accent-soft); border-color: var(--accent); }

/* ---- episode aside ---- */
.pv-aside {
  flex: 0 0 340px; align-self: stretch;
  max-height: min(78vh, 720px);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.pv-aside-head {
  position: relative;
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  font-weight: 800; letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent);
}
/* Accent hairline capping the panel — the one strong colour note in the sidebar. */
.pv-aside-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent-grad);
}
/* Episode count, so the length of a show is readable without scrolling the list. */
.pv-aside-count {
  margin-left: auto; padding: 2px 9px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--border);
  color: var(--accent-2); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.pv-aside-close { display: none; }
.pv-aside-controls { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--border-soft); }
/* The server row needs its label above the pills — seven of them never fit beside it. */
.pv-aside-controls .ep-tool-col { flex-direction: column; align-items: stretch; gap: 6px; }

/* Streaming-server picker (Neko / Pewe / NoSub / Zone / BD / Senshi / KAA) — same
   pill look as the Sub/Dub tabs. */
.pv-servers { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-server {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-weight: 600; font-size: 0.82rem; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pv-server:hover { color: var(--text); border-color: var(--accent); }
.pv-server.active { color: #fff; background: var(--accent-soft); border-color: var(--accent); }
.pv-server-hint { color: var(--faint); font-size: 0.76rem; line-height: 1.45; margin: 0; }

/* Episode filter + 100-episode jump buttons — a thousand-episode show is unusable
   without them. */
.pv-ep-search {
  width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px; padding: 9px 12px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pv-ep-search::placeholder { color: var(--faint); }
.pv-ep-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pv-ep-ranges { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-ep-ranges[hidden] { display: none; }
.pv-range {
  padding: 5px 10px; border-radius: var(--radius-xs); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pv-range:hover { color: var(--text); border-color: var(--accent); }
.pv-range.active { color: #fff; background: var(--accent-soft); border-color: var(--accent); }

/* min-height:0 lets this actually scroll inside the aside's flex column instead of
   growing past it. */
.pv-eplist { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.pv-ep {
  /* Rows must keep their own height. As plain flex children they shrink to fit the
     list, and past a dozen episodes that squashed each row until the title spilled
     over the row below it. */
  flex: 0 0 auto;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s var(--ease);
}
.pv-ep:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); }
.pv-ep.current {
  background: linear-gradient(90deg, var(--accent-soft), transparent 88%);
  color: #fff; border-color: var(--accent);
}
/* A solid bar on the playing row, so the current episode is obvious at a glance even
   when the list is scrolled past it. */
.pv-ep.current::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-grad);
}
.pv-ep-thumb {
  flex: 0 0 auto; width: 100px; aspect-ratio: 16/9; border-radius: var(--radius-xs); overflow: hidden;
  background: var(--surface-3); position: relative;
}
.pv-ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); }
.pv-ep:hover .pv-ep-thumb img { transform: scale(1.07); }
/* A play mark washes over the thumbnail on hover, so a row reads as "start this"
   rather than as a list entry. */
.pv-ep-thumb::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: rgba(6,6,12,0.5) center / 24px no-repeat
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  transition: opacity 0.18s;
}
.pv-ep:hover .pv-ep-thumb::after { opacity: 1; }
.pv-ep.current .pv-ep-thumb { box-shadow: 0 0 0 2px var(--accent); }
.pv-ep-thumb-empty { display: grid; place-items: center; color: var(--faint); }
.pv-ep-thumb-empty svg { width: 22px; height: 22px; }
/* Episode number on the thumbnail — a filtered or jumped-to list is much easier to
   scan when the number is on the image rather than only in the text beside it. */
.pv-ep-num {
  position: absolute; left: 4px; bottom: 4px;
  padding: 1px 6px; border-radius: var(--radius-xs);
  background: rgba(8,8,14,0.78); color: #fff;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.pv-ep.current .pv-ep-num { background: var(--accent); }
.pv-ep-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv-ep-no { font-size: 13px; font-weight: 700; }
.pv-ep-name { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-ep.current .pv-ep-name { color: rgba(255,255,255,0.72); }
.pv-ep-badge { flex: 0 0 auto; color: var(--accent-2); }
.pv-ep-badge svg { width: 16px; height: 16px; }

/* ---- below the player ---- */
.pv-below {
  margin-top: 18px; padding: 18px 20px;
  display: flex; align-items: flex-start; gap: 24px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.pv-below-main { flex: 1 1 auto; min-width: 0; }
.pv-below-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.pv-linkbtn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 9px 15px; border-radius: var(--radius-sm); white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: 13.5px; font-weight: 700;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pv-linkbtn svg { width: 17px; height: 17px; }
.pv-linkbtn:hover { background: var(--surface-3); border-color: var(--accent); }
.pv-anilist svg { width: 19px; height: 14px; color: #02a9ff; }
.pv-anilist:hover { background: rgba(2,169,255,0.14); border-color: rgba(2,169,255,0.45); }

/* Format / year / episode count / score, then the genres and the synopsis — all of it
   already loaded for the player, so the band under the video is no longer empty. */
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 12.5px; font-weight: 700;
}
.pv-chip.airing { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pv-chip-score b { color: var(--text); }
.pv-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pv-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pv-genre {
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: transparent; border: 1px solid var(--border-soft); color: var(--faint);
  transition: color 0.15s, border-color 0.15s;
}
.pv-genre:hover { color: var(--text); border-color: var(--accent); }
.pv-desc {
  margin: 12px 0 0; max-width: 78ch;
  color: var(--muted); font-size: 14px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.pv-anime-title { font-size: clamp(20px, 3vw, 28px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
.pv-anime-title a { color: var(--text); }
.pv-anime-title a:hover { color: var(--accent-2); }
/* Artwork logo replaces the text title here too (same as the info page). */
.pv-anime-title.has-logo .pv-anime-title-txt { display: none; }
.pv-anime-title.has-logo .hero-logo {
  display: block; width: auto; height: auto;
  max-width: min(340px, 62vw); max-height: 96px;
  object-fit: contain; object-position: left bottom;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
}
.pv-anime-title.has-logo .hero-season { margin-top: 4px; }
.pv-aside-season { color: var(--accent-2); font-weight: 800; }
.pv-ep-caption { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; }
/* "3 / 12" — how far into the show this episode is. */
.pv-ep-of {
  padding: 1px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--faint); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* thin scrollbar for episode list */
.pv-eplist::-webkit-scrollbar, .pv-settings::-webkit-scrollbar { width: 8px; }
.pv-eplist::-webkit-scrollbar-thumb, .pv-settings::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
.pv-eplist:hover::-webkit-scrollbar-thumb { background: var(--accent); }

/* ---- responsive ---- */
.pv-only-narrow { display: none; }
@media (max-width: 1040px) {
  /* Stack it cleanly: video → title → episode list INLINE below (no off-screen
     drawer, no wasted empty space). display:contents lets us reorder across the
     .player-body wrapper so the title sits right under the video. */
  .player-page { display: flex; flex-direction: column; }
  .player-body { display: contents; }
  .pv-stage { order: 1; }
  /* Side-by-side no longer fits — the links go under the text. */
  .pv-below { order: 2; margin-top: 14px; flex-direction: column; gap: 14px; padding: 16px; }
  .pv-below-side { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .pv-linkbtn { flex: 1 1 140px; }
  .pv-aside {
    order: 3; flex: none; width: 100%; align-self: stretch;
    max-height: none; margin-top: 16px;
  }
  .pv-eplist { max-height: 62vh; }
}
@media (max-width: 560px) {
  .pv-icon { width: 38px; height: 38px; }
  .pv-icon svg { width: 21px; height: 21px; }
  .pv-time { font-size: 12px; margin-left: 2px; }
  .pv-titlebar { font-size: 13px; }
  .pv-controls { padding: 0 8px 10px; }
  /* The bar must never overflow, or the last button (fullscreen) gets pushed
     off-screen and becomes unreachable. */
  .pv-row { gap: 4px; flex-wrap: nowrap; }
  .pv-left, .pv-right { gap: 0; min-width: 0; }
  .pv-right { flex: 0 0 auto; }
  /* Drop what doesn't fit / doesn't work on phones:
     ±10s (double-tap the left/right of the picture instead — see player.js), the volume
     slider (iOS controls volume with the hardware buttons and ignores video.volume), and
     picture-in-picture. */
  .pv-controls .pv-left .pv-icon:nth-child(2),
  .pv-controls .pv-left .pv-icon:nth-child(3),
  .pv-volwrap,
  .pv-pip { display: none; }
  .pv-eplist { max-height: 58vh; }
  .pv-ep-thumb { width: 76px; }
  .pv-below { padding: 14px; }
  .pv-desc { -webkit-line-clamp: 4; font-size: 13.5px; }
  .pv-ambient { height: 52vh; filter: blur(52px) saturate(1.2); }
  /* Roomier taps on a phone: the genre links and server pills were under 30px tall. */
  .pv-genre { padding: 8px 13px; }
  .pv-server { padding: 9px 15px; }
  .pv-range { padding: 8px 12px; }
  .pv-bigplay { width: 64px; height: 64px; }
  .pv-bigplay svg { width: 28px; height: 28px; }
  .pv-skip { right: 12px; bottom: 80px; padding: 10px 16px; font-size: 13px; }
  .pv-upnext { right: 10px; left: 10px; bottom: 78px; width: auto; padding: 10px; gap: 10px; }
  .pv-upnext-thumb { width: 78px; }
  .pv-upnext-title { font-size: 12.5px; }
}

/* Double-tap seek feedback ("+10s" / "−10s") on the side that was tapped. */
.pv-seekflash {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 10px 16px; border-radius: 999px;
  background: rgba(8, 8, 14, 0.62); backdrop-filter: blur(6px);
  color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  pointer-events: none; animation: pv-flash 0.25s var(--ease);
}
.pv-seekflash.left { left: 12%; }
.pv-seekflash.right { right: 12%; }
.pv-seekflash[hidden] { display: none; }
@keyframes pv-flash { from { opacity: 0; transform: translateY(-50%) scale(0.85); } to { opacity: 1; transform: translateY(-50%) scale(1); } }

/* Phones: the stage is short in portrait, so the settings panel takes its full height
   instead of 60% of it (which left room for about two options). */
@media (max-width: 560px) {
  .pv-settings { top: 8px; bottom: 58px; right: 8px; max-height: none; width: min(280px, calc(100% - 16px)); }
  .pv-set-opt { padding: 7px 12px; }
  .pv-top { padding: 10px 10px; }
  .pv-seektip { display: none; }
}
@media (max-width: 380px) {
  /* 320–380px: every control still has to fit on one row. */
  .pv-icon { width: 34px; height: 34px; }
  .pv-icon svg { width: 19px; height: 19px; }
  .pv-time { font-size: 11px; }
  .pv-controls { padding: 0 6px 8px; }
}
/* Landscape phone: use the whole screen height for the picture. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1040px) {
  .pv-stage { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
}
.pv-seek { touch-action: none; }
@media (hover: none) {
  /* The seek bar is a thumb target on touch screens: taller hit area, visible knob. */
  .pv-seek { height: 6px; }
  .pv-seek::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
  .pv-thumb { transform: translate(-50%, -50%) scale(1); }
}

/* A server we have watched fail is dimmed rather than hidden — it may come back, and
   hiding it would just look like the list changed size for no reason. */
.pv-server.down { opacity: 0.42; }
.pv-server.down:hover { opacity: 0.7; }