/* 天机墨阵 · 全站主题层 */
:root {
  --color-primary: #e7c987;
  --color-primary-dark: #b9853c;
  --color-primary-light: #f6e5bd;
  --color-secondary: #5b8cff;
  --color-accent: #d96a5a;

  --bg-main: #070b12;
  --bg-dark: #0b111b;
  --bg-darker: #05080e;
  --bg-panel: #101a29;
  --bg-panel-light: #172337;
  --bg-card: #101a29;
  --bg-card-hover: #162338;
  --bg-overlay: rgba(0,0,0,.78);

  --text-primary: #e8ddc4;
  --text-secondary: #a99f8b;
  --text-muted: #6f685c;
  --text-gold: #f0d9a1;
  --text-red: #e58a7a;
  --text-green: #79d49b;
  --text-blue: #9ecbff;

  --quality-n: #9d9d9d;
  --quality-r: #5b9dff;
  --quality-sr: #b06cff;
  --quality-ssr: #e8a930;
  --quality-ur: #e05a5a;

  --faction-wei: #6aa9ff;
  --faction-shu: #e05a5a;
  --faction-wu: #63c7a6;
  --faction-qun: #b06cff;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  --grad-gold: linear-gradient(180deg, #f6e5bd 0%, #e7c987 48%, #b9853c 100%);
  --grad-panel: linear-gradient(180deg, #101a29 0%, #0b111b 100%);
  --grad-card: linear-gradient(180deg, #111c2c 0%, #0b1420 100%);
  --grad-nav: linear-gradient(180deg, #0b111b 0%, #070b12 100%);

  --shadow-sm: 0 2px 6px rgba(0,0,0,.28);
  --shadow-md: 0 8px 22px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
  --shadow-glow-gold: 0 0 18px rgba(231,201,135,.20);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);

  --font-main: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(91,140,255,.10), transparent 34%),
    radial-gradient(circle at 90% 94%, rgba(185,133,60,.08), transparent 38%),
    #070b12 !important;
  color: var(--text-primary);
}

#screen-container {
  background:
    radial-gradient(circle at 14% 4%, rgba(91,140,255,.055), transparent 36%),
    radial-gradient(circle at 88% 90%, rgba(185,133,60,.045), transparent 40%),
    #080d16;
}

/* 顶栏 */
.top-bar {
  background: linear-gradient(180deg, rgba(10,16,27,.98), rgba(7,11,18,.94)) !important;
  border-bottom: 1px solid rgba(231,201,135,.18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.025), 0 6px 18px rgba(0,0,0,.22);
}
.top-bar__currency {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(231,201,135,.16) !important;
  border-radius: 8px !important;
  color: var(--text-secondary);
}
.top-bar__currency-value { color: var(--text-gold); font-weight: 700; }

