/* ============================================================
   shared/style.css — 设计系统（工业电竞主义）+ 竞技场 KO 动画（浮夸版）
   index.html 与 arenas/*.html 共享。
   签名元素：六边形擂台 + KO 多重冲击波碎裂 + 胜方留台 + 直播扫描线。
   ============================================================ */
:root{
  --bg:#0a0a0f; --bg-2:#12121a; --panel:#16161f; --panel-2:#1c1c28;
  --border:#2a2a3a; --border-bright:#3a3a52;
  --fg:#e8e8f0; --fg-dim:#8888a0; --fg-mute:#555568;
  --accent:#00ffd1; --accent-dim:#00b894;   /* 青 — 胜/蓝方 */
  --danger:#ff2e63;                          /* 品红 — 败/红方/KO */
  --gold:#ffd700;                            /* 金 — 冠军 */
  --t1:#ff6b35; --t2:#00ffd1; --t3:#4cc9f0; --t4:#b5179e;
  --pit:#0d1117;                             /* 擂台底色 */
  --grid-line:rgba(0,255,209,0.04);
  --scan:rgba(255,255,255,0.025);            /* 扫描线 */
  --side-red:#ff2e63; --side-blue:#00ffd1;
  --ko-color:#00ffd1;                        /* KO 染色（胜方档位色，JS 注入） */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:'JetBrains Mono','Noto Sans SC',monospace;
  font-size:14px; line-height:1.6; overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at top, rgba(0,255,209,0.06), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(181,23,158,0.04), transparent 50%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 40px 40px, 40px 40px;
  background-attachment:fixed;
}
h1,h2,h3,h4,.display{font-family:'Space Grotesk','Noto Sans SC',sans-serif}
a{color:var(--accent); text-decoration:none}
button{font-family:inherit; cursor:pointer}

/* ---- 顶部导航（赛场页公用） ---- */
.arena-nav{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 28px; border-bottom:1px solid var(--border);
  background:rgba(10,10,15,0.85); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:50;
}
.arena-nav .brand{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px}
.arena-nav .brand b{color:var(--accent)}
.arena-nav .crumbs{display:flex; gap:6px; flex-wrap:wrap}
.arena-nav .crumb{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  padding:6px 12px; border:1px solid var(--border); border-radius:2px;
  color:var(--fg-dim); transition:all .2s;
}
.arena-nav .crumb:hover{border-color:var(--accent-dim); color:var(--fg)}
.arena-nav .crumb.active{background:var(--accent); color:#04141a; border-color:var(--accent); font-weight:700}
.arena-nav .spacer{flex:1}
.arena-nav .hub-link{font-size:12px; color:var(--accent)}
.btn-clear{
  background:transparent; border:1px solid var(--danger); color:var(--danger);
  padding:7px 14px; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; border-radius:2px; transition:all .15s;
}
.btn-clear:hover{background:var(--danger); color:#1a0410; box-shadow:0 0 16px rgba(255,46,99,0.5)}

.arena-main{max-width:1100px; margin:0 auto; padding:32px 24px 80px}

/* ---- 阶段标题 ---- */
.stage-head{margin-bottom:24px}
.stage-head .eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:0.3em; color:var(--accent); text-transform:uppercase;
}
.stage-head h1{
  font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-0.02em;
  margin:6px 0 4px;
}
.stage-head .sub{color:var(--fg-dim); font-size:13px}

/* 内联 SVG 图标基线（替代 emoji；随字号缩放，用 color 着色） */
.ico{
  width:1em; height:1em; display:inline-block; vertical-align:-0.15em;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ============================================================
   单列堆叠：一屏一个对决，往下滚看下一场
   ============================================================ */
.stack-col{display:flex; flex-direction:column; gap:28px}
.ko-card{
  background:var(--panel); border:1px solid var(--border); border-radius:6px; overflow:hidden;
  scroll-margin-top:80px;
}
.ko-card.done{border-color:var(--accent-dim); box-shadow:0 0 24px rgba(0,255,209,0.08)}
.ko-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; background:var(--panel-2); border-bottom:1px solid var(--border);
}
.ko-card-head .mid{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px}
.ko-card-head .mid .idx{color:var(--accent); font-family:'JetBrains Mono',monospace; margin-right:8px}
.ko-card-head .meta{font-size:11px; color:var(--fg-mute); font-family:'JetBrains Mono',monospace}
.ko-card .arena-stage{border:none; border-radius:0}

/* 轮次锚点条（点击滚到对应对决，不再分屏） */
.round-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.round-bar .chip{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em;
  padding:8px 14px; border:1px solid var(--border); border-radius:2px; color:var(--fg-dim);
  background:var(--panel); transition:all .2s;
}
.round-bar .chip:hover{color:var(--fg); border-color:var(--border-bright)}
.round-bar .chip.active{background:var(--accent); color:#04141a; border-color:var(--accent); font-weight:700}
.group-tabs{display:flex; gap:8px; margin-bottom:16px}
.group-tabs .chip{padding:10px 18px}

/* 轮次分隔（单列堆叠内的章节锚） */
.round-sep{
  display:flex; align-items:center; gap:14px; margin:10px 4px 2px;
  color:var(--fg-mute); font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:0.18em; text-transform:uppercase; scroll-margin-top:84px;
}
.round-sep::before, .round-sep::after{content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--border-bright), transparent)}
.round-sep .rs-tag{padding:0 6px; color:var(--accent-dim)}

