/* Плеер кейса: минимальный кастомный. Цвета и шрифт берутся из токенов оверлея (--o-*, --f-m). */
.pl {
  --pl-acc: var(--o-acc, #e9a03b);
  --pl-accfg: var(--o-accfg, #120d08);
  --pl-fg: var(--o-fg, #f2eadb);
  --pl-mono: var(--f-m, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  --pl-r: max(2px, calc(var(--o-rad, 0px) * .6));
  container: pl / inline-size;
  isolation: isolate;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.pl.is-sound { cursor: default; }
.pl.is-idle, .pl.is-idle * { cursor: none !important; }

/* постер всегда под видео, видео проявляется на "playing" */
.pl > .pl-poster, .pl > .pl-v { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pl > .pl-v { opacity: 0; transition: opacity .4s ease; }
.pl.is-live > .pl-v { opacity: 1; }

/* загрузка: тонкое кольцо, появляется с задержкой, чтобы не мигать */
.pl-spin {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  border: 2px solid rgba(242,234,219,.16); border-top-color: var(--pl-acc);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  animation: pl-spin .9s linear infinite; animation-play-state: paused;
}
.pl.is-sound.is-wait .pl-spin { opacity: 1; transition-delay: .35s; animation-play-state: running; }
@keyframes pl-spin { to { transform: rotate(1turn); } }

/* "Watch with sound" */
.pl-pill {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 14px 11px 12px;
  background: var(--pl-acc); color: var(--pl-accfg);
  border-radius: var(--pl-r);
  font: 600 12px/1 var(--pl-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .2s ease, background-color .15s ease, opacity .2s ease, visibility 0s;
}
.pl-pill-i { flex: none; width: 9px; height: 11px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pl-pill-t { font-weight: 500; letter-spacing: .04em; opacity: .62; font-variant-numeric: tabular-nums; }
.pl-pill-t:empty { display: none; }
.pl.is-sound .pl-pill { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: transform .2s ease, opacity .2s ease, visibility 0s .2s; }

/* панель управления */
.pl-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding-top: 44px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65));
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s .25s;
}
.pl.is-sound .pl-bar { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.pl.is-sound.is-idle .pl-bar { opacity: 0; transition: opacity .6s ease; }
.pl-row { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 6px 2px; color: var(--pl-fg); }
.pl-ctl { pointer-events: auto; }
.pl.is-idle .pl-ctl { pointer-events: none; }

.pl-b {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--pl-fg); border-radius: var(--pl-r);
  transition: color .15s ease;
}
.pl-b svg { display: block; width: 20px; height: 20px; }
.pl-pp svg { width: 18px; height: 18px; }

.pl-time {
  flex: none; margin: 0 8px 0 2px;
  font: 500 12px/1 var(--pl-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--pl-fg);
}
.pl-dur { opacity: .55; }

/* дорожка: 3px, на ховере/перетаскивании 5px, янтарный прогресс */
.pl-seek {
  position: relative; flex: 1 1 auto; min-width: 48px; height: 40px;
  display: flex; align-items: center; padding: 0 6px;
  cursor: pointer; touch-action: none; outline: none;
}
.pl-track { position: relative; width: 100%; height: 3px; background: rgba(242,234,219,.2); transition: height .15s ease; }
.pl-buf, .pl-fill { position: absolute; inset: 0; transform-origin: 0 50%; }
.pl-buf { background: rgba(242,234,219,.3); transform: scaleX(var(--b, 0)); }
.pl-fill { background: var(--pl-acc); transform: scaleX(var(--p, 0)); }
.pl-thumb {
  position: absolute; top: 50%; left: calc(var(--p, 0) * 100%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--pl-acc); box-shadow: 0 0 0 3px rgba(0,0,0,.22);
  transform: scale(0); transition: transform .15s ease;
}
.pl.is-drag .pl-track { height: 5px; }
.pl.is-drag .pl-thumb { transform: scale(1); }
.pl-tip {
  position: absolute; left: var(--hx, 0px); bottom: calc(50% + 12px);
  transform: translateX(-50%);
  padding: 4px 6px; border-radius: var(--pl-r);
  background: rgba(12,9,7,.86); color: var(--pl-fg);
  font: 500 11px/1 var(--pl-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.pl.is-tip .pl-tip, .pl.is-drag .pl-tip { opacity: 1; }

@media (hover: hover) {
  .pl:not(.is-sound):hover .pl-pill { transform: translateY(-2px); }
  .pl-pill:hover { background: var(--pl-fg); }
  .pl-b:hover { color: var(--pl-acc); }
  .pl-seek:hover .pl-track { height: 5px; }
  .pl-seek:hover .pl-thumb { transform: scale(1); }
}

/* фокус не рисуем: он нужен плееру только чтобы клавиши шли в него после клика по видео */
.pl:focus, .pl :focus, .pl:focus-visible, .pl :focus-visible { outline: none; }

/* полный экран: на весь экран, видео целиком на чёрном */
.pl.is-fs { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0; border-radius: 0; background: #000; }
.pl.is-fs > .pl-poster, .pl.is-fs > .pl-v { object-fit: contain; }
.pl.is-fs .pl-bar { padding-top: 72px; }
.pl.is-fs .pl-row {
  height: 52px;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  box-sizing: content-box;
}

/* узкий плеер (вертикальные ролики, телефон): дорожка отдельной строкой сверху */
@container pl (max-width: 380px) {
  .pl-bar { padding-top: 36px; }
  .pl-row { flex-wrap: wrap; height: auto; padding: 0 4px 2px; }
  .pl-seek { order: -1; flex: 1 0 100%; height: 24px; padding: 0 8px; }
  .pl-time { margin-right: auto; }
}
@container pl (max-width: 290px) {
  .pl-pill { left: 10px; bottom: 10px; gap: 8px; padding: 10px 12px 10px 11px; font-size: 11px; letter-spacing: .06em; }
  .pl-pill-t { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pl > .pl-v, .pl-pill, .pl-bar, .pl-b, .pl-track, .pl-thumb, .pl-tip { transition: none !important; }
  .pl:not(.is-sound):hover .pl-pill { transform: none; }
  .pl-spin { animation: none; border-color: rgba(242,234,219,.3); border-top-color: var(--pl-acc); }
}