@media (max-width: 980px) {
  .side, .top, header.top { display: none !important; }
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    -webkit-overflow-scrolling: touch;
  }
  .shell, .shell > section {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .mbar {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0; right: 0; z-index: 80;
    height: 52px;
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    align-items: center; justify-content: space-between;
    background: #151b2b;
  }
  .mbar-place {
    border: 0; background: none; color: #fff;
    font-size: 17px; font-weight: 700;
    max-width: 64vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mbar-r { display: flex; gap: 8px; align-items: center; }
  .mbar-r button, .m-ava {
    width: 36px !important; height: 36px !important;
    border-radius: 18px !important;
    border: 1px solid #3a4558 !important;
    background: #1c2433 !important;
    color: #fff !important;
    font-weight: 700 !important;
  }
  .main, #main, main {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    padding: calc(64px + env(safe-area-inset-top)) 14px calc(168px + env(safe-area-inset-bottom)) !important;
  }

  .main .row, .main .home-row, .main .block, .main section.row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 12px 0 6px !important;
  }
  .station-row, .stations, .row-scroller, .h-scroll {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .station, .station-card {
    flex: 0 0 42vw !important;
    width: 42vw !important;
    max-width: 42vw !important;
  }
  .genre-grid, .genre-grid-5, .genres, .genre-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* one stable player row */
  .player {
    position: fixed !important;
    left: 0; right: 0;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    z-index: 81;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    background: #1a2230 !important;
    border-top: 1px solid #243044;
    overflow: hidden !important;
  }
  .player .seek-line, .player .times, .player .right,
  .player input[type=range], .player .vol { display: none !important; }
  .player .now {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }
  .player .thumb, #nowArt {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #243044 !important;
    background-image: none !important;
  }
  #nowArt img, .player .thumb img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: 0 !important;
    pointer-events: none !important;
  }
  .player .meta { min-width: 0; flex: 1; overflow: hidden; }
  .player .now strong {
    display: block; font-size: 13px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .player .now small {
    display: block; font-size: 11px !important; color: #8b95a8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .player .transport, .player .controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  .player .controls button,
  .player .controls .play,
  #playBtn, #nextBtn, #blockBtn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    flex: none !important;
    font-size: 0 !important;
  }
  .player .controls button svg,
  #playBtn svg, #nextBtn svg, #blockBtn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  /* tall tab bar with icons above labels */
  .mtabs {
    display: flex !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 82;
    height: calc(72px + env(safe-area-inset-bottom)) !important;
    padding: 8px 0 env(safe-area-inset-bottom) !important;
    background: #121822 !important;
    border-top: 1px solid #243044;
    justify-content: space-around;
    align-items: flex-start;
    pointer-events: auto !important;
  }
  .mtabs button {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    background: none !important;
    border: 0 !important;
    color: #8b95a8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    padding: 4px 0 0 !important;
    min-height: 56px;
  }
  .mtabs button .mtab-ico,
  .mtabs button svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    pointer-events: none;
    flex: none;
  }
  .mtabs button.is-on { color: #C9A227 !important; }
}