/* ============================================================
   竞技场舞台（核心签名）
   ============================================================ */
.arena-stage{
  position:relative;
  background:var(--pit);
  border:1px solid var(--border-bright);
  border-radius:6px;
  padding:56px 32px 44px;
  overflow:hidden;
  min-height:460px;          /* 结构兜底：任何情况下擂台高度不低于此值，防止塌陷 */
}
/* 直播扫描线 */
.arena-stage::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px);
}
/* 擂台氛围光 */
.arena-stage::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at center, rgba(0,255,209,0.05), transparent 65%);
}

.fighters{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  position:relative; z-index:2;
  min-height:200px;          /* 双方对战区结构兜底，绝不塌陷 */
}
@media(max-width:720px){.fighters{grid-template-columns:1fr; gap:16px}}

.fighter{display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; transition:filter .3s, opacity .4s, transform .4s}
.fighter.red{--side:var(--side-red)}
.fighter.blue{--side:var(--side-blue)}
.fighter.loser{filter:saturate(.4) brightness(.5); opacity:.35}
.fighter.gone{opacity:0 !important; transform:scale(.3) translateY(50px); pointer-events:none}
.fighter.winner{filter:drop-shadow(0 0 24px var(--side))}

.emblem-wrap{
  position:relative; width:120px; height:140px;
  display:flex; align-items:center; justify-content:center;
}
.emblem-wrap img.emblem{
  width:120px; height:140px; display:block;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s, opacity .4s;
}
/* 对峙：双方靠中放大 */
.arena-stage.ko-clash .fighter.red .emblem-wrap img.emblem{transform:translateX(22px) scale(1.12)}
.arena-stage.ko-clash .fighter.blue .emblem-wrap img.emblem{transform:translateX(-22px) scale(1.12)}
/* 冲锋：胜方带速度线扑向败方 */
.arena-stage.ko-strike .fighter.winner.red .emblem-wrap img.emblem{transform:translateX(64px) scale(1.35)}
.arena-stage.ko-strike .fighter.winner.blue .emblem-wrap img.emblem{transform:translateX(-64px) scale(1.35)}
.arena-stage.ko-strike .fighter.winner{filter:drop-shadow(0 0 36px var(--side)) drop-shadow(0 0 12px var(--ko-color))}
/* 败方抖动 */
.arena-stage.ko-shatter .fighter.loser .emblem-wrap img.emblem{animation:shake .3s linear both}
/* 胜方留擂台：放大 + 呼吸发光（胜方始终留在正常流，居中由 ko-done 的 flex 容器承担；
   绝不用 absolute——否则判定后败方/VS/控件移除会让擂台正常流架空而塌陷） */
