:root {
  --app-viewport-offset-top: 0px;
}

@media (max-width: 820px) {
  html,
  body,
  .app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .coverWrap {
    width: clamp(176px, min(62vw, 29dvh), 238px);
  }

  .playButton,
  .app[data-playing="true"] .coverWrap .playButton,
  .app[data-playing="true"].is-play-control-dismissed .coverWrap .playButton,
  .app[data-playing="true"].is-play-control-dismissed .coverWrap:hover .playButton,
  .app[data-playing="true"].is-play-control-hovered .coverWrap .playButton,
  .app[data-playing="true"] .coverWrap .playButton:focus-visible {
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: rgba(8, 9, 12, 0.72);
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.46),
      0 0 0 1px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    opacity: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    transform: translate(-50%, -50%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
  }

  .playButton:active,
  .app[data-playing="true"] .coverWrap .playButton:active {
    transform: translate(-50%, -50%) scale(0.94) !important;
  }

  .playButton:hover,
  .app[data-playing="true"] .coverWrap:hover .playButton {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1.03) !important;
  }

  .playButton:focus-visible,
  .app[data-playing="true"] .coverWrap .playButton:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
  }

  .app[data-playing="true"] .playButton {
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    opacity: 0 !important;
    pointer-events: auto !important;
    cursor: pointer;
    transform: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .app[data-playing="true"] .coverWrap:hover .playButton,
  .app[data-playing="true"].is-play-control-hovered .coverWrap .playButton,
  .app[data-playing="true"].is-play-control-dismissed .coverWrap:hover .playButton,
  .app[data-playing="true"] .coverWrap .playButton:focus-visible {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .app[data-playing="true"] .playIcon {
    display: none !important;
  }

  .app[data-playing="true"] .coverWrap .playButton:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -6px;
  }

  .app[data-playing="true"] .coverWrap:active .cover {
    opacity: 0.9;
    transform: scale(0.985);
  }

  .app[data-playing="true"] .topbarActions,
  .app.is-webtv .topbarActions,
  .app.is-webtv[data-playing="true"] .topbarActions {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .app[data-playing="true"] #languageToggle,
  .app[data-playing="true"] #shareOpen,
  .app.is-webtv #languageToggle,
  .app.is-webtv #shareOpen {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .dockInner > .reactionItem {
    bottom: calc(98px + env(safe-area-inset-bottom));
  }

  html.is-keyboard-open .dockInner > .reactionItem {
    display: none !important;
  }

  .dockTab.podcastsTab.is-active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .dockTab:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: -4px;
  }

  .mobileLiveTab,
  .mobileLiveTab[hidden] {
    display: none !important;
  }

  .dockTab,
  .sheetClose,
  .emojiToggle,
  .chatComposer button,
  .formSubmit {
    touch-action: manipulation;
  }

  .sheetClose {
    width: 44px;
    height: 44px;
  }

  .formField input,
  .formField textarea,
  .chatComposer input {
    font-size: 16px;
  }

  .chatComposer {
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 56px;
  }

  .chatComposer button {
    width: 44px;
    height: 44px;
  }

  .dedicationActions .emojiToggle,
  .dedicationActions .formSubmit {
    min-height: 44px;
  }

  .dedicationActions .emojiToggle {
    width: 44px;
    height: 44px;
  }

  html.is-keyboard-open .sheet {
    top: var(--app-viewport-offset-top);
    height: var(--app-viewport-height);
  }

  html.is-keyboard-open .sheetPanel {
    scroll-padding-top: 72px;
    scroll-padding-bottom: 76px;
    overscroll-behavior: contain;
  }

  html.is-keyboard-open .sheet[data-panel="dedication"] .sheetPanel {
    display: flex;
    height: calc(var(--app-viewport-height) - 16px - env(safe-area-inset-top));
    flex-direction: column;
    overflow: hidden;
  }

  html.is-keyboard-open .sheet[data-panel="dedication"] .sheetHeader {
    flex: 0 0 auto;
  }

  html.is-keyboard-open .sheet[data-panel="dedication"] .sheetContent {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 68px;
  }

  html.is-keyboard-open .sheet[data-panel="dedication"] .dedicationActions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: 2px;
    padding: 9px 0 2px;
    background: linear-gradient(to bottom, rgba(var(--surface-rgb), 0), rgba(var(--surface-rgb), 0.98) 28%);
  }

  html.is-keyboard-open .sheet[data-panel="chat"] .chatComposer {
    position: sticky;
    bottom: 0;
    z-index: 4;
  }

  .app.is-webtv:not([data-playing="true"]) .playButton {
    top: 50%;
    left: 50%;
    display: grid;
    width: 48px;
    height: 48px;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) !important;
  }

  .app.is-webtv[data-playing="true"] .coverWrap .playButton,
  .app.is-webtv[data-playing="true"].is-play-control-dismissed .coverWrap .playButton,
  .app.is-webtv[data-playing="true"].is-play-control-dismissed .coverWrap:hover .playButton,
  .app.is-webtv[data-playing="true"].is-play-control-hovered .coverWrap .playButton {
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

@media (max-width: 360px) {
  .coverWrap {
    width: clamp(170px, min(60vw, 28dvh), 214px);
  }

  .playButton {
    width: 60px;
    height: 60px;
  }

  .dock {
    padding-right: 4px;
    padding-left: 4px;
  }

  .dockTab .dockLabel,
  .dockTab:not(.historyTab) .dockLabel {
    font-size: 0.56rem;
  }
}

@media (max-width: 820px) and (max-height: 620px) and (orientation: portrait) {
  .stage {
    padding-top: calc(62px + env(safe-area-inset-top));
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .player {
    gap: 10px;
  }

  .coverWrap {
    width: clamp(164px, min(56vw, 27dvh), 202px);
  }

  .nowPlaying {
    margin-bottom: 3px;
  }

  .meta h1 {
    font-size: clamp(1.2rem, 5.8vw, 1.65rem);
  }

  .meta > #artist {
    margin-top: 5px;
    font-size: clamp(0.9rem, 3.8vw, 1.05rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .playButton {
    transition: none;
  }
}