/* Mobile（< 768px）：參考 docs/Mobile_UI.jpg，播放器改成貼底滿版的長條面板
   （不是 PC 版置中浮動卡片），標題移到左上角、Get on Steam 回到右上角跟桌面版一樣。
   共用同一組 DOM／JS（js/main.js、js/city-display.js 等不分版本），這裡只負責重新定位/縮放。 */

@media (max-width: 767px) {
  .site-title {
    top: 16px;
    left: 16px;
    right: auto;
    transform: none;
    font-size: clamp(20px, 6.5vw, 28px);
    max-width: 70vw;
    white-space: normal;
    text-align: left;
  }

  /* Get on Steam 不需要 mobile 專屬定位，沿用桌面版右上角的規則即可 */

  .player-bar {
    position: fixed;
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 16px;
    transform: none;
    width: auto;
    /* 曲目名稱不換行（超出容器），垂直高度其實很穩定，固定上限比 vh 更可預期，
       credits 圖示才能用固定數字定位在它正上方，不用再靠 JS 量測（量測時機常跟
       非同步載入的內容對不上，量到不準） */
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    border-radius: 16px;
  }

  .player-bar-main {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 20px 20px;
  }

  .now-playing {
    align-self: stretch;
  }

  /* 桌面版的字級是給滑鼠近距離看的 HUD 設計，手機螢幕距離較遠，10px 的 mono
     標籤明顯偏小（Apple HIG／Material Design 都建議至少 ~12px 才算好讀），
     city-name 16px 也只是堪用、不到舒適閱讀的程度，這裡統一往上加 */
  #now-city-name {
    font-size: 20px;
  }

  #now-city-region,
  #track-title {
    font-size: 13px;
  }

  /* 13px 在這一行會跟城市名/區域擠到超出容器寬度，音樂風格改回原本的 10px */
  #now-city-meta {
    font-size: 10px;
  }

  /* 區域跟音樂風格現在同一行，加個小圓點區隔，desktop 版兩者本來就不在同一行不需要 */
  #now-city-meta::before {
    content: '•';
    margin-right: 6px;
    color: var(--accent);
    opacity: 0.6;
  }

  .progress-time,
  .volume {
    font-size: 12px;
  }

  /* mobile 版斷行點換成「meta 之後」，name+region+meta 同一行、track-title 自己一行 */
  .now-playing-break-desktop {
    display: none;
  }

  .now-playing-break-mobile {
    display: block;
    flex-basis: 100%;
    width: 0;
    height: 0;
  }

  .now-playing-divider {
    display: none;
  }

  /* 播放按鈕在 mobile 是主視覺，加大到 52px（仍滿足 ≥48px 的最小觸控尺寸） */
  .play-btn {
    width: 52px;
    height: 52px;
  }

  .play-btn svg {
    width: 18px;
    height: 18px;
  }

  /* mobile 不需要桌面版那個刻意把 play 往左偏的小幅度，置中對齊就好 */
  .play-visual {
    margin-left: 0;
    margin-right: 0;
  }

  .star-label {
    font-size: 12px;
  }

  .star-btn svg {
    width: 15px;
    height: 15px;
  }

  /* desktop 版的右側欄是靠右對齊的直排，mobile 改成置中、撐滿寬度跟其他列一致 */
  .player-bar-side {
    align-items: center;
    align-self: stretch;
  }

  /* 時間/曲目長度在左、VOL+滑桿在右，併成同一排撐滿寬度 */
  .player-bar-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    gap: 16px;
  }

  .progress-time,
  .volume {
    align-self: center;
  }

  /* 觸控比桌面滑鼠難精準操作，VOL 滑桿加倍變好按 */
  .volume input[type='range'] {
    width: 120px;
  }

  /* 版權 icon：純圖示按鈕，無底版 */
  .credits-trigger {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: 20px;
    height: 20px;
  }

  .steam-link {
    position: static;
    top: auto;
    right: auto;
  }

  .credits-panel {
    top: 50px;
    bottom: auto;
    left: auto;
    right: 16px;
    max-width: calc(100vw - 40px);
  }

  /* 播放面板不顯示捲軸（Webkit / Blink） */
  .player-bar::-webkit-scrollbar {
    display: none;
  }
}