/* ==========================================================================
   responsive.css — 断点收敛
   页面断点：1024 / 768 / 480；视频网格：600 / 960 / 1280。
   视频卡片从单列逐级增加到四列，移动端保留进度与完整标题。
   ========================================================================== */

@media (min-width: 600px) {
  .vlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .vlist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .vlist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .cgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  /* 顶栏：隐藏居中导航，改用汉堡菜单 */
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  .nav__mail {
    display: none;
  }

  /* 窄屏上搜索框不再聚焦展开，否则会把主题按钮挤出屏幕 */
  .navsearch__input,
  .navsearch__input:focus {
    width: 8rem;
  }

  .container {
    padding-inline: var(--sp-5);
  }

  .site-main {
    padding-block: var(--sp-7) var(--sp-8);
  }

  .pagehead__title {
    font-size: var(--fs-2xl);
  }

  .cgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .statbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .tools {
    align-items: stretch;
    flex-direction: column;
  }

  .tools__left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .sorts {
    padding-left: 0;
    border-left: none;
  }

  .tools__right {
    width: 100%;
  }

  .search {
    flex: 1;
    width: auto;
  }

  .chead__main {
    align-items: flex-start;
  }

  .chead__name {
    font-size: var(--fs-xl);
  }

  .footer__inner {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .chart {
    gap: var(--sp-2);
  }

  .chart__bar {
    max-width: 1.75rem;
  }

  .statbar--flat {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .rankrow {
    gap: var(--sp-3);
  }

  .deletedrow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--sp-4);
  }

  .statbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statbar__value {
    font-size: var(--fs-xl);
  }

  .batchbar {
    gap: var(--sp-2);
  }

  .gate__card {
    padding: var(--sp-5);
  }
}

/* 抽屉：与主站一致，只在窄屏出现 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--c-backdrop);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.drawer.is-open .drawer__backdrop {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(20rem, 84vw);
  padding: var(--sp-6);
  background-color: var(--c-surface);
  border-left: 1px solid var(--c-border);
  box-shadow: var(--sh-lg);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__link {
  display: block;
  padding: var(--sp-3) 0;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--c-border);
}

.drawer__link.is-active {
  color: var(--c-accent);
}

/* 触屏没有 hover，挪位按钮必须常显，否则根本点不到 */
@media (hover: none) {
  .rankrow__grip {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .rankrow {
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  .rankrow__meta {
    font-size: var(--fs-xs);
  }

  .rankrow__grip {
    opacity: 1;
  }
}

/* 预览面板在小屏上要放得下：网格减列、面板贴边 */
@media (max-width: 900px) {
  .uppop__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .uppop {
    padding: var(--sp-3);
  }

  .uppop__panel {
    width: 100%;
    max-height: 92vh;
  }

  .uppop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }

  .uppop__head,
  .uppop__scroll,
  .uppop__all {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
}

/* ── 追更队列 / 更新时间轴（2026-11-02 上线的 L1 + U1） ─────────────── */
/* 窄屏上待看时长挪到第二行，序号和进度条在第一行；
   时间轴藏掉 UP 主名（标题已经够长），竖线左移，别把标题挤成一条缝。 */

@media (hover: none) {
  .rankrow__grip {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .rankrow {
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    gap: var(--sp-2);
    row-gap: var(--sp-1);
    padding-inline: 0;
  }

  .rankrow__no {
    grid-column: 1;
    grid-row: 1;
  }

  .rankrow__body {
    grid-column: 2;
    grid-row: 1;
  }

  .rankrow__grip {
    grid-column: 3;
    grid-row: 1;
  }

  .rankrow__meta {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .titem {
    gap: var(--sp-2);
  }

  .titem__who {
    display: none;
  }

  .tgroup__items {
    padding-left: var(--sp-4);
  }

  .titem__dot {
    left: calc(var(--sp-4) * -1 + 0.0313rem);
  }
}