/* S16 官方风格层（参考 Worlds 2026 主视觉，规范见 docs/展示系统VI.md）：
   夜空深蓝底 + 钴蓝色带 + 冰蓝发光线 + 超粗无衬线标题 + 四栏信息条 + 棱镜光点缀 + 利落硬切动效。
   只借鉴风格，不使用 Riot 字标、Logo 与官方口号。最后加载，覆盖 archive / toy / draft 样式。两队队色不变。 */
@font-face { font-family: "Anton"; src: url("./assets/fonts/anton-latin-400.woff2") format("woff2"); font-display: swap; }

:root {
  --night0: #060818; --night1: #0c102a; --surf1: #151b42; --surf2: #1e265c;
  --cobalt7: #182aa9; --cobalt5: #3c52db; --cobalt3: #586ce7; --ice: #c1e5ff;
  --prism-v: #994dd3; --prism-c: #4fbfd5; --prism-p: #edd1e8;
  --bg: var(--night1); --bg2: #10163a; --panel: var(--surf1); --panel2: var(--surf2);
  --line: rgba(193, 229, 255, .09); --line2: rgba(193, 229, 255, .2);
  --ink: #eef0fa; --ink2: #bcc0e0; --ink3: #8a90bd;
  --f-display: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-latin: "Anton", "Arial Narrow", "DIN Alternate", sans-serif;
  --r: 6px;
  --band: linear-gradient(100deg, var(--cobalt7), var(--cobalt5) 55%, var(--cobalt3));
  --ice-line: 0 1px 0 var(--ice), 0 2px 14px rgba(193, 229, 255, .45);
}

/* 底：午夜深蓝 + 环形钴蓝微光 + 极淡网格 */
body {
  background:
    radial-gradient(60% 40% at 50% -6%, rgba(60, 82, 219, .32), transparent 70%),
    linear-gradient(rgba(193, 229, 255, .025) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(193, 229, 255, .025) 1px, transparent 1px) 0 0 / 48px 100%,
    var(--night1);
  background-attachment: fixed;
  color: var(--ink);
}
body::before { background: var(--night0); }

/* 标题：超粗无衬线（替换原来的宋体衬线） */
h1, h2, h3, .draft-sim h2 { font-family: var(--f-display); font-weight: 900; letter-spacing: -.01em; }
h2 { font-size: clamp(26px, 3.8vw, 42px); }