.arena-stage.ko-victor .fighter.winner{
  transform:scale(1.35);
  animation:victorGlow 1.8s ease-in-out infinite;
}
.arena-stage.ko-victor .fighter.winner .emblem-wrap img.emblem{
  transform:none;   /* 清掉冲锋阶段的 translateX 偏移 */
}
.arena-stage.ko-victor .vs-divider{opacity:0; transform:scale(.5)}

/* === 判定终态（ko-done）：擂台收束 —— 败方/VS/控件退场，胜方 flex 居中放大发光 ===
   宣言横幅的终态规则不在这里，而在下方 taunt-banner 段（必须排在 .ko-taunt 规则之后：
   两者特异性同为 (0,3,0)，靠源顺序让终态盖过动画态）。 */
.arena-stage.ko-done .fighter.loser.gone,
.arena-stage.ko-done .vs-divider,
.arena-stage.ko-done .controls{display:none}
.arena-stage.ko-done .fighters{
  display:flex; justify-content:center; align-items:center;
  width:100%; min-height:240px;
}

/* 碎片层（覆盖在败方徽标上） */
.shards{position:absolute; inset:0; pointer-events:none; z-index:3}
.shard{
  position:absolute; top:0; left:0; width:30px; height:35px;
  background-size:120px 140px; background-repeat:no-repeat;
  opacity:0;
}
.arena-stage.ko-shatter .shard{animation:shardFly .7s cubic-bezier(.2,.6,.3,1) forwards}

.fighter-name{font-family:'Space Grotesk','Noto Sans SC',sans-serif; font-weight:600; font-size:18px; text-align:center; max-width:220px}
.fighter-meta{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--fg-dim)}
.fighter-meta .pip{width:8px; height:8px; border-radius:50%; background:var(--side); box-shadow:0 0 6px var(--side)}
.fighter-meta .seed-tag{font-family:'JetBrains Mono',monospace; font-weight:700; padding:1px 6px; border-radius:2px; border:1px solid currentColor}

/* 中央 VS */
.vs-divider{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:34px; color:var(--fg-mute); letter-spacing:0.05em;
  position:relative; padding:0 4px; transition:opacity .3s, transform .3s;
}
.vs-divider::after{content:''; position:absolute; left:50%; top:100%; width:1px; height:24px; background:var(--border-bright); transform:translateX(-50%)}
.arena-stage.ko-clash .vs-divider{color:var(--danger); animation:pulse .4s infinite}

/* 控制条：选边 + 判定 */
.controls{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--border);
  position:relative; z-index:2;
}
.side-pick{display:flex; flex-direction:column; gap:6px}
.side-pick label{font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg-mute)}
.side-pick.red label{color:var(--side-red)}
.side-pick.blue label{color:var(--side-blue)}
.side-pick select{
  background:var(--panel); color:var(--fg); border:1px solid var(--border-bright);
  border-radius:3px; padding:10px 12px; font-family:inherit; font-size:13px; min-width:200px;
}
.side-pick.red select{border-color:rgba(255,46,99,0.4)}
.side-pick.blue select{border-color:rgba(0,255,209,0.4)}

