/* ========== RESET ========== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }

/* ========== CSS 变量 ========== */
:root {
  /* 背景：WC深海蓝方案（替换英超草绿） */
  --bg-base:    #020815;
  --bg-panel:   #040d1a;
  --bg-card:    #060e1c;
  --bg-input:   #0a1428;
  /* 主调：FIFA深海蓝 + 竞技蓝 */
  --wc-green:   #00d46a;
  --wc-primary: #1a3a6e;
  --wc-navy:    #0d2040;
  --neon-blue:  #00c8ff;
  --neon-blue2: #0088cc;
  --neon-purple:#8855ff;
  --neon-glow:  rgba(0,200,255,0.15);
  /* 强调：FIFA金（奖杯色，保留） */
  --gold:       #c8a832;
  --gold-bright:#f0d060;
  --gold-dim:   rgba(200,168,50,0.14);
  --gold-line:  rgba(200,168,50,0.3);
  /* 文字 */
  --text:       #e8f4ff;
  --text-sub:   rgba(232,244,255,0.5);
  --text-dim:   rgba(232,244,255,0.2);
  /* 功能色 */
  --green:      #00e087;
  --red:        #ff3355;
  --orange:     #ff8833;
  /* agent 专属（不变） */
  --stat:       #4aabff;
  --mystic:     #bb66ff;
  --history:    #ffaa22;
  --gambler:    #00e087;
  --psych:      #00ddcc;
  --moderator:  #f0d060;
  /* 边框 */
  --border:     rgba(0,200,255,0.1);
  --border-md:  rgba(0,200,255,0.2);
  --border-gold: rgba(200,168,50,0.3);
}

/* ========== 基础 ========== */
body {
  font-family: -apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background: #020815;
  /* WC 2026 深海蓝：FIFA体育场夜间灯光氛围 */
  background-image:
    /* 顶部聚光灯白蓝 */
    radial-gradient(ellipse 130% 45% at 50% 0%, rgba(20,60,160,0.50) 0%, transparent 55%),
    /* 底部深蓝 */
    radial-gradient(ellipse 140% 40% at 50% 105%, rgba(10,30,80,0.40) 0%, transparent 55%),
    /* 左右侧光（冷蓝） */
    radial-gradient(ellipse 35% 90% at 0% 50%, rgba(0,40,120,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 35% 90% at 100% 50%, rgba(0,40,120,0.22) 0%, transparent 60%),
    /* 中心金光（奖杯光晕） */
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(60,40,0,0.18) 0%, transparent 70%);
  color: var(--text);
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}
/* 足球场六边形水印背景（极浅） */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpolygon points='30,2 58,17 58,35 30,50 2,35 2,17' fill='none' stroke='rgba(0,200,80,0.025)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 52px;
}

/* ========== TOP BAR ========== */
.top-bar {
  flex-shrink: 0; height: 54px;
  background: linear-gradient(180deg, rgba(0,12,4,0.99) 0%, rgba(2,8,4,0.98) 100%);
  border-bottom: 1px solid rgba(0,180,60,0.15);
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  position: relative; z-index: 100;
}
/* 顶部绿色 FIFA 风格分隔线 */
.top-bar::before {
  content:''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--wc-green) 25%, var(--gold-bright) 50%, var(--wc-green) 75%, transparent 100%);
  opacity: 0.8;
}
/* 底部金绿渐变线 */
.top-bar::after {
  content:''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--wc-green) 20%, var(--gold) 50%, var(--wc-green) 80%, transparent 100%);
  opacity: 0.6;
}
/* 品牌标识 */
.tb-brand {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 1px;
  white-space: nowrap; text-transform: uppercase;
  filter: drop-shadow(0 0 8px rgba(0,212,106,0.4));
}
.tb-brand-main {
  font-size: 11px; font-weight: 900; letter-spacing: 3px;
  background: linear-gradient(90deg, var(--wc-green) 0%, var(--gold-bright) 50%, var(--wc-green) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.tb-brand-wc {
  font-size: 7px; font-weight: 700; letter-spacing: 2.5px;
  background: linear-gradient(90deg, rgba(200,168,50,0.85), rgba(0,212,106,0.7));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  opacity: 0.85;
}
/* 比赛信息：世界杯播报记分板风格 */
.tb-match {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0;
  background: rgba(0,15,5,0.5);
  border-left: 1px solid rgba(0,200,80,0.1);
  border-right: 1px solid rgba(0,200,80,0.1);
  margin: 0 12px; border-radius: 4px;
  padding: 0 8px;
}
.tb-team { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.tb-team.home { flex-direction: row; }
.tb-team.away { flex-direction: row-reverse; }
.tb-flag { font-size: 18px; }
/* 队徽 */
.tb-crest {
  width: 28px; height: 28px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
}
.tb-name { font-size: 16px; font-weight: 900; letter-spacing: 0.5px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
/* 赔率标签：带绿色边框 */
.tb-odds {
  font-size: 10px; padding: 2px 8px; border-radius: 3px;
  background: rgba(0,180,50,0.1); border: 1px solid rgba(0,180,50,0.25);
  color: rgba(100,220,120,0.9); font-weight: 700;
}
/* 中间 VS 区 */
.tb-center {
  text-align: center; flex-shrink: 0; padding: 0 14px;
  border-left: 1px solid rgba(0,180,50,0.15);
  border-right: 1px solid rgba(0,180,50,0.15);
}
.tb-vs {
  font-size: 13px; font-weight: 900; letter-spacing: 5px;
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(240,208,96,0.6);
}
.tb-info {
  font-size: 9px; letter-spacing: 2px; margin-top: 2px;
  color: rgba(0,220,100,0.55);
}
.tb-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Phase bar */
.phase-bar { display: flex; gap: 2px; }
.phase-step {
  font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: 2px;
  letter-spacing: 1px; color: var(--text-dim); transition: all .2s; cursor: default;
}
.phase-step.active {
  background: linear-gradient(135deg, var(--neon-blue2), var(--neon-purple));
  color: #fff; box-shadow: 0 0 10px rgba(0,200,255,0.4);
}
.phase-step.done { color: var(--neon-blue); opacity: 0.5; }

/* Live badge */
.live-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 2px;
  color: var(--text-dim); display: flex; align-items: center; gap: 4px;
}
.live-badge.active { color: #ff3355; text-shadow: 0 0 8px rgba(255,51,85,0.6); }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.live-badge.active .live-dot { animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ========== PROBABILITY BAR ========== */
.prob-bar-wrap {
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(0,10,3,0.97) 0%, rgba(2,8,4,0.98) 100%);
  border-bottom: 1px solid rgba(0,180,60,0.12);
  padding: 9px 16px 7px;
  position: relative;
}
.prob-bar-wrap::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,180,60,0.3) 30%, rgba(200,168,50,0.4) 50%, rgba(0,180,60,0.3) 70%, transparent);
}
.prob-bar-teams {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700; margin-bottom: 6px;
  color: var(--text-sub); letter-spacing: 0.5px;
}
.prob-bar-center-label {
  font-size: 9px; letter-spacing: 3px;
  background: linear-gradient(90deg, var(--wc-green), var(--gold-bright), var(--wc-green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.prob-bar-track {
  position: relative; height: 30px;
  border-radius: 4px; overflow: visible; display: flex;
}
.prob-seg {
  height: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: width 0.9s cubic-bezier(.4,0,.2,1); position: relative;
}
.prob-home {
  background: linear-gradient(90deg, #0e3a7a 0%, #1a5acc 60%, #2266ee 100%);
  border-radius: 4px 0 0 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 12px rgba(30,80,200,0.3);
}
.prob-draw {
  background: linear-gradient(90deg, #1a4a20, #1e6028, #156020);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.prob-away {
  background: linear-gradient(90deg, #cc2233 0%, #aa1020 40%, #880d18 100%);
  border-radius: 0 4px 4px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 12px rgba(180,20,40,0.3);
}
.prob-val { font-size: 12px; font-weight: 900; color: rgba(255,255,255,.95); pointer-events: none; }
.prob-user-marker {
  position: absolute; top: -12px; width: 2px; height: calc(100% + 18px);
  background: var(--gold-bright); pointer-events: none; display: none; z-index: 5;
}
.prob-user-marker::before {
  content:'你'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 8px; color: var(--gold-bright); font-weight: 800; white-space: nowrap;
}
.prob-bar-wrap.has-votes { border-bottom-color: rgba(0,200,255,0.15); }
@keyframes segVotePulse { 40%{filter:brightness(1.7)} }
.prob-seg.voted { animation: segVotePulse .5s ease; }
.prob-agents-status { display: flex; gap: 5px; margin-top: 6px; justify-content: center; }
.pas-agent {
  width: 20px; height: 20px; border-radius: 3px;
  border: 1.5px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: 10px; transition: all .3s;
}

/* ========== GAME ARENA ========== */
.game-arena {
  flex: 1; min-height: 0;
  display: flex; overflow: hidden;
  max-width: 100%;
}

/* ── Agent columns ── */
.agent-col {
  flex-shrink: 0; width: 200px; /* V44-1: 统一200px，删掉下方 !important 覆盖 */
  display: flex; flex-direction: column;
  gap: 4px; padding: 6px 5px;
  background: rgba(3,8,20,0.7);
  backdrop-filter: blur(2px);
}
.agent-col.left  { border-right: 1px solid var(--border); }
.agent-col.right { border-left:  1px solid var(--border); }

/* Agent card — KPL选手卡风格 */
.agent-card {
  flex: 1 1 0; min-height: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--agent-color, rgba(0,200,255,0.3));
  border-radius: 6px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7px 8px;
  position: relative; overflow: hidden;
  transition: border-color .25s, box-shadow .25s, opacity .3s, background .25s;
}
.agent-col.right .agent-card {
  border-left: 1px solid var(--border);
  border-right: 3px solid var(--agent-color, rgba(0,200,255,0.3));
}
/* 角色色内发光 */
.agent-card::before {
  content:''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 0% 50%, var(--agent-color) 0%, transparent 65%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.agent-col.right .agent-card::before {
  background: radial-gradient(ellipse at 100% 50%, var(--agent-color) 0%, transparent 65%);
}
/* 扫描线 */
.ac-scan {
  position: absolute; left: 0; right: 0; height: 25%;
  background: linear-gradient(transparent, rgba(0,200,255,0.02) 50%, transparent);
  top: -25%; pointer-events: none; animation: acScan 5s linear infinite; z-index: 1;
}
@keyframes acScan { 0%{top:-25%} 100%{top:110%} }
.ac-portrait {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 5px;
  background: rgba(0,200,255,0.06); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  margin-bottom: 4px; z-index: 2; transition: box-shadow .3s;
}
.ac-info { flex: 1; min-width: 0; z-index: 2; }
.ac-name { font-size: 10px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-title { font-size: 8px; color: var(--text-dim); margin-top: 1px; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--agent-color); opacity: 0; flex-shrink: 0; z-index: 2; align-self: flex-end; }

/* Speaking / thinking states */
.agent-card.speaking {
  border-color: var(--agent-color);
  box-shadow: 0 0 18px -4px var(--agent-color), inset 0 0 0 1px rgba(var(--agent-rgb,0,200,255),.12);
  background: rgba(0,0,0,0.4);
}
.agent-card.speaking::before { opacity: 0.06; }
.agent-card.speaking .ac-portrait { box-shadow: 0 0 10px var(--agent-color); }
.agent-card.speaking .ac-dot { opacity: 1; animation: blink .7s infinite; }
.agent-card.thinking .ac-portrait { animation: thinkPulse .9s ease-in-out infinite alternate; }
@keyframes thinkPulse {
  from { box-shadow: 0 0 3px var(--agent-color); opacity: .65; }
  to   { box-shadow: 0 0 12px var(--agent-color); opacity: 1; }
}
.agent-card.idle-bg { opacity: .22; filter: saturate(.15); }

/* ── Chamber center ── */
.chamber-wrap {
  flex: 1 1 0; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  position: relative; /* 发言框悬浮定位的基准 */
}
.scene3d-wrap {
  flex: 1 1 0; min-height: 0;
  position: relative; background: #010d05; overflow: hidden;
}
#threeCanvas { width: 100%; height: 100%; display: block; }

/* HUD corners */
.hud-corner {
  position: absolute; width: 18px; height: 18px;
  border-style: solid; border-color: rgba(0,212,106,0.5);
  pointer-events: none; z-index: 5;
}
.hud-corner.tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.hud-corner.tr { top: 8px; right: 8px; border-width: 1px 1px 0 0; }
.hud-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; }
.hud-corner.br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

.scene3d-label {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 700; letter-spacing: 4px;
  color: rgba(0,212,106,0.25); white-space: nowrap; pointer-events: none;
  text-transform: uppercase;
}

/* Speaker HUD */
.speaker-hud {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(2,6,18,0.92); border: 1px solid var(--border-md);
  border-radius: 18px; padding: 4px 14px 4px 10px;
  display: flex; align-items: center; gap: 8px; z-index: 10;
  opacity: 0; transition: opacity .3s; pointer-events: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 16px rgba(0,200,255,0.15);
}
.speaker-hud.active { opacity: 1; }
.speaker-hud-icon { font-size: 14px; }
.speaker-hud-name { font-size: 12px; font-weight: 800; color: var(--neon-blue); letter-spacing: .5px; }

/* ── Broadcast panel（3D 场景内悬浮字幕条）── */
.broadcast-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 20;
  /* 底部不透明，向上渐变透明——3D 场景从上方完整透出 */
  background: linear-gradient(to top,
    rgba(2,5,10,0.95) 0%,
    rgba(2,5,10,0.88) 45%,
    rgba(2,5,10,0.40) 80%,
    transparent 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid rgba(0,212,106,0.12);
  padding: 0;
  /* 最多显示1条历史+1条当前：约 155px */
  min-height: 0; max-height: 300px;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.broadcast-panel::-webkit-scrollbar { display: none; }
.broadcast-panel .broadcast-placeholder {
  display: flex; align-items: flex-end; justify-content: center;
  height: 32px; padding-bottom: 8px;
  color: rgba(0,212,106,0.25); font-size: 10px; letter-spacing: 3px;
}
.broadcast-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 140px; color: var(--text-dim); font-size: 12px; letter-spacing: 3px;
}
.broadcast-content { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px 8px; }
.bp-stripe { position: absolute; top: 0; left: 0; right: 0; height: 2px; transition: background .3s; }
.bp-live { position: absolute; top: 8px; right: 12px; font-size: 8px; color: var(--red); font-weight: 700; letter-spacing: 2px; display: flex; align-items: center; gap: 4px; }
.bp-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: blink 1.4s infinite; }

/* ── bc-card: 历史条目（压缩态） ── */
.bc-card {
  position: relative;
  border-left: 3px solid var(--seat-color, rgba(100,120,200,0.3));
  padding: 4px 10px 4px 8px;
  border-radius: 3px;
  opacity: 0.18; filter: saturate(0.2);
  overflow: hidden;
  transition: opacity .4s, filter .4s;
}
.bc-card .bc-body-wrap { display: none; }
.bc-card .bc-accent-bar { display: none; }
.bc-card .bc-compact-line {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; white-space: nowrap; overflow: hidden;
}
.bc-cl-icon { flex-shrink: 0; }
.bc-cl-name { font-weight: 700; flex-shrink: 0; }
.bc-cl-text { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }

/* ── bc-card.bc-active: 广播下方字幕（当前发言） ── */
.bc-card.bc-active {
  opacity: 1; filter: saturate(1);
  background: linear-gradient(135deg, rgba(5,12,28,0.98) 0%, rgba(3,8,18,0.95) 100%);
  border: 1px solid rgba(150,160,220,0.1);
  border-left: 5px solid var(--seat-color, rgba(0,200,255,0.5));
  border-radius: 7px;
  padding: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.7), 0 0 28px -14px var(--seat-color, transparent);
}
.bc-card.bc-active .bc-compact-line { display: none; }
.bc-card.bc-active .bc-accent-bar { display: block; }
.bc-card.bc-active .bc-body-wrap { display: flex; min-height: 110px; }
/* 顶部颜色条 */
.bc-accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--seat-color, rgba(0,200,255,0.5)), transparent 72%);
  opacity: 0.75;
}
/* 左侧头像栏 */
.bc-portrait {
  width: 70px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 10px 4px;
  position: relative;
  border-right: 1px solid rgba(255,255,255,0.04);
}
.bc-portrait::before {
  content: ''; position: absolute; inset: 0;
  background: var(--seat-color); opacity: 0.07;
  border-radius: 0 0 0 7px;
}
.bc-av {
  font-size: 26px;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--seat-color, rgba(0,200,255,0.3));
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  box-shadow: 0 0 14px -4px var(--seat-color, transparent);
  position: relative; z-index: 1;
}
.bc-av-role {
  font-size: 8px; color: var(--text-dim); letter-spacing: 0.5px;
  text-align: center; line-height: 1.4;
  position: relative; z-index: 1; padding: 0 4px;
}
/* 右侧内容区 */
.bc-content {
  flex: 1; min-width: 0;
  padding: 9px 12px 9px 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.bc-top-row { display: flex; align-items: center; gap: 8px; margin-bottom: 1px; }
.bc-agent-name {
  font-size: 14px; font-weight: 900; color: var(--seat-color);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-phase-badge {
  font-size: 8px; font-weight: 700; padding: 2px 8px; border-radius: 2px;
  letter-spacing: 1.5px; flex-shrink: 0;
  background: rgba(0,200,255,0.07); border: 1px solid rgba(0,200,255,0.15); color: rgba(0,200,255,0.7);
}
.bc-phase-badge.badge-vote   { background: rgba(200,168,50,.10); border-color: rgba(200,168,50,.3); color: var(--gold); }
.bc-phase-badge.badge-initial{ background: rgba(0,200,255,.07); border-color: rgba(0,200,255,.2);  color: var(--neon-blue); }
.bc-phase-badge.badge-debate { background: rgba(136,85,255,.08); border-color: rgba(136,85,255,.2); color: var(--neon-purple); }
.bc-phase-badge.badge-opening{ background: rgba(0,200,80,.07);  border-color: rgba(0,200,80,.2);   color: var(--wc-green); }
.bc-speech { font-size: 12.5px; line-height: 1.65; color: rgba(221,238,255,.88); }
/* 发言框流式占位（speaking_start → message 之间 ~7s） */
.bc-speech-loading {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(200,220,255,.55); font-style: italic;
  min-height: 28px;
}
.bc-loading-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--agent-color, rgba(200,200,255,.6));
  animation: bcDotBounce 1.1s infinite ease-in-out;
}
.bc-loading-dot:nth-child(2) { animation-delay: .18s; }
.bc-loading-dot:nth-child(3) { animation-delay: .36s; }
.bc-loading-text { margin-left: 4px; letter-spacing: .5px; }
@keyframes bcDotBounce {
  0%,80%,100% { opacity: .25; transform: translateY(0); }
  40%         { opacity: 1;   transform: translateY(-3px); }
}
.bc-catchphrase {
  padding: 5px 8px;
  background: linear-gradient(90deg, rgba(200,168,50,.12), transparent 80%);
  border-left: 2px solid var(--gold);
  font-size: 11px; font-weight: 700; color: var(--gold-bright);
  border-radius: 0 3px 3px 0; line-height: 1.45;
}
.bc-scene {
  font-size: 10.5px; color: var(--text-sub); font-style: italic;
  padding-top: 4px; border-top: 1px dashed rgba(255,255,255,0.06); line-height: 1.5;
}
.bc-tag {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  font-size: 9px; font-weight: 700;
  background: rgba(0,200,255,.06); color: var(--text-dim); border: 1px solid var(--border);
}
.bc-card.bc-active.moderator-card {
  border-left-color: var(--gold);
  background: linear-gradient(135deg, rgba(10,8,2,0.98), rgba(5,4,1,0.95));
}
.bc-card.bc-active.reaction-card { opacity: 0.88; }
.moderator-line { border-left-color: var(--gold) !important; font-style: italic; }

