:root {
  --bg-main: #0a0f18;
  --bg-card: rgba(16, 20, 30, 0.94);
  --bg-input: rgba(8, 12, 20, 0.96);
  --text-primary: #e8dcc8;
  --text-secondary: #a09880;
  --gold: #d4a84b;
  --gold-light: #f0c860;
  --gold-dark: #8a5a20;
  --bronze: #b08050;
  --jade: #5a8a5a;
  --cinnabar: #c05040;
  --ink: #1a1a28;
  --glow-gold: 0 0 16px rgba(212, 168, 75, 0.35);
  --glow-strong: 0 0 28px rgba(240, 200, 96, 0.5);
  --font-display: "STKaiti", "KaiTi", "Microsoft YaHei", "SimSun", serif;
  --font-body: "Microsoft YaHei", "PingFang SC", "SimSun", serif;
  font-size: 16px;
}

* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--gold-dark) transparent !important;
}

body {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(212, 168, 75, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 65%, rgba(176, 128, 80, 0.06) 0%, transparent 35%),
    radial-gradient(ellipse at 40% 90%, rgba(90, 138, 90, 0.04) 0%, transparent 30%) !important;
  position: relative;
  overflow-x: hidden;
}

/* 浮动墨韵光点 */
body::before {
  content: "";
  position: fixed;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(212, 168, 75, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: inkFloat 15s ease-in-out infinite;
}

@keyframes inkFloat {
  0%   { top: 8%; left: 10%; transform: scale(1); }
  25%  { top: 55%; left: 78%; transform: scale(1.3); background: radial-gradient(circle, rgba(176, 128, 80, 0.18) 0%, transparent 70%); }
  50%  { top: 78%; left: 25%; transform: scale(0.9); background: radial-gradient(circle, rgba(90, 138, 90, 0.12) 0%, transparent 70%); }
  75%  { top: 18%; left: 70%; transform: scale(1.2); background: radial-gradient(circle, rgba(240, 200, 96, 0.12) 0%, transparent 70%); }
  100% { top: 8%; left: 10%; transform: scale(1); }
}

/* 第二光点 - 赤铜色 */
body::after {
  content: "";
  position: fixed;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(192, 80, 64, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: cinnabarFloat 18s ease-in-out infinite reverse;
}

@keyframes cinnabarFloat {
  0%   { top: 75%; left: 85%; transform: scale(1); }
  33%  { top: 15%; left: 20%; transform: scale(1.4); }
  66%  { top: 50%; left: 50%; transform: scale(0.8); }
  100% { top: 75%; left: 85%; transform: scale(1); }
}

p, div, span, li, a, td, th, label, button,
input, select, textarea, .form-title, .panel-title,
.tab-btn, .config-input, .config-select {
  font-size: inherit !important;
}

/* ===== 容器：鎏金边框 + 古韵光泽 ===== */
.panel,
div[class*="panel"],
div[class*="card"],
div[class*="container"],
.preview-card,
.talent-section,
.form-group {
  background: var(--bg-card) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background-image: linear-gradient(var(--bg-card), var(--bg-card)),
                    linear-gradient(135deg, var(--gold-dark), var(--gold), var(--bronze), var(--gold-dark)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: var(--glow-gold) !important;
  padding: 16px !important;
  margin: 8px 0 !important;
  animation: bronzeFlow 8s linear infinite;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

@keyframes bronzeFlow {
  0%   { background-image: linear-gradient(var(--bg-card), var(--bg-card)),
         linear-gradient(135deg, var(--gold-dark), var(--gold), var(--bronze), var(--gold-dark)); }
  33%  { background-image: linear-gradient(var(--bg-card), var(--bg-card)),
         linear-gradient(135deg, var(--bronze), var(--gold-dark), var(--gold), var(--bronze)); }
  66%  { background-image: linear-gradient(var(--bg-card), var(--bg-card)),
         linear-gradient(135deg, var(--gold), var(--bronze), var(--gold-dark), var(--gold)); }
  100% { background-image: linear-gradient(var(--bg-card), var(--bg-card)),
         linear-gradient(135deg, var(--gold-dark), var(--gold), var(--bronze), var(--gold-dark)); }
}

.panel:hover,
div[class*="card"]:hover,
.preview-card:hover {
  box-shadow: var(--glow-strong), 0 0 40px rgba(212, 168, 75, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* ===== 步骤指示器 ===== */
.step.active .step-circle {
  border-color: var(--gold-light) !important;
  color: var(--gold-light) !important;
  background: rgba(240, 200, 96, 0.1) !important;
  box-shadow: 0 0 12px rgba(240, 200, 96, 0.4) !important;
  animation: stepGlow 2s ease-in-out infinite;
}

@keyframes stepGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(240, 200, 96, 0.4); }
  50% { box-shadow: 0 0 22px rgba(240, 200, 96, 0.7), 0 0 8px rgba(212, 168, 75, 0.5); }
}

.step.done .step-circle {
  border-color: var(--jade) !important;
  color: var(--jade) !important;
  background: rgba(90, 138, 90, 0.1) !important;
}

.step.done .step-line { background: var(--jade) !important; }

/* ===== 时代卡片 ===== */
.era-card {
  background: var(--bg-card) !important;
  border: 2px solid rgba(212, 168, 75, 0.25) !important;
  border-radius: 10px !important;
  padding: 18px 12px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.era-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 0 18px rgba(212, 168, 75, 0.4) !important;
  transform: translateY(-3px) !important;
}

.era-card.selected {
  border-color: var(--gold-light) !important;
  background: rgba(212, 168, 75, 0.1) !important;
  box-shadow: 0 0 24px rgba(240, 200, 96, 0.5) !important;
}

.era-card .era-name {
  color: var(--gold-light) !important;
  font-weight: bold !important;
}

/* ===== 角色类型卡片 ===== */
.role-type-card {
  background: var(--bg-card) !important;
  border: 2px solid rgba(212, 168, 75, 0.25) !important;
  border-radius: 10px !important;
  padding: 22px 16px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.role-type-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 0 20px rgba(212, 168, 75, 0.45) !important;
  transform: translateY(-3px) !important;
}

.role-type-card.selected {
  border-color: var(--gold-light) !important;
  background: rgba(212, 168, 75, 0.1) !important;
  box-shadow: 0 0 28px rgba(240, 200, 96, 0.55) !important;
}

.role-type-card .rt-name {
  color: var(--gold-light) !important;
  font-weight: bold !important;
}

/* ===== 经典角色卡片 ===== */
.classic-card {
  background: var(--bg-card) !important;
  border: 2px solid rgba(212, 168, 75, 0.2) !important;
  border-radius: 8px !important;
  padding: 12px 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.classic-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 0 14px rgba(212, 168, 75, 0.35) !important;
  transform: translateY(-2px) !important;
}

.classic-card.selected {
  border-color: var(--gold-light) !important;
  background: rgba(212, 168, 75, 0.1) !important;
  box-shadow: 0 0 20px rgba(240, 200, 96, 0.5) !important;
}

.classic-card .cc-name {
  color: var(--gold-light) !important;
  font-weight: bold !important;
}

/* ===== 输入框 ===== */
input, select, textarea {
  background: var(--bg-input) !important;
  border: 1px solid rgba(176, 128, 80, 0.35) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  caret-color: var(--gold-light) !important;
  font-family: var(--font-body) !important;
  transition: all 0.3s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gold-light) !important;
  box-shadow: 0 0 14px rgba(240, 200, 96, 0.3), inset 0 0 8px rgba(212, 168, 75, 0.1) !important;
  animation: inputGoldenGlow 2.5s ease-in-out infinite;
}

@keyframes inputGoldenGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(240, 200, 96, 0.3), inset 0 0 8px rgba(212, 168, 75, 0.1); }
  50% { box-shadow: 0 0 22px rgba(240, 200, 96, 0.55), inset 0 0 12px rgba(212, 168, 75, 0.2); }
}

select option {
  background: #0d1520 !important;
  color: #e0d8c8 !important;
}

select option:hover, select option:checked {
  background: rgba(212, 168, 75, 0.2) !important;
  color: var(--gold-light) !important;
}

/* ===== 按钮通用 ===== */
.btn, button {
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  letter-spacing: 2px !important;
  font-weight: bold !important;
  transition: all 0.35s ease !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 主要按钮 */
.btn-primary {
  background: linear-gradient(135deg, #3a2010, #5a4020, #8a6a3a) !important;
  border: 1px solid var(--gold) !important;
  color: #f0e0c0 !important;
  text-shadow: 0 0 6px rgba(240, 200, 96, 0.4) !important;
  box-shadow: 0 0 12px rgba(212, 168, 75, 0.25) !important;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(240, 200, 96, 0.2),
    rgba(212, 168, 75, 0.3),
    rgba(240, 200, 96, 0.2),
    transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
  z-index: -1;
  animation: btnGoldShimmer 3.5s linear infinite;
}

@keyframes btnGoldShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.btn-primary:hover {
  background: linear-gradient(135deg, #5a3a18, #7a5028, #9a7a4a) !important;
  border-color: var(--gold-light) !important;
  color: #fff8e8 !important;
  box-shadow: 0 0 24px rgba(240, 200, 96, 0.55), 0 0 12px rgba(212, 168, 75, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* 次要按钮 */
.btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(176, 128, 80, 0.4) !important;
  color: var(--text-secondary) !important;
}

.btn-secondary:hover {
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  background: rgba(212, 168, 75, 0.08) !important;
  box-shadow: 0 0 12px rgba(212, 168, 75, 0.25) !important;
}

/* 内联按钮 */
.inline-btn {
  background: transparent !important;
  border: 1px solid rgba(176, 128, 80, 0.3) !important;
  color: var(--text-secondary) !important;
  border-radius: 4px !important;
  padding: 6px 14px !important;
  font-size: 0.82em !important;
  transition: all 0.3s ease !important;
}

.inline-btn:hover {
  border-color: var(--gold-light) !important;
  color: var(--gold-light) !important;
  box-shadow: 0 0 10px rgba(240, 200, 96, 0.3) !important;
}

/* ===== 掷骰子按钮 ===== */
.dice-btn {
  background: linear-gradient(135deg, #1a2838, #1a2a3a) !important;
  border: 2px solid #4a8aaa !important;
  color: #60b0d0 !important;
  font-weight: bold !important;
  letter-spacing: 2px !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  transition: all 0.3s ease !important;
}

.dice-btn:hover {
  border-color: #80c8e8 !important;
  color: #80d0f0 !important;
  box-shadow: 0 0 20px rgba(74, 138, 170, 0.5), 0 0 8px rgba(96, 176, 208, 0.3) !important;
}

/* ===== 天赋标签 ===== */
.talent-chip {
  border-radius: 20px !important;
  padding: 5px 12px !important;
  font-size: 0.82em !important;
  transition: all 0.3s ease !important;
}

.talent-chip.race-talent {
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  background: rgba(212, 168, 75, 0.1) !important;
  cursor: default !important;
}

.talent-chip.selected {
  border-color: var(--gold-light) !important;
  background: rgba(240, 200, 96, 0.12) !important;
  color: var(--gold-light) !important;
  box-shadow: 0 0 10px rgba(240, 200, 96, 0.3) !important;
}

.talent-chip.recommend {
  border-color: var(--jade) !important;
  color: var(--jade) !important;
}

.talent-chip.rolled {
  border-color: #4a8aaa !important;
  color: #60b0d0 !important;
  animation: diceChipPulse 1.2s ease-in-out infinite;
}

@keyframes diceChipPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(74, 138, 170, 0.4); }
  50% { box-shadow: 0 0 14px rgba(74, 138, 170, 0.8); }
}

.talent-chip:hover:not(.race-talent):not(.selected) {
  border-color: var(--gold) !important;
  transform: translateY(-1px) !important;
}

/* ===== 天赋分类标签 ===== */
.talent-category-tab {
  border-radius: 16px !important;
  padding: 5px 14px !important;
  font-size: 0.82em !important;
  transition: all 0.3s ease !important;
}

.talent-category-tab.active {
  border-color: var(--gold-light) !important;
  background: rgba(212, 168, 75, 0.12) !important;
  color: var(--gold-light) !important;
  box-shadow: 0 0 8px rgba(240, 200, 96, 0.3) !important;
}

.talent-category-tab:hover:not(.active) {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* ===== 五行选择器 ===== */
.element-option {
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  transition: all 0.3s ease !important;
}

.element-option.metal.selected {
  border-color: #e0e8f0 !important;
  background: #1a1a20 !important;
  color: #e0e8f0 !important;
  box-shadow: 0 0 14px rgba(192, 200, 208, 0.5) !important;
}

.element-option.wood.selected {
  border-color: #80c060 !important;
  background: #0a1a0a !important;
  color: #80c060 !important;
  box-shadow: 0 0 14px rgba(106, 154, 90, 0.5) !important;
}

.element-option.water.selected {
  border-color: #60b0d0 !important;
  background: #0a1a2a !important;
  color: #60b0d0 !important;
  box-shadow: 0 0 14px rgba(74, 138, 170, 0.5) !important;
}

.element-option.fire.selected {
  border-color: #e06040 !important;
  background: #2a1010 !important;
  color: #e06040 !important;
  box-shadow: 0 0 14px rgba(192, 80, 64, 0.5) !important;
}

.element-option.earth.selected {
  border-color: #d0a060 !important;
  background: #1a100a !important;
  color: #d0a060 !important;
  box-shadow: 0 0 14px rgba(176, 128, 80, 0.5) !important;
}

/* ===== 标题 ===== */
.panel-title, .header .title {
  font-family: var(--font-display) !important;
  color: var(--gold-light) !important;
  text-shadow: 0 0 12px rgba(240, 200, 96, 0.4) !important;
  letter-spacing: 3px !important;
  background: linear-gradient(180deg, #ffe8a0 0%, #f0c860 30%, #b08040 100%);
  background-size: 100% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  animation: titleGoldShine 3s ease-in-out infinite;
}

@keyframes titleGoldShine {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(240, 200, 96, 0.5)); }
  50% { filter: drop-shadow(0 0 18px rgba(240, 200, 96, 0.8)); }
}

/* ===== 游戏简介面板 ===== */
.intro-summary {
  color: var(--gold-light) !important;
  letter-spacing: 2px !important;
  transition: all 0.3s ease !important;
}

.intro-summary:hover {
  background: rgba(212, 168, 75, 0.08) !important;
}

.intro-content h3 {
  color: var(--gold-light) !important;
  text-shadow: 0 0 6px rgba(212, 168, 75, 0.3) !important;
}

.intro-content .tagline {
  color: var(--gold) !important;
  font-style: italic !important;
}

/* ===== 预览卡片 ===== */
.preview-card .pv-name {
  color: var(--gold-light) !important;
  text-shadow: 0 0 10px rgba(240, 200, 96, 0.4) !important;
}

.preview-card .pv-systems {
  color: var(--jade) !important;
  font-style: italic !important;
}

/* ===== Toast提示 ===== */
.toast {
  background: rgba(20, 16, 10, 0.95) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold-light) !important;
  box-shadow: 0 0 16px rgba(212, 168, 75, 0.4) !important;
  border-radius: 8px !important;
}

/* ===== 跳过按钮 ===== */
.skip-hint {
  color: rgba(240, 200, 96, 0.4) !important;
  text-shadow: 0 0 4px rgba(212, 168, 75, 0.3) !important;
  transition: color 0.3s ease !important;
}

.skip-hint:hover {
  color: rgba(240, 200, 96, 0.9) !important;
  text-shadow: 0 0 12px rgba(240, 200, 96, 0.6) !important;
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0f14; }
::-webkit-scrollbar-thumb {
  background: var(--gold-dark);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(212, 168, 75, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* ===== 选中文字 ===== */
::selection {
  background: rgba(212, 168, 75, 0.6);
  color: #0a0f14;
}
::-moz-selection {
  background: rgba(212, 168, 75, 0.6);
  color: #0a0f14;
}

/* ===== 游戏简介折叠箭头 ===== */
.intro-summary .arrow {
  color: var(--gold) !important;
  transition: transform 0.3s ease !important;
}

/* ===== 分割线 ===== */
.header::after {
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent) !important;
  height: 1px !important;
}

/* ===== 响应式保持 ===== */
@media (max-width: 600px) {
  .title-char { font-size: 2em !important; }
  .relic-ring { width: 250px !important; height: 250px !important; }
  .pulse-ring { width: 190px !important; height: 190px !important; }
}