/* ============================================================
   FÉLICETTE // MOBILE OPTIMIZATION
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- 手机背景：铺满整个文档并随滚动移动 ---------- */
html {
    background: #080a0e url('star.webp') center center / cover no-repeat scroll !important;
    min-height: 100% !important;
  }
  body {
    background: transparent !important;
    min-height: 100vh !important;
  }
}
 .bg-layer {
   position: fixed;
    object-fit: fill; /* 强制拉伸填满 */
  }
  /* ---------- 主框架：三栏 → 单栏 ---------- */
  .capsule-frame {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 6px;
  }

  .panel-left,
  .panel-right {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .panel-left > .panel-block,
  .panel-right > .panel-block {
    flex: 0 0 230px !important;
    scroll-snap-align: start;
  }

  .crt-screen {
    padding: 12px 14px !important;
  }

  .archive-title {
    font-size: 28px !important;
    letter-spacing: 3px !important;
  }
  .archive-sub {
    font-size: 14px !important;
  }
  .archive-quote {
    font-size: 14px !important;
    padding-left: 10px !important;
  }

  .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .photo-card {
    aspect-ratio: 1 / 1 !important;
  }
  .photo-name {
    font-size: 11px !important;
  }
  .photo-date {
    font-size: 8px !important;
  }

  .video-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .nav-instrument {
    gap: 3px !important;
  }

  #hud-top {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }
  .hud-center {
    display: none !important;
  }

  #hud-bottom {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 10px !important;
    padding: 6px 10px !important;
  }

  .lightbox-nav.prev {
    left: 10px !important;
  }
  .lightbox-nav.next {
    right: 10px !important;
  }

  .photo-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  .photo-tab {
    white-space: nowrap !important;
    padding: 8px 12px !important;
  }

  .pagination {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 12px 0 !important;
  }
  .page-btn {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
  .page-num {
    width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
  }
}

@media (pointer: coarse) {
  .nav-btn,
  .ext-link,
  .photo-tab,
  .page-btn,
  .page-num {
    min-height: 44px !important;
    display: flex;
    align-items: center;
  }
  .photo-card {
    cursor: pointer;
  }
  .switch-cover {
    width: 62px !important;
    height: 34px !important;
  }
}