.judge-row{display:flex; gap:12px; align-items:flex-end}
.btn{
  border:none; border-radius:3px; padding:12px 22px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.04em; transition:transform .12s, filter .2s;
}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn-red{background:var(--side-red); color:#1a0410}
.btn-blue{background:var(--side-blue); color:#04141a}
.btn-ghost{background:transparent; border:1px solid var(--border-bright); color:var(--fg-dim)}
.btn-ghost:hover{color:var(--fg); border-color:var(--accent)}

/* ============================================================
   KO 覆盖层（双闪 / 暗角 / 三冲击波 / 火星 / 速度线 / 巨印 / 宣言）
   ============================================================ */
.ko-overlay{position:absolute; inset:0; pointer-events:none; z-index:5}

/* 双重闪光：白闪 + 胜方档位色闪 */
.ko-flash{position:absolute; inset:0; opacity:0}
.ko-flash.white{background:#fff}
.ko-flash.color{background:radial-gradient(circle at center, var(--ko-color), transparent 70%); mix-blend-mode:screen}
.arena-stage.ko-boom .ko-flash.white{animation:flash .45s ease-out}
.arena-stage.ko-boom .ko-flash.color{animation:flash .6s ease-out .08s}

/* 暗角：冲击瞬间四周压暗，聚焦中央 */
.ko-vignette{position:absolute; inset:0; opacity:0; background:radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.75) 100%)}
.arena-stage.ko-boom .ko-vignette{animation:vignetteFlash .9s ease-out}

/* 三重冲击波环（延迟扩散） */
.ko-ring{
  position:absolute; left:50%; top:50%; width:24px; height:24px;
  border:3px solid var(--ko-color); border-radius:50%;
  transform:translate(-50%,-50%) scale(0); opacity:0; box-shadow:0 0 20px var(--ko-color);
}
.arena-stage.ko-boom .ko-ring.r1{animation:impactRing .65s ease-out .02s}
.arena-stage.ko-boom .ko-ring.r2{animation:impactRing .75s ease-out .14s; border-color:var(--danger); box-shadow:0 0 20px var(--danger)}
.arena-stage.ko-boom .ko-ring.r3{animation:impactRing .85s ease-out .26s}

/* 火星迸溅 */
.ko-sparks{position:absolute; left:50%; top:50%; width:0; height:0}
.spark{
  position:absolute; left:0; top:0; border-radius:50%;
  background:var(--ko-color); box-shadow:0 0 8px var(--ko-color);
  opacity:0;
}
.arena-stage.ko-boom .spark{animation:sparkFly .7s ease-out forwards}

/* 速度线（胜方冲锋残影） */
.ko-speedlines{position:absolute; inset:0; opacity:0;
  background:repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.06) 18px 19px);
  mix-blend-mode:screen;
}
.arena-stage.ko-strike .ko-speedlines{animation:speedlines .4s ease-out}

/* K.O. 巨印 —— 必须限定 .arena-stage 后代：stage 用 ko-stamp 作状态类，
   若写成独立 .ko-stamp{} 会同时命中 stage 本身，把它污染成 absolute+scale(0)+opacity:0 */
.arena-stage .ko-stamp{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0);
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(110px,22vw,240px); line-height:0.8; letter-spacing:-0.05em;
  pointer-events:none; z-index:6; opacity:0;
}
.arena-stage .ko-stamp span{
  display:inline-block; color:var(--danger);
  -webkit-text-stroke:3px #1a0410;
  text-shadow:
    0 0 30px rgba(255,46,99,0.9),
    0 0 60px rgba(255,46,99,0.5),
    6px 6px 0 #5a0018;
}
.arena-stage.ko-stamp .ko-stamp{
  opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-3deg);   /* 静态终态兜底 */
  animation:koStampIn .6s cubic-bezier(.18,.89,.32,1.28);
}
.arena-stage.ko-stamp .ko-stamp span{animation:stampJitter .12s linear 5}
/* 收尾：印章缩到角落常驻（像盖了个章） */
.arena-stage.ko-done .ko-stamp{
  opacity:.5; transform:translate(8%,72%) scale(.3) rotate(-8deg);     /* 静态终态兜底 */
  animation:stampSettle .5s ease-out;
}
.arena-stage.ko-done .ko-stamp span{animation:none}

