/* ==========================================================================
   绮罗榜 · 榜下走  v1.0
   plaza_bang.css  ——  与 plaza_bang.js 配套，不依赖宿主样式
   所有 class 前缀 pb-，所有 CSS 变量前缀 --pb

   它和 plaza_wall.css 是一套骨架（光球 / 立绘 / 雾 / 顶栏 / 卡片），
   但榜是"一块匾底下的一张榜面"，不是"一面挂满牌子的墙"：
   · 匾、瓦檐、石基、台阶全在 bang_bg.webp 里（底图自带），CSS 不画
   · 榜面上是 20 张名签（竖排名 + 名次角标），不是木牌
   · 没有灯笼、没有别人的光球 —— 榜前只有你
   ========================================================================== */

.pb-root{
  position:absolute; inset:0; overflow:hidden;
  background:#231a14;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  opacity:0; visibility:hidden;
  transition:opacity .34s ease, visibility .34s;
}
.pb-root.is-open{opacity:1; visibility:visible;}
.pb-root:not(.is-open){pointer-events:none;}

/* 檐下那层暖光：底图已经调过暮色，这里只补一点点"光从上面下来" */
.pb-root::after{
  content:""; position:absolute; inset:0; z-index:26; pointer-events:none;
  background:
    radial-gradient(ellipse 120% 36% at 50% -6%, rgba(255,196,126,.14), transparent 68%),
    radial-gradient(ellipse 150% 40% at 50% 108%, rgba(255,150,80,.10), transparent 72%);
  mix-blend-mode:screen;
}

.pb-world{
  position:absolute; left:0; top:0; height:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* 榜亭（含瓦檐、匾、石基、台阶）—— 整张底图，随世界一起滚 */
.pb-board{
  position:absolute; left:0; top:0;
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:100% 100%;
  /* 左右两端虚化：底图外侧本来就是空灰，一虚就化进雾里，看不出图的边 */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
/* 榜脚与前景地面的过渡：一道接触阴影，把"地台"那条硬边吃掉 */
.pb-seam{
  position:absolute; left:0; width:100%; pointer-events:none; z-index:3;   /* 同上 */
  /* 榜脚接地那道影：必须**从石基下沿往下走**。
     第一版压在石基上沿，结果石基底下直接亮着，看着像榜浮在台子上 */
  background:linear-gradient(180deg,
    rgba(6,4,3,.92) 0%, rgba(6,4,3,.62) 34%,
    rgba(8,6,4,.26) 70%, rgba(8,6,4,0) 100%);
}
.pb-ground{
  position:absolute; left:0; right:0; z-index:2;   /* 屏幕坐标系，不随世界滚 */
  background:
    /* 阶沿的一道反光：让"底图到头了"这条直线读成一级台阶，不是一条切边 */
    linear-gradient(180deg, rgba(255,224,186,.07) 0 1px, transparent 1px),
    /* 石缝：节距按底图那几级踏面来（一级约 18px），只在前三成有用 */
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.20) 0 1px, transparent 1px 18px),
    /* 贴地那一线留一点暖，紧接着就沉下去 */
    radial-gradient(ellipse 62% 46% at 50% 4%, rgba(140,104,68,.26), transparent 68%),
    /* 顶色取底图最后一行的实测均值 #3c2f23 —— 台阶从那儿接着往下沉，
       不然底图一结束就是一块纯黑的板，人站上去像站在舞台上 */
    linear-gradient(180deg,
      rgba(60,47,35,1) 0%, rgba(48,37,27,1) 18%,
      rgba(28,20,14,1) 42%, rgba(15,11,8,1) 70%, rgba(8,6,5,1) 100%);
}
.pb-ground::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 86% 118% at 50% 0%, transparent 36%, rgba(5,3,2,.80) 100%);
}

/* 榜面的界格：一道极淡的刻痕，把"一张名单"框成"一张榜"。
   没有它，十张脸浮在木板上就是相册；有了它，才像有人拿刀在板上划过行。
   线画在每列 / 每行的右沿，1px，颜色取木板最深的赭褐再淡一档。 */
.pb-slips{
  position:absolute; z-index:9; pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      rgba(74,42,16,0) 0 calc(var(--pb-slw) - 1px),
      rgba(74,42,16,.17) calc(var(--pb-slw) - 1px) var(--pb-slw)),
    repeating-linear-gradient(180deg,
      rgba(74,42,16,0) 0 calc(var(--pb-slh) - 1px),
      rgba(74,42,16,.13) calc(var(--pb-slh) - 1px) var(--pb-slh));
  /* 这里原来挂了一道水平 mask。它会把"盒子外面"的东西一并裁掉 ——
     第一排三个号签悬在框角外 8px，正好越出这个盒子的上沿，于是被齐齐切掉半个，
     看着像被木板压住了。界格线本来只画在盒内，不需要 mask；要淡出交给 .pb-world。 */
}
.pb-slips > *{pointer-events:auto;}