/* Phase banner */
.phase-banner, .phase-flash {
  text-align: center; padding: 4px 0; margin: 4px 0;
  font-size: 9px; font-weight: 800; letter-spacing: 5px; color: var(--text-dim);
  text-transform: uppercase; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; justify-content: center;
}
.banner-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--border-md)); }
.phase-banner:last-child .banner-line:last-child { background: linear-gradient(to left, transparent, var(--border-md)); }

/* Hero reveal */
/* hero-reveal 第一处（被后面的规则覆盖） */
.hero-reveal {
  position: absolute; left: 8px; top: 8px;
  width: 148px; height: auto; z-index: 11;
  overflow: hidden; border-radius: 6px;
  transform: scale(0.75) translateX(-30px); opacity: 0;
  transition: transform .4s cubic-bezier(.2,.9,.3,1), opacity .35s;
}
.hero-reveal.active { transform: scale(1) translateX(0); opacity: 1; }
.hr-photo { position: absolute; inset: 0; width: 100%; height: 220px; object-fit: cover; object-position: top center; filter: saturate(1.1) contrast(1.05); opacity: 0; transition: opacity .5s; }
.hr-photo:not(.loading) { opacity: 1; }
/* Hero 卡内容：小版本适配（148px宽） */
.hr-overlay {
  position: relative; z-index: 2; width: 100%;
  background: linear-gradient(to top, rgba(2,6,20,.97) 0%, rgba(2,6,20,.6) 50%, transparent);
  padding: 110px 8px 8px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
}
.hr-phase { font-size: 7px; color: var(--neon-blue); letter-spacing: 2px; font-weight: 700; text-transform: uppercase; }
.hr-name { font-size: 14px; font-weight: 900; color: var(--text); line-height: 1.15; }
.hr-action { font-size: 9px; color: var(--text-sub); line-height: 1.4; margin-top: 2px; }
/* 金色底边框，像画框 */
.hero-reveal::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); }
.hr-video-wrap video { width: 100%; border-radius: 3px; margin-top: 6px; }
.hr-generating { font-size: 9px; color: var(--text-dim); }
/* hr-progress placeholder */
.hr-progress-bar { display: none; }
.hr-ac-icon,.hr-ac-name { display: none; }

