/* ==================================================================
   云海仙途 · 青金玉简美术重制
   水墨山影 / 青玉 / 古金 / 朱砂印
   ================================================================== */

:root {
  --ink: #04090a;
  --bg: #071012;
  --panel: rgba(11, 23, 24, 0.8);
  --panel-solid: #0b1719;
  --panel-2: rgba(17, 33, 34, 0.94);
  --line: rgba(139, 212, 189, 0.16);
  --line-soft: rgba(242, 223, 180, 0.08);
  --line-gold: rgba(223, 184, 114, 0.34);
  --text: #e7e9df;
  --text-dim: #b8c6bc;
  --muted: #788d84;
  --jade: #8bd4bd;
  --jade-deep: #2e6e5f;
  --gold: #dfb872;
  --gold-soft: #f2dfb4;
  --cinnabar: #c95844;
  --blue: #93bce6;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.58);
  --serif: "STKaiti", "KaiTi", "FangSong", "Songti SC", "Noto Serif SC", serif;
  --sans: "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif;
  --radius: 2px;
}

body {
  background:
    radial-gradient(ellipse at 78% 8%, rgba(96, 142, 118, 0.14), transparent 48%),
    radial-gradient(ellipse at 18% 88%, rgba(44, 92, 78, 0.18), transparent 52%),
    linear-gradient(180deg, #081214 0%, #050b0c 100%);
  letter-spacing: 0.02em;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.32) 100%);
  mix-blend-mode: soft-light;
}

.bg-stars { opacity: 0.55; filter: sepia(0.35) saturate(0.8); }
.bg-mountain { opacity: 0.86; filter: saturate(0.78) brightness(0.86) contrast(1.05); }
.bg-mist { filter: blur(18px); opacity: 0.5; }
.bg-vignette {
  background:
    radial-gradient(ellipse at 50% 35%, transparent 30%, rgba(2, 6, 7, 0.46) 82%),
    linear-gradient(180deg, transparent 55%, rgba(3, 8, 9, 0.7));
}

/* ---------------- 登录 ---------------- */

.login {
  background:
    radial-gradient(ellipse at 50% 32%, rgba(42, 82, 70, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(3, 8, 9, 0.2), rgba(2, 6, 7, 0.65));
}

.login-card {
  border-radius: 3px;
  border: 1px solid rgba(223, 184, 114, 0.34);
  background:
    linear-gradient(160deg, rgba(24, 43, 42, 0.92), rgba(8, 17, 18, 0.97) 62%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.012) 18px 19px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 5px rgba(223, 184, 114, 0.045),
    0 0 90px rgba(46, 110, 95, 0.18),
    var(--shadow);
  padding: 50px 44px 36px;
}

.login-card::before, .login-card::after {
  width: 34px;
  height: 34px;
  border-color: rgba(223, 184, 114, 0.72);
  filter: drop-shadow(0 0 6px rgba(223, 184, 114, 0.18));
}

.login-card::before { top: 12px; left: 12px; }
.login-card::after { bottom: 12px; right: 12px; }

.login-card .seal {
  top: 22px;
  right: 24px;
  border: 1px solid rgba(201, 88, 68, 0.8);
  border-radius: 2px;
  color: #e58b74;
  box-shadow: inset 0 0 12px rgba(201, 88, 68, 0.16);
  transform: rotate(3deg);
}

.brand {
  font-family: var(--serif);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  background: linear-gradient(180deg, #fff1cf 0%, #e1bd7c 48%, #a97c40 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 18px rgba(223, 184, 114, 0.22));
}

.brand-sub {
  color: #94a89d;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  font-size: 11px;
}

.login-form .field-label { color: var(--gold-soft); font-family: var(--serif); letter-spacing: 0.22em; }
.login-note { color: #82958b; font-size: 11px; }

/* ---------------- 顶栏 ---------------- */

.topbar {
  position: relative;
  background:
    linear-gradient(180deg, rgba(7, 16, 17, 0.98), rgba(9, 21, 22, 0.78)),
    radial-gradient(ellipse at 22% 0, rgba(139, 212, 189, 0.08), transparent 55%);
  border-bottom: 1px solid rgba(223, 184, 114, 0.22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
}

.topbar::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 184, 114, 0.62), transparent);
  opacity: 0.55;
}

.who-name {
  color: #f0ddb3;
  font-size: 19px;
  text-shadow: 0 0 22px rgba(223, 184, 114, 0.2);
}

.root-chip {
  border-color: rgba(139, 212, 189, 0.35) !important;
  background: rgba(139, 212, 189, 0.06);
}

.who-realm {
  border: 1px solid rgba(223, 184, 114, 0.38);
  background: linear-gradient(180deg, rgba(223, 184, 114, 0.1), rgba(0, 0, 0, 0.08));
  border-radius: 2px;
  color: #ecd6a6;
  box-shadow: inset 0 0 10px rgba(223, 184, 114, 0.06);
}

.res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(3, 30px); gap: 5px; align-items: center; }
.res-item { min-width: 0; overflow: hidden; }
.res-item .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.res-item {
  min-width: 56px;
  padding: 3px 9px;
  border: 1px solid rgba(223, 184, 114, 0.13);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.12));
}

.res-item .k { color: #8fa197; font-size: 9px; letter-spacing: 0.18em; }
.res-item .v { color: #e8d3a4; font-size: 15px; }

.exp-top { color: #8ea096; }
.exp-rate { color: var(--jade); }
.bar { background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55); }
.bar.exp > i, .bar.hp > i {
  background: linear-gradient(90deg, #2f6f60, #8bd4bd 62%, #d7f4e9);
  box-shadow: 0 0 10px rgba(139, 212, 189, 0.3);
}

.chat-btn, .mail-btn {
  border-radius: 2px;
  border-color: rgba(223, 184, 114, 0.18);
  background: rgba(255, 255, 255, 0.025);
}

@media (max-width: 1240px) {
  .topbar { grid-template-columns: 200px minmax(0, 1fr) 330px; gap: 12px; }
  .res { gap: 4px; }
  .res-item { padding: 3px 4px; }
  .res-item .v { font-size: 12px; }
}
@media (max-width: 980px) {
  .topbar { grid-template-columns: 190px minmax(0, 1fr); }
  .res { display: none; }
}

/* ---------------- 侧栏 ---------------- */

.sidenav {
  position: relative;
  gap: 0;
  padding-bottom: 0;
  background:
    linear-gradient(180deg, rgba(8, 19, 20, 0.96), rgba(4, 10, 11, 0.98)),
    radial-gradient(ellipse at 50% 0, rgba(139, 212, 189, 0.06), transparent 55%);
  border-right: 1px solid rgba(223, 184, 114, 0.14);
  padding-top: 8px;
}

.sidenav::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 18px;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(223, 184, 114, 0.55);
  box-shadow: 0 0 8px rgba(223, 184, 114, 0.35);
}

.nav-item {
  position: relative;
  gap: 1px;
  margin: 1px 6px;
  padding: 2px 0;
  border-left: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: 0.18s ease;
}

.nav-item .ic {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  border: 1px solid rgba(139, 212, 189, 0.16);
  background:
    radial-gradient(circle at 50% 28%, rgba(139, 212, 189, 0.08), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.16));
  color: #a9c5b9;
  font-family: var(--serif);
  font-size: 15px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
}

.nav-item .lb {
  color: #83978d;
  font-family: var(--serif);
  font-size: 9.5px;
  line-height: 1.15;
  letter-spacing: 0.1em;
}

.nav-item:hover { border-color: rgba(223, 184, 114, 0.16); background: rgba(255, 255, 255, 0.02); }
.nav-item:hover .ic { color: var(--gold-soft); border-color: rgba(223, 184, 114, 0.3); }

.nav-item.on {
  border-color: rgba(223, 184, 114, 0.42);
  background:
    linear-gradient(90deg, rgba(223, 184, 114, 0.12), transparent 85%),
    radial-gradient(ellipse at 20% 50%, rgba(139, 212, 189, 0.08), transparent 60%);
  box-shadow: inset 2px 0 0 var(--gold), 0 0 18px rgba(223, 184, 114, 0.06);
}

.nav-item.on .ic {
  color: #f6e5bd;
  border-color: rgba(223, 184, 114, 0.62);
  box-shadow: 0 0 18px rgba(223, 184, 114, 0.16), inset 0 0 12px rgba(223, 184, 114, 0.08);
}

.nav-item.on .lb { color: #e8d3a4; }

/* ---------------- 页面标题 ---------------- */

.page-head {
  position: relative;
  border-bottom: 1px solid rgba(223, 184, 114, 0.16);
  padding-bottom: 16px;
}

.page-head h2 {
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #f0ddb3;
  text-shadow: 0 0 30px rgba(223, 184, 114, 0.2), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.page-head h2::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 12px;
  border: 1px solid rgba(223, 184, 114, 0.7);
  transform: rotate(45deg) translateY(-4px);
  opacity: 0.7;
}

.page-sub { color: #8b9e94; font-size: 12px; letter-spacing: 0.1em; }
.page-side { color: #8b9e94; }

/* ---------------- 面板 ---------------- */

.panel {
  position: relative;
  border-radius: 3px;
  border: 1px solid rgba(223, 184, 114, 0.16);
  background:
    linear-gradient(158deg, rgba(19, 36, 36, 0.9), rgba(7, 16, 17, 0.94) 64%),
    radial-gradient(ellipse at 100% 0, rgba(139, 212, 189, 0.06), transparent 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 0 32px rgba(0, 0, 0, 0.24),
    0 14px 36px rgba(0, 0, 0, 0.28);
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 184, 114, 0.55), transparent);
  opacity: 0.55;
  pointer-events: none;
}

.panel-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
  border-bottom: 1px solid rgba(223, 184, 114, 0.12);
  position: relative;
}

.panel-head h3 {
  color: #e5cf9f;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.2em;
}

.panel-head h3::before {
  content: "◆";
  display: inline-block;
  margin-right: 7px;
  color: rgba(223, 184, 114, 0.85);
  font-size: 8px;
  vertical-align: 2px;
}

.panel-head .hint { color: #7f9388; font-size: 10.5px; letter-spacing: 0.06em; }

/* ---------------- 按钮 / 输入 ---------------- */

.btn {
  position: relative;
  border-radius: 2px;
  border: 1px solid rgba(223, 184, 114, 0.26);
  background:
    linear-gradient(180deg, rgba(139, 212, 189, 0.11), rgba(13, 32, 29, 0.2)),
    rgba(8, 18, 18, 0.4);
  color: #dce6df;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  letter-spacing: 0.1em;
  transition: 0.18s ease;
}

.btn:hover:not(:disabled) {
  border-color: rgba(223, 184, 114, 0.65);
  color: #f4e4bd;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 16px rgba(223, 184, 114, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn.primary {
  border-color: rgba(139, 212, 189, 0.5);
  background: linear-gradient(180deg, rgba(72, 156, 132, 0.48), rgba(25, 74, 62, 0.55));
  color: #effff8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 18px rgba(139, 212, 189, 0.08);
}

.btn.gold {
  border-color: rgba(223, 184, 114, 0.55);
  background: linear-gradient(180deg, rgba(223, 184, 114, 0.26), rgba(74, 52, 20, 0.32));
  color: #f7e7c2;
}

.btn.danger {
  border-color: rgba(201, 88, 68, 0.4);
  background: linear-gradient(180deg, rgba(201, 88, 68, 0.16), rgba(60, 22, 18, 0.22));
  color: #e6a798;
}

.btn:disabled { opacity: 0.4; transform: none; filter: saturate(0.6); }

.input, select.input, textarea {
  border-radius: 2px;
  border: 1px solid rgba(223, 184, 114, 0.18);
  background: rgba(3, 10, 11, 0.72);
  color: #e5e8df;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: 0.18s ease;
}

.input:focus, select.input:focus, textarea:focus {
  outline: none;
  border-color: rgba(223, 184, 114, 0.6);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(223, 184, 114, 0.08);
}

.tag {
  border-radius: 2px;
  border-color: rgba(223, 184, 114, 0.2);
  background: rgba(223, 184, 114, 0.055);
  color: #c9b98f;
  letter-spacing: 0.08em;
}

.tag.gold { color: #f0d8a2; border-color: rgba(223, 184, 114, 0.4); }
.tag.jade { color: #a9e0cc; border-color: rgba(139, 212, 189, 0.3); }
.tag.red { color: #e2a28f; border-color: rgba(201, 88, 68, 0.34); }

/* ---------------- 卡片 / 物品 ---------------- */

.tile {
  border-radius: 2px;
  border: 1px solid rgba(223, 184, 114, 0.15);
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.06), transparent 58%),
    radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--tc) 13%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(18, 34, 33, 0.7), rgba(4, 11, 12, 0.82));
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.42);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--tc) 16%, transparent);
  border-radius: 1px;
  pointer-events: none;
  opacity: 0.55;
}

.tile svg { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); position: relative; z-index: 1; }
.tile .q { z-index: 2; color: #f0e6cf; }
.tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 55%, rgba(223, 184, 114, 0.35)); }

.dungeon-card, .skill-card, .manual-card, .guild-card, .podium-card, .party-slot {
  border-radius: 3px;
  border-color: rgba(223, 184, 114, 0.15);
  background:
    linear-gradient(160deg, rgba(18, 34, 33, 0.62), rgba(6, 15, 16, 0.74));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.18);
}

.dungeon-card:hover, .skill-card:hover, .manual-card:hover, .guild-card:hover {
  border-color: rgba(223, 184, 114, 0.36);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 0 24px rgba(223, 184, 114, 0.03);
}

