/* ===================================================================
   宗门大比 · 角色详情卡(仙侠风弹层)
   左:青蓝山水底 + 粗体大数字   右:角色立绘 + 竖排红木名牌
   =================================================================== */
.card-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:0;
  background:rgba(6,9,14,.82); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s;
}
.card-overlay.show{ opacity:1; visibility:visible; }

/* 全屏查看:卡片铺满视口 */
.card-box{
  --sect:#38bdf8; --sect-glow:rgba(56,189,248,.35);
  position:relative; display:grid; grid-template-columns:minmax(440px,42%) 1fr;
  width:100vw; height:100vh;
  border-radius:0; overflow:hidden; border:none;
  transform:scale(.985); transition:transform .26s cubic-bezier(.22,1,.36,1);
  background:#0e1622;
}
.card-overlay.show .card-box{ transform:scale(1); }

/* 左右切换提示(全屏底部) */
.card-navhint{
  display:none;   /* 提示条隐藏(方向键切换仍生效) */
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:6;
  align-items:center; gap:18px; pointer-events:none;
  font-family:"LXGW WenKai","Kaiti SC","KaiTi",serif;
  font-size:13px; color:rgba(255,255,255,.5); letter-spacing:.04em; white-space:nowrap;
  background:rgba(0,0,0,.4); padding:7px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(4px);
}
.card-navhint b{ color:rgba(255,255,255,.92); font-weight:700; }
.card-navhint i{ font-style:normal; color:rgba(255,255,255,.74); }
.card-navhint .nh-mid{ font-size:11.5px; opacity:.62; letter-spacing:.12em; }
.card-navhint .nh-prev i:empty, .card-navhint .nh-next i:empty{ display:none; }

.card-close{
  position:absolute; top:12px; right:14px; z-index:6;
  width:34px; height:34px; border-radius:9px; cursor:pointer;
  font-size:22px; line-height:1; color:#fff;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center; transition:.15s;
}
.card-close:hover{ background:rgba(0,0,0,.65); border-color:#fff; }

/* ============ 左:道心榜 榜文(青绫裱立轴 · 宣纸 · 毛笔 · 朱砂) ============ */
.card-left{
  --paper:#ece0c1; --paper-hi:#f6efd7; --paper-lo:#dcc99c;
  --ink:#2b2317; --ink-soft:#6a5b43; --cinnabar:#9d2933; --gold:#a8842f; --jade:#3f6b4e; --zhe:#7c4d34;
  --kai:"Ma Shan Zheng","ZCOOL XiaoWei","Kaiti SC","KaiTi","楷体",serif;
  --song:"ZCOOL XiaoWei","Songti SC","STSong","SimSun","宋体",serif;
  --brush:"Ma Shan Zheng","Kaiti SC","KaiTi","楷体",serif;
  position:relative; padding:46px 40px; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* 青绫裱:深黛青织锦绫边 */
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 4px, transparent 4px 9px),
    radial-gradient(140% 100% at 50% 50%, #335157, #213b42 68%, #182f37);
}
.card-left::before{   /* 绫边描金双线 */
  content:""; position:absolute; inset:18px; pointer-events:none; z-index:0;
  border:1px solid rgba(176,142,74,.55);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.16), inset 0 0 22px rgba(0,0,0,.25);
}

