/* 山海寻踪 · v1 · 新中式水墨底 */ * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body { height:100%; overflow:hidden; background:#14141f; font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif; color:#e8e2d5; user-select:none; touch-action:manipulation; } /* v304 移动端适配：布局基准高度 720，宽度由 js/core/fit.js 按屏幕宽高比推算（--gw）。 * 缩放系数 k = 视口高 / 720 → 高度永远铺满、左右不留黑边（手机横屏 2.2:1 时布局宽约 1600）。 * ⚠ 别改回 inset:0 —— 那样 .screen 会跟着真实视口走，手机横屏 UI 相对放大 2 倍多， * 头像/摇杆/对话框全糊在画面上挡住背景（用户实测反馈）。 * ⚠ 这个文件里的 vh/vw 已全部换算成设计稿像素（1vw=12.8px / 1vh=7.2px）， * 因为 vh/vw 永远按真实视口算，不认父容器 —— 会让技能切屏立绘从 460px 缩到 138px。 * 以后新写样式请直接用 px，别再用 vh/vw。 */ .screen { position:fixed; left:0; top:0; width:var(--gw, 1280px); height:720px; transform-origin:0 0; transform:scale(var(--gs,1)); display:none; } /* v304b：激活态提升为合成层。.screen 现在带 transform 缩放，若不留合成层， * 手机每帧都要把 1600×720 的整屏重新栅格化一遍，实测移动时掉帧。 */ .screen.active { display:block; will-change:transform; backface-visibility:hidden; } .hidden { display:none !important; } /* ---------- 标题画面 ---------- */ #screen-title { background: radial-gradient(ellipse 120% 60% at 50% -10%, #2c2c44 0%, transparent 60%), radial-gradient(ellipse 100% 50% at 50% 110%, #24303a 0%, transparent 55%), #14141f; } .title-wrap { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:32px 20px 44px; position:relative; } .title-glyphs { font-size:min(243.2px,92px); font-weight:700; letter-spacing:.14em; color:#f0ead9; text-shadow:0 0 22px rgba(122,160,255,.35), 0 4px 14px rgba(0,0,0,.6); } .title-glyphs span { color:#9fb8ff; } .title-sub { font-size:15px; letter-spacing:.42em; text-indent:.42em; color:#8d93a8; } .title-seal { width:46px;height:46px;border-radius:9px;background:#b23a3a;color:#fff; display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700; box-shadow:0 3px 12px rgba(178,58,58,.45); transform:rotate(-6deg); } .title-menu { display:flex; flex-direction:column; gap:14px; width:min(998.4px,320px); margin-top:8px; } .t-btn { min-height:52px; border:1.5px solid #565b70; border-radius:14px; background:rgba(38,40,60,.75); color:#e8e2d5; font-size:17px; letter-spacing:.18em; transition:transform .08s, background .15s; } .t-btn.primary { background:linear-gradient(135deg,#39406b,#2a3057); border-color:#7f8cff; } .t-btn:active:not(:disabled) { transform:scale(.96); background:#39406b; } .t-btn:disabled { opacity:.45; } .title-foot { position:absolute; bottom:max(18px, env(safe-area-inset-bottom)); font-size:12px; color:#565b70; letter-spacing:.2em; } .overlay { position:fixed; inset:0; background:rgba(10,10,16,.72); display:flex; align-items:center; justify-content:center; z-index:50; } .overlay-card { background:#1e2032; border:1px solid #565b70; border-radius:18px; padding:26px 24px; width:min(1075.2px,340px); font-size:15px; line-height:1.75; } .overlay-card h3 { margin-bottom:12px; letter-spacing:.3em; color:#9fb8ff; } .overlay-card .t-btn { width:100%; margin-top:14px; } /* ---------- v313：手感调试面板（连点版本号 5 下） ---------- */ #tune-overlay { z-index:92; } /* 压在菜单层/物品层之上，避免被遮 */ .tune-card { width:min(1075.2px,392px); } .tune-sub { font-size:12px; color:#7d84a0; margin:-6px 0 20px; line-height:1.5; letter-spacing:.04em; } .tune-row { display:grid; grid-template-columns:78px 1fr 56px; align-items:center; gap:10px; margin-bottom:18px; } .tune-lb { font-size:15px; color:#cfd6f0; letter-spacing:.06em; line-height:1.25; } .tune-lb em { display:block; font-style:normal; font-size:11px; color:#6f7694; letter-spacing:0; margin-top:2px; } .tune-val { font-size:18px; color:#9fb8ff; text-align:right; font-variant-numeric:tabular-nums; } #tune-overlay input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:36px; background:transparent; touch-action:none; } #tune-overlay input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:linear-gradient(90deg,#7d9dff 0%,#7d9dff var(--p,50%),#2a2e44 var(--p,50%),#2a2e44 100%); } #tune-overlay input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; margin-top:-11px; border-radius:50%; background:#9fb8ff; border:3px solid #1e2032; box-shadow:0 0 12px rgba(159,184,255,.55); } #tune-overlay input[type=range]::-moz-range-track { height:6px; border-radius:3px; background:linear-gradient(90deg,#7d9dff 0%,#7d9dff var(--p,50%),#2a2e44 var(--p,50%),#2a2e44 100%); } #tune-overlay input[type=range]::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:#9fb8ff; border:3px solid #1e2032; } .tune-live { font-size:12px; color:#8d94b2; line-height:1.95; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(120,132,180,.22); } .tune-live b { color:#cfd6f0; font-weight:600; } .tune-tag { padding:1px 7px; border-radius:5px; font-size:11px; letter-spacing:.05em; } .tune-tag.big { background:rgba(120,170,255,.18); color:#9fc0ff; } .tune-tag.small { background:rgba(255,190,120,.16); color:#ffc98a; } .tune-btns { display:flex; gap:10px; margin-top:16px; } .tune-btns .t-btn { flex:1; width:auto; margin-top:0; } /* ---------- 游戏画面 ---------- */ #screen-game { background:#241c12; } /* 世界外的画框色：暖木深色，不再出现黑边 */ .hud { position:absolute; top:0; left:0; right:0; z-index:10; display:flex; justify-content:flex-end; align-items:center; /* v101 ⚠08：场景名/版本移右上（左上让位属性卡） */ padding:calc(env(safe-area-inset-top) + 8px) 14px 8px; background:linear-gradient(#14141fd9, transparent); pointer-events:none; } .hud-loc { font-size:15px; letter-spacing:.25em; color:#cbc3ae; } .hud-ver { font-size:11px; color:#565b70; } #map-view { position:absolute; inset:0; overflow:hidden; } #map-world { position:absolute; top:0; left:0; will-change:transform; transform-origin:0 0; } .tile { position:absolute; width:var(--ts); height:var(--ts); } /* 方案A/C：有整幅背景时 tile 全部隐形，仅承担碰撞逻辑 */ #map-world.has-bg .tile { visibility:hidden; } #map-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; } /* v136 实31：背景预栅格化 canvas（#map-view 首子节点，#map-world 之下；相机增量 drawImage） */ #map-bg-canvas { position:absolute; top:-12px; left:-12px; width:calc(100% + 24px); height:calc(100% + 24px); pointer-events:none; } /* v173：外扩 12px 容纳屏震，目标绘入缓冲中央 */ #map-camera { position:absolute; inset:0; transform-origin:50% 50%; } /* v173：镜头演出层（震屏/推镜/Boss 聚焦），罩住背景+实体保持对齐 */ #map-bg-canvas.world-ruin { filter: saturate(.5) hue-rotate(215deg) brightness(.85) contrast(1.05); } /* 崩坏态与 #map-world 同款染背景 */ /* v195 任务目标标记：改成"地上的一滩光"——不再是硬边金环（用户：箭头指引的东西放在这很唐突）。 主角=暖金光池（恒亮，当前目标必须一眼看见）；支线=小而淡的紫光（近距才显）。 v276【必读 · 亮反光地面上的可见性，别回退】 实测（幻境长巷 · 720 视口）：主线金圈落在屏 y646–723，本来就贴屏幕下缘；而长巷地面是 一整片反光水面，暖金 #ffe096 与亮水面明度撞车——`tools/_BEFORE_v275_bottom.png` 里 150px 光柱只剩两条几乎认不出的浅痕，金圈整个消失（用户"指引圈一点都不明显"的根因在此， 不是没生成）。v276 三处改动，**任何一处都不要单独回退**： ① 金圈：饱和琥珀芯 + 内亮唇 + 最外一圈**窄暗线**（约 3px）。 暗线给亮底一个确定边界，琥珀芯给暗底一个亮度差——两头都压得住。 ② qm-pulse 的 opacity 谷底从 .55 提到 .88（.55 就是"一半时间等于不存在"的主因）。 ③ 光柱补一根不透明实心内芯（::after，4px 窄柱 + 外发光），远看是一条"柱"， 而不是一片会在反光面上化开的雾辉。 三条踩过的坑（都试过、都不行，别再走一遍）： · 不能靠"把芯调亮"取胜——书院廊下暖石板本身就到 (230,205,160) 这一档， 奶白芯扑上去等于没画（`tools/_shot_v276_shuyuan_main13.png` 早期版本）。 · 不能把暗衬加宽到 70% 起步——那会变成一口"盆"，用户要的是"一滩光"。 · 不能用 1px 实线 border 代替最外暗线——边框挂在 border-radius 上， 会跑到光晕外面变成"画上去的椭圆"，很唐突。 另注：径向渐变必须写 `ellipse 50% 50%`——不写就是 farthest-corner， 实际半径是内切椭圆的 √2 倍，所有色标位置整体错位（v276 第一次改就栽在这）。 支线（.soft）不受影响：紫色与任何底色都不同色相，本来就不糊；::before/::after 一律 display:none。 */ #quest-markers { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; } .quest-marker { position:absolute; width:84px; height:46px; border:none; border-radius:50%; background: /* 上层 · 池芯：饱和琥珀金。 教训（v276 三次试错）：**别指望靠"更亮"取胜**——周伯铺子的木地板、书院廊下的暖石板 本身就是 (230,205,160) 这一档，奶白芯扑上去等于没画。要靠饱和度把色相拉开。 */ radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,206,104,.90) 0%, rgba(255,190,72,.80) 40%, rgba(255,170,44,.46) 72%, rgba(255,164,36,.20) 88%, rgba(255,160,32,0) 100%), /* 下层 · 池沿：内亮唇 + 最外一圈**窄暗线**。 暗线只有 96%→100%（约 2px），作用是"给亮池一个确定的边界"——亮背景上靠它、暗背景上靠 琥珀芯，两头都压得住。⚠ 别把暗线加宽到 70% 起步：那会变成一口"盆"，用户要的是"一滩光"。 v279：原 93% 起步（≈5 屏幕px @1.68×）**站在圈里看是脚下一圈黑影**， 改为 96% + 降 alpha，边界还在但不读作影子——远看的可见性已交给柱顶菱形针。 */ radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 78%, rgba(255,242,192,.54) 84%, rgba(255,248,214,.72) 92%, rgba(58,30,4,.30) 96%, rgba(52,26,3,.34) 100%); box-shadow: 0 3px 7px 0 rgba(34,18,4,.28), /* 贴地暗影：让光池"陷"在地面，而不是浮贴片 */ 0 0 18px 5px rgba(255,196,92,.55), /* 近辉 */ 0 0 50px 16px rgba(255,146,36,.30); /* 远辉：橙尾把暖金和冷水面在色相上拉开 */ animation:qm-pulse 2.2s ease-in-out infinite; } @keyframes qm-pulse { /* v276：谷底 .88（原 .55 会让圈有一半时间"看不见"）；仍在呼吸，但不会消失 */ 0%,100% { transform:scale(.92); opacity:.88; } 50% { transform:scale(1.08); opacity:1; } } /* v274 主线目标光柱：金圈贴地且贴屏幕下缘（实测 y410 的圈在 720 视口里被裁掉一半、 * 开对话时又被对话框压住——用户站在引灯人旁根本看不见信的金圈）。 * 竖向光束从圈心升起，越过对话框顶缘；远处也能一眼锁定（MMO 指路柱惯例）。 * 仅主线有柱（.soft 支线圈不出柱）；随圈呼吸动画同缩放。 * v276：外层柔光降低一点（原来 .80 起点太"糊"），对比度交给下面的实心内芯。 * * —— v279：用户实机"我没看见金光啊"。量出来的结论（别再调第四次颜色了）—— * ① 长巷 world 2603×428，camera.js 是 **cover** 缩放：720/428 = 1.68 → * y=410 的标记全部被顶到屏幕 y≈685/720 这一条里，只在最下沿 30px 内活动； * ② 光柱中段 ΔL 其实有 +59，**缺的不是亮度是"边"**：13 屏幕px 宽的奶白渐变色 * 在暖雾+灯笼光斑的底图上，和底图自己的光斑是同一类东西，眼睛没有边界可依； * ③ 主角 z=410 > 标记 z=409 —— 站上去之后池芯与柱底**全被自己挡住**， * 头顶只剩一条淡痕； * ④ 屏幕右下的「探」按钮 (right:22 宽高110) 会整块压住标记——玩家 x∈[1608,1677] * 时金圈正好落在按钮底下，而那正是沿路走过来的位置。 * 对照证据：同屏的紫色「裂口门」一眼能看见——因为它是 3px 硬边拱形、175 屏幕px 高、 * 越过了主角头顶。所以修法照抄它：**给柱加实边 + 在柱顶加一颗浮起的菱形指针**， * 指到主角头顶与「探」键之上。造型语义仍是"地上的一滩光"，不与门混。 */ .quest-marker::before { content:''; position:absolute; left:50%; bottom:12px; width:10px; height:150px; transform:translateX(-50%); /* 横向三段：1.5px 深褐边 / 7px 饱和金芯 / 1.5px 深褐边。 ⚠ 这两条深边是"看得见"的全部理由。别为了"更通透"把它们调淡—— v276 就是把芯做成奶白 (255,250,228)，在奶白暖雾上等于没画。 宽度 10（不是 16）：再宽就读成"一根杆子"而不是"一道光"，但不能再窄， 1.68× 缩放下 10px ≈ 17 屏幕px，比原先 13px 的淡色带更细也更容易锁定。 */ background:linear-gradient(to right, rgba(72,36,4,.84) 0 1.5px, rgba(255,196,54,.92) 1.5px 8.5px, rgba(72,36,4,.84) 8.5px 100%); /* 纵向淡出必须用 mask，不能叠第二层 to-top 渐变——那会把上面的边一起盖掉 */ -webkit-mask-image:linear-gradient(to top, #000 0%, #000 50%, rgba(0,0,0,.50) 80%, transparent 100%); mask-image:linear-gradient(to top, #000 0%, #000 50%, rgba(0,0,0,.50) 80%, transparent 100%); border-radius:2px; box-shadow:0 0 10px rgba(255,190,60,.55); } /* v279 柱顶菱形指针：浮在光柱顶端，上下浮动。 * 存在的理由有三个，缺一不可： * ① 几何硬边——写意画底图里，多边形是唯一能一眼分离出来的形状； * ② 位置够高——1.68× 缩放下落在屏幕 y≈440，越过主角头顶(≈616)与「探」键(≈586)； * ③ 上下浮动比放大缩小更容易被余光抓到（原 qm-pulse 只动 scale，在 1.68× 下太轻微）。 * ⚠ 动画里必须把 translateX(-50%) 和 rotate(45deg) 一起写回：transform 会整体覆盖， * 漏一个指针就会跳位/不转。 */ .quest-marker::after { content:''; position:absolute; left:50%; bottom:152px; width:14px; height:14px; transform:translateX(-50%) rotate(45deg); background:linear-gradient(135deg, #ffe9a8 0%, #ffc02e 45%, #e8901a 100%); border:2px solid rgba(64,30,2,.94); /* 深褐描边：亮/暗背景都能读出轮廓 */ border-radius:3px; box-shadow:0 0 0 1.5px rgba(255,238,180,.55), /* 描边外加一圈亮唇，免得深边发死 */ 0 0 16px 4px rgba(255,170,36,.60); animation:qm-pin 1.5s ease-in-out infinite; pointer-events:none; } @keyframes qm-pin { 0%,100% { transform:translateX(-50%) translateY(0) rotate(45deg); } 50% { transform:translateX(-50%) translateY(-8px) rotate(45deg); } } /* v279：目标挂在 NPC 身上（.at-npc）→ 不出柱、不出针，退回纯光池。 * 原因见 map.js 处注释：菱形针会正好压在 NPC 名牌上（周伯铺子实测）。 */ .quest-marker.at-npc::before, .quest-marker.at-npc::after { display:none; } .quest-marker.soft:not(.gate)::before, .quest-marker.soft:not(.gate)::after { display:none; } /* v276 走近再提一档：主线标永远带 qm-near（map.js 里对 !side 无条件 add）， 所以这条实际等于"主线常态"——呼吸快一档 + 光晕更亮， 站着不动时余光也能抓到它。支线的提亮在下面 .soft.qm-near 里单独管。 注意：这里只动 box-shadow / animation，不要再加 border（见上面"池沿"那条注释）。 */ .quest-marker:not(.soft).qm-near { animation-duration:1.6s; box-shadow: 0 2px 8px 1px rgba(28,16,4,.42), 0 0 26px 8px rgba(255,214,134,.72), 0 0 68px 22px rgba(255,160,48,.38); } /* v293 大 BOSS 刷新点：**暗红余烬**（用户拍板："BOSS 点该和捡东西的金圈区分开"） * 语义：金池 = 这儿有东西可以捡/可以探；暗红余烬 = 这儿有东西在等你，进去就是一场硬仗。 * 和 v277 给门换造型是同一个教训——**同一个形状不该承担两种意思**： * 玩家照着金光走过去按「探」，本以为是拾取，结果"穷奇，醒了"直接开战。 * * 造型不动（还是"地上的一滩光 + 光柱 + 柱顶菱形针"），只换色相 —— 玩家已经认得这套指路语言， * 换形状反而要重新学。三处一起换：池芯/池沿、光柱、菱形针，缺一处就会"金身子红脑袋"。 * * ⚠ 选择器必须写 `.quest-marker.boss` **和** `.quest-marker.boss.qm-near` 两条： * 主线标永远带 qm-near，而 `.quest-marker:not(.soft).qm-near` 的 box-shadow 是 0,3,0， * 权重比单写 `.quest-marker.boss`（0,2,0）高，会被盖回金光。gate 那条注释踩过同一个坑。 */ .quest-marker.boss, .quest-marker.boss.qm-near { background: /* 上层 · 池芯：余光里的炭火红，比金池更暗、更沉 */ radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,142,86,.92) 0%, rgba(228,76,42,.82) 40%, rgba(172,38,22,.48) 72%, rgba(124,26,14,.20) 88%, rgba(110,20,10,0) 100%), /* 下层 · 池沿：暖橙亮唇 + 窄暗线（与金池同构，只换色） */ radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 78%, rgba(255,180,124,.50) 84%, rgba(255,152,96,.66) 92%, rgba(46,8,2,.34) 96%, rgba(38,6,2,.38) 100%); box-shadow: 0 3px 7px 0 rgba(26,6,2,.34), 0 0 18px 5px rgba(255,98,50,.52), 0 0 50px 16px rgba(186,32,16,.34); } .quest-marker.boss::before { background:linear-gradient(to right, rgba(56,8,2,.88) 0 1.5px, rgba(255,122,66,.94) 1.5px 8.5px, rgba(56,8,2,.88) 8.5px 100%); box-shadow:0 0 12px rgba(226,62,28,.62); } .quest-marker.boss::after { background:linear-gradient(135deg, #ffc99e 0%, #f2603a 45%, #a02118 100%); border-color:rgba(46,6,2,.94); box-shadow:0 0 0 1.5px rgba(255,192,152,.52), 0 0 16px 4px rgba(224,70,34,.62); } /* v277 门类目标（探查点带 exit）：**不画"地上的一滩光"**。 原因不是好看难看，是语义：地面光池读作"这儿有东西可以捡/可以探"，而门要读作"这是一条路"。 用户实机就是这么被坑的——看见地上金光走过去按「探」，离图词一播完直接被送进另一张图。 现在改成门口立起一道**光门**（拱形光框 + 门内柔光），一眼能分出"路"和"东西"。 v278：门色由 `--gate`（三个空格分隔的通道值）决定——主线金 / 支线紫。 同一个造型承担两种语义：金门 = 主线的路，紫门 = 支线的路。 裂口（支线）就是紫门；它以前挂在主线目标表里，穿的是金圈。 ⚠ 三条选择器都要写全： · 单独 `.quest-marker.gate` 会被 `.quest-marker:not(.soft).qm-near` 的 box-shadow 盖回来 （同权重、后写者胜；门类主线永远带 qm-near）； · `.quest-marker.gate.soft` 必须显式写，否则被 `.quest-marker.soft` 的紫光池背景盖回来。 */ .quest-marker.gate, .quest-marker.gate.qm-near, .quest-marker.gate.soft { background:none; /* 只有门口一小片光把门"按"在地上（不是光池，是门槛的光） */ box-shadow:0 5px 14px -5px rgb(var(--gate) / .75); } .quest-marker.gate { --gate: 255 206 110; } /* 主线金 */ .quest-marker.gate.soft { --gate: 196 160 255; } /* 支线紫（与 .soft 同色系） */ /* ⚠ v302【必读 · 别删下面那几条 reset】 * `::before`/`::after` 是 `.quest-marker` 的**共用伪元素**：前者是"光柱"，后者是"柱顶菱形针"。 * 门类只覆盖了尺寸/填充，**没覆盖的每一条都会从光柱/菱形针那里继承过来**。v277 起漏了三条： * * ① `border` —— 菱形针的 `2px solid rgba(64,30,2,.94)` 深褐硬边，被门内柔光(::after)继承， * 于是门外多出一圈**深棕色粗框**； * ② `animation`—— 菱形针的 `qm-pin`（`rotate(45deg)` + 上下浮 8px）也被继承， * 于是那个深褐框被**整体转了 45°** 还上下飘 —— 就是用户两次报的"黑色斜的东西"； * ③ `mask-image`—— 光柱的 `to top` 渐隐对伪元素**不区分用途**，把门框上半截一起淡掉。 * * 实测（tools/_probe_riftmark5.js 打到屏幕上量 computed style）： * `::after` 的 transform = matrix(0.707107,0.707107,-0.707107,0.707107,-26,0) = rotate(45deg)， * borderTopColor = rgba(64,30,2,.94)。与用户截图里那个"上圆下尖、倾斜、深棕描边"逐项吻合。 * 所以不是设计问题，是**继承没清干净**——三条 reset 缺一不可。 */ .quest-marker.gate::before { left:50%; bottom:16px; width:54px; height:104px; transform:translateX(-50%); border:3px solid rgb(var(--gate) / .92); border-bottom:none; /* 门框不封底——门是立在地上的一道口子 */ border-radius:27px 27px 0 0; background:linear-gradient(to top, rgb(var(--gate) / .52) 0%, rgb(var(--gate) / .26) 55%, rgb(var(--gate) / .08) 100%); box-shadow:0 0 18px rgb(var(--gate) / .80), inset 0 0 24px rgb(var(--gate) / .45); -webkit-mask-image:none; /* ① 清光柱渐隐：门要整扇都看得见 */ mask-image:none; } .quest-marker.gate::after { left:50%; bottom:16px; width:48px; height:98px; transform:translateX(-50%); background:linear-gradient(to top, rgb(var(--gate) / .34) 0%, rgb(var(--gate) / .15) 70%, rgb(var(--gate) / 0) 100%); border-radius:24px 24px 0 0; box-shadow:none; border:none; /* ★ 清菱形针的 2px 深褐硬边 —— "黑色斜的东西"的深色来源 */ animation:none; /* ★ 清 qm-pin 的 rotate(45deg)+浮动 —— "斜"的全部来源 */ -webkit-mask-image:none; /* ★ 清光柱渐隐 */ mask-image:none; } /* v194 支线目标光圈（紫，与主线金色区分）——v263 重调：旧版 38×24 且"靠近才显"（默认 opacity:0）， 玩家在房间另一头根本看不到（实机反馈"指引光圈一点都不明显"）。 现在：尺寸接近主线、恒常可见、带外发光；靠近只再提亮一档，不再当可见性开关。 ⚠ 动画只动 transform：若在 @keyframes 里动 opacity，会压掉 .qm-near 的提亮 */ .quest-marker.soft { width:68px; height:40px; border:none; border-radius:50%; background:radial-gradient(ellipse at center, rgba(230,208,255,.96) 0%, rgba(178,136,255,.60) 44%, rgba(126,84,226,0) 78%); box-shadow:0 0 16px 4px rgba(178,136,255,.55), 0 0 36px 12px rgba(126,84,226,.30); animation:qm-soft 2.4s ease-in-out infinite; opacity:.95; transition:opacity .2s ease, box-shadow .2s ease; } @keyframes qm-soft { 0%,100% { transform:scale(.86); } 50% { transform:scale(1.12); } } /* 靠近时提亮一档（不再是显隐开关——远看也必须看得见） */ .quest-marker.soft.qm-near { opacity:1; box-shadow:0 0 22px 6px rgba(178,136,255,.72), 0 0 52px 18px rgba(126,84,226,.40); } /* v194 近距显影：NPC 名字牌默认隐去，靠近才浮现（消除头顶"图标"堆叠感） */ #map-world.npc-prox .npc-name { opacity:0; transition:opacity .18s ease; } #map-world.npc-prox .npc-name.np-near { opacity:1; } /* v195：跟随精灵（珂儿）右向镜像——她的行走帧只有一套侧向（朝左），右向翻转 */ .fol-keer img.mirror { transform:translateX(-50%) scaleX(-1); } /* v213 [N13]：珂儿脚下椭圆接触影——"落地感"的视觉锚（轮廓 drop-shadow 撑不起接地感） */ .fol-keer::after { content:''; position:absolute; left:50%; bottom:-3%; transform:translateX(-50%); width:56%; height:9%; border-radius:50%; z-index:0; background:radial-gradient(ellipse at center, rgba(0,0,0,.38) 0%, rgba(0,0,0,.2) 45%, transparent 72%); } .fol-keer img { z-index:1; } /* 场景小物件 sprite（世界座标内绝对定位） */ .decor { position:absolute; z-index:3; pointer-events:none; } /* v203 [08]：第四章入口贴图——灰化态（未开启）；main≥20 时 map.js 给 #map-world 挂 .ch4-open 褪灰 */ .decor.ch4-gate { filter:grayscale(1) brightness(.85) opacity(.8); transition:filter .8s ease, opacity .8s ease; } #map-world.ch4-open .decor.ch4-gate { filter:grayscale(0) brightness(1) opacity(1) drop-shadow(0 0 10px rgba(255,214,150,.7)); } /* v203 [07]：三画框改挂轴形态（暖纸暗角，去贴纸感）；玉牌压投影 + 极轻漂浮（translateY 单参） */ .decor.hj-paint { filter:sepia(.12) brightness(.97) drop-shadow(0 3px 5px rgba(40,30,18,.38)); animation:paint-breath 3.4s ease-in-out infinite; transform-origin:50% 100%; } @keyframes paint-breath { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } } .decor.hj-jade { filter:drop-shadow(0 3px 5px rgba(24,52,36,.55)); animation:jade-bob 3.6s ease-in-out infinite; } @keyframes jade-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } } .decor.flicker { animation:flicker 1.9s infinite ease-in-out; } /* v216：书院东端「再入梦」空间裂缝——黑底转 alpha 素材 + 提饱和/紫金辉光投影 + 微呼吸 */ .decor.sy-dream-rift { animation:rift-breath 3.2s ease-in-out infinite; } @keyframes rift-breath { 0%,100% { filter:brightness(1.05) saturate(1.35) drop-shadow(0 0 10px rgba(150,110,255,.75)); } 50% { filter:brightness(1.25) saturate(1.35) drop-shadow(0 0 15px rgba(190,150,255,.9)); } } @keyframes flicker { 0%,100% { filter:brightness(1) drop-shadow(0 0 3px rgba(255,200,100,.6)); transform:scale(1); } 25% { filter:brightness(1.15) drop-shadow(0 0 6px rgba(255,180,80,.8)); transform:scale(1.02); } 50% { filter:brightness(.9) drop-shadow(0 0 2px rgba(255,220,120,.5)); transform:scale(.98); } 75% { filter:brightness(1.1) drop-shadow(0 0 5px rgba(255,190,90,.7)); transform:scale(1.01); } } .decor.flame { animation:flame 1.2s infinite ease-in-out; } @keyframes flame { 0%,100% { transform:scaleY(1) rotate(-2deg); filter:brightness(1); } 50% { transform:scaleY(1.15) rotate(2deg); filter:brightness(1.2); } } .decor.floaty { animation:floaty 3.6s infinite ease-in-out; } @keyframes floaty { 50% { transform:translateY(-4px); } } /* v20：信物贴片光晕 + 落点光圈 */ .decor.halo { filter:drop-shadow(0 0 7px rgba(150,200,255,.9)) drop-shadow(0 0 2px rgba(200,230,255,.8)); } .glow-ellipse { position:absolute; z-index:3; pointer-events:none; border-radius:50%; background:radial-gradient(ellipse at center, rgba(150,200,255,.55), rgba(150,200,255,0) 72%); animation:glow-pulse 2.6s infinite ease-in-out; } /* v205 [N7]：梦境裂口光晕——紫金色贴底图裂口色系，高不透明度 + 双层脉冲，弱感淡蓝退役 */ .glow-ellipse.hj-lie-glow { z-index:2; border-radius:24%; background:radial-gradient(ellipse at center, rgba(196,150,255,.85) 0%, rgba(150,110,255,.45) 46%, rgba(120,90,220,0) 74%); box-shadow:0 0 26px 8px rgba(170,120,255,.5); animation:lie-glow-pulse 2.2s infinite ease-in-out; } @keyframes lie-glow-pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } } @keyframes glow-pulse { 50% { opacity:.5; } } /* v284【用户："这两个传送门做成这个图片的这种 / 能做那种动态的吗"】 * v285【用户："动态我是满意的，但是这两个传送门我感觉不协调，在整个构图里给人很生硬的感觉"】 * 三处根因，逐条修（改之前先把贴图按真实座标合进 jiuwei_bg 出静帧看过，不是拍脑袋）： * * ① **素材里带着星云和地面反光**。v284 把原图整块键了出来，环外那圈云气一起打包， * 贴到巷子里就是一团"紫色圆角方块"糊在石头上——这才是"贴上去"的真正来源。 * v285 的管线（tools/make_portal_v285.js）在 1.12× 光环半径处**硬切 + 羽化**， * 只留环本身；顺带做了内深外暗的纵深衰减、珠环压 8%、亮部转奶油暖。 * ② **z-index:4 让光门盖在牌坊前面**，珠子压在石头上，没有"装在门洞里"的遮挡感。 * 降到 2（低于 `.decor` 的 3）——牌坊的石框压住环的外沿，门才像开在墙上。 * ③ **两扇是同一枚印章、同一亮度**。现在按远近分两档（远处吃空气雾、近处更实更暗）； * 近处那扇把珠环错开 17°，再补一圈 `::before` 落地光和 `::after` 接触影，让它站得住。 * * 三层：.p-bloom 柔光（最底）→ .p-base 环（只做呼吸）→ .p-swirl 内涡流（26s 慢转）。 * ⚠ 整张一起转 = 贴纸打转；只有内圈转、环钉住才对。 * ⚠ 三层必须像素对齐：由同一条管线、同一个裁切框切出来，换图必须重跑，不能只换一张。 * ⚠ 外层不能 overflow:hidden —— 柔光要往框外溢，裁了会切出一圈硬边。 */ .decor.portal { z-index:2; } /* v285：压到牌坊(3)之下 —— 门要"装在"门洞里 */ .decor.portal img { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; } .decor.portal .p-bloom { left:-22.5%; top:-22.5%; width:145%; height:145%; } .decor.portal .p-base { animation:portal-breath 3.6s ease-in-out infinite; } .decor.portal .p-swirl { animation:portal-spin 26s linear infinite; will-change:transform; } @keyframes portal-spin { to { transform:rotate(360deg); } } @keyframes portal-breath { 0%,100% { filter:drop-shadow(0 0 5px rgba(150,200,255,.50)); } 50% { filter:drop-shadow(0 0 13px rgba(186,150,255,.90)); } } /* v285：远近两档 —— 远处的门吃一层空气雾（对比降、亮度提、饱和降），近处的门更实更暗。 * 两扇调成一样的亮度，眼睛就会觉得它们是两枚贴纸，而不是"一近一远的两扇门"。 */ .decor.portal.far { filter:saturate(.92) contrast(.96) brightness(1.03); } .decor.portal.near { filter:saturate(1.02) contrast(1.03) brightness(.93); } /* 两扇不能是同一枚印章：近处这扇把珠环错开 17°（圆形素材转起来不会露出方角） */ .decor.portal.near .p-base { transform:rotate(17deg); } /* 巷口那扇没有建筑框，得给它"站住"的两样东西（都压在贴图下面，z-index:-1） */ .decor.portal.near::before, .decor.portal.near::after { content:""; position:absolute; z-index:-1; pointer-events:none; } .decor.portal.near::before { /* 落地光：横铺在地上，比门宽 */ left:-52%; right:-52%; bottom:-16%; height:46%; background:radial-gradient(ellipse at 50% 50%, rgba(186,150,255,.30), rgba(186,150,255,0) 72%); filter:blur(7px); } .decor.portal.near::after { /* 接触影：贴着门底的一条暗影 */ left:2%; right:2%; bottom:-8%; height:26%; background:radial-gradient(ellipse at 50% 50%, rgba(26,14,36,.55), rgba(26,14,36,0) 70%); filter:blur(3px); } /* 系统省电模式：停转停呼吸，留一张静态光门（低端机别为了个门把风扇拉满） */ @media (prefers-reduced-motion: reduce) { .decor.portal .p-base, .decor.portal .p-swirl { animation:none; } } .tile.floor { background:#2a2419; box-shadow:inset 0 0 0 1px #221d13; } .tile.wall { background:#1b1c28; box-shadow:inset 0 0 0 1px #12131c; } .tile.bookshelf { background:repeating-linear-gradient(180deg,#4a3620 0 30%,#3a2a18 30% 34%); box-shadow:inset 0 0 0 2px #2a1d0f; } .tile.bookshelf::after { content:"书"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:calc(var(--ts)*.36); color:#caa46a; opacity:.8; } .tile.desk { background:#5a4526; box-shadow:inset 0 0 0 2px #3a2c16; } .tile.desk::after { content:"案"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:calc(var(--ts)*.36); color:#f0dcae; } .tile.door { background:#20263a; box-shadow:inset 0 0 0 2px #39406b; } .tile.door::after { content:"门"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:calc(var(--ts)*.34); color:#8fa0ff; } #player { position:absolute; width:var(--ts); height:var(--ts); z-index:5; pointer-events:none; } /* v20：像素级连续移动，逐帧直写 transform，不加过渡 */ #player img { position:absolute; left:50%; bottom:-8%; height:220%; /* 仙剑考据硬标准：站姿≈屏高22-25%（2.2格） */ width:auto; /* v164 显式等比：宽度按源图比例推导，禁止被拉伸 */ object-fit:contain; /* v164 防御：素材宽高比与预期不符时也等比显示 */ transform:translateX(-50%); transform-origin:50% 100%; /* v151 行走挤压绕脚底（translateX 居中/镜像不受影响） */ filter:drop-shadow(0 6px 7px rgba(0,0,0,.5)); } #player.mirror img { transform:translateX(-50%) scaleX(-1); } /* 凑近交互：朝目标探身小半格 */ #player.lean-left { margin-left:-16px; } #player.lean-right { margin-left:16px; } #player.lean-up { margin-bottom:10px; } #player.lean-down { margin-bottom:-8px; } /* v152：行走改为真正的 4 帧序列图（map.js 按 FRAME_MS 切 walk_front/back_*）， 不再对单帧立绘做挤压/上下 bob——单帧图做不出迈步，挤压只会像橡皮。 */ /* v76：街面 NPC（脚底锚点与玩家同规；名字牌挂脚边，按 y 排序遮挡） */ .npc { position:absolute; width:var(--ts); height:var(--ts); pointer-events:none; } .npc img { position:absolute; left:50%; bottom:-8%; height:220%; width:auto; /* v164 显式等比（同 #player img） */ object-fit:contain; /* v164 防御性等比约束 */ transform:translateX(-50%); filter:drop-shadow(0 6px 7px rgba(0,0,0,.5)); } .npc-name { position:absolute; left:50%; top:-138%; transform:translateX(-50%); white-space:nowrap; font-size:calc(var(--ts)*.20); letter-spacing:.1em; color:#f5d98a; text-shadow:0 0 3px rgba(20,14,4,.95), 0 1px 3px rgba(20,14,4,.95), 0 0 7px rgba(20,14,4,.6); } /* v98：裂隙残响改温和穷奇迷你立绘（实机反馈#2：紫光太淡）——wrapper=定位+脚底暗影，img=白狮残影轻浮动 v101 ⚠02：定位改由 map.js 按地图数据 rift 锚点直写（立绘脚底=触发圆心），CSS 不再写死坐标 */ .jq-rift { position:absolute; width:62px; height:72px; z-index:2; pointer-events:none; } .jq-rift::before { content:''; position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:54px; height:12px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(20,16,40,.4), transparent 70%); } .jq-rift-echo { position:relative; display:block; width:100%; height:100%; opacity:.88; filter:saturate(.82) brightness(.94); animation:rift-bob 3.2s ease-in-out infinite; } @keyframes rift-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } } /* v96 #7：三档选槽弹层 + 存档页行 */ .slot-card { border:1px solid #6b5a35; border-radius:8px; padding:10px 12px; margin:8px 6px; background:rgba(28,24,16,.55); text-align:left; } .slot-card.has { border-color:#a5854a; } .slot-head { color:#f0d68a; font-size:14px; letter-spacing:.2em; margin-bottom:4px; } .slot-body { color:#d8cfb8; font-size:12px; line-height:1.6; min-height:1.6em; } .slot-empty { color:#8a7c5e; } .slot-ops { margin-top:6px; display:flex; gap:8px; } .slot-btn { flex:none; padding:4px 14px; border-radius:6px; border:1px solid #8a7343; background:rgba(60,48,22,.75); color:#f0e2c0; font-size:13px; letter-spacing:.1em; cursor:pointer; } .slot-btn.danger { border-color:#8a4343; color:#e8b0a0; } /* v275：备份/导入/网址提示 */ .slot-btn.bak { border-color:#5f7a86; color:#bcd7e2; } .slot-bak { margin-top:4px; color:#9db0b8; font-size:11px; letter-spacing:.04em; } .slot-hint { margin:10px 6px 4px; padding:9px 11px; border:1px solid #8a6b33; border-radius:8px; background:rgba(70,52,20,.55); color:#f0dfae; font-size:12px; line-height:1.75; text-align:left; } .slot-hint b { color:#ffd98a; } .slot-io { margin:10px 6px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; } .slot-io.hidden { display:none; } .slot-import-title { flex:1 0 100%; color:#d8cfb8; font-size:12px; line-height:1.7; text-align:left; margin-bottom:2px; } .save-row { display:flex; align-items:center; gap:8px; border:1px solid #6b5a35; border-radius:8px; padding:8px 10px; margin:6px 4px; background:rgba(28,24,16,.45); } .save-info { flex:1; text-align:left; color:#d8cfb8; font-size:12px; line-height:1.6; } .save-info b { color:#f0d68a; margin-right:6px; letter-spacing:.1em; } .save-ops { display:flex; gap:6px; } .s-btn { padding:3px 12px; border-radius:6px; border:1px solid #8a7343; background:rgba(60,48,22,.75); color:#f0e2c0; font-size:12px; cursor:pointer; } /* v99 装备页：六槽格（locked=二期灰格）+ 行囊装备行（穿/售）+ 稀有金名 */ .gear-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 4px; } .gear-slot { display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid #6b5a35; border-radius:8px; padding:8px 6px; background:rgba(28,24,16,.55); cursor:pointer; } .gear-slot.has { border-color:#a5854a; } .gear-slot.locked { opacity:.45; cursor:default; } .gear-slot[disabled] { cursor:default; } .gear-k { color:#f0d68a; font-size:12px; letter-spacing:.2em; } .gear-v { color:#e8ddc0; font-size:12px; } .gear-v.dim { color:#8a7c5e; } .gear-v.rare, .inv-name.rare { color:#ffca5f; text-shadow:0 0 6px rgba(255,180,60,.45); } .gear-ops { display:flex; flex-direction:column; gap:4px; flex:none; } .s-btn.danger { border-color:#8a4343; color:#e8b0a0; } /* v182：存档导出/导入——当前槽高亮 + 「当前」角标（导入目标提示） */ .save-row.cur { border-color:#c9a35c; box-shadow:0 0 0 1px rgba(201,163,92,.35), inset 0 0 12px rgba(201,163,92,.08); } .slot-cur { display:inline-block; margin-left:6px; padding:0 6px; font-size:10px; line-height:15px; color:#2a2113; background:linear-gradient(180deg,#e9c987,#cda85f); border-radius:8px; vertical-align:1px; letter-spacing:0; font-weight:600; } /* v101 ⚠05：装备槽图标 + 属性浮层 */ .gear-ico { width:42px; height:42px; object-fit:contain; border:1px solid #565b70; border-radius:8px; background:rgba(20,22,36,.7); padding:2px; } .gear-ico.ph { background:rgba(20,22,36,.45); } .gear-info { border:1px solid #8a7343; border-radius:10px; background:rgba(60,48,22,.55); padding:9px 12px; font-size:12px; color:#f0e2c0; line-height:1.75; margin:6px 0 2px; text-align:left; } .gear-info b { color:#f0d68a; } /* ---------- v101 ⚠07：背包（两页签 + 游戏金币风铜钱栏） ---------- */ .bag-tabs { display:flex; gap:8px; margin-bottom:10px; } .bag-tab { flex:1; min-height:40px; border:1px solid #565b70; border-radius:10px; background:rgba(38,40,60,.6); color:#8d93a8; font-size:14px; letter-spacing:.25em; cursor:pointer; } .bag-tab.on { color:#f0d68a; border-color:#a5854a; background:rgba(60,48,22,.6); } .bag-tab:not(.on):active { background:#39406b; } .bag-coins { display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 0 2px; border-top:1px dashed #3a3d52; margin-top:8px; } .coin-ico { position:relative; width:22px; height:22px; border-radius:50%; flex:none; background:radial-gradient(circle at 38% 32%, #f6e2a0, #d4ad55 60%, #a37c2e); border:2px solid #8a6d2f; box-shadow:0 0 8px rgba(233,196,124,.45); } .coin-ico::after { content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); background:#1e2032; border-radius:1.5px; box-shadow:inset 0 0 2px #000; } .bag-coins b { color:#f0d68a; font-size:17px; letter-spacing:.05em; } .bag-coins span { color:#8d93a8; font-size:12px; } /* ---------- v101 ⚠09：技能页（图标/介绍/单群疗标） ---------- */ .sk-tag { display:inline-block; font-size:11px; margin-left:6px; padding:1px 8px; border-radius:8px; letter-spacing:.15em; vertical-align:1px; } .sk-tag.aoe { color:#e9c47c; border:1px solid #8a6d3b; } .sk-tag.single { color:#9fb8ff; border:1px solid #4a5a8a; } .sk-tag.heal { color:#8fd6a8; border:1px solid #3d7a5e; } #page-skills .inv-list { max-height:403.2px; } /* 电影感特效层：光柱/浮尘/暗角（盖在地图上，不拦触摸） */ .fx-layer { position:absolute; inset:0; pointer-events:none; z-index:7; overflow:hidden; } .light-shaft { position:absolute; top:-10%; left:46%; width:40%; height:74%; transform:rotate(13deg); filter:blur(6px); background:linear-gradient(168deg, rgba(255,226,158,.15), rgba(255,226,158,.03) 68%, transparent); } /* v29：浮尘(.mote/mote-drift)已按用户拍板整体移除 */ .vignette { position:absolute; inset:0; background:radial-gradient(ellipse 140% 108% at 50% 42%, transparent 52%, rgba(6,6,14,.46) 100%); } /* v175 P1-7：氛围粒子画布（屏幕空间，不随相机移动；由 particles.js 创建挂载） */ #fx-particles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } /* 虚拟按键：触控目标 ≥48dp（移动端规范）——v101 ⚠08：下移贴底、摇杆/探键加大 */ .touch-ui { position:absolute; inset:0; pointer-events:none; z-index:20; } .pad { pointer-events:auto; position:absolute; bottom:calc(24px + env(safe-area-inset-bottom)); } /* 虚拟摇杆 —— v311：用户实拍"手机上太小、不好操作"，168→196（横屏 150→180），推杆同步放大 */ .joystick { left:18px; width:196px; height:196px; z-index:21; } .joystick-base { position:absolute; inset:0; border-radius:50%; background:rgba(40,44,65,.85); border:2px solid rgba(120,130,170,.3); } .joystick-stick { position:absolute; width:72px; height:72px; border-radius:50%; background:rgba(80,90,120,.9); border:2px solid rgba(160,170,200,.4); left:50%; top:50%; transform:translate(-50%, -50%); pointer-events:none; } /* 圆形动作键（右侧）：水墨描边 + 微光，按下收缩反馈 —— v116 ⚠17：88→110px（热区=按钮本体同步） * v310【用户实机：手机版探索键"太小了、位置也太靠下，参照摇杆键设置"】 * 竖屏值时 110×110，横屏又被摇杆的 150 反衬得更小，且 110 的高度让圆心比摇杆低一截， * 看着像贴在屏幕下沿。现在**与摇杆同尺寸同底距**（横屏 150、竖屏 168），两者左右对称。 */ .action { right:22px; width:196px; height:196px; border-radius:50%; border:2px solid #b89b5e; color:#f0ead9; font-size:58px; font-weight:700; letter-spacing:.08em; background:radial-gradient(circle at 35% 28%, #4a5182, #23263e 72%); box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(184,155,94,.35), 0 0 16px rgba(184,155,94,.22); transition:transform .08s, box-shadow .15s; } .action b { font-weight:700; } .action:active { transform:scale(.92); box-shadow:0 3px 10px rgba(0,0,0,.5), 0 0 24px rgba(233,196,124,.55); } /* 摇杆手感：底盘上禁掉浏览器手势 */ .joystick { touch-action:none; } #toast { position:absolute; left:50%; bottom:150px; transform:translateX(-50%); max-width:1024px; z-index:60; background:rgba(18,20,32,.94); /* v87 R2：40→60，原被菜单层(.overlay z50)盖住，图鉴指引 toast 不可见 */ border:1px solid #565b70; border-radius:14px; padding:12px 18px; font-size:15px; line-height:1.7; text-align:center; white-space:pre-line; box-shadow:0 6px 20px rgba(0,0,0,.5); animation:toast-in .18s ease-out; } @keyframes toast-in { from { opacity:0; transform:translateX(-50%) translateY(8px);} } /* ---------- v281：学会新技能的屏幕提示（body 级浮层，战斗内外共用） ---------- * 位置取**屏幕正中**而不是顶部：升级习得发生在战斗收口那一瞬，而战利牌 `#battle-loot` * 就挂在 top:14%，顶部条会正好压在它身上；敌人这时已经散尽，画面中央是空的。 * `pointer-events:none` 是刻意为之——它可能盖在战斗指令区上方，绝不能吃掉一次点击。 */ .skill-learn { position:fixed; left:50%; top:46%; transform:translate(-50%,-50%); z-index:120; pointer-events:none; width:min(1126.4px,440px); padding:16px 18px 12px; background:linear-gradient(160deg, rgba(52,42,22,.97), rgba(20,20,32,.98)); border:2px solid #c9a35c; border-radius:16px; text-align:left; box-shadow:0 14px 38px rgba(0,0,0,.66), inset 0 0 0 1px rgba(255,214,150,.16), 0 0 26px rgba(255,196,54,.30); animation:sl-in .34s cubic-bezier(.2,.9,.3,1.3) both; } .skill-learn.out { animation:sl-out .34s ease-in both; } @keyframes sl-in { from { opacity:0; transform:translate(-50%,-50%) translateY(-16px) scale(.94); } to { opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1); } } @keyframes sl-out { to { opacity:0; transform:translate(-50%,-50%) translateY(-10px) scale(.97); } } .sl-tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:2px 14px; border-radius:999px; background:#c9a35c; color:#241c08; font-size:12px; font-weight:700; letter-spacing:.42em; text-indent:.42em; box-shadow:0 2px 10px rgba(0,0,0,.5); } .sl-body { display:flex; align-items:center; gap:12px; } .sl-ico { flex:none; width:52px; height:52px; border-radius:12px; object-fit:cover; border:1px solid #8a7343; background:rgba(0,0,0,.35); } .sl-txt { min-width:0; } .sl-name { font-size:19px; font-weight:700; letter-spacing:.08em; color:#ffe6b0; } .sl-desc { margin-top:3px; font-size:12.5px; line-height:1.55; color:#cfc6ad; letter-spacing:.02em; } .sl-tip { margin-top:9px; padding-top:8px; border-top:1px dashed rgba(201,163,92,.36); font-size:11.5px; letter-spacing:.06em; color:#9fb8ff; } /* ---------- v87 R5：NPC 交互选框（经典 RPG 式：交谈/功能项/离开） ---------- */ .npc-menu { position:fixed; left:50%; bottom:140px; transform:translateX(-50%); z-index:45; min-width:220px; max-width:1100.8px; background:rgba(18,20,32,.96); border:1px solid #565b70; border-radius:14px; padding:10px 12px 12px; box-shadow:0 6px 20px rgba(0,0,0,.5); animation:toast-in .18s ease-out; } .npc-menu-name { text-align:center; font-size:13px; color:#9fb8ff; letter-spacing:.3em; margin-bottom:4px; } .npc-menu-item { display:block; width:100%; margin-top:8px; padding:10px 18px; background:#242741; border:1px solid #565b70; border-radius:10px; color:#e8dcc2; font-size:15px; text-align:left; } .npc-menu-item:active { transform:scale(.97); border-color:#b89b5e; } .npc-menu-item.gold { color:#e9c47c; border-color:#8a6d3b; } /* v87 R8-1：任务项金字 */ /* v277：离图确认框里的"单程"警示行——不可逆的事必须写在按钮上方，玩家点之前就看得到 */ .npc-menu-warn { margin:6px 0 2px; padding:7px 9px; border:1px solid #8a5a2b; border-radius:8px; background:rgba(70,38,14,.6); color:#f2c88a; font-size:12px; line-height:1.65; text-align:left; } /* ---------- 获得反馈（v78）：图标弹层 + 飞入行囊 ---------- */ #gain-layer { position:fixed; left:50%; top:calc(13% + env(safe-area-inset-top)); transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; } .gain-pop { display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; background:rgba(18,20,32,.94); border:1px solid #b89b5e; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.5); animation:gain-in .3s ease-out; transition:transform .6s cubic-bezier(.5,-0.2,.7,.4), opacity .6s; } .gain-pop.fly { transform:translate(var(--fx,0), var(--fy,0)) scale(.2); opacity:0; } @keyframes gain-in { from { opacity:0; transform:translateY(-26px); } } .gain-ico { width:36px; height:36px; object-fit:contain; } .gain-coin { width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #f2d98a, #c9a24f 70%); border:2px solid #8a6d2f; } .gain-label { font-size:13px; color:#f0ead9; letter-spacing:.05em; white-space:nowrap; } /* ---------- 横屏适配（场景全屏横版） ---------- */ @media (orientation:landscape) { .avatar { width:52px; height:52px; } .fold-btn { width:44px; height:44px; font-size:21px; } .fold-round { width:40px; height:40px; font-size:13px; } .pad { bottom:calc(20px + env(safe-area-inset-bottom)); } .joystick { left:calc(18px + env(safe-area-inset-left)); width:180px; height:180px; } .action { right:calc(22px + env(safe-area-inset-right)); width:180px; height:180px; font-size:52px; } .joystick-stick { width:66px; height:66px; } .dlg { bottom:calc(60px + env(safe-area-inset-bottom)); min-height:66px; } .dlg-text { font-size:15px; line-height:1.7; min-height:46px; } .dlg-portrait { width:46px; height:70px; } .dlg-name { font-size:12px; top:-13px; padding:2px 12px 3px; } #toast { bottom:118px; } } /* ---------- 仙剑式底部对话框（v171：NPC 立绘头像 + 名字牌；旁白时两者隐藏，布局不变） ---------- */ .dlg { position:absolute; left:50%; bottom:calc(76px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(1177.6px,560px); z-index:35; display:flex; align-items:flex-end; gap:12px; background:rgba(10,10,18,.93); border:2px solid #b89b5e; border-radius:12px; padding:14px 18px 18px; min-height:84px; box-shadow:0 8px 24px rgba(0,0,0,.55), inset 0 0 0 1px #00000066; } .dlg-portrait { flex:none; width:62px; height:94px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); } .dlg-main { flex:1; min-width:0; } .dlg-name { position:absolute; top:-15px; left:16px; padding:3px 16px 4px; background:linear-gradient(180deg,#2a2018,#1a140e); border:1.5px solid #b89b5e; border-radius:999px; color:#ffe9b0; font-size:13px; letter-spacing:2px; box-shadow:0 3px 8px rgba(0,0,0,.45); } .dlg-text { font-size:16px; line-height:1.85; color:#f0ead9; min-height:58px; } .dlg-next { position:absolute; right:14px; bottom:8px; color:#e8c987; font-size:13px; animation:next-blink 1s infinite; } @keyframes next-blink { 50% { opacity:.15; } } /* ---------- v101 ⚠08：左上属性卡（原底部状态栏迁址；半透明托底防遮挡场景） ---------- */ .hud-top { position:absolute; top:calc(env(safe-area-inset-top) + 8px); left:10px; z-index:30; display:flex; align-items:center; gap:10px; pointer-events:none; } /* v112 回退定稿（⚠12 关闭）：属性卡保留 v106 原版扁排样式 */ .hud-top .stat { width:min(300px, 486.4px); background:rgba(10,8,4,.52); border:1px solid rgba(184,155,94,.4); border-radius:12px; padding:7px 10px 8px; box-shadow:0 2px 10px rgba(0,0,0,.4); } /* v114 ⚠13-R2：折叠组（＋+任务栏）移到属性卡正下方（用户定稿）；列序=背/技/菜 */ .hud-fold { position:absolute; top:calc(env(safe-area-inset-top) + 104px); left:10px; z-index:30; display:flex; align-items:flex-start; pointer-events:auto; } .fold-btn { flex:none; width:50px; height:50px; border-radius:50%; border:1.5px solid #a5854a; color:#ffe9b0; font-size:24px; line-height:1; cursor:pointer; position:relative; padding:0; background:linear-gradient(180deg,#4a3a14,#2a1f08); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.55); } .fold-btn::before { content:''; position:absolute; inset:3px; border-radius:50%; border:1px solid rgba(217,180,95,.4); pointer-events:none; } .fold-btn:active { filter:brightness(1.25); } .fold-col { position:absolute; top:58px; left:0; display:flex; flex-direction:column; gap:8px; z-index:36; } .fold-col.hidden { display:none; } .fold-round { flex:none; width:46px; height:46px; border-radius:50%; border:1.5px solid #a5854a; color:#f0e2c0; font-size:15px; cursor:pointer; padding:0; background:linear-gradient(180deg,#5a2320,#3f1613); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.55); } .fold-round:active { filter:brightness(1.25); } /* v112 回退：头像环恢复 v106 原版（2.5px 金环 + 暗金托环 + 暗金内细环） */ .avatar-switch { position:relative; flex:none; width:96px; align-self:stretch; } /* v205 [N2]：杨宇 58px 垂直居中对齐血条/蓝条中线；珂儿叠其右上（青绿环区分），布局经用户确认（示意 v2） */ .avatar-switch .avatar { position:absolute; left:0; top:50%; transform:translateY(-50%); } /* v224 [M7]：两头像**不再折叠**——容器 80→96；杨宇 58px 占 0~58，珂儿缩到 32px 移到 64~96（右斜上）， * 环间净距 6px（杨宇外扩阴影 3px 后仍有 3px 视觉间隙）。旧 38px@left42 与杨宇重叠 18px 退役。 */ .avatar-switch #avatar-keer { width:32px; height:32px; left:64px; top:2px; transform:none; border-color:#7FCAB2; } .avatar { width:58px; height:58px; border-radius:50%; overflow:hidden; flex:none; border:2.5px solid #d9b45f; background:#1e2032; position:relative; cursor:pointer; pointer-events:auto; box-shadow:0 0 0 1.5px #6b5426, 0 0 0 3px rgba(30,24,10,.6), 0 3px 12px rgba(0,0,0,.6); } /* 双环内线：暗金细环 */ .avatar::after { content:''; position:absolute; inset:2px; border-radius:50%; border:1px solid rgba(184,155,94,.55); pointer-events:none; } /* 裁剪对准脸部：脸在精灵高度约27%处，放大3倍并上移对准圆心 v164：显式 width:auto + object-fit:contain，素材比例异常时也不会被拉伸 */ .avatar img { position:absolute; height:300%; width:auto; max-width:none; left:50%; top:-31%; object-fit:contain; transform:translateX(-50%); } /* v116 ⚠11：人物面板宽卡（点头像）——左属性/装备/状态，右技能；Buff 区暂显"暂无" */ .menu-card.hero-card { width:min(1177.6px, 700px); max-height:576px; overflow-y:auto; } .hero-wrap { display:flex; gap:14px; align-items:flex-start; text-align:left; } .hero-left { flex:1.15; min-width:0; } .hero-right { flex:1; min-width:0; border-left:1px solid rgba(184,155,94,.35); padding-left:14px; } .hero-sub { margin:10px 0 6px; font-size:14px; color:#e8c987; letter-spacing:.25em; } .hero-card .st-row { font-size:13px; } @media (max-width:640px) { .hero-wrap { flex-direction:column; } .hero-right { border-left:none; padding-left:0; width:100%; } } /* v116 ⚠14②：列表显形翻页钮（▲▼，触屏友好） */ .inv-with-pager { display:flex; gap:6px; align-items:stretch; } .inv-with-pager .inv-list { flex:1; min-width:0; } .inv-pager { display:flex; flex-direction:column; gap:6px; justify-content:center; } .pg-btn { width:30px; height:34px; border-radius:8px; border:1px solid #8a7343; color:#f0dfb0; background:rgba(60,48,22,.75); font-size:13px; cursor:pointer; padding:0; } .pg-btn:active { filter:brightness(1.3); } .name-row { font-size:20px; margin-bottom:5px; display:flex; align-items:center; gap:8px; text-shadow:0 1px 3px rgba(0,0,0,.85); } /* v93 #6 名字提亮：亮金实色替代低对比渐变（小字号下渐变发灰看不清） */ .name-row .pname { font-weight:700; letter-spacing:.14em; font-size:21px; color:#ffe9b0; text-shadow:0 1px 2px #000, 0 0 8px rgba(255,222,140,.35); } /* Lv 胶囊徽章 */ .name-row .lv { font-size:12px; color:#f0dfb0; padding:2px 8px; border-radius:8px; border:1px solid #8a7343; background:rgba(60,48,22,.75); letter-spacing:.08em; } /* v93 #7：HUD 迷你经验条（v112 恢复：名字行内嵌；升级所需 = 30×当前等级） */ .xpbar { position:relative; flex:1; min-width:72px; max-width:150px; height:11px; border-radius:6px; overflow:hidden; margin-left:2px; background:linear-gradient(180deg,#15161e,#262837); box-shadow:inset 0 2px 3px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.5); } .xpbar i { display:block; height:100%; border-radius:6px; transition:width .35s ease; color:#e8c987; background:linear-gradient(90deg,#8a6a2f,#c9a24f 55%,#f0d68a); } .bar { height:11px; border-radius:6px; background:linear-gradient(180deg,#15161e,#262837); overflow:hidden; position:relative; margin-top:4px; box-shadow:inset 0 2px 3px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.5); } .bar i { display:block; height:100%; border-radius:6px; position:relative; transition:width .35s ease; } /* 珠光顶高光 */ .bar i::before { content:''; position:absolute; left:0; right:0; top:0; height:45%; border-radius:6px 6px 40% 40%; background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)); } /* 末端微光点 */ .bar i::after { content:''; position:absolute; right:0; top:50%; width:5px; height:5px; border-radius:50%; transform:translate(2px,-50%); box-shadow:0 0 6px 1px currentColor; background:currentColor; } .bar.hp { width:100%; } .bar.mp { width:72%; } .bar.hp i { color:#e88a5f; background:linear-gradient(90deg,#8f2f2f,#c04a4a 55%,#e0895a); } .bar.mp i { color:#7fa8e8; background:linear-gradient(90deg,#2f4a8f,#3f5fbf 55%,#7fa3e0); } /* v93 #2/#6：条内数值文字（HUD 与战斗单位条通用） */ .bar-num { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); font-style:normal; font-size:9px; line-height:1; text-align:center; color:#fff; letter-spacing:.05em; pointer-events:none; text-shadow:0 1px 2px #000, 0 0 3px rgba(0,0,0,.9); } /* 印章式菜单钮：暗红底描金边 + 内环细线 */ .menu-btn { flex:none; width:60px; height:60px; border-radius:10px; border:1.5px solid #a5854a; color:#f0e2c0; font-size:15px; line-height:1.25; letter-spacing:.1em; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(180deg,#5a2320,#3f1613); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.55); position:relative; } .menu-btn::before { content:''; position:absolute; inset:3px; border-radius:7px; border:1px solid rgba(217,180,95,.4); pointer-events:none; } .menu-btn:active { filter:brightness(1.25); } /* ---------- ESC式竖排菜单 ---------- */ .menu-card { background:#1e2032; border:2px solid #b89b5e; border-radius:16px; padding:22px 20px; width:min(947.2px,300px); display:flex; flex-direction:column; gap:10px; } .menu-card h3 { text-align:center; letter-spacing:.5em; text-indent:.5em; color:#e8c987; margin-bottom:6px; font-size:17px; } .m-item { min-height:46px; border:1px solid #565b70; border-radius:10px; background:rgba(38,40,60,.6); color:#e8e2d5; font-size:15px; letter-spacing:.2em; } .m-item small { letter-spacing:0; color:#8d93a8; font-size:11px; } .m-item:disabled { opacity:.45; } .m-item:not(:disabled):active { background:#39406b; } .menu-ver { text-align:center; font-size:11px; color:#565b70; margin-top:8px; letter-spacing:.15em; } /* ---------- 竖屏提示层（问题10/11：手机未横屏/旋转锁死时显示） ---------- */ #rotate-hint { position:fixed; inset:0; z-index:60; background:#14141f; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; } .rotate-icon { font-size:64px; color:#9fb8ff; animation:rotate-swing 1.6s ease-in-out infinite; } @keyframes rotate-swing { 0%,100% { transform:rotate(0deg); } 50% { transform:rotate(90deg); } } #rotate-hint p { font-size:18px; letter-spacing:.2em; color:#e8e2d5; } #rotate-hint .rotate-sub { font-size:13px; color:#8d93a8; letter-spacing:.1em; } /* v33/F2：内置浏览器引导 + 诊断行 + 重试按钮 */ #rotate-hint #rh-guide { max-width:1075.2px; font-size:14px; color:#ffd98a; line-height:1.75; letter-spacing:.02em; } #rotate-hint #rh-diag { font-size:11px; color:#8d93a8; letter-spacing:.05em; font-family:monospace; margin-top:6px; } #rotate-hint #rh-retry { margin-top:14px; min-height:44px; padding:0 26px; border:1.5px solid #b89b5e; border-radius:10px; background:rgba(38,40,60,.85); color:#e8e2d5; font-size:14px; letter-spacing:.15em; } #rotate-hint #rh-retry:active { background:#39406b; } /* ---------- M2 菜单页面（状态/物品/存档，v32） ---------- */ .st-grid { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; } .st-row { display:flex; justify-content:space-between; font-size:14px; border-bottom:1px dashed #3a3d52; padding-bottom:4px; } .st-row span { color:#8d93a8; letter-spacing:.2em; } .st-row b { color:#f0ead9; font-weight:normal; } .st-skills { font-size:12px; color:#9fb8ff; margin-bottom:8px; letter-spacing:.08em; } .st-goal { font-size:12px; color:#e8c987; line-height:1.6; margin-bottom:10px; letter-spacing:.05em; } .inv-list { display:flex; flex-direction:column; gap:8px; max-height:331.2px; overflow-y:auto; margin-bottom:10px; min-width:0; } .inv-empty { color:#8d93a8; font-size:13px; text-align:center; padding:18px 0; } .inv-row { display:flex; flex-direction:row; align-items:center; gap:10px; text-align:left; border:1px solid #565b70; border-radius:10px; background:rgba(38,40,60,.6); padding:8px 12px; color:#e8e2d5; /* v299【用户："陈姨小铺里面的商品文字看不全"】—— * `.inv-list` 是 `display:flex; flex-direction:column; max-height:331.2px; overflow-y:auto`， * 而下面那条 `.inv-row{overflow:hidden}` 把 flex 子项的 `min-height:auto` 变成了 0 * → 行被压扁（内容上下同时被裁），容器反而不出滚动条。 * 实测 7 行：行高 35~48px，内容却要 70~110px，每行裁掉 35~62px。 * `flex:0 0 auto` 让行按内容撑开，装不下就交给容器滚动 —— 这才是列表该有的行为。 */ flex:0 0 auto; } .inv-ico { width:44px; height:44px; flex:0 0 44px; object-fit:contain; border:1px solid #565b70; border-radius:8px; background:rgba(20,22,36,.7); padding:3px; } .inv-ico.ph { background:rgba(20,22,36,.45); } .inv-txt { display:flex; flex-direction:column; gap:2px; min-width:0; } .inv-row .inv-name { font-size:14px; letter-spacing:.1em; } .inv-row .inv-name small { color:#8d93a8; } .inv-row .inv-desc { font-size:11px; color:#8d93a8; line-height:1.5; } .inv-row.dim { opacity:.6; } .inv-row:active { background:#39406b; } .save-note { font-size:12px; color:#8d93a8; text-align:center; margin-bottom:8px; line-height:1.6; } /* ---------- v92 图鉴页滚动容器（三层内容整体滚，标题/返回恒在屏内）+ 陈姨小铺 ---------- */ #page-collection { max-height:676.8px; } .col-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; } #page-collection .inv-list { max-height:none; margin-bottom:6px; } .inv-price { margin-left:auto; flex:none; color:#e8c34e; font-size:13px; letter-spacing:.05em; } .inv-row.sold { opacity:.45; } /* v295：批量购买入口。⚠ 只能放 ——.inv-row 本身是