/* ============ 国服卡池时间线 · 页面样式 ============
   只写这一页自己的组件，全站基础（色带 / 面板 / 鎏金标题 / 按钮）全部走 ../assets/site.css。
   改的时候注意：390px 宽不能出现横向滚动，所以所有网格列都要 minmax(0,1fr)。 */

.bn-body { position: relative; z-index: 2; margin-top: -70px; padding-bottom: 24px; }

/* 页头下面那排数字 */
.bn-stat { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 18px; color: var(--ink-2); font-size: 14px; }
.bn-stat span { display: inline-flex; align-items: baseline; gap: 4px; }
.bn-stat b { font: 900 26px/1 var(--num); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255, 190, 90, .4)); }
.bn-stat i { font-style: normal; color: var(--ink-3); font-size: 12.5px; }
.bn-stat .dot { color: var(--ink-3); opacity: .5; }

/* 说明面板 */
.bn-how { padding: 18px 22px 20px; margin-bottom: 34px; }
.bn-how h2 { margin: 0 0 10px; font: 800 16px/1.4 var(--serif); letter-spacing: .12em; color: var(--gold-hi); }
.bn-how ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bn-how li { position: relative; padding-left: 17px; color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }
.bn-how li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px rgba(246, 210, 122, .55); }
.bn-how b { color: var(--ink); font-weight: 700; }
.bn-how span { color: var(--gold-hi); }

/* 区块 */
.bn-sec { margin-bottom: 44px; }
.sec-head { margin-bottom: 16px; }
.sec-head .ribbon { font-size: 26px; }
.sec-head .hint { margin: 0; }

