/* ==========================================================================
   cards.css — 浏览类内容件：游戏卡 · 开服表 · 表格 · 日期分组
   依赖：tokens.css / base.css / components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   游戏卡
   -------------------------------------------------------------------------- */
.gcard {
  position: relative;
  display: block;
  padding: var(--pad-card);
  border-radius: var(--r-md);
  background: var(--bg-3);
  background-image: var(--grad-sheen);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  text-align: center;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.gcard .ico {
  width: 68px;
  height: 68px;
  margin: 0 auto var(--sp-2);
  border-radius: var(--r-icon);
  object-fit: cover;
  background: var(--bg-4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--sh-inset);
  transition: transform var(--dur-3) var(--ease-out);
}
.gcard .nm {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--txt-1);
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gcard .suf {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acc-300);
  line-height: 1.4;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcard .tg {
  font-size: 12px;
  color: var(--txt-3);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcard > .badge-discount {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: var(--z-badge);
}
.gcard .rank {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: var(--z-badge);
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--bg-5);
  color: var(--txt-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.gcard .rank.is-top { background: var(--grad-cta); color: var(--acc-ink); }

@media (hover: hover) {
  .gcard:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--acc-400), var(--sh-2);
  }
  .gcard:hover .ico { transform: scale(1.03); }
}
.gcard:active { transform: scale(.985); }

@media (max-width: 599px) {
  .gcard .ico { width: 60px; height: 60px; }
  .gcard > .badge-discount { top: 5px; right: 5px; }
}

/* 图标描边按折扣档位加重（网格里一眼看出力度） */
.gcard.is-s .ico { box-shadow: 0 0 0 1.5px rgba(255, 61, 110, .55), var(--sh-inset); }
.gcard.is-a .ico { box-shadow: 0 0 0 1.5px rgba(255, 176, 32, .45), var(--sh-inset); }

/* --------------------------------------------------------------------------
   开服表 / 通用表格
   移动端：表头隐藏、类型列并入游戏名（见文件底部断点）
   -------------------------------------------------------------------------- */
.tbl-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  overflow-x: auto;
}
table.tbl { width: 100%; font-size: 14px; }
table.tbl th,
table.tbl td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  vertical-align: middle;
}
table.tbl th {
  background: var(--bg-3);
  color: var(--txt-2);
  font-size: 13px;
  font-weight: 600;
}
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td.num { font-variant-numeric: tabular-nums; }
table.tbl td.wrap-cell { white-space: normal; }
table.tbl .col-cta { width: var(--w-cta-col); text-align: right; }
table.tbl a:hover { color: var(--acc-400); }

/* --------------------------------------------------------------------------
   开服表列宽：固定表格布局，把「列宽」从内容手里收回来
   --------------------------------------------------------------------------
   auto 布局下，一个 19 字的游戏名会把游戏列撑到 299px，整张表涨到 539px —— 
   在 366px 的手机上就把行尾 CTA 挤出可视区，只能横向拖才能拿到「领礼包」。
   所以这里用 table-layout:fixed 显式定列，游戏列吃剩余宽度并截断。
   -------------------------------------------------------------------------- */
table.tbl--kaifu { table-layout: fixed; }
table.tbl--kaifu th:nth-child(1), table.tbl--kaifu td:nth-child(1) { width: 134px; }
table.tbl--kaifu th:nth-child(3), table.tbl--kaifu td:nth-child(3) { width: 150px; }
table.tbl--kaifu th:nth-child(4), table.tbl--kaifu td:nth-child(4) { width: 92px; }
table.tbl--kaifu th:nth-child(5), table.tbl--kaifu td:nth-child(5) { width: var(--w-cta-col); }

/* 时间格：宽屏一行、窄屏折两行（日期在上、时刻在下，省下约 54px 列宽） */
table.tbl--kaifu .st-d { color: var(--txt-3); }
table.tbl--kaifu .st-t { color: var(--txt-1); }
table.tbl--kaifu tr.is-opened .st-t { color: var(--txt-3); }

