/* DC Royale Lab · Supercell 包装版 v0.4.0
   覆盖原型默认配色，让 hand 卡片、HUD、边框、按钮带上 Supercell + DC 气质。
   仅改外观，不改任何 DOM 结构、字段或交互。 */

:root {
  --supercell-gold: #ffce5e;
  --supercell-deep: #1a1430;
  --supercell-card-bg: linear-gradient(160deg, #21183e 0%, #2c1d4d 55%, #150c2a 100%);
  --supercell-blue: #4dc3ff;
  --supercell-red: #ff4e69;
  --supercell-violet: #b78cff;
  --supercell-glow: 0 0 0 2px rgba(255, 206, 94, 0.32), 0 12px 28px -10px rgba(13, 8, 26, 0.85);
}

body {
  background: radial-gradient(circle at 18% 12%, rgba(95, 45, 160, 0.55) 0%, rgba(7, 5, 16, 1) 60%) #04030a !important;
}

.battle-shell {
  background: rgba(10, 6, 24, 0.55);
  border: 1px solid rgba(255, 206, 94, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 42px -22px rgba(0, 0, 0, 0.95);
  padding: 14px;
}

.arena-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255, 206, 94, 0.18), 0 14px 36px -16px rgba(0, 0, 0, 0.85);
}

.title-block .build-badge {
  background: linear-gradient(90deg, #ffce5e 0%, #ff8e3c 100%) !important;
  color: #1d1135 !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: 0 4px 14px -4px rgba(255, 142, 60, 0.7);
}
.title-block h1 {
  color: #ffce5e !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 206, 94, 0.25);
}
.title-block p {
  color: #cbb9ff !important;
}

.share-card {
  background: var(--supercell-card-bg) !important;
  border: 1px solid rgba(255, 206, 94, 0.18) !important;
  border-radius: 10px !important;
  color: #efe6ff !important;
}
.share-card strong { color: #ffce5e !important; }

.control-row button {
  background: linear-gradient(180deg, #3a2a66 0%, #1d1338 100%) !important;
  color: #ffe7a8 !important;
  border: 1px solid rgba(255, 206, 94, 0.32) !important;
  border-radius: 10px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.control-row button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(255, 206, 94, 0.45);
}

.metric {
  background: rgba(28, 18, 56, 0.55) !important;
  border: 1px solid rgba(255, 206, 94, 0.1) !important;
  border-radius: 8px !important;
}
.metric strong { color: #ffce5e !important; }
.metric span { color: #a89bd1 !important; }

.hand-title b { color: #ffce5e !important; }
.hand-title[data-side="blue"] b { color: #4dc3ff !important; }
.hand-title[data-side="red"] b { color: #ff4e69 !important; }

.hand .card, .bot-hand .card {
  background: var(--supercell-card-bg) !important;
  border: 1px solid rgba(255, 206, 94, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: var(--supercell-glow) !important;
  color: #ffe7a8 !important;
}
.hand .card[data-selected="true"] {
  border-color: #ffce5e !important;
  box-shadow: 0 0 0 2px #ffce5e, 0 14px 34px -10px rgba(255, 206, 94, 0.45) !important;
}
.hand .card .cost-badge, .bot-hand .card .cost-badge {
  background: radial-gradient(circle, #ffd970 0%, #ff8e3c 100%) !important;
  color: #2a1736 !important;
  border-color: #fff3c2 !important;
}

#statusLine {
  background: linear-gradient(90deg, rgba(255, 206, 94, 0.16) 0%, rgba(77, 195, 255, 0.16) 100%) !important;
  border: 1px solid rgba(255, 206, 94, 0.28) !important;
  color: #ffe7a8 !important;
  border-radius: 8px !important;
}

.section-label span:first-child { color: #ffce5e !important; }

.check-list li,
.log-list li {
  background: rgba(16, 10, 32, 0.55) !important;
  border-left: 3px solid rgba(255, 206, 94, 0.42) !important;
  color: #cbb9ff !important;
}
.check-list li[data-state="pass"] { border-left-color: #6dffb5 !important; }
.check-list li[data-state="pass"] strong { color: #6dffb5 !important; }

.language-switch button {
  background: rgba(40, 26, 80, 0.65) !important;
  color: #ffe7a8 !important;
  border: 1px solid rgba(255, 206, 94, 0.28) !important;
}
.language-switch button[data-active="true"] {
  background: linear-gradient(90deg, #ffce5e 0%, #ff8e3c 100%) !important;
  color: #1d1135 !important;
}