/* ---------------- 筛选条 ---------------- */
.bn-tools { --cs: 34px; padding: 14px 16px; margin-bottom: 14px; }
.bn-trow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bn-trow + .bn-trow { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.bn-trow .k { flex: none; color: var(--ink-3); font-size: 12.5px; letter-spacing: .1em; min-width: 34px; }
.bn-search { flex: 1 1 190px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border: 1px solid var(--line-soft); background: rgba(6, 9, 20, .55); border-radius: 2px; }
.bn-search svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.bn-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 14px var(--sans); outline: none; }
.bn-search input::placeholder { color: var(--ink-3); }
.bn-search:focus-within { border-color: var(--gold); }
.bn-sum { flex: none; color: var(--ink-3); font-size: 12.5px; }
.bn-sum b { color: var(--gold-hi); font: 700 15px var(--num); margin: 0 2px; }
.bn-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.bn-chip-btn { padding: 3px 11px; border: 1px solid var(--line-soft); background: rgba(6, 9, 20, .4); color: var(--ink-2); font-size: 12.5px; border-radius: 2px; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
.bn-chip-btn:hover { color: var(--gold-hi); border-color: var(--line); }
.bn-chip-btn[aria-pressed="true"] { color: #1a0f00; background: linear-gradient(180deg, #f6d27a, #d4a64a); border-color: #f6d27a; font-weight: 700; }
.bn-switches { display: flex; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.bn-sw { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.bn-sw input { appearance: none; width: 34px; height: 19px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: rgba(6, 9, 20, .7); position: relative; cursor: pointer; transition: background-color .2s, border-color .2s; }
.bn-sw input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-3); transition: transform .2s, background-color .2s; }
.bn-sw input:checked { border-color: var(--gold); background: rgba(212, 166, 74, .22); }
.bn-sw input:checked::after { transform: translateX(15px); background: var(--gold-hi); box-shadow: 0 0 8px rgba(246, 210, 122, .8); }
.bn-sw-mini { margin-left: auto; }

/* ---------------- 时间线 ---------------- */
.bn-tl { --pad: 16px; --dcol: 74px; --dot: var(--gold); padding: 6px var(--pad) 10px; }
.bn-tl::before {
  content: ""; position: absolute; top: 30px; bottom: 22px; width: 1px; pointer-events: none;
  left: calc(var(--pad) + var(--dcol) - 9px);
  background: linear-gradient(180deg, rgba(212, 166, 74, 0), var(--line) 3%, var(--line) 95%, rgba(212, 166, 74, 0));
}

.bn-month { position: relative; }
.bn-mhead {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 4px; margin: 0;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; text-align: left;
}
.bn-mhead b { font: 900 21px/1.2 var(--serif); letter-spacing: .1em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #2a1800); }
.bn-mhead .n { color: var(--ink-3); font-size: 12.5px; }
.bn-mhead .chev { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.bn-mhead[aria-expanded="false"] .chev { transform: rotate(-45deg) translate(-2px, 2px); }
.bn-mhead:hover b { filter: drop-shadow(0 2px 0 #2a1800) drop-shadow(0 0 12px rgba(246, 210, 122, .55)); }

.bn-ev { display: grid; grid-template-columns: var(--dcol) minmax(0, 1fr); gap: 0 12px; padding: 13px 0; position: relative; }
.bn-ev + .bn-ev { border-top: 1px solid rgba(212, 166, 74, .12); }
.bn-ev:hover { background: rgba(246, 210, 122, .035); }

.bn-when { position: relative; padding-right: 12px; text-align: right; }
.bn-when b { display: block; font: 800 17px/1.25 var(--num); color: var(--ink); letter-spacing: .02em; }
.bn-when span { display: block; color: var(--ink-3); font-size: 11.5px; line-height: 1.3; }
.bn-when::after { /* 时间线上的菱形节点 */
  content: ""; position: absolute; right: -3.5px; top: 6px; width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--dot); box-shadow: 0 0 9px rgba(246, 210, 122, .6);
}
.bn-ev[data-fut="1"] .bn-when::after { background: var(--ink-3); box-shadow: none; }
.bn-when b.d2 { font: 600 12px var(--sans); color: var(--ink-3); letter-spacing: .04em; padding-top: 3px; }

.bn-what { min-width: 0; }
.bn-line1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.bn-line1 h3 { margin: 0; font: 800 17px/1.35 var(--serif); letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; }
.bn-tier { flex: none; padding: 1px 7px; border-radius: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; border: 1px solid currentColor; }
.bn-tier.t-blue { color: #9ec4ff; }
.bn-tier.t-gold { color: #f6d27a; }
.bn-tier.t-red { color: #ff9a6a; }
.bn-kind { flex: none; color: var(--ink-3); font-size: 11.5px; padding: 1px 7px; border: 1px solid rgba(141, 134, 112, .4); border-radius: 2px; }
.bn-badge { flex: none; padding: 1px 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #1a0f00; background: linear-gradient(180deg, #ffd27a, #d9a440); border-radius: 2px; }
.bn-ev[data-fut="1"] { opacity: .72; }
.bn-ev[data-fut="1"] .bn-line1 h3 { color: var(--ink-2); }

.bn-up { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 7px; }
.bn-up .lb { flex: none; color: var(--ink-3); font-size: 11.5px; letter-spacing: .08em; }
.bn-up .lb em { font-style: normal; color: var(--gold); }
.bn-hc { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border: 1px solid var(--line-soft); border-radius: 2px; background: rgba(6, 9, 20, .5); max-width: 100%; }
.bn-hc img { flex: none; width: 26px; height: 26px; border-radius: 2px; object-fit: cover; object-position: 50% 18%; background: #0d1430; }
.bn-hc b { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.bn-hc i { font-style: normal; font: 700 11px var(--num); color: var(--gold-hi); }
.bn-hc.q5 { border-color: rgba(246, 210, 122, .55); }
.bn-hc.q4 { border-color: rgba(190, 140, 255, .45); }
.bn-hc.q4 i { color: #d3b3ff; }
.bn-hc.q3 { border-color: rgba(126, 176, 255, .4); }
.bn-hc.q3 i { color: #a8c8ff; }

.bn-new { margin: 6px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.bn-new b { color: var(--gold-hi); font-weight: 600; }
.bn-new .out { color: #e09a90; }
.bn-new .more { color: var(--ink-3); }

/* ---------------- 英雄表 ---------------- */
.bn-ht { padding: 4px 6px 8px; }
.bn-hrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) 96px 78px 66px; align-items: center; gap: 10px; padding: 9px 10px; }
.bn-hhead { color: var(--ink-3); font-size: 12px; letter-spacing: .1em; border-bottom: 1px solid var(--line-soft); position: sticky; top: 61px; z-index: 3; background: #2a1f14; box-shadow: 0 -6px 0 #2a1f14; }
.bn-hhead .c-date, .bn-hhead .c-num { text-align: right; }
.bn-hbody { border-radius: 2px; }
.bn-hev { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; border-bottom: 1px solid rgba(212, 166, 74, .1); }
.bn-hev:hover { background: rgba(246, 210, 122, .05); }
.bn-hev .pic { width: 38px; height: 38px; border-radius: 2px; object-fit: cover; object-position: 50% 18%; background: #0d1430; border: 1px solid var(--line-soft); }
.bn-hev .who { min-width: 0; }
.bn-hev .who > b { display: block; font: 700 15px/1.3 var(--serif); letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; }
.bn-hev .who small { display: block; color: var(--ink-3); font-size: 11.5px; line-height: 1.4; }
.bn-hev .q5 b { color: var(--gold-hi); }
.bn-hev .date { text-align: right; font: 600 13.5px var(--num); color: var(--ink-2); white-space: nowrap; }
.bn-hev .date.pre { color: var(--ink-3); font-family: var(--sans); font-size: 12px; }
.bn-hev .date.none { color: var(--ink-3); font-family: var(--sans); font-size: 12px; }
.bn-hev .num { text-align: right; font: 600 14px var(--num); color: var(--ink-2); white-space: nowrap; }
.bn-hev .num.z { color: var(--ink-3); }
.bn-hev .sub { display: none; }

.bn-drawer { padding: 4px 10px 12px 48px; border-bottom: 1px solid rgba(212, 166, 74, .1); }
.bn-drawer .dh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.bn-drawer .dh h4 { margin: 0; font: 800 15px var(--serif); letter-spacing: .06em; color: var(--gold-hi); }
.bn-drawer .dh span { color: var(--ink-3); font-size: 12px; }
.bn-drawer .dlist { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; padding-right: 4px; }
.bn-drawer .ditem { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 8px; font-size: 12.5px; color: var(--ink-2); border-radius: 2px; }
.bn-drawer .ditem:nth-child(odd) { background: rgba(6, 9, 20, .35); }
.bn-drawer .ditem time { font-family: var(--num); color: var(--ink-3); }
.bn-drawer .ditem .nm { overflow-wrap: anywhere; }
.bn-drawer .ditem .tg { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.bn-drawer .ditem .up { color: var(--gold-hi); font-weight: 700; }
.bn-drawer .ditem .fut { padding: 0 4px; font-size: 10.5px; color: #2a1600; background: linear-gradient(180deg, #ffd27a, #d9a440); border-radius: 2px; }

.bn-foot-hint { margin: 14px 0 0; color: var(--ink-3); font-size: 13px; text-align: center; }
.bn-src { margin: 0 0 30px; color: var(--ink-3); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.bn-src b { color: var(--ink-2); font-weight: 600; }

/* ---------------- 手机 ---------------- */
@media (max-width: 760px) {
  .bn-body { margin-top: -56px; }
  .bn-stat { font-size: 12.5px; gap: 4px 8px; }
  .bn-stat b { font-size: 21px; }
  .bn-how { padding: 15px 16px 16px; }
  .bn-how li { font-size: 13px; }
  .sec-head .ribbon { font-size: 22px; }
  .bn-tools { padding: 12px; }
  .bn-trow .k { min-width: 100%; }
  .bn-tl { --pad: 12px; --dcol: 54px; }
  .bn-tl::before { left: calc(var(--pad) + var(--dcol) - 8px); }
  .bn-when { padding-right: 10px; }
  .bn-when b { font-size: 14.5px; }
  .bn-when span { font-size: 10.5px; }
  .bn-line1 h3 { font-size: 15.5px; }
  .bn-hc { padding: 2px 6px 2px 2px; }
  .bn-hc img { width: 22px; height: 22px; }
  .bn-hc b { font-size: 12px; }
  .bn-hc i { font-size: 10.5px; }
  .bn-new { font-size: 12px; }

  .bn-ht { padding: 2px 2px 6px; }
  .bn-hhead { display: none; }
  .bn-hrow { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 9px 8px; }
  .bn-hev .c-num { display: none; }
  .bn-hev .sub { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11.5px; }
  .bn-hev .sub b { display: inline; color: var(--gold-hi); font: 700 11.5px var(--num); }
  .bn-hev .date { font-size: 12.5px; }
  .bn-drawer { padding: 4px 8px 10px 40px; }
  .bn-drawer .ditem { grid-template-columns: 72px minmax(0, 1fr); }
  .bn-drawer .ditem .tg { grid-column: 2; }
}