/* ===== 三国杀国战战绩系统 全局样式 ===== */
:root {
  --sgs-bg-deep: #0d0606;
  --sgs-bg: #150a0a;
  --sgs-bg-card: #2a1212;
  --sgs-bg-card-hover: #381818;
  --sgs-bg-input: #1a0d0d;
  --sgs-gold: #d4af37;
  --sgs-gold-light: #f0d060;
  --sgs-gold-dim: #8a7028;
  --sgs-text: #f2e8d5;
  --sgs-text-dim: #a89880;
  --sgs-red: #b83030;
  --sgs-red-bright: #e04040;
  --sgs-green: #3f8f4a;
  --sgs-wei: #4a7ab8;
  --sgs-shu: #c23a2b;
  --sgs-wu: #3e9b47;
  --sgs-qun: #8e8e8e;
  --sgs-jin: #9a7bd0;
  --sgs-yexin: #6a2d9e;
  --sgs-border: rgba(212, 175, 55, 0.25);
  --sgs-border-strong: rgba(212, 175, 55, 0.6);
  --sgs-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  --sgs-radius: 10px;
  --nav-height: 64px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html { background: var(--sgs-bg-deep); }
body {
  background:
    radial-gradient(ellipse at top, #2a1010 0%, transparent 50%),
    radial-gradient(ellipse at bottom, #1a0808 0%, transparent 40%),
    var(--sgs-bg-deep);
  color: var(--sgs-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
}

body {
  background:
    radial-gradient(ellipse at top, #2a1010 0%, transparent 50%),
    radial-gradient(ellipse at bottom, #1a0808 0%, transparent 40%),
    var(--sgs-bg-deep);
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 16px);
}

/* ===== 顶部标题栏 ===== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(13, 6, 6, 0.98) 0%, rgba(13, 6, 6, 0.92) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sgs-border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http://www.w3.org/2000/svg' width%3D'360' height%3D'6' viewBox%3D'0 0 360 6'%3E%3Cpath d%3D'M0 3 Q 22.5 0 45 3 T 90 3 T 135 3 T 180 3 T 225 3 T 270 3 T 315 3 T 360 3' fill%3D'none' stroke%3D'%23d4af37' stroke-opacity%3D'0.45' stroke-width%3D'1.1'/%3E%3Cpath d%3D'M0 5 Q 30 3.4 60 5 T 120 5 T 180 5 T 240 5 T 300 5 T 360 5' fill%3D'none' stroke%3D'%25238a7028' stroke-opacity%3D'0.32' stroke-width%3D'1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 360px 6px;
  pointer-events: none;
}


.app-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--sgs-gold);
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-title::before,
.app-title::after {
  content: '';
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sgs-gold));
}

.app-title::after {
  background: linear-gradient(90deg, var(--sgs-gold), transparent);
}

.header-stats {
  font-size: 12px;
  color: var(--sgs-text-dim);
  text-align: right;
}

.header-stats strong {
  color: var(--sgs-gold-light);
  font-size: 14px;
}

/* ===== 页面容器 ===== */
.page {
  display: none;
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
  animation: fadeIn 0.28s ease;
}

.page.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 通用卡牌 ===== */
.card {
  background: linear-gradient(135deg, var(--sgs-bg-card) 0%, #221010 100%);
  border: 1px solid var(--sgs-border);
  border-radius: var(--sgs-radius);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sgs-gold-dim), transparent);
}

.card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--sgs-gold), var(--sgs-gold-dim));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.card:hover {
  border-color: var(--sgs-border-strong);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(212, 175, 55, 0.12);
  transform: translateY(-2px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover::after {
  transform: scaleY(1);
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--sgs-gold);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 2px;
}

.card-title::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--sgs-gold);
  border-radius: 2px;
}


/* ===== 首页顶部：三国杀横幅 ===== */
.sgs-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--sgs-radius);
  background: linear-gradient(135deg, #2b0e0e 0%, #180808 55%, #221010 100%);
  margin-bottom: 14px;
  overflow: hidden;
}
.sgs-banner::after {
  content: '';
  position: absolute;
  right: -18px;
  top: -22px;
  width: 110px;
  height: 110px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http://www.w3.org/2000/svg' viewBox%3D'0 0 48 48' fill%3D'none' stroke%3D'%23d4af37' stroke-width%3D'2'%3E%3Ccircle cx%3D'24' cy%3D'24' r%3D'22'/%3E%3Ccircle cx%3D'24' cy%3D'24' r%3D'16' stroke-width%3D'1.4' stroke-dasharray%3D'4 4'/%3E%3Ctext x%3D'24' y%3D'31' text-anchor%3D'middle' font-size%3D'19' fill%3D'%23d4af37' stroke%3D'none' font-family%3D'Kaiti%2CSTKaiti%2Cserif' font-weight%3D'bold'%3E%E6%9D%80%3C/text%3E%3C/svg%3E");
  background-size: 110px 110px;
  background-repeat: no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
.sgs-banner-emblem {
  width: 84px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.sgs-banner-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.35));
}
.sgs-banner-text {
  flex: 1;
  min-width: 0;
}
.sgs-banner-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--sgs-gold-light);
  letter-spacing: 2px;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  text-shadow: 0 0 16px rgba(240, 208, 96, 0.25);
}
.sgs-banner-sub {
  font-size: 12px;
  color: var(--sgs-text-dim);
  margin-top: 3px;
  letter-spacing: 1px;
}
.sgs-banner-factions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sgs-faction-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.sgs-faction-dot.f-wei { background: var(--sgs-wei); }
.sgs-faction-dot.f-shu { background: var(--sgs-shu); }
.sgs-faction-dot.f-wu { background: var(--sgs-wu); }
.sgs-faction-dot.f-qun { background: var(--sgs-qun); }
.sgs-faction-dot.f-jin { background: var(--sgs-jin); }
.sgs-faction-dot.f-yexin { background: var(--sgs-yexin); }

/* banner 卷轴分隔：渐变金线 + 中央鎏金菱形 */
.sgs-banner-divider {
  position: relative;
  height: 14px;
  margin: 3px 16px 14px;
}
.sgs-banner-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.14) 12%, rgba(212,175,55,0.5) 50%, rgba(212,175,55,0.14) 88%, transparent 100%);
}
.sgs-banner-divider::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, #f0d060, #b89020);
  box-shadow: 0 0 10px rgba(240,208,96,0.7);
}

/* 首页入场：统计卡/排行卡轻微浮入 */
@keyframes sgs-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
#page-home .stats-grid .stat-item { animation: sgs-rise 0.45s ease both; }
#page-home .stats-grid .stat-item:nth-child(2) { animation-delay: 0.06s; }
#page-home .stats-grid .stat-item:nth-child(3) { animation-delay: 0.12s; }
#page-home .card { animation: sgs-rise 0.5s ease both; animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  #page-home .stats-grid .stat-item,
  #page-home .card { animation: none; }
}

/* ===== 统计概览 ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-item {
  background: var(--sgs-bg-card);
  border: 1px solid var(--sgs-border);
  border-radius: var(--sgs-radius);
  padding: 14px 8px;
  text-align: center;
}

.stat-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
  color: var(--sgs-gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-icon svg {
  width: 16px;
  height: 16px;
}

.stat-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--sgs-gold-light);
  line-height: 1.2;
  text-shadow: 0 0 18px rgba(240, 208, 96, 0.35);
}

.stat-label {
  font-size: 11px;
  color: var(--sgs-text-dim);
  margin-top: 4px;
  letter-spacing: 1px;
}

/* ===== 玩家排行卡片 ===== */
.player-card {
  background: linear-gradient(135deg, var(--sgs-bg-card) 0%, #221010 100%);
  border: 1px solid var(--sgs-border);
  border-radius: var(--sgs-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.player-card:active {
  transform: scale(0.98);
  border-color: var(--sgs-border-strong);
}

.player-card::after {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

/* 玩家榜前三名：金/银/铜描边光晕 */
.player-card.player-top-1 { border-color: rgba(240, 208, 96, 0.6); box-shadow: 0 0 16px rgba(240, 208, 96, 0.14); }
.player-card.player-top-2 { border-color: rgba(200, 200, 200, 0.45); }
.player-card.player-top-3 { border-color: rgba(205, 127, 50, 0.5); }

.rank-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  border: 2px solid;
}

.rank-1 { background: linear-gradient(135deg, #f0d060, #b89020); color: #1a0d0d; border-color: #f0d060; box-shadow: 0 0 12px rgba(240, 208, 96, 0.4); }
.rank-2 { background: linear-gradient(135deg, #c8c8c8, #888); color: #1a0d0d; border-color: #c8c8c8; }
.rank-3 { background: linear-gradient(135deg, #cd7f32, #8b5a2b); color: #1a0d0d; border-color: #cd7f32; }
.rank-other { background: var(--sgs-bg); color: var(--sgs-text-dim); border-color: var(--sgs-border); }

.player-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--sgs-gold-dim);
  color: var(--sgs-text);
  background: linear-gradient(135deg, #4a2020, #2a1010);
}

.player-info {
  flex: 1;
  min-width: 0;
}

.player-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--sgs-text);
  margin-bottom: 4px;
}

.player-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--sgs-text-dim);
  flex-wrap: wrap;
}

.player-meta .win { color: var(--sgs-green); }
.player-meta .lose { color: var(--sgs-red-bright); }

.player-points {
  text-align: right;
  flex-shrink: 0;
}

.points-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--sgs-gold-light);
  line-height: 1;
}

.points-label {
  font-size: 10px;
  color: var(--sgs-text-dim);
  margin-top: 3px;
  letter-spacing: 1px;
}

.winrate-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.winrate-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sgs-gold-dim), var(--sgs-gold));
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ===== 表单 ===== */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  color: var(--sgs-text-dim);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--sgs-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--sgs-gold);
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-select option {
  background: var(--sgs-bg-card);
  color: var(--sgs-text);
}