/* 顶部导航：钴蓝激活态；手机上单行横向滑动 */
.nav { background: rgba(6, 8, 24, .9); border-bottom: 1px solid var(--line2); box-shadow: 0 1px 0 rgba(193, 229, 255, .06); }
.nav .wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav .brand { font-family: var(--f-latin); font-weight: 400; letter-spacing: .08em; font-size: 17px; color: #fff; }
.nav a { border-radius: 3px; font-weight: 600; }
.nav a.on, .nav a:hover { background: var(--cobalt5); color: #fff; }
.nav a.draft-nav { background: transparent; color: var(--ice); box-shadow: inset 0 0 0 1px rgba(193, 229, 255, .45); }
.nav a.draft-nav.on, .nav a.draft-nav:hover { background: var(--cobalt5); color: #fff; box-shadow: none; }

/* 四栏信息条（官方主视觉里的小号说明行） */
.s16-strip { margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); background: var(--band); box-shadow: var(--ice-line); position: relative; z-index: 1; }
.s16-strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.s16-strip span { padding: 7px 4px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s16-strip span + span { border-left: 1px solid rgba(255, 255, 255, .28); }
.s16-strip .lt { font-family: var(--f-latin); font-weight: 400; letter-spacing: .14em; }
@media (max-width: 560px) { .s16-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s16-strip span:nth-child(3) { border-left: 0; } .s16-strip span:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .2); } }

/* 开头：钴蓝光 + 棱镜斜光 */
.hero::before {
  background:
    linear-gradient(115deg, transparent 38%, rgba(153, 77, 211, .16) 44%, rgba(79, 191, 213, .12) 50%, transparent 56%),
    linear-gradient(115deg, transparent 58%, rgba(237, 209, 232, .08) 61%, transparent 64%),
    radial-gradient(42% 60% at 18% 48%, rgba(31, 155, 184, .22), transparent 70%),
    radial-gradient(42% 60% at 82% 48%, rgba(176, 138, 67, .22), transparent 70%);
}
.hero .eyebrow { font-family: var(--f-latin); letter-spacing: .3em; color: var(--ice); }
.vs .tname { font-family: var(--f-latin); font-weight: 400; letter-spacing: .04em; font-size: clamp(36px, 6.4vw, 72px); }
.vs .mid .k {
  display: inline-block; padding: .06em .38em .1em; transform: skewX(-8deg);
  background: var(--band); -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff; -webkit-text-fill-color: #fff; box-shadow: var(--ice-line), 0 10px 34px rgba(60, 82, 219, .55);
  font-family: var(--f-display); font-weight: 900;
}
.count span { border-radius: 3px; background: rgba(21, 27, 66, .85); border-color: var(--line2); font-family: var(--f-latin); font-weight: 400; }
.thesis h1 { font-size: clamp(22px, 3.4vw, 38px); }

/* 进入 BP 模拟的入口：钴蓝色带 */
.draft-hero-cta { background: var(--band); border: 1px solid rgba(193, 229, 255, .55); border-radius: 4px; color: #fff; box-shadow: var(--ice-line), 0 14px 36px rgba(24, 42, 169, .45); }
@media (hover: hover) { .draft-hero-cta:hover { border-color: var(--ice); box-shadow: 0 1px 0 var(--ice), 0 0 24px rgba(193, 229, 255, .5), 0 14px 36px rgba(24, 42, 169, .5); transform: translateY(-1px); } }
.draft-hero-copy > span { color: rgba(255, 255, 255, .82); }
.draft-hero-arrow { background: #fff; color: var(--cobalt7); }
.draft-hero-team { border-radius: 3px; }

/* 关键数字卡 */
.key { background: linear-gradient(180deg, rgba(30, 38, 92, .7), rgba(21, 27, 66, .92)); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(193, 229, 255, .14); }
.headline-value { border-radius: 3px; }
.headline-value > strong, .key .pair { font-family: var(--f-latin); font-weight: 400; letter-spacing: .01em; }

/* 章节标题：钴蓝标签 + 左侧短条 */
section.ch { border-top: 1px solid var(--line2); }
.chead .eyebrow { display: inline-block; padding: 3px 10px; background: var(--cobalt5); color: #fff; letter-spacing: .14em; font-weight: 700; transform: skewX(-8deg); box-shadow: 0 1px 0 var(--ice); margin-bottom: 10px; }
.chead h2 { border-left: 6px solid var(--cobalt5); padding-left: 14px; }
.chead .lead { color: var(--ink2); }

/* 面板与卡片：半透明双层渐变 + 顶边高光 */
.panel, .sumcard, .tile, .call, .cm, .tcard, .pcard, .route-team, .route-match, .draft-game, .game, .orow, .ccard, .ex, .casebar, .route-bracket, .radar-readout {
  border-color: var(--line2);
}
.panel, .sumcard, .tile, .call {
  background: linear-gradient(180deg, rgba(30, 38, 92, .55), rgba(21, 27, 66, .9));
  border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(193, 229, 255, .12), 0 12px 30px rgba(0, 0, 0, .28);
}
.panel h3, .sumcard h3 { font-size: 19px; }
.cm, .ex, .ccard, .orow, .game, .route-match, .draft-game { background: rgba(12, 16, 42, .72); border-radius: 4px; }
.tcard { border-radius: var(--r); }
.verdict { border-left: 4px solid var(--cobalt5); background: linear-gradient(90deg, rgba(60, 82, 219, .12), transparent 70%); padding: 12px 16px; }

/* 切换按钮：钴蓝选中，直角更利落 */
.chip { border-radius: 3px; background: rgba(12, 16, 42, .8); border-color: var(--line2); font-weight: 600; }
.chip:hover { border-color: var(--ice); color: #fff; }
.chip.on { background: var(--cobalt5); border-color: var(--cobalt3); color: #fff; box-shadow: 0 1px 0 var(--ice); }
.casebar { border-style: solid; border-color: rgba(193, 229, 255, .22); background: rgba(24, 42, 169, .14); border-radius: 4px; }
.select, select, input[type="search"] { border-radius: 3px; }

/* 大数字用 Anton */
.prow .avg .big, .tile .v, .call .big, .route-stat strong, .route-match-top strong, .pcard .nm, .game .gh .g { font-family: var(--f-latin); font-weight: 400; letter-spacing: .01em; }

/* 浮层提示、弹窗 */
.tip { background: var(--surf2); border-color: var(--line2); border-radius: 4px; }
#route-dialog { background: var(--night1); border-color: var(--line2); border-radius: 6px; }
.route-dialog-head { background: var(--night1); }

/* BP 模拟器 */
.draft-sim { --ds-panel: #141b44; --ds-subpanel: #0d1336; --ds-border: rgba(193, 229, 255, .2); --ds-ink: #eef0fa; --ds-muted: #bcc0e0; }
.draft-sim button, .draft-sim select, .draft-sim input { border-radius: 3px; }
.draft-sim button:hover:not(:disabled) { border-color: var(--ice); }
.draft-sim .ds-primary { background: var(--band); border-color: var(--cobalt3); color: #fff; font-weight: 700; box-shadow: 0 1px 0 var(--ice); }
.draft-sim .ds-primary:hover:not(:disabled) { box-shadow: 0 1px 0 var(--ice), 0 0 16px rgba(193, 229, 255, .45); }

/* 页脚 */
footer { border-top: 1px solid var(--line2); background: linear-gradient(180deg, transparent, rgba(6, 8, 24, .8)); }

/* 动效：短促硬切 */
.rv.play { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
.chip, .nav a, .draft-hero-cta, .draft-sim button { transition-duration: .12s; }

/* 手机导航：单行横向滑动（覆盖原来的 4 列网格） */
@media (max-width: 760px) {
  .nav .wrap { display: flex; grid-template-columns: none; gap: 4px; }
  .nav a { flex: 0 0 auto; padding: 6px 10px; font-size: 13px; }
  .nav .brand { display: none; }
}
/* BP 模拟器：去掉原来的棕金渐变，换成夜空蓝 + 钴蓝色带 */
.draft-sim .ds-intro { background: linear-gradient(100deg, rgba(24, 42, 169, .55), rgba(21, 27, 66, .9) 60%); border-color: var(--line2); box-shadow: inset 0 -1px 0 var(--ice); }
.draft-sim .ds-intro .eyebrow { color: var(--ice); font-family: var(--f-latin); letter-spacing: .24em; }
.ds-intro-logos { color: var(--ice); }
.ds-score { background: linear-gradient(90deg, rgba(31, 155, 184, .22), rgba(12, 16, 42, .95) 42% 58%, rgba(176, 138, 67, .22)); border-color: var(--line2); }
.ds-score > strong { font-family: var(--f-latin); font-weight: 400; letter-spacing: .02em; }
.ds-score-label { color: var(--ice); letter-spacing: .12em; }
.draft-sim .ds-intro { border-radius: 6px 6px 0 0; }
.draft-sim button[aria-pressed="true"] { border-color: var(--cobalt3); background: rgba(60, 82, 219, .38); color: #fff; box-shadow: 0 1px 0 var(--ice); }
.draft-sim :is(a, button, input, select, summary):focus-visible, .draft-hero-cta:focus-visible { outline-color: var(--ice); }
/* 金色是 GEN 队色，界面高亮统一改用冰蓝，避免误读成“标 GEN” */
.draft-sim { --ds-gold: var(--ice); }
.draft-sim :focus { outline-color: var(--ice); }
/* 手机：两队阵容上下排列，避免“第 1 选”和英雄名被截断 */
@media (max-width: 560px) { .ds-lineups { grid-template-columns: 1fr !important; } }

/* 最前面的报告介绍 */
.report-intro { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto 26px; text-align: center; }
.ri-tag { font-family: var(--f-latin); letter-spacing: .32em; font-size: 13px; color: #fff; background: var(--band); padding: 4px 14px; transform: skewX(-8deg); box-shadow: var(--ice-line); }
.ri-title { margin: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--f-display); }
.ri-title b { font-size: clamp(22px, 3.6vw, 38px); font-weight: 900; letter-spacing: -.01em;
  background: linear-gradient(90deg, #fff, var(--ice) 45%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ri-title span { font-size: clamp(15px, 2vw, 20px); font-weight: 700; color: var(--ink2); letter-spacing: .06em; }