:root{ --bg:#170e09; --bg2:#211309; --bg3:#1d1108; --card:#241609; --card2:#3a2510; --red:#b8452e; --gold:#e8a94f; --gold2:#f0cf8e; --gold3:#a08553; --txt:#e9dcc3; --sub:#cbba9c; --line:rgba(240,210,160,.18); } *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body{ height:100%; } body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--txt); overflow:hidden; user-select:none; display:flex; justify-content:center; } #stage{ position:relative; width:100%; max-width:430px; height:100%; background:var(--bg); display:flex; flex-direction:column; box-shadow:0 0 40px rgba(0,0,0,.5); } /* ===== 009 分屏：上 1/2 纯画面 + 下 1/2 字幕区（半透明磨砂底）===== 三态点击切换：#stage 挂 mode-sub(默认) / mode-full(全文) / mode-pure(纯画面)。 只切 #view 的 flex-basis，#talk 用 flex:1 自动吃掉剩余 ⇒ 一个变量管三态， 无任何倒计时（老板原案唯一被改掉的点）。三态只动上半画面区的高度， 下半的字幕 / 选项 / 输入框三态恒在（全文态也保留、可用）。 */ #view{ position:relative; flex:0 0 46%; min-height:0; z-index:1; overflow:hidden; background:#20140b; transition:flex-basis .3s ease; } #view #bgLayer{ position:absolute; inset:0; } /* 背景层改挂上半屏，不再全屏铺 */ #talk{ position:relative; flex:1 1 0; min-height:0; z-index:2; display:flex; flex-direction:column; background:rgba(19,11,5,.84); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line); box-shadow:0 -12px 30px rgba(0,0,0,.55); transition:flex-basis .3s ease, opacity .24s ease; } #stage.mode-full #view{ flex-basis:26%; } #stage.mode-pure #view{ flex-basis:100%; } #stage.mode-pure #talk{ flex:0 0 0; opacity:0; pointer-events:none; overflow:hidden; } /* 把手：点它切 字幕态↔全文态（不干扰滚动/输入；拖动条不拦截） */ #talkHandle{ flex:0 0 auto; height:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } #talkHandle .th-grip{ width:44px; height:4px; border-radius:3px; background:rgba(232,169,79,.4); transition:background .2s; } #talkHandle:active .th-grip{ background:rgba(232,169,79,.85); } /* ===== 封面 ===== */ #cover{ position:absolute; inset:0; z-index:60; background:#1a0f0a; display:none; flex-direction:column; } #cover .cv-img{ position:relative; flex:1; min-height:0; overflow:hidden; } #cover .cv-img img{ width:100%; height:100%; object-fit:cover; display:block; } #cover .cv-shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,8,4,.42) 0%,rgba(20,8,4,0) 28%,rgba(20,8,4,0) 42%,rgba(16,6,3,.88) 82%,#100603 100%); } #cover .cv-top{ position:absolute; top:14px; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:0 16px; } #cover .cv-top .tag{ font-size:11px; color:rgba(255,230,190,.85); letter-spacing:2px; } #cover .cv-body{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px calc(18px + env(safe-area-inset-bottom)); } #cover .cv-title{ font-family:"Noto Serif SC","Songti SC",serif; font-size:38px; font-weight:500; color:#f7e8c8; letter-spacing:14px; text-indent:14px; text-align:center; } #cover .cv-sub{ font-size:12px; color:rgba(240,215,175,.9); letter-spacing:3px; text-align:center; margin-top:8px; } #cover .btnGo{ display:block; width:100%; margin-top:12px; padding:13px 0; border:none; border-radius:12px; background:var(--red); color:#ffe9c9; font-size:15px; font-weight:600; letter-spacing:6px; cursor:pointer; } #cover .btnGo:active{ transform:scale(.98); } /* v482（姐 2026-10-12 真机反馈）：有存档时主按钮文案长（「⟲ 继续上一段 · 第 N 章 · 章名」）， 原 letter-spacing:6px 在窄屏（≤360）会折行 ⇒ 续玩态收紧字距/字号，保证一行放下。 实测：fs14/ls1 下最长章名「第 2 章 · 谁买我不挂牌」需宽 264px，320px 屏（内宽 276）也放得下。 */ #cover .btnGo.cv-resume{ letter-spacing:1px; font-size:14px; } /* v460（卡 T-20261011-004 · SPEC_换脸入口位置与三屏UI设计）：主界面双入口 默认入梦＝主按钮（免费玩家大头）／上传模样＝朱红描边副按钮（增值入口，不喧宾夺主） */ #cover .cv-kicker{ font-size:11px; color:rgba(240,215,175,.72); letter-spacing:3px; text-align:center; margin-bottom:7px; } #cover .cv-top .tag-brand{ font-weight:700; color:#f7e8c8; letter-spacing:3px; font-size:12px; } /* ===== v477（姐 2026-10-12 拍板「方案B」）：封面形象单选行 ===== ① 单选行在**主按钮之上**（形象先选好，主按钮一按就进 —— 「点两次」变「点一次」）； ② 主按钮**唯一**（无存档=「入 梦」／有存档=「⟲ 继续上一段 · 章名」）； ③ 「重新开始」降为**右对齐小字**（一天最多用一次，不占主位）。 */ #cover .cv-mlabel{ font-size:11px; color:rgba(232,200,160,.78); letter-spacing:2px; margin-top:15px; text-align:left; } #cover .cv-radios{ display:flex; gap:8px; margin-top:8px; } #cover .cv-rb{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; padding:9px 2px; border-radius:10px; border:1px solid rgba(226,180,120,.30); background:rgba(24,12,7,.70); color:rgba(226,200,160,.68); font-size:11.5px; letter-spacing:.5px; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; } #cover .cv-rb .dt{ width:7px; height:7px; border-radius:50%; border:1.5px solid rgba(226,180,120,.5); flex:0 0 auto; } #cover .cv-rb.on{ background:rgba(184,69,46,.20); border-color:var(--red); color:#ffd9a8; font-weight:600; } #cover .cv-rb.on .dt{ border-color:var(--red); background:var(--red); box-shadow:0 0 0 2.5px rgba(184,69,46,.28); } #cover .cv-restart{ margin-top:9px; text-align:right; font-size:10.5px; color:rgba(232,200,160,.62); } #cover .cv-restart a{ color:rgba(232,169,79,.9); cursor:pointer; text-decoration:none; border-bottom:1px dotted rgba(232,169,79,.5); } #cover .cv-foot{ display:flex; justify-content:space-between; margin-top:12px; font-size:10px; color:rgba(230,200,160,.62); } /* v474·传播落地（姐 2026-10-12）：公众号 / 微信群投放 ⇒ 落地页一眼看懂「免费玩到哪」+ 来自哪里 */ #cover .cv-hooks{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 8px; margin-top:11px; } #cover .cv-hooks span{ font-size:10.5px; line-height:1; padding:5px 9px; border-radius:20px; color:rgba(245,220,180,.92); background:rgba(184,69,46,.16); border:1px solid rgba(226,180,120,.28); letter-spacing:.5px; white-space:nowrap; } #cover .cv-from{ font-size:11px; color:rgba(255,220,170,.82); letter-spacing:1.5px; text-align:center; margin-bottom:9px; } #cover .cv-from b{ color:#ffd9a8; font-weight:600; } /* ===== v462：封面右上角「人像」入口 + 账号面板 ===== */ #cover .cv-top-r{ display:flex; align-items:center; gap:10px; } #cover .cv-user{ width:34px; height:34px; padding:0; border-radius:50%; cursor:pointer; border:1.5px solid rgba(240,210,160,.5); background:rgba(36,22,9,.62); color:#f2d9a6; display:flex; align-items:center; justify-content:center; position:relative; -webkit-tap-highlight-color:transparent; } #cover .cv-user svg{ width:19px; height:19px; display:block; } #cover .cv-user:active{ background:rgba(70,42,16,.85); } #cover .cv-user.logged{ border-color:rgba(232,169,79,.9); box-shadow:0 0 0 1.5px rgba(232,169,79,.22); } #cover .cv-user-init{ font-size:13px; font-weight:700; color:#ffe9c9; line-height:1; } #cover .cv-user-dot{ position:absolute; top:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background:#ff5a7a; border:1.5px solid #170e09; } /* v467（卡 T-20261011-009 · C2）：第 1 章续费提示（一次性小卡 · 不推高聊天） */ #faceUpsell{ position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center; background:rgba(10,6,3,.55); padding:0 26px; } #faceUpsell.on{ display:flex; } #faceUpsell .fu-card{ width:100%; max-width:330px; border-radius:16px; padding:20px 18px 16px; background:linear-gradient(180deg,#2a1a10,#20130b); border:1px solid rgba(226,180,120,.35); box-shadow:0 12px 40px rgba(0,0,0,.6); text-align:center; } #faceUpsell .fu-em{ font-size:26px; line-height:1; margin-bottom:8px; } #faceUpsell .fu-t{ font-size:15px; color:#f4e2c8; font-weight:600; margin-bottom:8px; letter-spacing:.5px; } #faceUpsell .fu-b{ font-size:12.5px; line-height:1.8; color:#c9b49a; margin-bottom:16px; } #faceUpsell .fu-go{ display:block; width:100%; padding:11px 0; border:0; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:#2a1508; background:linear-gradient(180deg,#f2c98a,#dba55c); } #faceUpsell .fu-no{ display:block; width:100%; margin-top:9px; padding:9px 0; border:0; background:none; cursor:pointer; font-size:12.5px; color:#8d7a63; } /* v469c-chapswitch（卡 T-20261011-010 · C3）：章节切换提醒 本章的脸用完 ⇒ 进下一章时提醒一次。全屏版＝本账号首次；轻量版＝顶部飘一条（可点 · 直达续购）。 */ #chapSwitch{ position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center; background:rgba(10,6,3,.55); padding:0 26px; } #chapSwitch.on{ display:flex; } #chapSwitch .cs-card{ width:100%; max-width:330px; border-radius:16px; padding:20px 18px 16px; background:linear-gradient(180deg,#2a1a10,#20130b); border:1px solid rgba(226,180,120,.35); box-shadow:0 12px 40px rgba(0,0,0,.6); text-align:center; } #chapSwitch .cs-em{ font-size:26px; line-height:1; margin-bottom:8px; } #chapSwitch .cs-t{ font-size:15px; color:#f4e2c8; font-weight:600; margin-bottom:8px; letter-spacing:.5px; } #chapSwitch .cs-b{ font-size:12.5px; line-height:1.85; color:#c9b49a; margin-bottom:16px; } #chapSwitch .cs-b b{ color:#ffd9a8; font-weight:600; } #chapSwitch .cs-go{ display:block; width:100%; padding:11px 0; border:0; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:#2a1508; background:linear-gradient(180deg,#f2c98a,#dba55c); } #chapSwitch .cs-no{ display:block; width:100%; margin-top:9px; padding:9px 0; border:0; background:none; cursor:pointer; font-size:12.5px; color:#8d7a63; } #csToast{ position:fixed; left:50%; top:52px; transform:translateX(-50%); z-index:150; display:none; align-items:center; gap:10px; max-width:calc(100% - 32px); box-sizing:border-box; padding:10px 14px; border-radius:12px; cursor:pointer; text-align:left; background:rgba(36,22,9,.94); border:1px solid rgba(232,169,79,.45); box-shadow:0 8px 26px rgba(0,0,0,.5); } #csToast.on{ display:flex; } #csToast .ct-ic{ font-size:16px; line-height:1; } #csToast .ct-tt{ font-size:12.5px; line-height:1.6; color:#f0e0c8; } #csToast .ct-tt b{ color:var(--gold2); font-weight:600; } /* v474·登录门禁（未注册最多玩序章 + 第 1 章；第 2 章起先留名帖） z-index 195：压住 chapSwitch/csToast/faceUpsell(150)，让位于账号面板 accMask(200)。 */ #loginWall{ position:fixed; inset:0; z-index:195; display:none; align-items:center; justify-content:center; background:rgba(10,6,3,.72); padding:0 26px; } #loginWall.on{ display:flex; } #loginWall .lw-card{ width:100%; max-width:330px; border-radius:16px; padding:22px 18px 16px; background:linear-gradient(180deg,#2a1a10,#20130b); border:1px solid rgba(226,180,120,.35); box-shadow:0 12px 40px rgba(0,0,0,.6); text-align:center; } #loginWall .lw-em{ font-size:26px; line-height:1; margin-bottom:8px; } #loginWall .lw-t{ font-size:15px; color:#f4e2c8; font-weight:600; margin-bottom:8px; letter-spacing:.5px; } #loginWall .lw-b{ font-size:12.5px; line-height:1.85; color:#c9b49a; margin-bottom:16px; } #loginWall .lw-b b{ color:#ffd9a8; font-weight:600; } #loginWall .lw-go{ display:block; width:100%; padding:11px 0; border:0; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:#2a1508; background:linear-gradient(180deg,#f2c98a,#dba55c); } #loginWall .lw-no{ display:block; width:100%; margin-top:9px; padding:9px 0; border:0; background:none; cursor:pointer; font-size:12.5px; color:#8d7a63; } /* v660·第1章结尾召回软钩子：轻引导留联系方式（可跳过，z-index 190 压过广场180、让位登录墙195/账号面板200） */ #qContactHook{ position:fixed; inset:0; z-index:190; display:none; align-items:center; justify-content:center; background:rgba(10,6,3,.72); padding:0 26px; } #qContactHook.on{ display:flex; } #qContactHook .qc-card{ width:100%; max-width:330px; border-radius:16px; padding:22px 18px 16px; background:linear-gradient(180deg,#2a1a10,#20130b); border:1px solid rgba(226,180,120,.35); box-shadow:0 12px 40px rgba(0,0,0,.6); text-align:center; } #qContactHook .qc-em{ font-size:24px; line-height:1; margin-bottom:8px; } #qContactHook .qc-t{ font-size:15px; color:#f4e2c8; font-weight:600; margin-bottom:8px; letter-spacing:.5px; } #qContactHook .qc-b{ font-size:12.5px; line-height:1.85; color:#c9b49a; margin-bottom:14px; text-align:left; } #qContactHook .qc-in{ width:100%; box-sizing:border-box; padding:11px 12px; border-radius:10px; border:1px solid rgba(226,180,120,.35); background:rgba(0,0,0,.25); color:#f4e2c8; font-size:14px; margin-bottom:14px; outline:none; font-family:inherit; } #qContactHook .qc-in::placeholder{ color:#8d7a63; } #qContactHook .qc-go{ display:block; width:100%; padding:11px 0; border:0; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:#2a1508; background:linear-gradient(180deg,#f2c98a,#dba55c); } #qContactHook .qc-no{ display:block; width:100%; margin-top:9px; padding:9px 0; border:0; background:none; cursor:pointer; font-size:12.5px; color:#8d7a63; } /* v522·序章取名快路：拍①的 dock 里挂一枚「▸ 我要取名」—— 数据事实：近 48h 74 设备只有 24 个走到取名，序章拍①开头 6 段全是纯旁白零互动， 玩家一路点 6 下才碰到第一个名字卡 ⇒ 给不耐烦的人一条直达取名的路（不改剧本文本）。 */ /* v530（姐定）：「我要取名」也加圈跑带灯 —— 对话框同款技法（conic 内转 + 内盖露 2px 边）。 */ #dock .skipName{ display:block; width:100%; margin-top:10px; padding:12px 0; border:0; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; color:#f0d5a8; background:transparent; position:relative; overflow:hidden; } #dock .skipName::before{ content:''; position:absolute; left:50%; top:50%; width:560px; height:560px; margin:-280px 0 0 -280px; background:conic-gradient(from 0deg,rgba(255,209,128,0) 0 50%,rgba(255,209,128,.92) 72%,rgba(255,160,220,.96) 86%,rgba(255,209,128,0) 100%); animation:qLeadRun 1.7s linear infinite; pointer-events:none; z-index:0; } #dock .skipName::after{ content:''; position:absolute; inset:2px; border-radius:8px; background:#33220f; z-index:0; pointer-events:none; } #dock .skipName span{ position:relative; z-index:1; display:block; } #dock .skipName:active span{ opacity:.8; } #dock .skipName b{ color:#ffd9a8; } /* v519：如梦令会员墙（第2章起，已登录无有效会员 ⇒ 弹墙引导订阅）。 z-index 196：与 faceAsk 同级、压 loginWall(195)，让位账号面板 accMask(200)。 */ #membershipWall{ position:fixed; inset:0; z-index:196; display:none; align-items:center; justify-content:center; background:rgba(10,6,3,.78); padding:0 22px; } #membershipWall.on{ display:flex; } #membershipWall .mw-card{ width:100%; max-width:360px; border-radius:16px; padding:20px 16px 14px; background:linear-gradient(180deg,#2a1a10,#20130b); border:1px solid rgba(226,180,120,.4); box-shadow:0 12px 40px rgba(0,0,0,.6); text-align:center; } #membershipWall .mw-em{ font-size:24px; line-height:1; margin-bottom:7px; } #membershipWall .mw-t{ font-size:16px; color:#f4e2c8; font-weight:600; margin-bottom:5px; letter-spacing:.5px; } #membershipWall .mw-b{ font-size:12px; line-height:1.8; color:#c9b49a; margin-bottom:13px; } #membershipWall .mw-b b{ color:#ffd9a8; font-weight:600; } #membershipWall .mw-packs{ display:flex; gap:8px; margin-bottom:13px; } #membershipWall .mw-pack{ flex:1; padding:11px 4px; border-radius:11px; cursor:pointer; border:1px solid var(--line); background:rgba(0,0,0,.22); } #membershipWall .mw-pack.on{ border-color:var(--gold); background:rgba(226,180,120,.12); } #membershipWall .mw-pack .p-name{ font-size:12px; color:#e8d5b5; font-weight:600; margin-bottom:3px; } #membershipWall .mw-pack .p-yuan{ font-size:17px; color:var(--gold); font-weight:700; } #membershipWall .mw-pack .p-days{ font-size:10px; color:#8d7a63; margin-top:2px; } #membershipWall .mw-go{ display:block; width:100%; padding:11px 0; border:0; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:#2a1508; background:linear-gradient(180deg,#f2c98a,#dba55c); } #membershipWall .mw-go:disabled{ opacity:.5; cursor:default; } #membershipWall .mw-no{ display:block; width:100%; margin-top:9px; padding:9px 0; border:0; background:none; cursor:pointer; font-size:12.5px; color:#8d7a63; } #membershipWall .mw-msg{ font-size:11.5px; color:#b89a6e; margin-top:8px; min-height:15px; } /* v549：边缘滑动退出确认浮层（连滑两次弹「要不要退出」）。z-index 220：压过 hmap(210)/accMask(200)。 */ #qExitAsk{ position:fixed; inset:0; z-index:220; display:none; align-items:center; justify-content:center; background:rgba(10,6,3,.72); padding:0 26px; backdrop-filter:blur(2px); } #qExitAsk.on{ display:flex; } #qExitAsk .qe-card{ width:100%; max-width:320px; border-radius:16px; padding:22px 18px 16px; background:linear-gradient(180deg,#2a1a10,#20130b); border:1px solid rgba(226,180,120,.35); box-shadow:0 12px 40px rgba(0,0,0,.6); text-align:center; } #qExitAsk .qe-em{ font-size:26px; line-height:1; margin-bottom:9px; } #qExitAsk .qe-t{ font-size:15px; color:#f4e2c8; font-weight:600; margin-bottom:9px; letter-spacing:.5px; } #qExitAsk .qe-b{ font-size:12.5px; line-height:1.8; color:#c9b49a; margin-bottom:15px; } #qExitAsk .qe-acts{ display:flex; gap:10px; } #qExitAsk .qe-acts button{ flex:1; padding:11px 0; border:0; border-radius:10px; cursor:pointer; font-size:14px; } #qExitAsk .qe-stay{ background:rgba(232,169,79,.18); color:#f0d9ac; border:1px solid rgba(226,180,120,.4); } #qExitAsk .qe-go{ background:#7a2a3a; color:#ffd9d9; } /* v477（方案B）：选「我的模样」但还没上传 ⇒ 先问一句（不硬把人推去换脸页）。 z-index 196：压 chapSwitch/csToast/faceUpsell(150)，让位账号面板 accMask(200)。 */ #faceAsk{ position:fixed; inset:0; z-index:196; display:none; align-items:center; justify-content:center; background:rgba(10,6,3,.72); padding:0 26px; backdrop-filter:blur(2px); } #faceAsk.on{ display:flex; } #faceAsk .fa-card{ width:100%; max-width:320px; border-radius:16px; padding:22px 18px 16px; background:linear-gradient(180deg,#2a1a10,#20130b); border:1px solid rgba(226,180,120,.35); box-shadow:0 12px 40px rgba(0,0,0,.6); text-align:center; } #faceAsk .fa-em{ font-size:26px; line-height:1; margin-bottom:9px; } #faceAsk .fa-t{ font-size:15px; color:#f4e2c8; font-weight:600; margin-bottom:9px; letter-spacing:.5px; } #faceAsk .fa-b{ font-size:12.5px; line-height:1.8; color:#c9b49a; margin-bottom:2px; } #faceAsk .fa-b b{ color:#ffd9a8; font-weight:600; } #faceAsk .fa-acts{ display:flex; flex-direction:column; gap:9px; margin-top:15px; } #faceAsk .fa-go{ display:block; width:100%; padding:11px 0; border:0; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:#2a1508; background:linear-gradient(180deg,#f2c98a,#dba55c); letter-spacing:2px; } #faceAsk .fa-no{ display:block; width:100%; padding:9px 0; border:0; background:none; cursor:pointer; font-size:12.5px; color:#8d7a63; } #faceAsk .fa-opts{ display:flex; flex-direction:column; gap:9px; margin-top:14px; text-align:left; } #faceAsk .fa-rb{ display:flex; align-items:center; gap:9px; padding:11px 12px; border:1px solid rgba(226,180,120,.35); border-radius:10px; background:rgba(255,255,255,.03); cursor:pointer; font-size:13.5px; color:#e0c8a8; } #faceAsk .fa-rb .dt{ width:8px; height:8px; border-radius:50%; border:1.5px solid rgba(226,180,120,.5); flex:0 0 auto; } #faceAsk .fa-rb.on{ background:rgba(184,69,46,.20); border-color:rgba(184,69,46,.7); color:#ffd9a8; font-weight:600; } #faceAsk .fa-rb.on .dt{ border-color:#e24b4a; background:#e24b4a; box-shadow:0 0 0 2.5px rgba(184,69,46,.28); } #faceAsk .fa-rb .hint{ margin-left:auto; font-size:11px; color:#8d7a63; font-weight:400; } #accMask{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(10,5,2,.72); padding:18px; } #accMask.on{ display:flex; } #accCard{ position:relative; width:100%; max-width:330px; max-height:86vh; overflow:auto; box-sizing:border-box; background:linear-gradient(180deg,#2a1810,#1d1108); border:1px solid rgba(240,210,160,.28); border-radius:16px; padding:18px 18px 20px; color:var(--txt); box-shadow:0 16px 48px rgba(0,0,0,.6); } #accCard h3{ font-size:16px; color:#f7e8c8; letter-spacing:2px; font-weight:600; margin:0 0 12px; text-align:center; } /* v469d（姐 2026-10-11）：关闭 ✕ 挪到「我的账号」面板右上角 */ #accCard .acc-x{ position:absolute; top:10px; right:10px; width:28px; height:28px; padding:0; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.06); color:rgba(240,215,175,.78); font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; } #accCard .acc-x:active{ background:rgba(232,169,79,.18); color:var(--gold2); } #accCard .acc-tabs{ display:flex; gap:18px; justify-content:center; margin-bottom:14px; font-size:14px; } #accCard .acc-tabs span{ cursor:pointer; color:var(--sub); padding:3px 2px; border-bottom:2px solid transparent; } #accCard .acc-tabs span.on{ color:var(--gold2); border-bottom-color:var(--gold); } #accCard .acc-in{ width:100%; box-sizing:border-box; margin-bottom:10px; padding:10px 12px; border-radius:10px; border:1px solid rgba(240,210,160,.22); background:rgba(255,255,255,.05); color:#fff; font-size:14px; } #accCard .acc-in::placeholder{ color:rgba(203,186,156,.6); } #accCard .acc-submit{ width:100%; padding:11px; border:none; border-radius:10px; cursor:pointer; font-size:15px; font-weight:600; letter-spacing:3px; color:#ffe9c9; background:var(--red); } #accCard .acc-submit:active{ transform:scale(.99); } #accCard .acc-msg{ min-height:18px; margin-top:9px; font-size:13px; color:#ffb3a3; text-align:center; } #accCard .acc-uinfo{ padding:12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(240,210,160,.24); margin-bottom:12px; } #accCard .acc-uinfo .u-name{ font-size:16px; font-weight:700; color:var(--gold2); margin-bottom:8px; text-align:center; } #accCard .acc-uinfo .u-row{ font-size:12.5px; color:var(--sub); line-height:1.9; display:flex; justify-content:space-between; gap:10px; } #accCard .acc-uinfo .u-row b{ color:#f7e8c8; font-weight:600; } #accCard .acc-acts{ display:flex; flex-direction:column; gap:9px; } #accCard .acc-acts button{ padding:11px; border-radius:10px; cursor:pointer; font-size:14px; letter-spacing:1px; border:1px solid rgba(240,210,160,.35); background:rgba(255,255,255,.05); color:var(--txt); } #accCard .acc-acts button:active{ background:rgba(255,255,255,.12); } #accCard .acc-acts button.danger{ color:#f3b0a0; border-color:rgba(184,69,46,.6); } /* ===== v499 章节跳转弹层（内测 · 后台总开关+账号白名单） ===== */ #jumpMask{ position:fixed; inset:0; z-index:205; display:none; align-items:center; justify-content:center; background:rgba(10,4,2,.74); } #jumpMask.on{ display:flex; } #jumpCard{ width:min(92vw,360px); max-height:76vh; overflow-y:auto; position:relative; background:linear-gradient(180deg,#241109,#1a0b05); border:1px solid rgba(255,190,120,.28); border-radius:16px; padding:18px 16px 14px; } #jumpCard h3{ margin:0 0 4px; font-size:17px; color:#f5d9a8; letter-spacing:2px; } .jump-sub{ font-size:11px; color:rgba(240,205,160,.55); margin-bottom:12px; line-height:1.6; } .jump-list{ display:flex; flex-direction:column; gap:8px; } .jump-list button{ text-align:left; padding:12px 13px; border-radius:10px; cursor:pointer; border:1px solid rgba(255,190,120,.3); background:rgba(255,255,255,.05); color:#ffe9c9; font-size:14px; letter-spacing:.5px; } .jump-list button:active{ background:rgba(255,255,255,.12); } .jump-list .jump-cur{ color:rgba(255,214,180,.5); font-size:11px; margin-left:6px; } #accCard .acc-note{ margin-top:12px; font-size:10.5px; color:rgba(203,186,156,.55); line-height:1.5; text-align:center; } /* ===== v492 说说问题弹层（复用账号面板磨砂金黑风格） ===== */ /* ===== v523 花街地图（T-20261016-002）：全屏地图页 ===== 热点＝div 绝对定位＋百分比坐标（内容台明令：勿用 /，尺寸写死缩放即错位） */ #hmap{ position:fixed; inset:0; z-index:210; display:none; background:#120a18; overflow:hidden; } #hmap.on{ display:block; } /* v523b：stage 用底图真实比例（3127x1340）撑出与图完全重合的盒子。 旧写法 #hmapImg 直接 inset:0 + contain，在 430x860 竖屏下图只渲染成 430x184 的中间条带，而热点百分比按 860 高算 ⇒ 热点整体错位。 */ #hmStage{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); width:100%; aspect-ratio:3127/1340; max-height:100%; } #hmapImg{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; } #hmap .hm-hot{ position:absolute; border:1px solid rgba(232,169,79,.55); border-radius:3px; background:rgba(232,169,79,.10); cursor:pointer; transition:background .18s, border-color .18s, box-shadow .18s; } #hmap .hm-hot:hover{ background:rgba(232,169,79,.30); border-color:#E8C88A; box-shadow:0 0 0 1px rgba(232,200,160,.55), 0 0 14px rgba(232,169,79,.42); } #hmap .hm-tip{ position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%); white-space:nowrap; background:rgba(26,16,38,.92); border:1px solid rgba(232,169,79,.42); border-radius:4px; padding:5px 10px; font-size:12px; color:#F0DCB4; letter-spacing:.5px; opacity:0; pointer-events:none; transition:opacity .18s; z-index:2; } #hmap .hm-hot:hover .hm-tip{ opacity:1; } #hmap .hm-tip b{ color:#E8C88A; font-weight:400; margin-right:6px; } #hmap .hm-tip i{ font-style:normal; color:rgba(240,220,180,.72); font-size:11px; } #hmap .hm-hot.locked{ border-color:rgba(150,140,130,.32); background:rgba(120,110,100,.08); cursor:default; } #hmap .hm-hot.locked:hover{ background:rgba(120,110,100,.08); border-color:rgba(150,140,130,.32); box-shadow:none; } #hmap .hm-hot.locked:hover .hm-tip{ opacity:1; } #hmap .hm-tip .soon{ color:rgba(220,200,180,.55); font-style:normal; } #hmap .hm-hd{ position:absolute; left:0; right:0; top:0; padding:14px 0 10px; text-align:center; font-family:'PlateKai',"Kaiti SC","STKaiti","KaiTi",serif; font-size:17px; color:#E8C88A; letter-spacing:5px; text-shadow:0 2px 8px rgba(0,0,0,.7); background:linear-gradient(180deg,rgba(18,10,24,.86),transparent); } #hmap .hm-back{ position:absolute; left:12px; top:12px; z-index:3; background:rgba(26,16,38,.8); border:1px solid rgba(232,169,79,.34); color:#F0DCB4; border-radius:4px; padding:6px 13px; font-size:12px; letter-spacing:1px; cursor:pointer; } #hmap .hm-back:active{ background:rgba(232,169,79,.24); } /* ===== v533 花街广场（卡 T-20261017-032 前置骨架）：灵魂光球场景 ===== #plzStage 用底图真实比例（335x595 裁黑边后）撑出与图完全重合的盒子， object-fit:fill 铺满 ⇒ 热点/光球按百分比定位才不会错位（同 v523b 信箱边教训）。 */ #plaza{ position:fixed; inset:0; z-index:180; display:none; background:#120a18; overflow:hidden; } #plaza.on{ display:block; } #plzStage{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); aspect-ratio:1620/2796; width:min(100%, calc(100vh * 1620 / 2796)); height:min(100%, calc(100vw * 2796 / 1620)); } /* v750：画幅三处全跟新图（1620×2796）。v749 只改 height 漏了 ratio/width ⇒ 底图被压扁 2.8% */ #plzImg{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; } /* v533m：前景拆双层（姐拍板遮挡关系）——光球只在绮罗榜布棚后被挡： backImg(14)=锦香楼/倚翠阁/花墙/钱庄/清清等 → 光球(15) → fore(16)=绮罗榜布棚（唯一遮挡物）； 热点 18 保证标签可点；两层均不接点击。 */ #plzBackImg{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; z-index:14; pointer-events:none; } #plzFore{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; z-index:16; pointer-events:none; } #plaza.loading #plzFore, #plaza.loading #plzBackImg{ display:none; } /* 底图未就绪前不出前景（防黑底浮楼） */ #plzStage::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(18,10,24,.34), transparent 20%, transparent 60%, rgba(18,10,24,.52)); } /* ===== v571（卡 T-042）：光球重做——是「光团」，不是「灯泡」===== 命门：径向渐变边缘必须收到全透明（96%）。差这一步就是一颗黄实心球。 三件套：外晕（体积）＋灵光锥（悬浮）＋地面光斑（接地）。 呼吸只碰 transform / opacity，绝不碰 width / height / top（红线 6）。 ⚠️ 呼吸动画写在子元素上：外层 #plzOrb 的 transform 要留给点击脉冲（plzOrbTap 的 WAAPI）， 两者抢同一个属性的话，一点球整团就跳到右下角。 */ /* 尺寸全部走 --orb（JS 按舞台宽算出来，基准 22.7px @375 宽；v572 缩到原来的 2/3）—— 写 vw 会在带信箱边的舞台上偏心：vw 是视口宽，舞台可能比视口窄。 */ #plzOrb{ position:absolute; width:var(--orb,34px); height:var(--orb,34px); z-index:15; left:50%; top:84%; margin:calc(var(--orb,34px) / -2) 0 0 calc(var(--orb,34px) / -2); /* 锚点＝球心 */ cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; background:none; box-shadow:none; animation:none; } #plzOrb .or-halo{ position:absolute; left:50%; top:50%; width:calc(var(--orb,34px) * 6.47); height:calc(var(--orb,34px) * 6.47); /* 220px 外晕 */ margin:calc(var(--orb,34px) * -3.235) 0 0 calc(var(--orb,34px) * -3.235); border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(255,214,140,.20) 0%, rgba(255,200,125,.12) 22%, rgba(255,180,90,.05) 46%, transparent 70%); animation:plzHalo 3.6s ease-in-out infinite; } #plzOrb .or-shoe{ position:absolute; left:50%; top:50%; width:calc(var(--orb,34px) * 2.82); height:calc(var(--orb,34px) * .765); /* 96×26 地面光斑 */ margin:calc(var(--orb,34px) * .44) 0 0 calc(var(--orb,34px) * -1.41); /* 中心落在球心下方 28px */ border-radius:50%; pointer-events:none; background:radial-gradient(ellipse at center, rgba(255,242,206,.72) 0%, rgba(255,214,140,.42) 32%, rgba(214,150,74,.20) 58%, rgba(150,100,45,.07) 74%, transparent 88%); filter:blur(2px); animation:plzShoe 3.6s ease-in-out infinite; } /* v572：灵光锥（那根光柱）按姐「直接不要」删掉了。 理由：球缩到 2/3、名字又压到球上之后，光柱会跟字抢视线，而且球离地只有 约 19px，往上那 150px 只是一团浮着的雾，不如外晕+地面光斑干净。 要恢复：把本段样式、@keyframes plzCone、HTML 里的 一起加回来， 参数见 _bak/v571（v571 那份是完整的）。 */ /* v578（姐 10-20）：球色要真的跟着「我 · 颜色」变。 病根：plzPaint 一直在设 --c，但 .or-core 的渐变是写死的金色 ⇒ CSS 根本没人读它， 选了色球一点不变（静态门禁只查「--c 被设了」，所以一直绿 —— 又一个「静态绿 ≠ 功能可用」）。 现在整套色阶走变量，由 plzOrbTint(el,hex) 按玩家选的色算出来： --c 46% 主色（球的本体色） --c-hi 26% 浅档（往白里掺 60%） --c-mid 66% .55 透明档 --c-lit 82% .18 透明档 --c-zero 96% 边缘收全透明（命门，差这一步就是一颗实心球） --c-glow / --c-glow2 贴球的晕光 默认值 = 改造前那颗暖金球，一个像素都不动（画风锁）。变量挂在 #plzStage 上， 自己球和别人的球一起继承；没选过色的球不设内联 ⇒ 自动落回这套默认。 */ #plzStage{ --c:#ffd98f; --c-hi:#fff2cb; --c-mid:rgba(255,190,95,.55); --c-lit:rgba(255,165,65,.18); --c-zero:rgba(255,150,50,0); --c-glow:rgba(255,214,140,.35); --c-glow2:rgba(255,170,70,.16); } #plzOrb .or-core{ position:absolute; inset:0; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 44% 40%, #ffffff 0%, #fffdf2 12%, var(--c-hi,#fff2cb) 26%, var(--c,#ffd98f) 46%, var(--c-mid,rgba(255,190,95,.55)) 66%, var(--c-lit,rgba(255,165,65,.18)) 82%, var(--c-zero,rgba(255,150,50,0)) 96%); box-shadow:0 0 6px 2px rgba(255,246,215,.60), 0 0 18px 6px var(--c-glow,rgba(255,214,140,.35)), 0 0 44px 16px var(--c-glow2,rgba(255,170,70,.16)); animation:plzBreath 3.6s ease-in-out infinite; } /* v574：名字挂在球「上方」（姐 10-19 晚定稿，参照街景截图），不再压在白芯上。 球上方是街头背景（明暗不定）⇒ 用白字 + 深色描边阴影，和 .plz-peer .n 同一套写法。 bottom:100% 锚在球顶、margin-bottom 留 2px 缝；拖球时自动跟着走。 pointer-events:none —— 名字不能挡住球的拖拽。 */ #plzOrbName{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); /* v578（姐 10-20）：呼吸是 .or-core 的 scale(1.13)+translateY(-3px)，球顶会往上探约 4.5px （@375 球径 22.7px）⇒ 原来 2px 的缝根本不够，名字被球压住。留 --orb * .40（≈9px）。 */ margin-bottom:calc(var(--orb, 34px) * .40); white-space:nowrap; pointer-events:none; font-weight:700; line-height:1; font-size:calc(var(--orb,34px) * .48); letter-spacing:.4px; color:#fff; text-shadow:0 0 4px rgba(24,14,6,.90), 0 1px 3px rgba(18,10,4,.95), 0 0 10px rgba(255,214,140,.30); } /* ===== v583（积分商店返修）：名牌真的戴得上了 ===== 一块底片 + 一圈金边；流光再加一道 4s 循环的扫光。 只碰 transform / opacity（红线 ⑥），不用 mask / @property（老 XWEB 不稳）—— 最差退化成一款静止金牌，名字依旧清楚。 */ .plz-name-tag{ position:relative; display:inline-block; padding:2px 9px; border-radius:999px; background:linear-gradient(180deg, rgba(30,19,8,.78), rgba(16,10,4,.78)); } .plz-name-tag.tg-gold{ box-shadow:0 0 0 1px rgba(242,203,124,.88), 0 0 10px rgba(255,206,120,.34); } @keyframes plzTagFlow{ 0%{ transform:translateX(-140%); } 100%{ transform:translateX(260%); } } .plz-name-tag.tg-flow{ overflow:hidden; box-shadow:0 0 0 1px rgba(242,203,124,.70), 0 0 12px rgba(255,206,120,.28); } .plz-name-tag.tg-flow::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:38%; border-radius:999px; pointer-events:none; background:linear-gradient(100deg, rgba(255,228,160,0) 0%, rgba(255,244,214,.88) 50%, rgba(255,228,160,0) 100%); animation:plzTagFlow 4s linear infinite; } /* 别人球也戴同一款：.n 本来是 absolute，别被 .plz-name-tag 的 relative 抢走定位 */ .plz-peer .n.plz-name-tag{ position:absolute; padding:2px 8px; } @keyframes plzBreath{ 0%,100%{ transform:scale(1) translateY(0); } 50%{ transform:scale(1.13) translateY(-3px); } } @keyframes plzHalo{ 0%,100%{ transform:scale(1); opacity:.70; } 50%{ transform:scale(1.18); opacity:1; } } @keyframes plzShoe{ 0%,100%{ opacity:.75; transform:scale(1); } 50%{ opacity:1; transform:scale(1.1); } } #plzOrb.fly{ transition:left .7s linear, top .7s linear; } /* v590：匀速——缓动会让每段都各自加速再刹车，看着忽快忽慢 */ /* v573（T-036 ①）：喊话气泡——挂在球（或别人球）内部，bottom:100% 自动跟着球走， 拖球、呼吸、脉冲都不用额外同步。飘 6 秒淡去。 */ .plz-saybub{ position:absolute; left:50%; bottom:calc(100% + var(--orb, 34px) * .88 + 4px); transform:translate(-50%,-2px) scale(.94); /* v578：名字抬到 .40 后气泡跟着抬 —— .40 缝 + .48 字高 + 4px 空 */ max-width:150px; padding:5px 9px; border-radius:10px; background:rgba(26,18,12,.88); color:#ffeacb; font-size:12px; line-height:1.35; white-space:pre-wrap; word-break:break-word; border:1px solid rgba(255,209,128,.45); box-shadow:0 4px 14px rgba(0,0,0,.35); pointer-events:none; opacity:0; transition:opacity .22s ease, transform .22s ease; z-index:19; } .plz-saybub.on{ opacity:1; transform:translate(-50%,-8px) scale(1); } /* v573（T-036 ④）：全服 tab 的号角栏 */ .plz-hornbar{ display:flex; align-items:center; gap:8px; padding:8px 12px 0; } .plz-hornbar .hc{ font-size:12px; color:#ffd98f; letter-spacing:.5px; } .plz-hornbar .hb{ margin-left:auto; font-size:12px; padding:4px 10px; border-radius:9px; border:1px solid rgba(255,209,128,.5); background:rgba(255,209,128,.12); color:#ffe2a6; cursor:pointer; } /* v573：一键清屏（免费，人人可用） */ .plz-inbar .ib.clr{ font-size:13px; opacity:.8; } /* v571：粒子层——全场景唯一一块 canvas（红线 1），楼内不渲染（红线 7） */ #plzDust{ position:absolute; inset:0; width:100%; height:100%; z-index:17; pointer-events:none; display:none; } /* v554：别人球——同尺寸同呼吸，pointer-events:none 不挡自己的拖拽 */ .plz-peer{ position:absolute; width:var(--orb,34px); height:var(--orb,34px); z-index:15; margin:calc(var(--orb,34px) / -2) 0 0 calc(var(--orb,34px) / -2); pointer-events:auto; cursor:pointer; transition:left .7s cubic-bezier(.3,.7,.3,1), top .7s cubic-bezier(.3,.7,.3,1); } /* v578：别人球同款色阶（plzPeersPaint 按对方上报的颜色调 plzOrbTint） */ .plz-peer .o{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 44% 40%, #ffffff 0%, #fffdf2 12%, var(--c-hi,#fff2cb) 26%, var(--c,#ffd98f) 46%, var(--c-mid,rgba(255,190,95,.55)) 66%, var(--c-lit,rgba(255,165,65,.18)) 82%, var(--c-zero,rgba(255,150,50,0)) 96%); box-shadow:0 0 6px 2px rgba(255,246,215,.60), 0 0 18px 6px var(--c-glow,rgba(255,214,140,.35)); animation:plzBreath 3.6s ease-in-out infinite; } .plz-peer .n{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:calc(var(--orb, 34px) * .40); white-space:nowrap; font-size:calc(var(--orb,34px) * .48); color:#fff; text-shadow:0 0 4px rgba(24,14,6,.90), 0 1px 3px rgba(18,10,4,.95); letter-spacing:.4px; } /* v619（10-22）私信：点别人的光球 → 信息卡 + 一对一留言。一条没回不能再发。 */ .plz-ava{ position:relative; } .plz-ava-badge{ position:absolute; top:-5px; right:-5px; min-width:15px; height:15px; line-height:15px; padding:0 3px; box-sizing:border-box; border-radius:9px; background:#e0514a; color:#fff; font-size:10px; font-style:normal; font-weight:700; text-align:center; display:none; } .plz-ava-badge.on{ display:block; } .plz-dm-strip{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 11px; margin:0 0 8px; border:1px solid rgba(232,169,79,.28); border-radius:11px; background:rgba(255,255,255,.03); } .plz-dm-dot{ width:16px; height:16px; border-radius:50%; flex:0 0 auto; background:radial-gradient(circle at 44% 40%, #fff 0%, #fffdf2 12%, var(--c-hi,#fff2cb) 26%, var(--c,#ffd98f) 46%, var(--c-mid,rgba(255,190,95,.55)) 66%, var(--c-lit,rgba(255,165,65,.18)) 82%, var(--c-zero,rgba(255,150,50,0)) 96%); box-shadow:0 0 6px 2px rgba(255,246,215,.55), 0 0 12px 3px var(--c-glow,rgba(255,214,140,.3)); } .plz-dm-strip .chip{ font-size:11.5px; color:var(--sub); padding:2px 8px; border:1px solid rgba(232,169,79,.35); border-radius:10px; background:rgba(232,169,79,.08); border:none; } .plz-dm-strip .chip.act{ color:var(--gold); cursor:pointer; } .plz-dm-note{ margin:0 0 8px; padding:7px 11px; font-size:12px; color:#f0a399; border:1px solid rgba(240,163,153,.35); border-radius:9px; background:rgba(240,163,153,.08); } .plz-dm-wait{ color:var(--sub); font-size:12px; justify-content:center; } .plz-dm-list{ display:flex; flex-direction:column; gap:8px; } .plz-dm-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; border:1px solid rgba(232,169,79,.26); border-radius:12px; background:rgba(255,255,255,.03); } .plz-dm-row:hover{ background:rgba(232,169,79,.08); } .plz-dm-row .bd{ flex:1; min-width:0; } .plz-dm-row .who{ font-size:13px; color:var(--txt); } .plz-dm-row .who .no{ font-size:11px; color:var(--sub); margin-left:4px; } .plz-dm-row .who .tg{ font-size:10px; color:var(--gold); border:1px solid rgba(232,169,79,.4); border-radius:8px; padding:0 5px; margin-left:4px; } .plz-dm-row .txt{ font-size:12px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .plz-dm-row .r{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .plz-dm-row .unread{ min-width:17px; height:17px; line-height:17px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:#e0514a; color:#fff; font-size:10px; text-align:center; font-weight:700; } .plz-dm-row .togo{ font-size:10px; color:#8fd6a0; } .plz-dm-row .wait{ font-size:10px; color:var(--sub); } /* 热点：走近才亮 */ .plz-hot{ position:absolute; z-index:18; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; display:flex; align-items:flex-end; justify-content:center; } /* v591（姐 10-20 晚）：名字不再挂在热点圆的**下沿**。原来 flex-end 贴底，玩家看见的是 「名字在人物脚下」，就以为东西长在名字那儿，球还没真到人跟前就弹窗了。 现在名字单独成层 #plzLbl，落点**读 PLZ_HL 的真实外框顶部**：人＝头顶上方、楼＝楼顶上方。 亮片图本身带约 24px 透明余量，所以直接用外框顶边就是「刚好在上方一点」。 纯显示（pointer-events:none），不挡球、不抢点击。 */ #plzLbl{ position:absolute; inset:0; z-index:19; pointer-events:none; } #plzLbl .plz-lbl{ position:absolute; font-size:11px; color:#fff; background:rgba(20,12,6,.66); border:1px solid rgba(232,169,79,.5); padding:2px 8px; border-radius:14px; letter-spacing:1px; white-space:nowrap; opacity:0; transform:translate(-50%,calc(-100% + 6px)); transition:.25s; } #plzLbl .plz-lbl.lit{ opacity:1; transform:translate(-50%,-100%); } /* v589（姐 10-20）：不再拿一个圆圈表示「已激活」——改成给激活的那栋楼／那个人本身描一道亮边。 亮片是烘焙好的透明图（q_hl_.webp），贴在该对象在舞台上的真实位置，走近整片淡入。 运行时零 canvas、零滤镜，只有 opacity 过渡；层高压在遮挡图之上——榜板／钱庄／茶楼本身也要能亮。 */ #plzHl{ position:absolute; inset:0; z-index:17; pointer-events:none; } /* v754：场景元素描边层——杏花巷月门（圆门轮廓）沉到书生立绘(z15)之下，圆门轮廓不被书生身体挡住 */ #plzHlScene{ position:absolute; inset:0; z-index:14; pointer-events:none; } #plzHl .plz-hl, #plzHlScene .plz-hl{ position:absolute; left:0; top:0; width:0; height:0; opacity:0; background-repeat:no-repeat; background-size:100% 100%; transition:opacity .22s ease; } #plzHl .plz-hl.on, #plzHlScene .plz-hl.on{ opacity:1; } /* v570（T-050）：创世百花热点上的「审核结果没看过」红点——8px，纯提示，不挡点击 */ .plz-hot .plz-notice-dot{ position:absolute; right:2px; top:2px; width:8px; height:8px; border-radius:50%; background:#E4573D; box-shadow:0 0 0 2px rgba(20,12,6,.72), 0 0 9px rgba(228,87,61,.85); display:none; pointer-events:none; } .plz-hot.has-notice .plz-notice-dot{ display:block; } /* v629（2026-10-23 新玩家流失诊断）：新手引导三件套 —— ① 楼前莺儿的名字牌在「还没跟她说过话」时常显、带💬、呼吸发光（原来要到跟前才亮，等于没有）； ② 「去找莺儿」时让她的亮片呼吸两下（球已经走过去了，再给一眼确认）； ③ 首屏那句雾字改成指路。全部只碰 opacity/box-shadow，不加层、不改坐标。 */ #plzLbl .plz-lbl.guide{ opacity:1; transform:translate(-50%,-100%); border-color:rgba(232,169,79,.95); color:#fff3d8; animation:plzLblGuide 1.6s ease-in-out infinite; } @keyframes plzLblGuide{ 0%,100%{ box-shadow:0 0 6px rgba(232,169,79,.30); } 50%{ box-shadow:0 0 16px rgba(232,169,79,.90); } } #plzHl .plz-hl.breathe, #plzHlScene .plz-hl.breathe{ animation:plzHlBreath .60s ease-in-out 4; } @keyframes plzHlBreath{ 0%,100%{ opacity:1; } 50%{ opacity:.22; } } #plzVeil .vl b{ color:#fff3d8; } #cover .cv-skip{ margin-top:7px; font-size:10.5px; line-height:1.65; color:rgba(232,200,160,.58); text-align:left; } #cover .cv-skip b{ color:rgba(232,169,79,.92); font-weight:600; } /* v570（T-050）：审核结果弹窗——登录时按三态弹一次 */ #qFaceNotice{ position:fixed; inset:0; z-index:260; display:none; align-items:center; justify-content:center; background:rgba(8,5,2,.72); padding:24px; } #qFaceNotice.on{ display:flex; } #qFaceNotice .qfn-card{ width:100%; max-width:320px; background:linear-gradient(180deg,#241708,#170e04); border:1px solid rgba(232,169,79,.55); border-radius:14px; padding:22px 20px 18px; color:var(--txt); box-shadow:0 18px 50px rgba(0,0,0,.6); text-align:center; } #qFaceNotice .qfn-t{ font-size:16px; color:var(--gold); letter-spacing:1px; margin-bottom:12px; } #qFaceNotice .qfn-b{ font-size:13px; line-height:1.9; } #qFaceNotice .qfn-b b{ color:var(--gold); } #qFaceNotice .qfn-ok{ margin-top:18px; width:100%; padding:11px 0; border-radius:10px; cursor:pointer; border:1px solid rgba(232,169,79,.6); background:linear-gradient(180deg,#E8A94F,#C9893A); color:#241405; font-family:inherit; font-size:14px; letter-spacing:2px; } /* HUD 顶栏 / 右侧竖排 / 底栏（全屏层） */ .plz-hud{ position:absolute; top:0; left:0; right:0; height:48px; z-index:20; pointer-events:none; display:flex; align-items:center; padding:0 12px; gap:8px; background:linear-gradient(180deg, rgba(15,9,4,.6), transparent); font-size:12px; } .plz-badge{ display:flex; align-items:center; gap:6px; pointer-events:auto; background:rgba(20,13,6,.55); border:1px solid rgba(232,169,79,.4); padding:4px 10px; border-radius:20px; cursor:pointer; color:var(--txt); font-family:inherit; font-size:12px; } .plz-badge .plz-dot{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 8px 2px rgba(255,255,255,.35); } .plz-hud .plz-loc{ flex:1; text-align:center; color:var(--gold); letter-spacing:2px; text-shadow:0 1px 4px #000; } .plz-hud .plz-cur{ pointer-events:auto; background:rgba(20,13,6,.55); border:1px solid rgba(232,169,79,.3); padding:4px 9px; border-radius:20px; cursor:pointer; color:var(--txt); font-family:inherit; font-size:12px; } .plz-rail{ position:absolute; left:8px; top:56px; z-index:20; pointer-events:none; display:flex; flex-direction:column; gap:10px; } .plz-rail button{ pointer-events:auto; width:38px; height:38px; border-radius:50%; border:1px solid rgba(232,169,79,.45); cursor:pointer; background:rgba(20,13,6,.6); color:var(--gold); font-size:15px; font-family:inherit; } .plz-ava{ pointer-events:auto; width:34px; height:34px; border-radius:50%; border:1px solid rgba(232,169,79,.45); cursor:pointer; background:rgba(20,13,6,.6); color:var(--gold); font-size:16px; font-family:inherit; display:flex; align-items:center; justify-content:center; } .plz-ava.on{ border-color:var(--gold); background:rgba(232,169,79,.2); } #plzAvaMenu{ position:absolute; top:48px; right:12px; z-index:40; width:212px; pointer-events:auto; display:none; background:linear-gradient(180deg, rgba(32,23,14,.97), rgba(24,17,9,.98)); border:1px solid rgba(232,169,79,.4); border-radius:14px; padding:6px; box-shadow:0 18px 50px rgba(0,0,0,.6); flex-direction:column; gap:2px; } #plzAvaMenu.on{ display:flex; } .pa-user{ display:flex; align-items:center; gap:9px; padding:10px 8px; border-bottom:1px solid rgba(232,169,79,.16); margin-bottom:4px; } .pa-user .pa-dot{ width:28px; height:28px; border-radius:50%; box-shadow:0 0 8px 2px rgba(255,255,255,.3); } .pa-user .pa-name{ font-size:13px; color:var(--gold); font-weight:600; } .pa-user .pa-sub{ font-size:10px; color:var(--sub); } .pa-menu{ display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:9px; cursor:pointer; font-size:13px; color:var(--txt); border:none; background:none; font-family:inherit; text-align:left; } .pa-menu:hover{ background:rgba(232,169,79,.1); } .pa-menu .mi{ width:20px; text-align:center; flex:0 0 auto; } .pa-menu .mv{ margin-left:auto; font-size:11px; color:var(--sub); white-space:nowrap; } .pa-menu.danger{ color:#f0a399; } .pa-sep{ height:1px; background:rgba(232,169,79,.14); margin:4px 2px; } .plz-nav{ position:absolute; bottom:0; left:0; right:0; height:56px; z-index:20; pointer-events:none; display:flex; align-items:center; justify-content:space-between; padding:0 26px; box-sizing:border-box; gap:14px; background:linear-gradient(0deg, rgba(15,9,4,.72), transparent); font-size:12px; } /* v565：花街图入口下线，左右两段分开 */ .plz-nav .plz-seg{ color:#5f563f; letter-spacing:1px; } .plz-nav .plz-seg .soon{ color:rgba(220,200,180,.55); font-style:normal; letter-spacing:0; } .plz-nav .plz-cur{ pointer-events:auto; color:var(--gold); letter-spacing:2px; text-shadow:0 1px 6px #000; border:1px solid rgba(232,169,79,.45); padding:5px 16px; border-radius:20px; background:rgba(20,13,6,.5); } /* 跟随气泡（对话用 · 不占屏 · 姐 17:35 定） */ #plzBub{ position:absolute; z-index:28; width:72%; display:none; background:linear-gradient(180deg, rgba(32,23,14,.97), rgba(24,17,9,.98)); border:1px solid rgba(232,169,79,.6); border-radius:14px; padding:9px 11px 10px; box-shadow:0 12px 34px rgba(0,0,0,.65); } #plzBub.on{ display:block; animation:plzBubIn .28s ease-out; } @keyframes plzBubIn{ from{ opacity:0; } to{ opacity:1; } } /* v536：只淡入不动 transform，避免覆盖内联 translate 定位造成错位闪现 */ #plzBub::after{ content:""; position:absolute; left:var(--tail,50%); bottom:-9px; transform:translateX(-50%); border:9px solid transparent; border-top-color:rgba(232,169,79,.6); border-bottom:0; } #plzBub.flip::after{ bottom:auto; top:-9px; border-top:0; border-bottom:9px solid transparent; border-bottom-color:rgba(232,169,79,.6); } #plzBub .plz-bh{ display:flex; align-items:center; gap:7px; margin-bottom:5px; } #plzBub .plz-bh .a{ width:24px; height:24px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:13px; border:1px solid rgba(232,169,79,.55); } #plzBub .plz-bh .n{ font-size:12px; color:var(--gold); letter-spacing:1px; } #plzBub .plz-bh .r{ font-size:10px; color:var(--sub); } #plzBub .plz-bh .x{ margin-left:auto; width:24px; height:24px; border-radius:50%; border:1px solid rgba(232,169,79,.4); background:none; color:var(--sub); cursor:pointer; font-size:12px; line-height:1; padding:0; flex:0 0 auto; font-family:inherit; } #plzBub .plz-bt{ font-size:13px; line-height:1.75; max-height:96px; overflow:hidden; position:relative; color:var(--txt); } /* v542e：正文页化——超 4 行不上下滑，左右滑页＋左右触之即显箭头（姐 10-18 拍板） */ #plzBub .plz-bt .pgs{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; max-height:96px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } #plzBub .plz-bt .pgs::-webkit-scrollbar{ display:none; } #plzBub .plz-bt .pg{ flex:0 0 100%; min-width:100%; scroll-snap-align:start; align-self:flex-start; } #plzBub .pgnav{ position:absolute; top:44%; margin-top:-11px; width:22px; height:22px; border-radius:50%; border:1px solid rgba(232,169,79,.55); background:rgba(24,17,9,.88); color:var(--gold2); font-size:13px; line-height:1; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:3; padding:0; opacity:.78; font-family:inherit; } #plzBub .pgnav:active{ opacity:1; } #plzBub .pgnav.show{ display:flex; } #plzBub .pgnav.l{ left:-7px; } #plzBub .pgnav.r{ right:-7px; } /* v542e：右上角放大钮（scale 2 ⇄ 缩回） */ #plzBub .plz-bh .z{ margin-left:auto; width:24px; height:24px; border-radius:50%; border:1px solid rgba(232,169,79,.4); background:none; color:var(--sub); cursor:pointer; font-size:12px; line-height:1; padding:0; flex:0 0 auto; font-family:inherit; } #plzBub .plz-bh .x{ margin-left:0; } #plzBub .plz-bt[data-more]{ cursor:pointer; } /* v536：还有下一段时正文可轻触翻页 */ #plzBub .plz-bt .sys{ color:var(--sub); font-size:11px; margin-top:5px; } #plzBub .plz-bt b{ color:var(--gold2); font-weight:600; } #plzBub .plz-ba{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; } #plzBub .plz-ba button{ flex:1 1 auto; min-width:64px; font-size:11px; padding:6px 8px; border-radius:14px; border:1px solid rgba(232,169,79,.5); background:rgba(232,169,79,.08); color:var(--txt); cursor:pointer; font-family:inherit; letter-spacing:1px; } #plzBub .plz-ba button.star{ border-color:var(--red); background:rgba(184,69,46,.2); color:#f3cfc8; } /* v538：广场 NPC 输入文字对话——气泡输入框 + 对话流 */ #plzBub .plz-inp{ display:flex; gap:6px; margin-top:7px; align-items:center; } #plzBub .plz-inp input{ flex:1; min-width:0; padding:7px 11px; border-radius:14px; border:1px solid rgba(232,169,79,.45); background:rgba(0,0,0,.34); color:var(--txt); font-size:12px; font-family:inherit; outline:none; } #plzBub .plz-inp input:focus{ border-color:var(--gold); } #plzBub .plz-inp .go{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid rgba(232,169,79,.45); background:rgba(232,169,79,.12); color:var(--gold); font-size:14px; cursor:pointer; padding:0; font-family:inherit; } #plzBub .plz-say{ font-size:12.5px; line-height:1.7; margin:2px 0; word-break:break-word; } #plzBub .plz-say.me{ color:#f3cfc8; } #plzBub .plz-say.npc{ color:var(--txt); } #plzBub .plz-say.dim{ color:var(--sub); font-style:italic; } #plzBub .plz-bt[data-chat="1"]{ max-height:150px; } /* ===== v561（姐 2026-10-19 截图）：气泡两态 ===== ⚠️ 旧版「放大」是 transform scale(2)：气泡本身宽 72%，乘 2 就是 144%， transform-origin 在 50% ⇒ 左右各溢出 22% 被屏幕裁掉，正文读不了。 改法：放大不缩放盒子，改成「居中可读大窗」——只调宽高字号，不再 scale。 */ /* ===== v585（姐 2026-10-20 深夜）：放大＝「空间变大」，不是「字变大」===== ⚠️ 上一版把正文 13px 放大到 15px（头像 16 / 名字 14 / 输入框 14 / 按钮 13 一起放大）， 框是大了，但字也跟着大 —— 净下来能多看的行数几乎为零。姐的比喻很直白： 记事本窗口拉大，字号还是 100%，所以看得见更多字。 这一版：#plzBub.zoomed 里**一个字都不许放大**，只把盒子撑大，正文按真实高度重新分页。 */ #plzBub.zoomed{ left:50% !important; top:50% !important; width:94% !important; height:62% !important; transform:translate(-50%,-50%) !important; max-height:78%; overflow:hidden; display:flex; flex-direction:column; padding:12px 14px 13px; z-index:60; box-shadow:0 18px 50px rgba(0,0,0,.8); } #plzBub.zoomed::after{ display:none; } /* 正文吃满剩下的高度（flex 才能量出「能放多少」）；字号、行高一格不动 */ #plzBub.zoomed .plz-bt{ flex:1 1 auto; min-height:0; max-height:none; overflow:hidden; font-size:13px; line-height:1.75; } #plzBub.zoomed .plz-bt .pgs{ max-height:100%; } /* v585b：页按内容长高（flex-start），高度靠分页卡在正文区内； 不要 overflow:auto —— 一页内部再能滚，就等于「框大了但要自己扒」，等于没放大 */ #plzBub.zoomed .plz-bt .pg{ align-self:flex-start; } #plzBub.zoomed .plz-bh, #plzBub.zoomed .plz-inp, #plzBub.zoomed .plz-ba{ flex:0 0 auto; } /* 键盘弹起：气泡钉在 HUD 下方、高度按可视区算，正文自己滚——不再跟着整页被顶出屏幕 */ #plzBub.kb{ left:50% !important; width:90% !important; top:58px !important; transform:translateX(-50%) !important; max-height:var(--kbh,60vh); overflow-y:auto; z-index:60; } #plzBub.kb::after{ display:none; } #plzBub.kb .plz-bt{ max-height:none; } #plzBub.kb .plz-bt .pgs{ max-height:none; } /* 底部弹层（场所/面板类） */ #plzSheet{ position:absolute; left:0; right:0; bottom:0; z-index:46; height:56%; /* v576：原 30 被 #plzRoom(40) 压住，房间开着时弹层按钮点不动 */ background:linear-gradient(180deg, rgba(26,19,11,.94), rgba(34,25,14,.96)); border-top:1px solid rgba(232,169,79,.45); border-radius:20px 20px 0 0; transform:translateY(103%); transition:transform .38s cubic-bezier(.32,.72,.28,1); display:flex; flex-direction:column; box-shadow:0 -18px 50px rgba(0,0,0,.6); } #plzSheet.open{ transform:translateY(0); } #plzSheet.full{ height:88%; } .plz-grab{ width:42px; height:4px; border-radius:4px; background:rgba(232,169,79,.4); margin:9px auto 2px; flex:0 0 auto; } #plzSheetInner{ flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; } .plz-p-head{ display:flex; align-items:center; gap:11px; padding:8px 18px 10px; border-bottom:1px solid rgba(232,169,79,.18); flex:0 0 auto; } .plz-p-head .ava{ width:44px; height:44px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:20px; border:1px solid rgba(232,169,79,.55); background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.14), rgba(0,0,0,.25)); } .plz-p-head .nm{ font-size:15px; color:var(--gold); letter-spacing:1px; } .plz-p-head .rl{ font-size:11px; color:var(--sub); margin-top:2px; } .plz-p-head .x{ margin-left:6px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(232,169,79,.4); background:none; color:var(--sub); cursor:pointer; font-size:14px; flex:0 0 auto; font-family:inherit; } .plz-p-head .exp{ margin-left:auto; width:28px; height:28px; border-radius:50%; border:1px solid rgba(232,169,79,.4); background:none; color:var(--sub); cursor:pointer; font-size:13px; flex:0 0 auto; font-family:inherit; line-height:1; } .plz-p-head .exp.on{ color:var(--gold); border-color:var(--gold); } .plz-p-body{ flex:1; overflow-y:auto; padding:14px 18px; } .plz-p-body .line{ font-size:14px; line-height:1.95; margin:0 0 10px; color:var(--txt); } .plz-p-body .line b{ color:var(--gold2); font-weight:600; } .plz-p-body .sys{ color:var(--sub); font-size:12px; border-left:2px solid rgba(232,169,79,.4); padding-left:10px; margin:14px 0; line-height:1.7; } .plz-opts{ padding:6px 18px 18px; display:flex; flex-direction:column; gap:9px; flex:0 0 auto; } .plz-opts button{ padding:12px 14px; border-radius:12px; border:1px solid rgba(232,169,79,.45); cursor:pointer; text-align:center; background:rgba(232,169,79,.07); color:var(--txt); font-size:14px; font-family:inherit; letter-spacing:1px; } .plz-opts button.star{ border-color:var(--red); background:rgba(184,69,46,.16); color:#f3cfc8; } /* v593（T-20261020-001）：墙下走的入口按钮。⛔ 不能只挂 .star——那个类只在 .plz-opts 里有规则， 单独用会退化成浏览器默认白块（v557d「加载更多」踩过同一个坑）。金边、比换脸按钮更醒目。 */ /* v626：榜下走按钮并入同款——v597 只加了 HTML 没配 CSS，退化成浏览器默认白块 （v593 注释警告过的坑，v557d「加载更多」/v597 二踩）。两键共用一套暗金样式。 */ #plzWallWalk, #plzBangWalk{ display:block; width:100%; max-width:330px; margin:0 auto; padding:11px 0 12px; border-radius:15px; border:1px solid rgba(232,169,79,.55); background:rgba(232,169,79,.1); color:var(--gold2); font-family:inherit; font-size:13.5px; letter-spacing:2px; cursor:pointer; } #plzWallWalk:active, #plzBangWalk:active{ background:rgba(232,169,79,.22); } /* v594（姐 10-20 定）：点牌的详情——**不全屏**、不挡墙。 只框住立绘 + 一行信息，匾和墙照样看得见；⛔ 不做左右翻页： 点哪块是哪块，想看别人就先把那块拖到眼前。 */ /* v595（姐 10-20 定）：卡贴底会把人整个盖住（人站屏高 68%~94%，卡贴底占 47%~97%）。 改贴顶：卡只吃到上半屏约 51%，墙下那个人整截露着。 */ #pwCd{ position:fixed; inset:0; z-index:230; display:flex; align-items:flex-start; justify-content:center; padding-top:max(14px, env(safe-area-inset-top)); background:rgba(6,4,2,.26); animation:pwCdIn .16s ease both; } /* v596：选位提示条（挂 body，压在墙上面） */ #plzWallPickBar{ position:fixed; left:0; right:0; bottom:0; z-index:236; display:none; align-items:center; justify-content:center; gap:12px; padding:12px 14px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(10,7,4,0),rgba(10,7,4,.92) 42%); font-size:12.5px; color:rgba(255,226,190,.86); letter-spacing:1px; } #plzWallPickBar.on{ display:flex; } #plzWallPickBar button{ padding:6px 14px; border-radius:999px; font-family:inherit; font-size:12px; color:rgba(255,232,198,.8); border:1px solid rgba(232,169,79,.45); background:rgba(30,20,12,.7); } /* v596：挪牌子确认 */ #pwMoveAsk{ position:fixed; inset:0; z-index:238; display:flex; align-items:center; justify-content:center; background:rgba(6,4,2,.5); } #pwMoveAsk .mv-box{ width:min(76vw,300px); padding:18px 16px 14px; border-radius:15px; background:rgba(26,18,12,.97); border:1px solid rgba(232,169,79,.52); text-align:center; box-shadow:0 18px 46px rgba(0,0,0,.66); } #pwMoveAsk .mv-t{ font-size:14.5px; color:var(--gold2); letter-spacing:2px; } #pwMoveAsk .mv-s{ font-size:11.5px; color:#a2917a; margin-top:6px; } #pwMoveAsk .mv-b{ display:flex; gap:10px; justify-content:center; margin-top:16px; } #pwMoveAsk .mv-b button{ padding:8px 20px; border-radius:999px; font-family:inherit; font-size:13px; color:var(--sub); border:1px solid rgba(232,169,79,.4); background:transparent; } #pwMoveAsk .mv-b button.ok{ color:#2a1608; border-color:rgba(232,169,79,.8); background:linear-gradient(180deg,#f2d79f,#d9b073); } #pwCd .cd-box{ position:relative; width:min(72vw,290px); padding:9px; border-radius:15px; background:rgba(24,17,12,.95); border:1px solid rgba(232,169,79,.5); box-shadow:0 14px 40px rgba(0,0,0,.62); } #pwCd .cd-pic{ width:100%; aspect-ratio:3/4; max-height:44vh; border-radius:10px; overflow:hidden; border:1px solid rgba(232,169,79,.55); background:#120c09; } #pwCd .cd-pic img{ width:100%; height:100%; display:block; object-fit:cover; } #pwCd .cd-ft{ padding:9px 4px 2px; } #pwCd .cd-nm{ font-size:15px; color:var(--gold2); letter-spacing:2px; } #pwCd .cd-sub{ font-size:11.5px; color:#a2917a; margin-top:4px; letter-spacing:.4px; } #pwCd .cd-lk{ position:absolute; right:15px; bottom:56px; display:flex; align-items:center; gap:5px; padding:6px 12px; border-radius:20px; font-family:inherit; font-size:13px; cursor:pointer; border:1px solid rgba(255,140,170,.42); background:rgba(255,140,170,.1); color:#ffb3c1; } #pwCd .cd-lk.on{ background:rgba(255,140,170,.26); border-color:rgba(255,140,170,.85); box-shadow:0 0 12px rgba(255,140,170,.3); } #pwCd .cd-x{ position:absolute; right:-4px; top:-12px; width:30px; height:30px; border-radius:50%; border:1px solid rgba(232,169,79,.5); background:rgba(20,14,10,.94); color:#e8c98e; font-size:16px; line-height:1; font-family:inherit; cursor:pointer; } #pwCd .cd-join{ display:block; width:100%; margin-top:10px; padding:9px 0; border-radius:10px; border:1px solid rgba(184,69,46,.72); background:rgba(184,69,46,.2); color:#f3cfc8; font-family:inherit; font-size:13px; letter-spacing:2px; cursor:pointer; } #pwCd .cd-join:active{ background:rgba(184,69,46,.36); } /* v597：绮罗榜的卡——头像是方的（榜上记名次，不记日子），卡上就一个「捧她」 */ #pwCd.is-sq .cd-pic{ aspect-ratio:1/1; max-height:37vh; } #pwCd.is-sq .cd-pic .emo{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:44px; } #pwCd .cd-sup{ display:block; width:100%; margin-top:10px; padding:10px 0; border-radius:10px; border:1px solid rgba(255,140,170,.55); background:rgba(255,120,150,.16); color:#ffd9e2; font-family:inherit; font-size:13.5px; letter-spacing:1.4px; cursor:pointer; } #pwCd .cd-sup:active{ background:rgba(255,120,150,.30); } #pwCd .cd-sup.done{ border-color:rgba(180,170,155,.34); background:rgba(255,255,255,.04); color:#9d8f7c; } #plzBangMount{ position:fixed; inset:0; display:none; z-index:2; } @keyframes pwCdIn{ from{opacity:0} to{opacity:1} } /* 首次引导 veil + 转场 flash */ #plzVeil{ position:absolute; inset:0; z-index:50; background:rgba(10,6,3,.82); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; transition:opacity .6s; cursor:pointer; padding:0 30px; } #plzVeil.hide{ opacity:0; pointer-events:none; } #plzVeil .vl{ color:var(--gold); font-size:18px; letter-spacing:4px; line-height:2.4; } #plzVeil .vh{ color:var(--sub); font-size:12px; letter-spacing:1px; } #plzVeil .hand{ font-size:30px; animation:plzSwp 1.6s ease-in-out infinite; } @keyframes plzSwp{ 0%,100%{ transform:translateX(-14px); } 50%{ transform:translateX(14px); } } /* ===== v571（卡 T-042）：进楼转场——白光炸开＋推镜＋雾幕，1000ms 收工 ===== ⚠️ 推镜必须带 translate(-50%,-50%)：#plzStage 靠它居中，漏了这一半场景会跳到左上角。 亮度不用 filter:brightness（大面积 filter 每帧重绘，红线 6），靠白光的半透明径向渐变提亮。 */ #plzFxLayer{ position:fixed; inset:0; z-index:340; pointer-events:none; display:none; overflow:hidden; } #plzFxLayer.on{ display:block; } #plzFxWhite{ position:absolute; inset:0; opacity:0; transform:scale(.1); transform-origin:var(--fx,52%) var(--fy,38%); background:radial-gradient(circle at var(--fx,52%) var(--fy,38%), rgba(255,250,232,1) 0%, rgba(255,238,196,.92) 14%, rgba(255,214,150,.55) 30%, rgba(255,190,110,.16) 50%, transparent 72%); } #plzFxWhite.go{ opacity:1; transform:scale(4.2); transition:transform .62s cubic-bezier(.2,.7,.25,1), opacity .26s ease-out; } #plzFxWhite.out{ opacity:0; transform:scale(4.6); transition:transform .5s ease-out, opacity .5s ease-out; } #plzFxFog{ position:absolute; inset:-20% -40%; opacity:0; transform:translateX(-130%) skewX(-6deg); background:linear-gradient(100deg, transparent 0%, rgba(255,248,232,.06) 22%, rgba(255,250,238,.55) 46%, rgba(255,244,222,.12) 64%, transparent 84%); } #plzFxFog.go{ animation:plzFogSweep .76s cubic-bezier(.3,.1,.2,1) .1s both; } @keyframes plzFogSweep{ 0%{ opacity:0; transform:translateX(-130%) skewX(-6deg); } 18%{ opacity:1; } 82%{ opacity:1; } 100%{ opacity:0; transform:translateX(130%) skewX(-6deg); } } #plzFxWord{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .4s .3s; } #plzFxWord span{ color:#3a2a12; font-family:'PlateKai',"Kaiti SC","STKaiti","KaiTi",serif; font-size:17px; letter-spacing:3px; line-height:2.2; text-align:center; } #plzFxWord.go{ opacity:1; } #plaza.fx-push #plzStage{ transform:translate(-50%,-50%) scale(1.22); transition:transform .62s cubic-bezier(.4,0,.2,1); } #plaza.fx-pull #plzStage{ transform:translate(-50%,-50%) scale(1); transition:transform .8s cubic-bezier(.4,0,.2,1); } #plaza.fx-out-prep #plzStage{ transform:translate(-50%,-50%) scale(1.22); transition:none; } /* v534：全屏子界面（绮罗榜/创世百花/钱庄/茶楼/货架）——场所「进入」+货郎「看货架」落地 */ #plzRoom{ position:absolute; inset:0; z-index:40; background:#120a18; display:none; flex-direction:column; } #plzRoom.on{ display:flex; animation:plzRoomIn .3s ease; } @keyframes plzRoomIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } .plz-room-head{ display:flex; align-items:center; gap:11px; padding:12px 14px 10px; border-bottom:1px solid rgba(232,169,79,.22); background:linear-gradient(180deg, rgba(15,9,4,.72), rgba(15,9,4,.16)); flex:0 0 auto; } .plz-room-head .back{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(232,169,79,.45); background:rgba(20,13,6,.55); color:var(--gold); font-size:18px; cursor:pointer; flex:0 0 auto; font-family:inherit; line-height:1; } .plz-room-head .t{ flex:1; min-width:0; } .plz-room-head .nm{ font-size:16px; color:var(--gold); letter-spacing:2px; } .plz-room-head .sub{ font-size:11px; color:var(--sub); margin-top:2px; letter-spacing:1px; } .plz-room-body{ flex:1; overflow-y:auto; padding:14px 16px 20px; } /* v554：聊天输入框常驻底部——inbar 从 body 抽出，独立固定栏；:empty 时非聊天房间自动收起 */ .plz-room-inbar{ flex:0 0 auto; padding:10px 14px 12px; border-top:1px solid rgba(232,169,79,.18); background:rgba(0,0,0,.28); } .plz-room-inbar:empty{ display:none; } /* v546：广场换脸挂牌——底片选择器 + 换脸流程（全屏，盖在 plzRoom 之上） */ #plzFace{ position:absolute; inset:0; z-index:48; background:#120a18; display:none; flex-direction:column; } #plzFace.on{ display:flex; animation:plzRoomIn .3s ease; } .plz-face-head{ display:flex; align-items:center; gap:11px; padding:12px 14px 10px; border-bottom:1px solid rgba(232,169,79,.22); background:linear-gradient(180deg, rgba(15,9,4,.72), rgba(15,9,4,.16)); flex:0 0 auto; } .plz-face-head .back{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(232,169,79,.45); background:rgba(20,13,6,.55); color:var(--gold); font-size:18px; cursor:pointer; flex:0 0 auto; font-family:inherit; line-height:1; } .plz-face-head .t{ flex:1; min-width:0; } .plz-face-head .nm{ font-size:16px; color:var(--gold); letter-spacing:2px; } .plz-face-head .sub{ font-size:11px; color:var(--sub); margin-top:2px; letter-spacing:1px; } .plz-face-body{ flex:1; overflow-y:auto; padding:14px 16px 24px; } /* v547：微信支付 NATIVE 二维码浮层（钱庄/会员充值复用，替代 window.open('weixin://') 打不开的坑） */ #plzQr{ position:fixed; inset:0; z-index:90; background:rgba(10,6,3,.85); display:none; align-items:center; justify-content:center; padding:24px; } #plzQr.on{ display:flex; } #plzQr .qrbox{ width:100%; max-width:320px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 18px; text-align:center; } #plzQr .qrt{ font-size:14px; color:var(--gold2); margin-bottom:14px; letter-spacing:1px; } #plzQr .qrimg{ background:#fff; border-radius:12px; padding:10px; width:220px; height:220px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; overflow:hidden; } #plzQr .qrimg svg{ width:100%; height:100%; } #plzQr .qrn{ font-size:12px; color:var(--gold3); line-height:1.7; margin-bottom:10px; min-height:16px; } #plzQr .qrclose{ margin-top:4px; padding:8px 24px; border-radius:16px; border:1px solid rgba(232,169,79,.5); background:rgba(232,169,79,.08); color:var(--txt); font-size:13px; font-family:inherit; cursor:pointer; } .pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } /* v557：格子＝图 + 图下信息条（名字/爱心不再压在图脸上） */ .pf-cell{ position:relative; border-radius:10px; overflow:hidden; border:1px solid rgba(232,169,79,.22); cursor:pointer; background:#1a1220; } .pf-cell .pf-im{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#1a1220; } .pf-cell .pf-im img{ width:100%; height:100%; object-fit:cover; display:block; } .pf-cell .pf-rk{ position:absolute; left:3px; top:3px; z-index:2; min-width:15px; padding:0 3px; border-radius:5px; text-align:center; font-size:9.5px; line-height:15px; font-weight:600; color:#3a2408; background:linear-gradient(180deg,#F2D49B,#D8A85C); box-shadow:0 1px 3px rgba(0,0,0,.45); } .pf-meta{ display:flex; align-items:center; justify-content:space-between; gap:3px; padding:4px 5px 5px; font-size:9.5px; line-height:1.2; background:rgba(10,6,2,.62); } .pf-meta .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(243,224,190,.95); font-weight:400; letter-spacing:.4px; } .pf-meta .lk{ flex:0 0 auto; font-style:normal; color:#ffb3c1; } .pf-meta .lk i{ font-style:normal; font-weight:600; } .pf-meta .no{ flex:1; text-align:center; color:rgba(240,220,180,.34); letter-spacing:1px; } .pf-cell .pf-no{ position:absolute; left:0; bottom:0; right:0; padding:4px 0 5px; text-align:center; font-size:10px; color:rgba(240,220,180,.85); background:linear-gradient(180deg, transparent, rgba(10,6,2,.82)); letter-spacing:1px; } .pf-cell.on{ border-color:#E8C88A; box-shadow:0 0 0 2px rgba(232,200,138,.35); } .pf-cell.taken{ cursor:not-allowed; filter:grayscale(.92) brightness(.55); } .pf-cell.taken .pf-tk{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:rgba(240,220,180,.9); background:rgba(10,6,2,.55); letter-spacing:1px; text-align:center; padding:0 6px; } .pf-up{ display:flex; flex-direction:column; gap:14px; align-items:center; padding:20px 0; } .pf-prev{ width:160px; height:213px; border-radius:12px; overflow:hidden; border:2px solid rgba(232,169,79,.4); flex:0 0 auto; } .pf-prev img{ width:100%; height:100%; object-fit:cover; display:block; } .pf-cands{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .pf-cand{ position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; border:2px solid rgba(232,169,79,.22); cursor:pointer; background:#1a1220; } .pf-cand img{ width:100%; height:100%; object-fit:cover; display:block; } .pf-cand.on{ border-color:#E8C88A; box-shadow:0 0 0 2px rgba(232,200,138,.35); } .pf-done{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 0; } .pf-done .img{ width:180px; height:240px; border-radius:12px; overflow:hidden; border:2px solid #E8C88A; } .pf-done .img img{ width:100%; height:100%; object-fit:cover; display:block; } /* v553：换脸合成复用（隐私同意/单调节杆/一批几张/大图灯箱）+ 审核态 + 动态排序 */ .pf-priv{ display:flex; gap:8px; align-items:flex-start; font-size:11.5px; color:var(--sub); line-height:1.7; text-align:left; max-width:300px; cursor:pointer; } .pf-priv input{ margin-top:3px; flex:0 0 auto; } .pf-priv b{ color:var(--gold2); } .pf-tune{ width:100%; max-width:320px; text-align:left; } .pf-tune .row{ display:flex; align-items:center; gap:10px; margin:10px 0 4px; } .pf-tune .row label{ flex:0 0 auto; font-size:11px; color:var(--gold3); letter-spacing:1px; } .pf-tune .row input[type=range]{ flex:1; -webkit-appearance:none; appearance:none; height:3px; border-radius:3px; background:rgba(232,169,79,.35); outline:none; } .pf-tune .row input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:17px; height:17px; border-radius:50%; background:#E8C88A; border:2px solid #1b1006; cursor:pointer; } .pf-tune .tnote{ font-size:10.5px; color:var(--sub); line-height:1.6; } .pf-batch{ display:flex; gap:10px; width:100%; max-width:320px; } .pf-batch .opt{ flex:1; border:1px solid rgba(232,169,79,.25); border-radius:10px; padding:9px 10px; text-align:center; cursor:pointer; font-size:12px; color:var(--sub); } .pf-batch .opt b{ color:var(--txt); font-size:14px; } .pf-batch .opt.on{ border-color:#E8C88A; background:rgba(232,169,79,.12); color:var(--gold2); } .pf-photo-prev{ width:88px; height:117px; border-radius:10px; overflow:hidden; border:1px solid rgba(232,169,79,.4); } .pf-photo-prev img{ width:100%; height:100%; object-fit:cover; display:block; } .pf-cand .zoom{ position:absolute; top:5px; right:5px; z-index:2; width:22px; height:22px; border-radius:50%; background:rgba(10,6,2,.72); color:var(--gold2); font-size:12px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(232,169,79,.4); } .pf-lb{ position:fixed; inset:0; z-index:200; /* v553b：#plaza 是 fixed z180 堆叠上下文，body 级弹框须 >180 否则被整个广场压住 */ background:rgba(8,5,2,.92); display:flex; align-items:center; justify-content:center; cursor:zoom-out; } .pf-lb img{ max-width:94vw; max-height:92vh; border-radius:8px; } .pf-minebar{ border:1px solid rgba(232,169,79,.4); background:rgba(232,169,79,.1); border-radius:10px; padding:10px 12px; font-size:12px; color:var(--txt); line-height:1.7; margin-bottom:10px; } /* v556（姐 2026-10-18 拍板）：挑底片——横滑大卡组（大图 + 左右滑看其他底片）+ 按钮瘦身 */ .pf-swipe{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:2px 13% 6px; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } .pf-swipe::-webkit-scrollbar{ display:none; } .pf-scard{ flex:0 0 100%; scroll-snap-align:center; /* v556b：百分比 basis 相对「内容盒」（两侧 padding 13% 已扣掉）⇒ 100% 才等于视口 74% */ position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; border:2px solid rgba(232,169,79,.22); background:#1a1220; transition:border-color .2s, box-shadow .2s, filter .2s; } .pf-scard img{ width:100%; height:100%; object-fit:cover; display:block; } .pf-scard .pf-no{ position:absolute; left:0; right:0; bottom:0; padding:6px 0 7px; text-align:center; font-size:11px; color:rgba(240,220,180,.92); background:linear-gradient(180deg,transparent,rgba(10,6,2,.85)); letter-spacing:1px; } .pf-scard.now{ border-color:#E8C88A; box-shadow:0 0 0 2px rgba(232,200,138,.3), 0 10px 30px rgba(0,0,0,.55); } .pf-scard.gone{ filter:grayscale(.94) brightness(.5); } .pf-scard .tk{ position:absolute; left:0; right:0; bottom:0; padding:9px 10px 10px; text-align:center; font-size:12px; line-height:1.5; letter-spacing:1px; color:rgba(240,220,180,.95); background:linear-gradient(180deg,transparent,rgba(10,6,2,.92)); } /* v557d：网格页顶部一行（说明 + 传自己照片入口） */ .pf-gridhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 11px; } .pf-gridtip{ flex:1; min-width:0; font-size:11.5px; line-height:1.6; color:var(--sub); } .pf-gridtip b{ color:var(--gold2); } .pf-mini{ flex:0 0 auto; padding:6px 11px; border-radius:13px; border:1px solid rgba(232,169,79,.32); background:rgba(232,169,79,.09); color:var(--gold3); font-family:inherit; font-size:10.5px; letter-spacing:.3px; } /* v557：挑底片第一步——平铺小图网格（一排 4 张） */ .pf-pickgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .pf-pc{ position:relative; aspect-ratio:3/4; border-radius:9px; overflow:hidden; border:1px solid rgba(232,169,79,.22); background:#1a1220; cursor:pointer; } .pf-pc img{ width:100%; height:100%; object-fit:cover; display:block; } .pf-pc .pc-no{ position:absolute; left:0; right:0; bottom:0; padding:3px 0 4px; text-align:center; font-size:9px; color:rgba(243,224,190,.92); letter-spacing:1px; background:linear-gradient(180deg,transparent,rgba(10,6,2,.82)); text-shadow:0 1px 2px rgba(0,0,0,.9); } .pf-pc:active{ transform:scale(.96); } .pf-sbar{ display:flex; align-items:center; justify-content:center; gap:18px; margin:12px 0 14px; } .pf-sbar .nav{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(232,169,79,.4); background:rgba(232,169,79,.08); color:var(--gold2); font-size:14px; line-height:1; font-family:inherit; display:flex; align-items:center; justify-content:center; } .pf-sbar .nav:disabled{ opacity:.28; } .pf-sbar .idx{ font-size:11.5px; color:var(--sub); letter-spacing:1px; } .pf-sbar .idx b{ color:var(--gold2); font-size:14px; } .pf-ctl{ width:100%; max-width:360px; margin:0 auto; display:flex; flex-direction:column; gap:9px; } .pf-main{ width:100%; padding:13px 0; border-radius:24px; border:1px solid rgba(232,200,138,.78); background:linear-gradient(180deg,rgba(232,169,79,.28),rgba(232,169,79,.12)); color:#ffe9bd; font-family:inherit; font-size:15px; letter-spacing:3px; } .pf-main:disabled{ opacity:.4; } .pf-sub2{ display:flex; gap:8px; } .pf-sub2 button{ flex:1; padding:9px 2px; border-radius:14px; border:1px solid rgba(232,169,79,.26); background:transparent; color:var(--sub); font-family:inherit; font-size:11.5px; letter-spacing:.3px; } .pf-batch2{ display:flex; align-items:center; justify-content:center; gap:8px; } .pf-batch2 .lb{ font-size:11px; color:var(--sub); letter-spacing:1px; } .pf-batch2 .opt{ padding:5px 11px; border-radius:14px; border:1px solid rgba(232,169,79,.24); font-size:11.5px; color:var(--sub); cursor:pointer; } .pf-batch2 .opt.on{ border-color:#E8C88A; background:rgba(232,169,79,.14); color:var(--gold2); } .pf-privrow{ display:flex; gap:7px; align-items:flex-start; font-size:11px; color:var(--sub); line-height:1.65; text-align:left; cursor:pointer; } .pf-privrow input{ margin-top:2px; flex:0 0 auto; } .pf-privrow b{ color:var(--gold2); } .pf-up2{ display:flex; flex-direction:column; gap:12px; padding-top:6px; } /* v556b：表单页顶部对齐（挑底片页才居中） */ .pf-pickwrap{ min-height:100%; display:flex; flex-direction:column; justify-content:center; } .pf-row2{ display:flex; gap:12px; align-items:flex-start; } .pf-row2 .pf-prev{ width:92px; height:123px; } .pf-row2 .col{ flex:1; min-width:0; } .pf-thumb{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--sub); } .pf-thumb .im{ width:50px; height:67px; border-radius:8px; overflow:hidden; border:1px solid rgba(232,169,79,.45); flex:0 0 auto; cursor:pointer; } .pf-thumb .im img{ width:100%; height:100%; object-fit:cover; display:block; } .pf-minebar b{ color:var(--gold2); } /* v580（T-20261019-049）：已上墙态更亮一档，跟「审核中/没过」区分开 */ .pf-minebar.ok{ border-color:rgba(232,169,79,.68); background:rgba(232,169,79,.17); } .plz-meline{ display:flex; align-items:center; gap:10px; margin:0 0 9px; } .plz-meline .plz-note{ flex:1 1 auto; margin:0; } .plz-meline .plz-mini{ flex:0 0 auto; } .plz-mini{ font:inherit; font-size:11.5px; line-height:1.5; color:var(--gold2); background:none; border:1px solid rgba(232,169,79,.45); border-radius:999px; padding:3px 12px; cursor:pointer; } .plz-ava-box{ border:1px solid rgba(232,169,79,.28); border-radius:12px; padding:10px 11px; margin:0 0 10px; background:rgba(255,255,255,.03); } .plz-ava-opt{ display:block; width:100%; box-sizing:border-box; text-align:left; font:inherit; font-size:12.5px; line-height:1.6; color:var(--txt); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px 11px; margin:7px 0 0; cursor:pointer; } .plz-ava-opt b{ color:var(--gold2); } .plz-ava-opt small{ display:block; font-size:11px; opacity:.62; margin-top:2px; } .plz-ava-opt.on{ border-color:rgba(232,169,79,.62); background:rgba(232,169,79,.14); cursor:default; } .plz-ava-opt.off{ opacity:.55; cursor:default; } /* v557d：加载更多原来用了没定义样式的 .star ⇒ 浏览器默认白块，跟整页不搭 */ /* v556（姐 2026-10-18 拍板）：创世墙三态——已挂（高亮/可点开/可赞）vs 虚位（压暗） */ .pf-cell.won{ border-color:rgba(232,200,138,.72); box-shadow:0 0 0 1px rgba(232,200,138,.3), 0 0 14px rgba(232,169,79,.3); cursor:zoom-in; } .pf-cell.won .pf-im img{ filter:saturate(1.1) brightness(1.06); } .pf-cell.won:active{ transform:scale(.96); } .pf-cell.slot{ border-style:dashed; border-color:rgba(232,169,79,.2); cursor:default; } .pf-cell.slot .pf-im img{ filter:grayscale(1) brightness(.5); opacity:.34; } .pf-cell.slot .pf-meta{ background:rgba(10,6,2,.5); } .pf-cell.won .pf-meta{ background:rgba(232,169,79,.14); } /* v556：创世墙大图查看器（点已挂的卡 → 大图 + 点赞 + 左右翻） */ .pf-wv{ position:fixed; inset:0; z-index:210; background:rgba(8,5,2,.97); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; } .pf-wv .box{ width:74vw; max-width:330px; aspect-ratio:3/4; max-height:62vh; border-radius:14px; overflow:hidden; border:1px solid rgba(232,200,138,.5); box-shadow:0 12px 44px rgba(0,0,0,.7); background:#0d0710; } /* v556b：定成 3:4 框，任何比例的图都填满不跳动 */ .pf-wv .box img{ width:100%; height:100%; display:block; object-fit:cover; } .pf-wv .ft{ display:flex; align-items:center; gap:18px; margin-top:18px; } .pf-wv .nm{ font-size:16px; color:var(--gold); letter-spacing:2px; } .pf-wv .sub{ font-size:11px; color:var(--sub); margin-top:4px; letter-spacing:.5px; } .pf-wv .lk{ display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:22px; border:1px solid rgba(255,140,170,.42); background:rgba(255,140,170,.1); color:#ffb3c1; font-size:14px; font-family:inherit; } .pf-wv .lk b{ font-weight:600; } .pf-wv .lk.on{ background:rgba(255,140,170,.26); border-color:rgba(255,140,170,.85); box-shadow:0 0 14px rgba(255,140,170,.35); } .pf-wv .cls{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(232,169,79,.45); background:rgba(10,6,2,.6); color:var(--gold); font-size:18px; line-height:1; font-family:inherit; } .pf-wv .nav{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:1px solid rgba(232,169,79,.4); background:rgba(10,6,2,.62); color:var(--gold); font-size:20px; line-height:1; font-family:inherit; } .pf-wv .nav.pre{ left:10px; } .pf-wv .nav.nxt{ right:10px; } .pf-wv .nav:disabled{ opacity:.25; } .plz-gen-prog{ margin:10px 0 2px; } .plz-gen-bar{ height:6px; border-radius:6px; background:rgba(232,169,79,.16); overflow:hidden; border:1px solid rgba(232,169,79,.3); } .plz-gen-bar i{ display:block; height:100%; background:linear-gradient(90deg,#a97b3f,#E8C88A); border-radius:6px; transition:width .5s ease; } .plz-gen-bar i.full{ background:linear-gradient(90deg,#E8C88A,#ffe9bd); box-shadow:0 0 8px rgba(232,200,138,.7); } .plz-gen-prog .line{ font-size:12px; color:var(--txt); line-height:1.7; margin:8px 0 0; } .plz-gen-prog .line b{ color:var(--gold2); } .plz-note{ color:var(--sub); font-size:12px; border-left:2px solid rgba(232,169,79,.4); padding-left:10px; margin:0 0 14px; line-height:1.7; } .plz-note b{ color:var(--gold2); } .plz-row{ display:flex; align-items:center; gap:10px; padding:11px 12px; margin-bottom:8px; border:1px solid rgba(232,169,79,.18); border-radius:12px; background:rgba(232,169,79,.05); } .plz-row .rk{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:12px; color:#120a18; background:var(--gold); font-weight:700; } .plz-row .rk.dim{ background:rgba(232,169,79,.22); color:var(--txt); } .plz-row .nm{ flex:1; font-size:14px; color:var(--txt); } .plz-row .nm small{ color:var(--sub); font-size:11px; margin-left:6px; } .plz-row .val{ font-size:13px; color:var(--gold); } .plz-row .val.dim{ color:var(--sub); font-size:12px; } /* v581：不是当前章的状态字 */ .plz-row.off{ opacity:.55; } .plz-msg{ display:flex; gap:8px; margin-bottom:10px; } .plz-msg .a{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid rgba(232,169,79,.45); } .plz-msg .b{ max-width:76%; padding:9px 12px; border-radius:12px; background:rgba(232,169,79,.08); border:1px solid rgba(232,169,79,.2); font-size:13px; line-height:1.6; color:var(--txt); } .plz-msg .b .who{ font-size:11px; color:var(--gold); margin-bottom:2px; } .plz-msg.mine{ justify-content:flex-end; } .plz-msg.mine .b{ background:rgba(232,169,79,.16); border-color:rgba(232,169,79,.4); } .plz-shop{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .plz-shop .it{ border:1px solid rgba(232,169,79,.2); border-radius:12px; padding:12px; background:rgba(232,169,79,.05); cursor:pointer; } .plz-shop .it .ico{ font-size:24px; margin-bottom:6px; } .plz-shop .it .nm{ font-size:13px; color:var(--txt); } .plz-shop .it .pr{ font-size:11px; color:var(--gold); margin-top:4px; } .plz-shop .it .st{ font-size:10px; color:var(--sub); margin-top:2px; } /* v652：货郎做胭脂（材料代工） */ .plz-craft-bal{ display:flex; gap:8px; margin-bottom:12px; } .plz-craft-bal span{ flex:1; font-size:11px; color:var(--gold); padding:8px 10px; border-radius:10px; background:rgba(232,169,79,.08); border:1px solid rgba(232,169,79,.22); text-align:center; } .plz-craft-list{ display:flex; flex-direction:column; gap:9px; } .plz-craft-list .row{ border:1px solid rgba(232,169,79,.2); border-radius:12px; padding:11px 12px; background:rgba(232,169,79,.05); } .plz-craft-list .top{ display:flex; align-items:flex-start; gap:10px; } .plz-craft-list .ci{ width:54px; height:54px; border-radius:9px; object-fit:cover; flex:0 0 auto; background:rgba(232,169,79,.08); border:1px solid rgba(232,169,79,.22); } .plz-craft-list .info{ flex:1; min-width:0; } .plz-craft-list .nm{ font-size:13.5px; color:var(--txt); font-weight:600; letter-spacing:.04em; } .plz-craft-list .src{ font-size:10px; color:#ffb98a; margin-top:4px; line-height:1.6; } .plz-craft-list .tag{ display:inline-block; font-size:9.5px; color:#c9a27a; letter-spacing:.1em; margin-left:6px; padding:1px 6px; border-radius:6px; border:1px solid rgba(201,162,122,.4); vertical-align:1px; } .plz-craft-list .rc{ font-size:11px; color:var(--sub); margin-top:5px; line-height:1.7; } .plz-craft-list .rc .lack{ color:#ff9a7a; } .plz-craft-list .go{ font-size:10.5px; color:rgba(216,184,120,.7); margin-top:3px; } .plz-craft-list .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; } .plz-craft-list .fee{ font-size:10.5px; color:var(--sub); } .plz-craft-list button{ padding:6px 18px; border-radius:10px; border:0; cursor:pointer; font-family:inherit; font-size:12px; letter-spacing:.12em; color:#2a1a10; font-weight:600; background:linear-gradient(180deg,#ffd9a8,#e8b478); } .plz-craft-list button:disabled{ filter:grayscale(.55) brightness(.82); cursor:default; } .plz-craft-list button:active{ filter:brightness(1.12); } .plz-craft-back{ margin-top:14px; width:100%; padding:11px; border-radius:12px; border:1px solid rgba(232,169,79,.35); background:transparent; color:var(--sub); font-family:inherit; font-size:12.5px; letter-spacing:.12em; cursor:pointer; } /* ===== v538：社交四层聊天 + 场所 UI 细化（参考总台 UI 原型） ===== */ .plz-tabs{ display:flex; gap:8px; margin-bottom:14px; } .plz-tabs .tab{ flex:1; text-align:center; font-size:12px; padding:8px 0; border-radius:10px; cursor:pointer; border:1px solid rgba(232,169,79,.25); color:var(--sub); letter-spacing:1px; } .plz-tabs .tab.on{ color:var(--gold); border-color:var(--gold); background:rgba(232,169,79,.12); } .plz-scope{ font-size:11px; color:var(--sub); padding:8px 12px; margin-bottom:12px; background:rgba(232,169,79,.06); border:1px solid rgba(232,169,79,.14); border-radius:10px; line-height:1.6; letter-spacing:1px; } .plz-scope b{ color:var(--gold); } .plz-chat{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; } .plz-chat .m{ display:flex; gap:8px; align-items:flex-start; } .plz-chat .m .av{ width:28px; height:28px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:13px; border:1px solid rgba(232,169,79,.35); background:rgba(0,0,0,.28); } .plz-chat .m .bd{ flex:1; min-width:0; } .plz-chat .m .who{ font-size:11px; color:var(--sub); margin-bottom:3px; } .plz-chat .m .txt{ font-size:13px; line-height:1.6; background:rgba(0,0,0,.24); border:1px solid rgba(232,169,79,.16); padding:8px 11px; border-radius:4px 12px 12px 12px; display:inline-block; word-break:break-word; max-width:100%; } .plz-chat .m.mine{ flex-direction:row-reverse; } .plz-chat .m.mine .bd{ display:flex; flex-direction:column; align-items:flex-end; } .plz-chat .m.mine .txt{ background:rgba(184,69,46,.18); border-color:rgba(184,69,46,.32); border-radius:12px 4px 12px 12px; margin-left:auto; } .plz-chat .m .av[data-plz-fav]{ cursor:pointer; } .plz-chat .m.atme .txt{ border-color:rgba(232,169,79,.75); background:rgba(232,169,79,.14); box-shadow:0 0 0 1px rgba(232,169,79,.3); } /* v563（T-20261019-047）公共场所管理：处置按钮 / 管理员标记 / 禁言条 / 举报弹层 */ .plz-chat .m .who .mg{ font-size:10px; color:rgba(232,169,79,.9); margin-left:5px; border:1px solid rgba(232,169,79,.35); border-radius:3px; padding:0 3px; vertical-align:1px; } .plz-chat .m .acts{ display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; } .plz-chat .m .acts .a{ font-size:11px; color:var(--sub); border:1px solid rgba(232,169,79,.22); border-radius:10px; padding:1px 9px; cursor:pointer; background:rgba(0,0,0,.2); line-height:1.7; } .plz-chat .m .acts .a:active{ background:rgba(232,169,79,.22); } .plz-chat .m .acts .a.warn{ color:#E8A94F; border-color:rgba(232,169,79,.45); } .plz-chat .m.mine .acts{ justify-content:flex-end; } .plz-mute{ display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:12px; color:#E8A94F; background:rgba(184,69,46,.16); border-top:1px solid rgba(232,169,79,.3); } .plz-mute .t{ flex:1; line-height:1.5; } .plz-rep{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; } .plz-rep .r{ padding:7px 14px; border-radius:16px; border:1px solid rgba(232,169,79,.3); background:rgba(0,0,0,.22); font-size:13px; cursor:pointer; } .plz-rep .r.on{ border-color:var(--gold); background:rgba(232,169,79,.18); color:var(--gold); } .plz-mbtn{ flex:1; padding:11px 0; border-radius:10px; font-size:14px; font-family:inherit; cursor:pointer; border:1px solid rgba(232,169,79,.45); background:rgba(232,169,79,.16); color:var(--gold); } .plz-mbtn.ghost{ background:rgba(0,0,0,.22); color:var(--sub); border-color:rgba(232,169,79,.22); } .plz-mbtn:active{ filter:brightness(1.25); } .plz-repnote{ width:100%; box-sizing:border-box; margin-top:10px; min-height:64px; resize:vertical; background:rgba(0,0,0,.24); border:1px solid rgba(232,169,79,.25); border-radius:8px; color:var(--txt,#f0e6d2); font-size:13px; font-family:inherit; padding:9px 11px; line-height:1.6; outline:none; } .plz-fr{ border:1px solid rgba(232,169,79,.2); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:rgba(0,0,0,.18); } .plz-fr .fr-t{ font-size:11px; color:var(--sub); margin:6px 0 4px; } .plz-fr .fr-t:first-child{ margin-top:0; } .plz-fr .fr-row{ display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px dashed rgba(232,169,79,.12); font-size:13px; } .plz-fr .fr-row:last-child{ border-bottom:none; } .plz-fr .fr-n{ flex:1; min-width:0; } .plz-fr .fr-c{ font-size:11px; color:var(--sub); } .plz-fr .fr-b{ padding:3px 12px; border-radius:12px; border:1px solid rgba(232,169,79,.4); background:rgba(232,169,79,.12); color:var(--gold); font-size:12px; cursor:pointer; font-family:inherit; } .plz-fr .fr-b.no{ opacity:.65; } .plz-fr .fr-empty{ font-size:12px; color:var(--sub); line-height:1.7; } /* v576（T-036 ③）：小群列表 / 建群挑人 */ .plz-fr .fr-t .gr-new{ float:right; margin-top:-3px; padding:2px 10px; border-radius:11px; font-size:11px; border:1px solid rgba(232,169,79,.45); background:rgba(232,169,79,.14); color:var(--gold); cursor:pointer; font-family:inherit; } .plz-fr .fr-row.gr-row{ cursor:pointer; } .plz-fr .fr-row.gr-row.on{ background:rgba(232,169,79,.12); border-radius:8px; padding-left:6px; padding-right:6px; } .plz-fr .gr-own{ font-style:normal; font-size:10px; color:rgba(232,169,79,.85); margin-left:6px; } .plz-grnew{ padding-top:12px; } /* v576：别顶到拖拽条上 */ .plz-grin{ width:100%; box-sizing:border-box; margin:8px 0 4px; padding:9px 11px; border-radius:8px; background:rgba(0,0,0,.24); border:1px solid rgba(232,169,79,.25); color:var(--txt,#f0e6d2); font-size:13px; font-family:inherit; outline:none; } .plz-grpick{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px; } .plz-grpick .pk{ font-size:12px; padding:4px 10px; border-radius:12px; cursor:pointer; border:1px solid rgba(232,169,79,.28); background:rgba(0,0,0,.2); color:var(--sub); } .plz-grpick .pk.on{ border-color:rgba(232,169,79,.8); background:rgba(232,169,79,.2); color:var(--gold); } /* v638（T-036 收尾）：小群管理 */ .plz-fr .gr-mgr{ flex:0 0 auto; padding:2px 9px; border-radius:10px; font-size:11px; border:1px solid rgba(232,169,79,.4); background:rgba(232,169,79,.14); color:var(--gold); cursor:pointer; font-family:inherit; } .plz-grmgr{ padding-top:8px; } .plz-grmgr .gr-sect{ font-size:12px; color:var(--gold); margin:14px 0 6px; letter-spacing:.5px; } .plz-grmgr .gr-sect.warn{ color:rgba(232,130,96,.95); } .plz-grmgr .gr-ren{ display:flex; gap:8px; align-items:center; } .plz-grmgr .gr-ren .plz-grin{ margin:0; flex:1; } .plz-grmgr .gr-mbtn{ padding:6px 12px; border-radius:9px; font-size:12px; font-family:inherit; cursor:pointer; border:1px solid rgba(232,169,79,.4); background:rgba(232,169,79,.14); color:var(--gold); white-space:nowrap; } .plz-grmgr .gr-mbtn.warn{ border-color:rgba(232,130,96,.5); background:rgba(232,130,96,.14); color:rgba(240,155,122,.95); } .plz-grmgr .gr-mbtn.danger{ border-color:rgba(220,80,70,.55); background:rgba(220,80,70,.18); color:rgba(255,135,115,.95); } .plz-grmgr .gr-mem{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 2px; border-bottom:1px solid rgba(232,169,79,.12); } .plz-grmgr .gr-mem:last-child{ border-bottom:none; } .plz-grmgr .gr-mn{ flex:1; min-width:0; font-size:13px; color:var(--txt,#f0e6d2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .plz-grmgr .gr-mt{ font-size:11px; color:var(--sub); flex:0 0 auto; } .plz-grmgr .gr-macts{ display:flex; gap:6px; flex:0 0 auto; } /* v640（T-20261023-002）茶楼告示 */ .plz-bulbar{ position:relative; display:flex; align-items:center; gap:8px; margin:10px 0 2px; padding:9px 12px; border:1px solid rgba(232,169,79,.28); border-radius:10px; background:rgba(232,169,79,.08); cursor:pointer; } .plz-bulbar .bi{ font-size:16px; line-height:1; } .plz-bulbar .bt{ font-size:13px; color:var(--gold); font-weight:600; } .plz-bulbar .bd{ flex:1; min-width:0; font-size:11px; color:var(--sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .plz-bulbar .plz-notice-dot{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:#E4573D; box-shadow:0 0 0 2px rgba(20,12,6,.72), 0 0 9px rgba(228,87,61,.85); display:none; pointer-events:none; } .plz-bulbar.has-notice .plz-notice-dot{ display:block; } .plz-bul{ display:flex; flex-direction:column; gap:8px; padding-top:4px; } .plz-bulrow{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid rgba(232,169,79,.16); border-radius:9px; background:rgba(0,0,0,.16); cursor:pointer; } .plz-bulrow.top{ border-color:rgba(232,169,79,.5); background:rgba(232,169,79,.10); } .plz-bulrow .plz-bulhead{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .plz-bulrow .plz-bult{ font-size:14px; color:var(--txt,#f0e6d2); font-weight:600; } .plz-bulrow .plz-buls{ font-size:12px; color:var(--sub); line-height:1.6; } .plz-bulrow .plz-bula{ font-size:11px; color:var(--sub); opacity:.75; flex:0 0 auto; } .plz-bulrow .plz-bulby{ font-size:11px; color:rgba(232,169,79,.7); } .plz-bul-empty{ font-size:13px; color:var(--sub); line-height:1.7; padding:6px 2px; } .plz-buldetail{ padding:10px 2px 6px; } .plz-buldetail .plz-bulline{ font-size:14px; color:var(--txt,#f0e6d2); line-height:2; } .plz-bulby2{ font-size:12px; color:rgba(232,169,79,.75); text-align:right; padding:4px 2px 10px; } .plz-bulback{ margin-top:4px; } /* v576（T-036 ②）：老板的名字整行金色——别再挂一个「老板」小标，跟名字重复 */ .plz-chat .m.npc .who{ color:rgba(232,169,79,.95); } .plz-sw.lk{ opacity:.5; } .plz-sw.lk span{ color:rgba(240,220,180,.45); } /* v578：锁标从名字里挪到圆右上角——原来「🔒雪魄」挤在 30px 圆下面糊成一团 */ .plz-sw.lk::after{ content:"🔒"; position:absolute; right:-3px; top:-5px; font-size:9px; line-height:1; filter:grayscale(.2); } .plz-chat .m.mine .who{ text-align:right; } .plz-chat .m.npc .txt{ background:rgba(232,169,79,.1); border-color:rgba(232,169,79,.4); color:var(--gold); font-style:italic; } .plz-chat .m .txt.stk{ font-size:32px; padding:2px 6px; background:none; border:none; line-height:1.1; } .plz-inbar{ display:flex; gap:8px; align-items:center; margin-top:4px; } .plz-inbar input{ flex:1; min-width:0; padding:9px 12px; border-radius:18px; border:1px solid rgba(232,169,79,.35); background:rgba(0,0,0,.32); color:var(--txt); font-size:13px; font-family:inherit; outline:none; } .plz-inbar .ib{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(232,169,79,.35); cursor:pointer; background:rgba(232,169,79,.08); color:var(--gold); font-size:15px; flex:0 0 auto; padding:0; font-family:inherit; } .plz-emojis{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin-bottom:10px; } .plz-emojis .e{ font-size:22px; text-align:center; padding:5px 0; border-radius:8px; cursor:pointer; } .plz-emojis .e:active{ background:rgba(232,169,79,.16); } .plz-props .pr{ display:flex; align-items:center; gap:9px; font-size:12px; padding:7px 0; border-bottom:1px dashed rgba(232,169,79,.1); } .plz-props .pr .pi{ font-size:19px; } .plz-props .pr .pn{ flex:1; } .plz-props .pr .pn small{ display:block; color:var(--sub); font-size:10px; } .plz-props .pr .pb{ font-size:11px; color:var(--gold); border:1px solid rgba(232,169,79,.45); border-radius:12px; padding:3px 10px; cursor:pointer; } /* 头像墙（方形缩略图） */ .plz-sqg{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .plz-sq{ position:relative; border-radius:8px; overflow:hidden; cursor:pointer; border:1px solid rgba(232,169,79,.32); aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:linear-gradient(160deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); } .plz-sq .av2{ position:absolute; inset:0; font-size:24px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); } /* v579（T-033 §6）：榜上头像＝**方形真图**（不是圆、不是名次圈）；没图的回退 emoji，不留白 */ .plz-sq .av2 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .plz-sq .av2 .emo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .plz-sq .av2 .maid{ position:absolute; right:3px; top:2px; font-size:10px; font-style:normal; background:rgba(0,0,0,.55); border-radius:8px; padding:0 3px; } .plz-sq *{ pointer-events:none; } /* v579：点卡片任意处都算点卡片（点到头像/名字不能没反应） */ .plz-sq .n2{ position:absolute; left:0; right:0; bottom:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 4px; font-size:11px; letter-spacing:1px; text-align:center; background:rgba(0,0,0,.46); } /* v565 省略号；v579 压图上 */ .plz-slot-empty{ grid-column:1 / -1; text-align:center; font-size:11px; letter-spacing:1px; color:rgba(232,169,79,.55); padding:12px 0 2px; } /* v565：人不够时补一句，别留大片空白 */ .plz-sq .rk2{ position:absolute; top:3px; left:4px; font-size:10px; color:#2a1c06; background:var(--gold); border-radius:3px; padding:0 4px; font-weight:700; } .plz-sq .sup{ position:absolute; bottom:26px; right:4px; font-size:9px; color:#fff; opacity:.8; text-shadow:0 1px 3px #000; } /* v586（姐 10-20）：榜上的魅力与创世花墙的红心取齐——同一个 ♥、同一个数、同一个色 */ .plz-sq .n2.haslk{ padding-right:30px; } .plz-sq .n2 .lk2{ position:absolute; right:5px; top:0; bottom:0; display:flex; align-items:center; font-style:normal; font-weight:600; font-size:9.5px; color:#ffb3c1; letter-spacing:0; text-shadow:0 1px 3px #000; } .plz-sq .n2 .lk2 i{ font-style:normal; font-weight:600; } .plz-sq.me{ border-color:var(--red); box-shadow:0 0 12px rgba(184,69,46,.45); } /* 大图卡 */ /* v580（T-20261019-049）：62% → 54%。弹层只有 56% 屏高，62% 的大图把下面那行「换头像」 顶到可视区外了——打样截图才发现的，静态门禁看不见。 */ .plz-big{ width:54%; margin:2px auto 10px; border-radius:12px; overflow:hidden; position:relative; border:1px solid rgba(232,169,79,.5); box-shadow:0 12px 34px rgba(0,0,0,.6); aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:linear-gradient(160deg, rgba(60,40,20,.5), rgba(0,0,0,.7)); } .plz-big .av3{ position:absolute; inset:0; font-size:64px; line-height:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)); } /* v579（T-033 §7）：点开是**大图**——真图铺满整张卡，名字压在底下 */ .plz-big .av3 img{ width:100%; height:100%; object-fit:cover; display:block; } .plz-big .av3 .emo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .plz-big .n3{ position:absolute; left:0; right:0; bottom:0; padding:26px 8px 8px; box-sizing:border-box; font-size:16px; letter-spacing:2px; text-shadow:0 2px 6px #000; text-align:center; background:linear-gradient(transparent, rgba(0,0,0,.86)); } .plz-big .rk3{ position:absolute; top:8px; left:9px; font-size:11px; color:#2a1c06; background:var(--gold); border-radius:4px; padding:1px 6px; font-weight:700; } .plz-stat{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:2px 0 10px; } .plz-stat span{ font-size:11px; color:var(--sub); border:1px solid rgba(232,169,79,.25); border-radius:12px; padding:3px 9px; } .plz-stat span b{ color:var(--gold); } .plz-sup{ width:100%; padding:12px; border-radius:26px; border:1px solid var(--red); cursor:pointer; background:rgba(184,69,46,.2); color:#f6d5cd; font-size:14px; font-family:inherit; letter-spacing:2px; } .plz-sup.done{ opacity:.55; cursor:default; border-color:rgba(232,169,79,.4); background:rgba(232,169,79,.08); color:var(--sub); } .plz-opt{ width:100%; margin-top:10px; padding:11px; border-radius:14px; border:1px solid rgba(232,169,79,.45); cursor:pointer; background:rgba(232,169,79,.08); color:var(--txt); font-size:13px; font-family:inherit; letter-spacing:1px; } /* 进度条 */ .plz-prog{ height:9px; border-radius:6px; background:rgba(0,0,0,.4); overflow:hidden; border:1px solid rgba(232,169,79,.22); margin:6px 0 4px; } .plz-prog i{ display:block; height:100%; background:linear-gradient(90deg,#b98a3e,#e8c074); } /* 开关 + 色板（我面板） */ .plz-switch{ display:flex; align-items:center; justify-content:space-between; padding:12px 2px; font-size:13px; border-top:1px dashed rgba(232,169,79,.18); margin-top:10px; } .plz-tg{ width:44px; height:24px; border-radius:20px; background:rgba(232,169,79,.15); border:1px solid rgba(232,169,79,.4); position:relative; cursor:pointer; transition:.2s; flex:0 0 auto; } .plz-tg::after{ content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:var(--sub); top:2px; left:3px; transition:.2s; } .plz-tg.on{ background:rgba(232,169,79,.4); } .plz-tg.on::after{ left:21px; background:var(--gold); } .plz-swatches{ display:grid; grid-template-columns:repeat(6,1fr); gap:28px 4px; justify-items:center; margin:8px 0 4px; padding-bottom:24px; } /* v557d：12 色走 6 列网格（6+6），名字挂在球下 -16px，行距/底部都要留够；v588 行距 28→30 给选中徽章留位 */ /* v588（姐 10-20）：色球「像缺一块」的真因——旧渐变是「circle at 34% 30%」起手、到 74% 处就收成全透明， circle 的半径按「到最远角」算，球心又偏在左上 ⇒ 右下那一侧的球缘在 74% 之外，直接透明 ⇒ 右下整块被啃掉。 现在改成「实心色 + 左上高光 + 底部内阴影」三层叠，任何方向都是完整一颗球，30px 下也认得出是什么颜色。 */ /* v588b（姐 10-20 看实拍图后）：2px 白边在深底上像一圈脏白圈，素银这种近白色球更是分不清边和球 ⇒ 边框退回透明，改用 1px 内侧亮环，球缘照样清楚，深色的墨玉也不会糊进背景。 */ .plz-sw{ width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent; position:relative; flex:0 0 auto; background: radial-gradient(circle at 33% 27%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 13%, rgba(255,255,255,0) 40%), var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -4px 7px rgba(0,0,0,.26), inset 0 1px 2px rgba(255,255,255,.28), 0 0 6px 0 var(--c); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } /* v588：选中不能再只换一个边框——金环 + 外光圈 + 右下角对勾徽章 + 名字变金加粗 + 微微放大 */ .plz-sw.on{ border-color:var(--gold); transform:scale(1.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -4px 7px rgba(0,0,0,.26), inset 0 1px 2px rgba(255,255,255,.28), 0 0 0 3px rgba(232,169,79,.30), 0 0 0 5px rgba(232,169,79,.10), 0 0 10px 2px var(--c); } /* v588b：对勾徽章挂**右上角**——右下正好是色名，老位置把「焰赤」的「赤」盖掉一半 */ .plz-sw.on::before{ content:"\2713"; position:absolute; right:-4px; top:-4px; width:14px; height:14px; border-radius:50%; background:var(--gold); color:#3a2a12; font:700 10px/14px Arial,sans-serif; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.60); } .plz-sw span{ position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--sub); white-space:nowrap; } .plz-sw.on span{ color:var(--gold); font-weight:700; } .ps-orb{ width:40px; height:40px; border-radius:50%; margin:0 auto 8px; background:radial-gradient(circle at 34% 30%, #fff, var(--c) 42%, transparent 72%); box-shadow:0 0 14px 3px var(--c); } .ps-name{ font-size:12px; color:var(--txt); } .ps-tag{ font-size:10px; color:var(--sub); margin-top:2px; } .plz-lock{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border:1px solid rgba(232,169,79,.25); border-radius:12px; font-size:13px; margin-top:6px; } .plz-closed{ margin-top:12px; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.7; color:rgba(232,169,79,.92); background:rgba(232,169,79,.08); border:1px solid rgba(232,169,79,.22); } .plz-lock.lk{ opacity:.7; cursor:default; } .plz-lock.lk b{ color:var(--sub); } /* ===== v577（卡 T-035）· 楼内序幕翻页层 ===== 一页一屏，点「继续 ▼」翻；底部 第 X / N 页；第 4 页出输入框。 z-index 185：必须**高过广场层 #plaza(180)**（首页就是广场，真机实测 160 会被 #plzImg 吃掉点击）， 又要**低于登录墙 #loginWall(195) / 会员墙(196)** —— 墙上不能压剧情。 */ #qPro{ position:fixed; inset:0; z-index:185; display:none; flex-direction:column; background:#120c1a; opacity:1; transition:opacity .5s; } #qPro.on{ display:flex; } #qPro.fade{ opacity:0; pointer-events:none; } #qPro .qp-bg{ position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; filter:blur(3px) brightness(.52) saturate(.9); } #qPro .qp-mask{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,5,14,.58) 0%, rgba(9,5,14,.8) 55%, rgba(9,5,14,.92) 100%); } #qPro .qp-body{ position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; padding:0 26px; overflow-y:auto; } #qPro .qp-page{ width:100%; max-width:430px; padding:20px 0; } #qPro .qp-line{ font-size:15.5px; line-height:2.05; margin-bottom:18px; letter-spacing:.4px; color:#efe6dd; text-shadow:0 1px 10px rgba(0,0,0,.92); } #qPro .qp-line.n{ color:#cfc4bb; font-size:14.5px; } #qPro .qp-line.m{ color:#f2d9a8; } #qPro .qp-line.m::before{ content:'妈妈'; display:block; font-size:10.5px; color:rgba(232,169,79,.7); letter-spacing:3px; margin-bottom:6px; } #qPro .qp-line.sys{ color:rgba(232,169,79,.78); font-size:12.5px; line-height:1.8; } #qPro .qp-hint{ font-size:13.5px; color:rgba(255,255,255,.62); text-align:center; line-height:1.9; margin-bottom:20px; } #qPro .qp-hint i{ display:block; font-style:normal; font-size:11.5px; color:rgba(255,255,255,.38); margin-top:4px; } #qPro .qp-inrow{ display:flex; align-items:center; gap:10px; } #qPro .qp-dice{ flex:0 0 46px; height:46px; border-radius:13px; border:1px solid rgba(232,169,79,.35); background:rgba(255,255,255,.05); font-size:19px; line-height:1; color:#f2d9a8; } #qPro #qpInp{ flex:1; height:48px; border-radius:13px; border:1px solid rgba(232,169,79,.45); background:rgba(0,0,0,.38); color:#fff; font-size:17px; padding:0 12px; font-family:inherit; text-align:center; letter-spacing:3px; outline:none; } #qPro #qpInp::placeholder{ letter-spacing:1px; color:rgba(255,255,255,.3); } #qPro .qp-ok{ width:100%; margin-top:16px; height:47px; border-radius:24px; border:0; background:linear-gradient(180deg,#e8a94f,#c9852f); color:#3a2a12; font-size:15.5px; font-weight:600; font-family:inherit; letter-spacing:1px; } #qPro .qp-ar{ width:100%; margin-top:10px; height:43px; border-radius:22px; border:1px solid rgba(232,169,79,.45); background:transparent; color:#f2d9a8; font-size:14px; font-family:inherit; } #qPro .qp-next{ display:block; margin-left:auto; margin-top:22px; border:1px solid rgba(232,169,79,.5); background:rgba(232,169,79,.12); color:#f2d9a8; border-radius:23px; padding:10px 22px; font-size:13.5px; font-family:inherit; } #qPro .qp-next b{ font-size:10px; margin-left:4px; } #qPro .qp-foot{ position:relative; z-index:1; padding:0 30px calc(24px + env(safe-area-inset-bottom)); text-align:center; } #qPro .qp-no{ font-size:11.5px; color:rgba(255,255,255,.42); letter-spacing:1.5px; } #qPro .qp-white{ position:absolute; inset:0; z-index:3; background:#fff; opacity:0; pointer-events:none; transition:opacity .6s; display:flex; align-items:center; justify-content:center; padding:0 34px; } #qPro .qp-white.go{ opacity:1; } #qPro .qp-white span{ color:#3a2a12; font-family:'PlateKai',"Kaiti SC","STKaiti","KaiTi",serif; font-size:21px; line-height:2; letter-spacing:2px; text-align:center; } /* 钱庄充值档 */ .plz-tier{ display:flex; align-items:center; gap:12px; border:1px solid rgba(232,169,79,.3); border-radius:12px; padding:13px 14px; margin-bottom:10px; background:rgba(0,0,0,.2); } .plz-tier .ti{ font-size:22px; } .plz-tier .tn{ flex:1; min-width:0; } .plz-tier .tn b{ display:block; font-size:14px; letter-spacing:1px; } .plz-tier .tn span{ display:block; font-size:11px; color:var(--sub); } .plz-tier .tn small{ display:block; font-size:11px; color:#d8b878; margin-top:2px; } .plz-tier .tp{ color:var(--gold); font-size:15px; cursor:pointer; border:1px solid rgba(232,169,79,.5); border-radius:14px; padding:5px 13px; } .plz-tier .tp .plz-oldp{ color:var(--sub); font-size:12px; text-decoration:line-through; margin-right:5px; font-weight:400; } /* v583：每件东西先画个小样——先看见效果，再花积分买。 */ .pt-demo{ flex:0 0 auto; width:46px; display:flex; align-items:center; justify-content:center; } .pt-demo .plz-name-tag{ font-size:10px; letter-spacing:0; padding:2px 6px; } .pt-orb{ display:block; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 44% 40%, #fff 0%, #fffdf2 12%, var(--c-hi,#fff2cb) 26%, var(--c,#ffd98f) 46%, var(--c-mid,rgba(255,190,95,.55)) 66%, var(--c-lit,rgba(255,165,65,.18)) 82%, var(--c-zero,rgba(255,150,50,0)) 96%); box-shadow:0 0 8px 2px var(--c-glow,rgba(255,214,140,.35)); } /* 积分不够也能点：先告诉你还差多少、去哪儿挣，不是一个点不动的灰块 */ .plz-tier button.tp{ font-family:inherit; background:rgba(0,0,0,.16); flex:0 0 auto; white-space:nowrap; } .plz-tier .tp.need{ color:#e6c98d; opacity:.8; border-color:rgba(232,169,79,.34); } .plz-tier .tp.owned{ opacity:.62; cursor:default; border-color:rgba(232,169,79,.28); } #fbMask{ position:fixed; inset:0; z-index:201; display:none; align-items:center; justify-content:center; background:rgba(10,5,2,.72); padding:18px; } #fbMask.on{ display:flex; } #fbCard{ position:relative; width:100%; max-width:330px; max-height:88vh; overflow:auto; box-sizing:border-box; background:linear-gradient(180deg,#2a1810,#1d1108); border:1px solid rgba(240,210,160,.28); border-radius:16px; padding:18px 18px 16px; color:var(--txt); box-shadow:0 16px 48px rgba(0,0,0,.6); } #fbCard h3{ font-size:16px; color:#f7e8c8; letter-spacing:2px; font-weight:600; margin:0 0 4px; text-align:center; } #fbCard .fb-sub{ font-size:12.5px; color:var(--sub); margin:13px 0 8px; line-height:1.5; } #fbCard .fb-stars{ display:flex; gap:6px; justify-content:center; } #fbCard .fb-stars span{ font-size:27px; cursor:pointer; color:rgba(203,186,156,.32); transition:transform .12s; -webkit-tap-highlight-color:transparent; } #fbCard .fb-stars span.on{ color:var(--gold); transform:scale(1.1); } #fbCard .fb-dims{ display:flex; flex-direction:column; gap:8px; } #fbCard .fb-dim{ display:flex; align-items:center; gap:10px; } #fbCard .fb-dim .k{ flex:1; font-size:13px; color:#f7e8c8; } #fbCard .fb-dim .seg{ display:flex; gap:6px; } #fbCard .fb-dim .seg b{ font-size:11px; padding:5px 10px; border-radius:14px; cursor:pointer; border:1px solid rgba(240,210,160,.22); color:var(--sub); background:rgba(255,255,255,.04); -webkit-tap-highlight-color:transparent; } #fbCard .fb-dim .seg b.on{ color:#2a1508; background:var(--gold); border-color:var(--gold); font-weight:600; } #fbCard .fb-nps{ display:flex; gap:8px; } #fbCard .fb-nps b{ flex:1; text-align:center; font-size:13px; padding:8px 0; border-radius:10px; cursor:pointer; border:1px solid rgba(240,210,160,.22); color:var(--sub); background:rgba(255,255,255,.04); -webkit-tap-highlight-color:transparent; } #fbCard .fb-nps b.on{ color:#2a1508; background:var(--gold); border-color:var(--gold); font-weight:600; } #fbCard .fb-words{ width:100%; box-sizing:border-box; margin-top:13px; min-height:64px; padding:9px 11px; border-radius:10px; border:1px solid rgba(240,210,160,.22); background:rgba(255,255,255,.05); color:#fff; font-size:13px; resize:none; font-family:inherit; line-height:1.5; } #fbCard .fb-words::placeholder{ color:rgba(203,186,156,.5); } #fbCard .fb-foot{ margin-top:12px; } #fbCard .fb-hint{ font-size:11px; color:rgba(203,186,156,.6); text-align:center; margin-bottom:9px; line-height:1.4; } .fbHint{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:9px 12px; border-radius:10px; border:1px dashed rgba(232,169,79,.35); background:rgba(255,255,255,.03); font-size:12.5px; color:var(--sub); } .fbHint span{ flex:1; } .fbHint b{ color:var(--gold2); cursor:pointer; font-weight:600; white-space:nowrap; } .fbHint i{ color:rgba(203,186,156,.5); cursor:pointer; font-style:normal; margin-left:2px; padding:2px 4px; } /* ===== 顶部状态栏 ===== */ #hud{ position:relative; z-index:10; display:none; align-items:center; justify-content:space-between; padding:10px 14px; gap:8px; background:linear-gradient(180deg,rgba(23,14,9,.94) 0%,rgba(23,14,9,.78) 100%); border-bottom:1px solid var(--line); } #hud .who{ display:flex; flex-direction:column; min-width:0; } #hud .name{ font-size:14px; font-weight:600; color:var(--gold2); } #hud .role{ font-size:10px; color:var(--gold3); margin-top:1px; } #hud .chap{ text-align:center; flex:1; min-width:0; } #hud .chap .t{ font-size:12px; color:var(--txt); } #hud .chap .b{ font-size:10px; color:var(--gold); margin-top:2px; } #hud .stat{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:3px; } #hud .trust{ font-size:11px; color:var(--gold); } #hud .trust b{ font-size:14px; } #hud .llm{ display:inline-block; padding:2px 9px; font-size:10px; cursor:pointer; color:var(--gold3); border:1px solid var(--line); border-radius:10px; background:transparent; } #hud .llm.on{ color:var(--gold2); border-color:rgba(232,169,79,.6); background:#31200f; } #hud .llm.runse{ color:#ffd98f; border-color:#c08a3e; } #hud .llm.snd{ font-size:10px; padding:2px 8px; } /* v444：声响开关 */ #hud .llm.snd.off{ color:var(--gold3); border-color:var(--line); opacity:.72; } /* ===== 全屏背景（复用老引擎覆盖式做法）===== 时序纪律：图挂拍（beat）上，一拍一图，只在进入新拍那一刻切换； 双层交叉淡化——新图 onload 才淡入、旧图垫底到最后，绝不闪黑闪白 */ #bgLayer{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#20140b; } #bgLayer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; } #bgLayer .bgShade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,7,3,.28) 0%,rgba(13,7,3,.06) 24%,rgba(13,7,3,.14) 55%,rgba(13,7,3,.40) 100%); } /* ===== 牌位名字楷体（v468 · 姐 2026-10-11 反馈）===== 移动端多数机型无楷体（KaiTi / "Kaiti SC" / STKaiti 全不命中 ⇒ 回退 serif ⇒ 中文成黑体）， 故自托管开源「霞鹜文楷 LXGW WenKai」(OFL-1.1)。 v468b：字符集扩到 GB2312∪GBK汉字∪扩展A∪标点/全角/拉丁（17184 码点，含生僻名），按 Unicode 拆 30 片： 浏览器只下载玩家名用到的那 1~2 片（约 160–210KB），不做 5MB 全量加载。 字体栈 PlateKai 优先 ⇒ 跨端字形统一；下载失败再回退系统楷体 / serif。 */ @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/01.woff2?v=469') format('woff2');unicode-range:U+0020-2605;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/02.woff2?v=469') format('woff2');unicode-range:U+2606-3CAA;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/03.woff2?v=469') format('woff2');unicode-range:U+3CB2-4E91;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/04.woff2?v=469') format('woff2');unicode-range:U+4E92-5173;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/05.woff2?v=469') format('woff2');unicode-range:U+5174-541E;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/06.woff2?v=469') format('woff2');unicode-range:U+541F-56C7;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/07.woff2?v=469') format('woff2');unicode-range:U+56C8-59A1;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/08.woff2?v=469') format('woff2');unicode-range:U+59A2-5CBE;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/09.woff2?v=469') format('woff2');unicode-range:U+5CBF-5FD9;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/10.woff2?v=469') format('woff2');unicode-range:U+5FDC-62E2;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/11.woff2?v=469') format('woff2');unicode-range:U+62E3-65CE;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/12.woff2?v=469') format('woff2');unicode-range:U+65CF-68BC;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/13.woff2?v=469') format('woff2');unicode-range:U+68BD-6C02;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/14.woff2?v=469') format('woff2');unicode-range:U+6C04-6EE6;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/15.woff2?v=469') format('woff2');unicode-range:U+6EE7-7259;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/16.woff2?v=469') format('woff2');unicode-range:U+725A-7553;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/17.woff2?v=469') format('woff2');unicode-range:U+7554-7869;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/18.woff2?v=469') format('woff2');unicode-range:U+786A-7BAA;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/19.woff2?v=469') format('woff2');unicode-range:U+7BAB-7EC4;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/20.woff2?v=469') format('woff2');unicode-range:U+7EC5-8196;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/21.woff2?v=469') format('woff2');unicode-range:U+8197-84A0;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/22.woff2?v=469') format('woff2');unicode-range:U+84A1-8822;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/23.woff2?v=469') format('woff2');unicode-range:U+8823-8B90;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/24.woff2?v=469') format('woff2');unicode-range:U+8B92-8E64;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/25.woff2?v=469') format('woff2');unicode-range:U+8E66-9162;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/26.woff2?v=469') format('woff2');unicode-range:U+9163-9490;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/27.woff2?v=469') format('woff2');unicode-range:U+9491-973D;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/28.woff2?v=469') format('woff2');unicode-range:U+973E-9A64;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/29.woff2?v=469') format('woff2');unicode-range:U+9A65-9D63;} @font-face{font-family:'PlateKai';font-style:normal;font-weight:400;font-display:swap;src:url('font/pk2/30.woff2?v=469') format('woff2');unicode-range:U+9D64-FFE8;} /* ===== 牌位叠字层（v440 · 015）：挂牌图上叠「绣鸾」＋「{玩家名}」（底图「清清」保留）===== 底图 object-fit:cover（3:4 铺进 ~1:1 屏 ⇒ 竖向裁切）⇒ 叠字按 cover 几何换算，不按容器百分比。 竖排金色楷体；切走即清空；resize 重算。 */ /* ===== 入梦过渡·转花（v505：首图加载约 1s 黑屏 ⇒ 转动的花 + 文案托底，图 onload 即淡出）===== */ #ldFlower{ position:absolute; inset:0; z-index:3; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; opacity:1; transition:opacity .5s ease; } #ldFlower.off{ opacity:0; } #ldFlower .ld-f{ animation:ldSpin 3.6s linear infinite; } #ldFlower .ld-f svg{ display:block; filter:drop-shadow(0 0 14px rgba(232,169,79,.32)); } #ldFlower .ld-txt{ font-family:"Noto Serif SC","Songti SC",serif; font-size:12px; color:rgba(232,200,160,.72); letter-spacing:4px; } @keyframes ldSpin{ to{ transform:rotate(360deg); } } #plateLayer{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .8s ease; } /* v486：与 #bgLayer img 同参（.8s ease）⇒ 名字跟牌子同步渐显渐隐（opacity 由 setBg onload 统一驱动） */ #plateLayer .plateName{ position:absolute; transform:translate(-50%,-50%); writing-mode:vertical-rl; text-orientation:upright; white-space:nowrap; color:#ECC77A; /* v488：字体颜色与粗细退回 v486 前原样（姐 2026-10-13：v486 改色加粗反而更暗更粗）；v486 的渐显渐隐同步保留 */ font-family:'PlateKai', "Kaiti SC", "STKaiti", "KaiTi", "Kaiti TC", "DFKai-SB", "华文楷体", "华文行楷", "楷体", "AR PL UKai CN", "KaiTi_GB2312", serif; line-height:1; letter-spacing:.06em; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.75); -webkit-text-stroke:0.5px rgba(70,35,5,.6); } /* ===== v521 创世百花：序章挂牌场景叠加的创世小木牌墙 overlay ===== */ .cv-map-row{ display:flex; gap:8px; justify-content:center; margin:10px auto 2px; } .cv-map{ display:block; margin:0; background:transparent; cursor:pointer; border:1px solid rgba(232,169,79,.30); border-radius:4px; padding:6px 13px; color:rgba(240,220,180,.80); font-size:12px; letter-spacing:1px; font-family:'PlateKai',"Kaiti SC","STKaiti","KaiTi",serif; } .cv-map:active{ background:rgba(232,169,79,.18); border-color:rgba(232,169,79,.55); } .cv-map.go{ border-color:rgba(232,169,79,.62); color:#ffdda0; } /* v530（姐真机）：面板悬 bottom:170 正好压在字幕中间挡字 → 改挂进 #talk 内、 锚其顶沿（bottom:100%）＝贴画面底沿、正好在「盼儿/序章」头行上方（姐截图红框位）。 #talk 无 overflow（mode-pure 才 hidden）⇒ 默认态面板完整浮在画面下沿； 三态切换时随 #talk 边界自动跟走，无需 JS 重算。 */ #genesisWall{ position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); z-index:40; width:min(88vw, 324px); pointer-events:none; opacity:0; transition:opacity .7s ease; } #genesisWall.on{ opacity:1; } #genesisWall .gw-card{ background:rgba(26,16,38,.88); border:1px solid rgba(232,169,79,.34); border-radius:12px; padding:10px 10px 8px; box-shadow:0 8px 28px rgba(0,0,0,.55); position:relative; } /* v526b 血泪：pointer-events:auto 若挂常驻卡片，opacity:0 隐身态也拦点击—— 面板钉在对话区上方，隐身时把那一片的 tap 全吃掉（v524 真机回归抓到）。 可点收起只在 .on（可见）态放行。 */ #genesisWall.on .gw-card{ pointer-events:auto; cursor:pointer; } #genesisWall .gw-x{ position:absolute; top:5px; right:9px; font-size:13px; color:rgba(232,169,79,.75); } #genesisWall .gw-tip{ text-align:center; font-size:9.5px; color:rgba(232,169,79,.55); letter-spacing:1px; margin-top:6px; } #genesisWall .gw-h{ display:flex; align-items:center; justify-content:center; gap:6px; font-family:"Noto Serif SC","Songti SC",serif; color:#E8C88A; font-size:12px; letter-spacing:3px; margin-bottom:8px; } /* v533l：前百留名说明行（姐拍板：说明前百名字永久留墙 + 万人传颂） */ #genesisWall .gw-sub{ font-size:10px; color:rgba(232,200,138,.72); line-height:1.6; text-align:center; letter-spacing:.5px; margin:-3px 2px 7px; } #genesisWall .gw-list{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px 6px; max-height:30vh; overflow-y:auto; } #genesisWall .gw-plate{ font-family:'PlateKai',"Kaiti SC","STKaiti","KaiTi",serif; color:#d8c09a; font-size:12px; text-align:center; padding:3px 1px; background:linear-gradient(180deg, rgba(120,84,46,.42), rgba(78,52,28,.42)); border:1px solid rgba(200,150,90,.28); border-radius:4px; line-height:1.25; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #genesisWall .gw-plate .gw-no{ display:block; font-size:8px; color:rgba(232,169,79,.7); letter-spacing:0; line-height:1; margin-bottom:1px; } #genesisWall .gw-plate.me{ border-color:#E8C88A; color:#ffe0a0; background:linear-gradient(180deg, rgba(226,180,120,.3), rgba(120,70,30,.3)); } /* ===== 照镜子 reveal（v460 · 卡 T-20261011-004）====== 换脸后第一次看见「镜中是自己」——一句金字，两道光边，纯展示不操作 */ .mirrorReveal{ margin:14px 16px; text-align:center; animation:mrIn .9s ease both; } .mirrorReveal .mr-line{ display:inline-block; font-family:"Noto Serif SC","Songti SC",serif; font-size:17px; letter-spacing:7px; color:#f7e8c8; padding:9px 6px 9px 13px; border-top:1px solid rgba(232,169,79,.38); border-bottom:1px solid rgba(232,169,79,.38); text-shadow:0 0 12px rgba(232,169,79,.55), 0 1px 3px rgba(0,0,0,.85); } @keyframes mrIn{ from{opacity:0; transform:translateY(6px) scale(.98);} to{opacity:1; transform:none;} } /* ===== 说话人头像（v1009：取消顶部头像条，头像改挂在每条对话气泡的人名前 · 老引擎 .dlg-avatar 同款）===== */ .say-ava{ position:relative; width:34px; height:34px; border-radius:50%; flex:0 0 auto; cursor:pointer; border:1.5px solid var(--line); background:#2a1a0c; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.5); } .say-ava:active{ transform:scale(.94); } .say-ava.empty{ visibility:hidden; } /* 老引擎头像双层结构（index.html v165 #1259 同款）：emoji 铺底层 + img 绝对定位盖脸， 图 404 时 img 自删露出 emoji，零闪烁零空白。object-position:center 22% 对准 3:4 立绘的脸。 */ .npc-av-emo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; background:radial-gradient(circle at 35% 30%, #3a2410, #1d1108); } .npc-av-img{ position:absolute; inset:0; width:100%; height:100%; max-width:100%; max-height:100%; display:block; object-fit:cover; object-position:center 22%; opacity:1; transition:opacity .22s ease; } /* 说话中：头像金环呼吸 + 轻微放大，说话人一眼可见（打字结束自动停） */ @keyframes avaSpeak{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } .say-ava.speaking{ animation:avaSpeak 1.05s ease-in-out infinite; border-color:#f2c87c; box-shadow:0 0 0 3px rgba(232,169,79,.3), 0 0 18px rgba(232,169,79,.6); } /* ===== 名帖浮层（点头像 → 彼此关系介绍）===== */ #relMask{ position:absolute; inset:0; z-index:55; display:none; align-items:flex-end; background:rgba(8,4,2,.62); } #relCard{ width:100%; background:linear-gradient(180deg,#2c1b0d 0%,#180e07 100%); border-top:1px solid rgba(232,169,79,.45); border-radius:18px 18px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom)); animation:relUp .28s ease; } @keyframes relUp{ from{ transform:translateY(48px); opacity:0; } to{ transform:none; opacity:1; } } #relCard .rc-top{ display:flex; gap:14px; align-items:center; } #relCard .rc-ava{ position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden; flex:0 0 auto; border:2px solid rgba(232,169,79,.75); box-shadow:0 0 18px rgba(232,169,79,.4); background:#2a1a0c; } #relCard .rc-ava .npc-av-emo{ font-size:36px; } #relCard .rc-name{ font-size:19px; color:var(--gold2); font-weight:600; letter-spacing:2px; } #relCard .rc-role{ font-size:12px; color:var(--gold); margin-top:5px; letter-spacing:1px; } #relCard .rc-rel{ margin-top:14px; font-size:13px; line-height:1.95; color:var(--txt); } #relCard .rc-close{ display:block; width:100%; margin-top:16px; padding:10px 0; border:1px solid rgba(245,217,168,.4); border-radius:10px; background:transparent; color:var(--sub); font-size:12px; letter-spacing:3px; cursor:pointer; } /* ===== 中部：对话区（浮在全屏背景上，文字自带 60% 底板）===== */ #screen{ flex:1; position:relative; z-index:2; overflow-y:auto; padding:12px 13px 8px; /* v430：收边腾可视区 */ scroll-behavior:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* 学老引擎 index.html「screen-navpad」：对话流底部按 dock/inputBar 实测高度动态留白， 保证最后一句永远浮在操作区上沿之上，不被「继续 ▸」压住。 高度由 JS syncNavpad() 写入 --dockH（含 inputBar + 安全区）。 */ #screen{ padding-bottom:var(--dockPad, 14px); } #screen::-webkit-scrollbar{ width:0; } /* v433：拍名标签去重 —— 原 #beatTag（HUD 下面的独立一行）与 HUD 里的 #hBeat 显示同一个拍名＝屏幕上有两个「① 铺垫」。姐要求删下面那个：拍名**只留 HUD 一处**， #beatTag 整个撤除（DOM/CSS/赋值三处），顺带省一行纵向空间。 */ /* ── 三层对话视觉分工（姐要求：说话框跟旁白必须分得开）── 旁白 narr：无气泡/无描边、居中、字小色淡、前后缀破折号 = 环境与心里描写 说话 say ：名字进气泡内顶部 + 左金竖条 + 左上小尾巴 = 谁在说，一眼分明 玩家 mine：右对齐、红金渐变、右侧竖条 + 「我」角标 */ .line.narr{ text-align:center; margin:0 auto 14px; padding:3px 12px; max-width:96%; /* v430：距/宽微调腾空间 */ font-size:13.5px; line-height:1.88; color:var(--sub); letter-spacing:.8px; background:rgba(12,7,3,.5); border-radius:8px; } .line.narr::before{ content:'— '; opacity:.32; } .line.narr::after{ content:' —'; opacity:.32; } .line.say{ display:flex; flex-direction:row; align-items:flex-start; gap:8px; margin:0 0 14px; } .line.say .bubble{ max-width:82%; } /* v434：自由对话 —— 人名+动作/神态提到气泡上方一行（替掉旧「（灵犀接话）」），气泡只留正文 （姐 2026-10-09：兰框里人名与上面的标签重复了） */ .line.say.stack{ flex-direction:column; align-items:stretch; gap:3px; } .line.say.stack > .who{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 6px; font-size:10.5px; color:var(--gold2); letter-spacing:2.5px; font-weight:600; padding-left:4px; } .line.say.stack > .who .act{ color:var(--gold3); font-weight:400; letter-spacing:.4px; font-size:11px; } .line.say.stack .sayRow{ display:flex; flex-direction:row; align-items:flex-start; gap:8px; } .bubble{ position:relative; max-width:88%; padding:9px 14px 11px; font-size:14.5px; line-height:1.78; color:var(--txt); background:rgba(44,27,10,.66); border:1px solid rgba(232,169,79,.32); border-left:2.5px solid var(--gold2); border-radius:3px 16px 16px 16px; animation:bubbleIn .22s ease; } /* v1009 反馈5：人名与动作/神态（…）同一行（人名在前），正文另起一行 —— 省一行纵向空间 */ .bubble .who{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 6px; font-size:10.5px; color:var(--gold2); letter-spacing:2.5px; margin:0 0 5px; font-weight:600; } .bubble .who .act{ color:var(--gold3); font-weight:400; letter-spacing:.4px; font-size:11px; } .bubble .tx{ min-height:1.2em; } .bubble .tx.typing::after{ content:'▌'; color:var(--gold2); margin-left:1px; animation:caretBlink .55s steps(1) infinite; } @keyframes caretBlink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } } @keyframes bubbleIn{ from{ opacity:0; transform:translateY(7px) scale(.985); } to{ opacity:1; transform:none; } } /* v1009：玩家头像 —— 气泡右对齐 + 头像挂在最右（与 NPC 气泡同款 34px 圆头像） */ .line.mine{ display:flex; justify-content:flex-end; align-items:flex-start; gap:8px; margin:0 0 16px; } .line.mine .bubble{ max-width:82%; padding:9px 13px 10px; font-size:14px; line-height:1.7; color:#ffe9c9; background:linear-gradient(180deg,rgba(104,36,22,.74),rgba(62,22,11,.74)); border:1px solid rgba(255,150,110,.42); border-left:none; border-right:2.5px solid #ff9a6e; border-radius:16px 3px 16px 16px; } .line.mine .bubble::before{ content:'我'; display:block; font-size:10px; letter-spacing:2px; color:rgba(255,214,180,.72); margin:0 0 5px; text-align:right; } .line.think{ font-size:11px; color:var(--gold3); margin:0 0 12px; padding-left:4px; } /* 灵犀掉线告警条：要一眼看见（截图里连续两条一样的冷兜底，看不出是模型挂了） */ .line.think.llmwarn{ margin:0 0 12px; padding:8px 11px; font-size:11.5px; line-height:1.6; color:#ffd9a8; background:rgba(120,44,20,.55); border:1px solid rgba(232,120,60,.55); border-radius:8px; letter-spacing:.3px; } .line.after{ margin:12px 0 16px; padding:11px 13px; font-size:13px; line-height:1.8; color:var(--sub); background:rgba(34,15,7,.62); border-left:2px solid var(--red); border-radius:0 8px 8px 0; } /* ===== 拍分隔 ===== */ .beatDiv{ display:flex; align-items:center; gap:10px; margin:14px 0 10px; font-size:10px; color:var(--gold3); letter-spacing:2px; } .beatDiv::before,.beatDiv::after{ content:''; flex:1; height:1px; background:var(--line); } /* ===== 介入卡 ===== */ .intervene{ margin:16px 0 4px; padding:12px 14px; text-align:center; background:rgba(24,14,6,.66); border:1px solid rgba(232,169,79,.5); border-radius:12px; font-size:13px; color:var(--gold); letter-spacing:3px; font-weight:600; } .intervene small{ display:block; margin-top:5px; font-size:10px; color:var(--gold3); letter-spacing:1px; font-weight:400; } .ivCtx{ margin:10px 0 2px; padding:10px 12px; opacity:.92; background:rgba(20,12,6,.6); border:1px dashed var(--line); border-radius:10px; font-size:12px; line-height:1.7; color:var(--sub); } .ivCtx .ivCtxTip{ font-size:10px; color:var(--gold); letter-spacing:2px; margin-bottom:4px; opacity:.85; } .chapCard{ margin:6px 0 4px; padding:16px 14px; text-align:center; background:rgba(24,14,6,.62); border:1px solid var(--line); border-radius:14px; } .chapCard .ct{ font-size:16px; color:var(--gold2); letter-spacing:3px; font-weight:600; } .chapCard .cs{ margin-top:7px; font-size:12px; color:var(--sub); line-height:1.8; } .endCard{ text-align:center; padding:40px 20px; } .endCard .big{ font-size:21px; color:var(--gold2); letter-spacing:4px; margin-bottom:12px; } .endCard .sub{ font-size:13px; color:var(--sub); line-height:2; } .endCard .trust{ margin-top:20px; font-size:14px; color:var(--gold2); } .endCard .trust b{ color:var(--gold); font-size:19px; } /* ===== 抉择 ===== */ .choiceWrap{ display:flex; flex-direction:column; gap:9px; } .choiceTitle{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gold); letter-spacing:2px; font-weight:600; padding:0 2px 2px; } .choiceTitle .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:0 0 auto; animation:pulseDot 1.4s ease-in-out infinite; } @keyframes pulseDot{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} } .choicePrompt{ font-size:12px; color:var(--sub); margin-bottom:2px; line-height:1.7; padding:9px 12px; background:rgba(24,14,6,.66); border-left:2px solid var(--gold2); border-radius:0 6px 6px 0; } .choiceBtn{ display:block; width:100%; padding:13px; text-align:left; font-size:14px; line-height:1.6; color:var(--txt); background:rgba(36,22,9,.66); border:1px solid var(--line); border-radius:12px; cursor:pointer; } .choiceBtn:active{ transform:scale(.98); border-color:var(--gold); background:var(--card2); } .choiceBtn b{ color:var(--gold2); } .choiceBtn .idx{ display:inline-block; min-width:20px; margin-right:6px; color:var(--gold); font-weight:700; } /* v542e：绮罗榜两区标题（十大美人／十大候选美人） */ .plz-sec-t{ margin:10px 0 6px; font-size:11px; color:var(--gold2); letter-spacing:2px; } .plz-sec-t:first-child{ margin-top:2px; } .choiceBtn .hint{ display:block; margin-top:5px; font-size:11px; color:var(--gold3); } /* ===== 剧内取名卡（序幕 name 节点 · v433 收成一行：🎲 + 输入 + 挂牌）===== */ .nameCard{ display:flex; align-items:center; gap:8px; margin:8px 0 12px; padding:10px 12px; background:rgba(24,14,6,.66); border:1px solid rgba(232,169,79,.5); border-radius:12px; } #npDice{ flex:0 0 auto; width:38px; height:38px; padding:0; font-size:19px; line-height:1; color:var(--gold2); background:#31200f; border:1px solid rgba(232,169,79,.5); border-radius:10px; cursor:pointer; } #npDice:active{ transform:scale(.94); } #npDice.roll{ animation:npDiceSpin .32s ease; } @keyframes npDiceSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } #npInput{ flex:1; min-width:0; padding:9px 11px; font-size:13px; color:var(--txt); background:#2a1a0c; border:1px solid var(--line); border-radius:10px; outline:none; } #npInput::placeholder{ color:var(--gold3); } #npOk{ flex:0 0 auto; padding:0 16px; height:38px; border:none; border-radius:10px; background:#6b5335; color:#e8dcc4; font-size:13px; letter-spacing:2px; cursor:pointer; } #npOk.on{ background:var(--red); color:#ffe9c9; } /* v542d：「就用阿阮」＝次级 ghost 款（此前无样式=浏览器白底默认钮，姐截图反馈潦草）。 主次：挂这个名=实底可变红；就用阿阮=透明底金描边金字，同高同圆角同字号。 */ #npUseAruan{ flex:0 0 auto; padding:0 14px; height:38px; border:1px solid rgba(232,169,79,.55); border-radius:10px; background:transparent; color:var(--gold2); font-size:13px; letter-spacing:2px; cursor:pointer; } #npUseAruan:active{ transform:scale(.96); } /* ===== 底部操作区 ===== */ #dock{ position:relative; z-index:10; padding:12px 16px 6px; background:linear-gradient(0deg,rgba(29,17,8,.96) 30%,rgba(29,17,8,.8) 100%); border-top:1px solid var(--line); } /* v435：dock 里没有真按钮（只剩那条隐形的「轻触继续」浮层）⇒ **整条收起**（padding/border/底色全去）， 纵向空间全让给对话区（姐 2026-10-09：提示收起了、小区域不收＝白隐藏）。 */ #dock.bare{ padding:0; border-top:0; background:none; } /* v433：轻触继续提示改**浮层**（absolute，不占 dock 高度 ⇒ 绝不推高聊天），默认收起。 首屏显示一次作教学；久不动（7s）再浮出；玩家一操作即收起（显隐逻辑见 JS dockNext/onUserAct）。 */ .contHint{ position:absolute; left:0; right:0; bottom:0; z-index:12; pointer-events:none; text-align:center; font-size:12px; color:var(--gold3); letter-spacing:3px; padding:7px 0 5px; background:linear-gradient(0deg, rgba(17,10,4,.88) 44%, rgba(17,10,4,0)); opacity:0; transition:opacity .3s ease; } .contHint.show{ opacity:1; animation:contBreath 1.7s ease-in-out infinite; } .contHint b{ color:var(--gold); font-size:11px; } /* v518 A：新手「轻触屏幕继续」呼吸箭头（absolute 覆盖对话区底部：不占布局、pointer-events:none 不挡点击） */ #advCoach{ position:absolute; left:0; right:0; bottom:54px; z-index:14; pointer-events:none; text-align:center; opacity:0; transition:opacity .45s ease; } #advCoach.show{ opacity:1; } #advCoach .ac-txt{ display:inline-block; font-size:12.5px; color:var(--gold); letter-spacing:2px; text-shadow:0 2px 10px #000, 0 0 6px rgba(0,0,0,.9); } #advCoach .ac-arw{ display:block; margin:3px auto 0; font-size:20px; line-height:1; color:var(--gold); text-shadow:0 2px 10px #000, 0 0 6px rgba(0,0,0,.9); animation:acBreath 1.5s ease-in-out infinite; } @keyframes acBreath{ 0%,100%{ transform:translateY(-4px); opacity:.4; } 50%{ transform:translateY(4px); opacity:1; } } /* v524·首拍全屏引导幕：诚实版数据 20 人卡在 q_pro beat=0（停留中位 16.7s）= 看不懂要干嘛。 这层比#advCoach 强在：① 覆盖面积大（整个 #view）② 文字直白（「点一下 继续」）③ 呼吸圈是「可点」信号。 ⚠️ z-index 17（高于 #advCoach 的 14，低于任何全屏墙的 200+）⇒ 永远被墙压住，不会盖住弹窗。 ⚠️ pointer-events:none ⇒ 绝不吞掉玩家的点击（点了是「继续」，不是「点幕布」）。 ⚠️ 渐入用「插入后强制回流再置opacity」—— 单文件 H5 老坑（过渡秒变）。 */ #qBeatCoach{ position:absolute; inset:0; z-index:17; pointer-events:none; display:flex; align-items:center; justify-content:center; flex-direction:column; background:radial-gradient(ellipse at 50% 62%, rgba(0,0,0,.30) 0%, rgba(0,0,0,.52) 70%); opacity:0; transition:opacity .42s ease; } #qBeatCoach.show{ opacity:1; } #qBeatCoach .qbc-t{ font-size:19px; color:#FFEFC8; letter-spacing:6px; font-weight:700; text-shadow:0 2px 14px #000, 0 0 22px rgba(201,162,90,.55); margin-bottom:20px; animation:qbcTxt 1.4s ease-in-out infinite; } #qBeatCoach .qbc-r{ width:84px; height:84px; border-radius:50%; position:relative; border:2px solid rgba(232,198,128,.95); box-shadow:0 0 30px rgba(232,198,128,.5) inset, 0 0 26px rgba(232,198,128,.4); display:flex; align-items:center; justify-content:center; font-size:32px; color:#F0CA84; line-height:1; animation:qbcBreath 1.4s ease-in-out infinite; } #qBeatCoach .qbc-r::before, #qBeatCoach .qbc-r::after{ content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(232,198,128,.8); animation:qbcRipple 1.9s ease-out infinite; } #qBeatCoach .qbc-r::after{ animation-delay:.95s; } #qBeatCoach .qbc-s{ margin-top:18px; font-size:12px; color:rgba(240,214,150,.9); letter-spacing:2px; text-shadow:0 2px 8px #000; } @keyframes qbcBreath{ 0%,100%{ transform:scale(.86); opacity:.6; } 50%{ transform:scale(1.1); opacity:1; } } @keyframes qbcRipple{ 0%{ transform:scale(.75); opacity:.85; } 100%{ transform:scale(2.2); opacity:0; } } @keyframes qbcTxt{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } } /* ===== v526 · 进章题签：进章先给「序幕/第N章」两个字，聊天流钉顶从章题卡读起 ===== */ #chapSplash{ position:fixed; inset:0; z-index:149; pointer-events:none; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 46%, rgba(10,5,2,.88) 0%, rgba(10,5,2,.96) 100%); opacity:0; transition:opacity .55s ease; } #chapSplash.on{ opacity:1; } #chapSplash .spw{ text-align:center; } #chapSplash .sp-t{ font-family:'PlateKai',"Kaiti SC","STKaiti","KaiTi",serif; font-size:44px; color:#F2E4C0; letter-spacing:14px; text-indent:14px; text-shadow:0 0 34px rgba(226,180,100,.5); } #chapSplash .sp-s{ margin-top:12px; font-size:13px; color:rgba(226,190,120,.85); letter-spacing:4px; } /* ===== v528 · 三次聚光新手引导（取代 v518 呼吸箭头 / v524 全屏幕 / v526 全屏题签）===== 4 块 mask 挖洞 + 呼吸金框 + 文案气泡；洞内点真实元素、洞外点被 mask 拦截。 z-index 150：高于常规内容，低于登录墙等全屏弹窗（200+）。 mask 才是拦截层（pointer-events:auto），高亮框/气泡 pointer-events:none（点击穿透到真实元素）。 */ #guideSpot{ position:absolute; inset:0; z-index:150; pointer-events:none; } #guideSpot .gs-mask{ position:absolute; background:rgba(8,5,12,.62); pointer-events:auto; backdrop-filter:blur(1px); } #guideSpot .gs-hl{ position:absolute; border:2px solid var(--gold); border-radius:8px; pointer-events:none; animation:gsPulse 1.5s ease-in-out infinite; } @keyframes gsPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,169,79,0), 0 0 10px 0 rgba(232,169,79,.15); } 50%{ box-shadow:0 0 0 6px rgba(232,169,79,.12), 0 0 20px 2px rgba(232,169,79,.3); } } #guideSpot .gs-tip{ position:absolute; left:50%; transform:translateX(-50%); max-width:84%; padding:8px 18px; border-radius:999px; background:rgba(20,12,28,.94); border:1px solid var(--gold); color:var(--gold); font-size:13px; letter-spacing:1px; white-space:nowrap; text-align:center; pointer-events:none; box-shadow:0 4px 18px rgba(0,0,0,.55); animation:gsBob 1.6s ease-in-out infinite; } @keyframes gsBob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-4px); } } /* v529：聚光②③切态后的「再点一下」小气泡（撤了遮罩后的唯一引导物，绝不挡点击） */ #stage .gs-tip2{ position:absolute; left:50%; transform:translateX(-50%); max-width:84%; padding:8px 18px; border-radius:999px; background:rgba(20,12,28,.9); border:1px solid var(--gold); color:var(--gold); font-size:13px; letter-spacing:1px; white-space:nowrap; text-align:center; pointer-events:none; z-index:151; box-shadow:0 4px 18px rgba(0,0,0,.55); animation:gsBob 1.6s ease-in-out infinite; } /* v529：积分飘字（姐拍板：奖励积分要可见有动画），pointer-events:none 不挡任何操作 */ .guideFx{ position:fixed; left:50%; top:38%; transform:translateX(-50%); z-index:300; padding:10px 22px; border-radius:999px; background:rgba(20,12,28,.95); border:1px solid var(--gold); color:var(--gold); font-size:16px; letter-spacing:2px; pointer-events:none; white-space:nowrap; box-shadow:0 6px 24px rgba(0,0,0,.6), 0 0 18px rgba(232,169,79,.35); animation:gfxUp 1.4s ease-out forwards; } @keyframes gfxUp{ 0%{ opacity:0; transform:translateX(-50%) translateY(18px) scale(.85); } 18%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1.06); } 32%{ transform:translateX(-50%) translateY(0) scale(1); } 72%{ opacity:1; } 100%{ opacity:0; transform:translateX(-50%) translateY(-34px) scale(1); } } /* v533k（姐 2026-10-17）：取名跑带灯从「整卡外沿」挪到「取名输入框」—— 此前光绕整张卡的外围转（姐反馈「在外围跑，不要」），现改为 npInpWrap 常驻 lead-on， 与对话框（q-inp-wrap）完全同款：光贴着取名小框内侧跑。挂牌随卡一起消失。 */ /* v524·形象犹豫提示：49 人反复切形象但只 35% 最终取名 ⇒ 给个外部锚点。 设计克制：只是单选行下方的一行小字，不是弹窗、不遮挡、不阻断。 */ #cvHint{ margin-top:10px; font-size:11.5px; line-height:1.7; color:var(--gold3); letter-spacing:.6px; text-align:center; opacity:0; transform:translateY(-3px); transition:opacity .4s ease, transform .4s ease; pointer-events:none; } #cvHint.show{ opacity:1; transform:translateY(0); } #cvHint b{ color:var(--gold); font-weight:600; } /* v445 微回应点（轻回应 chip 行，dock 里「继续」之上；可不理） */ .lightRow{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .lightRow .lt{ width:100%; text-align:center; font-size:10.5px; color:var(--gold3); letter-spacing:1px; } .lightChip{ padding:6px 14px; border-radius:16px; font-size:12.5px; line-height:1.2; color:var(--gold2); background:var(--card2); border:1px solid var(--line); } .lightChip:active{ transform:scale(.96); border-color:var(--gold); } .lightChip.used{ opacity:.4; } @keyframes contBreath{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } } .btn{ display:block; width:100%; padding:13px; text-align:center; font-size:14px; color:var(--txt); background:rgba(58,37,16,.72); border:1px solid var(--line); border-radius:12px; cursor:pointer; } .btn:active{ transform:scale(.98); opacity:.85; } .btn.primary{ background:var(--red); border:none; color:#ffe9c9; font-weight:600; } #inputBar{ position:relative; z-index:10; display:none; align-items:center; gap:8px; padding:9px 16px calc(9px + env(safe-area-inset-bottom)); background:linear-gradient(0deg,rgba(29,17,8,.96) 30%,rgba(29,17,8,.8) 100%); border-top:1px solid var(--line); } #freeInput{ flex:1; min-width:0; padding:9px 11px; font-size:13px; color:var(--txt); background:#2a1a0c; border:1px solid var(--line); border-radius:10px; outline:none; } #freeInput::placeholder{ color:var(--gold3); } #freeInput:disabled{ opacity:.45; } #freeSend{ flex:0 0 auto; font-size:12px; padding:8px 14px; border-radius:10px; border:none; background:var(--red); color:#ffe9c9; cursor:pointer; } #freeSend:disabled{ opacity:.45; } /* ══════ v424 画面层序（照搬老引擎 v280 #1410 + v299 #1445 + v302）══════ ① 对话渐隐：容器 42% 处开始淡、24% 处完全看不见 —— 上头的旧话飘走，背景图露得更真。 消息从下往上堆（::before margin-top:auto），短对话也贴在实区不跑进透明带。 手碰聊天区（想上下滑）⇒ 加 .chat-solid 全部转实，停 10s 自动淡回。 ② 输入框跑带灯：.q-inp-wrap 加 2px padding + overflow:hidden 裁圆，里面塞 560px 旋转 conic 渐变，输入框自己盖一层底色当灯罩，露出的正好是 2px 宽的跑动光带。 刻意不用 mask/@property（老 XWEB 不稳），纯 transform:rotate，最差退化成一圈静止金边。 */ #screen{ /* v1009 分屏：对话区只占下半屏，渐隐带按比例必须更窄（原 31% 在半屏里等于吃掉整块顶）。 只留约 12% 柔和顶边——旧话往上飘走、新话从底部出，永远清楚。 */ -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 5%,#000 12%); mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 5%,#000 12%); } #screen.chat-solid{ -webkit-mask-image:none; mask-image:none; } /* v424b：章节开场阶段（章节卡在场 + 还没人开口）全显，读完开场再渐隐 */ #screen.no-fade{ -webkit-mask-image:none; mask-image:none; } /* v430：滚到顶 ⇒ 顶部改浅渐入——长旁白开头完整可读（此前 0~24% 全透明永远吃掉开头）。 离顶即恢复氛围渐隐；scroll 监听在 screenEl 定义处挂。 */ #screen.at-top{ -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,#000 9%); mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,#000 9%); } /* 消息从下往上堆：空 flex item 吃掉上方剩余空间，把 #flow 顶到底部实区 */ #screen::before{ content:''; margin-top:auto; } @keyframes qLeadRun{ to{ transform:rotate(360deg) } } .q-inp-wrap{ position:relative; flex:1; min-width:0; display:flex; border-radius:12px; } .q-inp-wrap #freeInput, .q-inp-wrap #npInput{ flex:1; min-width:0; width:100%; } .q-inp-wrap.lead-on{ padding:2px; overflow:hidden; } .q-inp-wrap.lead-on::before{ content:''; position:absolute; left:50%; top:50%; width:560px; height:560px; margin:-280px 0 0 -280px; background:conic-gradient(from 0deg,rgba(255,209,128,0) 0 50%,rgba(255,209,128,.92) 72%,rgba(255,160,220,.96) 86%,rgba(255,209,128,0) 100%); animation:qLeadRun 1.7s linear infinite; pointer-events:none; z-index:0; } .q-inp-wrap.lead-on #freeInput, .q-inp-wrap.lead-on #npInput{ position:relative; z-index:1; background:#2a1a0c; border-color:transparent; } /* v465：整章换脸后台生成进度条（顶部居中 · 不挡画面与字幕） */ #faceFillPill{ position:fixed; left:50%; top:12px; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; align-items:center; gap:5px; max-width:78%; padding:7px 14px; border-radius:14px; background:rgba(29,19,48,.86); border:1px solid rgba(232,169,79,.42); box-shadow:0 6px 20px rgba(0,0,0,.45); color:#ffd2e7; font-size:12px; line-height:1.4; pointer-events:none; opacity:0; transition:opacity .3s; } #faceFillPill.on{ opacity:1; } #faceFillPill .ff-bar{ display:block; width:150px; height:4px; border-radius:2px; background:rgba(255,255,255,.18); overflow:hidden; } #faceFillPill .ff-bar i{ display:block; height:100%; width:0%; border-radius:2px; background:linear-gradient(90deg,#e8a94f,#f7d9a0); transition:width .4s; } /* ===== v469g（姐 2026-10-12）：内页顶部条（‹首页 + 用户头像）===== 浮在上半屏（#view）顶部，左「‹ 首页」回封面、右圆形头像开账号面板（同封面 #cvUser）。 容器 pointer-events:none（点击穿透到 #view，保留「点画面切三态」），仅按钮 auto。 */ #gameTop{ position:absolute; top:0; left:0; right:0; z-index:50; display:none; align-items:center; justify-content:space-between; padding:10px 12px; pointer-events:none; } #gameTop.on{ display:flex; } #gameTop .gt-left{ display:flex; align-items:center; gap:8px; } #gameTop .gt-plaza{ pointer-events:auto; width:34px; height:34px; padding:0; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; color:#f0cf8e; background:rgba(23,14,9,.5); border:1px solid rgba(240,210,160,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #gameTop .gt-plaza:active{ background:rgba(70,42,16,.85); } #gameTop .gt-home{ pointer-events:auto; display:inline-flex; align-items:center; gap:2px; padding:5px 12px 5px 9px; border-radius:999px; cursor:pointer; font-size:12px; letter-spacing:1px; color:#f0cf8e; background:rgba(23,14,9,.5); border:1px solid rgba(240,210,160,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #gameTop .gt-home:active{ background:rgba(70,42,16,.85); } #gameTop .gt-user{ pointer-events:auto; width:34px; height:34px; padding:0; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(23,14,9,.46); border:1.5px solid rgba(240,210,160,.4); color:#f0cf8e; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #gameTop .gt-user:active{ background:rgba(70,42,16,.85); } #gameTop .gt-user.logged{ border-color:rgba(232,169,79,.9); box-shadow:0 0 0 1.5px rgba(232,169,79,.22); } #gameTop .gt-user svg{ width:19px; height:19px; display:block; } #gameTop .gt-user .gt-init{ font-size:13px; font-weight:700; color:#ffe9c9; line-height:1; } /* ===== v469g：回看模式（上滑翻记录）===== #screen 离底 ⇒ #stage 加 .review：顶部飘一条「回看中·不出声」，右侧浮现已走过的章节。 */ #reviewHint{ position:absolute; top:50px; left:50%; transform:translateX(-50%); z-index:51; display:none; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; background:rgba(23,14,9,.72); border:1px solid rgba(240,210,160,.3); color:#e8c98a; font-size:11px; letter-spacing:1px; pointer-events:none; white-space:nowrap; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #stage.review #reviewHint{ display:inline-flex; } #chapRail{ position:absolute; right:8px; top:60px; z-index:52; display:none; flex-direction:column; gap:6px; max-width:200px; } #stage.review #chapRail{ display:flex; } #chapRail .cr-h{ font-size:10.5px; color:rgba(232,169,79,.78); letter-spacing:2px; padding:0 4px 2px; text-align:right; } #chapRail .cr-i{ display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:10px; cursor:pointer; font-size:12px; color:#e9dcc3; background:rgba(23,14,9,.72); border:1px solid rgba(240,210,160,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #chapRail .cr-i:active{ background:rgba(70,42,16,.9); } #chapRail .cr-i.cur{ border-color:rgba(232,169,79,.85); color:#f7e8c8; background:rgba(49,32,15,.88); } #chapRail .cr-i .cr-dot{ width:6px; height:6px; border-radius:50%; background:rgba(232,169,79,.5); flex:0 0 auto; } #chapRail .cr-i.cur .cr-dot{ background:#f7d9a0; } /* v607：绮罗榜·榜下走（组件 plaza_bang）—— 宿主容器。 z-index 44：压过 #plzRoom(40) 与 #plzStage，低于详情弹层 #plzSheet(46)， 「点一个人 → 半屏详情」才盖得住榜面。 */ #bangScene{ position:fixed; inset:0; z-index:44; display:none; overflow:hidden; } #bangScene.on{ display:block; } /* ---------- 暗语阁（茶楼 · 10-28 迁自杏花巷住处） ---------- */ #lexPanel{position:absolute;inset:0;z-index:50;opacity:0;pointer-events:none;transition:opacity .3s ease} #lexPanel.on{opacity:1;pointer-events:auto} #lexPanel .lex-veil{position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,5,6,0) 0%,rgba(8,5,6,.05) 24%,rgba(8,5,6,.30) 52%,rgba(8,5,6,.82) 100%)} #lexPanel .lex-card{position:absolute;left:0;right:0;bottom:0;height:min(78%,620px); display:flex;flex-direction:column; padding:14px 14px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,rgba(30,21,18,.985),rgba(18,12,12,.99)); border-top:1px solid rgba(255,206,158,.26); border-radius:18px 18px 0 0;box-shadow:0 -16px 40px rgba(0,0,0,.6); transform:translateY(18px);transition:transform .34s cubic-bezier(.22,.62,.16,1)} #lexPanel.on .lex-card{transform:translateY(0)} #lexPanel .lex-head{display:flex;align-items:baseline;gap:10px;flex:none;padding:0 2px 10px} #lexPanel .lex-head b{font-size:16px;letter-spacing:.24em;color:#ffe9cf;font-weight:600; font-family:"Songti SC","Noto Serif SC",serif} #lexPanel .lex-head i{font-style:normal;font-size:10.5px;letter-spacing:.08em;color:rgba(255,214,176,.62)} #lexPanel .lex-head button{margin-left:auto;width:28px;height:28px;border-radius:50%; border:1px solid rgba(255,204,156,.24);background:rgba(26,17,16,.72);color:#ffd9b0; font-size:16px;line-height:1;font-family:inherit} #lexPanel .lex-head button:active{filter:brightness(1.3)} #lexPanel .lex-tabs{flex:none;display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px; -webkit-overflow-scrolling:touch;scrollbar-width:none} #lexPanel .lex-tabs::-webkit-scrollbar{display:none} #lexPanel .lex-tab{flex:none;padding:7px 13px;border-radius:15px;cursor:pointer;font-family:inherit; font-size:12px;letter-spacing:.1em;color:#ffe6c6; border:1px solid rgba(255,204,156,.24);background:rgba(40,26,23,.88)} #lexPanel .lex-tab.on{color:#2a1a10;font-weight:600; background:linear-gradient(180deg,#ffd9a8,#e8b478);border-color:transparent} #lexPanel .lex-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:2px 2px 8px;display:flex;flex-direction:column;gap:7px} #lexPanel .lex-item{border-radius:13px;cursor:pointer; border:1px solid rgba(255,204,156,.16);background:rgba(42,27,24,.72); padding:11px 13px;transition:border-color .2s ease} #lexPanel .lex-item:active{filter:brightness(1.12)} #lexPanel .lex-item .li-top{display:flex;align-items:baseline;gap:8px} #lexPanel .lex-item .li-name{font-size:14px;letter-spacing:.06em;color:#ffe9cf;font-weight:600} #lexPanel .lex-item .li-pos{font-size:10px;letter-spacing:.12em;color:rgba(255,214,176,.5)} #lexPanel .lex-item .li-seen{margin-left:auto;font-size:10px;letter-spacing:.08em;color:#ffd9a0; opacity:0;transition:opacity .2s ease} #lexPanel .lex-item.seen .li-seen{opacity:1} #lexPanel .lex-item.rare{border-color:rgba(255,214,150,.42); background:linear-gradient(135deg,rgba(62,40,30,.8),rgba(42,27,24,.72))} #lexPanel .lex-item .li-body{display:none;margin-top:9px;padding-top:9px; border-top:1px dashed rgba(255,204,156,.16)} #lexPanel .lex-item.open .li-body{display:block} #lexPanel .lex-item .li-en{font-size:10.5px;letter-spacing:.04em;color:rgba(255,196,140,.66);margin-bottom:5px} #lexPanel .lex-item .li-desc{font-size:12.5px;line-height:1.7;letter-spacing:.02em;color:rgba(255,228,200,.86)} #lexPanel .lex-item .li-human{margin-top:7px;font-size:12.5px;line-height:1.7;letter-spacing:.02em; color:#ffd9a0;padding:8px 10px;border-radius:9px;background:rgba(20,13,12,.5)} #lexPanel .lex-foot{flex:none;display:flex;align-items:center;gap:10px;padding:10px 2px 0; border-top:1px solid rgba(255,204,156,.12)} #lexPanel .lex-foot span{flex:1 1 auto;font-size:9.5px;line-height:1.5;letter-spacing:.02em;color:rgba(255,214,176,.5)} #lexPanel .lex-foot button{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px; padding:7px 13px;border-radius:12px;cursor:pointer;font-family:inherit; border:1px solid rgba(255,204,156,.28);background:rgba(44,29,24,.9);color:#ffe6c6;font-size:12px;letter-spacing:.14em} #lexPanel .lex-foot button i{font-style:normal;font-size:9px;letter-spacing:.04em;color:rgba(255,214,176,.5)} #lexPanel .lex-foot button:active{filter:brightness(1.2)} #lexPanel .lex-solo{position:absolute;left:50%;top:7%;transform:translate(-50%,8px); z-index:41;max-width:78%;padding:11px 17px;border-radius:14px;text-align:center; background:linear-gradient(180deg,rgba(40,26,21,.97),rgba(26,16,14,.97)); border:1px solid rgba(255,214,150,.4);box-shadow:0 10px 30px rgba(0,0,0,.5); color:#ffe4c0;font-size:13px;line-height:1.7;letter-spacing:.05em; opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease} #lexPanel .lex-solo.on{opacity:1;transform:translate(-50%,0)} /* ---------- 照花镜（人格小测 · 嵌暗语阁面板内，z 60 压过暗语阁卡片） ---------- */ #zhjPanel{position:absolute;inset:0;z-index:60;opacity:0;pointer-events:none;transition:opacity .3s ease} #zhjPanel.on{opacity:1;pointer-events:auto} #zhjPanel .zhj-veil{position:absolute;inset:0;background:rgba(6,3,4,.58)} #zhjPanel .zhj-card{position:absolute;left:0;right:0;bottom:0;height:min(84%,680px); display:flex;flex-direction:column; padding:14px 14px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,rgba(33,22,19,.995),rgba(15,9,9,.995)); border-top:1px solid rgba(255,206,158,.32);border-radius:18px 18px 0 0; box-shadow:0 -16px 40px rgba(0,0,0,.65); transform:translateY(18px);transition:transform .34s cubic-bezier(.22,.62,.16,1)} #zhjPanel.on .zhj-card{transform:translateY(0)} #zhjPanel .zhj-head{display:flex;align-items:center;gap:10px;flex:none;padding:0 2px 11px; border-bottom:1px solid rgba(255,204,156,.12)} #zhjPanel .zhj-head b{font-size:16px;letter-spacing:.3em;color:#ffe9cf;font-weight:600; font-family:"Songti SC","Noto Serif SC",serif} #zhjPanel .zhj-head i{font-style:normal;font-size:11px;letter-spacing:.1em;color:rgba(255,214,176,.62);margin-left:auto} #zhjPanel .zhj-head button{width:28px;height:28px;border-radius:50%;flex:none; border:1px solid rgba(255,204,156,.24);background:rgba(26,17,16,.72);color:#ffd9b0; font-size:16px;line-height:1;font-family:inherit} #zhjPanel .zhj-head button:active{filter:brightness(1.3)} #zhjPanel .zhj-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; display:flex;flex-direction:column} /* 开场 */ #zhjPanel .zhj-intro{padding:30px 6px 18px;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center} #zhjPanel .zhj-intro p{font-size:14.5px;line-height:2.05;letter-spacing:.05em;color:rgba(255,228,200,.92);text-align:center} #zhjPanel .zhj-go{margin:28px auto 6px;flex:none;padding:12px 42px;border-radius:22px;cursor:pointer; font-family:inherit;font-size:14px;letter-spacing:.32em;color:#2a1a10;font-weight:600; background:linear-gradient(180deg,#ffd9a8,#e8b478);border:none;box-shadow:0 6px 18px rgba(232,180,120,.32)} #zhjPanel .zhj-go:active{filter:brightness(1.08)} /* 逐题 */ #zhjPanel .zhj-quiz{display:flex;flex-direction:column;padding-top:12px} #zhjPanel .zhj-prog{flex:none;text-align:right;font-size:11px;letter-spacing:.14em;color:rgba(255,214,176,.6);padding:0 2px 12px} #zhjPanel .zhj-prog b{color:#ffd9a0;font-weight:600} #zhjPanel .zhj-q{flex:none;font-size:15.5px;line-height:1.85;letter-spacing:.04em;color:#ffe9cf; padding:8px 4px 18px;font-family:"Songti SC","Noto Serif SC",serif} #zhjPanel .zhj-opts{flex:none;display:flex;flex-direction:column;gap:10px} #zhjPanel .zhj-opt{padding:13px 15px;border-radius:13px;cursor:pointer;text-align:left; font-family:inherit;font-size:13.5px;line-height:1.6;letter-spacing:.03em;color:#ffe6c6; border:1px solid rgba(255,204,156,.22);background:rgba(44,29,24,.82);transition:border-color .2s ease} #zhjPanel .zhj-opt:active{filter:brightness(1.15);border-color:rgba(255,214,150,.5)} #zhjPanel .zhj-quiz.fade{animation:zhjFade .18s ease} @keyframes zhjFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* 镜面泛白 */ #zhjPanel .zhj-white{position:absolute;inset:0;z-index:61;background:#fff8f0;opacity:0;pointer-events:none;transition:opacity 1.05s ease} #zhjPanel .zhj-white.on{opacity:1} /* 判词 */ #zhjPanel .zhj-verdict{display:flex;flex-direction:column;align-items:center;padding:8px 4px 4px;text-align:center;flex:1 1 auto} #zhjPanel .zhj-poem{display:block;margin:8px auto 16px;writing-mode:vertical-rl;white-space:pre-line; font-size:20px;line-height:1.6;letter-spacing:.16em;color:#ffe9cf; font-family:"Songti SC","Noto Serif SC",serif;max-height:260px} #zhjPanel .zhj-plain{font-size:13px;line-height:1.9;letter-spacing:.03em;color:rgba(255,228,200,.88);text-align:left} #zhjPanel .zhj-seal{margin-top:16px;font-size:13px;letter-spacing:.1em;color:#ffd9a0; font-family:"Songti SC","Noto Serif SC",serif;padding:7px 18px;border-top:1px dashed rgba(255,204,156,.3);border-bottom:1px dashed rgba(255,204,156,.3)} #zhjPanel .zhj-ending{margin-top:16px;font-size:12.5px;line-height:1.75;letter-spacing:.04em;color:rgba(255,214,176,.78)} #zhjPanel .zhj-vfoot{margin-top:auto;flex:none;padding-top:14px;border-top:1px solid rgba(255,204,156,.14)} #zhjPanel .zhj-footer{font-size:12px;line-height:1.7;letter-spacing:.02em;color:#ffd9a0} #zhjPanel .zhj-credit{margin-top:5px;font-size:9.5px;line-height:1.5;letter-spacing:.02em;color:rgba(255,214,176,.5)} #zhjPanel .zhj-again{margin-top:13px;padding:11px 32px;border-radius:20px;cursor:pointer; font-family:inherit;font-size:13px;letter-spacing:.22em;color:#ffe6c6; border:1px solid rgba(255,204,156,.3);background:rgba(44,29,24,.9)} #zhjPanel .zhj-again:active{filter:brightness(1.2)} /* ---------- 茶楼内景（可走动）v684 ---------- 姐 10-28：茶楼缺一张内景，能在里面走动，到书架（暗语阁）、公告、堂座（聊天）等地方。 场景挂在 #plzTea（z 38，压在广场之上、所有面板 40+ 之下）。 */ #plzTea{position:fixed;inset:0;z-index:38;background:#2b1d16;overflow:hidden;touch-action:none; opacity:0;pointer-events:none;transition:opacity .34s ease} #plzTea.on{opacity:1;pointer-events:auto} #teaScene{position:absolute;left:0;top:0;height:100%;width:var(--teaW); background:url("img/chaguan/v4/bg.webp") no-repeat 0 0/100% 100%;will-change:transform} /* v714 分层家具：位置/尺寸一律用【百分比】（相对 #teaScene 的画布比例）， resize 只需要改 --teaW，十几层不用重算。 z-index 由 JS 按脚底美术 y 算（teaZ），人插在中间 ⇒ 走到桌子后面会被桌子挡住。 */ .teaLayer{position:absolute;pointer-events:none;line-height:0} .teaLayer>img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none} /* v733 姐 12:26：「划到掌柜身上给个描边，点他就进入对话，人不要动」。 点击热区单独用一层 .hit，不用给整个 .teaLayer 开 pointer-events —— 掌柜那一层带 scale(0.8)、以底边中点为原点，直接开会让热区比人宽出一圈透明边 （点他头顶上方 70 美术像素的墙也算点他）。.hit 的 inset 正好按 1−0.8 算出来， 又因为它在被 scale 的父层里，缩放跟着走，热区跟人严丝合缝。 */ .teaLayer .hit{position:absolute;left:10%;right:10%;top:20%;bottom:0; pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent} /* v719 掌柜描边 · v733 重做 病的根在【drop-shadow 带模糊】：模糊半径越大越像"背后的光"，不像"描边"。 这张图本来就有窗光打在掌柜身上，v719 那圈 1.4/3.5/9px 叠出来跟环境光糊在一起， 截图上几乎看不出"他变了"。现在改成【8 向 1.5px 零模糊位移影】—— 0 模糊的 drop-shadow 就是把整张剪影平移复制一份，八个方向一叠＝贴着剪影描一圈实边， 这才是 UI 上的"选中描边"；最后一条 7px 的才留作氛围光晕。 同时 brightness/saturate 各 +5%，把人从背景里提出来一点点。 ⚠️ 这里不加脉动动画：过滤器每帧重算，手机端 9 条 shadow 跑 60fps 会掉帧； 而且"常亮的实边"比"呼吸的光"更像可选状态。 */ .teaLayer.glow>img{ filter: brightness(1.05) saturate(1.04) drop-shadow(1.5px 0 0 rgba(255,250,238,.98)) drop-shadow(-1.5px 0 0 rgba(255,250,238,.98)) drop-shadow(0 1.5px 0 rgba(255,250,238,.98)) drop-shadow(0 -1.5px 0 rgba(255,250,238,.98)) drop-shadow(1.1px 1.1px 0 rgba(255,244,222,.92)) drop-shadow(-1.1px -1.1px 0 rgba(255,244,222,.92)) drop-shadow(1.1px -1.1px 0 rgba(255,244,222,.92)) drop-shadow(-1.1px 1.1px 0 rgba(255,244,222,.92)) drop-shadow(0 0 7px rgba(255,200,126,.55)); } /* ⚠️ v714：人物必须待在 #teaScene 里面才排得上 z。 以前挂在 #plzTea 外层、z-index:10，而 #teaScene 有 transform 自成堆叠上下文， 结果人永远压在所有家具之上 —— 这就是"贴纸感"的根。 */ #teaHero{position:absolute;left:0;top:0;z-index:220;pointer-events:none;height:var(--teaHh);will-change:left,top,z-index} #teaFlip{position:absolute;left:0;top:0;height:100%;width:auto;transform:translateX(-50%);will-change:transform} #teaFlip img{display:block;height:100%;width:auto;filter:drop-shadow(0 6px 8px rgba(30,16,10,.42))} /* v715 接地阴影重做（姐 18:08：「阴影跟脚不能有距离，人的脚要在阴影中间」） 旧版三个病： ① width:126% 是相对【#teaFlip 宽度】＝图片宽，而各帧图片宽差得离谱 （back.webp 161px、行走帧 n1 317px）⇒ 阴影忽大忽小，还比脚宽三四倍， 看着像人站在一块灰毯子上； ② height:20% 人高 ＋ translateY(46%)，椭圆一大半摊在脚下方，读出来就是"浮着"； ③ 渐变边缘化得太开，没有"贴着地"的那一圈浓度。 现在宽高由 JS 按【人高】算（不跟图片宽走），translateY(50%) 让脚底正好落在椭圆正中。 */ #teaShadow{position:absolute;left:50%;bottom:0;width:58%;height:8.5%; transform:translateX(-50%) translateY(50%); /* 渐变的"实心区"必须撑到 58% 半径以外 —— 长裙垂到脚背，影子只有比【裙摆宽】还宽 才能从两边露出来；收得太快就只剩脚底下那一小块，看着像鞋自己发黑。 */ background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(16,8,4,.80) 0%, rgba(16,8,4,.72) 56%, rgba(16,8,4,.40) 76%, rgba(16,8,4,.10) 90%, rgba(16,8,4,0) 100%); pointer-events:none} /* v710 茶楼 NPC：容器 + 接地阴影。原来是裸 img 加 drop-shadow， 那只是围着轮廓的一圈投影，看着像"贴在墙上"，不是站在地上。 */ .teaNpcBox{position:absolute;z-index:8;pointer-events:none;line-height:0;transform:translateX(-50%)} .teaNpcBox>img{display:block;height:100%;width:auto;filter:brightness(.92) saturate(.94)} .teaNpcBox>i{position:absolute;left:50%;bottom:0;width:118%;height:21%;transform:translateX(-50%) translateY(44%); border-radius:50%; background: radial-gradient(ellipse 46% 58% at 50% 50%, rgba(22,10,5,.80) 0%, rgba(22,10,5,.38) 58%, rgba(22,10,5,0) 84%), radial-gradient(ellipse 100% 100% at 50% 50%, rgba(28,13,8,.38) 0%, rgba(28,13,8,0) 78%)} #teaHud{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;pointer-events:none; background:linear-gradient(180deg,rgba(10,6,5,.66),rgba(10,6,5,.12) 68%,transparent)} #teaHud .t{flex:1;text-align:center;font-size:16px;letter-spacing:.22em;color:#f2e7d2;text-shadow:0 1px 3px rgba(0,0,0,.85)} #teaHud .t small{display:block;font-size:10px;color:#b9ab97;letter-spacing:.12em;font-family:"Microsoft YaHei",sans-serif;margin-top:1px} #teaBack{pointer-events:auto;border:1px solid rgba(255,214,170,.28);background:rgba(22,15,12,.66); color:#ffe9cf;font-size:12.5px;letter-spacing:.1em;padding:6px 12px;border-radius:14px;cursor:pointer; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} #teaBack:active{filter:brightness(1.2)} #teaHint{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top,0px));z-index:24; transform:translateX(-50%) translateY(6px);opacity:0;transition:opacity .3s ease,transform .3s ease; max-width:86vw;box-sizing:border-box;text-align:center;font-size:12.5px;letter-spacing:.12em;color:#ffe8c8; line-height:1.7;white-space:pre-line;pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.85)} #teaHint.on{opacity:1;transform:translateX(-50%) translateY(0)} /* ===== v738 媒婆「说亲」面板 ===== 点茶楼里那位媒婆弹出来的。不复用主剧情的聊天流（那条路带登录墙/会员墙/章节存档， 在场景里点个 NPC 会把玩家踢出当前章），所以自己画一层，只读 Q.state 不写章节进度。 暖棕 + 琥珀，跟茶楼同一套调子；手机端从底部升起，桌面端居中。 */ #mpSheet{position:fixed;inset:0;z-index:999;display:none;align-items:flex-end;justify-content:center; background:rgba(8,5,3,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;transition:opacity .22s ease} #mpSheet.on{display:flex;opacity:1} .mpCard{position:relative;width:min(560px,100%);max-height:82vh;box-sizing:border-box; display:flex;flex-direction:column;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); border-radius:18px 18px 0 0;border:1px solid rgba(255,206,150,.22);border-bottom:0; background:linear-gradient(180deg,#2a1d16 0%,#1b120d 100%); box-shadow:0 -10px 40px rgba(0,0,0,.55); transform:translateY(22px);transition:transform .26s cubic-bezier(.2,.9,.3,1)} #mpSheet.on .mpCard{transform:translateY(0)} @media (min-width:700px){ #mpSheet{align-items:center} .mpCard{border-radius:18px;border-bottom:1px solid rgba(255,206,150,.22);max-height:78vh} } .mpWho{display:flex;align-items:center;gap:10px;padding-bottom:11px; border-bottom:1px solid rgba(255,206,150,.13)} .mpWho img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto; border:1px solid rgba(255,206,150,.4);box-shadow:0 0 12px rgba(255,180,110,.22)} .mpWho .nm{flex:1;min-width:0;line-height:1.25} .mpWho .nm b{display:block;font-size:15px;color:#ffe4bd;letter-spacing:.1em;font-weight:400} .mpWho .nm span{display:block;font-size:10.5px;color:#a6907b;letter-spacing:.06em;margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mpClose{border:0;background:none;color:#8d7a68;font-size:17px;line-height:1;padding:8px;cursor:pointer} #mpClose:active{color:#ffd8a6} .mpSay{flex:1;min-height:96px;max-height:46vh;overflow-y:auto;padding:13px 2px 6px; -webkit-overflow-scrolling:touch;overscroll-behavior:contain} .mpSay p{margin:0 0 9px;font-size:14.5px;line-height:1.82;color:#f0e2cd;letter-spacing:.03em; opacity:0;transform:translateY(4px);animation:mpIn .32s ease forwards} @keyframes mpIn{to{opacity:1;transform:translateY(0)}} .mpSay p.mine{color:#ffd9a8} .mpSay p.mine::before{content:"你：";color:#9d876f} .mpOpts{display:flex;flex-direction:column;gap:8px;padding-top:8px} .mpOpts button{border:1px solid rgba(255,206,150,.26);background:rgba(255,196,132,.06); color:#f6e6cf;font-size:13.5px;letter-spacing:.06em;line-height:1.5;text-align:left; padding:11px 13px;border-radius:11px;cursor:pointer;transition:background .16s,border-color .16s} .mpOpts button:active{background:rgba(255,196,132,.18);border-color:rgba(255,206,150,.5)} .mpOpts button.end{text-align:center;color:#c3ae97} /* v734：v719 当时去掉名称是为了画面干净，结果姐 10-30 把整个茶楼看成「没接上」—— 看不出来能点，就等于没有。现在恢复小字名字，但近处亮、远处淡，不乱。 触控区给到 44×44（iOS 最小可点尺寸），圆点本身仍是 14px，视觉不放大。 */ .teaSpot{position:absolute;z-index:400;transform:translate(-50%,-50%);pointer-events:auto;border:0; background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center; justify-content:center;width:44px;height:44px;line-height:0; -webkit-tap-highlight-color:transparent} .teaSpot .dot{display:block;width:14px;height:14px;flex:0 0 auto;margin:0;border-radius:50%; background:radial-gradient(circle,#fffaf0 0%,#ffe0b0 45%,rgba(255,190,120,0) 78%); box-shadow:0 0 10px 3px rgba(255,196,132,.55);opacity:.8;transition:opacity .3s ease,box-shadow .3s ease} .teaSpot .tag{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);display:block; white-space:nowrap;font-size:10.5px;letter-spacing:.10em;color:#ffe8c8; margin-bottom:1px;padding:2px 8px;border-radius:10px; background:rgba(20,13,12,.72);border:1px solid rgba(255,204,156,.24); text-shadow:0 1px 2px rgba(0,0,0,.9);opacity:.42;transition:opacity .28s ease} .teaSpot.near .dot{opacity:1;box-shadow:0 0 13px 4px rgba(255,196,132,.72)} .teaSpot.near .tag{opacity:1;border-color:rgba(255,214,160,.5)} .teaSpot:active .tag{filter:brightness(1.18)} /* ===== v746（2026-10-31 姐 02:30）：新手装挑选层 ===== 姐：「新手装我想的是刚进游戏时就让选一下」，且「麻衣、麻裙，都免费」。 插在 enterGame「入梦转花」之后、Q.start('q_pro') 之前 —— 挑完才起剧情。 ⚠️ z-index 必须压过 #plaza(180)；⚠️ 卡片图用 alley3 站立图，不另出素材。 */ #starterPick{position:fixed;inset:0;z-index:9001;display:none; align-items:center;justify-content:center; background:radial-gradient(120% 90% at 50% 32%,rgba(46,30,24,.96),rgba(12,8,7,.98)); font-family:inherit;-webkit-tap-highlight-color:transparent} #starterPick.on{display:flex} #starterPick .sp-box{width:min(94vw,760px);max-height:94vh;display:flex;flex-direction:column; align-items:center;gap:12px;padding:20px 16px} #starterPick .sp-t{font-size:16.5px;letter-spacing:.14em;color:#ffe9cf;text-align:center; line-height:1.75;font-family:"Songti SC","Noto Serif SC",serif} #starterPick .sp-s{font-size:12px;letter-spacing:.24em;color:rgba(255,214,176,.6)} #starterPick .sp-row{display:flex;gap:16px;justify-content:center;width:100%;margin-top:6px} #starterPick .sp-card{flex:1 1 0;max-width:236px;border:1px solid rgba(255,204,156,.24); border-radius:16px;padding:12px 8px 14px;cursor:pointer; background:linear-gradient(180deg,rgba(60,40,31,.55),rgba(26,17,13,.55)); display:flex;flex-direction:column;align-items:center;gap:8px; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} #starterPick .sp-card img{height:min(46vh,330px);width:auto;display:block;pointer-events:none} #starterPick .sp-card b{font-size:14px;letter-spacing:.18em;color:#ffe9cf;font-weight:600} #starterPick .sp-card i{font-style:normal;font-size:11px;line-height:1.6; color:rgba(255,214,176,.55);letter-spacing:.04em;text-align:center} #starterPick .sp-card:active{transform:scale(.985)} #starterPick .sp-card.sel{border-color:#e8b478; box-shadow:0 0 0 1px rgba(232,180,120,.55),0 12px 28px rgba(232,180,120,.2)} #starterPick .sp-note{font-size:11px;color:rgba(255,214,176,.42);letter-spacing:.06em;margin-top:2px} #starterPick .sp-name{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:320px;margin-top:8px} #starterPick .sp-name input{width:100%;padding:12px 14px;font-size:16px;text-align:center;color:#ffe9cf;background:rgba(255,214,176,.06);border:1px solid rgba(255,204,156,.3);border-radius:12px;letter-spacing:.1em;font-family:inherit;outline:none} #starterPick .sp-name input:focus{border-color:#e8b478;box-shadow:0 0 0 1px rgba(232,180,120,.4)} #starterPick .sp-name input::placeholder{color:rgba(255,214,176,.4)} #starterPick .sp-name button{padding:10px 28px;font-size:14px;letter-spacing:.2em;color:#1a100c;background:linear-gradient(180deg,#f4cf9e,#e8b478);border:0;border-radius:999px;cursor:pointer;font-family:inherit} #starterPick .sp-name button:active{filter:brightness(.94)} @media (max-height:620px){#starterPick .sp-card img{height:34vh}} /* ===== v747 婚姻面板（T-20261029-003 批 1）===== 只读服务端 /api/account/marry 的结果；好感数值一律服务端权威，前端不算。 文案口径：stage / favor 这类内部词不上界面，全部翻成人话。 */ #marryPanel{position:fixed;inset:0;z-index:9002;display:none;align-items:center;justify-content:center; background:rgba(12,8,7,.9);font-family:inherit;-webkit-tap-highlight-color:transparent} #marryPanel.on{display:flex} #marryPanel .mp-box{width:min(94vw,560px);max-height:88vh;display:flex;flex-direction:column; background:linear-gradient(180deg,rgba(52,34,27,.98),rgba(24,15,12,.98)); border:1px solid rgba(255,204,156,.26);border-radius:18px;overflow:hidden} #marryPanel .mp-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px; border-bottom:1px solid rgba(255,204,156,.14)} #marryPanel .mp-head b{font-size:15px;letter-spacing:.3em;color:#ffe9cf;font-weight:600; font-family:"Songti SC","Noto Serif SC",serif} #marryPanel .mp-head i{font-style:normal;font-size:11px;letter-spacing:.1em; color:rgba(255,214,176,.6);margin-left:auto} #marryPanel .mp-head button{width:26px;height:26px;border-radius:50%;flex:none; border:1px solid rgba(255,204,156,.24);background:rgba(26,17,16,.72);color:#ffd9b0; font-size:14px;line-height:1;font-family:inherit} #marryPanel .mp-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 14px; display:flex;flex-direction:column;gap:9px} #marryPanel .mp-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px; background:rgba(255,214,176,.045);border:1px solid rgba(255,204,156,.12)} #marryPanel .mp-row.mine{border-color:rgba(232,180,120,.5);background:rgba(232,180,120,.09)} #marryPanel .mp-row .nm{flex:none;width:88px} #marryPanel .mp-row .nm b{display:block;font-size:13.5px;color:#ffe9cf;letter-spacing:.08em;font-weight:600} #marryPanel .mp-row .nm i{font-style:normal;font-size:10.5px;color:rgba(255,214,176,.5)} #marryPanel .mp-bar{flex:1 1 auto;height:6px;border-radius:4px;background:rgba(255,214,176,.12);overflow:hidden} #marryPanel .mp-bar span{display:block;height:100%;border-radius:4px; background:linear-gradient(90deg,#c8794f,#ffd9a8)} #marryPanel .mp-tag{flex:none;font-size:11px;letter-spacing:.04em;color:rgba(255,214,176,.72); min-width:78px;text-align:right} #marryPanel .mp-note{padding:8px 4px 0;font-size:11.5px;line-height:1.85; color:rgba(255,214,176,.55);text-align:center} #marryPanel .mp-foot{flex:none;padding:10px 14px 14px;font-size:11px;line-height:1.7; color:rgba(255,214,176,.45);text-align:center} /* ===== v747 广场·书生（候选夫君，姐画的立绘，站在杏花巷月门洞前）===== 三个数决定位置：left=横向中心、top=头顶、height=身高。 ⚠️ 不烘进底图：底图换版本时他不用重画，挪位置也只改这里。 ⚠️ z-index 压在前景层之下（他被别的东西挡住是对的），但高过底图与后排玩家。 脚底 = top + height = 50.5%，就是要踩在月门洞前那块地面上。 */ #plzShusheng{position:absolute;left:85%;top:44%;height:6.5%;width:auto; transform:translateX(-50%);z-index:15;cursor:pointer; -webkit-user-drag:none;user-select:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))} /* ⚠️ z-index 必须是 15，不能随手写： plzBackImg(14) 是整幅街景（不透明），写 12 会被它整个盖住 —— 人就在 DOM 里、hit test 也命得中， 但屏幕上一点像素都看不见（这个 bug 排查了很久）。 plzFore(16) 是绮罗榜布棚（唯一遮挡物），要能挡住他 ⇒ 必须低于 16。 15 正好：街景之上、布棚之下、跟玩家光球同层。 */