/* ============================================================
 * css/screens/jianghu.css — 江湖页专属样式（归属：jianghu 组）
 * 参考帧 docs/ref/t047.png / t050.png：深棕木板底 + 章节木牌 tab + 宣纸剧情条 + 「江湖连闯」大木牌
 *   + 木板关卡行（首领头像 / 毛笔关卡名 / 三星 / 圆形「闯」钮）+ 底部三星评价条 + 普通/精英。
 * 只依赖 theme.css 的变量与 .btn/.btn-round/.badge/.item/.q-甲… 等基础件；不改 theme.css / screens.css。
 * ============================================================ */

/* ---------- 页面骨架 ---------- */
.screen-content.jh-root { overflow: hidden; }
.jh {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    var(--tex-wood),
    linear-gradient(180deg, #4a2612 0%, #34190a 12%, #2b1508 60%, #1f0f05 100%);
  color: #f3e6c4;
}
.jh-empty { padding: 60px 20px; text-align: center; }

/* ---------- 章节木牌 tab ---------- */
.jh-tabs-wrap {
  position: relative;
  flex: none;
  height: 66px;
  padding: 0 14px;
  /* 对照 t047：章节 tab 落在一条米白卷纸带上，四角朱红木钉 */
  background:
    radial-gradient(circle at 9px 9px, #d0352a 0 3.2px, rgba(90,20,10,.55) 3.6px 4.4px, transparent 5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #d0352a 0 3.2px, rgba(90,20,10,.55) 3.6px 4.4px, transparent 5px),
    radial-gradient(circle at 9px calc(100% - 11px), #d0352a 0 3.2px, rgba(90,20,10,.55) 3.6px 4.4px, transparent 5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 11px), #d0352a 0 3.2px, rgba(90,20,10,.55) 3.6px 4.4px, transparent 5px),
    var(--tex-paper),
    linear-gradient(180deg, #fbf4de 0%, #f0e6c8 46%, #e2d3ae 82%, #cdb98f 100%);
  border-bottom: 4px solid #4a2a12;
  box-shadow: inset 0 1px 0 rgba(255, 253, 240, .95), inset 0 -4px 8px rgba(150, 108, 52, .3), 0 3px 6px rgba(0, 0, 0, .55);
}
/* 两端金属卷轴帽 */
.jh-tabs-wrap::before, .jh-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 7px;
  z-index: 3;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(160, 120, 60, .45), rgba(255, 250, 235, .95) 45%, rgba(190, 155, 95, .5));
  box-shadow: 0 0 0 1px rgba(120, 84, 36, .45), 0 1px 2px rgba(0, 0, 0, .35);
}
.jh-tabs-wrap::before { left: 2px; }
.jh-tabs-wrap::after { right: 2px; }
.jh-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.jh-tabs::-webkit-scrollbar { display: none; }
.jh-tab {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  height: 46px;
  padding: 0 14px;
  border-radius: 7px;
  cursor: pointer;
  background:
    var(--tex-wood),
    linear-gradient(180deg, #a9682f 0%, #7e4a1c 22%, #6b3a16 55%, #57290e 85%, #3d1c0a 100%);
  border: 2px solid #1e0d05;
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 150, .35),
    inset 0 2px 0 rgba(255, 225, 170, .35),
    inset 0 -4px 6px rgba(0, 0, 0, .45),
    0 2px 3px rgba(0, 0, 0, .6);
  font-family: var(--font-brush);
  font-size: 22px;
  letter-spacing: 3px;
  color: #fff6de;
  text-shadow: var(--stroke-dark), 0 2px 2px rgba(0, 0, 0, .75);
  transition: transform .1s, filter .12s;
  user-select: none;
}
.jh-tab .t { position: relative; z-index: 1; white-space: nowrap; }
/* 内嵌浅色浮雕边 */
/* 内浮雕边 + 四角金包角（对照 t047 章节牌） */
.jh-tab::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  border: 1px solid rgba(255, 232, 180, .3);
  pointer-events: none;
  background:
    linear-gradient(135deg, #ffe9a3 0 4px, transparent 4px) left top / 10px 10px no-repeat,
    linear-gradient(-135deg, #ffe9a3 0 4px, transparent 4px) right top / 10px 10px no-repeat,
    linear-gradient(45deg, #ffe9a3 0 4px, transparent 4px) left bottom / 10px 10px no-repeat,
    linear-gradient(-45deg, #ffe9a3 0 4px, transparent 4px) right bottom / 10px 10px no-repeat;
  opacity: .9;
}
.jh-tab.locked::before {
  background:
    linear-gradient(135deg, #d7d7d7 0 4px, transparent 4px) left top / 10px 10px no-repeat,
    linear-gradient(-135deg, #d7d7d7 0 4px, transparent 4px) right top / 10px 10px no-repeat,
    linear-gradient(45deg, #d7d7d7 0 4px, transparent 4px) left bottom / 10px 10px no-repeat,
    linear-gradient(-45deg, #d7d7d7 0 4px, transparent 4px) right bottom / 10px 10px no-repeat;
}
.jh-tab:hover { filter: brightness(1.1); }
.jh-tab:active { transform: translateY(1px) scale(.98); }
.jh-tab.active {
  background: var(--bg-red);
  border-color: #3f0a06;
  color: #fff3c2;
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 120, .55),
    inset 0 2px 0 rgba(255, 200, 150, .45),
    inset 0 -4px 6px rgba(0, 0, 0, .4),
    0 0 12px rgba(216, 50, 31, .65),
    0 2px 3px rgba(0, 0, 0, .6);
  transform: translateY(-1px);
}
.jh-tab.active::before { border-color: rgba(255, 230, 170, .45); }
.jh-tab.locked {
  background: var(--bg-stone);
  border-color: #1c1c1c;
  color: #e9e9e9;
  text-shadow: 0 1px 0 #2b2b2b, 0 0 3px rgba(0, 0, 0, .5);
  filter: saturate(.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -4px 6px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .6);
}
.jh-tab.locked .t { opacity: .78; }
.jh-tab .lk {
  position: absolute;
  right: 4px;
  top: -8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 1px 4px 1px 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, #4a4a4a, #1d1d1d);
  border: 1px solid #0b0b0b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0;
  color: #ffe08a;
  text-shadow: none;
}
.jh-tab .lk svg { width: 14px; height: 14px; }
.jh-tab .all3-mark {
  position: absolute;
  left: 4px;
  top: -7px;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}

/* ---------- 剧情条（宣纸） ---------- */
.jh-story {
  position: relative;
  flex: none;
  height: 78px;
  margin: 8px 8px 0;
  padding: 8px 14px 8px 16px;
  border-radius: 4px;
  background: var(--bg-paper-light);
  border: 2px solid #4a2410;
  box-shadow:
    inset 0 0 0 1px #c9a96e,
    inset 0 0 18px rgba(120, 80, 30, .25),
    0 2px 4px rgba(0, 0, 0, .55);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .5px;
  cursor: pointer;
  overflow: hidden;
}
/* 左侧朱砂竖条 + 右下角淡竹影 */
.jh-story::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d8321f, #7e1a10);
  box-shadow: 0 0 0 1px rgba(90, 30, 10, .35);
}
.jh-story::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: -10px;
  width: 96px;
  height: 70px;
  pointer-events: none;
  opacity: .16;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 70'><g fill='%232b1d12'><path d='M70 70 C72 40 74 20 80 0 L84 0 C78 22 76 44 74 70 Z'/><path d='M74 30 C60 26 50 30 44 40 C56 36 66 34 74 34 Z'/><path d='M76 18 C90 14 96 20 96 30 C88 24 80 22 76 22 Z'/><path d='M72 48 C58 44 46 50 40 60 C54 54 64 52 72 52 Z'/><path d='M78 40 C92 36 96 44 94 54 C88 46 82 44 78 44 Z'/></g></svg>") no-repeat right bottom / contain;
}
.jh-story-text { position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jh-story-text.typing::after {
  content: '▍';
  color: var(--red);
  margin-left: 1px;
  animation: jhBlink .7s steps(1) infinite;
}
@keyframes jhBlink { 50% { opacity: 0; } }

/* ---------- 「江湖连闯」大木牌 ---------- */
.jh-sweep {
  position: relative;
  flex: none;
  height: 56px;
  margin: 8px 12px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  cursor: pointer;
  background:
    var(--tex-wood),
    linear-gradient(180deg, #d98f42 0%, #b3682a 18%, #9a521d 48%, #7c3d14 80%, #55280c 100%);
  border: 2px solid #24110a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 170, .55),
    inset 0 3px 0 rgba(255, 238, 195, .5),
    inset 0 -6px 10px rgba(0, 0, 0, .42),
    0 4px 7px rgba(0, 0, 0, .6);
  transition: transform .1s, filter .12s;
  user-select: none;
}
.jh-sweep::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 225, 170, .28);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.jh-sweep .t {
  position: relative;
  z-index: 1;
  font-family: var(--font-brush);
  font-size: 32px;
  letter-spacing: 10px;
  padding-left: 10px;
  color: #ffe58a;
  text-shadow: var(--stroke-dark), 0 2px 3px rgba(0, 0, 0, .75), 0 0 12px rgba(255, 206, 90, .55);
}
.jh-sweep .hint {
  position: absolute;
  right: 14px;
  bottom: 4px;
  z-index: 1;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255, 233, 163, .75);
  text-shadow: 0 1px 0 #000;
}
/* 两端铆钉 */
.jh-sweep .rv {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0f0f0, #8a8a8a 55%, #2f2f2f);
  box-shadow: 0 0 0 1px #111, 0 1px 2px rgba(0, 0, 0, .7);
  z-index: 2;
}
.jh-sweep .rv.l { left: 9px; }
.jh-sweep .rv.r { right: 9px; }
.jh-sweep:hover { filter: brightness(1.08); }
.jh-sweep:active { transform: translateY(2px); filter: brightness(.94); }
.jh-sweep.off { filter: grayscale(.6) brightness(.8); }

/* ---------- 关卡列表 ---------- */
/* 关卡列表底：宣纸 + 淡化山水（assets/bg/ink_landscape.webp），木板行浮在上面 —— 对照 t047 */
.jh-list.scroll-y {
  position: relative;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  padding: 4px 0 10px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(60, 32, 12, .45), transparent 12px),
    radial-gradient(ellipse 120% 55% at 50% 100%, rgba(120, 88, 50, .35), transparent 70%),
    linear-gradient(180deg, rgba(246, 236, 206, .9) 0%, rgba(232, 214, 172, .88) 45%, rgba(214, 190, 142, .9) 100%),
    url(../../assets/bg/ink_landscape.webp) 50% 78% / 448px auto no-repeat,
    var(--tex-paper),
    linear-gradient(180deg, #ece0be, #dcc99f);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .38);
}
.jh-list-end { color: rgba(90, 62, 30, .6); }
.jh-list-end {
  padding: 10px 0 6px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(233, 211, 163, .45);
}
.jh-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 90px;
  margin: 6px 8px 0;
  padding: 6px 8px 6px 18px;
  border-radius: 7px;
  cursor: pointer;
  overflow: hidden;
  background:
    var(--tex-wood),
    linear-gradient(180deg, #a2622d 0%, #7d4419 22%, #663616 68%, #4e2711 100%);
  border: 1px solid #1e0d05;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 165, .38),
    inset 0 0 0 1px rgba(0, 0, 0, .22),
    inset 0 -5px 8px rgba(0, 0, 0, .42),
    0 3px 6px rgba(60, 34, 12, .55),
    0 1px 0 rgba(255, 246, 214, .5);
  transition: filter .12s, transform .1s;
}
/* 左侧两枚铆钉 */
.jh-row::before, .jh-row::after {
  content: '';
  position: absolute;
  left: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ececec, #7a7a7a 60%, #262626);
  box-shadow: 0 0 0 1px #0f0f0f;
  z-index: 2;
}
.jh-row::before { top: 7px; }
.jh-row::after { bottom: 7px; }
/* 右侧水墨山影 */
.jh-row .jh-right::before {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 250px;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(255, 210, 120, .16), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 90' preserveAspectRatio='none'><path d='M0 90 L28 56 L50 70 L78 30 L104 60 L128 42 L158 74 L184 46 L212 68 L250 26 L250 90 Z' fill='%23000' fill-opacity='.42'/><path d='M60 90 L96 52 L120 72 L150 36 L178 64 L206 44 L232 66 L250 50 L250 90 Z' fill='%23000' fill-opacity='.3'/><path d='M120 90 L150 66 L172 80 L200 56 L228 76 L250 62 L250 90 Z' fill='%231a0a04' fill-opacity='.55'/></svg>") no-repeat right bottom / 100% 100%;
}
.jh-row:hover { filter: brightness(1.07); }
.jh-row:active { filter: brightness(.94); }
.jh-row.next {
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 150, .3),
    inset 0 0 0 1px rgba(242, 194, 69, .35),
    inset 0 -4px 6px rgba(0, 0, 0, .4),
    0 0 10px rgba(242, 194, 69, .25),
    0 2px 3px rgba(0, 0, 0, .55);
}
.jh-row.locked { filter: saturate(.35) brightness(.62); }
.jh-row.locked:hover { filter: saturate(.35) brightness(.68); }
.jh-row.locked .jh-name { color: #c9b28a; }
.jh-row.daily-out .jh-name { color: #e2c98f; }
.jh-lead { position: relative; z-index: 1; flex: none; }
.jh-mid { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; padding-left: 4px; }
.jh-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-brush);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 3px;
  color: #ffe9a3;
  text-shadow: var(--stroke-dark), 0 2px 3px rgba(0, 0, 0, .7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jh-name .elite-tag {
  flex: none;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-red);
  border: 1px solid #3f0a06;
  font-family: var(--font-brush);
  font-size: 14px;
  letter-spacing: 1px;
  color: #ffe08a;
  text-shadow: 0 1px 0 #3f0a06;
  box-shadow: inset 0 1px 0 rgba(255, 200, 150, .5), 0 1px 2px rgba(0, 0, 0, .5);
}
.jh-sub {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.2;
  color: #e8d3a3;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
  white-space: nowrap;
  overflow: hidden;
}
.jh-sub .bn { color: #f3e6c4; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.jh-sub .sep { color: rgba(255, 233, 163, .5); }
.jh-sub .cost { display: inline-flex; align-items: center; gap: 2px; color: #b6f0c4; font-weight: 700; }
.jh-sub .cost svg { width: 16px; height: 16px; }
.jh-sub .times { color: #ffd27a; }
.jh-sub .times.out { color: #bdbdbd; }
.jh-sub .clears { color: #d9c39a; }
.jh-right {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 78px;
}
.jh-right .jh-stars { position: relative; z-index: 3; margin-bottom: -9px; }
.jh-stars { display: inline-flex; align-items: center; gap: 0; }
.jh-stars svg { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.jh-stars svg:nth-child(2) { margin-top: -5px; }
.jh-stars .off { opacity: .85; filter: grayscale(1) brightness(.85) drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.jh-stars[data-n="3"] svg.on { filter: drop-shadow(0 0 3px rgba(255, 215, 90, .9)) drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }

/* 圆形「闯」钮：theme .btn-round 基础上加发光 / 锁 */
.jh-go { position: relative; z-index: 2; }
.jh-go.glow {
  animation: jhGlow 1.5s ease-in-out infinite;
}
@keyframes jhGlow {
  0%, 100% { box-shadow: 0 0 0 2px #7a4f00, 0 0 8px 2px rgba(255, 210, 80, .55), inset 0 2px 2px rgba(255, 255, 255, .6), inset 0 -4px 6px rgba(120, 70, 0, .5); }
  50% { box-shadow: 0 0 0 2px #7a4f00, 0 0 20px 7px rgba(255, 215, 90, .95), inset 0 2px 2px rgba(255, 255, 255, .6), inset 0 -4px 6px rgba(120, 70, 0, .5); }
}
.jh-go .lk { display: inline-flex; align-items: center; justify-content: center; }
.jh-go .lk svg { width: 24px; height: 24px; opacity: .85; }

/* ---------- 首领头像（品质框） ---------- */
.jh-ava {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  --jas: 76px;
  --qc: #4caf50; --qc2: #2a6e2e; --qc3: #d8f3d9;
  width: var(--jas);
  flex: none;
}
.jh-ava-box {
  position: relative;
  width: var(--jas);
  height: var(--jas);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .28), transparent 60%),
    linear-gradient(180deg, var(--qc3), var(--qc2));
  box-shadow: 0 0 0 2px var(--qc), 0 0 0 3px #1a0c04, inset 0 0 10px rgba(0, 0, 0, .55), 0 2px 3px rgba(0, 0, 0, .6);
}
.jh-ava-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 32%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .5);
}
.jh-ava-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}
.jh-ava-box .pm {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--font-brush);
  font-size: calc(var(--jas) * .28);
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 1px;
  color: #3a2a12;
  text-shadow: 0 1px 0 rgba(255, 245, 220, .7);
  padding: 4px;
  text-align: center;
}
.jh-ava-box.missing .pm { display: flex; }
.jh-ava-lv {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 5px;
  border-radius: 0 4px 0 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  color: #ffe9a3;
  background: linear-gradient(180deg, #3a2a1a, #0e0805);
  box-shadow: 0 0 0 1px rgba(201, 169, 110, .8);
  text-shadow: 0 1px 0 #000;
}
.jh-boss-seal {
  position: absolute;
  right: -2px;
  top: -2px;
  z-index: 3;
  padding: 1px 4px;
  border-radius: 0 6px 0 5px;
  font-family: var(--font-brush);
  font-size: 11px;
  line-height: 1.2;
  color: #fff3c2;
  background: linear-gradient(180deg, #d8321f, #7e1a10);
  border: 1px solid #ffe08a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.jh-ava-nm {
  margin-top: 3px;
  max-width: calc(var(--jas) + 10px);
  font-size: 11px;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.jh-row .jh-ava-nm, .jh .jh-ava-nm { color: #ffe9a3; text-shadow: 0 1px 0 #000; }

/* ---------- 底部：三星评价 + 普通/精英 ---------- */
.jh-foot {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 68px;
  padding: 0 8px 0 6px;
  background:
    var(--tex-wood),
    linear-gradient(180deg, #4a2612 0%, #34190a 45%, #22110a 100%);
  border-top: 2px solid #8a5a24;
  box-shadow: inset 0 2px 0 rgba(255, 215, 150, .25), 0 -3px 6px rgba(0, 0, 0, .5);
}
.jh-chest {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .1s;
}
.jh-chest svg { width: 50px; height: 50px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.jh-chest .badge.dot { position: absolute; right: 2px; top: 2px; }
.jh-chest.ready { animation: jhBounce 1.4s ease-in-out infinite; }
.jh-chest.ready svg { filter: drop-shadow(0 0 6px rgba(255, 215, 90, .9)) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.jh-chest:active { transform: scale(.94); }
@keyframes jhBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.jh-foot-txt {
  flex: none;
  font-size: 12px;
  line-height: 1.3;
  color: #f3e6c4;
  text-shadow: 0 1px 0 #000;
  cursor: pointer;
  letter-spacing: .5px;
}
.jh-foot-txt b { color: #ffd27a; font-weight: 700; }
.jh-foot-stars {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: #ffe9a3;
  text-shadow: 0 1px 0 #000;
  cursor: pointer;
  white-space: nowrap;
}
.jh-foot-stars svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.jh-foot-stars b { font-size: 20px; color: #ffd75e; margin: 0 1px 0 2px; }
.jh-mode { flex: none; display: flex; align-items: center; gap: 6px; }
.jh-mode .opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 38px;
  padding: 0 12px;
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--font-brush);
  font-size: 22px;
  letter-spacing: 2px;
  border: 2px solid #1e0d05;
  transition: transform .1s, filter .12s, opacity .12s;
  user-select: none;
}
.jh-mode .opt.normal {
  background: var(--tex-paper), linear-gradient(180deg, #f7ecd0, #e2c68f 60%, #c9a96e);
  color: #5a2b00;
  text-shadow: 0 1px 0 rgba(255, 248, 225, .8);
  box-shadow: inset 0 1px 0 #fff3cf, inset 0 -3px 0 rgba(0, 0, 0, .18), 0 2px 3px rgba(0, 0, 0, .55);
}
.jh-mode .opt.elite {
  background: var(--bg-red);
  border-color: #3f0a06;
  color: #ffe08a;
  text-shadow: 0 1px 0 #3f0a06;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 120, .45), inset 0 2px 0 rgba(255, 200, 150, .45), inset 0 -3px 0 rgba(0, 0, 0, .4), 0 2px 3px rgba(0, 0, 0, .55);
}
.jh-mode .opt:not(.active) { opacity: .72; filter: saturate(.75) brightness(.85); }
.jh-mode .opt.active { box-shadow: 0 0 0 2px #f2c245, 0 0 10px rgba(242, 194, 69, .75), inset 0 1px 0 rgba(255, 255, 255, .5); transform: translateY(-1px); }
.jh-mode .opt:active { transform: translateY(1px); }

/* ---------- 弹窗通用 ---------- */
.jh-modal .modal-body { font-size: 13px; }
.jh-center { text-align: center; font-size: 15px; line-height: 1.7; padding: 8px 0; }
.jh-center .desc, .jh-lose .desc, .jh-stam .desc, .jh-sweep-plan .desc { font-size: 12px; color: var(--ink-soft); }
.jh-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  font-family: var(--font-brush);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--red);
}
.jh-sec::before, .jh-sec::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, #b8945a, transparent); }
.jh-sec > span { flex: none; }
.jh-sec .tag {
  flex: none;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0;
  padding: 1px 6px;
  border-radius: 3px;
  color: #fff3c2;
  background: linear-gradient(180deg, #c22f1f, #7e1a10);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.jh-three {
  display: inline-block;
  font-family: var(--font-brush);
  font-size: 22px;
  letter-spacing: 2px;
  color: #d8321f;
  text-shadow: 0 1px 0 #fff3c2, 0 0 8px rgba(242, 194, 69, .8);
  animation: jhPop .5s cubic-bezier(.2, 1.4, .5, 1) both;
}
@keyframes jhPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 关卡详情 */
.jh-d-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--tex-paper), linear-gradient(180deg, #e2cb95, #d1b27a);
  box-shadow: inset 0 0 0 1px rgba(255, 245, 220, .6), inset 0 0 10px rgba(120, 80, 30, .2);
}
.jh-d-head .pw { display: flex; flex-direction: column; align-items: center; min-width: 110px; }
.jh-d-head .pw .lab { font-family: var(--font-brush); font-size: 15px; letter-spacing: 3px; color: var(--red); }
.jh-d-head .pw .n { font-family: var(--font-body); font-size: 18px; color: var(--ink); }
.jh-d-head .pw.mine .lab { color: var(--jade-dark); }
.jh-d-head .vs {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brush); font-size: 18px; color: #fff3c2;
  background: radial-gradient(circle at 40% 35%, #e0523a, #a8261b 60%, #6e140c);
  box-shadow: 0 0 0 1px #fff0c8, 0 0 0 2px #a8261b, 0 1px 2px rgba(0, 0, 0, .5);
}
.jh-enemies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 6px;
  padding: 4px 0;
}
.jh-enemies .jh-ava { --jas: 54px; }
.jh-enemies .jh-ava-nm { color: var(--ink); text-shadow: none; }
.jh-none { padding: 10px; text-align: center; color: var(--ink-soft); }
.jh-conds { display: flex; justify-content: space-around; gap: 4px; padding: 2px 0; }
.jh-conds .c { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink); }
.jh-conds .c svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.jh-rw-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 2px 0; }
.jh-cur { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; color: var(--ink); }
.jh-cur svg { width: 22px; height: 22px; }
.jh-cur b { font-family: var(--font-body); font-weight: 700; }
.jh-cur i { font-style: normal; font-size: 11px; color: var(--ink-soft); }
.jh-rw-line .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.jh-rw-items { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 6px 10px; padding: 6px 0 2px; }
.jh-drop { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.jh-drop .ch {
  position: absolute; right: -4px; top: -6px; z-index: 4;
  padding: 0 4px; border-radius: 7px;
  font-size: 10px; line-height: 14px; color: #fff; font-weight: 700;
  background: linear-gradient(180deg, #4a3a2a, #1a1008);
  box-shadow: 0 0 0 1px #c9a96e;
}
.jh-eqdrops { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; padding-top: 2px; }
.jh-eqdrop {
  --qc: #4caf50;
  padding: 2px 8px; border-radius: 4px; font-size: 12px; color: var(--ink);
  background: var(--paper-light); box-shadow: 0 0 0 1px var(--qc), inset 0 0 6px rgba(0, 0, 0, .08);
}
.jh-first { padding: 4px 6px; border-radius: 5px; background: rgba(216, 50, 31, .06); box-shadow: inset 0 0 0 1px rgba(168, 38, 27, .25); }
.jh-d-cost {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 10px; padding: 6px; border-radius: 5px;
  font-size: 13px; color: var(--ink);
  background: rgba(0, 0, 0, .06);
}
.jh-d-cost svg { width: 20px; height: 20px; }
.jh-d-cost b { color: var(--jade-dark); font-size: 15px; }
.jh-d-cost .sep { color: var(--ink-faint); margin: 0 4px; }
.jh-lockline {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 6px; font-size: 12px; color: var(--red);
}
.jh-lockline svg { width: 16px; height: 16px; }

/* 惜败 / 章节通关 */
.jh-lose, .jh-clear-body { text-align: center; padding: 4px 0; }
.jh-lose p, .jh-clear-body p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; }
.jh-lose .desc b { color: var(--red); font-weight: 700; }
.seal-big {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  font-family: var(--font-brush); font-size: 40px; color: #fff3c2;
  background: radial-gradient(circle at 40% 35%, #e0523a, #a8261b 60%, #6e140c);
  box-shadow: 0 0 0 2px #fff0c8, 0 0 0 4px #a8261b, 0 2px 4px rgba(0, 0, 0, .5), inset 0 -3px 5px rgba(0, 0, 0, .35);
  transform: rotate(-8deg);
  animation: jhStamp .35s cubic-bezier(.2, 1.4, .5, 1) both;
}
.seal-big.lose { background: radial-gradient(circle at 40% 35%, #7f8ea6, #46536b 60%, #2b3446); box-shadow: 0 0 0 2px #e8ecf3, 0 0 0 4px #46536b, 0 2px 4px rgba(0, 0, 0, .5); }
@keyframes jhStamp { from { transform: rotate(-8deg) scale(1.8); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }

/* 体力不足 */
.jh-stam { text-align: center; }
.jh-stam .big { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0 6px; }
.jh-stam .big svg { width: 46px; height: 46px; }
.jh-stam .big > div { display: flex; flex-direction: column; align-items: flex-start; }
.jh-stam .big b { font-family: var(--font-brush); font-size: 22px; letter-spacing: 2px; color: var(--red); }
.jh-stam .big span { font-size: 13px; color: var(--ink-soft); }
.jh-stam .buy {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px;
  margin-top: 8px; padding: 8px; border-radius: 5px;
  background: rgba(0, 0, 0, .06); font-size: 14px;
}
.jh-stam .buy svg { width: 22px; height: 22px; }
.jh-stam .buy b { font-weight: 700; color: var(--ink); }
.jh-stam .buy .lim { width: 100%; font-size: 11px; color: var(--ink-soft); }

/* 连闯计划 / 逐关结算 */
.jh-sweep-plan { text-align: center; }
.jh-sweep-plan p { margin: 4px 0; font-size: 14px; }
.jh-sweep-plan .names { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; padding: 4px 0; }
.jh-sweep-plan .names span {
  padding: 2px 8px; border-radius: 3px; font-family: var(--font-brush); font-size: 15px; letter-spacing: 1px;
  color: #ffe9a3; background: var(--bg-wood); box-shadow: 0 0 0 1px #24110a; text-shadow: 0 1px 0 #000;
}
.jh-sweep-plan .cost { display: flex; align-items: center; justify-content: center; gap: 4px; }
.jh-sweep-plan .cost svg { width: 20px; height: 20px; }
.jh-sweep-plan .cost b { color: var(--jade-dark); font-size: 16px; }
.jh-sweep-modal .modal { width: 380px; }
.jh-sweep-log .head { text-align: center; font-family: var(--font-brush); font-size: 18px; letter-spacing: 2px; color: var(--red); padding-bottom: 6px; border-bottom: 1px dashed #b8945a; }
.jh-sweep-log .head b { font-size: 22px; }
.jh-sweep-log .lines { max-height: 300px; overflow-y: auto; padding-top: 4px; }
.jh-sweep-log .ln {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 4px; border-bottom: 1px solid rgba(120, 80, 30, .15);
  font-size: 12px; color: var(--ink);
  animation: jhLine .35s ease-out both;
}
@keyframes jhLine { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.jh-sweep-log .ln .nm { flex: none; font-family: var(--font-brush); font-size: 16px; letter-spacing: 1px; color: var(--ink); min-width: 56px; }
.jh-sweep-log .ln .jh-stars svg { width: 12px; height: 12px; }
.jh-sweep-log .ln .jh-stars svg:nth-child(2) { margin-top: -2px; }
.jh-sweep-log .ln .rs { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; color: var(--ink-soft); }
.jh-sweep-log .ln .rs svg { width: 14px; height: 14px; }
.jh-sweep-log .ln .rs i { font-style: normal; color: var(--purple-dark); }
.jh-sweep-log .ln.fail .rs { color: var(--red); }

/* 三星评价宝箱 */
.jh-chest-modal .modal { width: 410px; }
.jh-chest-head { text-align: center; font-family: var(--font-brush); font-size: 18px; letter-spacing: 1px; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 4px; }
.jh-chest-head b { font-size: 24px; color: var(--red); }
.jh-chest-head svg { width: 20px; height: 20px; }
.jh-chest-bar {
  position: relative; height: 14px; margin: 8px 14px 22px; border-radius: 7px;
  background: linear-gradient(180deg, #7a5a3a, #3a2a1a); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6), 0 0 0 1px #24110a;
}
.jh-chest-bar .fill { height: 100%; border-radius: 7px; background: linear-gradient(180deg, #fff0b3, #f2c245 45%, #b8860b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); transition: width .4s; }
.jh-chest-bar .mk {
  position: absolute; top: 15px; transform: translateX(-50%);
  font-size: 10px; font-style: normal; color: var(--ink-soft);
}
.jh-chest-bar .mk::before { content: ''; position: absolute; left: 50%; top: -14px; width: 2px; height: 12px; background: #24110a; opacity: .5; }
.jh-chest-bar .mk.on { color: var(--red); font-weight: 700; }
.jh-chest-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 6px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, .05); box-shadow: inset 0 0 0 1px rgba(120, 80, 30, .2);
}
.jh-chest-row.can { background: rgba(242, 194, 69, .18); box-shadow: inset 0 0 0 1px #d49a1e, 0 0 8px rgba(242, 194, 69, .4); }
.jh-chest-row.got { opacity: .6; filter: grayscale(.5); }
.jh-chest-row .ic { position: relative; flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; }
.jh-chest-row .ic svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.jh-chest-row .ic .need { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; color: var(--ink); }
.jh-chest-row .ic .need svg { width: 12px; height: 12px; }
.jh-chest-row .rw { flex: 1 1 auto; min-width: 0; }
.jh-chest-row .rw .jh-rw-line, .jh-chest-row .rw .jh-rw-items { justify-content: flex-start; padding: 0; gap: 4px 10px; }
.jh-chest-row .rw .jh-rw-items { padding-top: 4px; }
.jh-chest-row .rw .item.sm { --is: 36px; }
.jh-chest-row .rw .item .nm { font-size: 10px; }
.jh-chest-row .rw .desc { font-size: 11px; color: var(--ink-soft); }
.jh-chest-row .op { flex: none; }

/* 奇遇 */
.jh-adv-modal .modal { width: 400px; }
.jh-adv { text-align: center; }
.jh-adv-name { font-family: var(--font-brush); font-size: 24px; letter-spacing: 3px; color: var(--red); }
.jh-adv-intro { margin: 4px 0 8px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.jh-adv-intro div { animation: jhLine .5s ease-out both; }
.jh-adv-intro div:nth-child(2) { animation-delay: .35s; }
.jh-adv-text {
  padding: 8px 10px; border-radius: 5px; text-align: left;
  font-size: 14px; line-height: 1.7; color: var(--ink);
  background: var(--tex-paper), linear-gradient(180deg, #e8d3a3, #d9bf8a);
  box-shadow: inset 0 0 0 1px rgba(255, 245, 220, .6), inset 0 0 12px rgba(120, 80, 30, .25);
  animation: jhLine .5s ease-out .6s both;
}
.jh-adv-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; animation: jhLine .5s ease-out .9s both; }
.jh-adv-opts .btn { height: 40px; font-size: 19px; letter-spacing: 2px; }
.jh-adv-opts .btn .ct { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; opacity: .9; }