/* 宣言横幅（大号 · 醒目） */
.taunt-banner{
  position:absolute; left:50%; bottom:24px; transform:translate(-50%,160%);
  max-width:94%; z-index:7; text-align:center;
  background:linear-gradient(135deg, rgba(22,22,31,0.97), rgba(10,10,15,0.97));
  border:1px solid var(--border-bright); border-radius:6px;
  padding:24px 40px; opacity:0;
  box-shadow:0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(0,255,209,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.taunt-banner::before{
  content:'❝'; position:absolute; left:14px; top:-6px; font-size:54px; line-height:1;
  color:var(--ko-color); opacity:0.55; font-family:'Space Grotesk',serif;
}
.arena-stage.ko-taunt .taunt-banner{
  opacity:1; transform:translate(-50%,0);                              /* 静态终态兜底：类一加就可见 */
  animation:tauntSlam .65s cubic-bezier(.18,.89,.32,1.28);
}
/* ko-done 终态：宣言回归正常流、静态居中、彻底盖过上面 .ko-taunt 的 absolute+translate。
   关键：此规则必须排在 .ko-taunt 规则之后——两者特异性同为 (0,3,0)，由源顺序决胜；
   平局走 ko-draw（无 ko-done），仍用 absolute 居中，互不影响。 */
.arena-stage.ko-done .taunt-banner{
  position:static; transform:none; animation:none;
  opacity:1;
  margin:24px auto 6px;
  width:calc(100% - 48px); max-width:800px;
}
.taunt-banner .who{
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--ko-color); margin-bottom:10px;
}
.taunt-banner .line{
  font-family:'Space Grotesk','Noto Sans SC',sans-serif; font-weight:900;
  font-size:clamp(34px,5vw,60px); line-height:1.15; color:var(--fg);
  text-shadow:0 0 30px rgba(0,255,209,0.25);
}
.taunt-banner .src{
  margin-top:12px; font-size:12px; color:var(--fg-dim); font-style:italic; letter-spacing:0.02em;
}
.taunt-banner .src:empty{display:none}   /* 梗/内部讲话类无出处 → 空来源不占位 */

/* KO 后操作 */
.post-ko{display:flex; gap:12px; justify-content:center; margin-top:20px; position:relative; z-index:2}
.post-ko.hidden{display:none}

/* ============================================================
   小局计分板（系列赛 BO3/BO5）
   ============================================================ */
.series-board{
  position:relative; z-index:2; margin-bottom:22px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  padding:14px 20px; background:var(--panel-2); border:1px solid var(--border-bright); border-radius:4px;
}
.sb-side{display:flex; align-items:center; gap:12px; min-width:0}
.sb-side.red{justify-content:flex-end}
.sb-side.blue{justify-content:flex-start}
.sb-name{
  font-family:'Space Grotesk','Noto Sans SC',sans-serif; font-weight:600; font-size:14px;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stars{display:flex; gap:5px}
.star{
  font-size:22px; line-height:1; transition:transform .2s, color .2s, text-shadow .2s;
  user-select:none;
}
.star.filled.red{color:var(--side-red); text-shadow:0 0 10px var(--side-red)}
.star.filled.blue{color:var(--side-blue); text-shadow:0 0 10px var(--side-blue)}
.star.empty{color:var(--fg-mute); opacity:.32}
.star.popped{animation:starPop .5s cubic-bezier(.18,.89,.32,1.28)}
.sb-mid{display:flex; flex-direction:column; align-items:center; gap:0; min-width:84px}
.sb-mid .score-a, .sb-mid .score-b{
  display:inline-block; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:26px; color:var(--fg); min-width:24px; text-align:center;
}
.sb-mid .dash{color:var(--fg-mute); font-size:20px; padding:0 4px}
.sb-mid .bo-tag{
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em;
  color:var(--fg-mute); text-transform:uppercase; margin-top:3px;
}
.game-log{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  justify-content:center; padding-top:10px; margin-top:4px;
  border-top:1px solid var(--border); font-family:'JetBrains Mono',monospace; font-size:11px;
}
.game-log:empty{display:none}
.gl-label{color:var(--fg-mute); letter-spacing:0.12em; margin-right:4px}
.gl-item{padding:2px 7px; border-radius:2px; border:1px solid var(--border); color:var(--fg-dim)}
.gl-red{color:var(--side-red); border-color:rgba(255,46,99,0.35)}
.gl-blue{color:var(--side-blue); border-color:rgba(0,255,209,0.35)}
.gl-draw{color:var(--gold); border-color:rgba(255,215,0,0.35)}

/* 小局轻闪（胜方侧色扫过舞台） */
.mini-flash{position:absolute; inset:0; opacity:0; pointer-events:none; mix-blend-mode:screen}
.mini-flash.red{background:radial-gradient(circle at center, rgba(255,46,99,0.55), transparent 70%)}
.mini-flash.blue{background:radial-gradient(circle at center, rgba(0,255,209,0.55), transparent 70%)}
.mini-flash.flashed{animation:miniFlash .45s ease-out}

/* 平局印章 */
.draw-stamp{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none; z-index:6; opacity:0;
}
.draw-stamp .cn{
  font-family:'Space Grotesk','Noto Sans SC',sans-serif; font-weight:900;
  font-size:clamp(70px,12vw,140px); line-height:0.9; color:var(--gold);
  -webkit-text-stroke:3px #1a1400;
  text-shadow:0 0 30px rgba(255,215,0,0.85), 0 0 60px rgba(255,215,0,0.45), 6px 6px 0 #5a4400;
}
.draw-stamp .en{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(20px,3vw,34px); letter-spacing:0.3em; color:var(--gold);
  -webkit-text-stroke:1px #1a1400;
}
.arena-stage.ko-draw .draw-stamp{
  opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-2deg);   /* 静态终态兜底 */
  animation:drawStampIn .6s cubic-bezier(.18,.89,.32,1.28);
}
.arena-stage.ko-draw .fighter{animation:stalemate .9s ease-in-out 2}
.arena-stage.ko-draw .vs-divider{color:var(--gold); animation:pulse .6s infinite}

/* 按钮：平局 / 撤销 */
.btn-draw{
  background:transparent; border:1px solid var(--gold); color:var(--gold);
  padding:11px 20px;
}
.btn-draw:hover:not(:disabled){background:var(--gold); color:#1a1400; box-shadow:0 0 16px rgba(255,215,0,0.4)}
.btn-undo{font-size:12px; padding:10px 16px}

@keyframes starPop{0%{transform:scale(0.4)}60%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes miniFlash{0%{opacity:0}20%{opacity:.85}100%{opacity:0}}
@keyframes drawStampIn{
  0%{transform:translate(-50%,-220%) scale(2) rotate(8deg); opacity:0}
  55%{transform:translate(-50%,-50%) scale(1.1) rotate(-2deg); opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(-2deg); opacity:1}
}
@keyframes stalemate{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---- 关键帧 ---- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes shake{
  0%{transform:translate(0,0)} 12%{transform:translate(-9px,6px)} 24%{transform:translate(9px,-6px)}
  36%{transform:translate(-8px,-5px)} 48%{transform:translate(8px,5px)} 60%{transform:translate(-6px,4px)}
  72%{transform:translate(6px,-4px)} 84%{transform:translate(-4px,3px)} 100%{transform:translate(0,0)}
}
@keyframes shardFly{
  0%{opacity:1; transform:translate(0,0) rotate(0)}
  100%{opacity:0; transform:translate(var(--tx),var(--ty)) rotate(var(--rot))}
}
@keyframes sparkFly{
  0%{opacity:1; transform:translate(0,0) scale(1)}
  70%{opacity:1}
  100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(.2)}
}
@keyframes flash{0%{opacity:0}10%{opacity:.9}100%{opacity:0}}
@keyframes vignetteFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes impactRing{0%{transform:translate(-50%,-50%) scale(0); opacity:1; border-width:6px}100%{transform:translate(-50%,-50%) scale(22); opacity:0; border-width:1px}}
@keyframes speedlines{0%{opacity:0; transform:scaleX(.6)}40%{opacity:1}100%{opacity:0; transform:scaleX(1.2)}}
@keyframes koStampIn{
  0%{transform:translate(-50%,-220%) scale(2.6) rotate(-12deg); opacity:0}
  50%{transform:translate(-50%,-50%) scale(1.12) rotate(-4deg); opacity:1}
  62%{transform:translate(-50%,-50%) scale(.94) rotate(-2deg)}
  74%{transform:translate(-50%,-50%) scale(1.04) rotate(-3deg)}
  100%{transform:translate(-50%,-50%) scale(1) rotate(-3deg); opacity:1}
}
@keyframes stampJitter{0%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-1px)}100%{transform:translate(0,0)}}
@keyframes stampSettle{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
  100%{opacity:.42; transform:translate(8%,72%) scale(.28) rotate(-8deg)}
}
@keyframes tauntSlam{
  0%{transform:translate(-50%,-90px); opacity:0}
  55%{transform:translate(-50%,8px); opacity:1}
  70%{transform:translate(-50%,-4px)}
  100%{transform:translate(-50%,0); opacity:1}
}
@keyframes screenShake{
  10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(4px,-2px)}
  30%,50%,70%{transform:translate(-7px,2px)} 40%,60%{transform:translate(7px,-2px)}
}
@keyframes victorGlow{
  0%,100%{filter:drop-shadow(0 0 24px var(--side)) drop-shadow(0 0 8px var(--ko-color))}
  50%{filter:drop-shadow(0 0 40px var(--side)) drop-shadow(0 0 18px var(--ko-color))}
}
.arena-stage.shake{animation:screenShake .95s cubic-bezier(.36,.07,.19,.97) both}