/* ---------- 榜面上的一格：一个人 ----------

   v2 是"一张小照贴在板上"，没有框；v3 给它装裱：
   2.5px 木框 + 内一线金 —— 榜上十位是"挂上去的"，跟板下的木板不是一回事。
   候选那页换素框（深灰木、无金线、朱字退一档），框就是身份。

   不做圆头像：圆头像一看就是社交软件的列表。这里是"画像"：
   方角、暖木框、贴一点点暗，跟榜的赭红是一路的。 */

.pb-slip{
  position:absolute; z-index:10;
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--pb-slh) * .016);
  padding:calc(var(--pb-slh) * .018) 0;
  border-radius:1px;
  transition:opacity .3s, box-shadow .3s;
}

/* 头像 + 框 ------------------------------------------------------------
   v3.1（姐 10-21 定）：这是**十大美人**的榜，框要像妆镜，不像相框店的木条。

     ① 外压边（近黑）—— 让框从木板上立起来
     ② 外一道金背（2.4px，暖香槟）—— 老妆镜的木框背后都衬一圈金箔
     ③ 框身：暖胭脂木，上受夕照、下没进阴影；木纹极细，不许看出"条纹"
     ④ 内一道金 + 照片边一道金（两道金间距 4px）—— 高级感全在"线的间距"上
     ⑤ 四角包角用杏花样：一点暖白花瓣 + 一点金蕊，不做成珠子
     ⑥ 上两角比下两角圆（5px / 3px）—— 团扇和妆镜都是上圆下方，
        直角看着像证件照，圆一点才有"被人捧在手里"的意思
     ⑦ 照片内暗角 + 一道斜玻璃反光

   候选那页仍然是素框（深灰木、一道内线、无金背），一眼分得开。 */

.pb-slip .pb-face{
  position:relative; flex:none;
  box-sizing:border-box;
  width:calc(var(--pb-slw) * .80);
  height:calc(var(--pb-slw) * .80);
  max-height:calc(var(--pb-slh) * .76);   /* 框加厚后照片小了，头像盒子跟着放一档补回来 */
  max-width:calc(var(--pb-slh) * .76);
  padding:4px;
  border-radius:6px 6px 4px 4px;
  overflow:visible;            /* 号签要悬在框角外，不能被裁掉 */
  /* 框的立体感全在这串阴影里。走近 / 点中时要追加光晕，
     必须用 --pb-frame-shadow 拼，不能重写 box-shadow —— 一重写，框就变成一张纸片。 */
  --pb-frame-shadow:
    0 0 0 1px rgba(26,11,5,.96),                 /* 外压边，近黑 */
    0 0 0 2.4px rgba(242,198,148,.62),           /* 金背：框背后那圈金箔（偏粉金，不偏铜） */
    0 0 0 3.4px rgba(30,14,6,.42),               /* 金箔外面再压一道暗，金才咬得住 */
    inset 0 0 0 1px rgba(255,242,214,.22),       /* 木的倒角反光 */
    inset 0 1px 0 rgba(255,250,230,.46),
    inset 0 -1px 0 rgba(0,0,0,.60),
    0 4px 12px rgba(26,9,5,.60),
    0 10px 26px rgba(26,9,5,.32);
  background:
    /* 四角杏花：外一圈暖白花瓣 + 中间一粒金蕊，上两角亮、下两角淡（妆镜的角花） */
    radial-gradient(circle at 5% 5%,  rgba(255,246,230,.58) 0 1.5px, rgba(255,214,160,0) 2.4px),
    radial-gradient(circle at 5% 5%,  rgba(255,214,150,.46) 0 4.2px, rgba(255,214,150,0) 5.6px),
    radial-gradient(circle at 95% 5%, rgba(255,246,230,.58) 0 1.5px, rgba(255,214,160,0) 2.4px),
    radial-gradient(circle at 95% 5%, rgba(255,214,150,.46) 0 4.2px, rgba(255,214,150,0) 5.6px),
    radial-gradient(circle at 5% 95%, rgba(255,236,208,.30) 0 1.5px, rgba(255,214,160,0) 2.4px),
    radial-gradient(circle at 5% 95%, rgba(255,206,146,.22) 0 3.4px, rgba(255,214,150,0) 4.6px),
    radial-gradient(circle at 95% 95%,rgba(255,236,208,.30) 0 1.5px, rgba(255,214,160,0) 2.4px),
    radial-gradient(circle at 95% 95%,rgba(255,206,146,.22) 0 3.4px, rgba(255,214,150,0) 4.6px),
    /* 框顶一道高光弧：木框上沿被夕照擦到，不是均匀发亮 */
    linear-gradient(180deg,
      rgba(255,228,192,.20) 0%, rgba(255,214,170,.06) 8%, rgba(255,214,170,0) 16%),
    /* 极细斜木纹：两道同向，交错 1px，远看是丝，不是条 */
    repeating-linear-gradient(112deg,
      rgba(255,220,170,.045) 0 1px, rgba(0,0,0,.05) 1px 2px, rgba(0,0,0,0) 2px 4px),
    /* 暖胭脂木：上沿吃夕照、中段一道脊、下沿沉黑 */
    linear-gradient(180deg,
      #a06a46 0%, #7d4732 14%, #5a2c20 40%, #6b3527 54%, #3f1a12 80%, #210c07 100%);
  box-shadow:var(--pb-frame-shadow);
}
.pb-slip .pb-face img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 36%;
  border-radius:3px 3px 1px 1px;
  filter:saturate(1.03);
  -webkit-user-drag:none; pointer-events:none;
}
/* 照片边的一线金 + 照片的内暗角：玻璃压着照片，脸才像"在框里" */
.pb-slip .pb-face::before{
  content:''; position:absolute; inset:3.5px; z-index:2; pointer-events:none;
  border-radius:2px 2px 1px 1px;
  box-shadow:
    inset 0 0 0 1px rgba(255,238,190,.96),      /* 照片边那一道金 */
    inset 0 0 13px rgba(22,10,3,.48),           /* 照片内暗角 */
    0 0 0 1.5px rgba(24,12,4,.46),              /* 金线外的一道内壁暗 —— 照片是嵌进去的 */
    0 0 0 2.6px rgba(206,116,98,.15),           /* 胭脂薄晕：金线外面透一线暖红，柔一分 */
    0 0 5px rgba(255,196,112,.18);
}
/* 玻璃：左上斜下一条反光 + 顶部一点暖。
   用 screen 不用 soft-light —— soft-light 对白不敏感，反光会看不见；
   screen 只加不减，不会把脸压脏。 */
