/* =====================================================================
 *  NeuroRest · RWD 延伸（Tablet / Desktop）
 *  - mobile (≤767px)  原本 style.css 的設計，不動
 *  - tablet (≥768px)  panel 加寬到 600px，音樂列表 2 欄、白噪音 3 欄
 *  - desktop (≥840px) panel 加寬到 640px，音樂列表 3 欄、白噪音 6 欄
 *  - ultrawide (≥1600px) panel 1080px
 * ===================================================================== */

/* ==========================================================
   Tablet: 768px ~ 1199px
   ========================================================== */
@media (min-width: 768px) {

  body {
    font-size: 16px;
  }

  .redeem-code {
    gap: 8px;
  }

  #app {
    padding: 0px;
    align-items: flex-start;
    /* 內容靠上對齊，避免直立 iPad 留太多上方空白 */
  }

  .page-head,
  .top-bar {
    min-width: 640px;
  }

  .screen {
    inset: 0px;
    width: 640px;
    margin: 0 auto;
  }

  .panel {
    width: min(640px, 100%);
    padding: 28px 32px;
  }

  /* AI 教練觀察 panel — 寬度跟主 panel 對齊,避免桌面端視覺斷層 */
  .ai-summary-panel {
    width: min(640px, 100%);
    padding: 16px 22px 18px;
  }

  /* 升級 Premium CTA — 跟 panel 對齊(音樂列表底部 + 個人設定都會出現) */
  .upgrade-cta-card {
    width: min(640px, 100%);
  }

  #screen-auth .panel {
    width: min(440px, 100%);
    /* 登入框維持窄一點，視覺更聚焦 */
  }

  /* 音樂列表 2 欄 */
  .track-list {
    display: grid !important;
    /* grid-template-columns: 1fr 1fr; */
    gap: 14px;
  }

  /* 白噪音控制 3 欄（原本是 2 欄） */
  .noise-grid-large {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px;
  }

  /* tablet/desktop 把圓鈕復原成 92×92（手機端在 style.css 是 80×80） */
  .noise-grid-large .noise-btn .circle {
    width: 92px;
    height: 92px;
  }

  /* 統計頁 (tablet)：2 欄並排 */
  #screen-stats .scroll-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
    row-gap: 14px;
    align-content: start;
    padding: 24px 0;
    box-sizing: border-box;
  }

  #screen-stats .scroll-area>*:not(.stats-card) {
    grid-column: 1 / -1;
  }

  #screen-stats .scroll-area>.stats-card {
    width: 100%;
    max-width: none;
    margin: 0;
    box-shadow: none;
  }

  /* 兌換碼 8 格輸入框留更多間距 */
  .redeem-code {
    gap: 10px;
  }

  /* 底部 tab bar 維持貼底但拉寬到 panel 寬度 */
  .tab-bar,
  #tab-bar,
  nav.bottom-nav {
    width: min(640px, 100%);
    margin: 0 auto;
  }

  /* 助眠紀錄歷史列表 — 平板 / 桌面寬度時占滿整列、移除立體陰影 */
  .session-history {
    width: 100%;
    box-shadow: none;
  }
}

/* ==========================================================
   Desktop: 840px ~ 1599px
   ========================================================== */
