/* ==========================================================================
   创世花墙 · 墙下走  v1.0
   plaza_wall.css  ——  与 plaza_wall.js 配套，不依赖任何宿主样式
   所有 class 前缀 pw-，所有 CSS 变量前缀 --pw
   ========================================================================== */

.pw-root{
  position:absolute; inset:0; overflow:hidden;
  background:#1a1512;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  opacity:0; visibility:hidden;
  transition:opacity .34s ease, visibility .34s;
}
.pw-root.is-open{opacity:1; visibility:visible;}

/* 檐下的一层暖光：没有这层，青砖发灰、木牌发死 */
.pw-root::after{
  content:""; position:absolute; inset:0; z-index:26; pointer-events:none;
  background:
    radial-gradient(ellipse 130% 42% at 50% -8%, rgba(255,196,126,.16), transparent 66%),
    radial-gradient(ellipse 150% 60% at 50% 112%, rgba(255,170,96,.07), transparent 70%);
  mix-blend-mode:screen;
}

/* 底图自带瓦檐、左右墙垛、石基和地面 —— 这几层不再画。
   这面墙不二方连续：它是一座具体的院墙，有头有尾 */
.pw-cap, .pw-eave, .pw-foot, .pw-ground{display:none;}

/* ---------- 墙：一面有边界的墙，不是无限卷轴 ---------- */
.pw-world{
  position:absolute; left:0; top:0; height:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* 青砖墙身：一张水平二方连续的图，垂直铺满 */
.pw-wall{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background-image:var(--pw-tile);
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:0 0;
}

/* 墙脚：压深，让牌不浮在半空 */
.pw-foot{
  position:absolute; left:0; right:0; top:78%; height:22%;
  background:linear-gradient(180deg,
    rgba(20,15,11,0) 0%,
    rgba(20,15,11,.42) 34%,
    rgba(16,12,9,.80) 68%,
    rgba(12,9,7,.96) 100%);
  pointer-events:none;
}
/* 地面：石板路。下排提上去之后这里空出一截，不能是黑条，
   得有"脚踩得住"的东西 —— 但也不能比墙亮，一亮就抢牌 */
.pw-ground{
  position:absolute; left:0; right:0; top:0; height:9%;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.38) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.26) 0 1px, transparent 1px 96px),
    linear-gradient(180deg,
      rgba(26,22,17,1) 0%, rgba(31,27,21,1) 34%,
      rgba(38,33,26,1) 76%, rgba(19,16,12,1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,224,176,.13);
  pointer-events:none;
}
/* 墙根那道石基：把墙和地分开，也把空出来的一截"收住" */
.pw-foot::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(255,222,176,.10);
}

/* 墙脚的压顶石：给这面墙一个"到这儿为止"的上沿。
   没有压顶的墙，眼睛会一直往上找边，于是觉得它很高 */
.pw-cap{
  position:absolute; left:0; top:0; width:100%; height:14px; z-index:9;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 2px, transparent 2px 56px),
    linear-gradient(180deg,#8e8578 0%,#6c655a 26%,#4b453d 68%,#2d2924 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,242,218,.20),
    inset 0 -2px 3px rgba(0,0,0,.45),
    0 4px 12px rgba(0,0,0,.58);
}
/* 压顶下的一道滴水线 */
.pw-cap::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:6px;
  background:linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,0));
}

/* ---------- 檐：压在屏幕顶上，看不到墙头 ---------- */
.pw-eave{
  position:absolute; left:0; right:0; top:0; height:7.2%;
  z-index:30; pointer-events:none;
  background:
    /* 瓦垄 */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.55) 0 2px, rgba(120,108,96,.30) 2px 5px,
      rgba(0,0,0,.34) 5px 9px, rgba(0,0,0,.02) 9px 26px),
    linear-gradient(180deg,#4a423a 0%,#2f2925 42%,#221d1a 78%,#16120f 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.62), inset 0 -2px 0 rgba(0,0,0,.6),
             inset 0 2px 0 rgba(210,190,160,.16);
}
/* 瓦当：檐下一排圆头 */
.pw-eave::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:9px;
  background:repeating-linear-gradient(90deg,
    rgba(58,50,44,.95) 0 9px, rgba(0,0,0,.85) 9px 13px);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
  opacity:.85;
}

/* 壁挂灯笼（每 8 列一盏，挂在两列之间的砖缝里，随墙滚） */
.pw-lamp{
  position:absolute; width:17px; height:23px; z-index:12; pointer-events:none;
  transform:translate(-50%,0);
}
.pw-lamp::before{
  content:""; position:absolute; left:50%; top:-20px; width:1px; height:20px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(30,22,16,.2),rgba(30,22,16,.9));
}
.pw-lamp i{
  position:absolute; inset:0; border-radius:44% 44% 40% 40%/34% 34% 46% 46%;
  background:radial-gradient(ellipse at 50% 38%,#ffdc9e,#ff9f5e 56%,#c9602c);
  box-shadow:0 0 16px rgba(255,150,80,.72), 0 0 40px rgba(255,130,60,.32);
  opacity:.9;
}
.pw-lamp::after{
  content:""; position:absolute; left:50%; top:26px; width:120px; height:80px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(255,170,90,.22), transparent 70%);
  pointer-events:none;
}

