/* Playback owns the screen. Controls appear only when they are useful. */
.yp .yp-row [data-tv-open] { display: none; }
.yp .yp-row { gap: 4px; }
.yp .yp-row button { flex-shrink: 0; min-width: 44px; min-height: 44px; }
.yp .yp-row .yp-text { padding-inline: 10px; font-weight: 650; }
.yp .yp-time { font-size: 13px; padding-inline: 8px; }
.yp.touch .yp-volume { display: none; }
.yp .yp-bar { padding-inline: max(12px, env(safe-area-inset-left)); }
.yp .yp-center { gap: 28px; }
.yp .yp-bigplay { background: #181818e6; color: #fff; box-shadow: none; }
.yp .yp-jump { background: #181818e6; }
.yp .yp-row button:focus-visible, .yp .yp-center button:focus-visible,
.yp .yp-menu button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
/* Keep the familiar transport row; only the TV-specific selectors are excluded. */
html:not(.tv-mode) .yp:not(.touch).playing .yp-center { visibility: hidden; }
.yp.idle .yp-bar, .yp.idle .yp-center { visibility: hidden; opacity: 0; pointer-events: none; }
.yp .yp-flash { top: max(34px, calc(50% - 54px)); transform: translate(-50%, -100%); padding: 6px 12px; font-size: 14px; line-height: 20px; }
html .yp .yp-menu { max-height: none; overflow: visible; padding: 0; }
.yp .yp-menu-items { display: flex; flex-direction: column; padding: 6px; border-radius: inherit; overflow-y: auto; overscroll-behavior: contain; }
.yp .yp-menu button { min-height: 44px; }
html.tv-mode .yp .yp-bar { opacity: 1; pointer-events: auto; }
html.tv-mode .yp.idle .yp-bar { opacity: 0; pointer-events: none; }
html.tv-mode .yp .yp-row [data-tv-open] { display: inline-flex; }
/* A narrow player needs fewer controls, not smaller hit areas. */
@media (max-width: 600px) {
  html:not(.tv-mode) .yp .yp-row :is([data-yp=prev],[data-yp=back10],[data-yp=fwd10],[data-yp=pip],[data-yp=help]) { display: none; }
  html:not(.tv-mode) .yp .yp-row { gap: 2px; }
  html:not(.tv-mode) .yp .yp-time { font-size: 12px; padding-inline: 2px; }
  html:not(.tv-mode) .yp .yp-row .yp-text { padding-inline: 6px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .yp .yp-bar, .yp .yp-center, .yp .yp-menu { transition: none; animation: none; }
}