.v2-video-focus-toggle {
  position: absolute;
  top: calc(62px + env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 84;
  width: 40px;
  height: 40px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(5, 6, 7, .74);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: .82;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.v2-player.is-logged-in-player:not([hidden]) > .v2-video-focus-toggle {
  display: grid;
}

.v2-video-focus-toggle:hover,
.v2-video-focus-toggle:focus-visible {
  opacity: 1;
  transform: scale(1.05);
  border-color: rgba(255, 159, 10, .8);
  background: rgba(10, 11, 13, .94);
  outline: none;
}

.v2-video-focus-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v2-video-focus-toggle .v2-focus-restore-icon {
  display: none;
}

.v2-player.is-video-focus-mode .v2-video-focus-toggle {
  opacity: .25;
  border-color: rgba(255, 159, 10, .62);
  background: rgba(5, 6, 7, .66);
  color: #ffad2f;
}

.v2-player.is-video-focus-mode .v2-video-focus-toggle .v2-focus-enter-icon {
  display: none;
}

.v2-player.is-video-focus-mode .v2-video-focus-toggle .v2-focus-restore-icon {
  display: block;
}

/* Legacy focus-mode styling remains for compatibility with older cached clients. */
.v2-player.is-video-focus-mode .v2-player-header > *,
.v2-player.is-video-focus-mode .v2-player-content,
.v2-player.is-video-focus-mode .v2-li-player-rail,
.v2-player.is-video-focus-mode .v2-li-merch-tray,
.v2-player.is-video-focus-mode .v2-vec-clip-commerce,
.v2-player.is-video-focus-mode .v2-mobile-vec-status,
.v2-player.is-video-focus-mode .v2-swipe-hint {
  opacity: .25 !important;
  pointer-events: none !important;
  transition: opacity .28s ease !important;
}

.v2-player.is-video-focus-mode .v2-player-swipe-hint.is-visible,
.v2-player.is-video-title-mode .v2-player-swipe-hint.is-visible,
.v2-player.is-video-cinema-mode .v2-player-swipe-hint.is-visible {
  opacity: 1 !important;
  pointer-events: none !important;
}

.v2-player.is-video-focus-mode .v2-player-shade {
  opacity: .25 !important;
  transition: opacity .28s ease !important;
}

.v2-player.is-video-focus-mode .v2-mobile-vec-stage::after,
.v2-player.is-video-title-mode .v2-mobile-vec-stage::after,
.v2-player.is-video-cinema-mode .v2-mobile-vec-stage::after {
  opacity: 0 !important;
  transition: opacity .28s ease !important;
}

.v2-player.is-video-focus-mode .v2-player-backdrop,
.v2-player.is-video-title-mode .v2-player-backdrop,
.v2-player.is-video-cinema-mode .v2-player-backdrop {
  filter: none !important;
  -webkit-filter: none !important;
}

/*
  Mobile Title Mode: keep only the identifying song information and core
  transport controls. The retained UI is dimmed to 50% opacity.
*/
@media (max-width: 699px) {
  .v2-player.is-video-title-mode .v2-player-header > * {
    opacity: .50 !important;
    transition: opacity .28s ease !important;
  }

  .v2-player.is-video-title-mode .v2-player-header .v2-li-player-head-actions,
  .v2-player.is-video-title-mode .v2-li-player-rail,
  .v2-player.is-video-title-mode .v2-li-merch-tray,
  .v2-player.is-video-title-mode .v2-vec-clip-commerce,
  .v2-player.is-video-title-mode .v2-mobile-vec-status,
  .v2-player.is-video-title-mode .v2-swipe-hint,
  .v2-player.is-video-title-mode .v2-video-focus-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .28s ease !important;
  }

  .v2-player.is-video-title-mode .v2-player-content > * {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .28s ease !important;
  }

  .v2-player.is-video-title-mode .v2-player-content > h2,
  .v2-player.is-video-title-mode .v2-player-content .v2-artist-row,
  .v2-player.is-video-title-mode .v2-player-content .v2-li-meta-chips,
  .v2-player.is-video-title-mode .v2-player-content .v2-timeline,
  .v2-player.is-video-title-mode .v2-player-content .v2-player-controls {
    opacity: .50 !important;
    pointer-events: auto !important;
  }
}

/* Cinema Mode: preserve the full visual while leaving only a faint interface trace. */
.v2-player.is-video-cinema-mode .v2-video-focus-toggle,
.v2-player.is-video-cinema-mode .v2-player-header > *,
.v2-player.is-video-cinema-mode .v2-player-content > *,
.v2-player.is-video-cinema-mode .v2-li-player-rail,
.v2-player.is-video-cinema-mode .v2-li-merch-tray,
.v2-player.is-video-cinema-mode .v2-vec-clip-commerce,
.v2-player.is-video-cinema-mode .v2-mobile-vec-status,
.v2-player.is-video-cinema-mode .v2-swipe-hint {
  opacity: .025 !important;
  pointer-events: none !important;
  transition: opacity .28s ease !important;
}

.v2-player.is-video-cinema-mode .v2-player-shade {
  opacity: 0 !important;
  transition: opacity .28s ease !important;
}

/* A tap on the visual temporarily reveals only the useful transport layer. */
.v2-player.is-video-cinema-mode.is-cinema-controls-peek .v2-player-content .v2-timeline,
.v2-player.is-video-cinema-mode.is-cinema-controls-peek .v2-player-content .v2-player-controls,
.v2-player.is-video-cinema-mode.is-cinema-controls-peek .v2-player-content .v2-li-up-next-button {
  opacity: .96 !important;
  pointer-events: auto !important;
}

.v2-player.is-video-cinema-mode.is-cinema-controls-peek .v2-player-content .v2-player-labels,
.v2-player.is-video-cinema-mode.is-cinema-controls-peek .v2-player-content > h2,
.v2-player.is-video-cinema-mode.is-cinema-controls-peek .v2-player-content .v2-artist-row,
.v2-player.is-video-cinema-mode.is-cinema-controls-peek .v2-player-content .v2-li-meta-chips {
  opacity: .16 !important;
}

@media (min-width: 700px) {
  .v2-video-focus-toggle {
    top: 86px;
    left: 28px;
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-video-focus-toggle,
  .v2-player.is-video-focus-mode .v2-player-header > *,
  .v2-player.is-video-focus-mode .v2-player-content,
  .v2-player.is-video-focus-mode .v2-li-player-rail,
  .v2-player.is-video-focus-mode .v2-li-merch-tray,
  .v2-player.is-video-focus-mode .v2-vec-clip-commerce,
  .v2-player.is-video-focus-mode .v2-mobile-vec-status,
  .v2-player.is-video-focus-mode .v2-swipe-hint,
  .v2-player.is-video-focus-mode .v2-player-shade,
  .v2-player.is-video-focus-mode .v2-mobile-vec-stage::after,
  .v2-player.is-video-title-mode .v2-player-header > *,
  .v2-player.is-video-title-mode .v2-player-content > *,
  .v2-player.is-video-title-mode .v2-li-player-rail,
  .v2-player.is-video-title-mode .v2-li-merch-tray,
  .v2-player.is-video-title-mode .v2-vec-clip-commerce,
  .v2-player.is-video-title-mode .v2-mobile-vec-status,
  .v2-player.is-video-title-mode .v2-swipe-hint,
  .v2-player.is-video-title-mode .v2-mobile-vec-stage::after,
  .v2-player.is-video-cinema-mode .v2-player-header > *,
  .v2-player.is-video-cinema-mode .v2-player-content > *,
  .v2-player.is-video-cinema-mode .v2-li-player-rail,
  .v2-player.is-video-cinema-mode .v2-li-merch-tray,
  .v2-player.is-video-cinema-mode .v2-vec-clip-commerce,
  .v2-player.is-video-cinema-mode .v2-mobile-vec-status,
  .v2-player.is-video-cinema-mode .v2-swipe-hint,
  .v2-player.is-video-cinema-mode .v2-player-shade,
  .v2-player.is-video-cinema-mode .v2-mobile-vec-stage::after,
  .v2-player .v2-player-swipe-hint,
  .v2-interface-restore-hint {
    transition: none !important;
  }
}