/* ---------- 一块木牌 ---------- */
.pw-p{
  position:absolute; z-index:10;
  width:var(--pw-pw); height:var(--pw-ph);
  transform-origin:50% 0%;
  /* 钉死在墙上的东西，一动不动。不抬起、不回弹、不缩放 ——
     牌子不是按钮，会动的牌子一眼就假 */
  transition:none;
}
.pw-p *{box-sizing:border-box;}
/* 按行压暗：越上一排越远。不是模糊，是暗一层 —— 竖屏的仰视全靠这个
   坡度必须缓：上排要"远"，但不能"看不见"。四排要一眼数得清 */
.pw-p::after{
  content:""; position:absolute; inset:-2px -1px -1px; border-radius:6px;
  background:rgba(12,8,5,var(--pw-dim,0));
  pointer-events:none; z-index:3;
}
.pw-p[data-row="0"]{--pw-dim:.20;}
.pw-p[data-row="1"]{--pw-dim:.12;}
.pw-p[data-row="2"]{--pw-dim:.05;}
.pw-p[data-row="3"]{--pw-dim:0;}

/* 钉 + 绳 */
.pw-hook{
  position:absolute; left:50%; top:-5px; width:5px; height:5px; border-radius:50%;
  transform:translateX(-50%); z-index:2;
  background:radial-gradient(circle at 34% 30%,#efe2c6,#857052 58%,#2a2216);
  box-shadow:0 1px 2px rgba(0,0,0,.75);
}
.pw-cord{
  position:absolute; left:50%; top:-2px; width:1px; height:8px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(36,28,20,.95),rgba(96,76,50,.62));
}

/* 牌身：豆包出的那块木牌，一枚钉子挂上去
   圆孔放人，方框刻名字 —— 木纹、圆角、凹槽的坡口全是实拍，不用 CSS 画 */
.pw-bd{
  position:absolute; inset:3px 0 0 0;
  background-image:var(--pw-pai, none);
  background-size:100% 100%;
  background-repeat:no-repeat;
  border-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,.55);
}

/* 圆孔里的那个人。孔是凹的，所以头像要"沉"进去：上面压一道内影 */
.pw-face{
  position:absolute; left:19.5%; top:12.2%; width:61%;
  aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  background:#241a12;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.66),
    inset 0 -2px 3px rgba(255,236,206,.16),
    0 1px 0 rgba(255,246,222,.35);
}
.pw-face img{
  width:100%; height:100%; object-fit:cover; display:block;
  -webkit-user-drag:none;
}

/* 名次角标：墙上从左往右本来就是名次顺序，但"第几位"是这个玩法的核心，
   所以在右上角压一个小圆牌。只在 item.rank 有值时渲染，两字名字照样放得下。
   走远一点淡到 72%，不跟名字抢。 */
