/* ===========================================================
   《词能协议》LEXICON PROTOCOL
   视觉系统：深蓝黑 + 单一珊瑚红强调 + 45° 切角几何
   主题锁定 dark（这是竞技 HUD，不做浅色）
   =========================================================== */

@font-face{
  font-family:'Oswald';
  src:url('../fonts/oswald-var.woff2') format('woff2-variations'),
      url('../fonts/oswald-var.woff2') format('woff2');
  font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Barlow SC';
  src:url('../fonts/barlow-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Barlow SC';
  src:url('../fonts/barlow-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* 底色：三层深度，全部偏蓝的近黑，不用纯黑 */
  --bg:#0F1923;
  --surface:#16202A;
  --surface-2:#1C2833;
  --raise:#243240;

  /* 线：细，永远 1px */
  --line:#2B3A45;
  --line-soft:#22303A;

  /* 唯一强调色，全站锁死 */
  --red:#FF4655;
  --red-deep:#BD3944;
  --red-glow:rgba(255,70,85,.16);

  /* 文字 */
  --ink:#ECE8E1;
  --ink-dim:#8B99A6;
  --ink-faint:#5A6874;

  /* 语义色：严格限定用途，不当装饰 */
  --cyan:#18E5D0;   /* 技能 / 爆头 */
  --gold:#F0B840;   /* 段位 / 胜利 */
  --green:#2ED47A;  /* 答对 */

  /* 字体 */
  --f-display:'Oswald','PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;
  --f-ui:'Barlow SC','PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;
  --f-num:'Barlow SC',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 切角尺度：一套贯穿全站，不混圆角 */
  --cut:10px;
  --cut-sm:6px;
  --cut-lg:16px;

  --dur:.18s;
  --ease:cubic-bezier(.16,1,.3,1);

  /* 安全区 */
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

/* 切角路径：左上 + 右下（VALORANT 主形） */
.cut{
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
/* 反向：右上 + 左下 */
.cut-alt{
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
/* 单角：右下 */
.cut-br{ clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); }
/* 单角：左上 */
.cut-tl{ clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut)); }

/* 带边框的切角盒：外层当边框，内层当填充 */
.frame{ background:var(--line); padding:1px; }
.frame > .frame-in{ background:var(--surface); width:100%; height:100%; }

*,*::before,*::after{ box-sizing:border-box; }
/* 图标兜底尺寸。段位徽记自带 width 属性，走 :not([width]) 排除。 */
svg:not([width]){ width:1.15em; height:1.15em; flex:none; display:inline-block; vertical-align:-.16em; }
html,body{ margin:0; padding:0; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-ui);
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  min-height:100dvh;
}
button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:600; letter-spacing:.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* 背景纹理：固定层，pointer-events none，绝不放在滚动容器上 */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(115deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px),
    radial-gradient(ellipse 120% 80% at 50% -10%,rgba(255,70,85,.07),transparent 60%);
}