/* 底栏：五方令 */
.bottom-nav {
  background: linear-gradient(180deg, rgba(10,16,27,.98), rgba(5,8,14,.98)) !important;
  border-top: 1px solid rgba(231,201,135,.18) !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.28);
}
.bottom-nav__item { color: rgba(169,159,139,.65); }
.bottom-nav__item.active { color: var(--color-primary-light); }
.bottom-nav__icon {
  font-family: "STKaiti","KaiTi","Noto Serif SC",serif !important;
  font-size: 19px !important;
  line-height: 1 !important;
  color: rgba(231,201,135,.58);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.bottom-nav__item.active .bottom-nav__icon { color: #f6e5bd; text-shadow: 0 0 10px rgba(231,201,135,.45); }
.bottom-nav__label { font-size: 9px !important; letter-spacing: .5px; }
.bottom-nav__item.active::before {
  width: 22px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #e7c987, transparent) !important;
  box-shadow: 0 0 10px rgba(231,201,135,.45) !important;
}

/* 按钮 */
.btn {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(231,201,135,.20) !important;
  color: #e3d6ba !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.18) !important;
  border-radius: 9px !important;
}
.btn--primary {
  background: linear-gradient(180deg, #f6e5bd 0%, #e7c987 48%, #c29243 100%) !important;
  border-color: rgba(246,229,189,.55) !important;
  color: #21170a !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.22) !important;
}
.btn--success {
  background: rgba(99,199,166,.075) !important;
  border-color: rgba(99,199,166,.42) !important;
  color: #9ee3c8 !important;
}
.btn--danger {
  background: rgba(217,106,90,.075) !important;
  border-color: rgba(217,106,90,.42) !important;
  color: #f0a396 !important;
}
.btn:disabled { opacity: .35 !important; }

/* 卡片 / 面板 */
.card {
  background: var(--grad-card) !important;
  border: 1px solid rgba(231,201,135,.13) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 14px rgba(0,0,0,.18) !important;
}
.card--clickable:active { background: #162338 !important; }

/* 品质角色卡 */
.char-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
  border-color: rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}

/* 标签页 */
.tabs { border-bottom: 1px solid rgba(231,201,135,.12); }
.tab {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.tab.active {
  color: var(--color-primary-light) !important;
  border-bottom: 2px solid #e7c987 !important;
}
.card-tab { color: var(--text-muted) !important; }
.card-tab.active { color: var(--color-primary-light) !important; }

/* 弹窗 */
.modal {
  background:
    radial-gradient(circle at 50% 0%, rgba(91,140,255,.08), transparent 36%),
    linear-gradient(160deg, #111a28, #0a111b 72%) !important;
  border: 1px solid rgba(231,201,135,.32) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
}
.modal__title {
  font-family: "STKaiti","KaiTi","Noto Serif SC",serif !important;
  color: #f3dfb2 !important;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(231,201,135,.14);
  padding-bottom: 7px;
}
.modal__body { color: var(--text-primary); }

/* 输入框 / 下拉 */
input, select, textarea {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(231,201,135,.18) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(231,201,135,.55) !important;
  box-shadow: 0 0 0 2px rgba(231,201,135,.10) !important;
}

/* 进度条 */
.progress-bar {
  background: rgba(0,0,0,.42) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.progress-bar__fill {
  background: linear-gradient(90deg, #b9853c, #e7c987) !important;
}

/* 徽章/提示 */
.badge {
  border-radius: 4px !important;
  border: 1px solid rgba(231,201,135,.22) !important;
  background: rgba(0,0,0,.18) !important;
}
.empty-state { color: var(--text-muted); }

/* 滚动条 */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(231,201,135,.20); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* 通用文字层级 */
.text-gold { color: #e7c987 !important; }
.text-muted { color: var(--text-muted) !important; }
.text-green { color: var(--text-green) !important; }
.text-red { color: var(--text-red) !important; }
.text-blue { color: var(--text-blue) !important; }

/* 页面标题统一（如果页面用 h2/标题类） */
.screen h1, .screen h2 {
  font-family: "STKaiti","KaiTi","Noto Serif SC",serif;
  letter-spacing: 1px;
  color: var(--color-primary-light);
}
/* 通用页面头 */
.astral-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding:2px 2px 10px; border-bottom:1px solid rgba(231,201,135,.12); margin-bottom:10px; }
.astral-page-title { font-family:"STKaiti","KaiTi","Noto Serif SC",serif; font-size:24px; letter-spacing:3px; color:#f6e5bd; line-height:1.1; }
.astral-page-sub { font-size:9px; color:rgba(169,159,139,.65); letter-spacing:1px; margin-top:3px; }
.astral-page-mark { font-size:9px; color:rgba(231,201,135,.55); border:1px solid rgba(231,201,135,.2); border-radius:999px; padding:2px 8px; white-space:nowrap; }
/* 武将详情头牌 */
.char-detail-view__hero {
  display:grid !important;
  grid-template-columns:86px 1fr !important;
  gap:12px !important;
  align-items:center !important;
  position:relative;
  padding:14px 14px 12px !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(231,201,135,.12), transparent 34%),
    radial-gradient(circle at 84% 86%, rgba(91,140,255,.08), transparent 36%),
    linear-gradient(160deg,#121d2e,#0a111b 74%) !important;
  border:1px solid rgba(231,201,135,.22) !important;
  border-left-width:3px !important;
  border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.25) !important;
}
.char-hero__seal {
  width:78px; height:92px; border-radius:12px; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(0,0,0,.25));
  border:1px solid rgba(231,201,135,.35);
  box-shadow:inset 0 0 18px rgba(0,0,0,.35);
}
.char-hero__seal::after {
  content:""; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.06); border-radius:9px; pointer-events:none;
}
.char-hero__rank {
  position:absolute; top:-7px; left:-6px; min-width:28px; padding:2px 5px;
  border-radius:4px; background:#0b111b; border:1px solid rgba(231,201,135,.45);
  color:#e7c987; font-size:8px; line-height:1.2; text-align:center;
}
.char-hero__glyph { font-family:"STKaiti","KaiTi",serif; font-size:38px; line-height:1; }
.char-hero__stars {
  position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  padding:1px 6px; border-radius:999px; background:#0b111b; border:1px solid rgba(231,201,135,.35);
  color:#e7c987; font-size:8px; white-space:nowrap;
}
.char-hero__body { min-width:0; }
.char-hero__name {
  font-family:"STKaiti","KaiTi",serif; font-size:25px; line-height:1.15;
  letter-spacing:2px; color:#f3e0b8;
}
.char-hero__title { font-family:var(--font-main); font-size:10px; color:rgba(220,205,175,.55); letter-spacing:1px; margin-left:6px; }
.char-hero__badges { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:5px; }
.char-hero__badge {
  font-size:8px; line-height:1; padding:3px 6px; border-radius:4px;
  border:1px solid rgba(231,201,135,.22); color:#cfc2a8; background:rgba(0,0,0,.18);
}
.char-hero__badge--q { border-color:currentColor; }
.char-hero__badge--team { color:#79d49b; border-color:rgba(121,212,155,.35); }
.char-hero__stats { display:flex; gap:10px; flex-wrap:wrap; margin-top:7px; }
.char-hero__stat { font-size:9px; color:rgba(220,205,175,.55); }
.char-hero__stat b { font-size:11px; color:#e7c987; font-weight:700; margin-left:2px; }
.char-hero__back {
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(231,201,135,.18); background:rgba(0,0,0,.18);
  color:#a99f8b; font-size:14px; line-height:1; cursor:pointer;
}
.char-hero__actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; grid-column:1/-1; }
.char-detail-view__section {
  background:linear-gradient(160deg,#111b2a,#0a111b 74%) !important;
  border:1px solid rgba(231,201,135,.12) !important;
  border-radius:12px !important;
}
@media (max-width:360px) {
  .char-detail-view__hero { grid-template-columns:72px 1fr !important; padding:12px 10px !important; }
  .char-hero__seal { width:66px; height:82px; }
  .char-hero__glyph { font-size:32px; }
  .char-hero__name { font-size:22px; }
}
/* 商店 / 背包 / 副本内部卡片 */
.shop-grid { align-items:stretch; }
.shop-item {
  background:linear-gradient(160deg,#111c2c,#0a111b 76%) !important;
  border-radius:10px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.16);
  transition:transform .12s ease, border-color .12s ease;
}
.shop-item:active { transform:scale(.97); }
.shop-item .btn { min-height:26px; }

.inv-grid { align-items:stretch; }
.inv-slot {
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(0,0,0,.16)) !important;
  border:1px solid rgba(231,201,135,.16) !important;
  border-radius:10px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .12s ease, border-color .12s ease;
}
.inv-slot:active { transform:scale(.95); }
.inv-slot--empty { opacity:.35; border-style:dashed !important; }
.inv-count {
  background:rgba(8,12,20,.82) !important;
  color:#f3dfb2 !important;
  border:1px solid rgba(231,201,135,.22) !important;
}
.inv-name { color:#cfc2a8 !important; }

.dungeon-card {
  background:linear-gradient(160deg,#111c2c,#0a111b 76%) !important;
  border:1px solid rgba(231,201,135,.14) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 4px 14px rgba(0,0,0,.18);
  transition:transform .12s ease, border-color .12s ease;
}
.dungeon-card:active { transform:scale(.985); }
.dungeon-card .text-muted { color:rgba(169,159,139,.65) !important; }