.dungeon-card .dg-icon, .podium-crown, .lib-name { color: var(--gold-soft); }

.skill-slot, .manual-step, .major-step {
  border-radius: 2px;
  border-color: rgba(223, 184, 114, 0.15);
  background: rgba(255, 255, 255, 0.018);
}

.skill-slot.filled, .manual-card.maxed {
  border-color: rgba(223, 184, 114, 0.42);
  background: linear-gradient(180deg, rgba(223, 184, 114, 0.08), rgba(255, 255, 255, 0.018));
}

.skill-slot-name, .manual-name, .lib-name { color: #e8d3a4; }

/* ---------------- 表格 / 列表 ---------------- */

table { border-collapse: collapse; }
th {
  color: #9aac9f;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(223, 184, 114, 0.14);
}
td { border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
tr:hover td { background: rgba(139, 212, 189, 0.035); }

.mkt-row { border-bottom: 1px solid rgba(223, 184, 114, 0.06); }
.mkt-row:hover { background: linear-gradient(90deg, rgba(223, 184, 114, 0.055), transparent 70%); }
.mkt-row .name { color: #d9dfd5; }

.board-row, .member-row, .pvp-online-row { border-bottom: 1px solid rgba(223, 184, 114, 0.07); }

/* ---------------- 弹窗 ---------------- */

.modal-layer {
  background: radial-gradient(ellipse at 50% 20%, rgba(16, 34, 31, 0.5), rgba(2, 6, 7, 0.84));
  backdrop-filter: blur(7px);
}

.modal {
  position: relative;
  border-radius: 3px;
  border: 1px solid rgba(223, 184, 114, 0.32);
  background:
    linear-gradient(160deg, rgba(19, 36, 35, 0.96), rgba(6, 14, 15, 0.98) 62%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, 0.012) 2px 3px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 5px rgba(223, 184, 114, 0.04),
    var(--shadow);
}

.modal::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 184, 114, 0.5), transparent);
  pointer-events: none;
}