.pb-slip .pb-face::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(116deg,
      rgba(255,244,226,.15) 0 9%, rgba(255,244,226,.05) 20%, rgba(255,244,226,0) 33%),
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,198,126,.12), transparent 68%);
  mix-blend-mode:screen;
}
.pb-slip .pb-face b{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:"Kaiti SC","STKaiti","KaiTi",serif;
  font-size:calc(var(--pb-slw) * .34); font-weight:400;
  color:rgba(255,226,180,.52);
}

/* 候选那一页的框：素。深灰木、一道内线、没有金背 ——
   一眼分得清"在榜的十位"和"等在外面的十位"，不用读字。 */
.pb-slip.is-cand .pb-face{
  padding:3px;
  border-radius:4px 4px 2px 2px;
  --pb-frame-shadow:
    0 0 0 1px rgba(104,92,78,.42),
    0 2px 7px rgba(0,0,0,.40);
  /* 纯灰木：不包角、不做木纹、不分上下明暗 —— 一眼就是"没装裱" */
  background:linear-gradient(180deg,#544941 0%,#3e352d 58%,#281f18 100%);
  box-shadow:var(--pb-frame-shadow);
}
.pb-slip.is-cand .pb-face::before{
  inset:2.5px;
  box-shadow:inset 0 0 0 1px rgba(190,176,152,.30);
}
.pb-slip.is-cand .pb-face::after{
  background:radial-gradient(ellipse 120% 80% at 50% -8%, rgba(226,196,150,.07), transparent 66%);
}
/* 候选的号签也换素木牌：框素了、签还朱亮，就白素了 */
.pb-slip.is-cand .pb-rk{
  color:#f2e0c4;
  background:linear-gradient(180deg,#836246 0%,#634832 55%,#3d2919 100%);
  box-shadow:
    0 0 0 1px rgba(206,186,156,.46),
    0 2px 5px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,236,206,.16);
  text-shadow:0 1px 1px rgba(22,11,4,.62);
}
.pb-slip.is-cand .pb-nm{color:#3d2c1a;opacity:.92;text-shadow:0 1px 0 rgba(255,252,232,.34);}

/* 名字一行：号签已经搬到框角上了，这一行只留给名字 —— 名字因此能大一号 */
.pb-slip .pb-line{
  display:flex; align-items:baseline; justify-content:center;
  gap:calc(var(--pb-slw) * .035);
  width:100%; padding:0 2px;
  white-space:nowrap;
}
/* 名次号签：挂在相框左上角、压在框沿上。
   以前它跟名字挤在同一行、字号只有名字的三分之二，站在榜下根本读不出来；
   现在是一张朱漆号签，框角上那块最显眼的地方归它 —— 名次是榜上最该被一眼看见的字。
   v3.2：几乎不再往上悬（原来悬出 8px，正好顶进上一排的名字里，
   第一排还会被榜面上沿的木梁切掉半个 —— 姐 10-21 说"被压着了"就是这个）。 */
.pb-slip .pb-rk{
  position:absolute; z-index:6;
  left:calc(var(--pb-slw) * -.082);
  top:calc(var(--pb-slw) * -.026);
  box-sizing:border-box;
  min-width:calc(var(--pb-slw) * .215);
  height:calc(var(--pb-slw) * .215);
  padding:0 calc(var(--pb-slw) * .03);
  display:flex; align-items:center; justify-content:center;
  font-style:normal;
  font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC","SimSun",serif;
  font-size:calc(var(--pb-slw) * .100);
  line-height:1;
  color:#ffeccb;
  border-radius:3px;
  background:linear-gradient(180deg,#b6382b 0%,#93251b 54%,#67120d 100%);
  box-shadow:
    0 0 0 1px rgba(255,224,166,.80),
    0 0 0 2.6px rgba(52,17,9,.52),
    0 2px 6px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,236,196,.34),
    inset 0 1px 0 rgba(255,232,196,.44);
  text-shadow:0 1px 1px rgba(56,9,4,.72);
}
.pb-slip .pb-nm{
  font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC","SimSun",serif;
  font-size:calc(var(--pb-slw) * .168);
  line-height:1.05; letter-spacing:.01em;
  color:#2e1c0c;
  text-shadow:0 1px 0 rgba(255,252,232,.46), 0 0 6px rgba(255,240,208,.28);
  overflow:hidden; text-overflow:ellipsis;
}
/* 前三名：号签反过来——金底朱字。榜头要撑得起来，一眼就看得出谁是榜首 */
.pb-slip[data-i="0"] .pb-rk,
.pb-slip[data-i="1"] .pb-rk,
.pb-slip[data-i="2"] .pb-rk{
  color:#5c1408;
  min-width:calc(var(--pb-slw) * .230);
  height:calc(var(--pb-slw) * .230);
  font-size:calc(var(--pb-slw) * .107);
  background:linear-gradient(180deg,#ffe7b4 0%,#eab55f 46%,#c4892f 100%);
  box-shadow:
    0 0 0 1px rgba(255,246,218,.94),
    0 0 0 2.6px rgba(70,36,10,.44),
    0 2px 8px rgba(0,0,0,.52),
    0 0 13px rgba(255,196,110,.38),
    inset 0 0 0 1px rgba(255,252,236,.55),
    inset 0 1px 0 rgba(255,252,238,.60);
  text-shadow:0 1px 0 rgba(255,242,212,.60);
}

/* 远：整格淡下去（不用盖暗块 —— 会把榜面的木纹盖掉）。
   只淡一档 —— 淡多了像没加载出来，人脸也就看不清了。 */
.pb-slip.is-far{opacity:.72;}
/* 近：这一格亮起来。只是光，不是位移 */
.pb-slip.is-near{
  background:radial-gradient(ellipse at 50% 44%, rgba(255,236,196,.17), transparent 72%);
}
.pb-slip.is-near .pb-face{
  box-shadow:
    var(--pb-frame-shadow),
    0 0 18px rgba(255,190,110,.34),
    0 0 34px rgba(255,170,86,.16);
}
/* 候选那一页别跟着发亮：素框就该一直是素的（只把外沿提一点点，不算发光） */
.pb-slip.is-cand.is-near .pb-face{
  box-shadow:
    var(--pb-frame-shadow),
    0 0 0 1px rgba(198,184,160,.30);
}
/* 我自己那一格：走多远都亮着 */
.pb-slip.is-mine{
  background:radial-gradient(ellipse at 50% 44%, rgba(255,242,208,.20), transparent 74%);
}
.pb-slip.is-mine .pb-nm{color:#2a1808;}
/* 点中的那一格：描一道金边 —— 全榜唯一会变的东西 */
.pb-slip.is-hit{
  z-index:22;
  background:radial-gradient(ellipse at 50% 44%, rgba(255,238,200,.26), transparent 76%);
}
.pb-slip.is-hit .pb-face{
  box-shadow:
    var(--pb-frame-shadow),
    0 0 0 1.5px rgba(255,226,166,.98),
    0 0 0 4px rgba(255,200,124,.16),
    0 0 calc(var(--pb-slw) * .55) rgba(255,196,120,.55);
}
/* 空席：框照摆、号签照写，只是里面还空着（v3.1）
   以前空位整格压到 42% 还给一块灰斜纹，看着像"图没加载出来"；
   现在框是完整的，空的是照片那一片 —— 十席摆满，空席本身也是一句话。 */
.pb-slip.is-slot{opacity:.92;}
.pb-slip.is-slot .pb-face{
  --pb-frame-shadow:
    0 0 0 1px rgba(26,11,5,.90),
    0 0 0 2.4px rgba(196,156,102,.34),
    0 0 0 3.4px rgba(30,14,6,.38),
    inset 0 0 0 1px rgba(255,242,214,.14),
    inset 0 1px 0 rgba(255,250,230,.26),
    inset 0 -1px 0 rgba(0,0,0,.56),
    0 4px 12px rgba(0,0,0,.50);
  box-shadow:var(--pb-frame-shadow);
}
.pb-slip.is-slot .pb-face::before{
  box-shadow:
    inset 0 0 0 1px rgba(255,232,178,.42),
    0 0 0 1.5px rgba(24,12,4,.42);
}
.pb-slip.is-slot .pb-face::after{
  background:radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,198,126,.07), transparent 66%);
}
/* 空席里面那片：不是灰条，是一点"花钿"似的暖光，像有人还没来坐 */
.pb-slip .pb-void{
  position:absolute; inset:4px; z-index:1;
  display:flex; align-items:center; justify-content:center;
  border-radius:2px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(255,222,168,.09), rgba(0,0,0,0) 70%),
    repeating-linear-gradient(45deg,
      rgba(36,20,9,.34) 0 6px, rgba(52,31,15,.34) 6px 12px);
  box-shadow:inset 0 0 16px rgba(16,7,2,.60);
}
.pb-slip .pb-void i{
  display:block;
  width:calc(var(--pb-slw) * .21); height:calc(var(--pb-slw) * .21);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,232,186,.66) 0 16%, rgba(255,198,126,.22) 34%, rgba(0,0,0,0) 64%);
  box-shadow:0 0 11px rgba(255,190,110,.20);
}
/* 候选页的空席：号签也素 */
.pb-slip.is-cand.is-slot .pb-rk{
  color:rgba(250,240,224,.94);
  background:linear-gradient(180deg,#8c7458 0%,#6b5540 55%,#473327 100%);
}
/* 主榜空席的号签：朱漆褪一档，还认得出是号签，但一看就知道没人来 */
.pb-slip.is-slot .pb-rk{
  color:rgba(255,240,214,.90);
  background:linear-gradient(180deg,#8d4e3a 0%,#6a382a 55%,#43201a 100%);
  box-shadow:
    0 0 0 1px rgba(228,198,160,.40),
    0 2px 5px rgba(0,0,0,.44);
  text-shadow:0 1px 1px rgba(40,14,6,.62);
}
/* 空席的名字：写"待题"，别写成空白（空白像坏了） */
.pb-slip.is-slot .pb-nm{
  color:#5a3c22; opacity:.72; letter-spacing:.10em;
}

/* 榜脚：落款 + 一枚翻榜的按钮 —— v3.2 收成右下角一方小签
   ─────────────────────────────────────────────────────────────
   一行写着"十月十九 立 · 至 十月廿六 止"再加一个按钮，宽度顶到画面中央，
   正好压在人身上：人一动，那一行就像挂在他肩上（姐 10-21 晚指出）。
   现在日期在上、按钮在下，右对齐，整块不超过画面的三成五 ——
   钉在木板右下角，走路、拖榜、换页都不动，也不出板。 */

.pb-foot{
  position:absolute; left:0; top:0; z-index:10;
  display:flex; flex-direction:row; align-items:center; justify-content:flex-end;
  gap:calc(var(--pb-fs) * .40);
  white-space:nowrap;
  opacity:0; transition:opacity .5s .25s;
}
.pb-root.is-open .pb-foot{opacity:1;}

/* 日期行（候选页的"候选"朱印跟按钮排一行，不占日期那一行的宽度 ——
   否则整块往左撑，又回到压人身上去了） */
.pb-foot .pb-fr{
  display:flex; align-items:center; justify-content:flex-end;
  gap:calc(var(--pb-fs) * .55);
  max-width:100%;
}

.pb-foot .pb-date{
  font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif;
  font-size:calc(var(--pb-fs,9.5px) * .97);
  font-weight:600;
  letter-spacing:.04em;
  color:#1b0e03;
  /* 木板上的字：上沿一道窄高光、下沿一道暗影，硬边、不放扩散光晕
     （9px 的字一糊就成灰点） */
  text-shadow:
    0 1px 0 rgba(255,249,228,.72),
    0 -1px 0 rgba(22,9,2,.46);
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* 候选那一页的朱印：小小一方（两字竖排），压在落款和按钮之间。
   做成"印"而不是"标签" —— 标签要占宽度，印是方寸之地 */
.pb-foot .pb-seal{
  flex:none;
  font-style:normal;
  font-family:"Kaiti SC","STKaiti","KaiTi",serif;
  font-size:calc(var(--pb-fs) * .86);
  letter-spacing:0;
  line-height:1.02;
  writing-mode:vertical-rl; text-orientation:upright;
  padding:2px 2px;
  color:#ab3823;
  border:1px solid rgba(160,52,34,.58);
  border-radius:1px;
  opacity:.90;
}

/* 翻榜按钮：一小块木牌，钉在落款右头 */
.pb-foot .pb-toggle{
  flex:none;
  font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif;
  font-weight:400;
  font-size:calc(var(--pb-fs) * .94);
  letter-spacing:.05em;
  line-height:1;
  padding:calc(var(--pb-fs) * .34) calc(var(--pb-fs) * .56) calc(var(--pb-fs) * .40);
  color:#fff6e4;
  border-radius:2px;
  background:linear-gradient(180deg,#b98a4e 0%,#94622f 52%,#7a4c24 100%);
  box-shadow:
    0 0 0 1px rgba(246,216,168,.78),
    0 1px 2px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,246,220,.40);
  transition:transform .16s ease, box-shadow .16s ease;
}
.pb-foot .pb-toggle:active{
  transform:translateY(1px);
  box-shadow:0 0 0 1px rgba(238,196,136,.8), 0 0 10px rgba(255,190,110,.35), inset 0 1px 0 rgba(255,228,182,.14);
}

/* 翻页那一下：淡出 → 换人 → 淡入。十张脸不是"刷"一下换掉的 */
.pb-slips{transition:opacity .18s ease;}
.pb-slips.is-swap{opacity:0;}

/* ---------- 换榜角标：到点了，但榜面不动 ----------
   每周一 00:00 榜会换，可你要是正站在榜下，榜面绝不重排 ——
   第 8 名忽然变成第 11 名、位置全挪，那一瞬间榜就不是他刚才看的那个榜了。
   只挂一枚角标：新榜已经誊好了，走出去再进来才看得见。 */
.pb-stale{
  position:absolute; left:50%; top:calc(66px + env(safe-area-inset-top));
  z-index:44; transform:translate(-50%,-6px);
  padding:4px 10px 4px 11px;
  font-family:"Kaiti SC","STKaiti","KaiTi",serif;
  font-size:10px; letter-spacing:.20em;
  color:#2a1206;
  background:linear-gradient(180deg,#f3dcaa,#d3a870);
  box-shadow:0 2px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(120,86,44,.4);
  border-radius:2px;
  opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.pb-root.is-stale .pb-stale{opacity:1; transform:translate(-50%,0);}
.pb-root.is-stale .pb-tt-s{color:rgba(198,86,62,.86);}

/* ---------- 榜下那个"我" ---------- */
.pb-me{
  position:absolute; z-index:24; pointer-events:none;
  transform:translate(-50%,0);
  transform-origin:50% 100%;
  transition:opacity .46s ease, transform .46s ease;
}
.pb-me.is-form{
  opacity:0;
  transform:translate(-50%,0) scale(.965);
}
.pb-me .pb-me-body{position:relative;display:block;width:100%;height:100%;}
.pb-me .pb-me-img{
  display:block; width:100%; height:100%;
  object-fit:contain; object-position:50% 100%;
  -webkit-user-drag:none; pointer-events:none;
  transform-origin:50% 100%;
  /* ★ 只做极轻的色温贴合，绝不压亮度（这版人偏暗的根就在压亮度上） */
  filter:saturate(.97);
  /* 凝形那一下：从过曝的白热里"冷却"成实体，光炸完人才实 */
  transition:filter .54s cubic-bezier(.28,0,.24,1);
}
/* 还没凝出来的时候，人的轮廓是一团白 —— 光先起，人后出 */
.pb-me.is-form .pb-me-img{
  filter:brightness(2.6) saturate(.25) blur(1.6px);
}
/* 出门：人化回光球（进门的反向）。
   人不是"淡出"，是先被自己的光照白、轮廓散开，再收一点 ——
   所以这里的曲线是 ease-in（越走越快），跟进门时"从白热里冷却出来"的
   ease-out 正好互为倒放。霜白只做 0.30s，短到不会被看成"闪烁"。 */
.pb-me.is-unform{
  opacity:0;
  transform:translate(-50%,0) scale(.94);
  transition:opacity .30s cubic-bezier(.5,0,.75,0), transform .38s cubic-bezier(.5,0,.75,0);
}
.pb-me.is-unform .pb-me-img{
  filter:brightness(2.35) saturate(.28) blur(2.4px);
  transition:filter .26s cubic-bezier(.5,0,.75,0);
}
.pb-me.is-right .pb-me-body{transform:scaleX(-1);}

/* 光球：广场上那颗飘过来，在胯的高度凝成背影 */
.pb-orb{
  position:absolute; left:0; top:0; z-index:23; pointer-events:none;
  width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%;
  /* ★ v617（姐 10-22）：同创世花墙 —— 球色跟着广场上自己那颗走。
     兜底值＝改造前原文，没铺变量时逐像素不变（画风锁）。 */
  background:var(--pboc-bg, radial-gradient(circle at 42% 38%,
    #ffffff 0%, #ffffff 20%, #fffaf0 34%, #ffedbf 46%,
    rgba(255,214,146,.95) 64%, rgba(255,184,96,.40) 80%, rgba(255,160,70,0) 100%));
  box-shadow:var(--pboc-halo,
    0 0 32px 12px rgba(255,220,160,.72),
    0 0 88px 32px rgba(255,180,90,.36),
    0 0 190px 80px rgba(255,150,60,.17));
  opacity:0; transition:opacity .3s ease;
}
.pb-orb::after{
  content:''; position:absolute; right:50%; top:50%; width:140px; height:22px;
  transform:translateY(-50%);
  background:var(--pboc-tail-l, linear-gradient(to left,
    rgba(255,226,172,.62), rgba(255,196,120,.22) 48%, rgba(255,180,100,0)));
  filter:blur(5px); border-radius:50%;
}
.pb-orb::before{
  content:''; position:absolute; right:50%; top:50%; width:88px; height:6px;
  transform:translateY(-50%);
  background:var(--pboc-run-l, linear-gradient(to left,
    rgba(255,250,228,.82), rgba(255,222,162,.28) 52%, rgba(255,196,116,0)));
  filter:blur(2.2px); border-radius:50%;
}
.pb-orb.from-right::after,
.pb-orb.from-right::before{right:auto; left:50%;}
.pb-orb.from-right::after{
  background:var(--pboc-tail-r, linear-gradient(to right,
    rgba(255,226,172,.62), rgba(255,196,120,.22) 48%, rgba(255,180,100,0)));
}
.pb-orb.from-right::before{
  background:var(--pboc-run-r, linear-gradient(to right,
    rgba(255,250,228,.82), rgba(255,222,162,.28) 52%, rgba(255,196,116,0)));
}

/* 到位置的那一下：一次白光爆。
   球核本来就是白到透明的渐变，把它猛地放大 4 倍以上、同时提亮，
   出来的是"一大团白"而不是"一个放大的圈" —— 人正好从这团白里显形。
   前 18%（≈45ms）就炸到最大亮度，剩下的时间是余光散开 —— 是"闪"一下，不是"胀"大。
   时长 240ms，和 JS 里的 BURST 对齐；爆完由 JS 收回内联 opacity。 */
.pb-orb.is-burst{
  animation:pbBurst .24s cubic-bezier(.16,.7,.3,1) forwards;
}
@keyframes pbBurst{
  0%   { transform:scale(1);    opacity:1;   filter:blur(0)    brightness(1.6); }
  18%  { transform:scale(2.65); opacity:1;   filter:blur(.5px) brightness(3); }
  100% { transform:scale(4.6);  opacity:0;   filter:blur(8px)  brightness(1.9); }
}

/* ---------- 脚下那团雾：全场唯一会动的东西 ----------
   立绘整张不动，只让雾动 —— 24px 宽的人身上，任何"切开再动"的接缝都会露。 */
.pb-me .pb-mist{
  /* ★ bottom = -height/2：让雾的正中正好落在脚底。
     之前是 -10（雾坐在脚踝上面），脚就踩在雾的下沿 —— 人像站在雾前面，不是雾里。
     注意：裙摆会盖住雾的上半，所以只会看到"脚以下"那一半，
     但两侧露出来的雾要让上下看起来一样多，才读得出"人陷在云里"。 */
  position:absolute; left:50%; bottom:-30px; width:260%; height:60px;
  transform:translateX(-50%); pointer-events:none;
  transition:transform .6s ease, opacity .6s ease;
}
.pb-me .pb-mist i{
  position:absolute; border-radius:50%;
  background:radial-gradient(ellipse at 50% 58%,
    rgba(236,244,255,.80), rgba(208,222,244,.36) 42%, rgba(196,210,236,0) 76%);
  filter:blur(5px);
  will-change:transform,opacity;
}
.pb-me .pb-mist i:nth-child(1){
  left:4%; bottom:12px; width:52%; height:70%;
  animation:pbDriftA calc(6.4s * var(--pb-k,1)) ease-in-out infinite;
}
.pb-me .pb-mist i:nth-child(2){
  left:32%; bottom:5px; width:48%; height:88%;
  animation:pbDriftB calc(7.8s * var(--pb-k,1)) ease-in-out infinite -2.6s;
}
.pb-me .pb-mist i:nth-child(3){
  left:55%; bottom:9px; width:44%; height:74%;
  animation:pbDriftA calc(5.6s * var(--pb-k,1)) ease-in-out infinite -4.1s;
}
.pb-me .pb-mist i:nth-child(4){
  left:20%; bottom:2px; width:66%; height:56%; opacity:.62;
  animation:pbDriftB calc(9.4s * var(--pb-k,1)) ease-in-out infinite -1.2s;
}
@keyframes pbDriftA{
  0%,100%{transform:translate(0,0) scale(1,1);opacity:.62;}
  30%    {transform:translate(16%,-16%) scale(1.22,.88);opacity:1;}
  65%    {transform:translate(-9%,-4%) scale(.92,1.10);opacity:.78;}
}
@keyframes pbDriftB{
  0%,100%{transform:translate(0,0) scale(1,1);opacity:.55;}
  35%    {transform:translate(-17%,-19%) scale(1.16,1);opacity:.95;}
  72%    {transform:translate(12%,-5%) scale(1.04,.88);opacity:.66;}
}
.pb-me .pb-mist-f{bottom:-22px; width:230%; height:46px; opacity:.62;}
.pb-me .pb-mist-f i{
  background:radial-gradient(ellipse at 50% 50%,
    rgba(248,251,255,.66), rgba(214,228,250,.20) 52%, rgba(200,214,240,0) 80%);
}
.pb-me .pb-mist-f i:nth-child(1){left:8%; bottom:2px; width:56%; height:80%;}
.pb-me .pb-mist-f i:nth-child(2){left:34%; bottom:-2px; width:52%; height:92%;}
.pb-me .pb-mist-f i:nth-child(3){left:48%; bottom:4px; width:46%; height:70%;}
.pb-me .pb-mist-f i:nth-child(4){display:none;}

.pb-me .pb-pool{
  position:absolute; left:50%; bottom:-5px; width:180%; height:16px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,196,130,.26),transparent 70%);
  animation:pbPool 4.2s ease-in-out infinite;
}
@keyframes pbPool{
  0%,100%{transform:translateX(-50%) scaleX(1);opacity:.86;}
  50%    {transform:translateX(-50%) scaleX(1.07);opacity:.62;}
}
.pb-me{--pb-k:1;}
.pb-me.is-moving{--pb-k:.55; animation:pbBob .86s ease-in-out infinite;}
@keyframes pbBob{
  0%,100%{transform:translate(-50%,0);}
  50%    {transform:translate(-50%,-2px);}
}
.pb-me.is-moving .pb-mist{transform:translateX(-50%) translateX(7px) scaleX(1.16);}
.pb-me.is-moving .pb-pool{animation-duration:1.8s;}

/* ---------- 顶栏 ---------- */
.pb-top{
  position:absolute; left:0; right:0; top:0; z-index:40;
  padding:calc(22px + env(safe-area-inset-top)) 14px 0;
  display:flex; align-items:flex-start; justify-content:space-between;
  pointer-events:none;
}
.pb-top .pb-tt{
  font-family:"STKaiti","KaiTi",serif;
  font-size:13px; letter-spacing:.30em;
  color:rgba(255,232,198,.72);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  padding-left:2px;
}
.pb-top .pb-tt em{
  display:block; font-style:normal; font-size:9px; letter-spacing:.16em;
  color:rgba(255,226,190,.40); margin-top:3px;
}
.pb-btns{display:flex;gap:8px;pointer-events:auto;}
.pb-btn{
  font-size:10.5px; letter-spacing:.12em;
  color:rgba(255,228,192,.66);
  padding:5px 10px 5px; border-radius:3px;
  border:1px solid rgba(232,192,116,.22);
  background:rgba(14,9,6,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:color .2s,border-color .2s,background .2s;
}
.pb-btn:active{color:#ffe8bc;border-color:rgba(255,214,150,.6);background:rgba(40,26,14,.7);}

/* ---------- 底部提示 ---------- */
.pb-hint{
  position:absolute; left:0; right:0;
  bottom:calc(58px + env(safe-area-inset-bottom));
  z-index:40; text-align:center; pointer-events:none;
  font-size:10px; letter-spacing:.22em; color:rgba(255,226,190,.30);
  transition:opacity .5s;
}
.pb-hint.off{opacity:0;}

/* ---------- 点开一张签：从下面抽起来的一页 ---------- */
.pb-card{
  position:absolute; left:0; right:0; bottom:0; z-index:60;
  padding:16px 18px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(14,9,6,0),rgba(14,9,6,.97) 22%);
  transform:translateY(102%);
  transition:transform .34s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.pb-card.on{transform:none;pointer-events:auto;}
.pb-card .cd-row{display:flex;align-items:center;gap:12px;}
.pb-card .cd-av{
  width:54px; height:54px; border-radius:2px; overflow:hidden; flex:none;
  background:#241a12;
  box-shadow:0 0 0 1px rgba(255,214,150,.34), 0 2px 8px rgba(0,0,0,.6);
}
.pb-card .cd-av img{width:100%;height:100%;object-fit:cover;display:block;}
.pb-card .cd-nm{
  font-family:"STKaiti","KaiTi",serif; font-size:20px; letter-spacing:.14em;
  color:#ffe4b4;
}
.pb-card .cd-tg{
  font-size:10px; letter-spacing:.14em; color:rgba(255,226,190,.48);
  margin-top:5px;
}
.pb-card .cd-go{
  margin-left:auto; flex:none;
  font-size:11px; letter-spacing:.16em; color:#2b1a08;
  padding:8px 14px; border-radius:2px;
  background:linear-gradient(180deg,#f6dfae,#d8b176);
  box-shadow:inset 0 0 0 1px rgba(120,86,44,.5), 0 2px 8px rgba(0,0,0,.5);
}
.pb-card .cd-go[disabled]{opacity:.45;}
.pb-card .cd-x{
  margin-top:14px; font-size:11px; letter-spacing:.2em; color:rgba(255,226,190,.5);
  border-top:1px solid rgba(232,192,116,.12); padding-top:11px; text-align:center;
}

/* ---------- 入场：只淡入，绝不动 transform（transform 归 JS 每帧写） ---------- */
.pb-root.is-open .pb-world{animation:pbIn .55s ease both;}
@keyframes pbIn{from{opacity:0;} to{opacity:1;}}