/* 势力分组 */
.faction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.faction-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 600px) {
  .faction-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 400px) {
  .faction-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
}

.faction-group {
  border: 1px solid var(--sgs-border);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.faction-group.wei { border-color: rgba(74, 122, 184, 0.4); }
.faction-group.shu { border-color: rgba(194, 58, 43, 0.4); }
.faction-group.wu { border-color: rgba(62, 155, 71, 0.4); }
.faction-group.qun { border-color: rgba(142, 142, 142, 0.4); }
.faction-group.jin { border-color: rgba(154, 123, 208, 0.4); }

.faction-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.faction-name.wei { color: var(--sgs-wei); }
.faction-name.shu { color: var(--sgs-shu); }
.faction-name.wu { color: var(--sgs-wu); }
.faction-name.qun { color: var(--sgs-qun); }
.faction-name.jin { color: var(--sgs-jin); }

.faction-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.faction-dot.wei { background: var(--sgs-wei); }
.faction-dot.shu { background: var(--sgs-shu); }
.faction-dot.wu { background: var(--sgs-wu); }
.faction-dot.qun { background: var(--sgs-qun); }
.faction-dot.jin { background: var(--sgs-jin); }

/* 玩家多选标签 */
.player-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.player-chip {
  padding: 5px 10px;
  border: 1px solid var(--sgs-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--sgs-text-dim);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--sgs-bg-input);
  user-select: none;
}

.player-chip:active {
  transform: scale(0.95);
}

.player-chip.selected {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--sgs-gold);
  color: var(--sgs-gold-light);
}

/* 胜利势力选择 */
.winner-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.winner-btn {
  padding: 12px 6px;
  border: 1px solid var(--sgs-border);
  background: var(--sgs-bg-input);
  color: var(--sgs-text-dim);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  text-align: center;
}

.winner-btn:active {
  transform: scale(0.96);
}