/* ============================================================
   复用组件：分组卡 / 模型行 / 档位徽 / 积分榜 / 对阵slot
   ============================================================ */
.groups-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:1000px){.groups-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.groups-grid{grid-template-columns:1fr}}
.group-card{background:var(--panel); border:1px solid var(--border); border-radius:4px; overflow:hidden; transition:border-color .3s}
.group-card:hover{border-color:var(--border-bright)}
.group-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--panel-2); border-bottom:1px solid var(--border)}
.group-head .gname{font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700}
.group-head .gname span{color:var(--accent)}
.group-head .glabel{font-size:10px; color:var(--fg-mute); letter-spacing:0.15em; text-transform:uppercase}
.model-row{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid rgba(42,42,58,0.5); transition:background .2s}
.model-row:last-child{border-bottom:none}
.model-row:hover{background:rgba(0,255,209,0.03)}
.model-row img{width:30px; height:35px; flex-shrink:0}
.seed-badge{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; width:28px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:2px; flex-shrink:0}
.seed-T1{background:rgba(255,107,53,0.15); color:var(--t1); border:1px solid rgba(255,107,53,0.3)}
.seed-T2{background:rgba(0,255,209,0.12); color:var(--t2); border:1px solid rgba(0,255,209,0.3)}
.seed-T3{background:rgba(76,201,240,0.12); color:var(--t3); border:1px solid rgba(76,201,240,0.3)}
.seed-T4{background:rgba(181,23,158,0.15); color:var(--t4); border:1px solid rgba(181,23,158,0.3)}
.model-info{flex:1; min-width:0}
.model-name{font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.model-vendor{font-size:11px; color:var(--fg-mute); margin-top:1px}

/* 积分榜 */
.standings-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:1000px){.standings-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.standings-grid{grid-template-columns:1fr}}
.standing-card{background:var(--panel); border:1px solid var(--border); border-radius:4px; overflow:hidden}
.standing-head{padding:12px 16px; background:var(--panel-2); border-bottom:1px solid var(--border); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px}
.standing-head span{color:var(--accent)}
.standing-table{width:100%; border-collapse:collapse; font-size:12px}
.standing-table th{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--fg-mute); font-weight:400; letter-spacing:0.1em; padding:8px 6px; text-transform:uppercase; border-bottom:1px solid var(--border); text-align:center}
.standing-table th:first-child{text-align:left; padding-left:12px}
.standing-table td{padding:9px 6px; border-bottom:1px solid rgba(42,42,58,0.5); text-align:center; font-family:'JetBrains Mono',monospace}
.standing-table td:first-child{text-align:left; padding-left:12px; font-family:'Noto Sans SC',sans-serif; font-size:12px}
.standing-table tr.qualify td{color:var(--accent)}
.standing-table tr.qualify td:first-child::before{content:'▸ '; color:var(--accent)}
.standing-table tr:last-child td{border-bottom:none}
.standing-table .pts{font-weight:700; color:var(--fg)}

