/* ============================================================
   主题层：深色（默认）/ 白色 / 浅蓝
   这一层只覆盖变量，不改布局；由 public/js/theme.js 切换 <html data-theme>
   ============================================================ */

:root {
  --bg-sub: #1e242d;
  --bg-hover: #232a35;
  --bg-code: #232932;
  --bg-chip: #2c3441;
  --bg-art: #0b0e13;
  --accent-hi: #ffb734;
  --on-accent: #16190f;
  --topbar: rgba(15, 17, 21, .92);
  --overlay: #000c;
  --shadow-fg: #000;
  --img-shade: rgba(15, 17, 21, .92);
  --stripe-a: #12161d;
  --stripe-b: #161b23;
  --ok-text: #cfe3d4;
  --warn-border: #6b4a1f;
  --warn-bg: #221c13;
  --bad-border: #5a3a3f;
  --bad-bg: #231a1c;
  --pip-border: #0008;
  --pip-fg: #000c;
  --C: #9aa4b2;
  --cn-text: #e8eef6;
  color-scheme: dark;
}

/* ---------- 白色主题 ---------- */
[data-theme="light"] {
  --bg: #f2f5f9;
  --bg-soft: #ffffff;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --bg-sub: #eef1f6;
  --bg-hover: #e5eaf2;
  --bg-code: #e8ecf3;
  --bg-chip: #dfe5ee;
  --bg-art: #dfe5ee;
  --line: #c9d2e0;
  --line-soft: #e3e8f0;
  --fg: #1b232f;
  --fg-dim: #4b5768;
  --fg-faint: #7a879b;
  --accent: #c87400;
  --accent-hi: #e59700;
  --accent-2: #2f6fd0;
  --on-accent: #ffffff;
  --ok: #1f8a4c;
  --warn: #9a6a00;
  --bad: #c0392b;
  --fg: #1b232f;
  --topbar: rgba(255, 255, 255, .94);
  --overlay: rgba(20, 26, 36, .55);
  --shadow-fg: rgba(0, 0, 0, .55);
  --img-shade: rgba(0, 0, 0, .82);
  --stripe-a: #e9edf4;
  --stripe-b: #f3f6fa;
  --ok-text: #14603a;
  --warn-border: #e0c184;
  --warn-bg: #fdf5e5;
  --bad-border: #e8b0aa;
  --bad-bg: #fdecea;
  --pip-border: rgba(0, 0, 0, .35);
  --pip-fg: rgba(0, 0, 0, .78);
  --W: #d6c559;
  --U: #3b8fd4;
  --B: #7a5ea8;
  --R: #d9573a;
  --G: #3f9b62;
  --C: #9aa6b4;
  --shadow: 0 6px 24px rgba(30, 50, 80, .12);
  --cn-text: #1b232f;
  color-scheme: light;
}

/* ---------- 浅蓝主题 ---------- */
[data-theme="blue"] {
  --bg: #e6f0fa;
  --bg-soft: #f6fafe;
  --bg-panel: #ffffff;
  --bg-input: #fbfdff;
  --bg-sub: #dde9f6;
  --bg-hover: #d2e2f3;
  --bg-code: #dbe8f6;
  --bg-chip: #cde0f2;
  --bg-art: #cfe0f3;
  --line: #b3cde6;
  --line-soft: #d3e4f4;
  --fg: #12293f;
  --fg-dim: #3d5f7d;
  --fg-faint: #6b8caa;
  --accent: #b96f00;
  --accent-hi: #d9992a;
  --accent-2: #1f6fbf;
  --on-accent: #ffffff;
  --ok: #1c7f47;
  --warn: #8f6209;
  --bad: #bd3a2d;
  --topbar: rgba(230, 240, 250, .94);
  --overlay: rgba(18, 41, 63, .5);
  --shadow-fg: rgba(0, 0, 0, .5);
  --img-shade: rgba(6, 22, 38, .84);
  --stripe-a: #dceaf8;
  --stripe-b: #eaf3fb;
  --ok-text: #145c36;
  --warn-border: #d8bf82;
  --warn-bg: #fbf4e3;
  --bad-border: #e0aca6;
  --bad-bg: #fcebe9;
  --pip-border: rgba(0, 0, 0, .32);
  --pip-fg: rgba(0, 0, 0, .78);
  --W: #d6c559;
  --U: #3b8fd4;
  --B: #7a5ea8;
  --R: #d9573a;
  --G: #3f9b62;
  --C: #8fa4b8;
  --shadow: 0 6px 24px rgba(20, 60, 100, .14);
  --cn-text: #12293f;
  color-scheme: light;
}