.pw-rk{
  position:absolute; right:5%; top:4%; z-index:4;
  min-width:calc(var(--pw-pw) * .34); height:calc(var(--pw-pw) * .30);
  padding:0 calc(var(--pw-pw) * .05);
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; font-style:normal;
  font:600 calc(var(--pw-pw) * .195)/1 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:#3a2208;
  background:linear-gradient(180deg,#f8e6bf,#d6b174);
  box-shadow:inset 0 0 0 1px rgba(120,86,44,.55), 0 1px 2px rgba(0,0,0,.55);
  pointer-events:none;
}
.pw-p.is-far  .pw-rk{opacity:.72;}
.pw-p.is-near .pw-rk{box-shadow:inset 0 0 0 1px rgba(120,86,44,.7), 0 1px 3px rgba(0,0,0,.6);}
.pw-p.is-mine .pw-rk{background:linear-gradient(180deg,#fff0c8,#e6bf7c);}
.pw-p.is-slot .pw-rk{display:none;}

/* 方框里刻的名字：竖排两字，从右往左读 */
.pw-nm{
  position:absolute; left:15%; top:47.4%; width:70%; height:41.5%;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:"STKaiti","KaiTi","Songti SC",serif;
  font-size:calc(var(--pw-pw) * .30);
  line-height:1.06; letter-spacing:.02em;
  color:#5b3a1c;
  text-shadow:0 1px 0 rgba(255,250,228,.50);
  overflow:hidden;
  transition:opacity .3s, color .3s;
}

/* ---------- 四种状态 ---------- */

/* 远：压暗，压出纵深（不用 filter，中端机掉帧）。远处也有 80%，看得见是牌 */
.pw-p.is-far .pw-face{opacity:.92;}
.pw-p.is-far .pw-nm{opacity:.74;}
.pw-p.is-far .pw-bd{box-shadow:
  inset 0 0 0 1px rgba(96,68,38,.45),
  inset 0 1px 0 rgba(255,250,232,.30),
  0 2px 4px rgba(0,0,0,.44);}

/* 近：这一列四块一起亮。只是光，不是位移 —— 人走过去，檐下的光就照到了 */
.pw-p.is-near{z-index:16;}
.pw-p.is-near .pw-bd{
  box-shadow:
    inset 0 0 0 1px rgba(255,226,168,.54),
    inset 0 1px 0 rgba(255,252,238,.72),
    0 0 0 1px rgba(255,214,150,.14),
    0 0 16px rgba(255,186,110,.24),
    0 3px 8px rgba(0,0,0,.5);
}
.pw-p.is-near .pw-nm{color:#3f2610;}

/* 我自己那一块：走多远都亮着 */
.pw-p.is-mine .pw-face{opacity:1;}
.pw-p.is-mine .pw-bd{
  border:1px solid rgba(255,226,168,.60);
  box-shadow:
    inset 0 0 0 1px rgba(255,236,190,.92),
    inset 0 1px 0 rgba(255,252,238,.9),
    0 0 0 1px rgba(255,220,160,.28),
    0 0 22px rgba(255,190,116,.40),
    0 0 46px rgba(255,174,100,.14),
    0 3px 8px rgba(0,0,0,.5);
}
.pw-p.is-mine .pw-nm{opacity:1;color:#33200c;}
.pw-p.is-mine .pw-hook{box-shadow:0 0 8px rgba(255,196,120,.75),0 1px 2px rgba(0,0,0,.8);}

/* 点中的那一块：描一道金边。全墙上唯一会变的东西 ——
   因为是你伸手碰了它，不是它自己在招呼你 */
.pw-p.is-hit{z-index:24;}
/* 压暗层会把金边吃掉，点中的这块不参加压暗 */
.pw-p.is-hit::after{background:transparent;}
.pw-p.is-hit .pw-bd{
  outline:1.5px solid rgba(255,220,158,.95);
  outline-offset:2px;
  box-shadow:
    inset 0 0 0 1px rgba(255,244,212,.95),
    inset 0 1px 0 rgba(255,252,238,.9),
    0 0 0 3px rgba(255,200,124,.16),
    0 0 14px rgba(255,196,120,.60),
    0 0 34px rgba(255,180,100,.28),
    0 3px 8px rgba(0,0,0,.55);
}
.pw-p.is-hit .pw-nm{color:#2c1a08;}
.pw-p.is-hit .pw-hook{box-shadow:0 0 9px rgba(255,206,140,.85),0 1px 2px rgba(0,0,0,.8);}

/* 空位：牌钉好了，人还没来。得看得出"这是一块空牌"，
   不能做成一个黑洞 —— 黑洞会让人以为墙没挂满 */
.pw-p.is-slot{opacity:.46;}                  /* v594：空位是「还没钉牌的木托」，不是实体牌 */
.pw-p.is-slot .pw-bd{
  background:
    repeating-linear-gradient(180deg,
      rgba(255,248,226,.10) 0 1px, transparent 1px 4px,
      rgba(96,70,40,.14) 4px 5px, transparent 5px 9px),
    linear-gradient(180deg,#a98d68 0%,#8e7250 34%,#735842 70%,#5c442c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(40,26,14,.62),
    inset 0 1px 0 rgba(255,240,200,.30),
    0 2px 5px rgba(0,0,0,.5);
}
.pw-p.is-slot .pw-face{
  background:linear-gradient(180deg,rgba(58,42,28,.55),rgba(30,21,14,.55) 70%);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.50), 0 1px 0 rgba(255,244,214,.10);
}
.pw-p.is-slot .pw-nm{color:rgba(226,196,150,.20);text-shadow:none;}
.pw-p.is-slot .pw-hook{opacity:.42;}
/* 空位不参与"走近亮起" —— 没人，不该亮 */
.pw-p.is-slot.is-near{transform:none;}
.pw-p.is-slot.is-near .pw-bd{
  box-shadow:inset 0 0 0 1px rgba(20,14,9,.7),
             inset 0 1px 0 rgba(255,240,200,.14),
             0 2px 5px rgba(0,0,0,.5);
}

/* 待入坊：还没轮到挂牌的位置，牌位是空的，只有一块淡描 */
.pw-p.is-mine-empty .pw-nm{color:rgba(90,58,26,.35);}

/* ---------- 别人的光球（在场，不是计数） ---------- */
.pw-peer{
  position:absolute; z-index:20; pointer-events:none;
  width:14px; height:14px; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .5s;
}
.pw-peer.on{opacity:1;}
.pw-peer i{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 46% 40%, #fff6e0, #ffc882 42%, rgba(255,170,96,.10) 76%);
  box-shadow:0 0 12px rgba(255,186,110,.85), 0 0 26px rgba(255,170,90,.40);
  animation:pwBreath 3.2s ease-in-out infinite;
}
.pw-peer u{
  position:absolute; left:50%; top:11px; width:26px; height:6px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,190,120,.34),transparent 72%);
}
@keyframes pwBreath{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.14);}
}

/* ---------- 墙头那块匾（随墙滚，走到墙头才看得到） ---------- */
.pw-plaque{
  position:absolute; z-index:22; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(178deg, rgba(255,226,180,.06) 0 1px, transparent 1px 7px),
    linear-gradient(176deg,#6d4a2c 0%,#523318 46%,#3a2412 100%);
  border-radius:3px;
  border:1px solid rgba(20,12,6,.9);
  box-shadow:0 4px 12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,230,186,.28);
  font-family:"STKaiti","KaiTi","Songti SC",serif;
  color:#e8d4a8; letter-spacing:.24em;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
}

/* ---------- 左下角：我在墙下 ---------- */
.pw-me{
  position:absolute; z-index:24; pointer-events:none;
  transform:translate(-50%,0);
  transform-origin:50% 100%;
  transition:opacity .46s ease, transform .46s ease, filter .46s ease;
}

/* 凝人之前：墙下没有人 */
.pw-me.is-form{
  opacity:0;
  transform:translate(-50%,0) scale(.965);
  filter:brightness(1.9) blur(1.4px);
}

/* 光球：广场上那颗飘到墙下，凝成一个背影。
   比起"人走过来"，这条路不用假装迈腿 —— 裙装本来就看不出腿。

   尺寸 26 → 42。原来那颗在 390 宽的手机上只有指甲盖大，从屏幕那头飞过来
   几乎认不出是"一颗球"。★ 光靠放大不够：这种 radial-gradient 从 56% 就开始
   淡出，36px 的球视觉核心只有 25px，看着还是小。所以尺寸和白色核心一起推 ——
   核心 12%→20%，中段 56%→64%，球才"实"。box-shadow 和拖尾按倍数跟上。 */
.pw-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）：球色要跟广场上自己那颗一模一样。
     原来这里是写死的暖金 —— 广场上选了蓝球，一进榜就飞过来一颗金球，像换了个我。
     现在整颗球（球体 + 晕光 + 两条拖尾 + 内芯）都走变量，由宿主按主色铺在容器上。
     ★★ 每个 var 的兜底值＝改造前那段原文，一个色值都没改 ——
        没铺变量时（老页面 / 组件被单独引用）画出来跟以前逐像素相同（画风锁）。 */
  background:var(--pwoc-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(--pwoc-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;
}
/* 拖尾：永远拖在运动的**后方**，不是前方。
   光球从左侧飞入（向右走）→ 尾巴朝左，这是现在的默认；
   反过来从右侧飞入时才翻到右边（.from-right）。

   ★ 这里踩过一次：早先注释写"尾巴永远在右边"，可代码 right:44% 实际把
   尾巴摆在了**左边** —— 光球往左飞的时候尾巴在前，像被推着走。
   后来改成从左飞入，又照着错误注释去"翻到左边"，结果真翻到了右边。
   现在按方向拆成两套，别再从 right/left 反推。

   ★ 还踩过一次：只有一层雾（opacity .5 + blur5），飞过亮牌面时
   球心左右 80px 的亮度差不到 20 —— 等于没有尾巴，方向读不出来。
   所以拆成两层：外面一层长雾给体积，里面一条细亮芯给方向。 */
.pw-orb::after{
  content:''; position:absolute; right:50%; top:50%; width:140px; height:22px;
  transform:translateY(-50%);
  background:var(--pwoc-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%;
}
.pw-orb::before{
  content:''; position:absolute; right:50%; top:50%; width:88px; height:6px;
  transform:translateY(-50%);
  background:var(--pwoc-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%;
}
.pw-orb.from-right::after,
.pw-orb.from-right::before{
  right:auto; left:50%;
}
.pw-orb.from-right::after{
  background:var(--pwoc-tail-r, linear-gradient(to right,
    rgba(255,226,172,.62), rgba(255,196,120,.22) 48%, rgba(255,180,100,0)));
}
.pw-orb.from-right::before{
  background:var(--pwoc-run-r, linear-gradient(to right,
    rgba(255,250,228,.82), rgba(255,222,162,.28) 52%, rgba(255,196,116,0)));
}
.pw-orb .pw-orb-c{
  position:absolute; inset:-45%; border-radius:50%;
  background:var(--pwoc-core, radial-gradient(circle, rgba(255,250,230,.55), rgba(255,210,140,0) 62%));
  animation:pwOrbPulse 1.15s ease-in-out infinite;
}
@keyframes pwOrbPulse{
  0%,100%{transform:scale(.9);opacity:.5;}
  50%    {transform:scale(1.18);opacity:1;}
}
.pw-me svg{display:block;width:100%;height:100%;}
/* 立绘版：脚必须落在底边，不然人会飘 */
.pw-me .pw-me-body{position:relative;display:block;width:100%;height:100%;}
.pw-me .pw-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%;
  /* ★ 只做极轻的色温贴合，绝不压亮度。
     原来那套 brightness(.80)+contrast(1.05)+sepia(.12) 会把白袍压成灰的，
     在暗墙前面反而"脏" —— 暗的是环境，不该靠压人来做。
     环境光交给底下那团雾和墙上的压暗，人不参与。 */
  filter:saturate(.97);
}
/* 朝右走：整张镜像。镜像放在 body 上，img 自己不留 transform，
   免得和以后任何单层动画抢 */
.pw-me.is-right .pw-me-body{transform:scaleX(-1);}

/* ---------- 脚下那团雾：全场唯一会动的东西 ----------
   为什么不让人动：24px 宽的人身上，任何"切开再动"的接缝都会露
   —— 之前把图切成腰以上/腰以下，切点就在腰上，一动腰就断。
   雾的边缘本来就是虚的，动起来没有边可以露，容错率高得多。
   四团不同大小、不同节奏、不同相位，合起来才像"雾在流"；
   只有一团的话，看上去只是呼吸。 */
.pw-me .pw-mist{
  position:absolute; left:50%; bottom:-43px; width:300%; height:86px;
  transform:translateX(-50%); pointer-events:none;
  transition:transform .6s ease, opacity .6s ease;
}
.pw-me .pw-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;
}
.pw-me .pw-mist i:nth-child(1){
  left:4%; bottom:8px; width:52%; height:70%;
  animation:pwDriftA calc(6.4s * var(--pw-k,1)) ease-in-out infinite;
}
.pw-me .pw-mist i:nth-child(2){
  left:32%; bottom:0; width:48%; height:88%;
  animation:pwDriftB calc(7.8s * var(--pw-k,1)) ease-in-out infinite -2.6s;
}
.pw-me .pw-mist i:nth-child(3){
  left:55%; bottom:5px; width:44%; height:74%;
  animation:pwDriftA calc(5.6s * var(--pw-k,1)) ease-in-out infinite -4.1s;
}
.pw-me .pw-mist i:nth-child(4){
  left:20%; bottom:-4px; width:66%; height:56%; opacity:.62;
  animation:pwDriftB calc(9.4s * var(--pw-k,1)) ease-in-out infinite -1.2s;
}
/* 两套漂移：A 往右上方散、B 往左上方散。互相错开才不像一起"呼吸" */
@keyframes pwDriftA{
  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 pwDriftB{
  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;}
}
/* 脚前那一层：小一点、淡一点，压在最前，挡住鞋和地面的接缝 */
.pw-me .pw-mist-f{bottom:-26px; width:210%; height:52px; opacity:.72;}
.pw-me .pw-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%);
}
.pw-me .pw-mist-f i:nth-child(1){left:8%; bottom:2px; width:56%; height:80%;}
.pw-me .pw-mist-f i:nth-child(2){left:34%; bottom:-2px; width:52%; height:92%;}
.pw-me .pw-mist-f i:nth-child(3){left:48%; bottom:4px; width:46%; height:70%;}
.pw-me .pw-mist-f i:nth-child(4){display:none;}

/* 脚下一小片暖光，跟雾错开呼吸 —— 雾是冷的，光是暖的，两层才不糊成一片 */
.pw-me .pw-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:pwPool 4.2s ease-in-out infinite;
}
@keyframes pwPool{
  0%,100%{transform:translateX(-50%) scaleX(1);opacity:.86;}
  50%    {transform:translateX(-50%) scaleX(1.07);opacity:.62;}
}