@media (min-width: 840px) {

  .page-head,
  .top-bar {
    min-width: 640px !important;
  }

  .panel {
    width: min(640px, 100%);
    max-width: 640px;
    box-shadow: none;
  }

  /* AI 教練觀察 panel — desktop 跟主 panel 對齊 */
  .ai-summary-panel {
    width: min(640px, 100%);
    max-width: 640px;
  }

  /* 升級 Premium CTA — desktop 對齊 */
  .upgrade-cta-card {
    width: min(640px, 100%);
    max-width: 640px;
  }

  /* ─────────────── 主頁桌面版重排 ─────────────── */
  /* 把首頁四圓鈕（白噪音 / 音樂列表 / 助眠紀錄 / 個人數據）
     從面板下方移到右上角，緊貼在 .top-actions 右邊 */
  #screen-home .scroll-area {
    position: relative;
    max-width: 640px;
  }

  /* top-bar 維持 brand 在左、top-actions 在右上（不再預留橫向空間） */
  #screen-home .top-bar {
    padding-right: 300px;
    align-items: flex-start;
    width: min(640px, 100%);
    position: relative;
    padding-top: 0;
    padding-bottom: 24px;
    /* 留位置給下方堆疊的四圓鈕（圓 56 + 標籤 16 + 間距 ~24 + 緩衝 14 ≈ 110） */
    z-index: 2;
  }

  /* 四圓鈕：絕對定位到 top-actions「下方」（同樣靠右對齊） */
  /* top: 76px = top-actions 圓鈕 56 + 兩者間距 20 */
  #screen-home .home-tabs.four {
    position: absolute;
    top: 0x;
    right: 0;
    margin-top: 0;
    width: auto;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    z-index: 3;
  }

  /* 把四圓鈕的圓圈縮小到與 top-actions 的 icon-btn 同尺寸（48–56px） */
  #screen-home .home-tabs.four .tab-btn {
    gap: 6px;
  }

  #screen-home .home-tabs.four .tab-btn .circle {
    width: 56px;
    height: 56px;
    /* 與 .icon-btn 同款陰影（mobile 版本陰影較重） */
    box-shadow:
      5px 5px 10px var(--shadow-dark),
      -5px -5px 10px var(--shadow-light),
      inset 0 1px 0 rgba(255, 255, 255, .6);
  }

  #screen-home .home-tabs.four .tab-btn .circle svg {
    width: 22px;
    height: 22px;
  }

  #screen-home .home-tabs.four .tab-btn .lb {
    font-size: 14px;
    letter-spacing: .3px;
  }

  /* 把 top-actions 的 icon-btn 也升級到 56px，視覺與四圓鈕一致 */
  #screen-home .top-actions {
    gap: 12px;
  }

  #screen-home .top-actions .icon-btn {
    width: 56px;
    height: 56px;
    /* 多一個 inset highlight 與 home-tabs 圓圈同款 */
    box-shadow:
      5px 5px 10px var(--shadow-dark),
      -5px -5px 10px var(--shadow-light),
      inset 0 1px 0 rgba(255, 255, 255, .6);
  }

  #screen-home .top-actions .icon-btn svg {
    width: 22px;
    height: 22px;
  }

  /* 桌面版顯示 title 文字（用 ::after 抓 attr(title)），與 .home-tabs .lb 風格一致 */
  #screen-home .top-actions .icon-btn {
    position: relative;
    margin-bottom: 22px;
    /* 留 label 高度，避免被 panel 上緣蓋住 */
  }

  #screen-home .top-actions .icon-btn::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--text);
    white-space: nowrap;
    font-weight: 500;
    pointer-events: none;
    /* 點 label 不觸發父按鈕、不擋滑鼠事件 */
  }

  /* #go-health 專屬 override — HealthKit label 字體較大、字距較緊湊、距離 button 多一點 */
  #screen-home .top-actions #go-health::after {
    font-size: 15px;
    letter-spacing: 0;
    top: calc(100% + 6px);
  }

  /* 中間的音樂播放器面板置中 */
  #screen-home .panel {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
  }

  #screen-home .player-content {
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }

  #screen-home .vinyl-wrap {
    margin-left: auto;
    margin-right: auto;
  }

  /* ─────────────── 主頁桌面版重排 結束 ─────────────── */

  /* 音樂列表 3 欄 */
  .track-list {
    /* grid-template-columns: 1fr 1fr 1fr !important; */
    gap: 16px;
  }

  /* 白噪音 6 顆全部一行 */
  .noise-grid-large {
    /* grid-template-columns: repeat(6, 1fr) !important; */
    gap: 20px;
  }

  /* 統計頁：3 個 stats-card 並排（各佔 1/3 寬） */
  /* .stats-card 是 .scroll-area 的直接子層、沒有 wrapper，
     所以給 .scroll-area 開 grid，其他元素強制橫跨整列 */
  #screen-stats .scroll-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 16px;
    align-content: start;
    max-width: 640px;
    position: relative;
  }

  #screen-stats .scroll-area .stats-week {
    position: absolute;
    top: 78px;
    right: 8px;
    z-index: 2;
    width: min(340px, 100%);
  }

  #screen-stats .scroll-area>*:not(.stats-card) {
    grid-column: 1 / -1;
    /* 非卡片的元素（page-head、上方概覽 panel、卡片下方 footer 等）跨整行 */
  }

  #screen-stats .scroll-area>.stats-card {
    width: 100%;
    max-width: none;
    margin: 4px 0;
    position: relative;
    z-index: 2;
  }

  /* 主圖區（黑膠 + 控制）的字級加大一些 */
  #screen-home .track-name,
  #screen-home #track-name {
    font-size: 28px;
  }

  /* tab-bar 拉寬 */
  .tab-bar,
  #tab-bar,
  nav.bottom-nav {
    width: min(640px, 100%);
  }

  /* 兌換頁更寬鬆 */
  #screen-redeem .panel {
    width: min(640px, 100%);
  }
}

/* ==========================================================
   Ultrawide: ≥1600px
   ========================================================== */
@media (min-width: 1600px) {
  .panel {
    width: 1080px;
  }

  /* AI 教練觀察 panel — ultrawide 對齊主 panel */
  .ai-summary-panel {
    width: 1080px;
    max-width: 1080px;
  }

  /* 升級 Premium CTA — ultrawide 對齊 */
  .upgrade-cta-card {
    width: 1080px;
    max-width: 1080px;
  }

  .tab-bar,
  #tab-bar,
  nav.bottom-nav {
    width: 1080px;
  }
}

/* ==========================================================
   平板 / 桌面共用：
   - 滑鼠 hover 效果更明顯（手機用觸控不需要）
   ========================================================== */
@media (hover: hover) and (min-width: 768px) {
  .track-item:hover:not(.locked) {
    transform: translateY(-1px);
    transition: transform .18s ease;
  }

  .btn:hover,
  .neumo:hover,
  .icon-btn:hover {
    filter: brightness(1.05);
  }

  .tab-btn:hover {
    transform: scale(1.04);
    transition: transform .18s ease;
  }
}

/* ==========================================================
   橫向（landscape）特例 — iPad 橫拿 / 筆電
   - 黑膠主畫面用兩欄：左 vinyl，右 控制+進度+標題
   ========================================================== */
@media (min-width: 900px) and (orientation: landscape) {

  .page-head,
  .top-bar {
    min-width: 640px;
  }

  .player-content {
    width: 440px;
  }

  #screen-stats .scroll-area {
    max-width: 640px;
  }

  #screen-home .panel {
    display: flex;
    grid-template-columns: minmax(280px, 1fr) 1.2fr;
    gap: 32px;
    align-items: center;
    justify-content: center;
  }

  /* 黑膠視覺占左側 */
  #screen-home .vinyl,
  #screen-home #vinyl {
    grid-row: span 2;
    align-self: center;
  }
}