/* 宣纸榜文:浮起于绫边之上 */
.cd-board{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:stretch;
  width:100%; max-width:512px; max-height:100%;
  padding:38px 36px 60px;
  color:var(--ink);
  background:
    radial-gradient(130% 70% at 50% -8%, var(--paper-hi), transparent 60%),
    radial-gradient(120% 95% at 50% 116%, var(--paper-lo), transparent 58%),
    linear-gradient(180deg, var(--paper), #e1d1a8);
  border:1px solid var(--zhe);
  box-shadow:
    inset 0 0 0 5px rgba(247,239,215,.5),
    inset 0 0 0 6px rgba(157,41,51,.42),
    0 18px 46px rgba(0,0,0,.5),
    0 2px 0 rgba(0,0,0,.3);
}
.cd-board::before{   /* 宣纸纤维纹理(极淡) */
  content:""; position:absolute; inset:7px; pointer-events:none; opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cd-board > *{ position:relative; z-index:1; }

/* 题额:匾额式居中,描金界线相夹 */
.cd-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--brush); font-size:31px; line-height:1; letter-spacing:.14em;
  color:var(--cinnabar); text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.cd-eyebrow::before, .cd-eyebrow::after{
  content:""; height:1px; width:36px; background:linear-gradient(90deg, transparent, var(--gold) 75%);
}
.cd-eyebrow::after{ transform:scaleX(-1); }
.cd-eyeseal{ display:none; }   /* 题额内不用小印,门派印移至右下钤印 */

/* 名次 */
.cd-rank{ display:flex; align-items:flex-end; justify-content:center; gap:14px; margin:20px 0 4px; }
.cd-rnum{ font-family:var(--brush); font-size:27px; color:var(--ink); line-height:.9; }
.cd-rnum b{ font-family:var(--brush); font-size:62px; font-weight:400; color:var(--cinnabar); margin:0 7px;
  text-shadow:0 2px 1px rgba(157,41,51,.22), 0 1px 0 rgba(255,255,255,.4); }
.cd-rankarrow{ font-family:var(--song); font-size:17px; font-weight:700; padding-bottom:11px; letter-spacing:.05em; }
.cd-rankarrow.up{ color:var(--cinnabar); } .cd-rankarrow.down{ color:var(--jade); }

/* 鱼尾界饰(古籍版心鱼尾) */
.cd-rule{ position:relative; height:1px; margin:18px 2px 22px;
  background:linear-gradient(90deg, transparent, rgba(157,41,51,.5) 18%, rgba(157,41,51,.5) 82%, transparent); }
.cd-cloud{ position:absolute; left:50%; top:50%; width:26px; height:15px; transform:translate(-50%,-50%);
  background:var(--cinnabar); box-shadow:0 1px 2px rgba(0,0,0,.22);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 52%, 0 100%); }   /* 鱼尾 */

.cd-stats{ display:flex; flex-direction:column; gap:14px; }
.cd-row{ display:flex; align-items:baseline; gap:8px; }
.cd-label{ font-family:var(--brush); font-size:20px; color:var(--ink-soft); white-space:nowrap; letter-spacing:.05em; }
.cd-dots{ flex:1; border-bottom:1.5px dotted rgba(124,77,52,.45); transform:translateY(-5px); }
.cd-value{ font-family:var(--song); font-weight:700; font-size:26px; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:.01em; }
.cd-delta{ font-family:var(--song); font-weight:700; font-size:14px; margin-left:5px; font-variant-numeric:tabular-nums; }
.cd-delta.up{ color:var(--cinnabar); } .cd-delta.down{ color:var(--jade); }
/* 前N均分行的「去榜一/含榜一」切换按钮 */
.cd-tg{ font-family:var(--brush); font-size:12.5px; margin-left:7px; padding:0 8px; cursor:pointer;
  color:var(--ink-soft); background:transparent; border:1px solid rgba(124,77,52,.5);
  border-radius:10px; opacity:.75; line-height:1.7; letter-spacing:.04em; transition:all .15s; }
.cd-tg:hover{ opacity:1; border-color:var(--cinnabar); color:var(--cinnabar); }
.cd-row-tg[data-mode="n"] .cd-tg{ color:var(--cinnabar); border-color:var(--cinnabar); opacity:1; }
.cd-vwrap{ display:inline-flex; align-items:baseline; white-space:nowrap; }

.cd-seg-h{ position:relative; text-align:center; margin:30px 0 17px; padding-top:18px; }
.cd-seg-h::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(168,132,47,.45); }
.cd-seg-h span{ position:relative; z-index:1; background:var(--paper); padding:0 16px;
  font-family:var(--brush); font-size:18px; letter-spacing:.28em; color:var(--cinnabar); }

/* 萬分:顶置居中,朱砂突出(榜中之巅) */
.cd-tier-top{ display:flex; align-items:baseline; justify-content:center; gap:12px; margin:0 0 16px; }
.cd-tier-top .ct-th{ font-family:var(--brush); font-size:29px; color:var(--cinnabar); letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.4); }
.cd-tier-top .ct-n{ font-family:var(--song); font-weight:700; font-size:25px; color:var(--cinnabar);
  font-variant-numeric:tabular-nums; }
.cd-tier-top .ct-n i{ font-family:var(--brush); font-size:13px; font-style:normal; font-weight:400; color:var(--ink-soft); margin-left:2px; }