/* ---------- 走动（可选）：人不切、不摆，只是平移 + 雾往后拖 ---------- */
.pw-me{--pw-k:1;}
.pw-me.is-moving{--pw-k:.55;}
.pw-me.is-moving{animation:pwBob .86s ease-in-out infinite;}
@keyframes pwBob{
  0%,100%{transform:translate(-50%,0);}
  50%    {transform:translate(-50%,-2px);}
}
.pw-me.is-moving .pw-mist{transform:translateX(-50%) translateX(7px) scaleX(1.16);}
.pw-me.is-moving .pw-pool{animation-duration:1.8s;}

/* 剪影占位（avatar:true 时用）也还是老一套 */
.pw-me.is-moving svg{animation:pwWalk .46s linear infinite;}

@keyframes pwWalk{
  0%,100%{transform:translateY(0) rotate(-1.4deg);}
  50%    {transform:translateY(-2.5px) rotate(1.4deg);}
}

/* ---------- 顶部标题与召回 ---------- */
.pw-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;
}
.pw-top .pw-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;
}
.pw-top .pw-tt em{
  display:block; font-style:normal; font-size:9px; letter-spacing:.16em;
  color:rgba(255,226,190,.38); margin-top:3px;
}
.pw-btns{display:flex;gap:8px;pointer-events:auto;}
.pw-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;
}
.pw-btn:active{color:#ffe8bc;border-color:rgba(255,214,150,.6);background:rgba(40,26,14,.7);}

/* ---------- 底部提示 ---------- */
.pw-hint{
  position:absolute; left:0; right:0; bottom:calc(16px + 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;
}
.pw-hint.off{opacity:0;}

/* ---------- 卡片（点开一块牌时用；宿主有 onPick 就不弹） ---------- */
.pw-card{
  position:absolute; left:0; right:0; bottom:0; z-index:60;
  padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(14,9,6,.0),rgba(14,9,6,.96) 26%);
  transform:translateY(102%);
  transition:transform .34s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.pw-card.on{transform:none;pointer-events:auto;}
.pw-card .cd-nm{
  font-family:"STKaiti","KaiTi",serif; font-size:20px; letter-spacing:.16em;
  color:#ffe4b4; margin-bottom:6px;
}
.pw-card .cd-tg{
  font-size:10px; letter-spacing:.14em; color:rgba(255,226,190,.44);
  margin-bottom:12px;
}
.pw-card .cd-x{
  font-size:11px; letter-spacing:.2em; color:rgba(255,226,190,.5);
  border-top:1px solid rgba(232,192,116,.12); padding-top:12px; text-align:center;
}

/* ---------- 入场：只淡入，绝不动 transform ----------
   动 transform 会被 animation-fill-mode:both 锁死，把 JS 每帧写的
   translate3d 顶掉，整面墙就不滚了。这里只碰 opacity。 */
.pw-root.is-open .pw-world{animation:pwIn .55s ease both;}
@keyframes pwIn{from{opacity:0;} to{opacity:1;}}

/* 关闭时不接受触摸 */
.pw-root:not(.is-open){pointer-events:none;}

/* ---------- v596：选位模式（像买电影票挑座） ----------
   只有「够格挂牌」的人进这个模式才亮。空位从一块压淡的木托，
   变成一张透光的金边空牌 —— 一眼就知道"这些位置都能挑"。
   ★ 只用 opacity / box-shadow / 背景渐变，不做 blur、不做 transition
     （100 块牌一起变，任何 filter 都会把中端机拖下水）。 */
.pw-root.is-picking .pw-p.is-slot{opacity:.94; cursor:pointer;}
.pw-root.is-picking .pw-p.is-slot .pw-face{
  background:linear-gradient(180deg,rgba(232,169,79,.26),rgba(44,28,15,.58) 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255,214,150,.58),
    inset 0 1px 0 rgba(255,244,214,.20),
    0 0 12px rgba(255,186,110,.20);
}
.pw-root.is-picking .pw-p.is-slot .pw-nm{
  color:rgba(255,222,170,.66);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.pw-root.is-picking .pw-p.is-slot .pw-nm::after{content:"空位";}
/* 空位不参与"走近亮起"，但选位时也得看得清是哪一列被指着 */
.pw-root.is-picking .pw-p.is-slot.is-near .pw-face{
  box-shadow:
    inset 0 0 0 1px rgba(255,232,180,.9),
    0 0 16px rgba(255,196,120,.34);
}

/* ==========================================================================
   v597 · 绮罗榜：同一面墙，牌子换成「方形榜牌」
   创世花墙那块木牌是圆孔＋竖排名（记的是"哪一天挂上去"）；
   榜上记的是名次，所以头像做成方的、名次压成牌角的金牌。
   ⚠️ 只在 .is-rank 下生效，创世墙的字一个都没动。
   ========================================================================== */
/* 榜是平视的：不像高墙上那样越上面越远，两排只需要极轻的一层暗 */
.pw-root.is-rank .pw-p[data-row="0"]{--pw-dim:.06;}
.pw-root.is-rank .pw-p[data-row="1"]{--pw-dim:0;}
.pw-root.is-rank .pw-p[data-row="2"]{--pw-dim:0;}
.pw-root.is-rank .pw-p[data-row="3"]{--pw-dim:0;}

/* v598：榜牌是"横"的 —— 深胡桃木框，内沿一道金线，画镶在框里。
   牌要比竖屏里那块长木牌宽一倍，才像榜 */
.pw-root.is-rank .pw-bd{
  background:linear-gradient(180deg,#5b4423 0%,#422e17 46%,#291a0d 100%);
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px rgba(236,200,132,.56),      /* v602：金线提亮一档，前十这块要压得住 */
    inset 0 0 0 2px rgba(13,8,3,.94),
    inset 0 0 0 3px rgba(198,158,92,.22),       /* 第三道细金 —— 双框才是画框，单框像木片 */
    inset 0 1px 0 rgba(255,238,194,.36),
    0 4px 11px rgba(0,0,0,.64),
    0 1px 2px rgba(0,0,0,.86);
}
/* 内金框 + 四角金角：都是画在框里的细线，不动牌的位置，挤不歪版面 */
.pw-root.is-rank .pw-bd::before{
  content:""; position:absolute; inset:4px; z-index:4; pointer-events:none;
  border:1px solid rgba(228,188,120,.26);
  border-radius:1px;
  --gk:rgba(246,218,156,.88);
  background:
    linear-gradient(90deg,var(--gk),var(--gk))  left  top   /11px 1.5px no-repeat,
    linear-gradient(180deg,var(--gk),var(--gk)) left  top   /1.5px 11px no-repeat,
    linear-gradient(270deg,var(--gk),var(--gk)) right top   /11px 1.5px no-repeat,
    linear-gradient(180deg,var(--gk),var(--gk)) right top   /1.5px 11px no-repeat,
    linear-gradient(90deg,var(--gk),var(--gk))  left  bottom/11px 1.5px no-repeat,
    linear-gradient(0deg,var(--gk),var(--gk))   left  bottom/1.5px 11px no-repeat,
    linear-gradient(270deg,var(--gk),var(--gk)) right bottom/11px 1.5px no-repeat,
    linear-gradient(0deg,var(--gk),var(--gk))   right bottom/1.5px 11px no-repeat;
}
/* 顶上一道斜光：像有一盏灯压在檐下照在木框上（很淡，只提质感不提亮度） */
.pw-root.is-rank .pw-bd::after{
  content:""; position:absolute; left:0; right:0; top:0; height:42%; z-index:1;
  pointer-events:none; border-radius:3px 3px 0 0;
  background:linear-gradient(178deg,rgba(255,240,206,.10) 0%,rgba(255,240,206,.03) 42%,rgba(255,240,206,0) 100%);
}
/* 框里那幅画：铺满框心，只留一圈木边 */
.pw-root.is-rank .pw-face{
  /* v599：画窗四边留一样宽的木边 —— 只写 left/top/width 会歪：
     牌是横的（1.19:1），宽度一撑到 89%，正方的高度就顶出下沿，画跟框对不齐 */
  left:5.5%; top:5.5%; right:5.5%; bottom:5.5%;
  width:auto; height:auto; aspect-ratio:auto;
  border-radius:1px;
  box-shadow:
    inset 0 0 0 1px rgba(10,6,3,.94),
    inset 0 2px 5px rgba(0,0,0,.52),
    0 0 0 1px rgba(228,188,126,.20);
}
.pw-root.is-rank .pw-face img{object-fit:cover; object-position:50% 18%;}
/* 名字：写在牌下面那块榜板上，横排一行 —— 牌面全留给画 */
.pw-root.is-rank .pw-nm{
  left:50%; top:auto; bottom:-1.30em; width:150%; height:auto;
  transform:translateX(-50%);
  writing-mode:horizontal-tb; text-orientation:mixed;
  font-size:calc(var(--pw-pw) * .18);
  line-height:1.1; letter-spacing:.02em;
  /* 墨色写在木头上（跟匾额上那几个字同一个路子）—— 浅金字压在浅木板上会发雾 */
  color:#2f1d0d;
  text-shadow:0 1px 0 rgba(255,242,214,.46), 0 0 6px rgba(255,232,190,.18);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 名次写在名字前面（「第一名 阿芸」）：比名字再小一档、淡一点，
   一行读下来先是名次再是人名，不抢画 */
.pw-root.is-rank .pw-rkw{
  font-style:normal; font-weight:400;
  font-size:.84em; letter-spacing:.02em;
  margin-right:.30em; opacity:.82;
}
/* v602：名次刻在相框下沿那块宽木条上（金字）。名字那行就只剩人名 ——
   比「第五名 某某某」挤一行清楚，比拆两行省地方（每排只 117px，拆两行放不下） */
.pw-root.is-rank .pw-rkp{
  position:absolute; left:3.5%; right:3.5%; bottom:0; height:28%;
  z-index:3; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:calc(var(--pw-pw) * .108);   /* v605 姐：烫金字再小一档 */
  line-height:1; letter-spacing:.17em; text-indent:.17em;
  color:#f8e6bf;
  background:linear-gradient(180deg,#7d5a32 0%,#533a1b 55%,#372310 100%);
  border-radius:0 0 2px 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,238,194,.50),
    inset 0 -1px 0 rgba(0,0,0,.66),
    0 -2px 5px rgba(0,0,0,.46);
  text-shadow:0 1px 1px rgba(0,0,0,.68), 0 0 6px rgba(255,214,148,.24);
  pointer-events:none;
}
/* 名字在牌外，暗/亮的四种状态不能把这行字压成看不见 */
.pw-root.is-rank .pw-p.is-far .pw-nm{opacity:.88;}
.pw-root.is-rank .pw-p.is-near .pw-nm,
.pw-root.is-rank .pw-p.is-hit .pw-nm,
.pw-root.is-rank .pw-p.is-mine .pw-nm{color:#1b1005;}
/* v599：榜板下方那一条 —— 日期 + 「查看候选十人」。
   它不在 pw-world 里（不跟榜单左右滚），钉在榜板下沿那块空木头上 */
.pw-root.is-rank .pw-bangfoot{
  /* v606：整条压到 30 高，塞进木板亮面最下面那条带子（牌区下沿 543 → 底 573），
     就是「木板右下角」；右边收 3.4% 再贴紧一档。人走动、镜头拖，它都不动 */
  position:absolute; right:3.4%; left:auto; top:0;
  white-space:nowrap;
  z-index:41;
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; pointer-events:none;
  padding:3px 11px 3px;          /* v606：4/5 收成 3/3 —— 整条 32 → 28（543~571），塞得进板底 */
  border-radius:2px;
  background:linear-gradient(180deg,rgba(62,43,23,.93) 0%,rgba(36,25,13,.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(226,186,118,.32),
    inset 0 1px 0 rgba(255,236,196,.16),
    0 2px 7px rgba(0,0,0,.42);
}
.pw-root.is-rank .pw-bf-d{
  font-size:12.5px; letter-spacing:.14em;
  color:#efdcb2;                          /* 深木签上写浅金字，跟相框下沿那块铭牌同一个路子 */
  text-shadow:0 1px 1px rgba(0,0,0,.66);
}
.pw-root.is-rank .pw-bf-x{
  font-style:normal; font-size:12px;
  color:rgba(236,214,168,.40);
}
.pw-root.is-rank .pw-bf-btn{
  pointer-events:auto;
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
  padding:5px 12px 5px; border-radius:2px;   /* v606：收到 5/5（22 高）—— 再矮手指就点不准，
                                                 _t_v599 / _t_v600 都有「高 ≥ 22」这道闸 */
  font:600 12px/1 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.10em; color:#f7e8c8;
  background:linear-gradient(180deg,#5c4227 0%,#3a2714 100%);
  box-shadow:
    inset 0 0 0 1px rgba(228,188,126,.56),
    inset 0 1px 0 rgba(255,232,190,.26),
    0 2px 5px rgba(0,0,0,.44);
}
.pw-root.is-rank .pw-bf-btn:active{
  background:linear-gradient(180deg,#4a3420 0%,#2e1f10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(228,188,126,.44),
    inset 0 2px 4px rgba(0,0,0,.52);
}
/* v602 · 候选榜（第 11~20 名）＝素木框。
   榜上那十位是挂在正墙上的，框要描金；候补只是记个名 ——
   金线、金角、斜光全撤，木色压低一档，一眼分得出轻重 */
.pw-root.is-rank.is-cand .pw-bd{
  background:linear-gradient(180deg,#4b3a26 0%,#372a1b 52%,#241a11 100%);
  border-radius:2px;
  box-shadow:
    inset 0 0 0 1px rgba(150,124,86,.36),
    inset 0 0 0 2px rgba(13,8,3,.92),
    inset 0 1px 0 rgba(232,212,178,.18),
    0 2px 6px rgba(0,0,0,.50);
}
.pw-root.is-rank.is-cand .pw-bd::before{display:none;}
.pw-root.is-rank.is-cand .pw-bd::after{display:none;}
.pw-root.is-rank.is-cand .pw-rkp{
  color:#c8b492;
  background:linear-gradient(180deg,#4d3b25 0%,#31230f 100%);
  box-shadow:
    inset 0 1px 0 rgba(226,204,164,.22),
    inset 0 -1px 0 rgba(0,0,0,.52);
  text-shadow:0 1px 1px rgba(0,0,0,.54);
}
/* 候补整排再哑一档：不是"另一种牌"，是同一块牌上没有金 */
.pw-root.is-rank.is-cand .pw-p{filter:saturate(.84) brightness(.95);}
.pw-root.is-rank.is-cand .pw-nm{color:#3b2a15;}

/* 榜上的牌不用吊绳——它是嵌在榜面上的 */
.pw-root.is-rank .pw-hook{top:-4px; width:4px; height:4px; opacity:.72;}
.pw-root.is-rank .pw-cord{display:none;}
/* 空位：榜上还没人坐的格子，只留一个淡淡的内框，别画成一张牌 */
.pw-root.is-rank .pw-p.is-slot .pw-bd{
  background:rgba(20,13,7,.30);
  box-shadow:inset 0 0 0 1px rgba(226,186,124,.10);
}

/* 顶上是灰瓦：不压一层，浅米色的标题和按钮全糊在瓦里 */
.pw-root.is-rank::before{
  content:""; position:absolute; left:0; right:0; top:0; height:122px;
  z-index:39; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,7,4,.88) 0%, rgba(10,7,4,.62) 46%, rgba(10,7,4,.24) 78%, rgba(10,7,4,0) 100%);
}
.pw-root.is-rank .pw-top .pw-tt{
  font-size:15px;
  color:#fff4de;
  text-shadow:0 1px 3px rgba(0,0,0,.98), 0 0 14px rgba(0,0,0,.80);
}
.pw-root.is-rank .pw-top .pw-tt em{
  color:rgba(255,238,210,.82);
  text-shadow:0 1px 3px rgba(0,0,0,.95);
}
.pw-root.is-rank .pw-btn{
  color:rgba(255,238,210,.92);
  border-color:rgba(232,192,116,.40);
  background:rgba(12,8,4,.74);
}
/* v598：底部那行提示压在石阶上，比创世墙那边再亮一档 */
.pw-root.is-rank .pw-hint{
  color:rgba(255,240,214,.80);
  text-shadow:0 1px 3px rgba(0,0,0,.94), 0 0 10px rgba(0,0,0,.66);
}