/* 浅色主题下卡片阴影里的图片压暗层 */
[data-theme="light"] .deck-img::after,
[data-theme="blue"] .deck-img::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, var(--img-shade) 100%); }

/* ---------- 主题切换按钮 ---------- */
.themer { display: inline-flex; gap: 6px; align-items: center; }
.theme-dot {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid var(--line); transition: transform .12s, border-color .12s, box-shadow .12s;
}
.theme-dot:hover { transform: scale(1.12); }
.theme-dot[data-theme="dark"]  { background: linear-gradient(135deg, #0f1115 50%, #2b323d 50%); }
.theme-dot[data-theme="light"] { background: linear-gradient(135deg, #ffffff 50%, #dfe5ee 50%); }
.theme-dot[data-theme="blue"]  { background: linear-gradient(135deg, #dceaf8 50%, #7fb4e0 50%); }
.theme-dot.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 160, 32, .35); }

/* ---------- 强度等级选择弹窗 ---------- */
.modal-box.narrow { max-width: 520px; }
.bracket-pick { display: grid; gap: 8px; margin-top: 12px; }
.bracket-choice {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 10px;
  text-align: left; padding: 11px 14px; cursor: pointer; font: inherit; width: 100%;
  background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .12s, background .12s;
}
.bracket-choice:hover { border-color: var(--accent); background: var(--bg-hover); }
.bracket-choice b { font-size: 16px; }
.bracket-choice span { font-size: 13px; color: var(--fg-faint); letter-spacing: .4px; }
.bracket-choice em { font-style: normal; font-size: 14px; color: var(--fg-dim); }
.bracket-choice.any { grid-template-columns: auto 1fr; }

/* ================= ④ 随机指挥官 ================= */
.rd-wrap { padding: 18px; }
.rd-card {
  display: grid; grid-template-columns: 268px 1fr; gap: 22px; align-items: start;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; box-shadow: var(--shadow);
}
.rd-art {
  width: 268px; aspect-ratio: 488 / 680; border-radius: 12px; overflow: hidden;
  background: var(--bg-art) center/cover no-repeat; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-faint); font-size: 14px; text-align: center; padding: 8px;
}
.rd-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-body { min-width: 0; }
.rd-en { font-size: 15px; color: var(--fg-faint); margin-top: 2px; letter-spacing: .2px; }
.rd-zh { font-size: 30px; font-weight: 700; line-height: 1.25; margin: 2px 0 6px; color: var(--cn-text); }
.rd-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 12px 0; }
.rd-mana { display: inline-flex; gap: 3px; vertical-align: middle; }
.rd-mana i {
  font-style: normal; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
  background: var(--bg-chip); border: 1px solid var(--line); font-size: 14px; font-weight: 700;
}
.rd-type { font-size: 15.5px; color: var(--fg-dim); }
.rd-text {
  margin-top: 14px; padding: 14px 16px; border-radius: 10px;
  background: var(--bg-input); border: 1px solid var(--line-soft);
  white-space: pre-wrap; line-height: 1.75; font-size: 16px; color: var(--cn-text);
}
.rd-en-text { margin-top: 10px; font-size: 14.5px; color: var(--fg-dim); }
.rd-en-text summary { cursor: pointer; color: var(--fg-faint); }
.rd-en-text div { margin-top: 8px; white-space: pre-wrap; line-height: 1.65; }
.rd-rank { font-size: 14px; color: var(--fg-faint); }
@media (max-width: 820px) {
  .rd-card { grid-template-columns: 1fr; }
  .rd-art { width: 100%; max-width: 268px; }
}