.modal-head h3 {
  color: #f0ddb3;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.modal-x { border-radius: 2px; border-color: rgba(223, 184, 114, 0.2); }

/* ---------------- 修炼 / 境界 ---------------- */

.cult-ring {
  background: conic-gradient(from -90deg, #8bd4bd calc(var(--p) * 1turn), rgba(139, 212, 189, 0.07) 0);
  box-shadow: 0 0 70px rgba(46, 110, 95, 0.14);
}

.cult-ring::before {
  border-color: rgba(223, 184, 114, 0.24);
  background:
    radial-gradient(circle at 50% 38%, #163330, #081315 68%),
    radial-gradient(ellipse at 50% 100%, rgba(223, 184, 114, 0.06), transparent 55%);
}

.cult-ring::after { border-color: rgba(223, 184, 114, 0.3); }
.cult-ring.meditating { box-shadow: 0 0 100px rgba(139, 212, 189, 0.24), inset 0 0 50px rgba(0, 0, 0, 0.45); }

.cult-orb {
  background: radial-gradient(circle at 38% 30%, #f2fff8, #a4e5cf 32%, #4b9a82 62%, #17463b 86%);
  box-shadow: 0 0 34px rgba(139, 212, 189, 0.45), inset -6px -8px 18px rgba(0, 0, 0, 0.35);
}

.cult-realm { color: #f2dfb4; font-family: var(--serif); letter-spacing: 0.16em; }

.break-panel { border-color: rgba(223, 184, 114, 0.28); }
.chance { color: #f0d8a2; text-shadow: 0 0 22px rgba(223, 184, 114, 0.25); }

.realm-step.now {
  border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(223, 184, 114, 0.12), transparent 78%);
}

/* ---------------- 战斗 / 副本 ---------------- */

.battle-layer { backdrop-filter: blur(5px); }
.battle-box {
  border-radius: 3px;
  border: 1px solid rgba(223, 184, 114, 0.24);
  background:
    radial-gradient(ellipse at 50% 0, rgba(139, 212, 189, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(10, 22, 23, 0.98), rgba(4, 10, 11, 0.99));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), var(--shadow);
}

.battle-arena {
  background:
    radial-gradient(ellipse at 50% 78%, rgba(46, 110, 95, 0.18), transparent 46%),
    radial-gradient(ellipse at 50% 50%, rgba(139, 212, 189, 0.035), transparent 62%),
    linear-gradient(180deg, rgba(2, 7, 8, 0.2), rgba(2, 7, 8, 0.55));
  border-top: 1px solid rgba(223, 184, 114, 0.09);
  border-bottom: 1px solid rgba(223, 184, 114, 0.09);
}

.fight-orb {
  filter: drop-shadow(0 0 18px rgba(223, 184, 114, 0.18)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

.battle-log { background: rgba(1, 5, 6, 0.4); }
.battle-log .bl { border-bottom: 1px solid rgba(255, 255, 255, 0.035); }

.dg-box {
  border-radius: 3px;
  border: 1px solid rgba(223, 184, 114, 0.26);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(46, 110, 95, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(10, 22, 23, 0.98), rgba(4, 10, 11, 0.99));
}

.dg-boss-orb {
  filter: drop-shadow(0 0 26px rgba(201, 88, 68, 0.25)) drop-shadow(0 0 8px rgba(223, 184, 114, 0.2));
}

/* ---------------- 杂项 ---------------- */

::-webkit-scrollbar-thumb { background: rgba(139, 212, 189, 0.22); }
::-webkit-scrollbar-thumb:hover { background: rgba(223, 184, 114, 0.35); }

.divider, hr { border-color: rgba(223, 184, 114, 0.14); }
.empty-line, .mkt-empty { color: #7d9086; }
.hint-line, .hint { color: #81948a; }

.buff {
  border-radius: 2px;
  border-color: rgba(223, 184, 114, 0.24);
  background: rgba(223, 184, 114, 0.06);
  color: #d8c59a;
}

/* ---------------- 手机 ---------------- */

@media (max-width: 760px) {
  .sidenav {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 80;
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    padding: 4px 6px 6px; border-right: 0; border-top: 1px solid rgba(223,184,114,.18);
    background: rgba(5,13,14,.98); backdrop-filter: blur(9px);
  }
  .sidenav::before { display: none; }
  .nav-item { margin: 0 2px; padding: 5px 4px; border: 0; flex: 0 0 auto; min-width: 54px; }
  .nav-item .ic { width: 32px; height: 32px; }
  .nav-item.on { border: 0; box-shadow: none; }
  .res-item { min-width: 0; padding: 2px 5px; }
  .res-item .k { display: block; font-size: 8px; letter-spacing: .08em; line-height: 1.3; }
  .res-item .v { font-size: 12px; }
  .topbar::after { left: 10px; right: 10px; }
  .page-head h2 { font-size: 25px; }
  .login-card { padding: 40px 24px 28px; }
  .brand { font-size: 38px; }
  .panel::before { left: 10px; right: 10px; }
}

/* 主线剧情 */
.story-banner { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid rgba(223,184,114,.25); border-left: 2px solid var(--gold); background: linear-gradient(90deg, rgba(223,184,114,.08), rgba(8,18,18,.5) 45%, transparent); border-radius: 2px; }
.sb-mark { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid rgba(201,88,68,.6); color: #e58b74; font-family: var(--serif); font-size: 20px; transform: rotate(-2deg); background: rgba(201,88,68,.06); }
.sb-main { flex: 1; min-width: 0; }
.sb-kicker { color: #9aac9f; font-size: 10px; letter-spacing: .14em; }
.sb-title { color: #f0ddb3; font-family: var(--serif); font-size: 16px; letter-spacing: .1em; }
.sb-goal { color: #94a89b; font-size: 11px; margin-top: 2px; }
.sb-goal b { color: var(--jade); }
.sb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.story-current { display: flex; gap: 18px; padding: 20px; margin-bottom: 16px; }
.story-portrait { width: 78px; height: 78px; flex: 0 0 78px; display: grid; place-items: center; border: 1px solid rgba(223,184,114,.35); border-radius: 50%; color: #f0ddb3; font-family: var(--serif); font-size: 34px; background: radial-gradient(circle at 40% 30%, rgba(139,212,189,.18), rgba(6,14,15,.8)); box-shadow: 0 0 28px rgba(223,184,114,.1); }
.story-copy { flex: 1; min-width: 0; }
.story-kicker { color: #9aac9f; font-size: 11px; letter-spacing: .16em; }
.story-copy h3 { color: #f0ddb3; font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: .12em; margin: 4px 0 8px; }
.story-copy p { color: #b8c6bc; font-size: 13px; line-height: 1.9; max-width: 760px; }
.story-goal-line { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; color: #d8c59a; font-size: 12px; }
.story-progress { height: 6px; border-radius: 99px; background: rgba(0,0,0,.4); margin-top: 6px; overflow: hidden; }
.story-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade-deep), var(--jade), var(--gold)); box-shadow: 0 0 10px rgba(139,212,189,.3); }
.story-reward { margin-top: 10px; color: #9aac9f; font-size: 11px; }
.story-actions { margin-top: 14px; }
.story-timeline { padding: 4px 14px 12px; }
.story-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(223,184,114,.07); }
.story-item:last-child { border-bottom: 0; }
.story-dot { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); color: #7f9388; font-size: 11px; }
.story-item.done .story-dot { border-color: rgba(139,212,189,.5); color: var(--jade); background: rgba(139,212,189,.08); }
.story-item.now .story-dot { border-color: rgba(223,184,114,.65); color: var(--gold); box-shadow: 0 0 12px rgba(223,184,114,.2); }
.story-item-main { flex: 1; }
.story-item-kicker { color: #7f9388; font-size: 10px; letter-spacing: .1em; }
.story-item-title { color: #d9dfd5; font-family: var(--serif); font-size: 14px; }
.story-item.now .story-item-title { color: #f0ddb3; }
.story-item-goal { color: #8ea096; font-size: 10px; margin-top: 2px; }
.story-item-state { color: #7f9388; font-size: 10px; }
@media (max-width: 760px) {
  .story-banner { flex-wrap: wrap; gap: 8px; }
  .sb-actions { width: 100%; justify-content: flex-end; }
  .story-current { flex-direction: column; gap: 12px; padding: 14px; }
  .story-portrait { width: 56px; height: 56px; flex-basis: 56px; font-size: 26px; }
  .story-copy h3 { font-size: 20px; }
}
/* 大境界斩妖引导 */
.major-hunt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 8px 10px; border: 1px solid rgba(201,88,68,.28); border-left: 2px solid rgba(201,88,68,.7); background: rgba(201,88,68,.06); border-radius: 2px; color: #d8b7a4; font-size: 11.5px; }
.major-hunt b { color: #f0c08a; font-size: 15px; margin: 0 2px; }
@media (max-width: 760px) { .major-hunt { flex-wrap: wrap; } .major-hunt .btn { width: 100%; } }
/* ---------------- 手机操作优化 ---------------- */
button, .btn, .chip, .nav-item, .res-item { touch-action: manipulation; }
button, a, .btn, .chip, .nav-item { -webkit-tap-highlight-color: transparent; }
.mobile-only { display: none; }
.mkt-filter-toggle { display: none; margin-bottom: 10px; }
@media (max-width: 760px) {
  .mobile-only { display: flex; }
  .rail-toggle { display: none !important; }
  .rail-backdrop { display: none !important; }
  .topbar {
    padding: 8px 10px 7px;
    gap: 5px 8px;
  }
  .who { flex: 1 1 auto; min-width: 0; }
  .who-name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
  .who-realm { flex: 0 0 auto; }
  .res {
    order: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, 32px);
    align-items: center;
    gap: 4px;
    width: 100%;
    flex: 1 1 100%;
  }
  .res-item { min-width: 0; padding: 3px 5px; text-align: left; overflow: hidden; }
  .res-item.online { display: none; }
  .res-item .k { display: block; font-size: 8px; line-height: 1.25; letter-spacing: .05em; }
  .res-item .v { display: block; font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-btn, .mail-btn { width: 32px; height: 32px; min-width: 32px; border-radius: 4px; }
  .exp-wrap { order: 3; width: 100%; flex: 1 1 100%; }
  .exp-top { font-size: 10px; }
  .sidenav {
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
  }
  .nav-item { scroll-snap-align: center; min-width: 56px; min-height: 52px; }
  .nav-item .ic { width: 30px; height: 30px; }
  .page { padding: 15px 12px 118px; }
  .page-head { gap: 8px; flex-wrap: wrap; align-items: flex-start; }
  .page-head h2 { font-size: 24px; }
  .page-side { flex-wrap: wrap; }
  .panel-head { padding: 10px 12px; }
  .panel-head h3 { font-size: 13px; letter-spacing: .14em; }
  .panel-head .hint { text-align: right; }
  .btn { min-height: 36px; padding: 8px 12px; }
  .btn.small, .btn.tiny { min-height: 32px; }
  .input, select.input, textarea { min-height: 38px; font-size: 16px; }
  .modal { width: 94vw; max-height: 90vh; display: flex; flex-direction: column; }
  .modal-body { overflow-y: auto; max-height: calc(90vh - 58px); padding: 14px; }
  .modal-head { padding: 12px 14px; }
  .stat-line { gap: 10px; padding: 8px 12px; }
  .stat-line .k { flex: 0 0 auto; }
  .stat-line .v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
  .board-table { font-size: 11px; }
  .board-table th, .board-table td { padding: 8px 4px; }
  .board-table th:nth-child(4), .board-table td:nth-child(4) { display: none; }
  .mkt-filter-toggle { display: inline-flex; }
  .mkt-toolbar { display: none; margin-bottom: 10px; }
  .mkt-toolbar.open { display: flex; }
  .mkt-head { display: none; }
  .mkt-row { padding: 8px 10px; gap: 2px 8px; }
  .mkt-row .last { display: none; }
  .mkt-row .num { padding: 1px 0; }
  .mkt-row .act .btn { min-height: 34px; }
  .pvp-table th, .pvp-table td { padding: 7px 4px; font-size: 11px; }
  .dungeon-grid, .guild-grid, .social-grid, .skill-library, .manual-grid { grid-template-columns: 1fr !important; }
  .story-copy p { font-size: 12px; }
  .story-current { padding: 12px; }
  .major-hunt { flex-wrap: wrap; }
  .dg-skillbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-skill { justify-content: center; }
  .topbar::after { left: 8px; right: 8px; }
}
/* 丹药详情 */
.pill-detail-top { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.pill-detail-top .tile { flex: 0 0 76px; }
.pill-detail-name { font-family: var(--serif); font-size: 24px; color: #f0ddb3; letter-spacing: .1em; }
.pill-detail-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pill-detail-tags .tag { margin-left: 0; }
.pill-detail-price { margin-top: 7px; color: #8fa197; font-size: 11px; }
.pill-fact { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(223,184,114,.1); font-size: 12px; }
.pill-fact span { flex: 0 0 62px; color: #82958b; }
.pill-fact b { color: #d8c59a; font-weight: 500; }
.pill-lore { margin: 10px 0 14px; padding: 10px 12px; border-left: 2px solid rgba(223,184,114,.35); background: rgba(255,248,226,.035); color: #9aac9f; font-family: var(--serif); font-size: 12px; line-height: 1.9; }
.pill-detail-actions { display: flex; gap: 8px; }
.pill-detail-actions .btn { flex: 1; }
@media (max-width: 760px) { .pill-detail-name { font-size: 20px; } .pill-detail-top .tile { flex-basis: 64px; } }
/* ---------------- 全端防遮挡 ---------------- */
.btn, .chip, .tag { white-space: nowrap; }
.cult-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 18px; }
.social-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); }
.side-stack { width: auto; min-width: 0; }
.panel-head { flex-wrap: wrap; gap: 6px; }
.page { overflow-x: hidden; }
.battle-zone-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.battle-zone-head .zone-name { white-space: nowrap; }
.battle-zone-head .hint-line { margin-left: auto; }
.major-hunt, .major-actions { flex-wrap: wrap; }
.major-hunt .btn, .major-actions .btn { white-space: nowrap; }

@media (min-width: 761px) {
  .sidenav { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(223,184,114,.35) transparent; padding-bottom: 10px; }
  .sidenav::-webkit-scrollbar { width: 4px; }
  .sidenav::-webkit-scrollbar-thumb { background: rgba(223,184,114,.32); border-radius: 4px; }
  .nav-item { min-height: 42px; padding: 2px 0; margin: 1px 5px; }
  .nav-item .ic { width: 27px; height: 27px; font-size: 14px; }
  .nav-item .lb { font-size: 9px; line-height: 1.1; }
}

@media (min-width: 761px) and (max-height: 820px) {
  .nav-item { min-height: 36px; padding: 1px 0; margin: 1px 4px; }
  .nav-item .ic { width: 24px; height: 24px; font-size: 12px; }
  .nav-item .lb { font-size: 8px; line-height: 1; }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .topbar { grid-template-columns: 240px minmax(0, 1fr) 330px; gap: 12px; }
}

@media (min-width: 761px) and (max-width: 980px) {
  .topbar { grid-template-columns: 240px minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 1100px) {
  .rail-toggle, .rail-backdrop { display: none !important; }
  .mobile-only { display: flex; }
}

@media (max-width: 760px) {
  .battle-zone-head { gap: 5px 10px; }
  .battle-zone-head .hint-line { flex: 1 1 100%; margin-left: 0 !important; order: 3; }
  .party-head { flex-wrap: wrap; gap: 8px; }
  .party-head .tag { white-space: nowrap; flex: 0 0 auto; }
  .party-head .hint-line { flex: 1 1 100%; order: 2; }
  .party-head .btn { margin-left: 0 !important; order: 3; white-space: nowrap; }
  .pvp-table th:nth-child(3), .pvp-table td:nth-child(3),
  .pvp-table th:nth-child(5), .pvp-table td:nth-child(5) { display: none; }
  .pvp-table .btn.tiny { white-space: nowrap; }
  .page-side { max-width: 100%; }
  .page-side .tag { white-space: nowrap; }
  .modal { max-width: 96vw; }
  .modal-head { flex: 0 0 auto; }
}
/* 手机端回退：更早的初版布局 */
@media (max-width: 760px) {
  .mobile-only { display: none !important; }
  .rail-toggle {
    display: grid !important;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    z-index: 60;
  }
  .rail-backdrop { display: none !important; }
  #game.rail-open .rail-backdrop { display: block !important; }
  .res {
    grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(3, 28px);
  }
  .res-item.online { display: block; }
  .chat-btn, .mail-btn { width: 28px; height: 28px; min-width: 28px; }
  .mkt-filter-toggle { display: none !important; }
  .mkt-toolbar { display: flex !important; }
  .mkt-row { padding: 10px 12px; gap: 2px 12px; }
  .mkt-row .last { display: flex; }
}
/* 手机端最终单栏修复：防止平板双栏样式把页面撑宽 */
@media (max-width: 760px) {
  html, body, #app, .game { max-width: 100%; overflow-x: hidden !important; }
  .page { width: 100%; max-width: 100vw; overflow-x: hidden !important; overflow-y: auto; }
  .cult-grid, .social-grid, .char-grid, .dungeon-grid, .guild-grid,
  .skill-library, .manual-grid, .story-grid, .auction-grid, .pvp-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .cult-stage, .side-stack, .panel, .char-card, .cult-main {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .cult-ring, .cult-ring-wrap { max-width: min(250px, 70vw); margin-left: auto; margin-right: auto; }
  .page-head, .page-side, .story-banner, .major-panel, .major-card { max-width: 100%; min-width: 0; }
  .res { min-width: 0; }
  .res-item { min-width: 0; overflow: hidden; }
  .res-item .v { overflow: hidden; text-overflow: ellipsis; }
  .topbar { max-width: 100vw; overflow: hidden; }
  body { position: relative; }
}
/* 材料获取方式 */
.mat.source { font: inherit; color: #9fb5a8; background: transparent; border: 0; border-bottom: 1px dashed rgba(159,181,168,.35); padding: 1px 2px; cursor: pointer; text-align: left; }
.mat.source:hover { color: var(--gold-soft); border-bottom-color: var(--gold); }
.mat.source.miss { color: #d98b7b; border-bottom-color: rgba(217,139,123,.4); }
.mat-source-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.mat-source-head .tile { flex: 0 0 70px; }
.mat-source-name { font-family: var(--serif); font-size: 22px; color: #f0ddb3; letter-spacing: .08em; }
.mat-source-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.mat-source-desc { color: #8ea096; font-size: 11.5px; line-height: 1.7; margin-top: 7px; }
.src-block { border-top: 1px solid rgba(223,184,114,.12); padding: 9px 0 4px; }
.src-title { color: var(--gold-soft); font-family: var(--serif); font-size: 12px; letter-spacing: .14em; margin-bottom: 4px; }
.src-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.src-row > div { flex: 1; min-width: 0; }
.src-row b { color: #d9dfd5; font-weight: 500; font-size: 12.5px; }
.src-sub { display: block; color: #82958b; font-size: 10.5px; margin-top: 2px; }
.src-lv { color: #82958b; font-size: 10px; }
.mat-source-actions { display: flex; gap: 6px; margin-top: 12px; }
.mat-source-actions .btn { flex: 1; }
@media (max-width: 760px) {
  .mat-source-head .tile { flex-basis: 58px; }
  .mat-source-actions { flex-wrap: wrap; }
  .mat-source-actions .btn { flex: 1 1 30%; }
}
/* 论剑申请 / 投降 */
.pvp-duel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#pvp-turn-status { flex: 1 1 180px; text-align: left; }
#pvp-turn-timer { color: #d8b06a; font-variant-numeric: tabular-nums; }
.pvp-duel-foot .hint { text-align: left; }
.pvp-request { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0 14px; }
.pvp-request-mark { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; border: 1px solid rgba(201,88,68,.6); color: #e58b74; font-family: var(--serif); font-size: 26px; background: rgba(201,88,68,.06); transform: rotate(-2deg); }
.pvp-request-main { flex: 1; min-width: 0; }
.pvp-request-from { font-family: var(--serif); font-size: 22px; color: #f0ddb3; letter-spacing: .08em; }
.pvp-request-meta { color: #8fa197; font-size: 11px; margin-top: 3px; }
.pvp-request-main p { color: #b8c6bc; font-size: 12.5px; line-height: 1.9; margin: 10px 0 6px; }
.pvp-request-actions { display: flex; gap: 8px; }
.pvp-request-actions .btn { flex: 1; }
@media (max-width: 760px) {
  .pvp-duel-foot { align-items: flex-end; }
  .pvp-request { gap: 10px; }
  .pvp-request-mark { width: 44px; height: 44px; flex-basis: 44px; font-size: 21px; }
  .pvp-request-actions { flex-wrap: wrap; }
  .pvp-request-actions .btn { flex: 1 1 45%; }
}
/* 装备栏位选择 */
.enhance-bonus { margin-top: 5px; color: #d8b06a; font-size: 10px; line-height: 1.5; letter-spacing: .02em; }
.equip-slot-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.equip-slot-actions .btn { flex: 1 1 120px; }
.equip-picker-hint { color: #8fa197; font-size: 11.5px; line-height: 1.7; margin: 2px 0 10px; }
.equip-pick-list { display: flex; flex-direction: column; gap: 7px; max-height: 48vh; overflow-y: auto; padding-right: 2px; }
.equip-pick-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px; border: 1px solid rgba(223,184,114,.16); border-radius: 3px; background: rgba(255,248,226,.022); color: inherit; cursor: pointer; }
.equip-pick-row:hover { border-color: rgba(223,184,114,.45); background: rgba(223,184,114,.055); }
.equip-pick-row .tile { flex: 0 0 44px; width: 44px; }
.equip-pick-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.equip-pick-row-main b { color: #d9dfd5; font-family: var(--serif); font-size: 13px; font-weight: 500; }
.equip-pick-row-main small { color: #7f9388; font-size: 10px; }
.equip-pick-mini { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.equip-pick-mini .equip-stat { font-size: 10px; }
.equip-on-tag { color: var(--jade); font-size: 9px; font-style: normal; margin-left: 4px; }
.equip-current-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(223,184,114,.12); color: #9aac9f; font-size: 11px; }
.equip-pick-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.equip-pick-head .tile { flex: 0 0 66px; }
.equip-pick-name { font-family: var(--serif); font-size: 23px; color: #f0ddb3; letter-spacing: .08em; }
.equip-pick-desc { color: #8ea096; font-size: 11px; line-height: 1.7; margin-top: 6px; }
.equip-stat-block { border-top: 1px solid rgba(223,184,114,.12); padding-top: 8px; }
.equip-stat-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 5px 0; }
.equip-stat { display: inline-flex; gap: 5px; font-size: 11.5px; }
.equip-stat b { color: #82958b; font-weight: 400; }
.equip-stat em { color: #d8c59a; font-style: normal; }
.equip-current-box { margin-top: 8px; padding: 8px 10px; background: rgba(255,248,226,.03); border-left: 2px solid rgba(223,184,114,.3); }
.equip-picker-actions { display: flex; gap: 8px; margin-top: 14px; }
.equip-picker-actions .btn { flex: 1; }
@media (max-width: 760px) {
  .equip-pick-list { max-height: 42vh; }
  .equip-picker-actions { flex-wrap: wrap; }
  .equip-slot-actions .btn { flex: 1 1 100%; }
}
/* ---------------- 品阶边框 / 图标短签 ---------------- */
.tile .q {
  right: auto;
  left: 3px;
  bottom: 1px;
  z-index: 3;
  font-size: 9px;
}
.tile-label {
  position: absolute;
  right: 2px;
  bottom: 1px;
  z-index: 3;
  padding: 0 1px;
  border: 1px solid color-mix(in srgb, var(--tc) 26%, transparent);
  border-radius: 1px;
  background: rgba(4, 10, 10, .55);
  color: var(--tc);
  font-family: var(--serif);
  font-size: 7px;
  line-height: 1.3;
  min-width: 8px;
  text-align: center;
  letter-spacing: .02em;
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
}
.tile.lg .tile-label, .tile.xl .tile-label { right: 4px; bottom: 3px; font-size: 9px; }
.tile.t1 { border-color: #7f8f88; }
.tile.t2 { border-color: #6fa88e; box-shadow: inset 0 0 0 2px rgba(111,168,142,.16), inset 0 0 16px rgba(0,0,0,.38); }
.tile.t3 { border-color: #c3a15d; outline: 1px solid rgba(195,161,93,.34); outline-offset: -3px; }
.tile.t4 { border-color: #7fa7c9; border-width: 2px; border-style: double; outline: 1px solid rgba(127,167,201,.34); outline-offset: -4px; }
.tile.t5 { border-color: #b28ac9; border-width: 2px; box-shadow: inset 0 0 0 1px rgba(178,138,201,.28), 0 0 10px rgba(178,138,201,.12); }
.tile.t6 { border-color: #d8b06a; border-width: 2px; box-shadow: 0 0 0 1px rgba(168,63,47,.55), inset 0 0 0 1px rgba(216,176,106,.35), 0 0 12px rgba(216,176,106,.14); }
.tile.t3 .tile-label, .tile.t4 .tile-label { color: #e8d3a4; }
.tile.t5 .tile-label { color: #e2c8f1; }
.tile.t6 .tile-label { color: #f1d79b; border-color: rgba(168,63,47,.65); }
/* ---------------- 功法秘籍 ---------------- */
.manual-books { margin-bottom: 14px; }
.manual-book-list { display: grid; gap: 8px; margin-top: 10px; }
.manual-book {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(223, 184, 114, .18);
  background: linear-gradient(160deg, rgba(18, 34, 33, .58), rgba(5, 12, 13, .7));
}
.manual-book .tile { width: 44px; flex: 0 0 44px; }
.manual-book-main { flex: 1; min-width: 0; }
.manual-book .manual-name { font-size: 14px; }
.manual-book .manual-sub { margin-top: 3px; font-size: 11px; color: #8fa49a; }
.manual-book .btn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .manual-book { padding: 7px 8px; gap: 8px; }
  .manual-book .tile { width: 38px; flex-basis: 38px; }
  .manual-book .manual-name { font-size: 12px; }
  .manual-book .manual-sub { font-size: 10px; }
}
.manual-card.basic { border-color: rgba(223, 184, 114, .3); }
.manual-card > .btn { margin-top: 8px; }
/* ---------------- 坊市会员 / 限购 ---------------- */
.mkt-member { padding: 12px 14px; margin-bottom: 14px; }
.mkt-member-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mkt-member-name { color: #e5cf9f; font-family: var(--serif); font-size: 16px; letter-spacing: .08em; }
.mkt-member-buy { color: #9fb4a8; font-size: 12px; }
.mkt-member-buy b { color: #e8d3a4; font-size: 14px; }
@media (max-width: 760px) {
  .mkt-member-top { align-items: flex-start; flex-direction: column; gap: 4px; }
}
/* ---------------- 限时活动 ---------------- */
.event-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(223, 184, 114, .26);
  background: linear-gradient(135deg, rgba(18, 40, 40, .85), rgba(5, 14, 15, .92));
  margin-bottom: 14px;
}
.event-art { min-width: 0; position: relative; overflow: hidden; }
.event-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 68%, rgba(5, 14, 15, .72));
  pointer-events: none;
}
.event-art-svg { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.event-info { padding: 28px 28px 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.event-kicker { color: #d8b06a; font-size: 11px; letter-spacing: .26em; font-family: var(--serif); }
.event-title { margin: 0; color: #f0e2bd; font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: .12em; }
.event-desc { margin: 0; color: #b7c9bd; font-size: 13px; line-height: 1.9; }
.event-buff {
  align-self: flex-start; padding: 7px 13px; color: #f4dfac;
  border: 1px solid rgba(216, 176, 106, .45); background: rgba(216, 176, 106, .08);
  font-family: var(--serif); font-size: 15px; letter-spacing: .04em;
}
.event-clock { color: #8fa79b; font-size: 12px; }
.event-clock b { color: #e8d3a4; font-weight: 400; font-variant-numeric: tabular-nums; }
.event-story { margin-bottom: 14px; }
.event-story-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.event-story-head h3 { margin: 2px 0 0; font-size: 18px; color: #e8d3a4; font-weight: 400; }
.event-seal {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
  color: #d98a72; border: 1px solid rgba(168, 63, 47, .6); font-family: var(--serif); font-size: 20px;
}
.event-story p { margin: 0; color: #b9c9bd; font-size: 13px; line-height: 2; }
.event-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.event-rule { padding: 12px 14px; border: 1px solid rgba(223, 184, 114, .14); background: rgba(9, 22, 22, .5); }
.event-rule b { display: block; color: #e0c88f; font-family: var(--serif); font-weight: 400; font-size: 14px; }
.event-rule span { display: block; margin-top: 4px; color: #8fa49a; font-size: 11px; }
.event-empty { display: flex; align-items: center; gap: 22px; overflow: hidden; }
.event-empty .event-art { flex: 0 0 46%; }
.event-empty .event-art::after { background: linear-gradient(90deg, transparent 0%, rgba(5, 14, 15, .85)); }
.event-empty .event-art-svg { filter: grayscale(.8) brightness(.55); }
.event-empty-copy { padding: 20px 20px 20px 0; }
.event-empty-copy h2 { margin: 4px 0 8px; color: #cbbf9e; font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: .12em; }
.event-empty-copy p { margin: 0; color: #7f958b; font-size: 12px; line-height: 1.9; }
@media (max-width: 760px) {
  .event-hero { grid-template-columns: minmax(0, 1fr); }
  .event-art-svg { min-height: 190px; max-height: 230px; }
  .event-info { padding: 16px 16px 18px; }
  .event-title { font-size: 27px; }
  .event-rules { grid-template-columns: minmax(0, 1fr); }
  .event-empty { display: block; }
  .event-empty .event-art { width: 100%; }
  .event-empty .event-art-svg { max-height: 190px; }
  .event-empty-copy { padding: 14px 16px 18px; }
}
.nav-item.event-live .lb { color: #e8d3a4; }
.nav-item.event-live .ic { color: #f0d9a0; text-shadow: 0 0 10px rgba(240,217,160,.5); }
.cult-event {
  margin-top: 4px; color: #e6cf98; font-family: var(--serif);
  font-size: 11px; letter-spacing: .04em;
  text-shadow: 0 0 10px rgba(230, 207, 152, .25);
}
.event-inline { color: #cbb27a; }
#t-rate.event-boost { color: #e8d3a4; }
/* ---------------- 副本/PVP 灵力条 ---------------- */
.dm-spirit { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.dm-spirit span { color: #7fb8c9; font-size: 9px; }
.dm-spirit i { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #4e9bb0, #9adbe8); box-shadow: 0 0 5px rgba(126, 203, 220, .35); }
.dg-spirit { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: #8fc3d0; font-size: 11px; }
.dg-spirit .bar { flex: 1; max-width: 220px; background: rgba(44, 95, 108, .25); border-color: rgba(109, 190, 208, .28); }
.dg-spirit .bar i { background: linear-gradient(90deg, #3c8497, #91d7e4); }
.dg-spirit b { color: #b8e1ea; font-weight: 400; font-variant-numeric: tabular-nums; }
.dg-spirit em { color: #d8c18d; font-style: normal; font-size: 10px; }
.dg-skill em { display: block; margin-top: 3px; color: #9db5aa; font-size: 9px; font-style: normal; line-height: 1.35; max-width: 150px; }
.dg-skill.disabled, .dg-skill:disabled { opacity: .45; }
/* ---------------- 论剑灵力 / 技能说明 ---------------- */
.bar.spirit { height: 5px !important; margin-top: 5px; border-color: rgba(103, 190, 208, .3); background: rgba(31, 76, 88, .45); }
.bar.spirit > i { background: linear-gradient(90deg, #3d7f93, #8fd8e6); box-shadow: 0 0 7px rgba(124, 206, 224, .38); }
.pvp-duel-sides .right .bar.spirit > i { margin-left: auto; }
.spirit-hint { color: #80b9c8 !important; }
.pvp-buffs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 6px 0; }
.pvp-skill-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; max-width: 170px; }
.pvp-skill-btn span { color: #8fc3d0; font-size: 10px; }
.pvp-skill-btn em { color: #9db5aa; font-size: 9px; font-style: normal; line-height: 1.3; }
.pvp-skill-btn:disabled { opacity: .42; }
.pill-odds { margin-top: 4px; color: #9da98f; font-size: 9px; line-height: 1.5; letter-spacing: .01em; }
/* ---------------- 直接出售 ---------------- */
.direct-sell-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid rgba(216, 176, 106, .22);
  background: rgba(216, 176, 106, .045);
}
.direct-sell-box b { display: block; color: #e5cf9f; font-family: var(--serif); font-weight: 400; font-size: 14px; }
.direct-sell-box span { display: block; margin-top: 3px; color: #8fa49a; font-size: 10px; }
.direct-sell-box .btn { flex: 0 0 auto; }
/* 聚灵阵 1~20 级长进度 */
.guild-skill-grid .pips { flex-wrap: wrap; row-gap: 3px; }
.guild-skill-grid .pips .pip { width: 9px; }
/* 拍卖行搜索筛选 */
.auc-toolbar { margin: 0 0 12px; }
.auc-toolbar .mkt-search { min-width: 180px; flex: 1 1 200px; max-width: 320px; }
/* 仙玉兑换 */
.jade-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; color: #9fb4a8; font-size: 12px; }
.jade-field .input { width: 100%; }
.jade-actions { display: flex; gap: 8px; margin-top: 16px; }
.jade-actions .btn { flex: 1; }
/* ---------------- 论剑实时动画 ---------------- */
.pvp-duel-stage {
  position: relative;
  height: 116px;
  margin: 6px 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(127, 209, 185, .12), transparent 60%),
    linear-gradient(180deg, rgba(5, 12, 14, .15), rgba(5, 12, 14, .45));
  border-top: 1px solid rgba(223, 184, 114, .08);
  border-bottom: 1px solid rgba(223, 184, 114, .08);
}
.pvp-duel-avatar {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(223, 184, 114, .5);
  background: radial-gradient(circle at 50% 38%, #dfcda6, #7b6b4d 58%, #25231d);
  box-shadow: 0 0 0 4px rgba(223, 184, 114, .06), 0 8px 22px rgba(0, 0, 0, .55);
  transition: transform .16s ease;
}
.pvp-duel-avatar.right { background: radial-gradient(circle at 50% 38%, #b7d3c9, #536f6a 58%, #1e2a29); border-color: rgba(127, 209, 185, .5); }
.pvp-duel-avatar span { color: #1d1a14; font-family: var(--serif); font-size: 23px; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.pvp-duel-avatar::after { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(223,184,114,.12); border-radius: 50%; }
.pvp-duel-avatar.strike-right { animation: pvpStrikeRight .34s cubic-bezier(.2,.8,.3,1); }
.pvp-duel-avatar.strike-left { animation: pvpStrikeLeft .34s cubic-bezier(.2,.8,.3,1); }
.pvp-duel-avatar.recoil { animation: pvpRecoil .3s ease-out; }
@keyframes pvpStrikeRight { 0% { transform: translateX(0) scale(1); } 42% { transform: translateX(26px) scale(1.06); } 100% { transform: translateX(0) scale(1); } }
@keyframes pvpStrikeLeft { 0% { transform: translateX(0) scale(1); } 42% { transform: translateX(-26px) scale(1.06); } 100% { transform: translateX(0) scale(1); } }
@keyframes pvpRecoil { 0% { transform: translateX(0); filter: brightness(1); } 30% { transform: translateX(9px) rotate(2deg); filter: brightness(1.7); } 100% { transform: translateX(0) rotate(0); filter: brightness(1); } }
.pvp-duel-avatar.strike-left + .pvp-duel-rift + .pvp-duel-avatar.recoil { transform: translateX(-9px); }
.pvp-duel-rift { position: relative; z-index: 1; display: grid; place-items: center; width: 74px; height: 74px; color: rgba(223,184,114,.35); font-family: var(--serif); font-size: 18px; }
.pvp-duel-rift::before, .pvp-duel-rift::after { content: ""; position: absolute; width: 74px; height: 1px; background: linear-gradient(90deg, transparent, rgba(223,184,114,.35), transparent); transform: rotate(25deg); }
.pvp-duel-rift::after { transform: rotate(-25deg); }
.pvp-duel-rift b { font-weight: 400; }
.pvp-duel-impact {
  position: absolute;
  top: 26%;
  z-index: 4;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border: 2px solid hsl(var(--fx-h) 75% 65%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f6e7c3;
  font-size: 16px;
  pointer-events: none;
  animation: pvpImpact .72s ease-out forwards;
  box-shadow: 0 0 25px hsl(var(--fx-h) 80% 60% / .65), inset 0 0 18px hsl(var(--fx-h) 80% 60% / .35);
}
.pvp-duel-impact.heal { border-color: #7fd1b9; color: #b8f1d9; box-shadow: 0 0 24px rgba(127,209,185,.6); }
.pvp-duel-impact.buff { border-color: #e8c97f; color: #f4e3b2; }
.pvp-duel-impact.stun, .pvp-duel-impact.control { border-color: #b795e8; color: #e3d1ff; }
.pvp-duel-impact.dodge { border-radius: 8px; border-color: #9fb4a8; }
@keyframes pvpImpact { 0% { transform: scale(.2); opacity: 0; } 28% { opacity: 1; transform: scale(1.15); } 100% { transform: scale(1.7); opacity: 0; } }
.pvp-duel-number {
  position: absolute;
  top: 34%;
  z-index: 5;
  margin-left: -32px;
  min-width: 64px;
  text-align: center;
  color: #f2ded0;
  font-family: var(--serif);
  font-size: 19px;
  text-shadow: 0 2px 6px #000;
  pointer-events: none;
  animation: pvpNumber .8s ease-out forwards;
}
.pvp-duel-number.crit { color: #ffd27a; font-size: 24px; }
.pvp-duel-number.heal { color: #8ee8bb; }
.pvp-duel-number.dodge { color: #b9c9c0; font-size: 14px; }
.pvp-duel-number.buff { color: #f0d48d; font-size: 13px; }
.pvp-duel-number.control, .pvp-duel-number.stun { color: #c7a6ff; font-size: 14px; }
@keyframes pvpNumber { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 22% { opacity: 1; transform: translateY(0) scale(1.08); } 100% { opacity: 0; transform: translateY(-26px) scale(1); } }
.pvp-result { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; background: rgba(2, 7, 8, .78); backdrop-filter: blur(3px); }
.pvp-result-card { width: min(430px, 92vw); padding: 28px 26px 22px; text-align: center; border: 1px solid rgba(223,184,114,.35); background: linear-gradient(160deg, rgba(24,42,40,.98), rgba(7,15,16,.99)); box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.pvp-result-kicker { color: #9fb4a8; font-size: 11px; letter-spacing: .22em; }
.pvp-result-title { margin: 9px 0; color: #e8d3a4; font-family: var(--serif); font-size: 34px; letter-spacing: .12em; }
.pvp-result.lose .pvp-result-title { color: #c9a29a; }
.pvp-result-vs { color: #8fa49a; font-size: 12px; }
.pvp-result-stats { display: flex; justify-content: center; gap: 22px; margin: 20px 0; color: #9fb4a8; font-size: 12px; }
.pvp-result-stats b { display: block; margin-top: 4px; color: #e8d3a4; font-family: var(--serif); font-weight: 400; font-size: 18px; }
.pvp-result-stats b.up { color: #7fd1b9; } .pvp-result-stats b.down { color: #d98a72; }
@media (max-width: 760px) {
  .pvp-duel-stage { height: 96px; padding: 0 4%; }
  .pvp-duel-avatar { width: 52px; height: 52px; }
  .pvp-duel-avatar span { font-size: 19px; }
  .pvp-duel-rift { width: 56px; height: 56px; }
}
/* 仙榜子榜 */
.board-tabs { margin-bottom: 12px; }
/* ---------------- 货币详情 ---------------- */
.res-item.currency { cursor: pointer; transition: background .18s ease, transform .18s ease; }
.res-item.currency:hover { background: rgba(127, 209, 185, .08); transform: translateY(-1px); }
.currency-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.currency-chip { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 13px; border: 1px solid rgba(223, 184, 114, .2); background: linear-gradient(160deg, rgba(19, 35, 33, .92), rgba(8, 17, 18, .94)); color: var(--text); cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.currency-chip:hover { border-color: rgba(223, 184, 114, .55); transform: translateY(-2px); background: linear-gradient(160deg, rgba(26, 47, 42, .96), rgba(9, 20, 20, .96)); }
.currency-chip-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(223,184,114,.3); color: #e8d3a4; font-family: var(--serif); font-size: 16px; background: rgba(223,184,114,.08); }
.currency-chip.crystals .currency-chip-icon { color: #8fd3e8; border-color: rgba(143,211,232,.35); background: rgba(143,211,232,.08); }
.currency-chip.skill .currency-chip-icon { color: #b7a6e8; border-color: rgba(183,166,232,.35); background: rgba(183,166,232,.08); }
.currency-chip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.currency-chip-body span { color: #8fa49a; font-size: 10.5px; letter-spacing: .1em; }
.currency-chip-body b { color: #eee3c8; font-family: var(--serif); font-size: 18px; font-weight: 400; }
.currency-chip-more { margin-left: auto; color: #73887f; font-size: 10px; }
.currency-detail { padding-top: 2px; }
.currency-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid rgba(223,184,114,.2); background: rgba(223,184,114,.045); }
.currency-hero.crystals { border-color: rgba(143,211,232,.22); background: rgba(143,211,232,.045); }
.currency-hero.skill { border-color: rgba(183,166,232,.22); background: rgba(183,166,232,.045); }
.currency-icon { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(223,184,114,.45); color: #e8d3a4; font-family: var(--serif); font-size: 25px; box-shadow: inset 0 0 18px rgba(223,184,114,.12), 0 0 20px rgba(223,184,114,.08); }
.currency-hero.crystals .currency-icon { color: #8fd3e8; border-color: rgba(143,211,232,.5); box-shadow: inset 0 0 18px rgba(143,211,232,.12); }
.currency-hero.skill .currency-icon { color: #c7b5f4; border-color: rgba(183,166,232,.5); box-shadow: inset 0 0 18px rgba(183,166,232,.12); }
.currency-name { color: #f2e6c8; font-family: var(--serif); font-size: 24px; letter-spacing: .1em; }
.currency-tagline { color: #9fb4a8; font-size: 11.5px; margin-top: 2px; }
.currency-balance { color: #8fa49a; font-size: 11.5px; margin-top: 5px; }
.currency-balance b { color: #7fd1b9; font-family: var(--serif); font-size: 18px; font-weight: 400; margin-left: 4px; }
.currency-lore { margin: 14px 0 16px; padding: 12px 14px; border-left: 2px solid rgba(223,184,114,.4); background: rgba(255,255,255,.025); color: #b8c6bd; font-size: 12.5px; line-height: 1.85; }
.currency-source-title { color: #e8d3a4; font-family: var(--serif); font-size: 14px; letter-spacing: .08em; margin-bottom: 8px; }
.currency-source { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.currency-source > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.currency-source b { color: #dfe9e2; font-size: 12.5px; font-weight: 500; }
.currency-source span { color: #8fa49a; font-size: 11px; line-height: 1.55; }
.currency-source .btn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .currency-strip { grid-template-columns: 1fr; gap: 8px; }
  .currency-chip { padding: 9px 11px; }
  .currency-source { align-items: flex-start; }
}
/* 功法自动运转 */
.manual-auto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 2px; }
.manual-dots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 180px; }
.manual-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(223,184,114,.4); background: rgba(223,184,114,.08); box-shadow: 0 0 4px rgba(223,184,114,.12); }
.manual-auto .hint { flex: 1 1 140px; font-size: 10.5px; color: #8fa49a; }
.manual-auto .btn { flex: 0 0 auto; }
/* ---------------- 角色战力 ---------------- */
.power-panel { margin-bottom: 16px; padding: 0 0 12px; overflow: hidden; }
.power-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px solid rgba(223,184,114,.12); background: linear-gradient(100deg, rgba(223,184,114,.07), transparent 65%); }
.power-head > div { display: flex; align-items: baseline; gap: 12px; }
.power-kicker { color: #9fb4a8; font-size: 11px; letter-spacing: .18em; }
.power-head b { color: #f0d79f; font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: .04em; text-shadow: 0 0 22px rgba(223,184,114,.2); }
.power-head .hint { text-align: right; font-size: 10.5px; color: #7f958b; }
.power-table-wrap { overflow-x: auto; }
.power-table { width: 100%; border-collapse: collapse; min-width: 650px; font-size: 12px; }
.power-table th { padding: 9px 12px; text-align: left; color: #81988d; font-weight: 400; font-size: 10.5px; letter-spacing: .06em; border-bottom: 1px solid rgba(255,255,255,.06); }
.power-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.045); color: #c8d6ce; font-variant-numeric: tabular-nums; }
.power-table td:first-child { color: #dfe9e2; }
.power-table tbody tr:hover { background: rgba(127,209,185,.04); }
.power-extra { color: #849b90 !important; font-size: 10.5px; }
.power-cell { text-align: right !important; color: #e8d3a4 !important; font-family: var(--serif); font-size: 15px; }
.power-table tfoot td { color: #8fa49a; font-size: 10.5px; border-bottom: 0; padding-top: 11px; }
.power-table tfoot .power-cell { color: #7fd1b9 !important; font-size: 18px; }
@media (max-width: 760px) {
  .power-head { align-items: flex-start; flex-direction: column; gap: 5px; padding: 12px 13px; }
  .power-head .hint { text-align: left; }
  .power-head b { font-size: 28px; }
  .power-table { min-width: 580px; }
  .power-table th, .power-table td { padding: 8px 9px; }
}
.manual-dot.on { background: #d8b06a; border-color: #f0d79f; box-shadow: 0 0 8px rgba(223, 184, 114, .45); }
/* 仙玉兑换副本机会 */
.jade-dungeon { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid rgba(127,209,185,.18); background: rgba(127,209,185,.045); }
.jade-dungeon > div { display: flex; flex-direction: column; gap: 3px; }
.jade-dungeon b { color: #a8dfcd; font-size: 12px; font-weight: 500; }
.jade-dungeon span { color: #81988d; font-size: 10.5px; }
/* 坊市每日行情 */
.mkt-row .name .daily { margin-left: 6px; font-size: 9.5px; padding: 1px 4px; border-radius: 3px; border: 1px solid rgba(255,255,255,.08); }
.mkt-row .name .daily.up { color: #e2a27f; border-color: rgba(226,162,127,.25); }
.mkt-row .name .daily.down { color: #7fd1b9; border-color: rgba(127,209,185,.25); }
.mkt-daily-line { margin-top: 5px; font-size: 11px; color: #8fa49a; }
.mkt-daily-line b { color: #e8d3a4; font-weight: 500; }
.mkt-daily-line .up { color: #e2a27f; }
.mkt-daily-line .down { color: #7fd1b9; }
/* 宗门技能点兑换 */
.guild-sp-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 14px 10px; padding: 10px 12px; border: 1px solid rgba(223,184,114,.16); background: rgba(223,184,114,.035); }
.guild-sp-buy > div { display: flex; flex-direction: column; gap: 3px; }
.guild-sp-buy b { color: #dfe9e2; font-size: 12px; font-weight: 500; }
.guild-sp-buy span { color: #81988d; font-size: 10.5px; }
/* 宗门贡献商店 */
.guild-pill-list { padding: 0 14px 12px; }
.guild-pill-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.guild-pill-row:last-child { border-bottom: 0; }
.guild-pill-row .tile { width: 42px; height: 42px; flex: 0 0 42px; }
.guild-pill-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.guild-pill-info b { color: #dfe9e2; font-size: 12.5px; font-weight: 500; }
.guild-pill-info span { color: #81988d; font-size: 10.5px; }
.guild-pill-cost { color: #e8d3a4; font-size: 12px; white-space: nowrap; }
.guild-pill-row .btn { flex: 0 0 auto; }
/* 顶部仙玉入口：不占角色面板 */
@media (min-width: 981px) {
  .topbar { grid-template-columns: 250px minmax(0, 1fr) 390px; }
  .res { gap: 14px; }
}
.res-item.jade-top .v { color: #e8d3a4; text-shadow: 0 0 12px rgba(223,184,114,.18); }
.res-item.jade-top { cursor: pointer; }
.res-item.jade-top:hover { background: rgba(223,184,114,.07); }
@media (max-width: 980px) {
  .res-item.jade-top { display: none; }
}
@media (max-width: 760px) {
  .res-item.jade-top { display: block; }
}
/* 拍卖物品详情 */
.auction-detail-head { display: flex; gap: 14px; align-items: flex-start; }
.auction-detail-name { color: #f2e6c8; font-family: var(--serif); font-size: 20px; }
.auction-detail-prices { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0; padding: 9px 11px; border: 1px solid rgba(223,184,114,.14); background: rgba(223,184,114,.035); color: #8fa49a; font-size: 12px; }
.auction-detail-prices b { color: #e8d3a4; font-family: var(--serif); font-size: 16px; font-weight: 400; }
.auction-detail-desc { color: #b8c6bd; font-size: 12.5px; line-height: 1.75; }
.auc-card .auc-tile, .auc-card .auc-name { cursor: pointer; }
.auc-card .auc-tile:hover, .auc-card .auc-name:hover { color: #f0d79f; }
/* 手机顶栏：行囊并入资源行，去掉右下悬浮球 */
.mobile-bag { display: none; }
@media (max-width: 760px) {
  .topbar { padding: 6px 8px 6px; gap: 4px 6px; }
  .res {
    grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(3, 28px);
    gap: 3px;
  }
  .res-item { padding: 2px 3px; }
  .res-item .k { font-size: 7.5px; letter-spacing: 0; }
  .res-item .v { font-size: 11.5px; }
  .chat-btn, .mail-btn, .mobile-bag { width: 28px; height: 28px; min-width: 28px; border-radius: 4px; }
  .mobile-bag { display: grid; place-items: center; }
  .mobile-bag .chat-ic { font-size: 13px; }
  .rail-toggle { display: none !important; }
  .rail-backdrop { display: none !important; }
  .exp-wrap { margin-top: 2px; }
  .exp-top { margin-bottom: 2px; }
}
/* 顶栏最终排版：4 资源 + 囊/言/信/账 四个图标同排 */
@media (max-width: 760px) {
  .res-item.online { display: none !important; }
  .res {
    grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(4, 27px) !important;
    gap: 2px !important;
  }
  .res-item { padding: 2px 2px !important; }
  .res-item .v { font-size: 11px !important; }
  .chat-btn, .mail-btn, .mobile-bag { width: 27px !important; height: 27px !important; min-width: 27px !important; }
  .mobile-bag { display: grid !important; }
}
/* PC 顶栏：隐藏在线计数，避免账号按钮掉行 */
.res-item.online { display: none !important; }
/* 顶栏加入技能点后的最终网格 */
.res { grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(3, 30px); }
.skill-point .v { color: #cdbdf2; }
@media (min-width: 981px) {
  .topbar { grid-template-columns: 250px minmax(0, 1fr) 430px; }
}
@media (min-width: 981px) and (max-width: 1240px) {
  .topbar { grid-template-columns: 190px minmax(0, 1fr) 380px; }
}
@media (max-width: 760px) {
  .res {
    grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(4, 26px) !important;
    gap: 2px !important;
  }
  .res-item .v { font-size: 10.5px !important; }
  .chat-btn, .mail-btn, .mobile-bag { width: 26px !important; height: 26px !important; min-width: 26px !important; }
}
/* 背包装备词条摘要 */
.bag-cell .baffix { max-width: 100%; color: #9fb4a8; font-size: 8.5px; line-height: 1.35; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* 修炼突破倒计时 */
.cult-eta { margin-top: 5px; color: #a9cbbd; font-size: 11.5px; letter-spacing: .04em; text-align: center; }
.cult-eta::before { content: '◷ '; color: #d8b06a; }
/* 洞府系统 */
.cave-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.cave-card { display: flex; align-items: center; gap: 14px; padding: 18px 18px; text-align: left; border: 1px solid rgba(216,176,106,.22); border-radius: 4px; background: linear-gradient(120deg, rgba(19,35,35,.9), rgba(10,20,22,.92)); color: var(--text); cursor: pointer; }
.cave-card:hover { border-color: rgba(216,176,106,.55); background: linear-gradient(120deg, rgba(28,48,45,.95), rgba(12,24,26,.95)); }
.cave-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border: 1px solid rgba(216,176,106,.4); border-radius: 50%; color: #e6c98f; font-family: var(--serif); font-size: 24px; background: rgba(216,176,106,.06); }
.cave-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cave-card-main b { color: #ead8b0; font-family: var(--serif); font-size: 19px; letter-spacing: .12em; }
.cave-card-main small { color: #8ca49a; font-size: 11px; line-height: 1.5; }
.cave-go { margin-left: auto; flex: 0 0 auto; color: #b99a63; font-size: 11px; }
.cave-array { padding: 18px 20px; }
.cave-array-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cave-kicker { color: #8ca49a; font-size: 10px; letter-spacing: .2em; }
.cave-array-head h3 { margin: 3px 0 0; color: #ecd6a6; font-family: var(--serif); font-size: 22px; letter-spacing: .16em; }
.cave-array-effect { text-align: right; }
.cave-array-effect b { display: block; color: #8fe0c2; font-family: var(--serif); font-size: 27px; }
.cave-array-effect span { color: #8ca49a; font-size: 10px; }
.cave-array-bar { position: relative; height: 10px; margin: 16px 0 12px; border: 1px solid rgba(127,209,185,.18); border-radius: 3px; background: rgba(0,0,0,.28); overflow: hidden; }
.cave-array-bar i { display: block; height: 100%; background: linear-gradient(90deg, #376f60, #7fd1b9); box-shadow: 0 0 12px rgba(127,209,185,.25); }
.cave-array-bar span { position: absolute; right: 8px; top: -1px; color: #d8e7dd; font-size: 9px; line-height: 10px; text-shadow: 0 1px 2px #000; }
.cave-array-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cave-array-note { color: #a7b8af; font-size: 12px; line-height: 1.6; }
.cave-mats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cave-stone, .cave-mat { padding: 3px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 2px; font-size: 10px; color: #93a69d; }
.cave-stone.ok, .cave-mat.ok { border-color: rgba(127,209,185,.28); color: #a8d8c7; }
.cave-stone.lack, .cave-mat.lack { border-color: rgba(208,96,74,.35); color: #d99483; }
.cave-stone b, .cave-mat b { color: #e6d5b2; font-weight: 500; }
@media (max-width: 760px) {
  .cave-grid { grid-template-columns: 1fr; gap: 10px; }
  .cave-card { padding: 14px; }
  .cave-go { display: none; }
  .cave-array { padding: 14px; }
  .cave-array-foot { align-items: stretch; }
  .cave-array-foot .btn { width: 100%; }
}
/* PC 左侧导航放大 */
@media (min-width: 981px) {
  .game { grid-template-columns: 120px minmax(0, 1fr) 344px; }
  .sidenav { padding: 16px 0; gap: 4px; overflow-y: auto; }
  .nav-item { padding: 10px 0; gap: 7px; }
  .nav-item .ic { width: 48px; height: 48px; font-size: 24px; border-radius: 10px; }
  .nav-item .lb { font-size: 13px; letter-spacing: .12em; }
  .nav-item.on { border-left-width: 3px; }
}
@media (min-width: 981px) and (max-width: 1240px) {
  .game { grid-template-columns: 108px minmax(0, 1fr) 304px; }
  .nav-item .ic { width: 44px; height: 44px; font-size: 21px; }
  .nav-item .lb { font-size: 12px; }
}
@media (min-width: 981px) and (max-height: 860px) {
  .nav-item { padding: 7px 0; gap: 5px; }
  .nav-item .ic { width: 44px; height: 44px; font-size: 21px; }
  .nav-item .lb { font-size: 12px; }
}
/* PC 左侧导航再次放大 */
@media (min-width: 981px) {
  .game { grid-template-columns: 144px minmax(0, 1fr) 344px; }
  .sidenav { padding: 18px 0; gap: 5px; }
  .nav-item { padding: 11px 0; gap: 8px; }
  .nav-item .ic { width: 56px; height: 56px; font-size: 28px; border-radius: 12px; }
  .nav-item .lb { font-size: 15px; letter-spacing: .14em; }
}
@media (min-width: 981px) and (max-width: 1240px) {
  .game { grid-template-columns: 130px minmax(0, 1fr) 304px; }
  .nav-item .ic { width: 52px; height: 52px; font-size: 25px; }
  .nav-item .lb { font-size: 14px; }
}
@media (min-width: 981px) and (max-height: 860px) {
  .nav-item { padding: 8px 0; gap: 6px; }
  .nav-item .ic { width: 50px; height: 50px; font-size: 24px; }
  .nav-item .lb { font-size: 14px; }
}
/* PC 左栏不压缩，保持大图标并可滚动 */
@media (min-width: 981px) {
  .nav-item { flex: 0 0 auto; }
  .nav-item .lb { line-height: 1.2; white-space: nowrap; }
  .sidenav { scrollbar-width: thin; scrollbar-color: rgba(216,176,106,.35) transparent; }
  .sidenav::-webkit-scrollbar { width: 5px; }
  .sidenav::-webkit-scrollbar-thumb { background: rgba(216,176,106,.3); border-radius: 4px; }
}
/* 功法副属性小标签 */
.manual-sec-tag { display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid rgba(127,209,185,.24); border-radius: 2px; color: #9ecfbe; font-family: var(--sans, sans-serif); font-size: 9px; line-height: 16px; letter-spacing: 0; vertical-align: 1px; }
.manual-sec-tag.sec-crit { border-color: rgba(207,116,92,.35); color: #df9b85; }
.manual-sec-tag.sec-critDmg { border-color: rgba(208,140,92,.35); color: #e0b184; }
.manual-sec-tag.sec-dodge { border-color: rgba(120,174,208,.32); color: #9dc6df; }
.manual-sec-tag.sec-lifesteal { border-color: rgba(190,100,120,.35); color: #d99aab; }
.manual-sec-tag.sec-cultPct { border-color: rgba(127,209,185,.34); color: #9fe0cb; }
/* PvE 战斗灵力条 */
.hpbar.spirit { height: 4px; margin-top: 5px; background: rgba(0,0,0,.42); border-color: rgba(127,209,185,.2); }
.hpbar.spirit i { background: linear-gradient(90deg, #376f60, #7fd1b9); box-shadow: 0 0 8px rgba(127,209,185,.25); }
.hpnum.spiritnum { margin-top: 2px; color: #9ecfbe; font-size: 10px; letter-spacing: .03em; }
/* 材料获取 → 采集/秘境定位 */
.src-row .btn { flex: 0 0 auto; }
.jump-highlight { animation: jumpPulse 1.8s ease-out; border-color: rgba(216,176,106,.85) !important; box-shadow: 0 0 0 2px rgba(216,176,106,.35), 0 0 28px rgba(216,176,106,.18) !important; }
@keyframes jumpPulse {
  0% { transform: scale(1); background-color: rgba(216,176,106,.18); }
  45% { transform: scale(1.012); background-color: rgba(216,176,106,.12); }
  100% { transform: scale(1); background-color: transparent; }
}
@media (max-width: 760px) {
  .src-row { flex-wrap: wrap; }
  .src-row .btn { margin-left: auto; }
}
/* 自动打坐状态 */
.cult-auto { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: #9fe0cb; font-size: 12px; letter-spacing: .08em; }
.cult-auto i { width: 7px; height: 7px; border-radius: 50%; background: #7fd1b9; box-shadow: 0 0 10px rgba(127,209,185,.6); animation: cultPulse 1.6s ease-in-out infinite; }
.cult-auto-note { text-align: center; margin: 2px 0 10px; }
@keyframes cultPulse { 0%,100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
/* ================= 修炼球：大境界特效 ================= */
.cult-orb {
  position: relative;
  z-index: 1;
  overflow: visible;
  color: #9fe6cf;
  transition: background .6s ease, box-shadow .6s ease;
}
.cult-orb > span { position: absolute; pointer-events: none; border-radius: 50%; }
.orb-aura {
  inset: -15px;
  background: radial-gradient(circle, rgba(127, 209, 185, .28), rgba(127, 209, 185, .08) 42%, transparent 70%);
  opacity: .65;
  animation: orbAura 4.2s ease-in-out infinite;
}
.orb-ring {
  inset: -9px;
  border: 1px solid currentColor;
  opacity: 0;
  transform: rotate(-18deg);
}
.orb-ring.r1 { border-right-color: transparent; border-left-color: transparent; animation: orbSpin 12s linear infinite; }
.orb-ring.r2 { inset: -16px; border-style: dashed; animation: orbSpin 20s linear infinite reverse; }
.orb-runes {
  inset: -22px;
  border: 1px dashed currentColor;
  opacity: 0;
  animation: orbSpin 32s linear infinite;
}
.orb-motes { inset: -27px; opacity: 0; }
.orb-motes i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
  animation: orbMote 3.2s ease-in-out infinite;
}
.orb-motes i:nth-child(1) { top: 3%; left: 48%; animation-delay: -0.2s; }
.orb-motes i:nth-child(2) { top: 24%; right: 1%; animation-delay: -1.1s; }
.orb-motes i:nth-child(3) { bottom: 16%; left: 3%; animation-delay: -2s; }
.orb-motes i:nth-child(4) { top: 48%; left: -1%; animation-delay: -0.7s; }
.orb-motes i:nth-child(5) { bottom: 4%; right: 26%; animation-delay: -1.6s; }
.orb-motes i:nth-child(6) { top: 7%; right: 23%; animation-delay: -2.7s; }

/* 炼气：基础灵光 */
.orb-stage-0 .orb-aura { opacity: .55; }

/* 筑基：双环灵台 */
.orb-stage-1 { color: #8fe6ff; box-shadow: 0 0 38px rgba(86, 190, 220, .5), inset -6px -8px 18px rgba(0, 0, 0, .35); }
.orb-stage-1 .orb-aura { inset: -18px; background: radial-gradient(circle, rgba(126, 219, 240, .3), transparent 68%); animation-duration: 3.4s; }
.orb-stage-1 .orb-ring.r1 { opacity: .7; }
.orb-stage-1 .orb-ring.r2 { opacity: .35; }
.orb-stage-1 .orb-runes { opacity: .28; animation-duration: 24s; }
.orb-stage-1 .orb-motes { opacity: 1; }
.orb-stage-1 .orb-motes i:nth-child(n+4) { display: none; }

/* 金丹：金色内丹与火星 */
.orb-stage-2 {
  color: #ffd77a;
  background: radial-gradient(circle at 38% 30%, #fffbe8, #ffe39a 30%, #d39a3e 64%, #694315 90%);
  box-shadow: 0 0 42px rgba(255, 204, 96, .62), 0 0 76px rgba(255, 186, 64, .22), inset -6px -8px 18px rgba(60, 30, 0, .38);
}
.orb-stage-2 .orb-aura { inset: -21px; background: radial-gradient(circle, rgba(255, 208, 107, .34), rgba(255, 180, 55, .1) 46%, transparent 70%); animation-duration: 2.7s; }
.orb-stage-2 .orb-ring.r1 { opacity: .85; border-color: #ffd77a; border-right-color: transparent; border-left-color: transparent; animation-duration: 7s; }
.orb-stage-2 .orb-ring.r2 { opacity: .48; border-color: #f0b64c; animation-duration: 14s; }
.orb-stage-2 .orb-runes { opacity: .5; border-color: rgba(255, 214, 120, .7); animation-duration: 18s; }
.orb-stage-2 .orb-motes { opacity: 1; }
.orb-stage-2 .orb-motes i { width: 4px; height: 4px; background: #ffe9a8; box-shadow: 0 0 10px #ffc857; animation-duration: 2.4s; }

/* 元婴：多层灵环与漂浮元婴光点 */
.orb-stage-3 {
  color: #b9fff0;
  background: radial-gradient(circle at 38% 28%, #ffffff, #c8fff0 28%, #72d8c2 58%, #2b6d61 84%, #163e38);
  box-shadow: 0 0 48px rgba(150, 255, 225, .58), 0 0 96px rgba(120, 220, 200, .25), inset -8px -10px 22px rgba(0, 0, 0, .34);
}
.orb-stage-3::after {
  content: "";
  position: absolute;
  inset: -31px;
  border-radius: 50%;
  border: 1px solid rgba(185, 255, 240, .4);
  box-shadow: 0 0 18px rgba(150, 255, 225, .18), inset 0 0 18px rgba(150, 255, 225, .12);
  animation: orbPulse 3.8s ease-in-out infinite;
}
.orb-stage-3 .orb-aura { inset: -24px; background: radial-gradient(circle, rgba(158, 255, 230, .38), rgba(110, 220, 195, .12) 48%, transparent 72%); animation-duration: 2.4s; }
.orb-stage-3 .orb-ring.r1 { opacity: .95; border-width: 1.5px; border-color: #d8fff6; border-right-color: transparent; border-left-color: transparent; animation-duration: 5.5s; }
.orb-stage-3 .orb-ring.r2 { opacity: .6; border-color: #93ead8; animation-duration: 11s; }
.orb-stage-3 .orb-runes { inset: -27px; opacity: .62; border-color: rgba(216, 255, 246, .7); animation-duration: 14s; }
.orb-stage-3 .orb-motes { opacity: 1; }
.orb-stage-3 .orb-motes i { width: 4px; height: 4px; background: #e7fff8; box-shadow: 0 0 11px #9ffff0, 0 0 22px rgba(159, 255, 240, .5); animation-duration: 2.1s; }

@keyframes orbAura { 0%, 100% { transform: scale(.92); opacity: .42; } 50% { transform: scale(1.08); opacity: .82; } }
@keyframes orbSpin { to { transform: rotate(342deg); } }
@keyframes orbMote { 0%, 100% { transform: translate(0, 0) scale(.72); opacity: .25; } 50% { transform: translate(2px, -5px) scale(1.25); opacity: 1; } }
@keyframes orbPulse { 0%, 100% { transform: scale(.9); opacity: .3; } 50% { transform: scale(1.06); opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  .orb-aura, .orb-ring, .orb-runes, .orb-motes i, .orb-stage-3::after { animation: none !important; }
}
/* 高阶灵球留出光环空间 */
.orb-stage-2 { margin-bottom: 18px; }
.orb-stage-3 { margin-bottom: 22px; }
/* 修炼加成明细 */
.cult-breakdown { width: 100%; max-width: 360px; margin: 0 auto 12px; border: 1px solid rgba(127,209,185,.18); border-radius: 4px; background: rgba(4,12,13,.45); text-align: left; }
.cult-breakdown summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #9ecfbe; font-size: 11.5px; letter-spacing: .06em; cursor: pointer; list-style: none; }
.cult-breakdown summary::-webkit-details-marker { display: none; }
.cult-breakdown summary b { margin-left: auto; color: #e7d1a2; font-family: var(--serif); font-size: 13px; font-weight: 500; }
.cult-breakdown summary i { color: #748b80; font-size: 9px; font-style: normal; }
.cult-breakdown summary i::after { content: ' ▾'; }
.cult-breakdown[open] summary i::after { content: ' ▴'; }
.cult-breakdown-body { padding: 2px 12px 10px; border-top: 1px dashed rgba(127,209,185,.12); }
.cult-bd-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: #8ca49a; font-size: 11px; }
.cult-bd-row b { color: #d8c79f; font-weight: 500; font-variant-numeric: tabular-nums; }
.cult-bd-row.total { margin-top: 4px; padding-top: 7px; border-top: 1px solid rgba(216,176,106,.18); color: #e6d3aa; }
.cult-bd-row.total b { color: #8fe0c2; }
/* 心魔关 */
.heart-hunt { border-color: rgba(208,96,74,.4); background: rgba(208,96,74,.07); flex-wrap: wrap; }
.heart-hunt > span { flex: 1 1 220px; line-height: 1.6; }
.heart-undone { color: #e08a78 !important; }
.heart-done { color: #8fe0c2 !important; }
@media (max-width: 760px) { .heart-hunt .btn { width: 100%; } }
/* ================= 渡劫演出 ================= */
#trib-layer {
  background: #020507;
  --bolt: #eaf9ff;
  --bolt-deep: #79c8ff;
  overflow: hidden;
  isolation: isolate;
}
#trib-layer::after {
  content: '';
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(0,0,0,.24) 62%, rgba(0,0,0,.72) 100%);
}
.trib-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 8%, #263947 0%, #101b24 36%, #03070a 72%); }
.trib-vortex {
  position: absolute; left: 50%; top: -42vh;
  width: 130vw; height: 130vw; max-width: 1400px; max-height: 1400px;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg, transparent, rgba(84,125,154,.18), transparent 24%, rgba(120,166,196,.14), transparent 48%, rgba(62,96,124,.2), transparent 72%);
  border-radius: 50%;
  filter: blur(18px);
  animation: tribVortex 26s linear infinite;
  opacity: .85;
}
.trib-cloud {
  position: absolute; top: -18%; width: 70vw; height: 42vh;
  background: radial-gradient(ellipse at 50% 50%, rgba(62,78,92,.72), rgba(25,36,45,.5) 48%, transparent 72%);
  filter: blur(16px); opacity: .85;
}
.trib-cloud.c1 { left: -12%; animation: tribCloudA 13s ease-in-out infinite alternate; }
.trib-cloud.c2 { right: -14%; top: -26%; animation: tribCloudB 17s ease-in-out infinite alternate; }
.trib-cloud.c3 { left: 24%; top: -30%; width: 48vw; opacity: .55; animation: tribCloudA 21s ease-in-out infinite alternate-reverse; }
.trib-fog {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 52%;
  background: radial-gradient(ellipse at 50% 100%, rgba(86,116,132,.18), transparent 66%);
  filter: blur(24px); animation: tribFog 11s ease-in-out infinite alternate;
}
.trib-rain {
  position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(102deg, transparent 0 22px, rgba(184,220,242,.12) 22px 23px);
  animation: tribRain .42s linear infinite;
}
.trib-flash {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: #e9f8ff; opacity: 0; mix-blend-mode: screen;
}
.trib-flash.fire { animation: tribFlash .5s ease-out; }

.trib-bolt-svg {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.trib-bolt-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.trib-bolt-svg .main { stroke: var(--bolt); stroke-width: 5; filter: drop-shadow(0 0 10px #bfe9ff) drop-shadow(0 0 28px rgba(111,195,255,.8)); }
.trib-bolt-svg .branch { stroke: #a3ddff; stroke-width: 2; filter: drop-shadow(0 0 8px #7cc9ff); }
.trib-bolt-svg .branch.b2 { stroke-width: 1.4; opacity: 0; }
.trib-bolt-svg.fire .main { animation: tribBolt .62s ease-out; }
.trib-bolt-svg.fire .branch.b1 { animation: tribBolt .62s ease-out .03s; }
.trib-bolt-svg.fire .branch.b2 { animation: tribBolt .62s ease-out .06s; }

.trib-shock {
  position: absolute; left: 50%; top: 54%; z-index: 3;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 2px solid rgba(211,242,255,.9);
  box-shadow: 0 0 24px rgba(143,213,255,.8), inset 0 0 18px rgba(143,213,255,.4);
  opacity: 0; pointer-events: none;
}
.trib-shock.fire { animation: tribShock .85s ease-out; }

.trib-arena {
  position: relative; z-index: 5;
  width: min(680px, 92vw); margin: 7vh auto 0; padding-bottom: 24px;
  text-align: center; color: #d7e6ee;
}
.trib-eyebrow { color: #7f9bab; font-size: 10px; letter-spacing: .55em; text-indent: .55em; }
.trib-title {
  margin-top: 10px; font-family: var(--serif); font-size: clamp(30px, 5vw, 46px);
  letter-spacing: .2em; text-indent: .2em; color: #e7f4fa;
  text-shadow: 0 0 16px rgba(158,216,255,.45), 0 0 54px rgba(92,160,210,.3);
  transition: color .4s ease, text-shadow .4s ease;
}
.trib-sub { margin-top: 8px; color: #7f95a1; font-size: 12px; letter-spacing: .14em; }
.trib-scene { position: relative; width: 260px; height: 184px; margin: 2px auto 0; }
.trib-charge {
  position: absolute; left: 50%; top: 52%; width: 210px; height: 210px; margin: -105px 0 0 -105px;
  border-radius: 50%; opacity: 0; transition: opacity .2s ease;
}
.trib-charge i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(159,218,255,.42);
  border-left-color: transparent; border-right-color: transparent;
  animation: tribCharge 1.6s linear infinite;
}
.trib-charge i:nth-child(2) { inset: 22px; border-color: rgba(196,235,255,.26); border-top-color: transparent; animation-duration: 1.1s; animation-direction: reverse; }
.trib-charge i:nth-child(3) { inset: 46px; border-style: dashed; border-color: rgba(141,204,242,.32); animation-duration: 2.2s; }
#trib-layer.charging .trib-charge { opacity: 1; }
#trib-layer.charging .trib-charge i { animation-play-state: running; }
.trib-figure { position: absolute; left: 50%; top: 48%; width: 116px; height: 164px; margin: -82px 0 0 -58px; transition: filter .4s ease, opacity .4s ease; }
.tf-halo {
  position: absolute; left: 50%; top: 54%; width: 124px; height: 124px; margin: -62px 0 0 -62px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140,216,255,.26), rgba(100,180,225,.08) 55%, transparent 70%);
  border: 1px solid rgba(156,220,255,.2);
  box-shadow: 0 0 32px rgba(100,190,240,.16), inset 0 0 24px rgba(140,220,255,.12);
  animation: tribHalo 3.2s ease-in-out infinite;
}
.tf-head {
  position: absolute; left: 50%; top: 26px; width: 23px; height: 27px; margin-left: -11.5px;
  border-radius: 50% 50% 44% 44%;
  background: linear-gradient(180deg, #b9d4dd, #627b86 70%, #31434b);
  box-shadow: 0 0 16px rgba(151,212,236,.28);
}
.tf-body {
  position: absolute; left: 50%; top: 50px; width: 56px; height: 82px; margin-left: -28px;
  clip-path: polygon(50% 0, 88% 30%, 74% 100%, 26% 100%, 12% 30%);
  background: linear-gradient(180deg, #53717c 0%, #263c45 44%, #101d23 100%);
  box-shadow: 0 0 24px rgba(94,168,198,.18);
}
.tf-body::after {
  content: ''; position: absolute; left: 50%; top: 4px; width: 2px; height: 68px; margin-left: -1px;
  background: linear-gradient(180deg, rgba(199,228,237,.6), transparent);
}
.tf-robe {
  position: absolute; left: 50%; bottom: 4px; width: 86px; height: 42px; margin-left: -43px;
  border-radius: 50% 50% 10% 10%;
  background: linear-gradient(180deg, rgba(52,77,87,.95), rgba(11,21,26,.9));
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 22px rgba(106,178,205,.14);
}
#trib-layer.striking .trib-figure { animation: tribFigureHit .5s ease-out; }
#trib-layer.striking .tf-halo { animation: tribHaloHit .55s ease-out; }

.trib-hp { display: flex; align-items: center; gap: 12px; width: min(440px, 88%); margin: 0 auto; }
.trib-hp .bar { flex: 1; height: 9px; background: rgba(12,22,28,.9); border: 1px solid rgba(128,166,185,.24); border-radius: 6px; overflow: hidden; }
.trib-hp .bar i { display: block; height: 100%; background: linear-gradient(90deg, #5fc5a4, #b9f1dd); box-shadow: 0 0 16px rgba(111,222,187,.55); transition: width .42s cubic-bezier(.2,.8,.2,1); }
.trib-hp span { min-width: 92px; color: #a4bdc8; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.trib-pips { display: flex; justify-content: center; gap: 7px; margin: 10px 0 8px; }
.trib-pips i { width: 26px; height: 3px; border-radius: 3px; background: rgba(143,181,198,.18); transition: background .3s ease, box-shadow .3s ease; }
.trib-pips i.on { background: #d9f3ff; box-shadow: 0 0 10px rgba(168,227,255,.85); }
.trib-count { color: #b8d5e2; font-size: 13px; letter-spacing: .14em; transition: color .3s ease; }
.trib-count.win { color: #ffe3a1; font-size: 19px; text-shadow: 0 0 24px rgba(255,204,104,.6); }
.trib-count.lose { color: #e2a292; font-size: 19px; text-shadow: 0 0 22px rgba(220,100,70,.35); }
.trib-dmg { height: 43px; padding-top: 4px; color: #ff9a7f; font-size: 28px; font-weight: 600; letter-spacing: .04em; text-shadow: 0 0 20px rgba(255,92,52,.7); opacity: 0; }
.trib-dmg.hit { animation: tribDmg .8s ease-out forwards; }
.trib-dmg.hit.fade { opacity: 0; transition: opacity .3s ease; }
.trib-dmg.result { opacity: 1; font-size: 15px; letter-spacing: .1em; }
.trib-dmg.win { color: #ffe0a0; text-shadow: 0 0 18px rgba(255,205,110,.55); }
.trib-dmg.lose { color: #df9a89; text-shadow: 0 0 18px rgba(210,95,70,.35); }
#trib-skip { margin-top: 4px; opacity: .72; }
#trib-skip:hover { opacity: 1; }

#trib-layer.trib-success .trib-vortex { animation-duration: 60s; opacity: .35; }
#trib-layer.trib-success .trib-title { color: #ffe6ae; text-shadow: 0 0 26px rgba(255,211,123,.7), 0 0 70px rgba(255,190,70,.3); }
#trib-layer.trib-success .trib-arena::before {
  content: ''; position: absolute; left: 50%; top: 8%; z-index: -1;
  width: 210px; height: 76%; margin-left: -105px;
  background: linear-gradient(180deg, transparent, rgba(255,220,142,.26) 35%, rgba(255,238,190,.12) 72%, transparent);
  filter: blur(16px); animation: tribAscend 2.8s ease-out forwards;
}
#trib-layer.trib-success .tf-halo { border-color: rgba(255,224,158,.65); box-shadow: 0 0 58px rgba(255,211,120,.55), inset 0 0 30px rgba(255,230,170,.28); background: radial-gradient(circle, rgba(255,225,160,.38), transparent 68%); }
#trib-layer.trib-success .trib-figure { animation: tribAscendFigure 2.8s ease-out forwards; }
#trib-layer.trib-success .trib-hp .bar i { background: linear-gradient(90deg, #e2b968, #fff0c3); }
#trib-layer.trib-success .trib-pips i.on { background: #ffe1a0; box-shadow: 0 0 12px rgba(255,210,115,.9); }
#trib-layer.trib-fail .trib-sky { filter: saturate(.45) brightness(.72); }
#trib-layer.trib-fail .trib-title { color: #d99e8f; text-shadow: 0 0 22px rgba(180,70,45,.35); }
#trib-layer.trib-fail .trib-vortex { opacity: .35; }
#trib-layer.trib-fail .trib-figure { opacity: .45; filter: grayscale(.65) brightness(.7); }
#trib-layer.trib-fail .tf-halo { border-color: rgba(195,120,98,.28); box-shadow: 0 0 24px rgba(175,80,55,.16); }
#trib-layer.trib-fail .trib-pips i.on { background: #b97767; box-shadow: 0 0 10px rgba(190,95,70,.45); }
#trib-layer.shake { animation: tribQuake .46s cubic-bezier(.36,.07,.19,.97); }

@keyframes tribVortex { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes tribCloudA { from { transform: translate3d(-4%, 0, 0) scale(1); } to { transform: translate3d(5%, 3%, 0) scale(1.08); } }
@keyframes tribCloudB { from { transform: translate3d(4%, -2%, 0) scale(1.05); } to { transform: translate3d(-5%, 2%, 0) scale(.96); } }
@keyframes tribFog { from { transform: translateY(8px) scale(1); opacity: .55; } to { transform: translateY(-8px) scale(1.04); opacity: .85; } }
@keyframes tribRain { from { background-position: 0 0; } to { background-position: -44px 88px; } }
@keyframes tribFlash { 0% { opacity: 0; } 9% { opacity: .66; } 17% { opacity: .1; } 26% { opacity: .42; } 100% { opacity: 0; } }
@keyframes tribBolt { 0% { opacity: 0; stroke-dasharray: 1300; stroke-dashoffset: 1300; } 9% { opacity: 1; } 22% { opacity: 1; stroke-dashoffset: 0; } 62% { opacity: .92; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes tribShock { 0% { opacity: 0; transform: scale(.15); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(6.5); } }
@keyframes tribCharge { to { transform: rotate(360deg); } }
@keyframes tribHalo { 0%, 100% { transform: scale(.93); opacity: .55; } 50% { transform: scale(1.06); opacity: .9; } }
@keyframes tribHaloHit { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.35); opacity: .95; } 100% { transform: scale(.98); opacity: .6; } }
@keyframes tribFigureHit { 0%, 100% { transform: translate(0, 0); } 18% { transform: translate(-5px, 3px); } 42% { transform: translate(4px, -2px); } 68% { transform: translate(-2px, 2px); } }
@keyframes tribDmg { 0% { opacity: 0; transform: translateY(16px) scale(.86); } 18% { opacity: 1; transform: translateY(0) scale(1.06); } 55% { opacity: 1; transform: translateY(-8px) scale(1); } 100% { opacity: 0; transform: translateY(-24px) scale(.98); } }
@keyframes tribAscend { 0% { opacity: 0; transform: scaleX(.5); } 30% { opacity: 1; } 100% { opacity: .5; transform: scaleX(1.15); } }
@keyframes tribAscendFigure { 0% { transform: translateY(0); filter: brightness(1); } 45% { transform: translateY(-8px); filter: brightness(1.35); } 100% { transform: translateY(-5px); filter: brightness(1.1); } }
@keyframes tribQuake { 0%, 100% { transform: translate(0,0); } 10% { transform: translate(-8px,4px); } 22% { transform: translate(7px,-5px); } 36% { transform: translate(-6px,-2px); } 52% { transform: translate(5px,3px); } 68% { transform: translate(-3px,2px); } 84% { transform: translate(2px,-1px); } }

@media (max-width: 760px) {
  .trib-arena { margin-top: 5vh; }
  .trib-scene { transform: scale(.86); margin-top: -8px; margin-bottom: -14px; }
  .trib-title { letter-spacing: .14em; text-indent: .14em; }
  .trib-dmg { font-size: 24px; }
  .trib-hp span { min-width: 78px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .trib-vortex, .trib-cloud, .trib-fog, .trib-rain, .tf-halo, .trib-charge i { animation: none !important; }
}
/* 炼丹/炼器 → 坊市采购返回 */
.craft-return-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 14px; border: 1px solid rgba(216,176,106,.28); border-radius: 4px; background: linear-gradient(90deg, rgba(216,176,106,.1), rgba(127,209,185,.05)); color: #c9d8ce; font-size: 12px; }
.craft-return-bar span { flex: 1; line-height: 1.6; }
.craft-return-bar .btn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .craft-return-bar { align-items: flex-start; flex-wrap: wrap; }
  .craft-return-bar .btn { width: 100%; }
}
/* 丹房/器坊筛选 */
.craft-filters { align-items: center; gap: 8px; flex-wrap: wrap; }
.craft-filters .mkt-search { flex: 1 1 190px; min-width: 150px; }
.craft-filters .craft-filter { flex: 0 0 auto; width: 112px; max-width: 112px; }
.craft-filters .btn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .craft-filters .mkt-search { flex-basis: 100%; }
  .craft-filters .craft-filter { flex: 1 1 calc(50% - 8px); width: auto; max-width: none; }
}
/* ================= 玩家交易 ================= */
.trade-modal { width: min(760px, 88vw); text-align: left; }
.trade-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trade-col { border: 1px solid rgba(127,209,185,.16); border-radius: 4px; background: rgba(4,12,13,.4); padding: 10px 12px; min-height: 150px; }
.trade-col-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px dashed rgba(127,209,185,.14); color: #b8d3c7; font-size: 11px; }
.trade-col-head b { color: #e6d3aa; font-family: var(--serif); font-size: 14px; font-weight: 500; }
.trade-col-head span { color: #81968c; }
.trade-col-head .trade-confirmed { color: #8fe0c2; }
.trade-offers { min-height: 86px; padding-top: 6px; }
.trade-offer-item, .trade-inv-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; color: #b8c9c0; font-size: 11.5px; border-bottom: 1px solid rgba(127,209,185,.06); }
.trade-offer-item b, .trade-inv-item b { margin-left: 5px; color: #e2d1a8; font-weight: 500; }
.trade-empty { padding: 24px 4px; color: #6f847a; font-size: 11px; text-align: center; }
.trade-inventory { margin-top: 12px; border: 1px solid rgba(127,209,185,.12); border-radius: 4px; padding: 9px 12px; }
.trade-inv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; max-height: 190px; overflow: auto; padding-top: 4px; }
.trade-status { margin: 10px 0 4px; color: #8fa69a; font-size: 11px; line-height: 1.6; }
.trade-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.trade-pending { padding: 22px 12px 12px; text-align: center; }
.trade-pending-icon { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(216,176,106,.45); color: #e6d3aa; font-family: var(--serif); font-size: 22px; background: radial-gradient(circle, rgba(216,176,106,.12), transparent 70%); }
.trade-pending h4 { margin: 0 0 8px; color: #e5d5b0; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.trade-pending p { margin: 0 0 12px; color: #8fa69a; font-size: 12px; line-height: 1.7; }
.trade-pending .trade-actions { justify-content: center; }
@media (max-width: 760px) {
  .trade-modal { width: 100%; }
  .trade-columns { grid-template-columns: 1fr; }
  .trade-inv-list { grid-template-columns: 1fr; max-height: 160px; }
  .trade-col { min-height: 120px; }
}
/* 交易中快捷入口 */
.trade-reopen-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 9px 12px; border: 1px solid rgba(216,176,106,.3); border-radius: 4px; background: rgba(216,176,106,.08); color: #c9d8ce; font-size: 12px; }
.trade-reopen-bar span { flex: 1; }
.trade-reopen-bar b { color: #f0dbaa; }
/* 道具两字名印，减少图标重复 */
.tile-label { font-size: 8px; line-height: 1.2; padding: 0 2px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; }
.tile.lg .tile-label, .tile.xl .tile-label { font-size: 9px; padding: 0 2px; }
@media (max-width: 760px) {
  .tile-label { font-size: 7.5px; }
}
/* ================= 修炼球：小境界逐层强化 ================= */
.cult-orb {
  --minor: 0;
  filter: brightness(calc(1 + var(--minor) * 0.008));
}
.orb-aura {
  box-shadow:
    0 0 calc(22px + var(--minor) * 2.2px) rgba(127, 209, 185, .22),
    0 0 calc(42px + var(--minor) * 3px) rgba(127, 209, 185, .08);
}
.orb-ring.r3 {
  inset: -23px;
  border: 1px double currentColor;
  opacity: 0;
  transform: rotate(62deg);
  animation: orbSpin 19s linear infinite reverse;
}
.orb-runes.r2 {
  inset: -29px;
  border-style: dotted;
  opacity: 0;
  animation: orbSpin 23s linear infinite reverse;
}
.orb-sparks { inset: -33px; opacity: 1; color: #fff3c4; }
.orb-sparks i {
  display: none;
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
  animation: orbSpark 2.6s ease-in-out infinite;
}
.orb-sparks i:nth-child(1) { top: 4%; left: 46%; animation-delay: -.2s; }
.orb-sparks i:nth-child(2) { top: 18%; right: 4%; animation-delay: -1.1s; }
.orb-sparks i:nth-child(3) { top: 43%; right: -1%; animation-delay: -.7s; }
.orb-sparks i:nth-child(4) { bottom: 14%; right: 10%; animation-delay: -1.8s; }
.orb-sparks i:nth-child(5) { bottom: 2%; left: 38%; animation-delay: -2.3s; }
.orb-sparks i:nth-child(6) { bottom: 18%; left: 3%; animation-delay: -1.4s; }
.orb-sparks i:nth-child(7) { top: 36%; left: -1%; animation-delay: -2s; }
.orb-sparks i:nth-child(8) { top: 8%; left: 20%; animation-delay: -.9s; }
.orb-orbit {
  inset: -27px;
  border: 1px solid currentColor;
  opacity: 0;
  transform: rotate(-26deg) scaleY(.36);
  box-shadow: 0 0 14px currentColor;
  animation: orbOrbit 8s ease-in-out infinite alternate;
}
.orb-orbit::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .45;
  transform: rotate(58deg) scaleY(.72);
}
.orb-rays {
  inset: -35px;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, currentColor 0deg 1.2deg, transparent 1.2deg 16deg);
  -webkit-mask: radial-gradient(circle, transparent 0 31%, #000 48%, transparent 72%);
  mask: radial-gradient(circle, transparent 0 31%, #000 48%, transparent 72%);
  animation: orbSpin 34s linear infinite;
  filter: blur(.3px);
}

/* 小境界：灵粒逐层增加 */
.orb-motes i { display: none; }
.orb-minor-1 .orb-motes i:nth-child(-n+1) { display: block; }
.orb-minor-2 .orb-motes i:nth-child(-n+2) { display: block; }
.orb-minor-3 .orb-motes i:nth-child(-n+3) { display: block; }
.orb-minor-4 .orb-motes i:nth-child(-n+4) { display: block; }
.orb-minor-5 .orb-motes i:nth-child(-n+5) { display: block; }
.orb-minor-6 .orb-motes i:nth-child(-n+6) { display: block; }
.orb-stage-1 .orb-motes i:nth-child(-n+3) { display: block; }
.orb-stage-2 .orb-motes i:nth-child(-n+6) { display: block; }
.orb-stage-3 .orb-motes i:nth-child(-n+6) { display: block; }

/* 第三环 / 外层符文 / 火星 / 交叉轨道 / 光束 */
.orb-minor-4 .orb-ring.r3 { opacity: .22; }
.orb-minor-7 .orb-ring.r3 { opacity: .42; }
.orb-minor-10 .orb-ring.r3 { opacity: .6; }
.orb-minor-14 .orb-ring.r3 { opacity: .8; }

.orb-minor-6 .orb-runes.r2 { opacity: .18; }
.orb-minor-9 .orb-runes.r2 { opacity: .38; }
.orb-minor-12 .orb-runes.r2 { opacity: .58; }
.orb-minor-16 .orb-runes.r2 { opacity: .82; }

.orb-minor-5 .orb-sparks i:nth-child(-n+2) { display: block; }
.orb-minor-6 .orb-sparks i:nth-child(-n+4) { display: block; }
.orb-minor-7 .orb-sparks i:nth-child(-n+6) { display: block; }
.orb-minor-8 .orb-sparks i:nth-child(-n+8) { display: block; }

.orb-minor-8 .orb-orbit { opacity: .28; }
.orb-minor-12 .orb-orbit { opacity: .5; }
.orb-minor-16 .orb-orbit { opacity: .78; }

.orb-minor-10 .orb-rays { opacity: .16; }
.orb-minor-13 .orb-rays { opacity: .34; }
.orb-minor-16 .orb-rays { opacity: .55; }
.orb-minor-17 .orb-rays { opacity: .72; }

.orb-stage-2 .orb-sparks { color: #ffe6a6; }
.orb-stage-3 .orb-sparks { color: #d8fff5; }
.orb-stage-3 .orb-sparks i { box-shadow: 0 0 9px currentColor, 0 0 22px rgba(159,255,240,.75); }
.orb-minor-15 .orb-aura { animation-duration: 2.1s; }
.orb-minor-17 .orb-aura { animation-duration: 1.7s; }

@keyframes orbSpark {
  0%, 100% { transform: translate(0, 0) scale(.6); opacity: .18; }
  50% { transform: translate(2px, -4px) scale(1.35); opacity: 1; }
}
@keyframes orbOrbit {
  0% { transform: rotate(-26deg) scaleY(.36) scaleX(.98); }
  100% { transform: rotate(-20deg) scaleY(.4) scaleX(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .orb-sparks i, .orb-orbit, .orb-rays { animation: none !important; }
}