.cd-tiers{ display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.cd-tier{ display:flex; align-items:baseline; gap:7px; }
.ct-th{ font-family:var(--brush); font-size:19px; color:var(--ink-soft); white-space:nowrap; }
.ct-dots{ flex:1; border-bottom:1.5px dotted rgba(124,77,52,.4); transform:translateY(-5px); }
.ct-n{ font-family:var(--song); font-weight:700; font-size:21px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ct-n i{ font-family:var(--brush); font-size:12px; font-style:normal; font-weight:400; color:var(--ink-soft); margin-left:2px; }
.cd-tier .cd-delta{ font-size:11.5px; margin-left:3px; }
.cd-tier-top .cd-delta{ font-size:13px; margin-left:5px; }

/* 门派钤印:朱文方印,盖于右下 */
.cd-stamp{
  position:absolute; right:16px; bottom:13px; width:44px; height:44px; z-index:2;
  display:grid; place-items:center; font-family:var(--brush); font-size:25px; color:#b3322f;
  border:2.5px solid #b3322f; border-radius:4px; opacity:.6; transform:rotate(-6deg); pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(157,41,51,.5), inset 0 0 7px rgba(157,41,51,.18);
  text-shadow:0 0 1px rgba(157,41,51,.4);
}

/* ============ 右:立绘 + 名牌 ============ */
.card-right{
  position:relative; overflow:hidden; background:#10202c;
  display:flex; align-items:center; justify-content:center;
}
.cd-stage{ position:absolute; inset:0; }

/* 随机:水墨剪影配雾色山水底,黑剪影立在雾中如水墨画 */
.cd-stage.cd-rand{
  background:
    radial-gradient(60% 40% at 72% 24%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(85% 55% at 50% 116%, rgba(60,84,96,.6), transparent 66%),
    linear-gradient(180deg, #e8eff1 0%, #c4d2d8 48%, #93a6ad 100%);
}
.cd-stage.cd-rand .cd-art{ object-fit:contain; object-position:center bottom; filter:none; }

/* 静态立绘(初始/回退);Spine 成功后淡出 */
.cd-art-wrap{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  opacity:1; transition:opacity .35s ease; }
.cd-stage.spine-on .cd-art-wrap,
.cd-stage.spine-loading .cd-art-wrap{ opacity:0; }            /* 动画/加载中都藏静态 */
.cd-stage.spine-loading .cd-spine{ opacity:1; }              /* 加载中显雾色底,不闪静态 */
.cd-art{
  height:100%; width:auto; max-width:none; object-fit:cover; object-position:center top;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.4));
}
.cd-art.cd-art-fallback{ height:auto; width:46%; align-self:center; margin:auto 0;
  image-rendering:auto; border-radius:12px; }

/* Spine 真动画层:仙侠雾色底(按门派微调),成功才显 */
.cd-spine{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(90% 70% at 50% 100%, var(--sect-glow), transparent 70%),
    linear-gradient(180deg, #16242f 0%, #0e1a23 100%);
}
.cd-stage.spine-on .cd-spine{ opacity:1; }
.cd-spine canvas{ width:100% !important; height:100% !important; display:block; background:transparent !important; }
.cd-spine .spine-player, .cd-spine .spine-player-container{
  width:100% !important; height:100% !important; background:transparent !important; }

/* 竖排红木名牌(左上压在立绘上) */
.cd-plaque{
  position:absolute; top:22px; left:22px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:14px 9px 12px; border-radius:7px;
  background:linear-gradient(180deg,#8a2222, #5e1414);
  border:1px solid rgba(0,0,0,.4);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,210,160,.25);
}
.cd-pname{
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:26px; font-weight:900; letter-spacing:.12em; color:#f6e3c4;
  font-family:"STKaiti","KaiTi","Noto Serif SC",serif;
  text-shadow:0 2px 3px rgba(0,0,0,.5);
}
.cd-seal{
  width:34px; height:34px; border-radius:6px; display:grid; place-items:center;
  font-size:17px; font-weight:900; color:#fff;
  background:var(--sect); box-shadow:0 0 0 2px rgba(255,255,255,.3), 0 3px 8px rgba(0,0,0,.4);
  font-family:"STKaiti","KaiTi","Noto Serif SC",serif;
}

/* ============ 响应式:窄屏全屏上下堆叠 ============ */
@media (max-width:760px){
  .card-box{ grid-template-columns:1fr; grid-template-rows:minmax(0,52%) 1fr; height:100vh; width:100vw; }
  /* overflow:hidden 兜底:榜文经 fitBoard 等比缩放后仍居中裁剪,绝不溢出盖住下方立绘 */
  .card-left{ align-items:center; justify-content:center; overflow:hidden;
    border-right:none; border-bottom:2px solid rgba(255,255,255,.5); padding:14px 12px; }
  .card-left::before{ inset:9px; }
  /* 去掉 max-height:100%,让榜文按自然高度排布,交由 fitBoard 整体缩放到塞进上半区 */
  .cd-board{ max-width:none; max-height:none; padding:20px 22px 48px; }
  .cd-rnum{ font-size:27px; } .cd-value{ font-size:22px; } .cd-label{ font-size:16px; }
  .card-right{ min-height:0; }
  .card-navhint{ font-size:11.5px; gap:10px; bottom:10px; padding:5px 12px; }
  .card-navhint .nh-mid{ display:none; }
}