/* ============ 排版原子 ============ */
.disp{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; line-height:1; }
.label{
  font-family:var(--f-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.16em; font-size:11px; color:var(--ink-faint); line-height:1;
}
.num{ font-family:var(--f-num); font-variant-numeric:tabular-nums; font-weight:600; }

/* ============ 按钮 ============ */
.btn{
  --cut:8px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px;
  font-family:var(--f-display); font-weight:600; font-size:15px;
  text-transform:uppercase; letter-spacing:.1em;
  background:var(--red); color:#fff;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
  white-space:nowrap;
}
.btn svg{ width:19px; height:19px; }
.btn:hover{ background:#FF5C69; }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn:disabled{ background:var(--raise); color:var(--ink-faint); cursor:not-allowed; transform:none; }

.btn-ghost{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn-ghost:hover{ background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--ink-faint); }

.btn-lg{ height:60px; font-size:18px; padding:0 34px; --cut:12px; }
.btn-block{ width:100%; }

/* ============ 应用骨架 ============ */
#app{ position:relative; z-index:2; min-height:100dvh; display:flex; flex-direction:column; }
.view{ display:none; flex:1; flex-direction:column; }
.view.on{ display:flex; }

.wrap{ width:100%; max-width:720px; margin:0 auto; padding:0 16px; }

/* 顶栏：单行，高度 ≤ 64 */
.topbar{
  position:sticky; top:0; z-index:20;
  height:calc(56px + var(--safe-t)); padding-top:var(--safe-t);
  display:flex; align-items:center; gap:12px;
  background:rgba(15,25,35,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topbar .wrap{ display:flex; align-items:center; gap:12px; }
.topbar-title{ font-size:17px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iconbtn{
  width:38px; height:38px; display:grid; place-items:center;
  color:var(--ink-dim); transition:color var(--dur) var(--ease);
  flex:none;
}
.iconbtn:hover{ color:var(--ink); }
.iconbtn svg{ width:22px; height:22px; }

/* ============ 段位徽记 ============ */
.rankbadge{
  position:relative; width:var(--sz,64px); height:var(--sz,64px);
  display:grid; place-items:center; flex:none;
}
.rankbadge svg{ width:100%; height:100%; display:block; }

/* ============ 主页 ============ */
.hero-card{
  --cut:16px;
  position:relative; margin-top:16px; overflow:hidden;
  background:linear-gradient(150deg,var(--surface-2) 0%,var(--surface) 55%,#131C25 100%);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.hero-card::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(115deg,transparent 55%,var(--red-glow) 100%),
    repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.014) 22px 23px);
  pointer-events:none;
}
.hero-inner{ position:relative; padding:20px; display:flex; align-items:center; gap:18px; }
.hero-rank{ flex:none; }
.hero-meta{ flex:1; min-width:0; }
.hero-tier{ font-family:var(--f-display); font-size:26px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; line-height:1.05; }
.hero-sub{ font-size:13px; color:var(--ink-dim); margin-top:2px; }

/* RR 条：细，无背景块填充 */
.rr{ margin-top:12px; }
.rr-track{ height:4px; background:var(--raise); position:relative; overflow:hidden; }
.rr-fill{ position:absolute; inset:0 auto 0 0; background:var(--red); transition:width .5s var(--ease); }
.rr-row{ display:flex; justify-content:space-between; align-items:baseline; margin-top:6px; }

/* 统计条：细线分隔，不用卡片盒 */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:14px; border-top:1px solid var(--line-soft);
}
.stat{ padding:14px 4px; text-align:center; position:relative; }
.stat + .stat::before{ content:''; position:absolute; left:0; top:16px; bottom:16px; width:1px; background:var(--line-soft); }
.stat-v{ font-family:var(--f-num); font-size:22px; font-weight:600; line-height:1; }
.stat-k{ margin-top:5px; }

/* 主行动区 */
.actions{ margin-top:18px; display:grid; gap:10px; }
.action-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* 大按钮：带副标题的作战入口 */
.op{
  --cut:12px;
  position:relative; text-align:left; padding:16px 18px;
  background:var(--surface); overflow:hidden;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
  display:block; width:100%;
}
.op:hover{ background:var(--surface-2); }
.op:active{ transform:scale(.99); }
.op-t{ font-family:var(--f-display); font-size:17px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:8px; }
.op-d{ font-size:13px; color:var(--ink-dim); margin-top:3px; line-height:1.35; }
.op-primary{ background:var(--red); }
.op-primary:hover{ background:#FF5462; }
.op-primary .op-d{ color:rgba(255,255,255,.82); }
.op svg{ width:19px; height:19px; flex:none; }
.op-badge{
  position:absolute; top:0; right:0; padding:4px 10px 4px 14px;
  background:var(--red); color:#fff;
  font-family:var(--f-display); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%);
}
.op-primary .op-badge{ background:#0F1923; }

/* ============ 地图 / 关卡 ============ */
.mapsec{ margin-top:22px; }
.maphead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.mapname{ font-family:var(--f-display); font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.grid-lv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:8px; }
.lv{
  --cut:6px;
  aspect-ratio:1; display:grid; place-items:center; position:relative;
  background:var(--surface); color:var(--ink-faint);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  font-family:var(--f-num); font-size:17px; font-weight:600;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.lv:hover{ background:var(--surface-2); }
.lv.done{ background:var(--raise); color:var(--ink); }
.lv.now{ background:var(--red); color:#fff; }
.lv.spike{ box-shadow:inset 0 0 0 1px var(--gold); }
.lv.spike.done{ background:var(--gold); color:#0F1923; }
.lv.lock{ opacity:.35; }
.lv-pct{ position:absolute; bottom:4px; left:0; right:0; text-align:center; font-size:9px; letter-spacing:.05em; opacity:.75; font-family:var(--f-display); }

/* ============ 底部导航 ============ */
.tabbar{
  position:sticky; bottom:0; z-index:20; margin-top:auto;
  padding-bottom:var(--safe-b);
  background:rgba(15,25,35,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);
}
.tabbar .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.tab{
  height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--ink-faint); position:relative;
  transition:color var(--dur) var(--ease);
}
.tab svg{ width:21px; height:21px; }
.tab span{ font-family:var(--f-display); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.tab.on{ color:var(--red); }
.tab.on::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:2px; background:var(--red); }

.page{ padding-bottom:24px; flex:1; }

/* ===========================================================
   购买阶段 BUY PHASE
   =========================================================== */
.buy-head{ padding:18px 0 14px; }
.buy-credits{ display:flex; align-items:baseline; gap:8px; }
.buy-credits .num{ font-size:34px; color:var(--gold); line-height:1; }
.buy-note{ font-size:13px; color:var(--ink-dim); margin-top:6px; line-height:1.4; }

.shop-group{ margin-top:20px; }
.shop-group > .label{ margin-bottom:9px; display:block; }
.shop-grid{ display:grid; gap:8px; align-items:stretch; }
.shop-grid.g2{ grid-template-columns:1fr 1fr; }
.shop-grid.g4{ grid-template-columns:repeat(4,1fr); }

.item{
  --cut:8px;
  position:relative; text-align:left; padding:12px 13px;
  background:var(--surface); width:100%;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.item{ display:flex; flex-direction:column; }
.item-d{ flex:1; }
.item:hover:not(:disabled){ background:var(--surface-2); }
.item:active:not(:disabled){ transform:scale(.985); }
.item:disabled{ opacity:.38; cursor:not-allowed; }
.item.owned{ background:var(--raise); box-shadow:inset 0 0 0 1px var(--red); }
.item-n{ font-family:var(--f-display); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.item-d{ font-size:12px; color:var(--ink-dim); margin-top:3px; line-height:1.35; min-height:32px; }
.item-need{
  display:flex; align-items:center; gap:5px; margin-top:7px;
  font-size:12px; color:var(--cyan); font-family:var(--f-ui);
}
.item-need svg{ width:13px; height:13px; }
.item-p{ font-family:var(--f-num); font-size:14px; color:var(--gold); margin-top:5px; font-weight:600; }
.item.owned .item-p{ color:var(--red); }
.item-mult{
  position:absolute; top:10px; right:11px;
  font-family:var(--f-num); font-size:11px; color:var(--cyan); font-weight:600;
}
/* 技能格：紧凑，只有图标 + 价 */
.item.slim{ padding:10px 8px; text-align:center; }
.item.slim .item-n{ font-size:12px; margin-top:5px; }
.item.slim .item-d{ display:none; }
.item.slim .item-p{ font-size:12px; margin-top:4px; }
.item.slim svg{ width:24px; height:24px; color:var(--cyan); }
.item-own-n{
  position:absolute; top:5px; right:7px; width:17px; height:17px;
  background:var(--red); color:#fff; display:grid; place-items:center;
  font-family:var(--f-num); font-size:11px; font-weight:600;
}

/* ===========================================================
   战斗 COMBAT
   =========================================================== */
.combat{ display:flex; flex-direction:column; min-height:100dvh; }

/* 顶部 HUD：比分 + 回合 */
.hud{
  padding-top:var(--safe-t);
  background:var(--surface); border-bottom:1px solid var(--line-soft);
}
.hud-row{ display:flex; align-items:center; gap:14px; height:50px; }
.hud-score{ display:flex; align-items:center; gap:9px; font-family:var(--f-num); font-size:19px; font-weight:600; }
.sc-win{ color:var(--cyan); }
.sc-lose{ color:var(--red); }
.sc-sep{ color:var(--ink-faint); font-size:15px; }
.hud-round{ flex:1; text-align:center; }
.hud-exit{ color:var(--ink-faint); }

/* 计时条：爆头刻度是这条的灵魂 */
.timer{ position:relative; height:3px; background:var(--raise); overflow:hidden; }
.timer-fill{
  position:absolute; inset:0 0 0 0; transform-origin:left center;
  background:var(--cyan);
  transition:transform .1s linear,background .2s var(--ease);
}
.timer-fill.warn{ background:var(--gold); }
.timer-fill.danger{ background:var(--red); }
.timer-hs{
  position:absolute; top:-2px; bottom:-2px; width:1px;
  background:var(--ink-faint); opacity:.9;
}

/* 技能条 */
.abilities{ display:flex; align-items:center; gap:7px; padding:9px 0; }
.ab{
  --cut:5px;
  position:relative; width:42px; height:38px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--cyan);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:background var(--dur) var(--ease);
}
.ab:hover:not(:disabled){ background:var(--raise); }
.ab:disabled{ opacity:.3; cursor:not-allowed; }
.ab svg{ width:19px; height:19px; }
.ab-n{
  position:absolute; bottom:2px; right:4px;
  font-family:var(--f-num); font-size:10px; font-weight:600; color:var(--ink);
}
.ab-sep{ width:1px; height:24px; background:var(--line); margin:0 3px; flex:none; }

/* 护甲：真实语义状态，不是装饰 */
.armor{ display:flex; gap:3px; align-items:center; }
.armor-pip{ width:10px; height:16px; background:var(--raise); }
.armor-pip.on{ background:var(--ink); }

/* 大招充能 */
.ult{ display:flex; gap:2px; margin-left:auto; align-items:center; }
.ult-pip{ width:6px; height:14px; background:var(--raise); transform:skewX(-12deg); }
.ult-pip.on{ background:var(--gold); }
.ult.ready{ cursor:pointer; }
.ult.ready .ult-pip{ background:var(--gold); animation:ultpulse 1.4s ease-in-out infinite; }

/* 题面 */
.qzone{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:24px 0 26px; text-align:center; }
.qword{
  font-family:var(--f-display); font-weight:600; font-size:clamp(38px,12vw,60px);
  line-height:1; letter-spacing:.01em; word-break:break-word;
}
.qword.cn{ font-size:clamp(28px,8vw,42px); letter-spacing:.04em; }
.qphon{ font-family:var(--f-ui); font-size:15px; color:var(--ink-dim); margin-top:9px; display:flex; align-items:center; justify-content:center; gap:9px; }
.qphon button{ color:var(--ink-dim); display:grid; place-items:center; }
.qphon button:hover{ color:var(--cyan); }
.qphon svg{ width:19px; height:19px; }
.qhint{
  margin-top:14px; font-size:13px; color:var(--cyan); line-height:1.45;
  padding:0 12px; min-height:42px;   /* 预留两行，答对亮例句时不跳版 */
  display:flex; align-items:center; justify-content:center;
}

/* 选项：等高、位置固定，可预测 */
.opts{ display:grid; gap:8px; padding-bottom:14px; }
.opt{
  --cut:8px;
  position:relative; min-height:56px; padding:12px 16px; text-align:left;
  background:var(--surface); font-size:16px; line-height:1.3;
  display:flex; align-items:center; gap:11px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease);
}
.opt:hover:not(:disabled){ background:var(--surface-2); }
.opt:active:not(:disabled){ transform:scale(.99); }
.opt-k{
  font-family:var(--f-display); font-size:12px; color:var(--ink-faint);
  width:16px; flex:none; letter-spacing:.05em;
}
.opt.hit{ background:var(--green); color:#0B1A12; }
.opt.hit .opt-k{ color:rgba(11,26,18,.55); }
.opt.miss{ background:var(--red-deep); color:#fff; }
.opt.miss .opt-k{ color:rgba(255,255,255,.55); }
.opt.reveal{ box-shadow:inset 0 0 0 1px var(--green); }
.opt.smoked{ opacity:.12; pointer-events:none; }
.opt:disabled{ cursor:default; }

/* 底部：Credits + 枪 */
.combat-foot{
  display:flex; align-items:center; gap:12px;
  height:46px; border-top:1px solid var(--line-soft);
  padding-bottom:var(--safe-b); box-sizing:content-box;
}
.foot-gun svg{ width:15px; height:15px; }
.foot-gun{ font-family:var(--f-display); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); }
.foot-need{
  font-family:var(--f-num); font-size:14px; font-weight:600; color:var(--ink-dim);
  padding:2px 8px; background:var(--surface-2); transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.foot-need.hit{ color:#0B1A12; background:var(--green); }
.foot-cr{ margin-left:auto; font-family:var(--f-num); font-size:15px; color:var(--gold); font-weight:600; }

/* ============ 赛前情报卡 ============ */
.recon-card{
  --cut:9px;
  background:var(--surface); padding:14px 15px; margin-bottom:9px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  border-left:2px solid var(--cyan);
}
.recon-top{ display:flex; align-items:baseline; gap:10px; }
.recon-w{ font-family:var(--f-display); font-size:24px; font-weight:600; letter-spacing:.02em; }
.recon-p{ font-size:13px; color:var(--ink-dim); flex:1; min-width:0; }
.recon-top .iconbtn{ width:30px; height:30px; }
.recon-top .iconbtn svg{ width:17px; height:17px; }
.recon-cn{ font-size:16px; margin-top:5px; }
.recon-ex{ font-size:13.5px; margin-top:9px; line-height:1.5; color:var(--ink); }
.recon-excn{ font-size:13px; color:var(--ink-dim); margin-top:3px; line-height:1.45; }
.recon-hint{ font-size:12.5px; color:var(--cyan); margin-top:7px; line-height:1.45; }

/* 答对后闪一下例句 */
.ex-flash{
  display:block; font-size:13px; line-height:1.45; color:var(--ink-dim);
  animation:exIn .2s var(--ease) both; padding:0 6px;
}
.ex-cn{ color:var(--ink-faint); font-size:12.5px; }
@keyframes exIn{ from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:none} }

/* ============ 击杀反馈 ============ */
.fx-layer{ position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden; }

/* 受击红晕 */
.fx-hurt{
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse 130% 90% at 50% 50%,transparent 45%,rgba(255,70,85,.5) 100%);
}
.fx-hurt.go{ animation:hurt .45s var(--ease); }

/* 爆头飞字 */
.fx-hs{
  position:absolute; top:26%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--f-display); font-weight:700; font-size:clamp(30px,9vw,46px);
  letter-spacing:.08em; text-transform:uppercase; color:var(--red);
  text-shadow:0 2px 0 rgba(0,0,0,.5); opacity:0;
}
.fx-hs.go{ animation:hsPop .8s var(--ease); }

/* 连杀横幅 */
.fx-streak{
  position:absolute; top:38%; left:0; right:0; text-align:center;
  font-family:var(--f-display); font-weight:700; font-size:clamp(26px,7.5vw,40px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold); opacity:0;
}
.fx-streak.go{ animation:streak 1.15s var(--ease); }

/* 击杀信息流：右上堆叠 */
.killfeed{ position:absolute; top:calc(62px + var(--safe-t)); right:12px; display:grid; gap:5px; justify-items:end; }
.kf{
  --cut:5px;
  display:flex; align-items:center; gap:7px; padding:5px 11px;
  background:rgba(22,32,42,.94); font-size:12px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  animation:kfIn .3s var(--ease);
}
.kf svg{ width:14px; height:14px; }
.kf .w{ font-family:var(--f-display); letter-spacing:.04em; text-transform:uppercase; font-size:13px; }
.kf.k{ color:var(--ink); }
.kf.k .w{ color:var(--green); }
.kf.d{ color:var(--ink-dim); }
.kf.d .w{ color:var(--red); }
.kf .cr{ font-family:var(--f-num); color:var(--gold); font-size:11px; }
.kf.out{ animation:kfOut .3s var(--ease) forwards; }

@keyframes hurt{ 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }
@keyframes hsPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  36%{transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1)}
}
@keyframes streak{
  0%{opacity:0;transform:scale(.86) translateY(8px)}
  16%{opacity:1;transform:scale(1.03)}
  30%{transform:scale(1)}
  100%{opacity:0;transform:scale(1) translateY(-10px)}
}
@keyframes kfIn{ from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
@keyframes kfOut{ to{opacity:0;transform:translateX(16px)} }
@keyframes ultpulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

/* ===========================================================
   死亡回放（答错详解）/ 回合结算 / 比赛结算
   =========================================================== */
.sheet-bg{
  position:fixed; inset:0; z-index:70;
  background:rgba(8,14,20,.82);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fade .2s var(--ease) both;
}
.sheet-bg.center{ align-items:center; padding:16px; }
.sheet{
  --cut:16px;
  width:100%; max-width:520px; background:var(--surface);
  padding:20px 18px calc(20px + var(--safe-b));
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  animation:sheetUp .28s var(--ease) both;
  max-height:88dvh; overflow-y:auto;
}
.sheet-bg.center .sheet{ padding-bottom:20px; }

.replay-tag{ display:flex; align-items:center; gap:8px; color:var(--red); }
.replay-tag .label{ color:var(--red); }
.replay-tag svg{ width:17px; height:17px; }
.replay-w{ font-family:var(--f-display); font-size:32px; font-weight:600; margin-top:10px; line-height:1; }
.replay-p{ font-size:14px; color:var(--ink-dim); margin-top:6px; display:flex; align-items:center; gap:9px; }
.replay-p button{ color:var(--ink-dim); }
.replay-p svg{ width:18px; height:18px; display:block; }
.replay-cn{ font-size:18px; margin-top:12px; line-height:1.4; }
.replay-pos{ color:var(--ink-faint); font-size:14px; margin-right:6px; }

.replay-block{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.replay-ex{ font-size:15px; line-height:1.55; }
.replay-ex em{ font-style:normal; color:var(--red); font-weight:600; }
.replay-excn{ font-size:14px; color:var(--ink-dim); margin-top:5px; line-height:1.5; }
.replay-hint{ font-size:14px; color:var(--cyan); line-height:1.5; }

/* 回合结算 */
.round-end{ text-align:center; padding:8px 0 4px; }
.round-verdict{
  font-family:var(--f-display); font-weight:700; font-size:clamp(30px,9vw,44px);
  text-transform:uppercase; letter-spacing:.08em; line-height:1;
}
.round-verdict.win{ color:var(--cyan); }
.round-verdict.lose{ color:var(--red); }
.round-sub{ font-size:14px; color:var(--ink-dim); margin-top:8px; }
.round-money{
  margin-top:18px; padding:14px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  display:grid; gap:8px;
}
.money-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; }
.money-row .v{ font-family:var(--f-num); color:var(--gold); font-weight:600; }
.money-row.total{ font-size:16px; padding-top:8px; border-top:1px solid var(--line-soft); }

/* 比分点阵：13 回合 */
.roundpips{ display:flex; gap:3px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.pip{ width:12px; height:5px; background:var(--raise); transform:skewX(-14deg); }
.pip.w{ background:var(--cyan); }
.pip.l{ background:var(--red); }

/* 比赛结算记分板 */
.board-verdict{
  font-family:var(--f-display); font-weight:700; font-size:clamp(34px,11vw,54px);
  text-transform:uppercase; letter-spacing:.06em; line-height:1; text-align:center;
}
.board-score{ text-align:center; font-family:var(--f-num); font-size:26px; margin-top:6px; letter-spacing:.04em; }
.board-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-soft); margin-top:20px;
}
.board-cell{ background:var(--surface); padding:14px 13px; }
.board-v{ font-family:var(--f-num); font-size:24px; font-weight:600; line-height:1; }
.board-k{ margin-top:5px; }
.board-v.hs{ color:var(--red); }
.board-v.ace{ color:var(--gold); }

.rr-change{
  margin-top:20px; padding:16px; background:var(--surface-2);
  --cut:10px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  display:flex; align-items:center; gap:14px;
}
.rr-delta{ font-family:var(--f-num); font-size:26px; font-weight:600; margin-left:auto; }
.rr-delta.up{ color:var(--green); }
.rr-delta.down{ color:var(--red); }

/* 升段 / 掉段横幅 */
.tier-move{
  margin-top:14px; padding:13px 16px; text-align:center;
  font-family:var(--f-display); font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  --cut:8px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.tier-move.up{ background:var(--gold); color:#0F1923; }
.tier-move.down{ background:var(--red-deep); color:#fff; }

/* ===========================================================
   复仇名单 / 列表 / 设置
   =========================================================== */
.emptystate{ text-align:center; padding:56px 20px; }
.emptystate svg{ width:44px !important; height:44px !important; color:var(--ink-faint); }
.emptystate h3{ font-size:17px; margin-top:14px; text-transform:uppercase; letter-spacing:.06em; }
.emptystate p{ font-size:14px; color:var(--ink-dim); margin-top:7px; line-height:1.5; }

.wordrow{
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  background:var(--surface); margin-bottom:6px;
  --cut:7px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  width:100%; text-align:left;
}
.wordrow-m{ flex:1; min-width:0; }
.wordrow-w{ font-family:var(--f-display); font-size:17px; font-weight:600; letter-spacing:.02em; }
.wordrow-cn{ font-size:13px; color:var(--ink-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wordrow-n{
  font-family:var(--f-num); font-size:12px; color:var(--red); font-weight:600;
  padding:3px 8px; background:rgba(255,70,85,.13); flex:none;
}

.setrow{
  display:flex; align-items:center; gap:14px; padding:15px 0;
  border-bottom:1px solid var(--line-soft); width:100%; text-align:left;
}
.setrow-m{ flex:1; min-width:0; }
.setrow-t{ font-size:15px; }
.setrow-d{ font-size:13px; color:var(--ink-dim); margin-top:3px; line-height:1.4; }
.setrow svg{ width:19px; height:19px; color:var(--ink-faint); flex:none; }

/* 分段选择器 */
.seg{ display:flex; gap:1px; background:var(--line-soft); flex:none; }
.seg button{
  padding:8px 14px; background:var(--surface); font-size:13px;
  font-family:var(--f-display); letter-spacing:.05em; color:var(--ink-dim);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.seg button.on{ background:var(--red); color:#fff; }

textarea.code{
  width:100%; min-height:110px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); padding:11px; font-family:var(--f-num); font-size:12px;
  line-height:1.45; resize:vertical; word-break:break-all;
}
textarea.code:focus{ outline:none; border-color:var(--red); }
textarea.code::placeholder{ color:var(--ink-faint); }

/* 拼写输入（狙击枪题型 / 拆包） */
.spellbox{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; padding:0 8px; }
.spellcell{
  width:34px; height:46px; display:grid; place-items:center;
  background:var(--surface-2); border-bottom:2px solid var(--line);
  font-family:var(--f-display); font-size:24px; text-transform:uppercase;
}
.spellcell.fixed{ color:var(--ink-faint); border-bottom-color:transparent; background:transparent; }
.spellcell.on{ border-bottom-color:var(--red); }
.spellcell.filled{ color:var(--ink); }
.spell-input{
  position:absolute; opacity:0; pointer-events:none; width:1px; height:1px;
}
.keyrow{ display:flex; gap:4px; justify-content:center; margin-bottom:5px; }
.key{
  flex:1; max-width:38px; height:44px; display:grid; place-items:center;
  background:var(--surface-2); font-family:var(--f-display); font-size:16px; text-transform:uppercase;
  transition:background var(--dur) var(--ease);
}
.key:active{ background:var(--red); }
.key-actions{ margin-top:3px; }
.key.del{ flex:1; max-width:none; font-size:13px; letter-spacing:.04em; }
.key.fire{
  flex:2.4; max-width:none; background:var(--red); color:#fff;
  font-size:15px; letter-spacing:.1em; gap:7px;
  display:flex; align-items:center; justify-content:center;
}
.key.fire svg{ width:17px; height:17px; }
.key.fire:active{ background:var(--red-deep); }
.qzone.spell-mode{ justify-content:center; }

/* 拆包倒计时 */
.spike-timer{
  text-align:center; font-family:var(--f-num); font-size:40px; font-weight:600;
  color:var(--red); line-height:1; letter-spacing:.03em;
}
.spike-timer.beat{ animation:beat .5s ease-in-out infinite; }

/* 排行榜 */
.lbrow{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--surface); margin-bottom:5px;
  --cut:7px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.lbrow.me{ box-shadow:inset 0 0 0 1px var(--red); }
.lb-pos{ font-family:var(--f-num); font-size:16px; width:26px; color:var(--ink-faint); font-weight:600; flex:none; }
.lbrow:nth-child(1) .lb-pos{ color:var(--gold); }
.lb-name{ flex:1; min-width:0; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-v{ font-family:var(--f-num); font-size:15px; font-weight:600; }

/* 骨架屏：匹配最终布局形状 */
.skel{ background:var(--surface); position:relative; overflow:hidden; }
.skel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  animation:shimmer 1.3s infinite;
}
.skel-row{ height:52px; margin-bottom:5px; }

.toast{
  position:fixed; left:50%; bottom:calc(78px + var(--safe-b)); transform:translateX(-50%);
  z-index:90; padding:11px 18px; background:var(--raise); font-size:14px;
  --cut:7px; max-width:calc(100% - 32px); text-align:center;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  animation:toastIn .22s var(--ease);
}
.toast.err{ background:var(--red-deep); }

@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes sheetUp{ from{transform:translateY(22px)} to{transform:none} }
@keyframes toastIn{ from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes shimmer{ to{ transform:translateX(100%) } }
@keyframes beat{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.09)} }

/* 桌面端：拉宽但不改变操作位置 */
@media (min-width:700px){
  .wrap{ padding:0 24px; }
  .opts{ grid-template-columns:1fr 1fr; }
  .action-row{ gap:12px; }
  .grid-lv{ grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); }
}

/* 无障碍：所有动效可关 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .timer-fill{ transition:none; }
}

/* ============ 新兵训练 ============
   教学层用青色，和战斗的红色分开：红=对抗，青=辅助信息。
   入场动画只动 transform，不动 opacity —— 页面隐藏时 CSS 动画会暂停，
   用 opacity 会把面板冻在半透明状态上，之前在弹层上踩过一次。 */

.ob{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center;
     padding:calc(28px + var(--safe-t)) 20px calc(24px + var(--safe-b)); }
/* 内容和按钮当成一组一起居中。让按钮贴底会在高屏上留出一大片空白，
   这是一次性页面，整体感比拇指可达性更要紧。 */
.ob-top{ max-width:520px; width:100%; margin:0 auto; }
.ob-kicker{ font-family:var(--f-ui); font-size:11px; letter-spacing:.22em;
            text-transform:uppercase; color:var(--cyan); }
.ob-h{ font-family:var(--f-display); font-weight:600; font-size:clamp(30px,8vw,42px);
       line-height:1.06; margin-top:12px; }
.ob-h em{ font-style:normal; color:var(--red); }
.ob-p{ color:var(--ink-dim); font-size:15px; line-height:1.65; margin-top:16px; max-width:34em; }
.ob-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
           background:var(--line-soft); margin-top:26px; border:1px solid var(--line-soft); }
.ob-fact{ background:var(--surface); padding:14px 12px; }
.ob-fact b{ display:block; font-family:var(--f-num); font-size:22px; font-weight:600; line-height:1; }
.ob-fact span{ display:block; font-size:11px; color:var(--ink-faint); margin-top:7px; letter-spacing:.04em; }
.ob-act{ max-width:520px; width:100%; margin:34px auto 0; }
.ob-skip{ display:block; width:100%; margin-top:14px; padding:10px;
          font-size:13px; color:var(--ink-faint); text-align:center; }
.ob-skip:hover{ color:var(--ink-dim); }

/* 解说面板：贴底，上方留白让学生还能看见刚才发生的事 */
.brief-bg{ position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end;
           justify-content:center; background:rgba(8,14,20,.55);
           backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.brief{ --cut:16px; width:100%; max-width:520px; background:var(--surface);
        border-top:2px solid var(--cyan);
        padding:18px 18px calc(18px + var(--safe-b));
        clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut));
        animation:briefUp .3s var(--ease) both; max-height:82dvh; overflow-y:auto; }
@keyframes briefUp{ from{ transform:translateY(26px) } to{ transform:none } }
@media (prefers-reduced-motion:reduce){ .brief{ animation:none } }

.brief-tag{ display:flex; align-items:center; gap:7px; color:var(--cyan);
            font-family:var(--f-ui); font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.brief-tag svg{ width:15px; height:15px; }
.brief-h{ font-family:var(--f-display); font-size:20px; font-weight:600; margin-top:10px; line-height:1.25; }
.brief-p{ color:var(--ink-dim); font-size:14.5px; line-height:1.65; margin-top:9px; }
.brief-p b{ color:var(--ink); font-weight:600; }
.brief .btn{ margin-top:18px; }

/* 两把枪的对照：教学里最关键的一屏，让"贵=难=分高"自己显出来 */
.gun-vs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft);
         border:1px solid var(--line-soft); margin-top:15px; }
.gun-vs>div{ background:var(--surface-2); padding:13px 12px; }
.gun-vs .n{ font-family:var(--f-display); font-size:16px; font-weight:600; }
.gun-vs .price{ font-family:var(--f-num); font-size:12px; color:var(--ink-faint); margin-top:2px; }
.gun-vs dl{ margin-top:11px; display:grid; gap:7px; }
.gun-vs dd{ margin-inline-start:0; }   /* 清掉 dd 的浏览器默认缩进，否则值和标签对不齐 */
.gun-vs dt{ font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }
.gun-vs dd{ font-size:13.5px; margin-top:1px; }
.gun-vs .hi{ color:var(--cyan); font-family:var(--f-num); font-weight:600; }
.gun-vs .lo{ color:var(--ink-dim); font-family:var(--f-num); }

/* 购买页在教学里的引导态 */
.item.tut-target{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset; }
.item.tut-dim{ opacity:.4; pointer-events:none; }
.tut-hint{ display:flex; align-items:center; gap:7px; margin:0 0 12px;
           padding:10px 12px; background:rgba(24,229,208,.07);
           border-left:2px solid var(--cyan); font-size:13.5px; color:var(--ink); }
.tut-hint svg{ width:16px; height:16px; color:var(--cyan); flex:none; }

/* 教学赛在战斗页顶部的标记 */
.tut-band{ display:flex; align-items:center; justify-content:center; gap:8px;
           padding:6px; background:rgba(24,229,208,.09);
           font-family:var(--f-ui); font-size:11px; letter-spacing:.18em;
           text-transform:uppercase; color:var(--cyan); }