/* ============================================================================
   斗词场 · PC / 大屏适配（第 27 轮 · 任务 6）
   ============================================================================
   设计原则
     1) 手机（<768px）完全不受影响 —— 本文件所有规则都包在 min-width 媒体查询里。
     2) 平板（768–1023px）：去掉「手机壳」，页面留白加大。
     3) 桌面（≥1024px）：真正的 PC 布局 ——
          · 左侧固定侧边栏（品牌 + 主导航），取代底部 tabbar
          · 右侧内容区最大 1180px 居中
          · 词库卡片两列、单词列表按宽度自动分栏
          · 鼠标 hover 反馈（手机端只有 :active）
     4) 超宽屏（≥1600px）：内容区不再变宽，只增加留白。

   ⚠️ 为什么每条选择器都带 `html ` 前缀：
      各视图样式（js/views/*.css）是**运行时注入到 head 末尾**的，在 pc.css 之后解析。
      同特异度下 pc.css 会输给它们（例如 `.banks-group__list{display:flex}` 会盖掉
      这里的 `display:grid`）。加 `html ` 把特异度从 (0,1,0) 提到 (0,1,1) 就能稳压，
      而且不需要 `!important`。
   ========================================================================== */

/* ---------- 平板：去掉手机壳的外观处理 ---------- */
@media (min-width: 768px) {
  html .stage {
    padding: 0;
    place-items: stretch;
    display: block;
  }
  html .phone {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  html .phone__notch { display: none; }
  html .page { padding: var(--s-5) var(--s-5) var(--s-7); }
}

/* ---------- 桌面：左侧导航 + 居中内容区 ---------- */
@media (min-width: 1024px) {
  html .phone {
    flex-direction: row;
  }

  /* ---- 侧边栏 ---- */
  html .tabbar {
    order: -1;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    width: 208px;
    height: 100dvh;
    padding: 26px 14px 18px;
    border-top: 0;
    border-right: 1px solid var(--c-line);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px) saturate(1.2);
  }
  html .tabbar[hidden] { display: none; }

  /* 品牌块（PC 端才显示） */
  html .tabbar::before {
    content: '斗词场';
    display: block;
    margin: 0 10px 20px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--c-primary);
  }
  html .tabbar::after {
    content: '背单词 · 斗词场';
    display: block;
    order: 99;
    margin: auto 10px 0;
    font-size: var(--f-xs);
    letter-spacing: .6px;
    color: var(--c-text-3);
  }

  html .tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: var(--r-md);
    font-size: var(--f-md);
    letter-spacing: .5px;
    transition: background var(--tr-fast), color var(--tr-fast);
  }
  html .tab:hover { background: var(--c-glass); color: var(--c-text); }
  html .tab.is-active { background: var(--c-primary-weak, #e3f2f6); }

  /* ---- 内容区 ---- */
  html .view {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    scrollbar-width: thin;
  }
  html .view > .page {
    width: 100%;
    max-width: 1180px;
    padding: var(--s-5) 30px var(--s-8);
  }
  html .view > .bt-page { max-width: 880px; }
  html .view > .wd-page { max-width: 900px; }

  /* PC 上滚动条要看得见（手机上仍然隐藏） */
  html .view::-webkit-scrollbar { width: 10px; height: 10px; }
  html .view::-webkit-scrollbar-thumb {
    background: rgba(15, 42, 58, .16);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  html .view::-webkit-scrollbar-thumb:hover { background: rgba(15, 42, 58, .28); background-clip: content-box; }

  /* ---- 词库页 ----
     ⚠️ 这里**故意保持单列**：第 28 轮用户要求「高频词库卡片和其他词库样式一致」，
     而两列网格会把「主词库 → 它的高频子词库」拆到不同列/不同行，读不出父子关系
     （实测 考研词汇 与 考研英语一/二高频 被排成 3 张卡两行）。
     单列 + 限宽既保证顺序正确，也避免卡片在 1180px 里被拉得过宽。 */
  html .banks-group__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    max-width: 760px;
  }
  html .banks-card { width: auto; min-width: 0; }
  html .banks-group__list > .card + .card { margin-top: 0; }

  /* ---- 查看词库 / 搜索：单词列表按可用宽度自动分栏 ---- */
  html .banks-browse .banks-words__list,
  html .banks-lettergroup .banks-words__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--s-2);
    align-items: start;
  }
  html .banks-browse .banks-word,
  html .banks-lettergroup .banks-word { max-width: none; }

  /* ---- 鼠标交互反馈 ---- */
  html .card:hover { border-color: var(--c-line-strong); }
  html .btn { cursor: pointer; }
  html .banks-word:hover { border-color: var(--c-line-strong); }
  html .banks-word:hover .banks-word__go { color: var(--c-primary); }
  html .banks-letters__b:hover { border-color: var(--c-primary); }

  /* ---- 底部浮起的「开始匹配」对齐内容区留白 ---- */
  html .banks-dock {
    margin-left: calc(-1 * 30px);
    margin-right: calc(-1 * 30px);
    padding-left: 30px;
    padding-right: 30px;
  }
  html .toast { bottom: 28px; }
}

/* ---------- 超宽屏：只加留白，不再拉宽内容 ---------- */
@media (min-width: 1600px) {
  html .view > .page { max-width: 1280px; }
  html .tabbar { width: 236px; }
}