/* ============================================================
   Sakurumii · 10.3 移动端抽屉 + 桌面端汉堡导航（叠加层，后加载生效）
   - ≥768px：导航栏收纳为汉堡，点击菜单从顶部下滑
   - ≤767px：左右侧栏变抽屉，屏幕中间左右划呼出/收起
   ============================================================ */

/* ---------------- 桌面端：汉堡 + 顶部下滑菜单 ---------------- */
@media (min-width: 768px) {
  #navbar.firefly-navbar .nav-links { display: none !important; }
  #navbar.firefly-navbar .nav-actions > .menu-btn,
  #navbar.firefly-navbar .menu-btn { display: flex !important; }

  #nav-menu-panel .mobile-content {
    top: calc(env(safe-area-inset-top) + 4.4rem);
    right: auto;
    left: 50%;
    width: min(92vw, 30rem);
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 6.2rem);
    transform: translate(-50%, calc(-100% - 3rem));
    border-radius: 1.1rem;
    box-shadow: 0 1.6rem 3.6rem #030c1d3d;
    overflow-y: auto;
  }
  #nav-menu-panel.mobile-nav.active .mobile-content { transform: translate(-50%, 0); }

  /* 桌面面板里隐藏移动端专属的底部提示条 */
  #nav-menu-panel .mobile-footer { display: none; }
}

/* ---------------- 手机端：左右侧栏抽屉 ---------------- */
@media (max-width: 767.98px) {
  /* 左右栏内容已在抽屉中，底部重复堆叠的侧栏隐藏 */
  #mobile-bottom-sidebar { display: none !important; }

  #left-sidebar,
  #right-sidebar {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: auto;
    right: auto;
    width: min(85vw, 20.5rem);
    margin: 0;
    padding-top: env(safe-area-inset-top);
    z-index: 118;
    background: var(--card-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #left-sidebar {
    left: 0;
    transform: translateX(-104%);
    box-shadow: 1.25rem 0 3.5rem #030c1d3d;
  }
  #right-sidebar {
    right: 0;
    transform: translateX(104%);
    box-shadow: -1.25rem 0 3.5rem #030c1d3d;
  }
  body.skm-drawer-left #left-sidebar { transform: translateX(0); }
  body.skm-drawer-right #right-sidebar { transform: translateX(0); }

  .skm-scrim {
    position: fixed;
    inset: 0;
    z-index: 117;
    background: #060c187a;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  body.skm-drawer-left .skm-scrim,
  body.skm-drawer-right .skm-scrim { opacity: 1; pointer-events: auto; }

  /* ---------------- 首访滑动提示层 ---------------- */
  .skm-hint {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.4rem;
    background: rgba(15, 17, 21, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity 0.28s;
  }
  .skm-hint.skm-hint-hide { opacity: 0; pointer-events: none !important; }
  .skm-hint.skm-hint-armed { pointer-events: none; background: rgba(15, 17, 21, 0.18); }
  .skm-hint-card {
    width: min(20rem, 100%);
    padding: 1.5rem 1.4rem 1.3rem;
    border: 1px solid rgba(224, 62, 62, 0.24);
    border-radius: 1.1rem;
    background: var(--card-bg, #fff);
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.18);
    text-align: center;
    transition: opacity 0.28s;
  }
  .skm-hint-armed .skm-hint-card { opacity: 0.92; }
  .skm-hint-card svg { width: 11rem; height: auto; color: var(--primary, #e03e3e); }
  .skm-hint-title { margin-top: 0.7rem; font-size: 1rem; font-weight: 700; color: var(--text-color, #333); }
  .skm-hint-text { margin: 0.45rem 0 0; font-size: 0.8rem; line-height: 1.7; color: var(--text-color, #666); opacity: 0.72; }
  .skm-hint-btn {
    margin-top: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: 0.5rem 1.4rem;
    border: none;
    border-radius: 999px;
    background: var(--primary, #e03e3e);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
  }
  .skm-hint-btn:active { transform: scale(0.96); }
}