/* ========== Base ========== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --text-s: #475569;
  --text-l: #94a3b8;
  --border: #e2e8f0;
  --accent: #10b981;
  --accent-bg: #ecfdf5;
  --accent-d: #059669;
  --pink: #ec4899;
  --orange: #f97316;
  --yellow: #ca8a04;
  --blue: #6366f1;
  --red: #ef4444;
  --shadow: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.06);
  --radius: 12px;
  --radius-sm: 8px;
  --max-w: 960px;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background: var(--bg); color: var(--text); line-height:1.6; min-height:100vh;
}
#app { display:flex; flex-direction:column; min-height:100vh; }

/* ========== Header ========== */
.header {
  background: var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.header-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 24px;
  height:60px; display:flex; align-items:center; justify-content:space-between;
}
.logo { display:flex; align-items:center; gap:8px; text-decoration:none; }
.logo-text { font-size:18px; font-weight:700; color:var(--text); }
.nav-actions { display:flex; gap:10px; align-items:center; }
.nav-btn {
  padding:7px 16px; border-radius:20px; text-decoration:none;
  font-size:14px; font-weight:500; color:var(--text-s); transition:all .2s;
}
.nav-btn:hover { background:var(--bg); color:var(--text); }
.nav-btn-primary {
  background:var(--accent); color:#fff !important;
}
.nav-btn-primary:hover { background:var(--accent-d); }
.nav-btn.active { background:var(--accent-bg); color:var(--accent-d); }

/* ========== Main ========== */
.main-content { flex:1; max-width:var(--max-w); width:100%; margin:0 auto; padding:28px 24px; }