/* 开服行的游戏单元格：28px 图标 + 名 + 区服/类型副行 */
.srow-game { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.srow-game .ico {
  width: 28px;
  height: 28px;
  border-radius: var(--r-icon);
  object-fit: cover;
  flex: none;
  background: var(--bg-4);
}
.srow-game .sn { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.srow-game .sn-name { color: var(--txt-1); }   /* 详情页：指向当前页的名字不渲染成链接 */
.srow-game .sn-sub {
  display: none;
  font-size: 12px;
  color: var(--txt-3);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
/* 名与副行都必须自己截断：父级只是 flex 容器，光有 min-width:0 不会让文字收住 */
.srow-game .sn a,
.srow-game .sn-name,
.srow-game .sn-sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   礼包中心的按游戏表：同样固定列宽，窄屏把「礼包内容」降级进游戏单元格
   -------------------------------------------------------------------------- */
table.tbl--libao { table-layout: fixed; }
table.tbl--libao th:nth-child(2), table.tbl--libao td:nth-child(2) { width: 92px; }
table.tbl--libao th:nth-child(3), table.tbl--libao td:nth-child(3) { width: 64px; }
table.tbl--libao th:nth-child(4), table.tbl--libao td:nth-child(4) { width: 240px; }
table.tbl--libao th:nth-child(5), table.tbl--libao td:nth-child(5) { width: var(--w-cta-col); }

table.tbl--libao .nm-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
table.tbl--libao .nm-line > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.tbl--libao .nm-line > .badge-discount { flex: none; }
/* 礼包内容：宽屏独立成列，窄屏折到游戏名下方（见文件底部断点） */
table.tbl--libao .sn-sub { display: none; }

/* 日期分组行（开服表内，设计稿 02/08 的「10-08 周三 · 今日 · 12 个新区」）
   写法：<tr class="dategroup"><td colspan="5">…</td></tr>
   槽点记录：这里曾经是可独立使用的 .dategroup 块（display:flex + position:sticky），
   但实际用不了 —— 它要么在表外（列宽对不齐），要么在 .tbl-wrap 里（overflow 容器
   让 sticky 失效）。改成表格内的一行，列宽天然对齐。 */
table.tbl tr.dategroup > td {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: auto;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt-2);
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
table.tbl tr.dategroup .dg-n { color: var(--acc-400); font-variant-numeric: tabular-nums; }
table.tbl tr.dategroup .dg-badge {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--acc-ink);
  background: var(--acc-400);
}
table.tbl tr.dategroup .dg-badge.is-tomorrow { background: var(--hot-300); }

/* 行状态：今日冷色竖条 / 明日洋红竖条 / 已开弱化 */
tr.is-today > td:first-child { box-shadow: inset 3px 0 0 var(--grad-cool); }
tr.is-today > td.num { color: var(--acc-400); }
tr.is-tomorrow > td:first-child { box-shadow: inset 3px 0 0 var(--hot-400); }
tr.is-opened { color: var(--txt-3); }
tr.is-opened > td.num { color: var(--txt-3); }

/* --------------------------------------------------------------------------
   移动端降级
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  table.tbl thead { display: none; }
  table.tbl th, table.tbl td { padding: 9px 10px; }
  /* 开服表降到规格要求的 3 列：时间 / 游戏+区服 / CTA（88px 不可压缩）
     区服列的内容已经在 .sn-sub 里，独立成列只会白占 150px */
  table.tbl--kaifu th:nth-child(1), table.tbl--kaifu td:nth-child(1) { width: 58px; }
  table.tbl .col-type,
  table.tbl--kaifu .col-srv { display: none; }
  table.tbl--kaifu .st-d,
  table.tbl--kaifu .st-t { display: block; }
  table.tbl--kaifu .st-d { font-size: 11px; line-height: 1.5; }
  .srow-game .sn-sub { display: block; }
  /* 礼包中心：4 列 → 3 列（游戏+礼包内容 / 礼包数 / CTA） */
  table.tbl--libao th:nth-child(4), table.tbl--libao td:nth-child(4) { display: none; }
  table.tbl--libao .sn-sub {
    display: block;
    font-size: 12px;
    color: var(--txt-3);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  tr.is-today > td:first-child,
  tr.is-tomorrow > td:first-child { box-shadow: none; }
  tr.is-today > td:first-child { color: var(--acc-400); }
  tr.is-tomorrow > td:first-child { color: var(--hot-300); }
}

/* --------------------------------------------------------------------------
   三栏中心栏的开服表（设计稿 07/09）：中心只有 596px
   --------------------------------------------------------------------------
   固定列宽下，时间 134 + 区服 150 + 类型 92 + CTA 88 会吃掉 464px，
   留给游戏名的只剩 130px —— 实测只显示得下两个字（「魔晶…」）。
   这里把三列各让一步，并把时间列按「只显示 HH:MM」收窄，游戏名拿到 230px。
   只在 ≥1280 生效：窄屏下 .layout-3col 已经塌成单栏，列宽另有移动端规则。
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .layout-3col .col-main table.tbl--kaifu th:nth-child(1),
  .layout-3col .col-main table.tbl--kaifu td:nth-child(1) { width: 92px; }
  .layout-3col .col-main table.tbl--kaifu th:nth-child(3),
  .layout-3col .col-main table.tbl--kaifu td:nth-child(3) { width: 110px; }
  .layout-3col .col-main table.tbl--kaifu th:nth-child(4),
  .layout-3col .col-main table.tbl--kaifu td:nth-child(4) { width: 72px; }
}