.winner-btn.selected.wei { background: rgba(74, 122, 184, 0.2); border-color: var(--sgs-wei); color: #7aa8e8; }
.winner-btn.selected.shu { background: rgba(194, 58, 43, 0.2); border-color: var(--sgs-shu); color: #e86858; }
.winner-btn.selected.wu { background: rgba(62, 155, 71, 0.2); border-color: var(--sgs-wu); color: #6ec878; }
.winner-btn.selected.qun { background: rgba(142, 142, 142, 0.2); border-color: var(--sgs-qun); color: #b8b8b8; }
.winner-btn.selected.jin { background: rgba(154, 123, 208, 0.2); border-color: var(--sgs-jin); color: #b8a0e8; }
.winner-btn.selected.yexin { background: rgba(106, 45, 158, 0.25); border-color: var(--sgs-yexin); color: #b088d8; }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border: 1px solid var(--sgs-gold);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  letter-spacing: 2px;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, #942222, #b83030);
  color: #fff;
  border-color: var(--sgs-gold);
  box-shadow: 0 2px 12px rgba(184, 48, 48, 0.3);
}

.btn-gold {
  background: linear-gradient(135deg, var(--sgs-gold), #b89020);
  color: #1a0d0d;
  border-color: var(--sgs-gold);
  font-weight: 700;
}

.btn-gold:hover {
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

.btn-gold:active {
  transform: translateY(0);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 1px;
}

.btn-danger {
  background: transparent;
  color: var(--sgs-red-bright);
  border-color: rgba(224, 64, 64, 0.4);
}

.btn-ghost {
  background: transparent;
  color: var(--sgs-text-dim);
  border-color: var(--sgs-border);
}

.btn-gold-outline {
  background: transparent;
  color: var(--sgs-gold-light);
  border-color: var(--sgs-gold);
}

.btn-gold-outline:hover {
  background: rgba(212, 175, 55, 0.15);
}

/* ===== 历史战报 ===== */
.game-record {
  background: var(--sgs-bg-card);
  border: 1px solid var(--sgs-border);
  border-radius: var(--sgs-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: all 0.2s;
}

.game-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.game-date {
  font-size: 12px;
  color: var(--sgs-text-dim);
}

.game-result-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
}

.game-result-badge.wei { background: rgba(74, 122, 184, 0.2); color: #7aa8e8; border: 1px solid rgba(74, 122, 184, 0.4); }
.game-result-badge.shu { background: rgba(194, 58, 43, 0.2); color: #e86858; border: 1px solid rgba(194, 58, 43, 0.4); }
.game-result-badge.wu { background: rgba(62, 155, 71, 0.2); color: #6ec878; border: 1px solid rgba(62, 155, 71, 0.4); }
.game-result-badge.qun { background: rgba(142, 142, 142, 0.2); color: #b8b8b8; border: 1px solid rgba(142, 142, 142, 0.4); }
.game-result-badge.jin { background: rgba(154, 123, 208, 0.2); color: #b8a0e8; border: 1px solid rgba(154, 123, 208, 0.4); }
.game-result-badge.yexin { background: rgba(106, 45, 158, 0.25); color: #b088d8; border: 1px solid rgba(106, 45, 158, 0.5); }

.game-factions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.game-faction-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--sgs-bg-input);
  border-radius: 6px;
  font-size: 11px;
}

.game-faction-tag .fname {
  font-weight: 600;
}

.game-faction-tag.wei .fname { color: var(--sgs-wei); }
.game-faction-tag.shu .fname { color: var(--sgs-shu); }
.game-faction-tag.wu .fname { color: var(--sgs-wu); }
.game-faction-tag.qun .fname { color: var(--sgs-qun); }
.game-faction-tag.jin .fname { color: var(--sgs-jin); }
.game-faction-tag.yexin .fname { color: var(--sgs-yexin); }

.game-faction-tag .fplayers {
  color: var(--sgs-text-dim);
}

.game-faction-tag.winner {
  border: 1px solid var(--sgs-gold-dim);
  background: rgba(212, 175, 55, 0.08);
}

.game-note {
  font-size: 12px;
  color: var(--sgs-text-dim);
  font-style: italic;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.game-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ===== 奖惩流水 ===== */
.reward-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reward-item:last-child {
  border-bottom: none;
}

.reward-player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid var(--sgs-gold-dim);
  color: var(--sgs-text);
  background: linear-gradient(135deg, #4a2020, #2a1010);
  flex-shrink: 0;
}

.reward-info {
  flex: 1;
  min-width: 0;
}

.reward-reason {
  font-size: 14px;
  color: var(--sgs-text);
  margin-bottom: 2px;
}

.reward-meta {
  font-size: 11px;
  color: var(--sgs-text-dim);
}

.reward-amount {
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.reward-amount.positive { color: var(--sgs-green); }
.reward-amount.negative { color: var(--sgs-red-bright); }

/* 操作记录类型标签（只读展示） */
.score-log-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}
.score-log-badge.type-reward { background: rgba(74, 154, 74, 0.2); color: var(--sgs-green); }
.score-log-badge.type-penalty { background: rgba(224, 64, 64, 0.18); color: var(--sgs-red-bright); }
.score-log-badge.type-revoke { background: rgba(168, 152, 128, 0.18); color: var(--sgs-text-dim); }

/* 金额选择器 */
.amount-selector {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.amount-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--sgs-border);
  background: var(--sgs-bg-input);
  color: var(--sgs-gold);
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amount-btn:active {
  transform: scale(0.9);
  border-color: var(--sgs-gold);
}

.amount-display {
  font-size: 36px;
  font-weight: 800;
  color: var(--sgs-gold-light);
  min-width: 80px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.amount-display.negative {
  color: var(--sgs-red-bright);
}

.amount-input {
  width: 96px;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(212, 175, 55, 0.35);
  border-radius: 0;
  color: inherit;
  font-size: 36px;
  font-weight: 800;
  font-family: inherit;
  text-align: center;
  padding: 0 4px;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.amount-input:focus {
  border-bottom-color: var(--sgs-gold);
}

/* ===== 玩家管理 ===== */
.player-manage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.player-manage-item:last-child {
  border-bottom: none;
}

.player-manage-info {
  flex: 1;
}

.player-manage-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--sgs-text);
}

.player-manage-stats {
  font-size: 12px;
  color: var(--sgs-text-dim);
  margin-top: 2px;
}

.add-player-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.add-player-row .form-input {
  flex: 1;
}

/* ===== 管理页子 Tab ===== */
.sub-tab-bar {
  display: flex;
  background: linear-gradient(135deg, var(--sgs-bg-card), var(--sgs-bg));
  border-radius: 12px;
  margin: 6px 0 16px;
  padding: 4px;
  gap: 4px;
}
.sub-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  color: var(--sgs-text-dim);
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.sub-tab.active {
  background: linear-gradient(135deg, var(--sgs-gold-dim), var(--sgs-gold));
  color: var(--sgs-bg-deep);
  font-weight: 700;
}

/* 回收站 */
.recycle-count {
  font-size: 12px;
  color: var(--sgs-text-dim);
  margin-left: 8px;
}
.recycle-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.recycle-item:last-child {
  border-bottom: none;
}
.recycle-item-icon {
  min-width: 56px;
  text-align: center;
  padding: 4px 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--sgs-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--sgs-gold);
}
.recycle-item-info {
  flex: 1;
  min-width: 0;
}
.recycle-item-name {
  font-size: 14px;
  color: var(--sgs-text);
  margin-bottom: 3px;
  word-break: break-all;
}
.recycle-item-meta {
  font-size: 11px;
  color: var(--sgs-text-dim);
}
.recycle-item-actions {
  display: flex;
  gap: 8px;
}

/* 操作日志 */
.log-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.log-item:last-child {
  border-bottom: none;
}
.log-action {
  min-width: 40px;
  text-align: center;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.log-action-create { background: #2d6a4f; }
.log-action-update { background: #4a6fa5; }
.log-action-delete { background: #8b5a2b; }
.log-action-restore { background: #40916c; }
.log-action-purge { background: #8b0000; }
.log-info {
  flex: 1;
  min-width: 0;
}
.log-detail {
  font-size: 13px;
  color: var(--sgs-text);
  line-height: 1.5;
  word-break: break-all;
}
.log-meta {
  font-size: 11px;
  color: var(--sgs-text-dim);
  margin-top: 2px;
}

/* ===== 底部导航 ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(0deg, rgba(13, 6, 6, 0.98) 0%, rgba(13, 6, 6, 0.95) 100%);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--sgs-border);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--sgs-text-dim);
  transition: color 0.2s;
  border: none;
  background: none;
  font-family: inherit;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s;
}

.nav-item span {
  font-size: 10px;
  letter-spacing: 1px;
}

.nav-item.active {
  color: var(--sgs-gold);
}

.nav-item.active svg {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(26, 13, 13, 0.95);
  border: 1px solid var(--sgs-gold);
  border-radius: 10px;
  padding: 14px 28px;
  color: var(--sgs-gold-light);
  font-size: 14px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
  letter-spacing: 2px;
  max-width: 80%;
  text-align: center;
}

.toast.show {
  opacity: 1;
}

.toast.error {
  border-color: var(--sgs-red);
  color: var(--sgs-red-bright);
  box-shadow: 0 0 30px rgba(184, 48, 48, 0.2);
}

.toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, transparent, var(--sgs-gold), transparent);
}

/* ===== 空状态 ===== */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--sgs-text-dim);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.empty-state-text {
  font-size: 14px;
  letter-spacing: 2px;
}

/* ===== 确认弹窗 ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 确认弹窗需高于其他业务弹窗（如村规/规则要点弹窗） */
#confirmModal.modal-overlay { z-index: 300; }

.modal-overlay.show {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.modal {
  background: var(--sgs-bg-card);
  border: 1px solid var(--sgs-border-strong);
  border-radius: var(--sgs-radius);
  padding: 24px 20px;
  width: 100%;
  max-width: 360px;
  animation: slideUp 0.28s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--sgs-gold);
  margin-bottom: 10px;
  text-align: center;
  letter-spacing: 2px;
}

.modal-text {
  font-size: 14px;
  color: var(--sgs-text);
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.6;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-actions .btn {
  flex: 1;
}

/* ===== 自定义滚动条 ===== */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #150a0a; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4a3a1a, #2a2210);
  border: 2px solid #150a0a;
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6a5525, #3a2e14); }
* { scrollbar-width: thin; scrollbar-color: #4a3a1a #150a0a; }

/* ===== 响应式 ===== */
@media (max-width: 380px) {
  .app-title { font-size: 17px; letter-spacing: 2px; }
  .app-title::before, .app-title::after { width: 14px; }
  .faction-grid { grid-template-columns: 1fr; }
  .winner-options { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 20px; }
  .player-avatar { width: 36px; height: 36px; font-size: 16px; }
  .points-num { font-size: 17px; }
}

/* ===== 登录界面 ===== */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background:
    radial-gradient(ellipse at center, #2a1010 0%, #0d0606 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.login-overlay.hidden {
  display: none;
}

.login-card {
  background: linear-gradient(135deg, #2a1212 0%, #1a0a0a 100%);
  border: 1px solid var(--sgs-gold);
  border-radius: 16px;
  padding: 36px 28px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.15), 0 8px 32px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--sgs-gold), transparent);
}

.login-card::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 52px;
  height: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns%3D'http://www.w3.org/2000/svg' viewBox%3D'0 0 64 64'%3E%3Crect x%3D'8' y%3D'8' width%3D'48' height%3D'48' rx%3D'6' fill%3D'none' stroke%3D'%23b03030' stroke-width%3D'3'/%3E%3Crect x%3D'15' y%3D'15' width%3D'34' height%3D'34' rx%3D'3' fill%3D'none' stroke%3D'%23b03030' stroke-width%3D'1'/%3E%3Ctext x%3D'32' y%3D'37' text-anchor%3D'middle' font-size%3D'20' fill%3D'%23b03030' font-family%3D'Kaiti%2CSTKaiti%2Cserif' font-weight%3D'bold'%3E%E5%9B%BD%E6%88%98%3C/text%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.8;
  pointer-events: none;
}

.login-emblem {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns%3D'http://www.w3.org/2000/svg' viewBox%3D'0 0 64 64' fill%3D'none' stroke%3D'%23d4af37' stroke-width%3D'2.2' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M32 5 57 15v17c0 13.5-10.5 23.5-25 27.5C17.5 55.5 7 45.5 7 32V15Z'/%3E%3Cpath d%3D'M32 13 50 20v12c0 9.5-7.5 16.5-18 19.5C21.5 48.5 14 41.5 14 32V20Z' stroke-opacity%3D'0.45'/%3E%3Ctext x%3D'32' y%3D'31' text-anchor%3D'middle' font-size%3D'15' fill%3D'%23d4af37' font-family%3D'Kaiti%2CSTKaiti%2Cserif' font-weight%3D'bold'%3E%E5%9B%BD%3C/text%3E%3Ctext x%3D'32' y%3D'45' text-anchor%3D'middle' font-size%3D'11' fill%3D'%23d4af37' font-family%3D'Kaiti%2CSTKaiti%2Cserif'%3E%E6%88%98%3C/text%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.35));
}

.login-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--sgs-gold);
  letter-spacing: 6px;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 13px;
  color: var(--sgs-text-dim);
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.login-divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sgs-gold-dim), transparent);
  margin: 0 auto 24px;
}

.login-hint {
  font-size: 11px;
  color: var(--sgs-text-dim);
  margin-top: 16px;
  opacity: 0.6;
  letter-spacing: 1px;
}

.login-beian {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.55;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.login-beian a {
  color: var(--sgs-text-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.login-beian a:hover {
  color: var(--sgs-gold-light);
}
.beian-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  flex: none;
}
.page-footer-beian {
  padding: 20px 8px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: 0.5;
}
.page-footer-beian a {
  color: var(--sgs-text-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.page-footer-beian a:hover {
  color: var(--sgs-gold-light);
}

/* 顶部右侧区域 */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logout-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--sgs-border);
  background: var(--sgs-bg-card);
  color: var(--sgs-text-dim);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.logout-btn:hover {
  color: var(--sgs-gold);
  border-color: var(--sgs-gold-dim);
}

.logout-btn:active {
  transform: scale(0.92);
}

/* ===== 背景音乐按钮 ===== */
.music-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--sgs-border);
  background: var(--sgs-bg-card);
  color: var(--sgs-text-dim);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.music-btn:hover {
  color: var(--sgs-gold);
  border-color: var(--sgs-gold-dim);
}

.music-btn:active {
  transform: scale(0.92);
}

.music-btn.playing {
  color: var(--sgs-gold);
  border-color: var(--sgs-gold-dim);
  animation: musicPulse 2s ease-in-out infinite;
}

@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); }
}

/* ===== 卡牌图鉴页面 ===== */
.cardbook-search-bar {
  padding: 12px 16px 8px;
}

.cardbook-search-input {
  width: 100%;
  padding: 10px 16px;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-radius: 24px;
  color: var(--sgs-text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.cardbook-search-input:focus {
  border-color: var(--sgs-gold-dim);
}

.cardbook-search-input::placeholder {
  color: var(--sgs-text-dim);
}

.cardbook-tabs {
  display: flex;
  gap: 6px;
  padding: 4px 16px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cardbook-tabs::-webkit-scrollbar {
  display: none;
}

.cardbook-tab {
  flex-shrink: 0;
  padding: 6px 14px;
  background: var(--sgs-bg-card);
  border: 1px solid var(--sgs-border);
  border-radius: 16px;
  color: var(--sgs-text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.cardbook-tab.active {
  background: var(--sgs-gold-dim);
  color: var(--sgs-bg-deep);
  border-color: var(--sgs-gold);
  font-weight: 600;
}

.cardbook-tab:active {
  transform: scale(0.95);
}

.cardbook-info {
  padding: 4px 16px 8px;
  font-size: 12px;
  color: var(--sgs-text-dim);
}

.cardbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 16px 20px;
}

.cardbook-card {
  background: var(--sgs-bg-card);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid transparent;
}

.cardbook-card:active {
  transform: scale(0.97);
}

.cardbook-card-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--sgs-bg-input);
  position: relative;
}

.cardbook-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cardbook-card-img img:hover {
  transform: scale(1.05);
  transition: transform 0.3s;
}

.cardbook-no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--sgs-text-dim);
  font-size: 12px;
}

.cardbook-card-name {
  padding: 6px 8px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sgs-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardbook-card-info {
  padding: 0 8px 8px;
  font-size: 10px;
  color: var(--sgs-text-dim);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardbook-card.wei { border-color: rgba(74, 122, 184, 0.4); }
.cardbook-card.wei .cardbook-card-name { color: #6cb4ff; }
.cardbook-card.shu { border-color: rgba(194, 58, 43, 0.4); }
.cardbook-card.shu .cardbook-card-name { color: #ff8a7b; }
.cardbook-card.wu { border-color: rgba(62, 155, 71, 0.4); }
.cardbook-card.wu .cardbook-card-name { color: #7bdf8e; }
.cardbook-card.qun { border-color: rgba(142, 142, 142, 0.4); }
.cardbook-card.qun .cardbook-card-name { color: #c8c8c8; }
.cardbook-card.jin { border-color: rgba(154, 123, 208, 0.4); }
.cardbook-card.jin .cardbook-card-name { color: #c8b0f0; }
.cardbook-card.shen { border-color: rgba(255, 200, 50, 0.5); }
.cardbook-card.shen .cardbook-card-name { color: #ffd700; }
.cardbook-card.yexin { border-color: rgba(106, 45, 158, 0.5); }
.cardbook-card.yexin .cardbook-card-name { color: #b088d8; }
.cardbook-card.duo { border-color: rgba(100, 150, 200, 0.4); }
.cardbook-card.duo .cardbook-card-name { color: #8ac4ff; }
.cardbook-card.other { border-color: var(--sgs-border); }

.cardbook-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--sgs-text-dim);
  font-size: 14px;
}

/* ===== 卡牌详情弹窗 ===== */
.card-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.card-detail-overlay.show {
  display: flex;
}

.card-detail-modal {
  background: var(--sgs-bg-card);
  border: 1px solid var(--sgs-border-strong);
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}

.card-detail-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--sgs-text-dim);
  cursor: pointer;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
}

/* 武将排行同名卡选择弹窗 */
.hero-picker-head {
  padding: 22px 20px 6px;
  text-align: center;
}

.hero-picker-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--sgs-gold-light);
}

.hero-picker-sub {
  font-size: 12px;
  color: var(--sgs-text-dim);
  margin-top: 4px;
}

.hero-picker-list {
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.hero-picker-item:hover {
  border-color: var(--sgs-gold);
  background: rgba(212, 175, 55, 0.1);
}

.hero-picker-item.wei { border-left: 3px solid var(--sgs-wei); }
.hero-picker-item.shu { border-left: 3px solid var(--sgs-shu); }
.hero-picker-item.wu { border-left: 3px solid var(--sgs-wu); }
.hero-picker-item.qun { border-left: 3px solid #8e8e8e; }
.hero-picker-item.jin { border-left: 3px solid #9a7bd0; }
.hero-picker-item.shen { border-left: 3px solid #ffc832; }
.hero-picker-item.yexin { border-left: 3px solid #6a2d9e; }
.hero-picker-item.duo { border-left: 3px solid #6496c8; }

.hero-picker-img {
  width: 64px;
  height: 88px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sgs-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--sgs-text-dim);
}

.hero-picker-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-picker-noimg {
  font-size: 11px;
  color: var(--sgs-text-dim);
}

.hero-picker-info {
  flex: 1;
  min-width: 0;
}

.hero-picker-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--sgs-text);
}

.hero-picker-meta {
  font-size: 12px;
  color: var(--sgs-text-dim);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 军令随机抽取 ===== */
/* 卡片详情/同名选择弹窗必须盖过军令抽取弹窗，避免从军令点开详情时被遮挡 */
#cardDetailOverlay,
#heroCardPickerOverlay {
  z-index: 2000;
}

.junling-draw-modal {
  max-width: 640px;
}

.junling-draw-head {
  padding: 24px 20px 4px;
  text-align: center;
}

.junling-draw-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--sgs-gold-light);
  letter-spacing: 4px;
}

.junling-draw-sub {
  font-size: 12px;
  color: var(--sgs-text-dim);
  margin-top: 4px;
}

.junling-draw-count-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px 6px;
}

.junling-draw-count-label {
  font-size: 13px;
  color: var(--sgs-text-dim);
}

.junling-draw-count-options {
  display: flex;
  gap: 8px;
}

.junling-count-opt {
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  color: var(--sgs-text-dim);
  cursor: pointer;
  transition: all 0.15s;
}

.junling-count-opt.active {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--sgs-gold);
  color: var(--sgs-gold-light);
  font-weight: 700;
}

.junling-count-opt:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.junling-token-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px 20px 8px;
}

.junling-token {
  position: relative;
  height: 190px;
  cursor: pointer;
  perspective: 900px;
  transition: transform 0.15s;
}

.junling-token:hover {
  transform: translateY(-3px);
}

.junling-token.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.junling-token-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s;
}

.junling-token.revealed .junling-token-inner {
  transform: rotateY(180deg);
}

.junling-token-back,
.junling-token-face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.junling-token-back {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(212, 175, 55, 0.25), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(120, 30, 30, 0.55), transparent 60%),
    linear-gradient(160deg, #3a1210, #1c0908);
  border: 2px solid rgba(212, 175, 55, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.junling-token-back::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
}

.junling-back-mark {
  font-size: 64px;
  font-weight: 900;
  color: rgba(212, 175, 55, 0.85);
  font-family: 'STKaiti', 'KaiTi', serif;
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.4);
}

.junling-back-label {
  font-size: 13px;
  letter-spacing: 8px;
  color: rgba(212, 175, 55, 0.65);
}

.junling-token.selected {
  box-shadow: 0 0 0 3px var(--sgs-gold), 0 6px 18px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
}

.junling-token.selected .junling-token-back {
  border-color: var(--sgs-gold);
}

.junling-token-face {
  transform: rotateY(180deg);
  background: var(--sgs-bg);
  border: 2px solid var(--sgs-border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.junling-token-face.wei { border-color: rgba(74,122,184,0.5); }
.junling-token-face.shu { border-color: rgba(194,58,43,0.5); }
.junling-token-face.wu { border-color: rgba(62,155,71,0.5); }
.junling-token-face.qun { border-color: rgba(142,142,142,0.5); }
.junling-token-face.jin { border-color: rgba(154,123,208,0.5); }
.junling-token-face.junling { border-color: rgba(212,175,55,0.5); }

.junling-token-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.junling-token-face-noimg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--sgs-gold-light);
  padding: 0 8px;
  text-align: center;
}

.junling-token-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sgs-text);
  background: linear-gradient(transparent, rgba(13, 6, 6, 0.92));
  text-align: center;
}

.junling-draw-hint {
  text-align: center;
  font-size: 12px;
  color: var(--sgs-text-dim);
  padding: 8px 20px 4px;
  min-height: 18px;
}

.junling-draw-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px 22px;
}

.card-detail-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px 20px;
}

.card-detail-content.wei { border-top: 3px solid var(--sgs-wei); }
.card-detail-content.shu { border-top: 3px solid var(--sgs-shu); }
.card-detail-content.wu { border-top: 3px solid var(--sgs-wu); }
.card-detail-content.qun { border-top: 3px solid var(--sgs-qun); }
.card-detail-content.jin { border-top: 3px solid var(--sgs-jin); }
.card-detail-content.shen { border-top: 3px solid #ffc832; }
.card-detail-content.yexin { border-top: 3px solid var(--sgs-yexin); }
.card-detail-content.duo { border-top: 3px solid #6498c8; }

.card-detail-img {
  position: relative;
  width: min(78%, 420px);
  border-radius: 10px;
  overflow: hidden;
  background: var(--sgs-bg-input);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  touch-action: none;
}

.card-detail-img img {
  width: 100%;
  display: block;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.card-detail-head {
  width: 100%;
  text-align: center;
  margin-top: 14px;
}

.card-detail-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--sgs-gold);
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.card-detail-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.card-detail-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.card-detail-tag.wei { background: rgba(74, 122, 184, 0.25); color: #6cb4ff; }
.card-detail-tag.shu { background: rgba(194, 58, 43, 0.25); color: #ff8a7b; }
.card-detail-tag.wu { background: rgba(62, 155, 71, 0.25); color: #7bdf8e; }
.card-detail-tag.qun { background: rgba(142, 142, 142, 0.25); color: #c8c8c8; }
.card-detail-tag.jin { background: rgba(154, 123, 208, 0.25); color: #c8b0f0; }
.card-detail-tag.shen { background: rgba(255, 200, 50, 0.25); color: #ffd700; }
.card-detail-tag.yexin { background: rgba(106, 45, 158, 0.3); color: #b088d8; }
.card-detail-tag.duo { background: rgba(100, 150, 200, 0.25); color: #8ac4ff; }
.card-detail-tag.cat { background: var(--sgs-bg-input); color: var(--sgs-text-dim); }
.card-detail-tag.sub { background: var(--sgs-bg-input); color: var(--sgs-text-dim); }

.card-detail-toggle {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 22px;
  border-radius: 18px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--sgs-gold-dim);
  color: var(--sgs-gold-light);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}

.card-detail-toggle:hover {
  background: rgba(212, 175, 55, 0.22);
}

.card-detail-toggle-arrow {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.25s;
}

.card-detail-toggle.open .card-detail-toggle-arrow {
  transform: rotate(180deg);
}

.card-detail-body {
  width: 100%;
  text-align: left;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--sgs-border-strong);
  animation: fadeIn 0.28s ease;
}

.card-detail-label {
  font-size: 12px;
  color: var(--sgs-text-dim);
  margin-bottom: 6px;
}

.skill-item {
  margin-bottom: 10px;
}

.skill-item:last-child {
  margin-bottom: 0;
}

.skill-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sgs-gold-light);
  margin-bottom: 3px;
}

.skill-item-desc {
  font-size: 12px;
  color: var(--sgs-text);
  line-height: 1.6;
}

@media (max-width: 400px) {
  .cardbook-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .card-detail-img {
    width: min(84%, 300px);
  }
}

/* 双势力卡牌 */
.cardbook-card.duo {
  border-color: linear-gradient(135deg, var(--sgs-wei), var(--sgs-shu));
  background: linear-gradient(135deg, rgba(74,122,184,0.1), rgba(62,155,71,0.1));
}
.card-detail-tag.duo {
  background: linear-gradient(135deg, var(--sgs-wei), var(--sgs-wu));
  color: #fff;
}

/* 游戏牌卡牌 */
.cardbook-card.game {
  border-color: var(--sgs-gold-dim);
}
.card-detail-tag.game {
  background: var(--sgs-gold-dim);
  color: #fff;
}

/* 装备牌卡牌 */
.cardbook-card.equip {
  border-color: var(--sgs-text-dim);
}
.card-detail-tag.equip {
  background: var(--sgs-text-dim);
  color: var(--sgs-bg);
}

/* ===== 排行榜排序栏 ===== */
.sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
}

.sort-fields {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
}

.sort-pill {
  padding: 4px 7px;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-radius: 14px;
  color: var(--sgs-text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.sort-pill:active {
  transform: scale(0.95);
}

.sort-pill.active {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--sgs-gold);
  color: var(--sgs-gold-light);
  font-weight: 600;
}

.sort-order-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-radius: 14px;
  color: var(--sgs-text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  flex-shrink: 0;
  white-space: nowrap;
}

.sort-order-btn:active {
  transform: scale(0.95);
}

.sort-order-btn.asc {
  border-color: var(--sgs-gold-dim);
  color: var(--sgs-gold-light);
}

.sort-order-arrow {
  font-size: 14px;
  font-weight: 700;
  color: var(--sgs-gold);
}

.player-meta .sorted-field {
  color: var(--sgs-gold-light);
  font-weight: 700;
}

/* 按积分排序时高亮积分数字 */
.points-num.sorted-field {
  background: rgba(212, 175, 55, 0.15);
  padding: 4px 10px;
  border-radius: 10px;
}

/* ===== 赏罚切换开关 ===== */
.reward-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.reward-toggle-track {
  display: block;
  width: 48px;
  height: 24px;
  border-radius: 12px;
  position: relative;
  transition: background 0.2s;
}

.reward-toggle-track.left { background: rgba(74, 154, 74, 0.3); }
.reward-toggle-track.right { background: rgba(224, 64, 64, 0.3); }

.reward-toggle-thumb {
  position: absolute;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: left 0.2s;
}

.reward-toggle-thumb.left {
  left: 3px;
  background: var(--sgs-green);
}

.reward-toggle-thumb.right {
  left: 27px;
  background: var(--sgs-red-bright);
}

/* ===== 规则要点 ===== */
.cardbook-toolbar {
  padding: 4px 16px 10px;
  display: flex;
  justify-content: flex-end;
}

.rules-modal {
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.rules-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 4px;
}

.rules-loading {
  color: var(--sgs-text-dim);
  text-align: center;
  padding: 30px 0;
}

.rule-item {
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.rule-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.rule-item-no {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sgs-gold-dim);
  color: var(--sgs-bg-deep);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rule-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sgs-gold-light);
}

.rule-item-content {
  font-size: 13px;
  color: var(--sgs-text);
  line-height: 1.7;
}

.rule-item-source {
  font-size: 11px;
  color: var(--sgs-text-dim);
  margin-top: 6px;
  opacity: 0.7;
}

/* ===== 卡牌详情缩放 ===== */
.card-detail-img {
  position: relative;
  touch-action: none;
  overflow: hidden;
}

.card-detail-img img {
  width: 100%;
  display: block;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.card-detail-zoom-hint {
  margin: 8px auto 0;
  font-size: 11px;
  color: var(--sgs-text-dim);
  text-align: center;
  pointer-events: none;
}

/* ===== 新增分类配色 ===== */
.cardbook-card.junling { border-color: rgba(212, 175, 55, 0.5); }
.cardbook-card.junling .cardbook-card-name { color: var(--sgs-gold-light); }
.card-detail-tag.junling { background: rgba(212, 175, 55, 0.25); color: var(--sgs-gold-light); }
.card-detail-content.junling { border-top: 3px solid var(--sgs-gold); }

.cardbook-card.biaoji { border-color: rgba(170, 170, 220, 0.5); }
.cardbook-card.biaoji .cardbook-card-name { color: #b8b8e8; }
.card-detail-tag.biaoji { background: rgba(170, 170, 220, 0.25); color: #b8b8e8; }
.card-detail-content.biaoji { border-top: 3px solid #a0a0d0; }

.cardbook-card.shijian { border-color: rgba(230, 150, 90, 0.5); }
.cardbook-card.shijian .cardbook-card-name { color: #f0a870; }
.card-detail-tag.shijian { background: rgba(230, 150, 90, 0.25); color: #f0a870; }
.card-detail-content.shijian { border-top: 3px solid #e6965a; }

.cardbook-card.exclusive { border-color: rgba(94, 195, 210, 0.5); }
.cardbook-card.exclusive .cardbook-card-name { color: #6fd8e5; }
.card-detail-tag.exclusive { background: rgba(94, 195, 210, 0.25); color: #6fd8e5; }
.card-detail-content.exclusive { border-top: 3px solid #4fc4d4; }

.card-detail-tag.hp {
  background: var(--sgs-bg-input);
  color: var(--sgs-text-dim);
  border: 1px solid var(--sgs-border);
}

/* ===== 卡牌图片全屏预览（参考小程序 wx.previewImage） ===== */
.img-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

.img-preview-overlay.show {
  display: flex;
}

.img-preview-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
}

.img-preview-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.img-preview-wrap {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  touch-action: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-preview-wrap img {
  max-width: 100vw;
  max-height: 100vh;
  display: block;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.img-preview-wrap img.dragging {
  transition: none;
  cursor: grabbing;
}

.img-preview-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.45);
  padding: 5px 16px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

/* ===== 村规要点 / 赏罚规则 / 卡牌上传 ===== */
.village-rule-form,
.reward-rule-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sgs-border);
}

.village-rule-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ===== 赏罚二级页面入口 ===== */
.reward-subpage-entry {
  background: linear-gradient(135deg, var(--sgs-bg-card) 0%, #221010 100%);
  border: 1px solid var(--sgs-border);
  border-radius: var(--sgs-radius);
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.reward-subpage-entry:hover {
  border-color: var(--sgs-border-strong);
}

.reward-subpage-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sgs-gold);
  flex-shrink: 0;
}
.reward-subpage-icon svg { width: 20px; height: 20px; }

.reward-subpage-text { flex: 1; }

.reward-subpage-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sgs-gold);
}

.reward-subpage-desc {
  font-size: 12px;
  color: var(--sgs-text-dim);
  margin-top: 2px;
}

.reward-subpage-arrow {
  color: var(--sgs-gold-dim);
  font-size: 20px;
  flex-shrink: 0;
}

.reward-rule-row {
  display: flex;
  gap: 8px;
}

.reward-rule-row .form-input {
  flex: 1;
}

.rule-item-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.rule-item-actions .btn {
  padding: 2px 10px;
  font-size: 12px;
}

.card-detail-upload-btn {
  margin: 10px auto 0;
  display: block;
}

.reward-rule-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reward-rule-item:last-child {
  border-bottom: none;
}

.reward-rule-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.reward-rule-badge.奖励 {
  background: rgba(74, 154, 74, 0.25);
  color: var(--sgs-green);
}

.reward-rule-badge.惩罚 {
  background: rgba(224, 64, 64, 0.25);
  color: var(--sgs-red-bright);
}

.reward-rule-info {
  flex: 1;
  min-width: 0;
}

.reward-rule-name {
  font-size: 13px;
  color: var(--sgs-text);
}

.reward-rule-desc {
  font-size: 11px;
  color: var(--sgs-text-dim);
  margin-top: 2px;
}

/* ===== 武将输入（录入/编辑，统一区块） ===== */
.hero-edits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-radius: var(--sgs-radius);
  padding: 10px 12px;
}

.hero-edits-empty {
  font-size: 11px;
  color: var(--sgs-text-dim);
  padding: 2px 0;
}

.hero-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hero-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.hero-group-header.wei { color: var(--sgs-wei); }
.hero-group-header.shu { color: var(--sgs-shu); }
.hero-group-header.wu { color: var(--sgs-wu); }
.hero-group-header.qun { color: var(--sgs-qun); }
.hero-group-header.jin { color: var(--sgs-jin); }
.hero-group-header.yexin { color: var(--sgs-yexin); }

.hero-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-edit-name {
  font-size: 11px;
  color: var(--sgs-text);
  min-width: 56px;
  text-align: right;
  flex-shrink: 0;
}

.hero-edit-tag {
  font-size: 10px;
  flex-shrink: 0;
  opacity: 0.75;
}
.hero-edit-tag.main { color: var(--sgs-gold-dim); }
.hero-edit-tag.deputy { color: var(--sgs-text-dim); }

.hero-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.hero-edit-input {
  width: 100%;
  height: 30px;
  background: #1f1111;
  border: 1px solid var(--sgs-border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--sgs-text);
  outline: none;
  box-sizing: border-box;
}

.hero-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #241515;
  border: 1px solid var(--sgs-border);
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.hero-suggest.show {
  display: block;
}
.hero-suggest-item {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--sgs-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-suggest-item:hover {
  background: rgba(212, 175, 55, 0.12);
  color: var(--sgs-gold-light);
}

.hero-edit-input:focus {
  border-color: var(--sgs-gold-dim);
}

.hero-edit-input::placeholder {
  color: var(--sgs-text-dim);
  opacity: 0.6;
}

.game-faction-tag .fplayers em.fhero {
  font-style: normal;
  font-size: 10px;
  color: var(--sgs-text-dim);
  opacity: 0.75;
  margin-left: 1px;
}

/* ===== 复盘时间范围 ===== */
.review-range-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--sgs-bg-card);
  border: 1px solid var(--sgs-border-strong);
  border-radius: var(--sgs-radius);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.review-range-label {
  font-size: 12px;
  color: var(--sgs-text-dim);
}

.review-range-input {
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--sgs-text);
  outline: none;
  color-scheme: dark;
}

.review-range-input:focus {
  border-color: var(--sgs-gold-dim);
}

.review-range-hint {
  font-size: 11px;
  color: var(--sgs-text-dim);
  opacity: 0.7;
}

/* ===== 复盘结果弹窗 ===== */
.review-modal,
.game-edit-modal {
  max-width: 620px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.review-modal .modal-body,
.game-edit-modal .modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.review-modal .modal-title {
  text-align: left;
}

.review-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.review-summary-item {
  flex: 1;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-summary-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--sgs-gold-light);
}

.review-summary-label {
  font-size: 11px;
  color: var(--sgs-text-dim);
}

.review-section {
  margin-bottom: 16px;
}

.review-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sgs-gold);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.review-faction-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-faction-chip {
  padding: 3px 10px;
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-radius: 14px;
  font-size: 12px;
  color: var(--sgs-text);
}

.review-games {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
}

.review-game-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 6px;
  background: var(--sgs-bg-input);
  border-radius: 6px;
}

.review-game-time {
  color: var(--sgs-text-dim);
}

.review-game-result {
  color: var(--sgs-gold-light);
}

.review-game-factions {
  flex: 1;
  margin: 0 8px;
  color: var(--sgs-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== AI 复盘 ===== */
.history-title-actions {
  display: flex;
  gap: 8px;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ai-review-modal {
  max-width: 680px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.ai-review-modal .modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.ai-review-modal .modal-title {
  text-align: left;
}

.ai-review-text {
  background: var(--sgs-bg-input);
  border: 1px solid var(--sgs-border);
  border-left: 3px solid var(--sgs-gold);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  line-height: 1.75;
  font-size: 13px;
  color: var(--sgs-text);
}

.ai-review-text h4,
.ai-review-text h5,
.ai-review-text h6 {
  color: var(--sgs-gold-light);
  margin: 10px 0 6px;
  font-weight: 700;
  letter-spacing: 1px;
}

.ai-review-text h4 { font-size: 16px; }
.ai-review-text h5 { font-size: 14px; }
.ai-review-text h6 { font-size: 13px; }

.ai-review-text p {
  margin: 6px 0;
}

.ai-review-text ul,
.ai-review-text ol {
  margin: 6px 0;
  padding-left: 20px;
}

.ai-review-text li {
  margin: 3px 0;
}

.ai-review-text blockquote {
  margin: 8px 0;
  padding: 6px 12px;
  border-left: 3px solid var(--sgs-border-strong);
  color: var(--sgs-text-dim);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}

.ai-review-text strong {
  color: var(--sgs-gold-light);
}

.ai-review-text em {
  color: var(--sgs-gold);
}

.ai-review-banner {
  font-size: 11px;
  color: var(--sgs-text-dim);
  opacity: 0.75;
  margin: -8px 0 14px;
  text-align: right;
}

/* ===== 排行行（武将胜率/复盘共用） ===== */
.rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--sgs-bg-input);
  margin-bottom: 5px;
  cursor: pointer;
  transition: background 0.15s;
}

.rank-row:hover {
  background: rgba(212, 175, 55, 0.12);
}

.rank-row:active {
  transform: scale(0.995);
}

/* 前三名英雄化：金/银/铜淡彩底 + 左缘高亮条 */
.rank-row.rank-top-1 {
  background: linear-gradient(90deg, rgba(240, 208, 96, 0.16) 0%, rgba(240, 208, 96, 0.05) 42%, var(--sgs-bg-input) 100%);
  box-shadow: inset 2px 0 0 #f0d060;
}
.rank-row.rank-top-2 {
  background: linear-gradient(90deg, rgba(210, 210, 210, 0.12) 0%, rgba(210, 210, 210, 0.04) 42%, var(--sgs-bg-input) 100%);
  box-shadow: inset 2px 0 0 #c8c8c8;
}
.rank-row.rank-top-3 {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.14) 0%, rgba(205, 127, 50, 0.04) 42%, var(--sgs-bg-input) 100%);
  box-shadow: inset 2px 0 0 #cd7f32;
}
.rank-row.rank-top-1 .rank-no { transform: scale(1.08); }
.rank-row.rank-top-1 .rank-name { color: var(--sgs-gold-light); font-weight: 700; }

/* 武将排行头像（卡牌图裁上部头像区，势力色描边） */
.hero-avatar {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--sgs-gold-dim);
  background: linear-gradient(135deg, #3a1c1c, #220e0e);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  display: block;
  transition: transform 0.25s ease;
}
.rank-row:hover .hero-avatar img { transform: scale(1.07); }
.hero-avatar.wei { border-color: var(--sgs-wei); }
.hero-avatar.shu { border-color: var(--sgs-shu); }
.hero-avatar.wu { border-color: var(--sgs-wu); }
.hero-avatar.qun { border-color: var(--sgs-qun); }
.hero-avatar.jin { border-color: var(--sgs-jin); }
.hero-avatar.yexin { border-color: var(--sgs-yexin); }
.hero-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--sgs-gold-light);
}
.hero-avatar-fallback.wei { color: #8fb4e0; }
.hero-avatar-fallback.shu { color: #e88a7e; }
.hero-avatar-fallback.wu { color: #86c48e; }
.hero-avatar-fallback.jin { color: #c3a9e8; }
.hero-avatar-fallback.yexin { color: #b586de; }

/* 武将势力徽章（三国杀势力色圆章） */
.faction-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.faction-badge.wei { background: var(--sgs-wei); }
.faction-badge.shu { background: var(--sgs-shu); }
.faction-badge.wu { background: var(--sgs-wu); }
.faction-badge.qun { background: var(--sgs-qun); }
.faction-badge.jin { background: var(--sgs-jin); }
.faction-badge.yexin { background: var(--sgs-yexin); }

.rank-no {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: transform 0.2s ease;
}

.rank-name {
  font-size: 13px;
  color: var(--sgs-text);
  min-width: 64px;
  flex-shrink: 0;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
}

.rank-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sgs-gold-dim), var(--sgs-gold));
  border-radius: 3px;
  transition: width 0.5s ease;
}

.rank-meta {
  font-size: 11px;
  color: var(--sgs-text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.rank-meta span { margin-right: 6px; }
.rank-meta span:last-child { margin-right: 0; }
.review-sort-bar { margin: -2px 0 10px; }

/* ===== 对局编辑弹窗 ===== */
.game-edit-modal .modal-body {
  padding: 4px 2px 12px;
}

.game-edit-modal .faction-grid {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 640px) {
  .game-edit-modal .faction-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.review-modal .modal-actions,
.game-edit-modal .modal-actions {
  margin-top: 12px;
}

/* =====================================================================
   战绩首页质感升级：切角统计卡 / 最近一战高光卡 / 势力格局 /
   玩家冠军台 / 武将胜率条势力色
   ===================================================================== */

/* ---- D3：统计卡切角金边 ---- */
.stat-item {
  position: relative;
  background: linear-gradient(135deg, rgba(240, 208, 96, 0.55), rgba(212, 175, 55, 0.12) 32%, rgba(212, 175, 55, 0.12) 68%, rgba(240, 208, 96, 0.42));
  border: none;
  border-radius: 0;
  padding: 1px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.stat-item-inner {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: 14px 8px 12px;
  text-align: center;
  background: linear-gradient(160deg, #2f1515 0%, #1d0c0c 100%);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}
.stat-sub {
  margin-top: 8px;
  min-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.rm-label {
  font-size: 10px;
  color: var(--sgs-text-dim);
  margin-right: 2px;
  letter-spacing: 0.5px;
}
.rm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.rm-dot.f-wei { background: var(--sgs-wei); }
.rm-dot.f-shu { background: var(--sgs-shu); }
.rm-dot.f-wu { background: var(--sgs-wu); }
.rm-dot.f-qun { background: var(--sgs-qun); }
.rm-dot.f-jin { background: var(--sgs-jin); }
.rm-dot.f-yexin { background: var(--sgs-yexin); }

/* 参战人数卡：玩家首字叠层 */
.stat-stack {
  position: absolute;
  right: 10px;
  bottom: 9px;
  display: flex;
  align-items: center;
}
.ps-dot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  margin-left: -6px;
  border: 1.5px solid #231010;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.ps-dot:first-child { margin-left: 0; }
.ps-dot.pf-wei { background: linear-gradient(135deg, #5f8fd0, var(--sgs-wei)); }
.ps-dot.pf-shu { background: linear-gradient(135deg, #d95745, var(--sgs-shu)); }
.ps-dot.pf-wu { background: linear-gradient(135deg, #57b561, var(--sgs-wu)); }
.ps-dot.pf-qun { background: linear-gradient(135deg, #a8a8a8, var(--sgs-qun)); }
.ps-dot.pf-jin { background: linear-gradient(135deg, #b498e0, var(--sgs-jin)); }
.ps-dot.pf-yexin { background: linear-gradient(135deg, #8a4fc4, var(--sgs-yexin)); }
.ps-more {
  margin-left: 4px;
  font-size: 10px;
  color: var(--sgs-gold);
  font-weight: 700;
}

/* ---- C：最近一局高光战报卡 ---- */
.latest-card {
  margin-bottom: 14px;
  cursor: pointer;
  border-radius: var(--sgs-radius);
  animation: sgs-rise 0.5s ease both;
}
.latest-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--sgs-radius);
  border: 1px solid var(--sgs-border-strong);
  background:
    linear-gradient(100deg, rgba(212, 175, 55, 0.16) 0%, rgba(42, 18, 18, 0.75) 52%, rgba(42, 18, 18, 0.35) 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: transform 0.15s ease;
}
.latest-inner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sgs-gold-light), var(--sgs-gold-dim));
}
.latest-card:active .latest-inner { transform: scale(0.992); }
.latest-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.latest-badge.f-wei { background: radial-gradient(circle at 32% 28%, #6f9bd8, var(--sgs-wei)); box-shadow: 0 0 18px rgba(74, 122, 184, 0.55); }
.latest-badge.f-shu { background: radial-gradient(circle at 32% 28%, #dd604f, var(--sgs-shu)); box-shadow: 0 0 18px rgba(194, 58, 43, 0.55); }
.latest-badge.f-wu { background: radial-gradient(circle at 32% 28%, #5cbb68, var(--sgs-wu)); box-shadow: 0 0 18px rgba(62, 155, 71, 0.55); }
.latest-badge.f-qun { background: radial-gradient(circle at 32% 28%, #b0b0b0, var(--sgs-qun)); box-shadow: 0 0 18px rgba(142, 142, 142, 0.5); }
.latest-badge.f-jin { background: radial-gradient(circle at 32% 28%, #b79ce4, var(--sgs-jin)); box-shadow: 0 0 18px rgba(154, 123, 208, 0.55); }
.latest-badge.f-yexin { background: radial-gradient(circle at 32% 28%, #9560cf, var(--sgs-yexin)); box-shadow: 0 0 18px rgba(106, 45, 158, 0.6); }
.latest-main { flex: 1; min-width: 0; }
.latest-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--sgs-gold-light);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.latest-tag {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--sgs-gold);
  border: 1px solid var(--sgs-border);
  padding: 1px 8px;
  border-radius: 9px;
  background: rgba(212, 175, 55, 0.08);
}
.latest-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lc-chip {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 11px;
  border: 1px solid;
  background: rgba(0, 0, 0, 0.25);
}
.lc-chip.f-wei { border-color: rgba(74, 122, 184, 0.55); color: #9fc0e8; }
.lc-chip.f-shu { border-color: rgba(194, 58, 43, 0.55); color: #ec9a8e; }
.lc-chip.f-wu { border-color: rgba(62, 155, 71, 0.55); color: #93cf9b; }
.lc-chip.f-qun { border-color: rgba(142, 142, 142, 0.5); color: #c4c4c4; }
.lc-chip.f-jin { border-color: rgba(154, 123, 208, 0.55); color: #cbb8ec; }
.lc-chip.f-yexin { border-color: rgba(106, 45, 158, 0.7); color: #c79fec; }
.lc-chip.lc-win { color: #fff; font-weight: 700; }
.lc-chip.lc-win.f-wei { background: rgba(74, 122, 184, 0.9); border-color: #7fa5dc; }
.lc-chip.lc-win.f-shu { background: rgba(194, 58, 43, 0.9); border-color: #e07a6c; }
.lc-chip.lc-win.f-wu { background: rgba(62, 155, 71, 0.9); border-color: #74c17f; }
.lc-chip.lc-win.f-qun { background: rgba(142, 142, 142, 0.9); border-color: #c0c0c0; }
.lc-chip.lc-win.f-jin { background: rgba(154, 123, 208, 0.9); border-color: #c3a9e8; }
.lc-chip.lc-win.f-yexin { background: rgba(106, 45, 158, 0.95); border-color: #a87cd8; }
.latest-right { flex-shrink: 0; text-align: right; }
.latest-time { font-size: 12px; color: var(--sgs-text-dim); white-space: nowrap; }
.latest-go { font-size: 12px; color: var(--sgs-gold); margin-top: 6px; white-space: nowrap; }

/* ---- D1：六势力格局 ---- */
.fo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
}
.fo-row { display: flex; align-items: center; gap: 10px; }
.fo-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.fo-badge.f-wei { background: var(--sgs-wei); }
.fo-badge.f-shu { background: var(--sgs-shu); }
.fo-badge.f-wu { background: var(--sgs-wu); }
.fo-badge.f-qun { background: var(--sgs-qun); }
.fo-badge.f-jin { background: var(--sgs-jin); }
.fo-badge.f-yexin { background: var(--sgs-yexin); }
.fo-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: hidden;
}
.fo-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.7s ease;
}
.fo-fill.f-wei { background: linear-gradient(90deg, rgba(74, 122, 184, 0.45), var(--sgs-wei)); box-shadow: 0 0 8px rgba(74, 122, 184, 0.5); }
.fo-fill.f-shu { background: linear-gradient(90deg, rgba(194, 58, 43, 0.45), var(--sgs-shu)); box-shadow: 0 0 8px rgba(194, 58, 43, 0.5); }
.fo-fill.f-wu { background: linear-gradient(90deg, rgba(62, 155, 71, 0.45), var(--sgs-wu)); box-shadow: 0 0 8px rgba(62, 155, 71, 0.5); }
.fo-fill.f-qun { background: linear-gradient(90deg, rgba(142, 142, 142, 0.4), var(--sgs-qun)); }
.fo-fill.f-jin { background: linear-gradient(90deg, rgba(154, 123, 208, 0.45), var(--sgs-jin)); box-shadow: 0 0 8px rgba(154, 123, 208, 0.5); }
.fo-fill.f-yexin { background: linear-gradient(90deg, rgba(106, 45, 158, 0.5), var(--sgs-yexin)); box-shadow: 0 0 8px rgba(106, 45, 158, 0.55); }
.fo-count {
  width: 36px;
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--sgs-text);
}
.fo-count em { font-style: normal; font-size: 10px; font-weight: 400; color: var(--sgs-text-dim); margin-left: 1px; }
.fo-zero .fo-badge { opacity: 0.4; }
.fo-zero .fo-count { color: var(--sgs-text-dim); font-weight: 400; }
.card-title-sub {
  font-size: 12px;
  color: var(--sgs-text-dim);
  margin-left: 8px;
  font-weight: normal;
}

/* ---- 玩家势力色首字印章 + 冠军台 ---- */
.player-seal.pf-wei { background: linear-gradient(135deg, #5f8fd0, var(--sgs-wei)) !important; border-color: #7fa5dc; color: #fff; }
.player-seal.pf-shu { background: linear-gradient(135deg, #d95745, var(--sgs-shu)) !important; border-color: #e07a6c; color: #fff; }
.player-seal.pf-wu { background: linear-gradient(135deg, #57b561, var(--sgs-wu)) !important; border-color: #74c17f; color: #fff; }
.player-seal.pf-qun { background: linear-gradient(135deg, #a8a8a8, #6f6f6f) !important; border-color: #c0c0c0; color: #fff; }
.player-seal.pf-jin { background: linear-gradient(135deg, #b498e0, var(--sgs-jin)) !important; border-color: #c9b3ec; color: #fff; }
.player-seal.pf-yexin { background: linear-gradient(135deg, #8a4fc4, var(--sgs-yexin)) !important; border-color: #a87cd8; color: #fff; }
.player-avatar { position: relative; }
.player-crown {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 19px;
  height: 19px;
  fill: #f0d060;
  filter: drop-shadow(0 0 5px rgba(240, 208, 96, 0.9));
  z-index: 3;
}
.player-card.player-top-1 {
  border-color: rgba(240, 208, 96, 0.95);
  background: linear-gradient(135deg, rgba(240, 208, 96, 0.14) 0%, rgba(38, 16, 16, 0.95) 42%, #221010 100%);
  box-shadow:
    0 0 0 1px rgba(240, 208, 96, 0.35),
    0 0 28px rgba(240, 208, 96, 0.35),
    inset 0 0 24px rgba(240, 208, 96, 0.08);
}
.player-card.player-top-1 .player-name { color: var(--sgs-gold-light); }
.player-card.player-top-2 {
  border-color: rgba(220, 220, 220, 0.8);
  box-shadow: 0 0 20px rgba(200, 200, 200, 0.22), inset 0 0 18px rgba(200, 200, 200, 0.05);
}
.player-card.player-top-3 {
  border-color: rgba(220, 140, 60, 0.85);
  box-shadow: 0 0 20px rgba(205, 127, 50, 0.28), inset 0 0 18px rgba(205, 127, 50, 0.06);
}

/* ---- D2：武将胜率条势力色 / 常胜徽记 / 低迷弱化 ---- */
.rank-bar-fill.f-wei { background: linear-gradient(90deg, rgba(74, 122, 184, 0.4), var(--sgs-wei)); box-shadow: 0 0 8px rgba(74, 122, 184, 0.55); }
.rank-bar-fill.f-shu { background: linear-gradient(90deg, rgba(194, 58, 43, 0.4), var(--sgs-shu)); box-shadow: 0 0 8px rgba(194, 58, 43, 0.55); }
.rank-bar-fill.f-wu { background: linear-gradient(90deg, rgba(62, 155, 71, 0.4), var(--sgs-wu)); box-shadow: 0 0 8px rgba(62, 155, 71, 0.55); }
.rank-bar-fill.f-qun { background: linear-gradient(90deg, rgba(142, 142, 142, 0.35), var(--sgs-qun)); }
.rank-bar-fill.f-jin { background: linear-gradient(90deg, rgba(154, 123, 208, 0.4), var(--sgs-jin)); box-shadow: 0 0 8px rgba(154, 123, 208, 0.55); }
.rank-bar-fill.f-yexin { background: linear-gradient(90deg, rgba(106, 45, 158, 0.45), var(--sgs-yexin)); box-shadow: 0 0 8px rgba(106, 45, 158, 0.6); }
.rank-bar-fill.bar-low { background: linear-gradient(90deg, #4a4a4a, #777); box-shadow: none; }
.hero-medal {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1a0d0d;
  background: linear-gradient(135deg, #f5d97a, #c8972a);
  border-radius: 8px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 1px;
  box-shadow: 0 0 8px rgba(240, 208, 96, 0.55);
}
.rank-row.rank-low { opacity: 0.72; }
.rank-row.rank-low .rank-name { color: var(--sgs-text-dim); }

@media (max-width: 640px) {
  .fo-grid { grid-template-columns: 1fr; gap: 10px; }
  .latest-right { display: none; }
  .latest-badge { width: 40px; height: 40px; font-size: 19px; }
  .latest-inner { gap: 11px; padding: 12px; }
}