/* =====================================================================
 * css/screens/xunfang.css — 寻访页（寻侠 / 商贾 / 礼包 / 元宝）专属样式
 * 归属：xunfang 组（js/screens/xunfang.js）。所有类名一律 .xf- / .rv- 前缀，不改 theme.css / screens.css。
 * 依赖 theme.css 的 .tab-paper .list-row .shop-row .gift-row .price .tag-special .countdown .btn .seal .q-甲…
 * 参考帧：docs/ref/sheet09.jpg 第二行（寻侠三海报）、t115（商贾行）、t118/t122（礼包行）
 * ===================================================================== */

/* ---------- 骨架 ---------- */
.xf-root{position:relative;height:100%;display:flex;flex-direction:column;background:var(--bg-wood-dark);overflow:hidden}
.xf-root .xf-tabs{flex:none}
.xf-sub{flex:none;height:22px;line-height:22px;text-align:center;font-size:11px;letter-spacing:2px;color:#c9a96e;
  background:linear-gradient(180deg,#2a1608,#3a1d0c);box-shadow:inset 0 -1px 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,150,.12);text-shadow:0 1px 0 #000}
.xf-body{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:radial-gradient(ellipse 80% 30% at 50% 0%,rgba(255,220,150,.08),transparent 70%),var(--bg-wood-dark)}
.xf-body::-webkit-scrollbar{width:0;height:0}
.xf-hl{display:block;margin-top:6px;color:var(--red);font-family:var(--font-brush);font-size:18px;letter-spacing:1px}

/* ---------- 寻侠三海报 ---------- */
.xf-posters{display:flex;gap:6px;padding:8px 5px 4px}
.xf-poster{position:relative;flex:none;width:142px;height:520px;border-radius:6px;overflow:hidden;color:#fff3d6;text-align:center;
  border:2px solid #24110a;box-shadow:inset 0 0 0 2px rgba(242,194,69,.55),0 3px 8px rgba(0,0,0,.6);background:#1a0c08}
.xf-poster .scene{position:absolute;left:0;right:0;top:0;height:322px;overflow:hidden}
.xf-poster .scene::before,.xf-poster .scene::after{content:'';position:absolute;left:0;right:0}
.xf-poster .ground{position:absolute;left:0;right:0;top:262px;height:60px;z-index:1}
.xf-poster .lan{position:absolute;top:70px;width:12px;height:20px;border-radius:6px;z-index:2;
  background:radial-gradient(circle at 40% 35%,#ffb070,#d8321f 60%,#7e1a10);box-shadow:0 0 12px 3px rgba(255,120,60,.65);animation:xfLan 2.6s ease-in-out infinite}
.xf-poster .lan::before{content:'';position:absolute;left:4px;top:-7px;width:4px;height:7px;background:#5a3800}
.xf-poster .lan.l{left:10px}.xf-poster .lan.r{right:10px;top:84px;animation-delay:-1.3s}
@keyframes xfLan{0%,100%{box-shadow:0 0 12px 3px rgba(255,120,60,.65)}50%{box-shadow:0 0 18px 5px rgba(255,140,70,.85)}}

/* 市井访客：灰蓝街巷 —— 两侧屋檐剪影 + 石板街 */
.p-baili .scene{background:
  radial-gradient(ellipse 80% 40% at 50% 0%,rgba(210,225,240,.35),transparent 70%),
  linear-gradient(180deg,#7a8ea3 0%,#556879 40%,#37434f 70%,#242b33 100%)}
.p-baili .scene::before{top:40px;height:200px;background:
  linear-gradient(168deg,#1e262e 0 34%,rgba(30,38,46,.85) 34% 36%,transparent 36.5%) left/52% 100% no-repeat,
  linear-gradient(-168deg,#1e262e 0 34%,rgba(30,38,46,.85) 34% 36%,transparent 36.5%) right/52% 100% no-repeat,
  linear-gradient(172deg,#2a333d 0 22%,transparent 22.5%) left/40% 100% no-repeat,
  linear-gradient(-172deg,#2a333d 0 22%,transparent 22.5%) right/40% 100% no-repeat;opacity:.95}
.p-baili .scene::after{top:110px;height:150px;background:
  radial-gradient(ellipse 6px 8px at 18px 40px,#ffcf7a 0 40%,transparent 60%),
  repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,215,140,.10) 30px 36px,transparent 36px 70px);opacity:.6}
.p-baili .ground{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 13px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 28px),
  linear-gradient(180deg,#5a626b,#3a4148 60%,#262b31)}

/* 林间寻踪：绿色竹林 —— 两层竹竿（mask 出竹节）+ 草地 */
.p-qianli .scene{background:
  radial-gradient(ellipse 70% 40% at 50% 0%,rgba(200,255,190,.4),transparent 70%),
  linear-gradient(180deg,#5a8a4c 0%,#2f5f33 40%,#193d20 75%,#0c2010 100%)}
.p-qianli .scene::before{top:0;height:322px;opacity:.9;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 34px,rgba(0,0,0,.5) 34px 37px),linear-gradient(90deg,#4f8f48,#245628 55%,#3b7a3a);
  -webkit-mask:repeating-linear-gradient(90deg,transparent 0 13px,#000 13px 21px,transparent 21px 41px);mask:repeating-linear-gradient(90deg,transparent 0 13px,#000 13px 21px,transparent 21px 41px)}
.p-qianli .scene::after{top:0;height:322px;opacity:.75;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 28px,rgba(0,0,0,.55) 28px 31px),linear-gradient(90deg,#1c3f20,#0e2612 60%,#1a3a1e);
  -webkit-mask:repeating-linear-gradient(90deg,transparent 0 29px,#000 29px 34px,transparent 34px 55px);mask:repeating-linear-gradient(90deg,transparent 0 29px,#000 29px 34px,transparent 34px 55px)}
.p-qianli .ground{background:
  repeating-linear-gradient(90deg,rgba(120,200,110,.25) 0 2px,transparent 2px 7px),
  linear-gradient(180deg,#2f5a2a,#1b3a1c 60%,#0f2412)}

/* 巅峰侠影：金色山巅 —— 旭日 + 层叠山峰 + 云海 */
.p-wanli .scene{background:
  radial-gradient(circle 44px at 50% 78px,#fff8d0 0%,#ffe082 40%,rgba(255,200,80,.55) 62%,transparent 78%),
  radial-gradient(ellipse 90% 50% at 50% 30%,rgba(255,230,150,.55),transparent 70%),
  linear-gradient(180deg,#f4cf74 0%,#dc9c3d 35%,#8f5818 70%,#3a2208 100%)}
.p-wanli .scene::before{top:150px;height:172px;background:linear-gradient(180deg,#6a4212,#3a2208 70%,#24140a);
  clip-path:polygon(0 100%,0 62%,16% 36%,30% 56%,50% 8%,68% 46%,84% 30%,100% 60%,100% 100%)}
.p-wanli .scene::after{top:262px;height:60px;filter:blur(1px);background:
  radial-gradient(ellipse 42px 16px at 26% 50%,rgba(255,245,220,.95),transparent 70%),
  radial-gradient(ellipse 54px 18px at 72% 35%,rgba(255,245,220,.9),transparent 70%),
  radial-gradient(ellipse 70px 22px at 50% 80%,rgba(255,245,220,.85),transparent 70%),
  radial-gradient(ellipse 40px 14px at 8% 85%,rgba(255,245,220,.8),transparent 70%)}
.p-wanli .ground{background:linear-gradient(180deg,rgba(255,245,220,0),rgba(255,240,210,.55))}

/* 光柱 / 剪影 / 竖排标题 */
.xf-poster .beam{position:absolute;left:50%;top:-10px;width:120px;height:310px;margin-left:-60px;pointer-events:none;z-index:1;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,250,225,.75),rgba(255,240,190,.3) 55%,rgba(255,240,190,0));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);animation:xfBeam 3.2s ease-in-out infinite}
@keyframes xfBeam{0%,100%{opacity:.7}50%{opacity:1}}
/* 光柱里的浮尘：三层不同速度的小光点，纯 CSS 无 DOM */
.xf-poster .beam::before,.xf-poster .beam::after{content:'';position:absolute;left:0;right:0;top:0;height:320px;pointer-events:none;
  background:
    radial-gradient(circle,rgba(255,248,214,.95) 0 1.1px,transparent 1.8px) 14px 12px / 42px 74px repeat,
    radial-gradient(circle,rgba(255,240,190,.7) 0 .9px,transparent 1.6px) 34px 46px / 58px 96px repeat;
  animation:xfDust 9s linear infinite}
.xf-poster .beam::after{animation-duration:14s;animation-delay:-4s;opacity:.6;transform:scaleX(-1)}
@keyframes xfDust{0%{transform:translateY(0)}100%{transform:translateY(-96px)}}
.xf-poster .beam::after{animation-name:xfDust2}
@keyframes xfDust2{0%{transform:scaleX(-1) translateY(0)}100%{transform:scaleX(-1) translateY(-74px)}}
/* 场景里的飘萤（挂在海报根节点，不占用 .scene 的伪元素） */
.xf-poster::before{
  content:'';position:absolute;left:0;right:0;top:0;height:322px;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(circle,rgba(255,232,160,.85) 0 1.6px,transparent 2.6px) 22px 30px / 96px 130px repeat,
    radial-gradient(circle,rgba(255,246,205,.55) 0 1.2px,transparent 2.2px) 70px 88px / 118px 168px repeat;
  animation:xfMote 11s linear infinite}
@keyframes xfMote{0%{transform:translate3d(0,0,0);opacity:.5}50%{opacity:.95}100%{transform:translate3d(6px,-130px,0);opacity:.5}}
.xf-poster.locked::before{display:none}
.xf-poster .sil{position:absolute;left:0;right:0;top:64px;height:260px;z-index:2;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.xf-poster .sil img{height:256px;width:auto;max-width:160px;object-fit:contain;object-position:50% 100%;filter:brightness(0) drop-shadow(0 0 5px rgba(0,0,0,.85));opacity:.97}
.xf-poster .sil svg{display:none;width:130px;height:206px;filter:drop-shadow(0 0 6px rgba(0,0,0,.9))}
.xf-poster .sil.miss img{display:none}.xf-poster .sil.miss svg{display:block}
.xf-poster .ptitle{position:absolute;left:8px;top:8px;z-index:3;writing-mode:vertical-rl;font-family:var(--font-brush);font-size:27px;line-height:1;letter-spacing:5px;color:#ffe9a3;
  text-shadow:0 0 8px rgba(255,210,100,.85),1px 1px 0 #3a1a10,-1px -1px 0 #3a1a10,1px -1px 0 #3a1a10,-1px 1px 0 #3a1a10,0 2px 3px #000}

/* 信息条：任务奖励 / 可获品质 */
.xf-poster .info{position:absolute;left:0;right:0;top:322px;height:86px;z-index:3;padding:5px 7px 0;text-align:left;
  background:var(--tex-wood),linear-gradient(180deg,#5a2d10,#3a1d0c);box-shadow:inset 0 2px 0 rgba(255,220,150,.25),inset 0 -2px 0 rgba(0,0,0,.5)}
.xf-poster .info .lab{font-family:var(--font-brush);font-size:15px;color:#ffe9a3;text-shadow:0 1px 0 #000;letter-spacing:1px}
.xf-poster .info .amt{display:flex;align-items:center;gap:2px;font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 0 #000;margin-top:-1px}
.xf-poster .info .amt svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.xf-poster .preview{position:absolute;right:7px;top:7px;width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 40% 32%,#fff6cf,#f2c245 50%,#b8860b);box-shadow:0 0 0 1px #5a3800,0 0 0 2px rgba(255,235,160,.5),0 1px 3px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-brush);font-size:11px;line-height:1.05;color:#7a1e12}
.xf-poster .preview:active{transform:scale(.94)}
.xf-poster .ql{margin-top:3px;font-size:11px;color:#e8d3a3;text-shadow:0 1px 0 #000;letter-spacing:1px}
.xf-poster .qs{display:flex;gap:7px;margin-top:4px;padding-left:2px}
/* 品质印章（圆形，按品质上色） */
.xseal{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;flex:none;font-family:var(--font-brush);font-size:15px;line-height:1;color:#fff6e6;transform:rotate(-6deg);
  background:radial-gradient(circle at 40% 35%,#e8523a,#c22f1f 45%,#8f1d13);box-shadow:0 0 0 1px #fff0c8,0 0 0 2px #a8261b,0 1px 2px rgba(0,0,0,.6),inset 0 -2px 2px rgba(0,0,0,.35);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.xseal.q-甲{background:radial-gradient(circle at 40% 35%,#fff0b3,#f2c245 45%,#b8860b);color:#8f1d13;text-shadow:0 1px 0 rgba(255,255,255,.5);box-shadow:0 0 0 1px #fff6d5,0 0 0 2px #b8860b,0 0 7px rgba(255,210,80,.85),inset 0 -2px 2px rgba(0,0,0,.2)}
.xseal.q-乙{background:radial-gradient(circle at 40% 35%,#d9b3ff,#9b59d6 45%,#5c2d8e);box-shadow:0 0 0 1px #f4e8ff,0 0 0 2px #7b3fb5,0 1px 2px rgba(0,0,0,.6),inset 0 -2px 2px rgba(0,0,0,.3)}
.xseal.q-丙{background:radial-gradient(circle at 40% 35%,#9cc4f7,#3b82f6 45%,#1d4f9e);box-shadow:0 0 0 1px #eaf3ff,0 0 0 2px #2f6fb5,0 1px 2px rgba(0,0,0,.6),inset 0 -2px 2px rgba(0,0,0,.3)}
.xseal.q-丁{background:radial-gradient(circle at 40% 35%,#b5e8b3,#4caf50 45%,#2a6e2e);box-shadow:0 0 0 1px #eefbea,0 0 0 2px #3f8f5a,0 1px 2px rgba(0,0,0,.6),inset 0 -2px 2px rgba(0,0,0,.3)}
.xseal.lg{width:30px;height:30px;font-size:20px}

/* 按钮区 / 免费次数 */
.xf-poster .btns{position:absolute;left:0;right:0;top:412px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px}
.xf-poster .btns .btn{min-width:110px;height:38px;font-size:23px;padding:0 14px;letter-spacing:4px;text-indent:4px}
/* 「寻侠」主钮：金边 + 呼吸光晕 */
.xf-poster .btns .btn:not(.ten):not(.disabled):not([disabled]){animation:xfBreath 2.2s ease-in-out infinite}
@keyframes xfBreath{
  0%,100%{filter:brightness(1) drop-shadow(0 0 3px rgba(255,190,90,.45))}
  50%{filter:brightness(1.14) drop-shadow(0 0 12px rgba(255,205,110,.95))}}
.xf-poster .btns .btn:not(.ten)::after,.xf-poster .btns .btn:not(.ten)::before{box-shadow:0 0 0 1px #241a12,inset 0 1px 0 rgba(255,255,255,.7),0 2px 2px rgba(0,0,0,.5)}
.xf-poster .btns .btn.ten{min-width:100px;height:26px;font-size:15px;letter-spacing:1px;text-indent:1px;padding:0 10px}
.xf-poster .free{position:absolute;left:0;right:0;bottom:0;height:36px;z-index:3;padding-top:2px;font-size:12px;line-height:1.35;color:#e8d3a3;text-shadow:0 1px 0 #000;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}
.xf-poster .free b{color:#ffe08a;font-weight:700}
.xf-poster .free .pt{font-size:10px;color:#c9a96e;letter-spacing:.5px}
.xf-poster .free .pt b{color:#ff9d7a}
.xf-poster .free .cd b{color:#ff8a6a;font-variant-numeric:tabular-nums}
.xf-poster.locked .scene,.xf-poster.locked .sil,.xf-poster.locked .beam,.xf-poster.locked .lan{filter:grayscale(.85) brightness(.5)}
.xf-poster .lock{position:absolute;left:0;right:0;top:128px;z-index:4;text-align:center;color:#f3e6c4;font-size:13px;text-shadow:0 1px 0 #000,0 0 6px #000;letter-spacing:1px}
.xf-poster .lock svg{width:42px;height:42px;display:block;margin:0 auto 4px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.xf-gacha-tip{margin:2px 10px 10px;padding:6px 8px 0;font-size:11px;line-height:1.55;color:#c9a96e;text-align:center;border-top:1px dashed rgba(201,169,110,.35);text-shadow:0 1px 0 #000}
.xf-gacha-tip b{color:#ffe08a;font-weight:400}

/* ---------- 寻侠揭示层 ---------- */
.xf-reveal{position:absolute;inset:0;z-index:30;overflow:hidden;display:flex;flex-direction:column;align-items:center;cursor:pointer;animation:fadeIn .25s ease-out both;
  background:radial-gradient(ellipse 70% 50% at 50% 42%,rgba(96,62,28,.9),rgba(12,7,3,.98) 75%),#0a0603}
.xf-reveal .rv-ink{position:absolute;inset:0;background:var(--tex-paper);opacity:.28;pointer-events:none}
.xf-reveal .rv-sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.xf-reveal .rv-sparks i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#ffe08a;box-shadow:0 0 6px 2px rgba(255,210,100,.7);opacity:0;animation:xfSpark 4s linear infinite}
@keyframes xfSpark{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-820px) scale(1.2);opacity:0}}
.xf-reveal .rv-title{margin-top:16px;font-family:var(--font-brush);font-size:30px;letter-spacing:6px;text-indent:6px;color:#ffe9a3;z-index:2;text-shadow:0 0 12px rgba(255,200,80,.7),0 2px 0 #3a1a10,0 0 2px #000}
.xf-reveal .rv-sub{font-size:12px;color:#c9a96e;margin-top:1px;z-index:2;letter-spacing:2px;text-shadow:0 1px 0 #000}
.xf-reveal .rv-skip{position:absolute;right:10px;top:12px;z-index:3;font-size:12px;color:#e8d3a3;padding:4px 12px;border:1px solid rgba(201,169,110,.55);border-radius:14px;background:rgba(0,0,0,.35);text-shadow:0 1px 0 #000}
.xf-reveal .rv-stage{position:relative;z-index:2;flex:1 1 auto;width:448px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px 8px;padding:8px 6px}
.xf-reveal .rv-stage.ten{gap:14px 8px;padding:0 4px;align-content:center}
.xf-reveal .rv-stage.shake{animation:xfShake .5s linear both}
@keyframes xfShake{0%,100%{transform:translate(0,0)}10%{transform:translate(-7px,5px)}20%{transform:translate(6px,-6px)}30%{transform:translate(-6px,-3px)}40%{transform:translate(7px,3px)}50%{transform:translate(-5px,6px)}60%{transform:translate(5px,-4px)}70%{transform:translate(-3px,2px)}80%{transform:translate(3px,-2px)}90%{transform:translate(-2px,1px)}}
.xf-reveal .rv-flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff8d8,#f2c245 40%,rgba(242,194,69,0) 75%)}
.xf-reveal .rv-flash.on{animation:xfFlash .75s ease-out both}
@keyframes xfFlash{0%{opacity:.95}100%{opacity:0}}
/* 卡片：卡背 → 翻转 → 品质光柱 → 立绘 */
.rv-card{position:relative;width:220px;height:330px;perspective:900px;flex:none}
.rv-stage.ten .rv-card{width:96px;height:146px}
.rv-card .rv-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.rv-card.flip .rv-in{transform:rotateY(180deg)}
.rv-card .face{position:absolute;inset:0;border-radius:8px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rv-card .back{background:var(--tex-paper),radial-gradient(circle at 50% 40%,#6b3a16,#2a1608 72%);border:3px solid #b8860b;
  box-shadow:inset 0 0 0 2px #3a1d0c,inset 0 0 30px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}
.rv-card .back::before{content:'';position:absolute;inset:10px;border:1px solid rgba(242,194,69,.55);border-radius:5px;background:var(--tex-cloud) center/120px 48px repeat;opacity:.55}
.rv-card .back .bk{position:relative;width:90px;height:90px;border-radius:50%;border:3px solid #f2c245;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-brush);font-size:54px;color:#f2c245;text-shadow:0 2px 0 #3a1a10,0 0 10px rgba(255,210,80,.8);
  background:radial-gradient(circle,#8a4f22,#3a1d0c);box-shadow:0 0 14px rgba(255,210,80,.55),inset 0 0 12px rgba(0,0,0,.6);animation:xfBk 1.6s ease-in-out infinite}
@keyframes xfBk{0%,100%{box-shadow:0 0 12px rgba(255,210,80,.45),inset 0 0 12px rgba(0,0,0,.6)}50%{box-shadow:0 0 22px rgba(255,220,100,.85),inset 0 0 12px rgba(0,0,0,.6)}}
.rv-stage.ten .rv-card .back{border-width:2px;border-radius:5px}
.rv-stage.ten .rv-card .back::before{inset:5px}
.rv-stage.ten .rv-card .back .bk{width:52px;height:52px;font-size:30px;border-width:2px}
.rv-card .front{transform:rotateY(180deg);background:var(--qbg);border:3px solid var(--qc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 16px var(--qc),0 4px 10px rgba(0,0,0,.7)}
.rv-stage.ten .rv-card .front{border-width:2px;border-radius:5px}
.rv-card .front .halo{position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 42%,rgba(255,255,255,.6),transparent 70%),var(--tex-paper)}
.rv-card .front .pt{position:absolute;left:0;right:0;top:6px;bottom:46px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.rv-stage.ten .rv-card .front .pt{top:2px;bottom:30px}
.rv-card .front .pt img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.rv-card .front .nm{position:absolute;left:9px;top:9px;writing-mode:vertical-rl;font-family:var(--font-brush);font-size:27px;letter-spacing:3px;color:#fff;text-shadow:var(--stroke-dark),0 0 6px rgba(0,0,0,.6)}
.rv-stage.ten .rv-card .front .nm{font-size:15px;left:4px;top:5px;letter-spacing:1px}
.rv-card .front .seal{position:absolute;right:9px;top:9px}
.rv-stage.ten .rv-card .front .seal{right:3px;top:3px}
.rv-card .front .ft{position:absolute;left:0;right:0;bottom:0;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.82));color:#ffe9a3;font-size:13px;text-shadow:0 1px 0 #000}
.rv-card .front .ft .nw{color:#ff9d7a;font-family:var(--font-brush);font-size:18px;letter-spacing:2px}
.rv-card .front .ft .dup{color:#d9b3ff}
.rv-card .front .ft .dup2{color:#c9a96e;font-size:11px}
.rv-stage.ten .rv-card .front .ft{height:30px;font-size:10px;line-height:1.15}
.rv-stage.ten .rv-card .front .ft .nw{font-size:14px;letter-spacing:1px}
.rv-stage.ten .rv-card .front .ft .dup{color:#e8d3a3}
.rv-stage.ten .rv-card .front .ft .dup2{font-size:10px;color:#d9b3ff}
.rv-card .rv-beam{position:absolute;left:15%;bottom:50%;width:70%;height:640px;transform-origin:50% 100%;transform:scaleY(0);opacity:0;pointer-events:none;z-index:5;mix-blend-mode:screen;
  background:linear-gradient(0deg,var(--qc) 0%,rgba(255,255,255,.7) 18%,var(--qc3) 30%,transparent 100%);clip-path:polygon(28% 100%,72% 100%,100% 0,0 0)}
.rv-card.flip .rv-beam{animation:xfBeamUp .95s ease-out both}
.rv-card.q-甲.flip .rv-beam{animation-duration:1.5s}
@keyframes xfBeamUp{0%{transform:scaleY(0);opacity:0}25%{opacity:1}100%{transform:scaleY(1);opacity:0}}
.rv-card.q-甲.flip .front{animation:xfGoldPulse 1.6s ease-in-out infinite}
@keyframes xfGoldPulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 16px #f2c245,0 4px 10px rgba(0,0,0,.7)}50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 30px 6px #ffd54a,0 4px 10px rgba(0,0,0,.7)}}
.xf-reveal .rv-foot{position:relative;z-index:2;flex:none;width:448px;padding:6px 10px 16px;text-align:center;opacity:0;transition:opacity .3s}
.xf-reveal .rv-foot.on{opacity:1}
.xf-reveal .rv-bonus{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-bottom:10px;font-size:13px;color:#ffe9a3;text-shadow:0 1px 0 #000}
.xf-reveal .rv-bonus span{display:inline-flex;align-items:center;gap:3px}
.xf-reveal .rv-bonus svg{width:18px;height:18px}
.xf-reveal .rv-bonus b{color:#fff}
.xf-reveal .rv-bonus .pt{color:#c9a96e;font-size:11px}
.xf-reveal .rv-btns{display:flex;justify-content:center;gap:16px}
.xf-reveal .rv-btns .btn{min-width:120px}

/* ---------- 商贾 ---------- */
.xf-stabs{display:flex;gap:3px;padding:6px 5px 0;background:var(--bg-wood-dark);box-shadow:inset 0 -3px 0 #b8860b;flex:none}
.xf-stab{flex:1 1 0;height:34px;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:6px 6px 2px 2px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-brush);font-size:16px;letter-spacing:1px;color:#f6d675;text-shadow:var(--shadow-gold-text);
  background:var(--bg-wood-plank);border:2px solid #24110a;border-bottom:0;box-shadow:inset 0 0 0 1px rgba(242,194,69,.35),inset 0 2px 0 rgba(255,225,160,.3);transition:filter .12s}
.xf-stab:active{filter:brightness(.9)}
.xf-stab.active{background:var(--bg-red);color:#fff3c2;height:38px;border-color:#3f0a06;box-shadow:inset 0 0 0 1px rgba(255,214,120,.5),inset 0 2px 0 rgba(255,200,150,.4),0 0 8px rgba(216,50,31,.5)}
.xf-stab svg{width:17px;height:17px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.xf-stab.wide{flex:1.4 1 0}
.xf-shop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px 2px;font-size:12px;color:#e8d3a3;text-shadow:0 1px 0 #000}
.xf-shop-head .bal{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.xf-shop-head .bal b{color:#fff;font-size:14px}
.xf-shop-head .bal svg{width:20px;height:20px}
.xf-shop-head .src{flex:1 1 auto;min-width:0;color:#c9a96e;font-size:11px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xf-shop-head .cd{white-space:nowrap}
.xf-shop-head .cd b{color:#ff8a6a;font-variant-numeric:tabular-nums}
.xf-shop-head .btn{min-width:66px;height:28px;font-size:16px;padding:0 10px;letter-spacing:1px}
.xf-list{padding:0 0 14px}
.xf-row .lead{position:relative;flex-direction:column;gap:4px}
.xf-row .own{position:absolute;right:-7px;top:-8px;min-width:20px;height:18px;padding:0 5px;border-radius:9px;z-index:5;text-align:center;line-height:18px;
  background:radial-gradient(circle at 35% 30%,#ff8a6a,#d8321f 55%,#8a140a);color:#fff;font-family:var(--font-body);font-size:11px;font-weight:700;
  box-shadow:0 0 0 1px #5a0a04,inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.6);text-shadow:0 1px 0 #6e140c;pointer-events:none}
.xf-row .title{display:flex;align-items:baseline;gap:8px}
.xf-row .title .nm{font-size:17px}
.xf-row .title .limit{font-size:12px;font-weight:400;color:#f3e6c4;white-space:nowrap}
.xf-row .foot .btn{min-width:112px;height:44px;font-size:24px;letter-spacing:6px;text-indent:6px}
.xf-row .foot .btn.btn-stone{letter-spacing:2px;text-indent:2px;font-size:20px}
.xf-row .disc{display:inline-flex;align-items:center;gap:6px}
.xf-row .disc .tag-special{height:18px;font-size:13px;padding:0 5px}
.xf-row.sold .foot .price{opacity:.7}
.xf-empty{padding:40px 20px;text-align:center;color:#c9a96e;font-size:14px;line-height:1.7}
.xf-empty .brush{font-family:var(--font-brush);font-size:24px;color:#e8d3a3;letter-spacing:3px}

/* ---------- 礼包 ---------- */
.xf-gift-head{display:flex;align-items:center;gap:8px;padding:6px 12px 2px;font-size:12px;color:#e8d3a3;text-shadow:0 1px 0 #000}
.xf-gift-head svg{width:56px;height:23px;flex:none}
.xf-gift-head .src{flex:1 1 auto;text-align:right;color:#c9a96e;font-size:11px}
.xf-row.gift .qty{font-size:10px;line-height:1.2;color:#e8d3a3;text-align:center;width:56px;text-shadow:0 1px 0 #000}
.xf-row.gift .qty b{display:block;color:#ffe08a;font-size:12px}
.xf-row.gift .vtag{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:400;color:#ffb0a0;white-space:nowrap}
.xf-row.gift .vtag svg{width:13px;height:13px}
.xf-row.gift.vlock{filter:saturate(.45) brightness(.85)}
.xf-row.gift .countdown{top:9px}
.xf-row.gift .price-col .row{align-items:center}

/* ---------- 元宝 ---------- */
.xf-note{margin:10px 10px 4px;padding:9px 14px;border-radius:6px;font-size:12px;line-height:1.65;color:var(--ink);
  background:var(--bg-paper-light);border:1px solid #8c7355;box-shadow:inset 0 0 0 1px rgba(255,248,225,.6),inset 0 0 18px rgba(120,80,30,.2),0 2px 3px rgba(0,0,0,.4)}
.xf-note b{color:var(--red)}
.xf-note .t{font-family:var(--font-brush);font-size:18px;letter-spacing:2px;color:var(--ink);margin-right:6px}
.xf-sec{margin:12px 10px 2px;display:flex;align-items:center;gap:8px;font-family:var(--font-brush);font-size:20px;letter-spacing:2px;color:#ffe9a3;text-shadow:0 1px 0 #000}
.xf-sec::before,.xf-sec::after{content:'';flex:1 1 auto;height:1px;background:linear-gradient(90deg,transparent,#b8860b,transparent)}
.xf-sec .exp{font-family:var(--font-body);font-size:11px;letter-spacing:0;color:#c9a96e}
.xf-gold-row{min-height:72px;cursor:default;align-items:center}
.xf-gold-row .lead svg{width:50px;height:50px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.xf-gold-row .body .title{font-size:16px}
.xf-gold-row .body .sub{font-size:11px}
.xf-gold-row .right .btn{min-width:90px;height:36px;font-size:19px;letter-spacing:2px;text-indent:2px}
.xf-gold-row .right .done{font-family:var(--font-brush);font-size:18px;color:#7ed08f;letter-spacing:2px;text-shadow:0 1px 0 #000;display:inline-flex;align-items:center;gap:3px}
.xf-gold-row .right .done svg{width:22px;height:22px}
.xf-charge{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 10px 2px}
.xf-ch{position:relative;height:120px;border-radius:7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#ffe9a3;text-shadow:0 1px 0 #000;
  border:2px solid #24110a;background:var(--tex-wood),linear-gradient(180deg,#8a4f22,#5a2d10 60%,#3a1d0c);
  box-shadow:inset 0 0 0 1px rgba(242,194,69,.45),inset 0 2px 0 rgba(255,225,160,.3),inset 0 -3px 4px rgba(0,0,0,.35),0 2px 3px rgba(0,0,0,.5);transition:filter .12s,transform .08s}
.xf-ch:hover{filter:brightness(1.08)}
.xf-ch:active{transform:translateY(1px);filter:brightness(.92)}
.xf-ch svg{width:46px;height:46px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.xf-ch .g{font-weight:700;font-size:16px;color:#fff;display:flex;align-items:center;gap:2px}
.xf-ch .g small{font-weight:400;font-size:11px;color:#ffe9a3}
.xf-ch .p{font-size:11px;color:#e8d3a3}
.xf-ch .first{position:absolute;left:-2px;top:-2px;padding:1px 7px;border-radius:6px 0 6px 0;background:var(--bg-red);font-family:var(--font-brush);font-size:12px;letter-spacing:1px;color:#ffe08a;box-shadow:0 0 0 1px #3f0a06}
.xf-ch .exp{position:absolute;right:-2px;top:-2px;padding:1px 5px;border-radius:0 6px 0 6px;background:var(--bg-gold);font-size:10px;color:#7a1e12;box-shadow:0 0 0 1px #5a3800}
.xf-vip-cur{margin:6px 10px 4px;padding:9px 12px;border-radius:7px;color:var(--ink);background:var(--bg-paper-light);border:1px solid #8c7355;box-shadow:inset 0 0 0 1px rgba(255,248,225,.6),inset 0 0 18px rgba(120,80,30,.2),0 2px 3px rgba(0,0,0,.4)}
.xf-vip-cur .hd{display:flex;align-items:center;gap:8px;font-family:var(--font-brush);font-size:20px;letter-spacing:1px}
.xf-vip-cur .hd svg{width:64px;height:26px;flex:none}
.xf-vip-cur .hd .nx{margin-left:auto;font-family:var(--font-body);font-size:11px;color:var(--ink-soft);letter-spacing:0;text-align:right}
.xf-vip-cur .bar{margin-top:7px}
.xf-vip-cur .tip{font-size:11px;color:var(--ink-soft);margin-top:5px;line-height:1.5}
.xf-vip-tbl{margin:6px 10px 18px;border-radius:7px;overflow:hidden;border:2px solid #24110a;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.xf-vrow{display:flex;align-items:center;gap:8px;padding:6px 10px;min-height:46px;cursor:pointer;color:#f3e6c4;border-bottom:1px solid rgba(0,0,0,.45);
  background:var(--tex-wood),linear-gradient(180deg,#6b3a16,#4a2410);transition:filter .12s}
.xf-vrow:nth-child(even){background:var(--tex-wood),linear-gradient(180deg,#5d2f12,#3f1f0b)}
.xf-vrow:hover{filter:brightness(1.08)}
.xf-vrow .vb{flex:none;width:56px;display:flex}
.xf-vrow .vb svg{width:56px;height:23px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.xf-vrow .tt{flex:none;width:72px;font-family:var(--font-brush);font-size:17px;letter-spacing:1px;color:#ffe9a3;text-shadow:0 1px 0 #000}
.xf-vrow .need{flex:none;width:72px;font-size:10px;line-height:1.25;color:#c9a96e;text-align:center}
.xf-vrow .need b{display:block;font-size:12px;color:#f3e6c4}
.xf-vrow .desc{flex:1 1 auto;min-width:0;font-size:10px;line-height:1.3;color:#e8d3a3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.xf-vrow.cur{background:linear-gradient(180deg,#c23a24,#8f1d13);box-shadow:inset 0 0 0 2px #f2c245}
.xf-vrow.cur .desc,.xf-vrow.cur .need{color:#fff3c2}
.xf-vrow.cur .tt{color:#fff}
.xf-vrow.done .tt{color:#c9b28a}

/* ---------- 弹窗内容 ---------- */
.xf-qty{display:flex;flex-direction:column;align-items:center;gap:8px}
.xf-qty .hd{display:flex;align-items:center;gap:12px;width:100%}
.xf-qty .hd .item{flex:none}
.xf-qty .hd .nm{font-family:var(--font-brush);font-size:22px;letter-spacing:1px;color:var(--ink);display:flex;align-items:center;gap:6px}
.xf-qty .hd .ds{font-size:12px;color:var(--ink-soft);line-height:1.45;margin-top:2px}
.xf-qty .have{font-size:12px;color:var(--ink-soft)}
.xf-qty .have b{color:var(--ink)}
.xf-qty .ctrl{display:flex;align-items:center;gap:6px;margin-top:2px}
.xf-qty .ctrl .st{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#ffe08a;cursor:pointer;user-select:none;
  background:var(--bg-wood);border:2px solid #2b150a;box-shadow:inset 0 0 0 1px rgba(242,194,69,.5),inset 0 -3px 0 rgba(0,0,0,.45);text-shadow:0 1px 0 #000}
.xf-qty .ctrl .st.s10{width:44px;font-size:14px;font-family:var(--font-body)}
.xf-qty .ctrl .st:active{transform:translateY(2px);filter:brightness(.9)}
.xf-qty .ctrl .n{width:82px;height:40px;line-height:36px;text-align:center;font-size:22px;font-weight:700;color:var(--ink);background:#fff8e6;border:2px solid #8c7355;border-radius:6px;box-shadow:inset 0 2px 4px rgba(0,0,0,.15);font-variant-numeric:tabular-nums}
.xf-qty .ctrl .mx{font-size:15px;padding:0 10px;height:34px;min-width:0;letter-spacing:1px}
.xf-qty .tot{display:flex;align-items:center;gap:4px;font-size:15px;color:var(--ink)}
.xf-qty .tot b{font-size:22px;color:#a06a00;font-variant-numeric:tabular-nums}
.xf-qty .tot.lack b{color:var(--red)}
.xf-qty .tot svg{width:24px;height:24px}
.xf-qty .tot .lk{font-size:12px;color:var(--red)}
.xf-pv .rates{display:flex;justify-content:space-around;margin-bottom:6px;padding:6px 0;border-radius:6px;background:rgba(120,80,30,.08)}
.xf-pv .rates div{text-align:center;font-size:12px;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;gap:3px}
.xf-pv .rates b{font-size:15px;color:var(--ink)}
.xf-pv .note{font-size:12px;color:var(--red);text-align:center;margin-bottom:4px;line-height:1.5}
.xf-pv .grp{font-family:var(--font-brush);font-size:16px;margin:8px 0 3px;display:flex;align-items:center;gap:6px;color:var(--ink)}
.xf-pv .grp small{font-family:var(--font-body);font-size:11px;color:var(--ink-soft)}
.xf-pv .lst{display:flex;flex-wrap:wrap;gap:6px 5px}
.xf-pv .wrap{max-height:430px;overflow-y:auto;padding-right:2px}
.xf-pv .wrap::-webkit-scrollbar{width:0}
.xf-info{display:flex;gap:12px;align-items:flex-start}
.xf-info .nm{font-family:var(--font-brush);font-size:22px;color:var(--ink);display:flex;align-items:center;gap:6px}
.xf-info .ds{font-size:13px;line-height:1.55;color:var(--ink);margin-top:4px}
.xf-info .hv{font-size:12px;color:var(--ink-soft);margin-top:6px}
.xf-cont{margin-top:8px;border-top:1px dashed #b8945a;padding-top:6px}
.xf-cont .ct{font-family:var(--font-brush);font-size:16px;color:var(--ink);margin-bottom:4px}
.xf-cont .cr{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px;color:var(--ink)}
.xf-cont .cr .ic{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center}
.xf-cont .cr .ic svg,.xf-cont .cr .ic img{width:36px;height:36px;object-fit:cover;object-position:50% 8%;border-radius:4px}
.xf-cont .cr .tg{margin-left:auto;font-size:11px;color:var(--red);white-space:nowrap}
.xf-choose{display:flex;justify-content:center;gap:10px;margin-top:6px}
.xf-choose .op{width:106px;padding:8px 4px 6px;border-radius:7px;border:2px solid #8c7355;background:#fff8e6;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform .1s}
.xf-choose .op:active{transform:scale(.97)}
.xf-choose .op.sel{border-color:var(--red);box-shadow:0 0 0 2px #f2c245,0 0 10px rgba(242,194,69,.6)}
.xf-choose .op .nm{font-family:var(--font-brush);font-size:16px;color:var(--ink);display:flex;align-items:center;gap:4px}
.xf-choose .op .avatar{--as:64px}
.xf-choose .op .slot .nm{display:none}
.xf-choose-tip{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:8px}
.xf-vd .hd{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-family:var(--font-brush);font-size:20px;color:var(--ink)}
.xf-vd .hd svg{width:70px;height:28px}
.xf-vd .hd small{font-family:var(--font-body);font-size:11px;color:var(--ink-soft);margin-left:auto}
.xf-vd .kv{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed rgba(140,115,85,.4);font-size:13px}
.xf-vd .kv .k{color:var(--ink-soft)}
.xf-vd .kv .v{color:var(--ink);font-weight:700}
.xf-vd .kv .v.on{color:#2e7d32}
.xf-vd .kv .v.off{color:#9a8a70;font-weight:400}