.player-stage .control-button:not(.caption-button),
.player-stage .back-button,
.tv-player .tv-player-control:not(#tvSubtitleButton),
.tv-player .tv-player-back,
.player-tool-button {
  background: transparent;
  box-shadow: none;
}

.player-loading {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 5px solid rgba(229, 9, 20, 0.2);
  border-top-color: #e50914;
  border-right-color: #e50914;
  border-radius: 50%;
  animation: player-loading-turn 0.8s linear infinite;
  pointer-events: none;
}

@keyframes player-loading-turn { to { transform: rotate(360deg); } }

.player-seek-feedback {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  min-width: 84px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}
.player-seek-feedback.is-left { left: 12%; }
.player-seek-feedback.is-right { right: 12%; }
.video-player, .tv-video { touch-action: manipulation; }

.player-seek-tooltip {
  position: absolute;
  z-index: 6;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.player-stage.controls-hidden .player-seek-tooltip { visibility: hidden; }

.player-controls { z-index: 3; }
.player-queue {
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  padding: 12px 20px 16px;
  max-height: calc(100% - 128px);
  overflow-y: auto;
  border-top: 1px solid rgba(229, 9, 20, 0.6);
  background: rgba(8, 8, 8, 0.94);
  color: #fff;
  animation: player-queue-enter 160ms ease-out;
}
@keyframes player-queue-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.player-queue-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.player-queue-heading h2 { flex: 1; min-width: 0; margin: 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.player-tool-button { flex: 0 0 auto; width: 44px; height: 44px; min-width: 0; padding: 10px; border: 1px solid transparent; border-radius: 4px; color: #fff; }
.player-tool-button:hover, .player-tool-button:focus { color: #e50914; border-color: #e50914; background: transparent; }
.player-tool-button svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.player-queue-row { position: relative; display: flex; overflow-x: auto; overflow-y: hidden; padding: 3px 0 8px; scrollbar-color: #e50914 transparent; }
.player-queue-cell { flex: 0 0 240px; min-width: 0; margin-right: 12px; }
.player-queue-item { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 4px; background: transparent; color: #fff; text-align: left; }
.player-queue-item:hover, .player-queue-item:focus, .player-queue-item[aria-current="true"] { border-color: #e50914; background: transparent; outline: none; }
.player-queue-art { display: block; position: relative; width: 100%; height: 132px; overflow: hidden; background: #181818; }
.player-queue-art img { display: block; }
.player-queue-fallback { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.player-queue-duration { position: absolute; right: 6px; bottom: 6px; padding: 2px 5px; border-radius: 3px; background: rgba(0,0,0,0.8); color: #fff; font-size: 13px; }
.player-queue-name { display: block; padding: 8px 6px; font-size: 15px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }

/* Keep the TV timeline flexible when the season/collection button is present. */
.tv-player .tv-player-controls { display: flex; align-items: center; gap: 12px; height: 58px; }
.tv-player-controls .tv-player-control,
.tv-player-controls .tv-time-label,
.tv-player-controls .tv-seek { position: static; flex: 0 0 auto; margin: 0; }
.tv-player-controls .tv-seek { flex: 1 1 0; min-width: 40px; width: auto; }
.tv-player-controls .tv-time-label { width: 68px; text-align: center; }
.tv-player-controls .player-queue-toggle { padding: 10px; }
.tv-player .player-queue-cell { flex-basis: 280px; }
.tv-player .player-queue-art { height: 155px; }
.tv-player .player-queue-name { font-size: 18px; }
.tv-player .player-queue-heading h2 { font-size: 24px; }

@media (max-width: 600px) {
  .player-controls { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .player-controls .time-label { min-width: 0; font-size: 12px; }
  #currentTimeLabel { grid-area: 1 / 1 / 2 / 2; }
  #seekBar { grid-area: 1 / 2 / 2 / 7; width: 100%; min-width: 0; margin: 0; }
  #durationLabel { grid-area: 1 / 7 / 2 / 8; }
  .player-controls .control-button { width: 100%; min-width: 0; height: 44px; padding: 8px; }
  .player-controls .control-spacer { display: none; }
  .player-controls .control-cluster { min-width: 0; }
  .player-queue { padding: 8px 12px; }
  .player-queue-heading h2 { font-size: 16px; }
  .player-queue-cell { flex-basis: 200px; }
  .player-queue-art { height: 110px; }
  .player-queue-heading { gap: 4px; }
}
@media (max-height: 500px) {
  .player-queue { padding: 6px 12px; }
  .player-queue-heading { margin-bottom: 2px; }
  .player-queue-heading h2 { font-size: 16px; }
  .player-queue-cell, .tv-player .player-queue-cell { flex-basis: 180px; }
  .player-queue-art, .tv-player .player-queue-art { height: 96px; }
  .player-queue-name, .tv-player .player-queue-name { font-size: 13px; padding: 5px; }
}
@media (prefers-reduced-motion: reduce) { .player-queue { animation: none; } }