/* ==========================================================================
   components.css — 可复用零件：按钮、卡片、标签、图片位、问答、版本卡…
   凡是「换个页面还长这样」的东西都放这里。
   ========================================================================== */

/* ---- 按钮 ----------------------------------------------------------------
   实心用底色，次要动作一律用描边（inset box-shadow，不用 border ——
   1px 实边框会把按钮撑高 2px，和同一行的实心按钮对不齐）。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn svg {
  flex: 0 0 auto;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
}

.btn--primary:hover {
  background: var(--brand-hover);
  color: #fff;
}

.btn--ghost {
  background: var(--card);
  color: #243b63;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn--ghost:hover {
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--brand-mark);
}

/* 深色区块上的实心按钮反而要用白底，蓝底会糊进背景 */
.btn--light {
  background: var(--card);
  color: var(--brand-ink);
}

.btn--light:hover {
  background: var(--brand-surface);
  color: var(--brand-hover);
}

.btn--on-deep {
  background: var(--brand);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.btn--on-deep:hover {
  background: var(--brand-hover);
  color: #fff;
}

.btn--sm {
  padding: 13px 26px;
  font-size: 14.5px;
}

.btn--block {
  width: 100%;
}

/* ---- 小块标签（区块上方那行小字） -------------------------------------- */
.eyebrow {
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-ink);
}

.section--deep .eyebrow {
  color: var(--brand-mark);
}

/* 纯装饰的胶囊标签（Hero 版本条） */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--brand-surface);
  color: var(--brand-ink);
  font-size: var(--fs-3xs);
  font-weight: 500;
  line-height: 1.4;
}

.section--deep .pill {
  background: rgba(108, 180, 252, 0.14);
  color: var(--brand-mark);
}

/* ---- 卡片 ----------------------------------------------------------------
   白卡压白底必须留描边，否则边界会消失、看起来像一片没分组的文字。 */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}

.card__title {
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.card--roomy {
  padding: 28px;
  gap: var(--sp-4);
}

.card--roomy .card__title {
  font-size: var(--fs-h5);
}

/* 深色区块里的卡片 */
.card--deep {
  background: var(--deep-card);
  border-color: var(--deep-line);
}

.card--deep .card__title {
  color: var(--text-invert);
}

/* ---- 图标块 -------------------------------------------------------------- */
.icon-tile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--brand-surface);
  color: var(--brand-ink);
}

.icon-tile svg {
  width: 20px;
  height: 20px;
}

.icon-tile--deep {
  background: rgba(108, 180, 252, 0.14);
  color: var(--brand-mark);
}

/* ---- 文字档位 ------------------------------------------------------------
   浅底三级；深底三级。层级靠字号 + 字重 + 颜色一起分，不只靠变浅。 */
.t-body {
  color: var(--text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.t-muted {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.t-faint {
  color: var(--text-faint);
  font-size: var(--fs-3xs);
  line-height: var(--lh-normal);
}

.section--deep .t-body {
  color: var(--text-invert-body);
}

.section--deep .t-muted {
  color: var(--text-invert-muted);
}

.section--deep .t-faint {
  color: var(--text-invert-faint);
}

.t-lead {
  color: var(--text-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}

.t-num {
  font-family: var(--font-brand);
  font-weight: 800;
  line-height: 1;
}

/* ---- 图片位 -------------------------------------------------------------- */

/* 桌面窗口：标题栏 + 截图。窗口自己是「浏览器套壳」，
   里面的截图必须 object-fit: cover 铺满，否则会露出边框底色。 */
.window {
  overflow: hidden;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.window__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding-inline: 14px;
  background: #f0f5fd;
}

.window__bar span {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: #cdd9ea;
}

.window__shot {
  width: 100%;
  object-fit: cover;
  object-position: top left;
}

/* 手机：外框 + 屏幕。屏幕圆角要跟着外壳走，不然四角会露出外框。 */
.phone {
  padding: 10px;
  background: var(--card);
  border-radius: 34px;
  box-shadow: var(--shadow-md);
}

.phone__screen {
  overflow: hidden;
  border-radius: 26px;
  background: var(--deep);
}

.phone__screen img {
  width: 100%;
  object-fit: cover;
  object-position: top center;
}

/* 通用截图位 */
.shot {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--brand-surface-2);
}

.shot img {
  width: 100%;
  object-fit: cover;
}

/* ---- 等宽数据格子（悬浮窗那类） ----------------------------------------- */
.data-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.data-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-3xs);
  color: var(--text-muted);
}

.data-list__row b {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text);
  font-weight: 700;
}

/* ---- 弹幕气泡 ------------------------------------------------------------
   自带半透明底，所以压在任意画面上都读得清。
   再加一层文字阴影是给「底被冲淡」的极端情况兜底 —— 对比度护栏只合成
   background-color，看不见照片像素，图上的字必须靠结构保证。 */
.danmaku {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  /* 0.72 而不是更浅的透明：气泡压的是照片像素，底下的明暗不可控。
     透明度太低会在浅色像素上合成出中灰，白字掉到 4.2:1 看不清。 */
  background: rgba(15, 27, 51, 0.72);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.danmaku--tint {
  background: rgba(255, 255, 255, 0.92);
  color: #243b63;
  text-shadow: none;
}

/* ---- 带序号的能力条目 ---------------------------------------------------- */
.step-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.step-item__no {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

/* ---- 编号眉标（01 DANMAKU 这种） ---------------------------------------- */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand-mark);
}