/* VS screen */
.vs-screen {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(2,6,20,.97); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 16px;
}
.vs-screen.active { display: flex; animation: fadeIn .3s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.vs-a,.vs-b { font-size: 18px; font-weight: 900; color: var(--text); }
.vs-sep { font-size: 13px; color: var(--neon-blue); letter-spacing: 6px; text-shadow: 0 0 12px var(--neon-blue); }

/* Stance panels */
.stance-panel { flex-shrink: 0; padding: 5px 12px; background: rgba(3,8,20,0.9); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stance-row { display: flex; align-items: center; gap: 4px; font-size: 10px; }
.stance-agent { color: var(--text-dim); }
.stance-pick { padding: 1px 6px; border-radius: 2px; font-size: 9px; font-weight: 700; }
.stance-pick.home { background: rgba(0,100,255,.18); color: #60b0ff; }
.stance-pick.draw { background: rgba(100,110,130,.18); color: #9ca3b0; }
.stance-pick.away { background: rgba(255,40,60,.18); color: #ff8090; }
.pivot-badge { font-size: 9px; color: var(--gold); background: var(--gold-dim); padding: 1px 6px; border-radius: 2px; }
.consensus-bar { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-top: 1px solid var(--border); font-size: 9px; color: var(--text-dim); flex-shrink: 0; }
.consensus-track { flex: 1; height: 2px; background: rgba(0,200,255,0.1); border-radius: 1px; }
.consensus-fill { height: 100%; background: linear-gradient(90deg, var(--neon-blue2), var(--green)); border-radius: 1px; transition: width .8s; }
.consensus-val,.consensus-label { min-width: 30px; }

/* Devil reveal */
.devil-reveal-card { margin: 6px 0; padding: 8px 12px; background: linear-gradient(135deg, var(--gold-dim), rgba(136,85,255,.06)); border: 1px solid var(--gold-line); border-radius: 5px; animation: broadcastIn .4s ease; }
.dr-title { font-size: 11px; color: var(--gold); font-weight: 700; margin-bottom: 4px; letter-spacing: 1px; }
.dr-body { font-size: 10px; color: var(--text-sub); line-height: 1.6; }

/* EV */
.ev-row { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.ev-item { font-size: 10px; padding: 2px 7px; border-radius: 3px; font-weight: 700; }
.ev-pos { background: rgba(0,224,135,.1); color: #4aee9a; border: 1px solid rgba(0,224,135,.2); }
.ev-neg { background: rgba(255,51,85,.07); color: rgba(255,100,120,.7); border: 1px solid rgba(255,51,85,.12); }
.rebalance-note { font-size: 9px; color: var(--text-dim); margin-top: 3px; }

/* ========== CONTROL STRIP ========== */
.control-strip {
  flex-shrink: 0; height: 118px;
  background: rgba(3,6,18,0.98);
  border-top: 1px solid var(--border-md);
  display: flex; align-items: stretch; position: relative; z-index: 100;
}
/* 顶部电竞线 */
.control-strip::before {
  content:''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-blue) 30%, var(--gold) 50%, var(--neon-blue) 70%, transparent);
  opacity: 0.4;
}
.control-left {
  flex-shrink: 0; width: 220px;
  display: flex; flex-direction: column; gap: 5px; padding: 8px 10px;
  border-right: 1px solid var(--border); justify-content: flex-start;
  overflow: visible;
}
.match-selector {
  width: 100%; background: var(--bg-input);
  border: 1px solid var(--border-md); border-radius: 4px;
  color: var(--text); font-size: 11px; padding: 6px 8px;
  outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%2300aacc' d='M4 6L0 2h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
  transition: border-color .2s;
}
.match-selector:focus { border-color: var(--neon-blue); box-shadow: 0 0 6px rgba(0,200,255,0.2); }
.match-selector:disabled { opacity: .3; cursor: not-allowed; }
.ctrl-btn-row { display: flex; gap: 5px; align-items: center; }
.start-btn {
  flex: 1; padding: 8px 10px;
  background: linear-gradient(135deg, #c8a832 0%, #8a6a10 100%);
  border: none; border-radius: 4px; color: #050a18;
  font-size: 12px; font-weight: 900; cursor: pointer;
  letter-spacing: 1.5px; white-space: nowrap; text-transform: uppercase;
  transition: box-shadow .2s, transform .15s;
  box-shadow: 0 2px 14px rgba(200,168,50,.25);
}
.start-btn:hover:not(:disabled) {
  box-shadow: 0 2px 20px rgba(200,168,50,.5); transform: translateY(-1px);
}
.start-btn:disabled { opacity: .25; cursor: not-allowed; transform: none; box-shadow: none; }
.info-toggle {
  flex-shrink: 0; width: 32px; padding: 7px 4px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-dim); font-size: 13px;
  cursor: pointer; transition: all .2s; text-align: center; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
}
.info-toggle:hover { border-color: var(--neon-blue); color: var(--neon-blue); box-shadow: 0 0 8px rgba(0,200,255,.2); }
.seeds-loading { font-size: 10px; color: rgba(0,200,255,.6); display: flex; align-items: center; gap: 5px; }
.seeds-loading::before { content:''; display: inline-block; width: 7px; height: 7px; border: 1px solid rgba(0,200,255,.4); border-top-color: var(--neon-blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seeds-ready { font-size: 10px; color: var(--green); }

/* History feed */
.history-feed {
  flex: 1; min-height: 0; max-height: 114px;
  overflow-y: auto; overflow-x: hidden;
  padding: 5px 8px; display: flex; flex-direction: column; gap: 3px;
  scrollbar-width: none;
}
.history-feed::-webkit-scrollbar { display: none; }
.history-item {
  flex-shrink: 0; display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: var(--text-sub); padding: 3px 7px;
  border-radius: 3px; border-left: 2px solid rgba(0,200,255,.07);
  background: rgba(0,200,255,0.02);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-item.reaction-item { opacity: .45; font-size: 10px; }
.history-item.moderator-line { border-left-color: rgba(200,168,50,.3); background: rgba(200,168,50,.03); }
.hi-icon { font-size: 10px; flex-shrink: 0; }
.hi-name { font-weight: 800; flex-shrink: 0; }
.hi-text { overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* ========== MATCH DRAWER ========== */
.match-drawer {
  position: fixed; left: -365px; top: 0; bottom: 0; width: 345px;
  background: var(--bg-card); border-right: 1px solid var(--border-md);
  z-index: 200; transition: left .3s; overflow-y: auto; padding: 20px 16px;
}
.match-drawer.open { left: 0; }
.drawer-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.match-teams { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.team-side { flex: 1; text-align: center; }
.team-flag { font-size: 24px; margin-bottom: 4px; }
.team-name { font-size: 13px; font-weight: 700; }
.match-center { text-align: center; }
.vs-label { font-size: 11px; color: var(--neon-blue); font-weight: 900; letter-spacing: 3px; }
.match-stage { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.odds-row { display: flex; gap: 6px; margin-bottom: 14px; }
.odds-box { flex: 1; text-align: center; background: rgba(0,200,255,.04); border: 1px solid var(--border); border-radius: 5px; padding: 8px 4px; }
.odds-label { font-size: 9px; color: var(--text-dim); margin-bottom: 2px; }
.odds-value { font-size: 15px; font-weight: 900; color: var(--text); }
.players-section { margin-bottom: 12px; }
.players-title { font-size: 10px; font-weight: 700; color: var(--neon-blue); letter-spacing: 1px; margin-bottom: 6px; }
.players-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.player-card { background: rgba(0,200,255,.04); border: 1px solid var(--border); border-radius: 4px; padding: 5px 7px; }
.player-name { font-size: 11px; font-weight: 700; }
.player-pos,.player-num { font-size: 9px; color: var(--text-dim); }
.player-stat { font-size: 9px; color: var(--text-sub); margin-top: 2px; }
.player-badge { font-size: 10px; }
.player-card.hot { border-color: rgba(255,136,0,.3); }
.player-card.doubt { border-color: rgba(255,170,0,.2); }
.player-card.out { opacity: .5; }
.news-title { font-size: 10px; font-weight: 700; color: var(--neon-blue); letter-spacing: 1px; margin-bottom: 6px; }
.news-item { font-size: 10px; color: var(--text-sub); padding: 5px 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.league-ctx { font-size: 10px; color: var(--text-sub); padding: 3px 0 7px; line-height: 1.5; }
.stakes-badge { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 9px; font-weight: 700; margin-top: 3px; }
.stakes-title { background: rgba(200,168,50,.12); color: var(--gold); }
.stakes-top4 { background: rgba(0,200,255,.12); color: var(--neon-blue); }
.stakes-relegation { background: rgba(255,51,85,.12); color: #ff8090; }
.stakes-mid { background: rgba(255,255,255,.06); color: var(--text-dim); }

/* ========== RESULTS — 全屏 overlay 见文件末尾 ========== */
.results-card {
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-top: 2px solid var(--neon-blue);
  border-radius: 0 0 0 8px; padding: 14px 15px;
  animation: broadcastIn .4s ease;
  box-shadow: -4px 0 20px rgba(0,200,255,0.08);
}
.rc-title { font-size: 9px; font-weight: 900; letter-spacing: 4px; color: var(--neon-blue); margin-bottom: 10px; text-transform: uppercase; }
.rc-bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rc-outcome { display: flex; align-items: center; gap: 8px; }
.rc-label { font-size: 10px; color: var(--text-sub); width: 58px; flex-shrink: 0; }
.rc-bar-track { flex: 1; height: 18px; background: rgba(0,200,255,.05); border-radius: 3px; overflow: hidden; }
.rc-bar-fill { height: 100%; border-radius: 3px; transition: width 1.2s cubic-bezier(.4,0,.2,1); display: flex; align-items: center; padding-left: 6px; }
.rc-pct { font-size: 10px; font-weight: 900; color: rgba(255,255,255,.9); }
.verdict { text-align: center; font-size: 14px; font-weight: 900; color: var(--gold-bright); padding: 10px 0 8px; letter-spacing: 1px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 10px 0; text-shadow: 0 0 12px rgba(200,168,50,.4); }
.reset-btn { width: 100%; padding: 7px; background: rgba(0,200,255,.06); border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); font-size: 11px; cursor: pointer; transition: all .2s; letter-spacing: 1px; }
.reset-btn:hover { border-color: var(--neon-blue); color: var(--neon-blue); box-shadow: 0 0 8px rgba(0,200,255,.15); }
.user-comparison { margin-bottom: 10px; background: rgba(0,200,255,.03); border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; }
.ucr-title { font-size: 9px; color: var(--gold); font-weight: 700; letter-spacing: 2px; margin-bottom: 6px; }
.ucr-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ucr-side { text-align: center; flex: 1; }
.ucr-label { font-size: 9px; color: var(--text-dim); margin-bottom: 3px; }
.ucr-pick { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; background: rgba(255,255,255,.05); }
.ucr-pick.correct { background: rgba(0,224,135,.15); color: #4aee9a; }
.ucr-pick.wrong { background: rgba(255,51,85,.12); color: #ff8090; }
.ucr-vs { font-size: 10px; color: var(--text-dim); }
.ucr-stats { margin-top: 6px; font-size: 9px; color: var(--text-dim); text-align: center; }
.score-summary,.catchphrase-wall,.scene-wall { margin-top: 8px; }
.cw-title,.sw-title { font-size: 9px; font-weight: 700; color: var(--neon-blue); letter-spacing: 2px; margin-bottom: 6px; text-transform: uppercase; }
.cw-item,.sw-item { font-size: 10px; color: var(--text-sub); padding: 4px 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.bar-home { background: linear-gradient(90deg, #1a3a8a, #2255cc); }
.bar-draw { background: rgba(60,70,90,.7); }
.bar-away { background: linear-gradient(90deg, #8a1a2a, #cc2233); }
.error-msg { font-size: 11px; color: var(--red); padding: 6px 10px; background: rgba(255,51,85,.08); border-radius: 3px; }

/* ========== PREDICTION MODAL ========== */
.pred-modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(2,6,18,.9); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.pred-modal-backdrop.show { opacity: 1; pointer-events: auto; }
.pred-modal {
  background: var(--bg-card); border: 1px solid var(--border-md);
  border-top: 2px solid var(--neon-blue); border-radius: 10px; padding: 24px 28px; width: 340px;
  transform: scale(.95); transition: transform .25s;
  box-shadow: 0 0 40px rgba(0,200,255,.1);
}
.pred-modal-backdrop.show .pred-modal { transform: scale(1); }
.pred-modal-title { font-size: 16px; font-weight: 900; color: var(--neon-blue); text-align: center; letter-spacing: 2px; margin-bottom: 4px; text-shadow: 0 0 12px rgba(0,200,255,.5); }
.pred-modal-sub { font-size: 10px; color: var(--text-dim); text-align: center; letter-spacing: 1px; margin-bottom: 18px; }
.pred-btns { display: flex; gap: 8px; margin-bottom: 14px; }
.pred-btn {
  flex: 1; padding: 10px 6px;
  background: rgba(0,200,255,.05); border: 1.5px solid var(--border-md);
  border-radius: 5px; color: var(--text); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all .2s; text-align: center;
}
.pred-btn.home.selected { border-color: #2255cc; background: rgba(34,85,204,.15); color: #80aaff; }
.pred-btn.draw.selected { border-color: #5a6070; background: rgba(90,96,112,.15); color: #c0c8d8; }
.pred-btn.away.selected { border-color: #cc2233; background: rgba(204,34,51,.15); color: #ff8090; }
.pred-modal-actions { display: flex; gap: 8px; }
.pred-confirm-btn {
  flex: 1; padding: 9px;
  background: linear-gradient(135deg, var(--neon-blue2), var(--neon-purple));
  border: none; border-radius: 5px; color: #fff;
  font-size: 12px; font-weight: 900; cursor: pointer; letter-spacing: 1px;
  box-shadow: 0 0 14px rgba(0,200,255,.3);
}
.pred-confirm-btn:disabled { opacity: .3; cursor: not-allowed; }
.pred-skip-btn { padding: 9px 14px; background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--text-dim); font-size: 11px; cursor: pointer; }

/* ========== OVERLAYS (injected by JS) ========== */
.phase-flash {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  background: rgba(2,6,20,.85); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.phase-flash.show { opacity: 1; }
.phase-flash-label { font-size: 10px; font-weight: 700; letter-spacing: 6px; color: var(--neon-blue); text-transform: uppercase; }
.phase-flash-text { font-size: 32px; font-weight: 900; color: var(--text); letter-spacing: 4px; text-transform: uppercase; }
.phase-flash-line { width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-blue), transparent); margin-top: 4px; }

.vs-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; gap: 40px;
  background: rgba(2,6,20,.9); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.vs-overlay.show { opacity: 1; pointer-events: auto; }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vs-avatar { font-size: 36px; width: 80px; height: 80px; border-radius: 12px; border: 2px solid var(--agent-color, var(--border-md)); display: flex; align-items: center; justify-content: center; background: rgba(0,200,255,.06); box-shadow: 0 0 20px -4px var(--agent-color, transparent); }
.vs-name { font-size: 16px; font-weight: 900; color: var(--agent-color, var(--text)); text-shadow: 0 0 12px var(--agent-color, transparent); }
.vs-title { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.vs-center { text-align: center; }
.vs-text { font-size: 28px; font-weight: 900; color: var(--neon-blue); letter-spacing: 8px; text-shadow: 0 0 20px rgba(0,200,255,.7); }
.vs-clash { font-size: 10px; color: var(--text-dim); letter-spacing: 4px; margin-top: 4px; text-transform: uppercase; }

/* ========== 队徽 ========== */
.tb-crest {
  width: 30px; height: 30px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.25));
}

/* ========== 英雄卡 — World Cup broadcast player card ========== */
/* Hero 卡：顶左角小面板，像贴在墙上，不遮挡舞台中央和右侧 agent */
.hero-reveal {
  position: absolute; left: 8px; top: 8px;
  width: 148px; height: auto; max-height: 220px;
  z-index: 11; overflow: hidden; border-radius: 6px;
  transform: scale(0.75) translateX(-30px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2,.9,.3,1), opacity .35s;
  box-shadow: 0 4px 20px rgba(0,0,0,.7), 0 0 0 1px rgba(200,168,50,.25);
}
.hero-reveal.active { transform: scale(1) translateX(0); opacity: 1; }

.hr-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .6s ease .1s;
  filter: contrast(1.05) saturate(1.1);
}
.hr-photo:not(.loading) { opacity: 1; }

/* 彩色球队背景（无照片时的备用背景） */
.hr-team-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--hr-color, #1a3a6a) 0%, #020610 70%);
  opacity: 0.85;
}
.hero-reveal .hr-photo:not(.loading) ~ .hr-team-bg { opacity: 0; }

/* 队徽水印 */
.hr-team-crest {
  position: absolute; top: 14px; right: 14px;
  width: 52px; height: 52px; object-fit: contain;
  opacity: 0.55; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  z-index: 3;
}

/* 主渐变遮罩 */
.hr-overlay {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(to right, rgba(2,6,20,.92) 0%, rgba(2,6,20,.4) 55%, transparent 100%);
  display: flex; flex-direction: column;
}
.hr-spacer { flex: 1; }

/* 顶部标签 */
.hr-top-badge {
  padding: 12px 14px;
  font-size: 9px; font-weight: 800; letter-spacing: 3px;
  color: var(--hr-color, var(--neon-blue)); text-transform: uppercase;
  text-shadow: 0 0 10px var(--hr-color, var(--neon-blue));
}

/* 下字条（TV broadcast lower third） */
.hr-lower-third {
  padding: 0 14px 14px;
}
.hr-lt-bar {
  height: 3px; width: 48px; margin-bottom: 8px;
  background: linear-gradient(90deg, var(--hr-color, var(--neon-blue)), transparent);
  border-radius: 2px;
}
.hr-name {
  font-size: 26px; font-weight: 900; color: #fff;
  line-height: 1.05; letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  margin-bottom: 5px;
}
.hr-action {
  font-size: 10px; color: rgba(221,238,255,0.75); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hr-agent-tag {
  margin-top: 8px; font-size: 9px; font-weight: 700; letter-spacing: 2px;
  color: var(--hr-color, var(--neon-blue));
  text-shadow: 0 0 8px var(--hr-color, transparent);
}
/* 入场扫光动画 */
.hero-reveal.active .hr-lower-third { animation: lowerThirdIn .5s cubic-bezier(.16,1,.3,1) .1s both; }
@keyframes lowerThirdIn { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }

/* 视频区域 */
.hr-video-wrap {
  position: absolute; bottom: 70px; left: 8px; right: 8px; z-index: 5;
}
.hr-video-wrap video { width: 100%; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.hr-generating {
  position: absolute; bottom: 120px; left: 14px; z-index: 5;
  font-size: 9px; color: var(--text-dim);
}

/* ========== 3D 场景氛围 ========== */
.scene3d-wrap {
  background:
    radial-gradient(ellipse 90% 40% at 50% 85%, rgba(0,40,100,0.4) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 20% 10%, rgba(80,0,160,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 80% 10%, rgba(0,80,200,0.12) 0%, transparent 60%),
    #010508;
}

/* ========== 世界杯感 — 页面顶部光晕 ========== */
.top-bar {
  background: linear-gradient(180deg, rgba(0,15,40,0.99) 0%, rgba(2,6,16,0.98) 100%);
}

/* ========== 比赛选择器加队徽 ========== */
.match-opt-crest { width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; }

/* ========== 结果卡片升级 ========== */
.results-card {
  background: linear-gradient(180deg, rgba(0,20,50,0.97) 0%, rgba(2,6,18,0.99) 100%);
  border-top: 2px solid var(--neon-blue);
  box-shadow: -6px 0 30px rgba(0,200,255,0.12), inset 0 0 0 1px rgba(0,200,255,0.06);
}
.verdict {
  background: linear-gradient(135deg, rgba(200,168,50,0.1), transparent);
  text-shadow: 0 0 20px rgba(200,168,50,0.5);
  letter-spacing: 2px;
}
/* 结果队徽 */
.rc-team-crests { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center; }
.rc-crest { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,255,255,0.2)); }

/* ========== 发言卡片动画 ========== */
@keyframes bcActiveIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bc-card.bc-active { animation: bcActiveIn .36s cubic-bezier(.15,.9,.3,1) both; }

@keyframes catchFlash {
  0%   { box-shadow: none; }
  40%  { box-shadow: 0 0 20px rgba(200,168,50,.45), inset 0 0 10px rgba(200,168,50,.12); }
  100% { box-shadow: 0 0 8px rgba(200,168,50,.18); }
}
.bc-catchphrase { animation: catchFlash .7s ease .12s both; }

@keyframes sceneReveal {
  from { opacity: 0; letter-spacing: 2px; }
  to   { opacity: 1; letter-spacing: normal; }
}
.bc-scene { animation: sceneReveal .45s ease .25s both; }

.broadcast-panel .bp-stripe { animation: stripeFlow 2s linear infinite; }
@keyframes stripeFlow {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.phase-banner { animation: bannerPop .4s cubic-bezier(.4,0,.2,1) both; }
@keyframes bannerPop {
  from { transform: scaleX(.85); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* 初判/终投强调 */
.broadcast-content .bc-card.bc-active[data-phase="initial"],
.broadcast-content .bc-card.bc-active[data-phase="vote"] {
  box-shadow: 0 4px 30px rgba(0,0,0,0.85), 0 0 40px -14px var(--seat-color, transparent);
}

/* 英雄卡无图时用大图标显示 */
.hero-reveal.active .hr-photo.loading {
  display: none;
}
.hero-reveal:not(.has-photo) .hr-team-bg {
  opacity: 1 !important;
}

/* ========== Feature 1: Evidence Board ========== */
/* Evidence board 移至顶部右侧，脱离 broadcast panel 遮挡范围 */
.evidence-board {
  position: absolute; top: 8px; right: 8px;
  width: 220px; z-index: 12;
  background: rgba(2,8,22,0.88);
  border: 1px solid rgba(0,200,255,0.18);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  font-size: 10px; color: rgba(221,238,255,0.7);
  transform: translateX(240px);
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s;
  opacity: 0; pointer-events: none;
  box-shadow: -4px 0 20px rgba(0,200,255,0.06), inset 0 0 0 1px rgba(0,200,255,0.05);
}
.evidence-board.eb-active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.eb-header {
  padding: 6px 10px; font-size: 9px; font-weight: 800;
  letter-spacing: 2px; color: rgba(0,200,255,0.8);
  border-bottom: 1px solid rgba(0,200,255,0.1);
  display: flex; align-items: center; gap: 5px;
}
.eb-cols { display: flex; gap: 0; }
.eb-col { flex: 1; padding: 6px 8px; min-height: 50px; }
.eb-col-title { font-size: 8px; font-weight: 700; letter-spacing: 1px; color: rgba(221,238,255,0.4); margin-bottom: 4px; }
.eb-divider { width: 1px; background: rgba(0,200,255,0.1); flex-shrink: 0; margin: 4px 0; }
.eb-items { display: flex; flex-direction: column; gap: 3px; }
.eb-item { font-size: 9px; line-height: 1.4; padding: 2px 4px; border-radius: 3px; }
.eb-fact { background: rgba(0,224,135,0.08); border-left: 2px solid rgba(0,224,135,0.4); color: rgba(100,240,160,0.85); }
.eb-dispute { background: rgba(255,71,87,0.08); border-left: 2px solid rgba(255,71,87,0.4); color: rgba(255,130,140,0.85); }
.eb-empty { color: rgba(221,238,255,0.2); font-style: italic; }
.eb-new { animation: ebNewItem .6s ease; }
@keyframes ebNewItem { 0%{background:rgba(0,200,255,.18)} 100%{background:inherit} }
.eb-footer { padding: 5px 8px; border-top: 1px solid rgba(0,200,255,0.1); }
.eb-stances { display: flex; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.eb-stance-badge { padding: 1px 6px; border-radius: 10px; font-size: 8px; font-weight: 700; }
.eb-stance-home { background: rgba(34,85,204,.2); color: #80aaff; }
.eb-stance-draw { background: rgba(107,114,128,.2); color: #aaa; }
.eb-stance-away { background: rgba(204,34,51,.2); color: #ff8090; }
.eb-consensus-wrap { display: flex; align-items: center; gap: 5px; }
.eb-consensus-label { font-size: 8px; color: rgba(221,238,255,0.35); flex-shrink: 0; }
.eb-consensus-track { flex: 1; height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.eb-consensus-fill { height: 100%; background: linear-gradient(90deg, #0088cc, #00e087); border-radius: 2px; transition: width .8s; }
#ebConsensusVal { font-size: 9px; color: rgba(0,200,255,0.7); flex-shrink: 0; min-width: 26px; text-align: right; }

/* ========== Feature 2: Signature Moment ========== */
.signature-moment {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
  transition: opacity .25s;
}
.signature-moment.sm-show { opacity: 1; pointer-events: auto; }
.sm-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(var(--sm-rgb,0,200,255),0.18) 0%, rgba(2,6,20,0.92) 60%);
  animation: smBgPulse 2.6s ease;
}
@keyframes smBgPulse { 0%{opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
.sm-content {
  position: relative; z-index: 2;
  text-align: center; padding: 40px 60px;
  animation: smContentIn .4s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes smContentIn { from{transform:scale(.88);opacity:0} to{transform:scale(1);opacity:1} }
.sm-type {
  font-size: 13px; font-weight: 900; letter-spacing: 6px;
  color: var(--sm-color, #f0d060); text-transform: uppercase;
  text-shadow: 0 0 20px var(--sm-color, #f0d060);
  margin-bottom: 16px;
  animation: smTypeIn .5s cubic-bezier(.2,.9,.3,1) .1s both;
}
@keyframes smTypeIn { from{transform:translateY(-16px);opacity:0} to{transform:translateY(0);opacity:1} }
.sm-icon {
  font-size: 64px; display: block; margin-bottom: 10px;
  animation: smIconIn .4s ease .15s both;
  filter: drop-shadow(0 0 20px var(--sm-color, #f0d060));
}
@keyframes smIconIn { from{transform:scale(0.5) rotate(-15deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
.sm-name {
  font-size: 28px; font-weight: 900; color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
  margin-bottom: 8px;
  animation: smTextIn .4s ease .2s both;
}
.sm-detail {
  font-size: 14px; color: var(--sm-color, #f0d060);
  font-weight: 700; letter-spacing: 2px;
  margin-bottom: 10px;
  animation: smTextIn .4s ease .25s both;
}
.sm-quote {
  font-size: 12px; color: rgba(221,238,255,0.65);
  font-style: italic; max-width: 320px; margin: 0 auto;
  animation: smTextIn .4s ease .3s both;
}
@keyframes smTextIn { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
/* Type-specific colors */
.sm-flip   { --sm-color: #f0d060; }
.sm-consensus { --sm-color: #00e087; }
.sm-devil  { --sm-color: #a78bfa; }
.sm-hot    { --sm-color: #ff6633; }

/* 边框光效 */
.signature-moment.sm-show::before {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--sm-color, #f0d060);
  opacity: 0.15;
  animation: smBorderFade 2.6s ease;
}
@keyframes smBorderFade { 0%,100%{opacity:0} 30%,70%{opacity:.15} }

/* ========== Feature 3: Mid-Debate Drag ========== */
.prob-user-marker {
  cursor: ew-resize;
  transition: left .3s, transform .15s;
  width: 3px !important;
}
.prob-user-marker:hover, .prob-user-marker.dragging {
  transform: scaleX(2) !important;
  box-shadow: 0 0 10px var(--gold-bright), 0 0 20px rgba(240,192,64,.4);
}
.prob-user-marker.dragging { cursor: grabbing; }

/* Toast notification */
.prediction-toast {
  position: fixed; bottom: 150px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(10,18,40,0.95);
  border: 1px solid var(--gold-line);
  border-radius: 20px; padding: 7px 18px;
  font-size: 12px; font-weight: 700; color: var(--gold-bright);
  z-index: 400; opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(200,168,50,.25);
  white-space: nowrap;
}
.prediction-toast.toast-visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Prediction timeline in results */
.pred-timeline {
  margin: 10px 0; padding: 8px 10px;
  background: rgba(0,200,255,0.04);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 6px;
}
.pt-title { font-size: 9px; color: var(--neon-blue); font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; }
.pt-items { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.pt-item { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--text-sub); }
.pt-start { background: rgba(0,200,255,0.1); color: var(--neon-blue); }
.pt-arrow { font-size: 9px; color: var(--text-dim); }
.pt-change-count { font-size: 9px; color: var(--text-dim); margin-top: 4px; }

/* ========== Feature 5: Live Ticker ========== */
.live-ticker {
  flex-shrink: 0; height: 26px;
  background: rgba(0,8,20,0.97);
  border-top: 1px solid rgba(0,200,255,0.15);
  border-bottom: 1px solid rgba(0,200,255,0.08);
  display: flex; align-items: center; overflow: hidden;
  position: relative;
}
.ticker-label {
  flex-shrink: 0; padding: 0 10px;
  font-size: 8px; font-weight: 900; letter-spacing: 2px;
  color: #ff3355; border-right: 1px solid rgba(0,200,255,0.15);
  height: 100%; display: flex; align-items: center;
  background: rgba(255,51,85,0.08);
  animation: tickerDot 1.2s infinite;
}
@keyframes tickerDot { 0%,100%{opacity:1} 50%{opacity:.5} }
.ticker-track {
  flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center;
}
.ticker-content {
  white-space: nowrap;
  font-size: 10px; font-weight: 600;
  color: rgba(221,238,255,0.7);
  padding-left: 20px;
  animation: tickerScroll 40s linear infinite;
  letter-spacing: 0.3px;
}
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Duplicate content for seamless loop (via JS text) */
.ticker-content:hover { animation-play-state: paused; }

/* ========== Feature 4: Split-Screen Battle ========== */
.split-screen-overlay {
  position: absolute; inset: 0; z-index: 7;
  display: flex; align-items: stretch;
  opacity: 0; pointer-events: none;
  transition: opacity .5s cubic-bezier(.4,0,.2,1);
}
.split-screen-overlay.ss-active {
  opacity: 1;
  animation: ssSlideIn .6s cubic-bezier(.4,0,.2,1);
}
@keyframes ssSlideIn {
  from { opacity: 0; transform: scaleX(.95); }
  to   { opacity: 1; transform: scaleX(1); }
}

.ss-side {
  width: 130px; flex-shrink: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 18px;
  background: linear-gradient(to bottom, transparent 0%, rgba(2,6,20,0.75) 70%);
}
.ss-left { background: linear-gradient(to right, rgba(2,6,20,0.8) 0%, transparent 100%); }
.ss-right { background: linear-gradient(to left, rgba(2,6,20,0.8) 0%, transparent 100%); }

.ss-agent-card {
  text-align: center;
  animation: ssCardIn .5s cubic-bezier(.2,.9,.3,1) .3s both;
}
@keyframes ssCardIn { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.ss-card-icon { font-size: 30px; margin-bottom: 4px; display: block; }
.ss-card-name { font-size: 13px; font-weight: 900; display: block; margin-bottom: 2px; }
.ss-card-title { font-size: 9px; color: rgba(221,238,255,0.4); display: block; margin-bottom: 5px; letter-spacing: .5px; }
.ss-card-stance {
  font-size: 11px; font-weight: 800; padding: 3px 10px;
  background: rgba(255,255,255,0.06); border-radius: 10px; display: inline-block;
  transition: color .3s;
}

/* Center divider */
.ss-divider-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 22px; gap: 4px;
}
.ss-divider-line { flex: none; width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, rgba(0,200,255,0.3), transparent); }
.ss-divider-badge {
  font-size: 13px; font-weight: 900; letter-spacing: 1px;
  color: var(--neon-blue); padding: 4px 8px;
  background: rgba(0,200,255,0.08); border-radius: 4px;
  border: 1px solid rgba(0,200,255,0.2);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100%{box-shadow:0 0 6px rgba(0,200,255,.15)} 50%{box-shadow:0 0 14px rgba(0,200,255,.4)} }

/* Highlight side when agent attacks */
.ss-highlight-left .ss-left .ss-card-icon { animation: attackGlow .4s ease; }
.ss-highlight-right .ss-right .ss-card-icon { animation: attackGlow .4s ease; }
@keyframes attackGlow {
  0% { filter: drop-shadow(0 0 0px currentColor); transform: scale(1); }
  40% { filter: drop-shadow(0 0 16px currentColor); transform: scale(1.15); }
  100% { filter: drop-shadow(0 0 4px currentColor); transform: scale(1); }
}

/* ========== 世界杯视觉升级 ========== */

/* 概率条：足球场风格——主队蓝、平局草绿、客队红 */
.prob-home {
  background: linear-gradient(90deg, #0d2e8a 0%, #1a4bcc 100%) !important;
}
.prob-draw {
  background: linear-gradient(90deg, #1a4a1a 0%, #226622 100%) !important;
}
.prob-away {
  background: linear-gradient(90deg, #8a1a1a 0%, #cc2222 100%) !important;
}
/* 概率条两侧标签颜色 */
.prob-bar-teams span:first-child { color: #60a5fa !important; }
.prob-bar-teams span:last-child  { color: #f87171 !important; }
.prob-bar-center-label { color: rgba(0,210,80,0.5) !important; letter-spacing: 4px; }

/* 场景3D-wrap：绿茵氛围覆盖层 */
.scene3d-wrap {
  background:
    radial-gradient(ellipse 80% 40% at 50% 90%, rgba(0,100,20,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(0,40,100,0.3) 0%, transparent 55%),
    #020a05 !important;
}

/* 顶栏底部金绿渐变分割线（世界杯感） */
.top-bar::after {
  background: linear-gradient(90deg, transparent 0%, var(--wc-green) 20%, var(--gold-bright) 50%, var(--wc-green) 80%, transparent 100%) !important;
  opacity: 0.6 !important;
}

/* 顶栏本身 */
.top-bar {
  background: linear-gradient(180deg, rgba(0,18,6,0.99) 0%, rgba(2,8,4,0.98) 100%) !important;
}

/* 控制条分割线：绿金渐变 */
.control-strip::before {
  background: linear-gradient(90deg, transparent, var(--wc-green) 30%, var(--gold) 50%, var(--wc-green) 70%, transparent) !important;
  opacity: 0.5 !important;
}

/* 议事厅标签 */
.scene3d-label {
  color: rgba(0,200,80,0.2) !important;
}

/* HUD 角框：绿色 */
.hud-corner {
  border-color: rgba(0,200,80,0.35) !important;
}

/* 发言HUD：绿边框 */
.speaker-hud {
  border-color: rgba(0,200,80,0.3) !important;
  box-shadow: 0 0 16px rgba(0,200,80,0.12) !important;
}
.speaker-hud-name { color: var(--wc-green) !important; }

/* agent 卡片：绿色调边框 */
.agent-card {
  background: rgba(2,12,5,0.85) !important;
  border-color: rgba(0,180,50,0.1) !important;
}
.agent-card.speaking {
  background: rgba(0,30,8,0.6) !important;
}

/* 阶段步骤激活态：绿色 */
.phase-step.active {
  background: linear-gradient(135deg, #0a6e20, #0d9a2e) !important;
  box-shadow: 0 0 10px rgba(0,180,50,0.4) !important;
}
.phase-step.done { color: var(--wc-green) !important; }

/* 结果卡片：绿边 */
.results-card {
  border-top-color: var(--wc-green) !important;
  box-shadow: -6px 0 30px rgba(0,200,80,0.08), inset 0 0 0 1px rgba(0,200,80,0.05) !important;
}
.rc-title { color: var(--wc-green) !important; }

/* 广播面板背景 */
.broadcast-panel { background: rgba(1,10,3,0.97) !important; }

/* 底部历史流 */
.history-item { border-left-color: rgba(0,180,50,0.1) !important; }
.history-item.moderator-line { border-left-color: rgba(200,168,50,0.4) !important; }

/* 底部播报条：绿色 LIVE 感 */
.live-ticker { background: rgba(0,12,2,0.98) !important; border-top-color: rgba(0,180,50,0.2) !important; }
.ticker-label { background: rgba(0,200,80,0.1) !important; color: var(--wc-green) !important; }
.ticker-content { color: rgba(200,240,210,0.75) !important; }

/* 召开议会按钮：世界杯金绿 */
.start-btn {
  background: linear-gradient(135deg, #c8a832 0%, #8a6a10 100%) !important;
}

/* 证据板绿色调 */
.eb-header { color: rgba(0,200,80,0.8) !important; }
.eb-consensus-fill { background: linear-gradient(90deg, #0a6e20, #00e087) !important; }

/* 世界杯品牌：品牌区加⚽ */
.tb-brand span::before { content: '⚽  '; }

/* 玻璃面板效果：加绿色微光 */
.broadcast-panel, .agent-card, .results-card {
  backdrop-filter: blur(2px);
}

/* 播报横幅阶段标题：绿色高亮 */
.phase-banner { background: linear-gradient(90deg, transparent, rgba(0,120,30,0.06), transparent) !important; }

/* 球队颜色主题：主队卡蓝色左边框，客队卡红色右边框 */
.agent-col.left .agent-card { border-left-color: rgba(30,80,220,0.3) !important; }
.agent-col.right .agent-card { border-right-color: rgba(200,30,30,0.3) !important; }

/* ========== 比分选择器弹窗 ========== */
.score-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
}
.score-modal-backdrop.show { display: flex; }

.score-modal {
  background: linear-gradient(135deg, rgba(4,12,28,0.98), rgba(3,8,18,0.97));
  border: 1px solid rgba(0,200,80,0.2);
  border-radius: 14px; padding: 28px 32px;
  min-width: 320px; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 60px -20px rgba(0,200,80,0.2);
  animation: smIn .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes smIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }

.sm-header { margin-bottom: 22px; }
.sm-title { font-size: 18px; font-weight: 900; color: var(--wc-green); letter-spacing: 2px; margin-bottom: 4px; }
.sm-subtitle { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }

.sm-teams { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 18px; }
.sm-team { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sm-team-name { font-size: 13px; font-weight: 800; color: var(--text); }
.sm-vs-sep { font-size: 22px; color: var(--gold-bright); font-weight: 900; margin-top: 24px; }

.sm-score-ctrl { display: flex; align-items: center; gap: 10px; }
.sm-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,200,80,0.1); border: 1.5px solid rgba(0,200,80,0.3);
  color: var(--wc-green); font-size: 20px; font-weight: 700;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.sm-btn:hover { background: rgba(0,200,80,0.2); border-color: var(--wc-green); }
.sm-score-display {
  font-size: 42px; font-weight: 900; color: #fff;
  min-width: 56px; text-align: center;
  text-shadow: 0 0 20px rgba(0,200,80,0.4);
}

.sm-quick-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.sm-quick-btn {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  background: rgba(200,168,50,0.1); border: 1px solid rgba(200,168,50,0.3);
  color: var(--gold); cursor: pointer; transition: all .15s;
}
.sm-quick-btn:hover, .sm-quick-btn.active {
  background: rgba(200,168,50,0.2); border-color: var(--gold-bright); color: var(--gold-bright);
}

.sm-agent-hint {
  font-size: 11px; color: var(--text-sub); min-height: 18px; margin-bottom: 10px; letter-spacing: 0.5px;
}

.sm-actions { display: flex; flex-direction: column; gap: 0; }
.sm-confirm-btn {
  width: 100%; padding: 12px; border-radius: 8px; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--wc-green), #00a050);
  border: none; color: #fff; font-size: 14px; font-weight: 900;
  cursor: pointer; letter-spacing: 2px; transition: all .2s;
  box-shadow: 0 4px 20px rgba(0,200,80,0.25);
}
.sm-confirm-btn:hover { box-shadow: 0 4px 28px rgba(0,200,80,0.45); transform: translateY(-1px); }
.sm-skip-btn {
  background: none; border: none; color: var(--text-dim); font-size: 12px;
  cursor: pointer; padding: 4px; width: 100%;
}
.sm-skip-btn:hover { color: var(--text); }

/* Agent 比分徽章 */
.agent-score-badge {
  position: absolute; top: 5px; right: 6px;
  font-size: 9px; font-weight: 900; letter-spacing: 0.5px;
  background: rgba(0,0,0,0.45); border-radius: 3px; padding: 1px 5px;
  pointer-events: none; z-index: 3;
}

/* 议会综合比分 */
#councilScoreBox {
  display: none; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 20px; background: rgba(0,20,5,0.9);
  border: 1px solid rgba(0,200,80,0.25); border-radius: 8px; margin: 8px 0;
}
.cs-label { font-size: 9px; color: var(--text-dim); letter-spacing: 3px; text-transform: uppercase; }
.cs-score { font-size: 36px; font-weight: 900; color: #fff; letter-spacing: 4px; line-height: 1.2;
  text-shadow: 0 0 20px rgba(0,200,80,0.4); }
.cs-teams { font-size: 10px; color: var(--text-sub); }

/* 命中等级 */
.user-hit-level { display: none; text-align: center; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 800; margin: 6px 0; }
.hit-perfect { background: rgba(200,168,50,0.15); color: var(--gold-bright); border: 1px solid var(--gold); }
.hit-precise { background: rgba(0,200,100,0.1); color: var(--wc-green); border: 1px solid rgba(0,200,80,0.3); }
.hit-valid   { background: rgba(0,150,255,0.1); color: var(--neon-blue); border: 1px solid rgba(0,150,255,0.3); }
.hit-close   { background: rgba(255,200,0,0.08); color: rgba(255,200,0,0.8); border: 1px solid rgba(255,200,0,0.2); }
.hit-miss    { background: rgba(255,50,80,0.08); color: rgba(255,100,120,0.7); border: 1px solid rgba(255,50,80,0.15); }

/* 赛后录入浮层 */
.result-input-panel {
  position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
  z-index: 150; background: rgba(3,8,20,0.97); border: 1px solid rgba(0,200,80,0.2);
  border-radius: 10px; padding: 10px 16px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6); backdrop-filter: blur(8px);
}
.rip-label { font-size: 11px; color: var(--text-sub); white-space: nowrap; }
.rip-ctrl { display: flex; align-items: center; gap: 6px; }
.rip-input {
  background: rgba(0,200,80,0.08); border: 1px solid rgba(0,200,80,0.2);
  border-radius: 4px; color: #fff; font-size: 16px; font-weight: 900;
  text-align: center; padding: 4px 2px;
}
.rip-sep { font-size: 18px; color: var(--gold); font-weight: 900; }
.rip-submit {
  padding: 5px 12px; background: var(--wc-green); border: none;
  border-radius: 4px; color: #000; font-size: 11px; font-weight: 800;
  cursor: pointer; letter-spacing: 1px;
}

/* ========== 结果页：scene3d-wrap 内的居中覆盖 ========== */
#resultsContainer {
  position: absolute; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center;
  /* 场景内覆盖：3D 画面透过模糊可见 */
  background: linear-gradient(135deg, rgba(2,8,18,0.88) 0%, rgba(2,5,12,0.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px; overflow-y: auto; pointer-events: none;
}
#resultsContainer.active { display: flex; pointer-events: auto; }

/* 会话中隐藏概率条，把高度还给 3D 场景 */
body.session-active .prob-bar-wrap {
  max-height: 0; overflow: hidden; padding: 0; border: none; opacity: 0;
  transition: max-height .3s, opacity .3s;
}

.results-card {
  max-width: 480px; width: 100%;
  max-height: 82%;
  overflow-y: auto; scrollbar-width: thin;
  background: linear-gradient(135deg, rgba(3,8,20,0.97), rgba(2,6,15,0.95));
  border: 1px solid rgba(0,212,106,0.18);
  border-radius: 10px; padding: 20px 22px 16px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.7), 0 0 40px -15px rgba(0,212,106,0.15);
  animation: resultsIn .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes resultsIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
.results-title {
  font-size: 11px; font-weight: 800; letter-spacing: 5px;
  color: rgba(0,212,106,0.6); text-transform: uppercase; margin-bottom: 16px; text-align: center;
}
.result-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.result-label { width: 72px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.result-bar-bg { flex: 1; height: 8px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; }
.result-bar { height: 100%; border-radius: 4px; transition: width 1s cubic-bezier(.4,0,.2,1); width: 0; }
.result-pct { font-size: 13px; font-weight: 900; width: 46px; text-align: right; flex-shrink: 0; }
.result-votes { font-size: 9px; color: var(--text-dim); width: 24px; flex-shrink: 0; }
.verdict {
  text-align: center; font-size: 15px; font-weight: 900;
  color: var(--gold-bright); padding: 12px 0 10px;
  border-top: 1px solid rgba(200,168,50,0.15); margin-top: 10px;
  letter-spacing: 2px;
}

/* 议会综合比分（在 results 内） */
.results-council-score {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 0; border-top: 1px solid rgba(0,200,80,0.1);
  border-bottom: 1px solid rgba(0,200,80,0.1); margin: 10px 0;
}
/* Fix 4: 结果卡比分区域可读性改进 */
.rcs-label { font-size: 11px; color: var(--text-sub); letter-spacing: 2px; text-transform: uppercase; }
.rcs-score { font-size: 54px; font-weight: 900; color: #fff; letter-spacing: 10px; line-height: 1.1; text-shadow: 0 0 30px rgba(0,200,80,0.5), 0 2px 4px rgba(0,0,0,.8); }
.rcs-teams { font-size: 12px; color: var(--text-sub); font-weight: 600; }

/* 用户命中等级（在 results 内） */
.results-hit { text-align: center; padding: 8px; border-radius: 6px; font-size: 14px; font-weight: 800; margin: 8px 0; }

/* reset button */
.reset-btn {
  display: block; width: 100%; margin-top: 16px; padding: 12px;
  background: linear-gradient(135deg, rgba(0,200,80,0.12), rgba(0,200,80,0.06));
  border: 1px solid rgba(0,200,80,0.25); border-radius: 7px;
  color: var(--wc-green); font-size: 13px; font-weight: 800; cursor: pointer;
  letter-spacing: 2px; transition: all .2s;
}
.reset-btn:hover { background: rgba(0,200,80,0.18); border-color: var(--wc-green); }

/* stanceConsensusArea 不再占用空间 */
#stanceConsensusArea { display: none !important; }

/* live ticker 固定在最底部 */
.live-ticker {
  order: 999; flex-shrink: 0;
  border-top: 1px solid rgba(0,200,80,0.08);
}

/* 控制栏：允许内容自适应撑开避免 select 被裁，但 max-height 兜底防止 history-feed 把整条 strip 撑爆挤压结果页 */
.control-strip { min-height: 88px; max-height: 130px; height: auto; }

/* hero-reveal：没有 photo 时不显示 */
.hero-reveal.active.no-photo { transform: translateX(100%) !important; }

/* 历史 feed 减小视觉占比 */
.history-feed {
  opacity: 0.4;
  font-size: 9px;
}
.history-item { font-size: 9px; }

/* 场景划分文字：只对 broadcast panel 里的 banner 生效，不影响全屏 phaseFlash */
.phase-banner { font-size: 8px; letter-spacing: 3px; opacity: 0.5; }
.rip-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 4px; }

/* ── 立场转向 pivot 闪烁 ── */
@keyframes pivotFlash {
  0%   { box-shadow: 0 0 0 0 rgba(240,192,64,0); }
  25%  { box-shadow: 0 0 0 6px rgba(240,192,64,0.6); background: rgba(240,192,64,0.12); }
  75%  { box-shadow: 0 0 0 3px rgba(240,192,64,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(240,192,64,0); background: transparent; }
}
.agent-card.pivot-flash { animation: pivotFlash 1.4s ease; }

/* ── Agent 列对比度大幅提升 ── */
.agent-col {
  width: 148px !important;
  background: rgba(6,16,8,0.95) !important;
  gap: 5px !important;
}
.agent-card {
  background: linear-gradient(160deg, rgba(10,28,12,0.97), rgba(6,18,8,0.95)) !important;
  border: 1px solid rgba(0,200,80,0.18) !important;
  border-left: 3px solid var(--agent-color, rgba(0,200,80,0.4)) !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3) !important;
}
.agent-col.right .agent-card {
  border-left: 1px solid rgba(0,200,80,0.18) !important;
  border-right: 3px solid var(--agent-color, rgba(0,200,80,0.4)) !important;
}
.agent-card.speaking {
  background: linear-gradient(160deg, rgba(12,32,14,0.98), rgba(8,22,10,0.97)) !important;
  border-color: var(--agent-color) !important;
  box-shadow: 0 0 16px -4px var(--agent-color), inset 0 0 12px rgba(0,0,0,0.3) !important;
}
.agent-card.idle-bg {
  opacity: 0.32 !important;
  filter: saturate(0.25) !important;
}
/* 名字和标题 */
.ac-name {
  font-size: 11px !important; font-weight: 900 !important;
  color: rgba(230,248,235,0.98) !important;
}
.ac-title {
  font-size: 8px !important;
  color: rgba(0,220,100,0.65) !important;
}
/* portrait 图标 */
.ac-portrait {
  width: 28px !important; height: 28px !important;
  background: rgba(0,180,60,0.12) !important;
  border: 1.5px solid var(--agent-color, rgba(0,200,80,0.3)) !important;
  font-size: 15px !important;
  box-shadow: 0 0 8px -3px var(--agent-color, transparent) !important;
}
/* draw 概率值一定可见：绝对定位到条上方 */
#probSegDraw .prob-val {
  position: absolute;
  top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 10px; white-space: nowrap; color: rgba(0,220,100,0.9);
  background: rgba(0,0,0,0.5); padding: 1px 4px; border-radius: 2px;
  pointer-events: none;
}

/* ============================================================
   v4.4 新增样式
   ============================================================ */

/* I-3: prob-draw 对比度修复（从几乎不可见的暗绿改为金色） */
.prob-draw {
  background: linear-gradient(90deg, #7a6010 0%, #b89020 50%, #7a6010 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 10px rgba(180,140,30,.35) !important;
}

/* J: 拔河绳 SVG */
.tug-svg { width:100%; height:36px; display:block; }
.tug-values { display:flex; justify-content:space-between; margin-top:4px; padding:0 4px; }
.tug-val { font-size:12px; font-weight:900; }
.tug-home { color:#60a5fa; }
.tug-draw { color:var(--gold-bright); }
.tug-away { color:#f87171; }
/* 概率条绳结弹跳 + 发光，让玩家更容易注意到变动 */
@keyframes tugBounce {
  0%   { r:9; }
  20%  { r:14; filter:drop-shadow(0 0 6px #f0d060); }
  50%  { r:7; }
  75%  { r:12; filter:drop-shadow(0 0 4px #f0d060); }
  100% { r:9; filter:none; }
}
#tugKnot.tug-bounce { animation:tugBounce 0.55s ease; }
/* 概率条移动时高亮显示数值 */
.tug-val.tug-flash { animation:valFlash 0.4s ease; }
@keyframes valFlash { 0%{opacity:.4;transform:scale(.9)} 50%{opacity:1;transform:scale(1.15)} 100%{transform:scale(1)} }

/* A: Agent 准确率徽章 */
/* V44-1 已移至基础定义，此处删除 !important 覆盖 */
.ac-accuracy { font-size:10px; text-align:center; padding:3px 4px; border-top:1px solid var(--border); margin-top:2px; }
.ac-icons { display:block; letter-spacing:1px; opacity:.85; font-size:9px; margin-bottom:1px; }
.acc-tick { color:#34d399; }
.acc-miss { color:#f87171; opacity:.7; }
.ac-pct { font-size:14px; font-weight:900; color:var(--gold-bright); }
.ac-n { font-size:9px; color:var(--text-dim); margin-left:2px; }
.ac-empty { color:var(--text-dim); font-style:italic; font-size:9px; }

/* A: 立场指示器 */
.ac-stance { font-size:10px; text-align:center; min-height:22px; padding:2px 4px; transition:all .3s; border-radius:3px; display:flex; align-items:center; justify-content:center; gap:3px; }
.ac-stance .stance-pick { font-weight:800; font-size:10px; }
.ac-stance .stance-conf { color:var(--text-sub); font-size:10px; }
.stance-home { background:rgba(30,80,200,.12); }
.stance-draw { background:rgba(180,140,30,.12); }
.stance-away { background:rgba(200,30,50,.12); }

/* B: 方法来源标签（发言卡三层结构·第1层） */
.bc-source-layer {
  font-size:10px; color:var(--text-dim);
  padding:0 0 4px; margin-bottom:4px;
  border-bottom:1px solid var(--border); letter-spacing:.3px;
}
/* B: 发言文字放大 */
.bc-speech { font-size:13.5px !important; line-height:1.55 !important; }
/* B: 金句层突出 */
.bc-catchphrase {
  margin-top:6px; font-size:12.5px; font-weight:700;
  color:var(--gold-bright) !important; font-style:italic;
  padding:4px 8px; border-left:3px solid var(--gold);
  background:var(--gold-dim); border-radius:0 3px 3px 0;
}

/* C: Agent 视觉指纹 */
.bc-card[data-agent-id="stat"]      { border-left:3px solid #60a5fa; }
.bc-card[data-agent-id="gambler"]   { border-left:3px solid #34d399; }
.bc-card[data-agent-id="history"]   { border-left:3px solid #fbbf24; }
.bc-card[data-agent-id="psych"]     { border-left:3px solid #67e8f9; }
.bc-card[data-agent-id="mystic"]    { border-left:3px solid #a78bfa; }
.bc-card[data-agent-id="moderator"] { border-left:4px solid #f0c040; }
.bc-card[data-agent-id="stat"] .bc-body-wrap     { background:linear-gradient(135deg, rgba(96,165,250,.04) 0%, transparent 60%); }
.bc-card[data-agent-id="mystic"] .bc-body-wrap   { background:linear-gradient(135deg, rgba(167,139,250,.06) 0%, transparent 60%); }
.bc-card[data-agent-id="gambler"] .bc-body-wrap  { background:linear-gradient(135deg, rgba(52,211,153,.05) 0%, transparent 60%); }
.bc-card[data-agent-id="psych"] .bc-body-wrap    { background:linear-gradient(135deg, rgba(103,232,249,.04) 0%, transparent 60%); }
.bc-card[data-agent-id="history"] .bc-body-wrap  { background:linear-gradient(135deg, rgba(251,191,36,.04) 0%, transparent 60%); }

/* D: 今日焦点战横幅 */
.featured-banner {
  background: linear-gradient(135deg, rgba(200,168,50,.22), rgba(0,160,60,.14));
  border: 1px solid rgba(200,168,50,.5); border-radius: 8px;
  padding: 8px 14px; font-size: 12px; font-weight: 700;
  color: var(--gold-bright); cursor: pointer;
  letter-spacing: .3px; line-height: 1.5;
  transition: background .2s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(200,168,50,.22), 0 2px 6px rgba(0,0,0,.5);
}
.featured-banner:hover {
  background: linear-gradient(135deg, rgba(200,168,50,.32), rgba(0,200,80,.20));
  box-shadow: 0 6px 24px rgba(200,168,50,.35), 0 2px 8px rgba(0,0,0,.6);
}
/* 非会议中：featured banner 浮在左侧 agent 列右侧，避免遮挡第三张卡 */
body:not(.session-active) #featuredMatchBanner[style*="block"],
body:not(.session-active) #featuredMatchBanner:not([style*="none"]) {
  position: fixed; bottom: 164px; left: 160px; z-index: 200;
  max-width: 222px;
  animation: bannerFloat 3.5s ease-in-out infinite;
}
@keyframes bannerFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* E: 结果页 CTA 按钮区 */
.results-cta-row { display:flex; gap:8px; margin-top:14px; }
.cta-btn { flex:1; padding:9px 4px; border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; border:1px solid var(--border); transition:all .2s; }
.cta-share { background:rgba(200,168,50,.15); color:var(--gold-bright); border-color:var(--border-gold); }
.cta-share:hover { background:rgba(200,168,50,.25); }
.cta-record { background:rgba(30,80,200,.15); color:#60a5fa; border-color:rgba(30,80,200,.3); }
.cta-record:hover { background:rgba(30,80,200,.25); }
.cta-next { background:rgba(0,200,80,.1); color:var(--wc-green); border-color:rgba(0,200,80,.2); }
.cta-next:hover { background:rgba(0,200,80,.18); }

/* E: 内联录入比分 */
#resultInputInline { padding:12px 0 4px; border-top:1px solid var(--border); margin-top:8px; }
.rii-label { font-size:11px; color:var(--text-sub); margin-bottom:8px; font-weight:700; }
.rii-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.rii-input { width:52px; text-align:center; background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:7px 4px; font-size:20px; font-weight:900; }
.rii-vs { font-size:18px; font-weight:700; color:var(--text-sub); }
.rii-submit { padding:7px 16px; background:var(--wc-green); color:#000; font-weight:800; border:none; border-radius:5px; cursor:pointer; font-size:13px; }
.rii-note { font-size:10px; color:var(--text-dim); }

/* F: userCorrect 修复后的新样式 */
.ucr-agree { font-size:13px; font-weight:700; text-align:center; padding:5px; border-radius:5px; margin:6px 0; }
.agree-yes { color:#34d399; background:rgba(52,211,153,.12); }
.agree-no  { color:#f87171; background:rgba(248,113,113,.1); }
.ucr-note { font-size:10px; color:var(--text-dim); text-align:center; margin-top:4px; }

/* H: 阶段说明文字 */
.phase-desc { font-size:10px; color:var(--text-dim); text-align:center; margin-top:3px; letter-spacing:.3px; }

/* H: Onboarding 弹窗 */
.onb-overlay { position:fixed; inset:0; z-index:9999; background:rgba(1,7,20,.93); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; }
.onb-panel { max-width:520px; width:90%; background:var(--bg-card); border:1px solid var(--border-gold); border-radius:14px; padding:32px 24px; text-align:center; }
.onb-head { font-size:20px; font-weight:900; color:var(--gold-bright); margin-bottom:24px; letter-spacing:1px; }
.onb-steps { display:flex; gap:12px; margin-bottom:28px; }
.onb-step { flex:1; padding:16px 8px; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,.02); }
.onb-icon { font-size:28px; margin-bottom:8px; }
.onb-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:6px; line-height:1.3; }
.onb-desc { font-size:11px; color:var(--text-sub); line-height:1.5; }
.onb-btn { width:100%; padding:13px; font-size:16px; font-weight:800; background:linear-gradient(90deg,var(--wc-green),var(--gold)); border:none; border-radius:8px; color:#000; cursor:pointer; margin-bottom:10px; letter-spacing:.5px; transition:opacity .2s; }
.onb-btn:hover { opacity:.9; }
.onb-skip { font-size:11px; color:var(--text-dim); cursor:pointer; padding:4px; }
.onb-skip:hover { color:var(--text-sub); }

/* 全局 Toast 提示 */
.global-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(20,30,50,.95); color:var(--text); padding:10px 20px; border-radius:20px; font-size:13px; font-weight:700; border:1px solid var(--border-gold); opacity:0; transition:all .3s; pointer-events:none; z-index:9998; white-space:nowrap; }
.global-toast.toast-show { opacity:1; transform:translateX(-50%) translateY(0); }

/* J: 深蓝色调 */
:root {
  --bg-base:   #010714;
  --bg-panel:  #020a18;
  --bg-card:   #041020;
  --bg-input:  #061828;
  --border:    rgba(30,80,200,.12);
  --border-md: rgba(30,80,200,.22);
}
body {
  background: #010714 !important;
  background-image:
    radial-gradient(ellipse 130% 45% at 50% 0%, rgba(20,60,180,.4) 0%, transparent 55%),
    radial-gradient(ellipse 140% 40% at 50% 105%, rgba(0,80,160,.2) 0%, transparent 55%),
    radial-gradient(ellipse 35% 90% at 0% 50%, rgba(10,40,100,.15) 0%, transparent 60%),
    radial-gradient(ellipse 35% 90% at 100% 50%, rgba(10,40,100,.15) 0%, transparent 60%) !important;
}

/* K: 响应式断点 */
@media (max-width: 767px) {
  body { overflow-y:auto; }
  .game-arena { flex-direction:column; }
  #threeCanvas { display:none !important; }
  .agent-col {
    width:100% !important; height:auto !important;
    flex-direction:row !important; overflow-x:auto;
    padding:6px 8px; gap:8px;
    border-right:none !important; border-left:none !important;
    border-bottom:1px solid var(--border) !important;
  }
  .agent-card { min-width:130px; flex-shrink:0; }
  .broadcast-panel { position:relative !important; height:55vh !important; overflow-y:auto; }
  .top-bar { height:46px; }
  .tb-left, .tb-brand { display:none; }
  .control-strip { flex-direction:column; height:auto; }
  /* 隐藏3D相关容器防止撑宽 */
  .scene3d-wrap, .chamber-wrap { min-width:0 !important; max-width:100% !important; }
  .chamber-wrap { width:100% !important; }
  .broadcast-panel { left:0 !important; right:0 !important; width:100% !important; }
  /* 控制条不截断 */
  .control-strip, .control-left { max-width:100%; overflow-x:hidden; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .agent-col { width:160px !important; }
  #threeCanvas { max-width:400px !important; }
}

/* ============================================================
   v4.5 新增样式
   ============================================================ */


/* U5: 终投实时计数器 */
.vote-tally {
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:7px 16px; background:rgba(200,168,50,.07);
  border-top:1px solid var(--border-gold); border-bottom:1px solid var(--border-gold);
  flex-shrink:0; z-index:26;
}
.vt-label { font-size:10px; color:var(--text-dim); letter-spacing:2px; margin-right:8px; }
.vt-item { font-size:15px; font-weight:900; transition:all .3s; }
.vt-home { color:#60a5fa; }
.vt-draw { color:var(--gold-bright); }
.vt-away { color:#f87171; }

/* U6: 分镜卡片 */
.sc-cards { display:flex; flex-direction:column; gap:8px; }
.sc-card {
  border-left:3px solid var(--sc-color, #60a5fa);
  border-radius:0 6px 6px 0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--sc-color) 8%, transparent) 0%, transparent 60%);
  padding:8px 10px; overflow:hidden;
  transition:background .2s;
}
.sc-card:hover { background:linear-gradient(90deg, color-mix(in srgb, var(--sc-color) 14%, transparent) 0%, transparent 60%); }
.sc-card-header { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.sc-card-icon { font-size:16px; }
.sc-card-name { font-size:12px; font-weight:800; }
.sc-card-method { font-size:9px; color:var(--text-dim); margin-left:auto; }
.sc-card-scene {
  font-size:12px; color:var(--text-sub); line-height:1.55;
  font-style:italic; border-top:1px solid rgba(255,255,255,.06);
  padding-top:5px; margin-top:2px;
}

/* 金句墙横向滚动优化 */
.cw-scroll { display:flex; flex-direction:column; gap:5px; }
.cw-text { font-style:italic; }

/* devil_reveal 卡片样式 */
.devil-reveal-card { padding:10px 12px; background:rgba(240,192,64,.08); border-left:3px solid var(--gold); border-radius:0 6px 6px 0; margin-bottom:6px; }
.dr-title { font-size:12px; font-weight:800; color:var(--gold-bright); margin-bottom:8px; }
.dr-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; font-size:11px; }
.dr-label { color:var(--text-dim); }
.dr-val { font-weight:700; color:var(--text); }
.dr-true { color:var(--gold-bright); }
.dr-result { font-size:12px; font-weight:700; margin-top:6px; padding-top:6px; border-top:1px solid var(--border); color:var(--text-sub); }

/* 议会进行中：隐藏 banner 和 select，只留按钮行 + seeds status + 历史 */
body.session-active .featured-banner { display:none !important; }
body.session-active #matchSel { display:none !important; }
body.session-active .control-strip { height:56px !important; }
body.session-active .history-feed { max-height:56px; }

/* Fix 4: 结果卡分享按钮改为图片样式 */
.cta-share-img { background:linear-gradient(90deg,rgba(200,168,50,.2),rgba(200,168,50,.1)); color:var(--gold-bright); border-color:var(--border-gold); }
.cta-share-img:hover { background:linear-gradient(90deg,rgba(200,168,50,.32),rgba(200,168,50,.18)); }
.fpl-unavailable { font-size:10px; color:rgba(251,191,36,.7); background:rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.2); border-radius:4px; padding:4px 8px; margin-bottom:6px; }

/* ── version badge ── */
.version-badge {
  background: rgba(200,168,50,.12); border: 1px solid rgba(200,168,50,.35);
  border-radius: 4px; color: var(--gold); font-size: 10px; font-weight: 700;
  padding: 2px 6px; cursor: pointer; letter-spacing: .5px;
  transition: background .2s;
}
.version-badge:hover { background: rgba(200,168,50,.22); }
.demo-badge {
  background: linear-gradient(90deg, rgba(255,80,80,.18), rgba(255,180,40,.18));
  border: 1px solid rgba(255,160,40,.5);
  border-radius: 4px; color: #ffcc66; font-size: 10px; font-weight: 800;
  padding: 2px 8px; letter-spacing: .8px;
  box-shadow: 0 0 8px rgba(255,140,40,.25);
  animation: demoBadgePulse 2.4s ease-in-out infinite;
}
@keyframes demoBadgePulse {
  0%,100% { box-shadow: 0 0 8px rgba(255,140,40,.25); }
  50%     { box-shadow: 0 0 14px rgba(255,170,60,.5); }
}

/* ── changelog modal ── */
.changelog-modal {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.cl-inner {
  background: linear-gradient(160deg, #050f12 0%, #030a0f 100%);
  border: 1px solid rgba(200,168,50,.35); border-radius: 12px;
  width: min(420px, 92vw); max-height: 80vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.8), 0 0 40px rgba(200,168,50,.08);
}
.cl-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid rgba(200,168,50,.2);
  font-weight: 700; font-size: 14px; color: var(--gold-bright);
  background: rgba(200,168,50,.06);
}
.cl-head button {
  background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 4px;
  color: var(--text-sub); cursor: pointer; width: 24px; height: 24px;
  font-size: 12px; transition: all .15s;
}
.cl-head button:hover { background: rgba(255,255,255,.1); color: #fff; }
.cl-body {
  overflow-y: auto; padding: 16px 18px; flex: 1;
  scrollbar-width: thin; scrollbar-color: rgba(200,168,50,.3) transparent;
}
.cl-ver {
  font-size: 13px; font-weight: 800; color: var(--gold-bright);
  margin: 12px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(200,168,50,.2);
}
.cl-ver:first-child { margin-top: 0; }
.cl-date { font-size: 10px; font-weight: 400; color: var(--text-sub); margin-left: 8px; }
.cl-body ul { padding-left: 14px; }
.cl-body li {
  font-size: 11px; color: rgba(221,238,255,.75); line-height: 1.8;
  border-bottom: none;
}
.cl-body li::marker { color: var(--gold); }

/* ── 快速押注按钮（N6：3大按钮押注 UI）── */
.quick-pick-row {
  display: flex; gap: 4px; margin-bottom: 5px;
}
.qp-btn {
  flex: 1; padding: 6px 4px; border-radius: 5px; font-size: 11px; font-weight: 700;
  cursor: pointer; border: 1px solid; transition: all .18s; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.qp-home { background: rgba(30,80,220,.15); color: #7aadff; border-color: rgba(30,80,220,.3); }
.qp-draw { background: rgba(200,168,50,.12); color: var(--gold); border-color: rgba(200,168,50,.3); }
.qp-away { background: rgba(200,30,50,.15);  color: #ff8888; border-color: rgba(200,30,50,.3); }
.qp-btn.qp-active { transform: scale(1.04); box-shadow: 0 0 8px currentColor; }
.qp-home.qp-active { background: rgba(30,80,220,.35); border-color: #5599ff; }
.qp-draw.qp-active { background: rgba(200,168,50,.30); border-color: var(--gold-bright); }
.qp-away.qp-active { background: rgba(200,30,50,.35);  border-color: #ff6677; }
body.session-active .quick-pick-row { display: none; }

/* ── 初判进度指示器（N4/F4）── */
.council-progress {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); border: 1px solid rgba(200,168,50,.3);
  border-radius: 20px; padding: 4px 14px; font-size: 11px;
  color: var(--gold); letter-spacing: .5px; white-space: nowrap;
  backdrop-filter: blur(4px); z-index: 50;
  pointer-events: none;
}
.cp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 2px; vertical-align: middle; }
.cp-done  { background: var(--green); }
.cp-active { background: var(--gold-bright); animation: cpPulse .8s ease-in-out infinite; }
.cp-wait  { background: rgba(255,255,255,.2); }
@keyframes cpPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* ── 概率条空闲提示（F5）── */
#probCenterLabel.idle-hint {
  font-size: 10px; color: rgba(200,168,50,.65);
  letter-spacing: .3px; animation: hintPulse 2.5s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100%{opacity:.65} 50%{opacity:1} }

/* ── Agent 卡片空闲状态增强（N3/F3）── */
.ac-idle-info {
  padding: 6px 8px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 4px;
}
.ac-method { font-size: 11px; color: rgba(232,244,255,0.78); letter-spacing: .3px; margin-bottom: 3px; line-height: 1.35; }
.ac-method strong { color: var(--agent-color, var(--gold-bright)); font-weight: 700; }
.ac-blindspot { font-size: 11px; color: rgba(255,150,150,0.95); line-height: 1.35; text-shadow: 0 0 6px rgba(255,80,80,0.25); }
.ac-hitrate-bar {
  height: 3px; background: rgba(255,255,255,.1); border-radius: 2px;
  margin-top: 5px; overflow: hidden;
}
.ac-hitrate-fill { height: 100%; background: var(--agent-color, var(--green)); border-radius: 2px; transition: width .5s; }

/* ── 分享预览弹窗（N7）── */
.share-preview-modal {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .3s;
}
.share-preview-inner {
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-base));
  border: 1px solid rgba(200,168,50,.4); border-radius: 12px;
  padding: 20px; max-width: 480px; width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
}
.share-preview-title {
  font-size: 14px; font-weight: 700; color: var(--gold-bright);
  margin-bottom: 14px; text-align: center;
}
.share-preview-actions {
  display: flex; gap: 8px; margin-top: 16px;
}
.share-preview-actions button {
  flex: 1; padding: 10px; border-radius: 6px; font-weight: 700;
  font-size: 12px; cursor: pointer; border: 1px solid; transition: all .2s;
}
.sp-copy { background: rgba(200,168,50,.2); color: var(--gold-bright); border-color: var(--border-gold); }
.sp-copy:hover { background: rgba(200,168,50,.35); }
.sp-close { background: rgba(255,255,255,.08); color: var(--text-sub); border-color: var(--border); }
.sp-close:hover { background: rgba(255,255,255,.14); }

/* ── 下一场推荐卡（N11）── */
.next-match-card {
  margin-top: 14px; padding: 10px 12px;
  background: rgba(0,200,255,.06); border: 1px solid rgba(0,200,255,.2);
  border-radius: 8px; cursor: pointer; transition: all .2s;
}
.next-match-card:hover { background: rgba(0,200,255,.12); }
.nmc-label { font-size: 9px; color: var(--neon-blue); letter-spacing: 1px; margin-bottom: 4px; }
.nmc-match { font-size: 13px; font-weight: 700; color: var(--text); }
.nmc-meta  { font-size: 10px; color: var(--text-sub); margin-top: 3px; }

/* ── 战绩历史徽章（N13 LocalStorage）── */
.history-badge {
  font-size: 9px; padding: 2px 6px; border-radius: 10px;
  background: rgba(0,224,135,.12); color: var(--green);
  border: 1px solid rgba(0,224,135,.25); margin-left: 6px;
}

/* ── 焦点 banner 字体增大（4.1 FA-6）── */
.featured-banner { font-size: 13px !important; }

/* ── 3D 议事厅底部标签优化 ── */
.scene3d-label {
  font-size: 10px;
  opacity: 0.35;
  letter-spacing: 1px;
}

/* ── N16: 魔鬼代言人猜测（比分弹窗内）── */
.sm-devil-section {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(240,192,64,.07);
  border: 1px solid rgba(240,192,64,.2);
  border-radius: 8px;
}
.sm-devil-label {
  font-size: 11px; color: var(--text-sub); margin-bottom: 8px;
}
.sm-devil-label strong { color: var(--gold-bright); }
.sm-devil-grid {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.sm-devil-btn {
  padding: 5px 10px; border-radius: 16px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06); color: var(--text-sub);
  transition: all .18s;
}
.sm-devil-btn:hover { background: rgba(255,255,255,.14); color: var(--text); }
.sm-devil-btn.devil-selected {
  border-color: var(--gold); color: var(--gold-bright);
  background: rgba(200,168,50,.18);
  box-shadow: 0 0 8px rgba(200,168,50,.3);
}
/* 魔鬼结果揭晓通知 */
.devil-result-toast {
  position: fixed; bottom: 160px; right: 16px; z-index: 500;
  background: linear-gradient(135deg, rgba(10,10,30,.95), rgba(20,10,40,.95));
  border: 1px solid rgba(240,192,64,.4); border-radius: 10px;
  padding: 12px 16px; max-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  animation: slideInRight .4s ease;
}
.drt-title { font-size: 11px; color: var(--gold); font-weight: 700; margin-bottom: 4px; }
.drt-body  { font-size: 12px; color: var(--text); }
.drt-result { font-size: 14px; font-weight: 800; margin-top: 6px; }
.drt-correct { color: var(--green); }
.drt-wrong   { color: var(--red); }
@keyframes slideInRight {
  from { opacity:0; transform: translateX(30px); }
  to   { opacity:1; transform: translateX(0); }
}

/* ── F11/N15: 对线争议焦点 overlay ── */
.debate-topic-overlay {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 30; pointer-events: none;
  text-align: center;
  animation: dtoPop .4s cubic-bezier(.175,.885,.32,1.275);
}
.dto-label {
  font-size: 9px; color: rgba(255,200,50,.7);
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px;
}
.dto-text {
  font-size: 15px; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(200,168,50,.4);
  border-radius: 8px; padding: 8px 16px;
  text-shadow: 0 0 12px rgba(200,168,50,.5);
  max-width: 340px;
}
@keyframes dtoPop {
  from { opacity:0; transform: translate(-50%,-50%) scale(.8); }
  to   { opacity:1; transform: translate(-50%,-50%) scale(1); }
}

/* ── N5: 空闲状态精彩片段 ── */
.idle-highlights {
  position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
  z-index: 25; pointer-events: none; text-align: center; max-width: 60%;
}
.ih-label { font-size: 9px; color: rgba(200,168,50,.6); letter-spacing: 1.5px; margin-bottom: 4px; }
.ih-text {
  font-size: 13px; font-weight: 700; color: rgba(232,244,255,.75);
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
  border-radius: 6px; padding: 6px 12px;
  animation: ihFade 0.8s ease;
}
@keyframes ihFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── N12/F13: 移动端 Agent 网格 ── */
.mobile-agent-grid {
  display: none;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.mag-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.mag-agent {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: all .2s; cursor: default;
}
.mag-agent.mag-speaking {
  border-color: var(--agent-color, var(--gold));
  background: rgba(var(--agent-r,200),var(--agent-g,168),var(--agent-b,50),.12);
  box-shadow: 0 0 10px var(--agent-color, var(--gold));
  animation: magPulse .8s ease-in-out infinite;
}
@keyframes magPulse { 0%,100%{opacity:1} 50%{opacity:.7} }
.mag-icon { font-size: 22px; margin-bottom: 2px; }
.mag-name { font-size: 9px; color: var(--text-sub); font-weight: 700; }
.mag-stance {
  font-size: 8px; margin-top: 2px; font-weight: 600;
  color: var(--agent-color, var(--gold));
}
.mag-speech {
  font-size: 10px; color: var(--text-sub); text-align: center;
  margin-top: 3px; line-height: 1.3;
  max-height: 32px; overflow: hidden;
}

/* 移动端: 触发移动网格 */
@media (min-width: 601px) {
  .mobile-agent-grid { display: none !important; }
}
@media (max-width: 600px) {
  .mobile-agent-grid { display: block !important; }
  .game-arena .agent-col { display: none !important; }
  .chamber-wrap { flex: 1 !important; }
  /* 移动端不显示浮层 banner（空间太小容易遮挡 agent 网格）*/
  body:not(.session-active) #featuredMatchBanner { display: none !important; }
}

/* ── N14: Agent 卡片金句显示（idle时最后一条金句）── */
.ac-catchphrase {
  padding: 5px 8px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-sub);
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,.05);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ac-catchphrase::before { content: '"'; color: var(--agent-color, var(--gold)); margin-right: 2px; }
.ac-catchphrase::after  { content: '"'; color: var(--agent-color, var(--gold)); margin-left: 2px; }

/* ── 8.4: WC 赛事阶段标签 ── */
.match-stage-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px; margin-left: 5px;
  vertical-align: middle; letter-spacing: .3px;
}
.msb-group    { background: rgba(0,200,100,.12); color: #00e087; border: 1px solid rgba(0,200,100,.2); }
.msb-knockout { background: rgba(200,100,0,.15);  color: #ffaa44; border: 1px solid rgba(200,100,0,.25); }
.msb-semi     { background: rgba(200,50,200,.15);  color: #dd88ff; border: 1px solid rgba(200,50,200,.25); }
.msb-final    { background: rgba(200,168,50,.2);   color: var(--gold-bright); border: 1px solid var(--border-gold); }
/* 中立场地指示 */
.neutral-venue-badge {
  font-size: 9px; color: var(--text-dim); margin-left: 4px;
  background: rgba(255,255,255,.06); border-radius: 3px; padding: 1px 5px;
}

/* ── F14 partial: 动态球队主题背景 ── */
.scene3d-wrap {
  background: radial-gradient(
    ellipse 80% 60% at 30% 80%,
    var(--team-home-color, rgba(30,80,180,.12)) 0%, transparent 60%
  ),
  radial-gradient(
    ellipse 80% 60% at 70% 80%,
    var(--team-away-color, rgba(180,30,30,.10)) 0%, transparent 60%
  );
}