/* 对阵 slot / match（淘汰赛小卡） */
.match{background:var(--bg-2); border:1px solid var(--border); border-radius:3px; margin:8px 0; overflow:hidden; position:relative}
.match.win-lit{border-color:var(--accent); box-shadow:0 0 16px rgba(0,255,209,0.15)}
.slot{display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border); position:relative}
.slot:last-child{border-bottom:none}
.slot.winner{background:rgba(0,255,209,0.06)}
.slot.winner .slot-name{color:var(--accent); font-weight:600}
.slot.winner::before{content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); box-shadow:0 0 6px var(--accent)}
.slot.loser{opacity:0.45}
.slot.loser .slot-name{text-decoration:line-through; text-decoration-color:var(--danger)}
.slot-name{flex:1; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.slot-name.tbd{color:var(--fg-mute); font-style:italic}
.slot-score{font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--fg-dim); flex-shrink:0; min-width:16px; text-align:right}
.slot.winner .slot-score{color:var(--accent)}
.slot.loser .slot-score{color:var(--danger)}

/* 加冕（决赛） */
.coronation{
  position:absolute; inset:0; z-index:8; pointer-events:none;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  opacity:0; background:radial-gradient(circle at center, rgba(255,215,0,0.18), transparent 60%);
}
.arena-stage.crowned .coronation{animation:coronationIn .8s ease-out forwards}
.coronation .crown{filter:drop-shadow(0 0 24px var(--gold)); color:var(--gold); display:flex; justify-content:center}
.coronation .crown .ico{width:76px; height:76px; stroke-width:1.6}
.coronation .title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,5vw,52px); color:var(--gold); -webkit-text-stroke:1px #1a1400}
@keyframes coronationIn{0%{opacity:0; transform:scale(.7)}100%{opacity:1; transform:scale(1)}}

/* 通用工具 */
.muted{color:var(--fg-mute)}
.row-gap{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:20px}
.hint{font-size:12px; color:var(--fg-dim); margin-top:12px; line-height:1.7}
.hint code{background:var(--bg-2); padding:1px 6px; border-radius:2px; color:var(--accent)}

/* 滚动入场 */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  *{animation:none !important}
  .arena-stage.ko-shatter .shard{display:none}
  .fighter.gone{opacity:.35 !important; transform:none}
  /* 动画被关掉后，用静态值保证宣言/印章可见；ko-done 终态走上面的静态居中规则，不在此列 */
  .arena-stage.ko-taunt:not(.ko-done) .taunt-banner{opacity:1; transform:translate(-50%,0)}
  .arena-stage.ko-stamp .ko-stamp,
  .arena-stage.ko-done .ko-stamp{opacity:.5; transform:translate(8%,72%) scale(.3) rotate(-8deg)}
  .arena-stage.ko-draw .draw-stamp{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
  .arena-stage.ko-draw .fighter{transform:none}
}