/* 浅底上的编号眉标必须换成深蓝。
   --brand-mark 是给深色底用的（考核 3:1），压在白底只有 2.4:1，读不清。 */
.kicker--ink {
  color: var(--brand-ink);
}

/* ---- 分组头（功能页 01 播放核心） --------------------------------------- */
.group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.group-head__no {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.group-head__title {
  font-size: var(--fs-h4);
  font-weight: 700;
}

/* ---- 问答 ----------------------------------------------------------------
   用原生 <details>，无 JS 也能展开。 */
.qa {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease);
}

.qa[open] {
  border-color: var(--brand-mark);
}

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 22px var(--sp-6);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  line-height: var(--lh-snug);
  list-style: none;
}

.qa__q::-webkit-details-marker {
  display: none;
}

.qa__q::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}

.qa[open] .qa__q::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.qa__a {
  padding: 0 var(--sp-6) 22px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

/* ---- 版本卡 -------------------------------------------------------------- */
.version {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}

.version__no {
  font-size: var(--fs-h4);
  color: var(--brand-ink);
}

.version__date {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--text-faint);
}

/* ---- 技术栈标签 ---------------------------------------------------------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--brand-surface);
  color: #243b63;
  font-size: var(--fs-3xs);
  font-weight: 500;
  line-height: 1.4;
}

/* ---- 深色面板里的字段行 -------------------------------------------------- */
.field {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 12px var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
}

.field__label {
  flex: 0 0 88px;
  font-size: 11.5px;
  color: var(--text-invert-faint);
}

.field__value {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: #c7d6ee;
  overflow-wrap: anywhere;
}

/* ---- 代码块 -------------------------------------------------------------- */
.code {
  padding: var(--sp-4) 18px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--deep-line);
  color: var(--text-invert-body);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.75;
  overflow-x: auto;
}

.code__caption {
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-4xs);
  font-weight: 600;
  color: var(--brand-mark);
}

/* ---- 状态点（绿色「已连接」） ------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(74, 222, 128, 0.14);
  color: #4ade80;
  font-size: var(--fs-4xs);
  font-weight: 500;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* ---- 平台卡（下载页） ---------------------------------------------------- */
.plat {
  position: relative; /* 「推荐」角标要靠它定位 */
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 22px var(--sp-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.plat:hover {
  border-color: var(--brand-mark);
  box-shadow: var(--shadow-sm);
}

.plat__info {
  flex: 1 1 auto;
  min-width: 0;
}

.plat__name {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.plat__meta {
  margin-top: 3px;
  color: var(--text-faint);
  font-size: var(--fs-3xs);
  line-height: var(--lh-normal);
}

/* ---- 区块之间的箭头（番剧源页的三步流） ---------------------------------- */
.flow {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.flow__arrow {
  flex: 0 0 auto;
  color: var(--brand-mark);
}

/* ==========================================================================
   组件级响应式
   必须写在这里、紧跟组件定义 —— 换到 layout.css 去写的话，
   同优先级下会被后加载的本文件静默盖掉，且完全没有报错。
   ========================================================================== */

/* 平台卡：按钮落下去占满整行 —— 只在「横排放不下」时才落。
   按钮文案是「Windows 下载 / 安卓下载 / iOS 下载 …」这类带平台名的长文案（最宽 146px），
   比原来的「下载」（81px）多占 65px。卡片是「图标 44 + 信息区 + 按钮」横排，
   信息区被压到 93px 以下时，平台名与副标题就双双换行。
   实测临界（副标题恰好折行的那一刻）：两列档 798px、三列档 1184px —— 两条都对应
   信息区 93px，互相印证。取整并留 ~15px 余量，落成 799 / 1200 两个断点。

   破坏区间是**两段**、中间夹着一段好的（800–900px 的两列卡片有 366px+ 宽，够用），
   所以这里必须用并列条件，写成一个大断点会让 800–900px 白白长高一行。 */
@media (max-width: 1200px) and (min-width: 901px),
  (max-width: 799px) {
  .plat {
    flex-wrap: wrap;
  }

  .plat .btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  /* 三步流横排放不下，改竖排；箭头跟着转 90 度，方向才还说得通 */
  .flow {
    flex-direction: column;
    align-items: stretch;
  }

  .flow__arrow {
    align-self: center;
    transform: rotate(90deg);
  }
}

@media (max-width: 560px) {
  .qa__q {
    padding: 18px var(--sp-5);
    font-size: var(--fs-sm);
  }

  .qa__a {
    padding: 0 var(--sp-5) 18px;
  }

  /* 平台卡的按钮落行规则在上面那条 1175/775 的媒体查询里（已含 ≤560） */

  .field {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .field__label {
    flex: none;
  }

  /* 叠在画面上的小构件要在最窄视口单独收一档：
     容器缩得比文字快，1440 下占 23% 的胶囊到 390 会涨到 35%。 */
  .danmaku {
    padding: 5px 10px;
    font-size: 11px;
  }
}