/* ========== Leaderboard ========== */
.hero {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 50%, var(--blue) 100%);
  border-radius: var(--radius);
  padding: 28px 20px 22px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-emojis {
  display: flex; justify-content: center; align-items: center;
  gap: 6px; flex-wrap: wrap;
}
.hero-emoji {
  font-size: 44px; line-height: 1;
  display: inline-block;
  animation: hero-float 3s ease-in-out infinite;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.18));
  cursor: default;
}
.hero-tagline {
  margin-top: 12px;
  font-size: 14px; color: rgba(255,255,255,.94);
  font-weight: 500; letter-spacing: .5px;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (max-width: 600px) {
  .hero { padding: 22px 14px 18px; }
  .hero-emoji { font-size: 36px; }
  .hero-tagline { font-size: 13px; }
}
.page-top {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:20px; gap:16px; flex-wrap:wrap;
}
.page-title { font-size:24px; font-weight:700; }
.page-stats { font-size:13px; color:var(--text-l); }

/* Filters */
.filters { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.filter-chip {
  padding:6px 14px; border-radius:20px; font-size:13px; font-weight:500;
  border:1px solid var(--border); background:var(--surface); color:var(--text-s);
  cursor:pointer; transition:all .15s;
}
.filter-chip:hover { border-color:var(--accent); color:var(--accent-d); }
.filter-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* 维度排行榜选择卡片 */
.rank-selector {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px; margin-bottom:24px;
}
.rank-card {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:var(--radius-sm);
  border:2px solid var(--border); background:var(--surface);
  cursor:pointer; transition:all .18s; user-select:none;
}
.rank-card:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-1px); }
.rank-card.active {
  border-color:var(--accent); background:var(--accent-bg);
  box-shadow:0 0 0 1px var(--accent);
}
.rank-card-icon { font-size:22px; flex-shrink:0; }
.rank-card-label { font-size:13px; font-weight:600; color:var(--text-s); }
.rank-card.active .rank-card-label { color:var(--accent-d); }
.rank-card.special { border-style:dashed; border-color:var(--blue); background:#f8fafd; }
.rank-card.special.active { border-color:var(--blue); background:#eef2ff; box-shadow:0 0 0 1px var(--blue); }
.rank-card.special.active .rank-card-label { color:#4338ca; }

/* 动物类型排行榜 */
.cat-section { margin-bottom:28px; }
.cat-section-header {
  font-size:17px; font-weight:700; color:var(--text);
  padding:10px 16px; background:var(--accent-bg); border-radius:var(--radius-sm);
  border:1px solid var(--accent); margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.cat-count { font-size:12px; font-weight:400; color:var(--text-l); }

/* 地域同理心 */
.regional-intro { font-size:14px; color:var(--text-s); margin-bottom:20px; line-height:1.6; }
.animal-picker {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(70px, 1fr));
  gap:8px; margin-bottom:24px; max-height:300px; overflow-y:auto;
  padding:4px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg);
}
.animal-chip {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px; border-radius:var(--radius-sm); cursor:pointer;
  transition:all .15s; background:var(--surface); border:1px solid transparent;
}
.animal-chip:hover { border-color:var(--accent); background:var(--accent-bg); }
.animal-chip.active { border-color:var(--accent); background:var(--accent-bg); box-shadow:0 0 0 1px var(--accent); }
.ac-emoji { font-size:24px; line-height:1; }
.ac-name { font-size:11px; font-weight:500; color:var(--text-s); text-align:center; }
.animal-chip.active .ac-name { color:var(--accent-d); }

.regional-result { min-height:60px; }
.regional-placeholder {
  text-align:center; padding:40px 20px; color:var(--text-l); font-size:14px;
}
.sample-warning {
  background:var(--bg-warn, #fff8e1); border:0.5px solid var(--amber, #ef9f27);
  border-radius:var(--radius, 10px); padding:10px 16px; margin:0 0 16px;
  font-size:13px; color:var(--amber-d, #854f0b); line-height:1.6;
}
.low-sample-tag {
  display:inline-block; font-size:10px; padding:1px 6px; margin-left:4px;
  border-radius:4px; background:var(--bg-warn, #fff8e1);
  color:var(--amber-d, #854f0b); border:0.5px solid var(--amber, #ef9f27);
  vertical-align:middle; font-weight:400;
}
.regional-header {
  display:flex; align-items:center; gap:10px; padding:16px 20px;
  background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
  margin-bottom:16px;
}
.rh-emoji { font-size:36px; }
.rh-name { font-size:20px; font-weight:700; }
.rh-cat { font-size:13px; color:var(--text-l); }
.rh-count { margin-left:auto; font-size:12px; color:var(--text-l); background:var(--bg); padding:4px 10px; border-radius:12px; }

.region-score-detail {
  font-size:11px; color:var(--text-l); padding:0 16px 8px; margin-bottom:4px;
}

/* 区域选择器（结果页） */
.region-picker {
  margin-top:20px; padding:20px; background:var(--bg); border-radius:var(--radius-sm);
  border:2px dashed var(--border); text-align:center;
}
.region-label { font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; }
.region-desc { font-size:12px; color:var(--text-l); margin-bottom:12px; }
.region-select {
  padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  font-size:14px; color:var(--text); background:var(--surface); margin-right:8px;
  cursor:pointer; max-width:220px;
}
.region-status { font-size:13px; margin-left:8px; }
.region-btn { display:inline-block !important; }

/* Leaderboard card */
.lb-list { display:flex; flex-direction:column; gap:8px; }
.lb-row {
  display:grid; grid-template-columns:40px 1fr 140px 60px;
  align-items:center; gap:12px; padding:12px 16px;
  background:var(--surface); border-radius:var(--radius-sm);
  border:1px solid var(--border); transition:all .15s;
}
.lb-row:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.lb-rank { font-size:16px; font-weight:700; text-align:center; }
.lb-rank.gold { color:#f59e0b; }
.lb-rank.silver { color:#9ca3af; }
.lb-rank.bronze { color:#d97706; }
.lb-animal { display:flex; align-items:center; gap:10px; }
.lb-animal .emoji { font-size:24px; width:32px; text-align:center; }
.lb-animal .name { font-size:15px; font-weight:600; }
.lb-animal .cat { font-size:11px; color:var(--text-l); }
.lb-bar-wrap { position:relative; height:22px; background:var(--bg); border-radius:11px; overflow:hidden; }
.lb-bar-fill { height:100%; border-radius:11px; background:linear-gradient(90deg,var(--accent),#34d399); transition:width .5s ease; }
.lb-bar-text { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:700; color:var(--text-s); }
.lb-score { font-size:14px; font-weight:700; color:var(--accent-d); text-align:right; }

/* ========== Voting Page ========== */

/* VS header */
.vs-header {
  text-align:center; margin-bottom:24px;
}
.vs-header .subtitle { font-size:14px; color:var(--text-l); }

.vote-counter {
  display:inline-block; margin-bottom:14px; padding:6px 16px;
  background:var(--accent-bg); color:var(--accent-d); border:1px solid #a7f3d0;
  border-radius:20px; font-size:13px; font-weight:500;
}
.vote-counter strong { font-size:16px; font-weight:800; }
.result-counter {
  text-align:center; font-size:14px; color:var(--text-s); margin:0 0 16px;
  padding:12px; background:var(--accent-bg); border-radius:var(--radius-sm); border:1px solid #a7f3d0;
}
.result-counter strong { color:var(--accent-d); font-size:18px; font-weight:800; }

.vs-cards {
  display:flex; gap:24px; margin-bottom:28px; align-items:stretch;
}
.vs-card {
  flex:1; background:var(--surface); border-radius:var(--radius);
  border:2px solid var(--border); padding:24px; text-align:center;
  transition:all .2s; cursor:default; position:relative; overflow:hidden;
}
.vs-card.left { border-color:#e0f2fe; }
.vs-card.right { border-color:#fef3c7; }
.vs-card .emoji { font-size:56px; margin-bottom:8px; }
.vs-card .name { font-size:20px; font-weight:700; margin-bottom:4px; }
.vs-card .cat { font-size:13px; color:var(--text-l); }

.vs-divider {
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.vs-badge {
  width:48px; height:48px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:16px;
}

/* Questions */
.questions { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.q-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:var(--surface);
  border-radius:var(--radius-sm); border:1px solid var(--border);
}
.q-label {
  flex:0 0 160px; font-size:14px; font-weight:600; color:var(--text);
}
.q-hint {
  font-size:11px; color:var(--text-l); font-weight:400;
}
.q-buttons { flex:1; display:flex; gap:10px; }
.q-btn {
  flex:1; padding:10px 16px; border-radius:var(--radius-sm);
  border:2px solid var(--border); background:var(--surface);
  font-size:14px; font-weight:500; color:var(--text-s);
  cursor:pointer; transition:all .15s; text-align:center;
}
.q-btn:hover { border-color:var(--accent); background:var(--accent-bg); }
.q-btn.selected {
  border-color:var(--accent); background:var(--accent-bg);
  color:var(--accent-d); font-weight:700;
}
.q-btn.selected.left { border-color:#0ea5e9; background:#f0f9ff; color:#0369a1; }
.q-btn.selected.right { border-color:#f59e0b; background:#fffbeb; color:#b45309; }

/* Round 2 大按钮：只能活一个 */
.q-row-saved { flex-direction:column; align-items:stretch; padding:20px 24px; }
.q-row-saved .q-label { flex:0 0 auto; text-align:center; font-size:18px; margin-bottom:12px; }
.q-row-saved .q-hint { font-size:12px; }
.q-buttons-big { gap:16px; }
.q-btn-saved {
  flex:1; padding:20px 24px; border-radius:var(--radius);
  border:3px solid var(--border); background:var(--surface);
  font-size:16px; font-weight:600; color:var(--text);
  cursor:pointer; transition:all .2s; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.q-btn-saved:hover { border-color:var(--red); background:#fef2f2; transform:translateY(-2px); box-shadow:var(--shadow); }
.q-btn-saved.selected {
  border-color:var(--red); background:#fef2f2; color:#dc2626; font-weight:700;
}
.q-btn-saved.selected:hover { transform:none; }
.q-saved-emoji { font-size:40px; line-height:1; }
.q-saved-name { font-size:17px; }

.submit-area {
  text-align:center;
}
.btn {
  display:inline-block; white-space:nowrap; text-decoration:none; text-align:center;
  padding:14px 40px; border:none; border-radius:var(--radius-sm);
  font-size:16px; font-weight:700; cursor:pointer; transition:all .2s;
  line-height:1.4;
}
.btn-primary {
  background:var(--accent); color:#fff;
}
.btn-primary:hover:not(:disabled) { background:var(--accent-d); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }

/* ========== Results ========== */
.result-card {
  background:var(--surface); border-radius:var(--radius); padding:32px;
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
  margin-bottom:24px;
}
.result-title { font-size:20px; font-weight:700; text-align:center; margin-bottom:24px; }
.result-dim-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.result-dim {
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:var(--bg); border-radius:var(--radius-sm);
}
.result-dim-label { flex:0 0 140px; font-size:13px; font-weight:600; color:var(--text-s); }
.result-dim-winner { font-size:14px; font-weight:700; color:var(--accent-d); }
.result-dim-winner span { color:var(--text); }
.result-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; }

/* 双层结果卡片 */
.result-pair { max-width:720px; margin:0 auto 24px; }
.result-round-labels {
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-bottom:24px; font-size:14px; font-weight:600;
}
.rlabel { color:var(--text-s); }
.rlabel-arrow { color:var(--text-l); font-size:18px; }

.result-dim-row {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-radius:var(--radius-sm); margin-bottom:8px; border:1px solid var(--border);
}
.result-dim-row.dim-changed { border-color:var(--orange); background:#fff7ed; }
.result-dim-row.dim-unchanged { background:var(--bg); }

.result-dim-label { flex:0 0 100px; font-size:13px; font-weight:600; color:var(--text); }

.result-vs-pair {
  display:flex; align-items:center; gap:8px; flex:1; min-width:0;
}
.result-choice {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 10px; border-radius:8px; background:var(--bg); flex:1;
  min-width:0; border:2px solid transparent; transition:all .15s;
}
.result-choice.chosen {
  border-color:var(--accent); background:var(--accent-bg);
}
.rc-emoji { font-size:24px; line-height:1; }
.rc-name { font-size:12px; font-weight:600; color:var(--text); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.result-vs-center { flex:0 0 auto; }
.vs-text { font-size:11px; font-weight:700; color:var(--text-l); }

.result-arrow {
  flex:0 0 36px; text-align:center; font-size:20px; line-height:1;
}
.dim-changed .result-arrow { animation:pulse 1s infinite; }

.result-verdict {
  text-align:center; font-size:15px; font-weight:600; color:var(--text);
  padding:16px; background:var(--bg); border-radius:var(--radius-sm);
  margin:20px 0 20px; border:1px solid var(--border);
  line-height:1.8;
}
.verdict-flip { color:var(--orange); font-weight:700; font-size:16px; }
.verdict-keep { color:var(--accent-d); font-weight:700; font-size:16px; }

/* 结果分区 */
.result-section { margin-bottom:20px; }
.result-section-title { font-size:15px; font-weight:700; color:var(--accent-d); margin-bottom:12px; }
.result-vs-header { font-size:14px; color:var(--text-s); margin-bottom:10px; }
.result-divider {
  height:1px; background:var(--border); margin:20px 0;
}

/* Round 1 维度选择行（简化版） */
.result-dim-row { display:flex; align-items:center; gap:12px; padding:8px 12px;
  border-radius:var(--radius-sm); margin-bottom:6px; border:1px solid var(--border); background:var(--bg); }
.result-dim-label { flex:0 0 140px; font-size:13px; font-weight:600; color:var(--text); }
.result-dim-pick { display:flex; align-items:center; gap:6px; }
.result-dim-pick .rc-emoji { font-size:20px; }
.result-dim-pick .rc-name { font-size:13px; font-weight:600; color:var(--accent-d); }

/* Round 2 生死抉择结果 */
.result-saved { display:flex; flex-direction:column; gap:12px; }
.result-saved-winner {
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:#fef2f2; border:2px solid var(--red); border-radius:var(--radius);
  justify-content:center;
}
.result-saved-loser {
  display:flex; align-items:center; gap:8px; justify-content:center;
  padding:8px; font-size:13px; color:var(--text-l);
}
.result-saved-emoji { font-size:36px; line-height:1; }
.result-saved-label { font-size:14px; color:var(--red); font-weight:600; }
.result-saved-name { font-size:18px; font-weight:700; color:#dc2626; }
.result-saved-loser .result-saved-emoji { font-size:24px; opacity:.5; }

/* 轮次标签 */
.round-badge {
  display:inline-block; padding:4px 16px; border-radius:20px; font-size:13px;
  font-weight:700; background:var(--accent-bg); color:var(--accent-d);
  border:1px solid var(--accent); margin-bottom:8px;
}

@keyframes pulse {
  0%, 100% { opacity:1; }
  50% { opacity:0.4; }
}

/* ========== Loading/Empty ========== */
.loading { text-align:center; padding:60px 20px; color:var(--text-l); }
.loading-spinner {
  display:inline-block; width:32px; height:32px; border:3px solid var(--border);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite;
  margin-bottom:12px;
}
@keyframes spin { to{transform:rotate(360deg)} }

.empty { text-align:center; padding:60px 20px; color:var(--text-l); }
.empty-icon { font-size:48px; margin-bottom:12px; }
.empty-text { font-size:16px; margin-bottom:20px; }

/* ========== Toast ========== */
.toast {
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(100px);
  background:var(--text); color:#fff; padding:12px 24px; border-radius:var(--radius-sm);
  font-size:14px; box-shadow:var(--shadow-lg); z-index:1000; opacity:0; transition:all .3s;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error { background:var(--red); }
.toast.info { background:var(--blue); }

/* ========== Footer ========== */
.footer { text-align:center; padding:16px; font-size:12px; color:var(--text-l); border-top:1px solid var(--border); background:var(--surface); }

/* ========== 锦标赛样式 ========== */

/* 喜爱度对决卡片 */
.like-card { cursor:pointer; transition:all .2s; }
.like-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.like-card.chosen {
  border-color:var(--accent) !important; background:var(--accent-bg) !important;
  transform:scale(1.05); box-shadow:0 8px 24px rgba(16,185,129,.2);
}
.like-card.not-chosen { opacity:.35; transform:scale(.92); filter:grayscale(.3); }

/* 动物简介 */
.intro-toggle {
  margin-top:8px; padding:2px 14px; font-size:12px; font-weight:600;
  color:var(--accent-d); background:transparent; border:1px solid var(--accent);
  border-radius:20px; cursor:pointer; transition:all .15s; user-select:none;
}
.intro-toggle:hover { background:var(--accent-bg); }
.animal-intro {
  display:none; margin-top:8px; padding:8px 10px; font-size:12px;
  line-height:1.6; color:var(--text-l); background:var(--bg);
  border-radius:8px; text-align:left;
}
.animal-intro.show { display:block; }
.animal-intro-show { display:block !important; margin-top:8px; padding:8px 10px; font-size:12px; line-height:1.6; color:var(--text-l); background:var(--bg); border-radius:8px; text-align:left; }
.champion-intro { margin-top:8px; padding:10px 16px; font-size:14px; line-height:1.6; color:var(--text-l); background:var(--bg); border-radius:10px; max-width:420px; margin-left:auto; margin-right:auto; }

/* 进度条 */
.progress-bar {
  width:100%; max-width:400px; height:8px; background:var(--bg);
  border-radius:4px; overflow:hidden; margin:12px auto 4px;
  border:1px solid var(--border);
}
.progress-fill {
  height:100%; background:linear-gradient(90deg,var(--accent),#34d399);
  transition:width .35s ease; border-radius:4px;
}
.progress-text { font-size:13px; color:var(--text-l); margin:0; }

.like-hint { text-align:center; color:var(--text-l); font-size:14px; margin-top:20px; }

/* 冠军展示 */
.champion-spotlight {
  text-align:center; padding:32px 20px; margin-bottom:28px;
  background:linear-gradient(135deg,#fef3c7,#fde68a); border-radius:var(--radius);
  border:2px solid #fcd34d;
}
.champion-crown { font-size:40px; margin-bottom:4px; }
.champion-emoji { font-size:72px; line-height:1; margin-bottom:8px; }
.champion-label { font-size:14px; color:#92400e; font-weight:600; margin-bottom:4px; }
.champion-name { font-size:28px; font-weight:800; color:#78350f; margin-bottom:6px; }
.champion-score { font-size:15px; color:#92400e; font-weight:600; }

/* 维度标签 */
.dim-tags { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.dim-tag {
  font-size:11px; padding:3px 8px; border-radius:10px;
  background:var(--bg); color:var(--text-l); border:1px solid var(--border);
  white-space:nowrap;
}
.dim-tag.active { background:var(--accent-bg); color:var(--accent-d); border-color:#a7f3d0; font-weight:600; }

/* 轮空标签 */
.bye-tag {
  font-size:10px; padding:1px 6px; border-radius:8px;
  background:#fef3c7; color:#92400e; font-weight:500; margin-left:4px;
  border:1px solid #fcd34d;
}

/* 结果页维度行调整 */
.result-dim-row .result-dim-pick { flex:0 0 auto; margin-right:12px; }
.result-dim-row { align-items:center; }

/* emoji 空占位（无专属 emoji 的动物用首字方块） */
.emoji-ph {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1em; min-height:1em; padding:0 .14em;
  background:linear-gradient(135deg, var(--bg), var(--surface));
  color:var(--text-m); font-weight:700;
  border-radius:30%; border:1px solid var(--border);
  font-size:.82em; line-height:1; vertical-align:middle;
  font-style:normal;
}
.vs-card .emoji .emoji-ph { font-size:38px; min-width:56px; min-height:56px; border-radius:18px; }
.champion-emoji .emoji-ph { font-size:60px; min-width:84px; min-height:84px; border-radius:24px; }
.ac-emoji .emoji-ph, .rc-emoji .emoji-ph, .rh-emoji .emoji-ph { font-size:16px; min-width:22px; min-height:22px; }
.q-saved-emoji .emoji-ph { font-size:16px; min-width:22px; min-height:22px; }
.lb-animal .emoji .emoji-ph { font-size:22px; min-width:30px; min-height:30px; border-radius:10px; }

/* 对决操作区 + 返回重做按钮 */
.matchup-actions {
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:18px; min-height:24px;
}
.submit-area { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.btn-ghost, .undo-btn {
  background:transparent; color:var(--text-m);
  border:1px solid var(--border); padding:9px 20px;
  font-size:13px; font-weight:600; border-radius:var(--radius-sm); cursor:pointer;
  transition:all .2s; line-height:1.4;
}
.btn-ghost:hover, .undo-btn:hover {
  background:var(--bg); border-color:var(--accent); color:var(--accent-d);
}

/* ========== Responsive ========== */
@media (max-width:700px) {
  .vs-cards { flex-direction:column; }
  .vs-divider { display:none; }
  .q-row { flex-direction:column; align-items:stretch; }
  .q-label { flex:0 0 auto; }
  .lb-row { grid-template-columns:32px 1fr 90px 50px; gap:6px; padding:10px 12px; }
  .lb-bar-wrap { display:none; }
  .filters,.rank-selector { gap:6px; }
  .filter-chip,.rank-card { padding:8px 12px; font-size:12px; }
  .rank-selector { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
  .champion-emoji { font-size:56px; }
  .champion-name { font-size:22px; }
  .dim-tags { gap:4px; }
  .dim-tag { font-size:10px; padding:2px 6px; }
}