@media (max-width: 900px) {
  html,
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  #desktop-titlebar {
    height: 48px;
  }

  .desktop-window-controls .desktop-window-btn,
  #update-entry,
  #diy-mode-btn {
    display: none !important;
  }

  #top-right {
    top: 12px;
    right: 12px;
    max-width: 42vw;
  }

  #top-right #user-btn {
    min-width: 44px;
    max-width: 42vw;
    height: 40px;
  }

  #search-area,
  body.desktop-shell #search-area,
  body.desktop-shell #search-area.peek {
    top: 64px !important;
    width: calc(100vw - 24px);
    max-width: none;
    left: 12px;
    transform: none;
  }

  #search-box {
    min-height: 46px;
  }

  #search-input {
    font-size: 15px;
  }

  #search-results {
    max-height: min(58vh, 520px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #empty-home {
    top: 124px;
    bottom: 142px !important;
    left: 12px;
    width: calc(100vw - 24px);
    transform: translateY(12px) scale(.992);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  body.empty-home-active #empty-home {
    transform: translateY(0) scale(1);
  }

  .empty-home-shell {
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .home-hero {
    min-height: 390px;
    padding: 18px;
    border-radius: 22px;
  }

  .daily-review-card {
    min-height: 100%;
  }

  .daily-review-art {
    max-width: min(46vw, 176px);
    margin-left: auto;
    margin-right: auto;
  }

  .daily-review-time {
    font-size: clamp(52px, 16vw, 82px);
    line-height: .92;
  }

  .daily-review-quote {
    font-size: clamp(24px, 7vw, 38px);
    line-height: 1.18;
  }

  .daily-review-actions {
    gap: 8px;
  }

  .daily-review-actions button,
  .home-chip,
  .home-card,
  .home-insight-card {
    touch-action: manipulation;
  }

  .home-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-card {
    min-height: 118px;
    border-radius: 18px;
    padding: 16px;
  }

  .home-card-title {
    font-size: 20px;
    max-width: calc(100% - 96px);
  }

  .home-card-sub {
    max-width: calc(100% - 94px);
  }

  .home-card-art {
    width: 84px;
    height: 84px;
    border-radius: 20px;
  }

  .home-rail,
  #home-insight-dock {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .home-insight-card,
  .home-discovery-strip,
  .home-ranking-entry {
    border-radius: 18px;
  }

  .home-listen-metrics {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-listen-metric {
    padding: 0;
    border-left: 0;
  }

  .home-discovery-list {
    grid-auto-columns: minmax(132px, 46vw);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #playlist-panel {
    width: min(92vw, 420px);
    max-width: 92vw;
  }

  #bottom-bar,
  #bottom-bar.visible,
  #bottom-bar.stage-mode {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 92px;
    padding: 20px 12px 12px;
    border-radius: 26px;
    transform: none;
  }

  #progress-bar {
    left: 22px;
    right: 22px;
    top: 10px;
  }

  #controls {
    height: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
  }

  .control-cluster {
    min-width: 0;
    gap: 8px;
  }

  .control-cluster.actions {
    justify-content: flex-start;
  }

  .control-cluster.transport {
    justify-content: center;
  }

  .control-cluster.modes {
    justify-content: flex-end;
  }

  .control-track {
    display: none;
  }

  .ctrl-btn {
    width: 40px;
    height: 40px;
  }

  #play-btn {
    width: 58px;
    height: 58px;
  }

  #time-display,
  #quality-control,
  #controls-hide-btn,
  .control-divider {
    display: none !important;
  }

  .modal {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 28px);
    padding: 20px;
    overflow: auto;
  }

  .dual-login-modal {
    width: calc(100vw - 24px);
    min-width: 0;
    max-width: calc(100vw - 24px);
    padding: 18px;
  }

  .login-node-graph {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .login-node-providers,
  .login-mode-nodes,
  .login-auth-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #login-auth-drawer {
    min-width: 0;
  }
}

@media (max-width: 520px) {
  #top-right {
    max-width: 54vw;
  }

  #search-area {
    top: 68px !important;
  }

  #empty-home {
    top: 132px;
    bottom: 244px !important;
  }

  .home-hero {
    min-height: 430px;
  }

  .daily-review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .daily-review-actions button {
    min-height: 36px;
    padding: 0 10px;
  }

  .home-card-title,
  .home-card-sub {
    max-width: calc(100% - 78px);
  }

  .home-card-art {
    width: 68px;
    height: 68px;
  }

  #bottom-bar {
    min-height: 104px;
  }

  #controls {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
  }

  .control-cluster.actions,
  .control-cluster.modes {
    width: 100%;
    justify-content: center;
  }

  .control-cluster.actions .ctrl-btn:nth-of-type(n+3),
  .control-cluster.modes .ctrl-btn:nth-of-type(n+4) {
    display: none;
  }

  .ctrl-btn {
    width: 38px;
    height: 38px;
  }

  #play-btn {
    width: 56px;
    height: 56px;
  }
}

@media (min-width: 1600px) and (min-height: 900px) {
  #empty-home {
    width: min(1480px, calc(100vw - 120px));
  }

  .empty-home-shell {
    grid-template-columns: minmax(430px, .9fr) minmax(720px, 1.1fr);
    gap: 18px;
  }

  .home-card {
    min-height: 172px;
  }

  .ctrl-btn,
  #top-right .icon-btn {
    outline-offset: 5px;
  }
}

@media (min-width: 1280px) and (hover: none) and (pointer: coarse) {
  .home-card:focus-visible,
  .home-insight-card:focus-visible,
  .ctrl-btn:focus-visible,
  #search-input:focus-visible,
  #top-right #user-btn:focus-visible {
    outline: 3px solid rgba(244, 210, 138, .72);
    outline-offset: 4px;
  }

  .home-card,
  .home-insight-card,
  .ctrl-btn,
  #play-btn {
    min-height: 48px;
  }
}

@media (min-width: 960px) {
  .sumusic-tv-focus-ready .home-card,
  .sumusic-tv-focus-ready .home-insight-card,
  .sumusic-tv-focus-ready .home-discovery-song,
  .sumusic-tv-focus-ready .home-ranking-entry {
    outline: none;
  }

  .sumusic-tv-focus-ready button:focus-visible,
  .sumusic-tv-focus-ready [role="button"]:focus-visible,
  .sumusic-tv-focus-ready a:focus-visible,
  .sumusic-tv-focus-ready input:focus-visible,
  .sumusic-tv-focus-ready .home-card:focus-visible,
  .sumusic-tv-focus-ready .home-insight-card:focus-visible,
  .sumusic-tv-focus-ready .home-discovery-song:focus-visible,
  .sumusic-tv-focus-ready .home-ranking-entry:focus-visible {
    outline: 3px solid rgba(245, 201, 106, .92);
    outline-offset: 5px;
    box-shadow: 0 0 0 1px rgba(5, 7, 10, .92), 0 0 34px rgba(98, 245, 222, .26);
  }
}