/* ========================================================================== 理想型·加载中 R11 · 视觉真源 theme-v2.css —— 「99%」深夜酒馆 · 深夜紫黑底 + 霓虹粉/电紫/汽水青（木与黄铜退居暗部） -------------------------------------------------------------------------- R11 Kim 原话：「太像威士忌吧，全是木质，太安静了不兴奋， 适合 Commune/海伦司不适合我们」。→ **保留 R10 这版手绘场景底图， 配色回到霓虹能量**。目标情绪词：兴奋、起哄、心跳（不是安静高级威士忌吧）。 R11 四条铁律： 1. 禁满屏重复格纹 —— 深度来自「画出来的东西」（酒瓶剪影/层板/灯带/吧台）， 不来自 repeating pattern，也不来自裸 linear-gradient 当装饰。 2. 光源主角 = 霓虹招牌 + 层板灯带（粉/紫/青洗墙）； 琥珀降级为吧台小台灯点缀（--glow-lamp-*），不再是主光。 3. 木质 / 黄铜**保留但降明度降饱和**，当「暗部结构」撑体积，不再当主角。 4. 发光预算：主 CTA + 激活态 + 招牌。仍然禁满屏发光。 规则（沿用 V1/V2 约定，不变）： 1. 业务 CSS 不允许出现字面色值，一律 var(--...) 引用本文件。 2. Canvas/JS 侧用 getComputedStyle 读取同名变量（poster.js 依赖变量名）。 3. 变量名是「角色」不是「颜色名」。R11 只改值不改名（poster.js 依赖名字）： --neon-purple 回到「电紫」，--glow-amber-* 现在是「环境霓虹雾」， 真琥珀灯另开 --glow-lamp-*。 分组目录： 1) 暗底舞台色（深夜紫黑） 2) 光与心动色（霓虹粉 / 电紫 / 汽水青主光；琥珀降级为小台灯） 3) 文字与描边 4) 面板与材质（木 / 黄铜 = 暗部结构 / 紫绒 / 玻璃） 5) 字体栈 6) 圆角 / 描边 / 阴影 / 材质混入 7) 光晕混入类（.neon-*）—— 霓虹管 8) 质感层（霓虹洗墙 / 细噪 / 暗角） 9) 吧台小台灯（.disco-ball 位，全站仅剩的真琥珀光源） 10) 摇酒壶签筒（shaker）组件类 11) 画出来的场景层（后吧台酒瓶剪影 / 层板灯带 / 吧台前沿） ========================================================================== */ /* 像素中文字体：缝合像素 12px（SIL OFL 开源，简中全覆盖） R10：像素字已退役到「logo + 大标题」两处（故事圣经 §五），其余一律手写体/无衬线。 */ @import url("https://cdn.jsdelivr.net/npm/@fontsource/fusion-pixel-12px-proportional-sc@5.3.0/index.min.css"); @import url("https://cdn.jsdelivr.net/npm/@fontsource/fusion-pixel-12px-proportional-sc@5.3.0/chinese-simplified.min.css"); :root { /* ---------- 1) 暗底舞台色（R11：深夜紫黑，去威士忌化） ---------- Kim R11：「太像威士忌吧，全是木质，太安静了不兴奋 —— 适合 Commune/海伦司， 不适合我们」。手绘场景底图保留，配色回到霓虹能量： 暖黑酒红底 → 深夜紫黑底；主光从琥珀换成霓虹粉/电紫/汽水青。 */ --bar-bg: #14101f; /* 全局底：深夜紫黑 */ --bar-bg-deep: #0d0a16; /* 更深一层：天花板 / 页面边缘 */ --bar-bg-raise: #201a33; /* 抬升面：卡片 / 吧台立面 */ --bar-bg-wall: #2a2044; /* 酒瓶架背墙（紫墙） */ --bar-floor: #100c1c; /* 地板 */ --bar-counter: #33223a; /* 吧台木色（保留木，压暗压灰，当暗部结构） */ --bar-counter-top: #5a4059; /* 吧台台面受光（木被霓虹洗过的冷暖交界） */ /* ---------- 2) 光与心动色（R11：霓虹当主角，琥珀降级为小台灯） ---------- */ /* 琥珀：**降级**。只剩吧台小台灯 / 酒液金 / 少量木面反光，不再是主光。 */ --neon-amber: #c98b4a; /* 台灯本体（明度饱和度都降过） */ --neon-amber-deep: #8a5a24; /* 灯下木面反光 / 酒液底 */ --amber-hi: #ffd9a0; /* 灯芯高光（唯一还敢亮的琥珀） */ /* 主光 A：马天尼粉 —— 主 CTA / 招牌 / 心动时刻 */ --neon-pink: #ff2d78; --neon-pink-hot: #ff6ea8; /* 主光 B：电紫 —— 洗墙的那一大片（原 --neon-purple 位，名字保持不动） */ --neon-purple: #a24bff; --neon-purple-soft: #c9a6ff; /* 主光 C：汽水青 —— 冷边、层板灯带、次要激活态 */ --neon-cyan: #2de2ff; --neon-cyan-soft: #9ff3ff; /* 橄榄绿（九八天线顶那颗，与 logo 同源）——原 --neon-green 位 */ --neon-green: #9aab52; /* 罚酒 / 麻辣 / 危险：热粉红，不再是暖酒红（兴奋不是安静） */ --neon-red: #ff4667; /* 半透明光晕衍生（box-shadow / 渐变用） */ --glow-pink-70: rgba(255, 45, 120, 0.7); --glow-pink-40: rgba(255, 45, 120, 0.4); --glow-pink-18: rgba(255, 45, 120, 0.18); --glow-cyan-70: rgba(45, 226, 255, 0.7); --glow-cyan-40: rgba(45, 226, 255, 0.4); --glow-cyan-16: rgba(45, 226, 255, 0.16); --glow-purple-45: rgba(162, 75, 255, 0.45); --glow-purple-20: rgba(162, 75, 255, 0.22); /* --glow-amber-* 现在是「环境霓虹雾」而不是琥珀（变量名=角色，不是颜色名）。 全站的 body 空气层 / 卡片顶端光池 / 标题字光都吃这三个， 换掉它们就是一次性把「威士忌暖雾」换成「霓虹紫粉雾」。 */ --glow-amber-55: rgba(162, 75, 255, 0.42); --glow-amber-25: rgba(162, 75, 255, 0.2); --glow-amber-12: rgba(45, 226, 255, 0.1); /* 真·琥珀灯光（只给画出来的小台灯：吊灯灯罩、店招灯箱） */ --glow-lamp-50: rgba(255, 190, 120, 0.44); --glow-lamp-20: rgba(255, 190, 120, 0.18); /* ---------- 3) 文字与描边 ---------- */ --ink-hi: #f3ecff; /* 主文字：被霓虹烘着的冷白 */ --ink-mid: #bbadd8; /* 次级文字 */ --ink-dim: #877ba6; /* 弱化文字 / 占位 */ --ink-ghost: #574d75; /* 更弱：禁用态 */ --ink-lo: rgba(243, 236, 255, 0.6); /* 兜底弱字（业务里已有引用） */ --line-neon: #4a3a6d; /* 常规描边（暗紫） */ --line-soft: rgba(162, 75, 255, 0.2); /* 弱描边 */ --line-counter: #191122; /* 吧台描边 */ /* ---------- 4) 面板与材质 ---------- */ --panel: rgba(32, 26, 51, 0.92); /* 卡片底（紫绒面） */ --panel-solid: #1c1730; /* 实心卡片底 */ --panel-deep: rgba(13, 10, 22, 0.9); /* 更深（弹幕条 / HUD） */ --panel-glow-edge: rgba(201, 166, 255, 0.14); /* 卡片内侧灯口描光 */ /* 材质本体色：木与黄铜**保留**，但明度饱和度整体降一档 —— 它们现在是「暗部结构」（把画面撑出体积），不是画面主角。 */ --brass: #8f7440; /* 黄铜（降档） */ --brass-hi: #b09468; /* 黄铜受光棱（降档） */ --brass-dim: #5c4a2a; /* 黄铜暗棱 */ --brass-shade: #2b2218; /* 黄铜投影 */ --wood: #33223a; /* 深木（往紫里压） */ --wood-hi: #5a4059; /* 木受光 */ --wood-dim: #1c1428; /* 木暗部 */ --velvet: #2c1d45; /* 紫绒布 */ --velvet-hi: #40295f; /* 绒布受光 */ --glass-tint: rgba(226, 232, 255, 0.1); /* 玻璃透光 */ --glass-edge: rgba(226, 236, 255, 0.32); /* 玻璃棱 */ --liquor: #e08b3a; /* 酒液（琥珀唯一还能当主角的地方） */ --liquor-deep: #8a4d13; /* 酒液底 */ --foam: #f6e3c2; /* 酒沫 */ /* R12：木纹全站退役（Kim「这游戏哪里需要木纹」）。 --wood / --wood-hi / --wood-dim 仅保留为暗部色值，不再画任何"木纹质感"。 本变量保留为 none 是为了让所有 `background-image: var(--tex-wood)` 的 调用点自动降级成纯色暗面，不需要逐处删除（也避免误伤打分滑轨的钉子）。 */ --tex-wood: none; /* 绒布：柔和的斜向光泽，一层，不重复（受光面改成粉，被霓虹招牌照着） */ --tex-velvet: radial-gradient(ellipse 140% 90% at 22% 0%, rgba(255, 110, 168, 0.1), transparent 62%), radial-gradient(ellipse 120% 80% at 88% 100%, rgba(0, 0, 0, 0.36), transparent 60%); /* ---------- 5) 字体栈 ---------- */ /* 像素标题字：只给 logo 与大标题（h1/h2/大比分/房间码），其余全部退役 */ --font-pixel: "Fusion Pixel 12px Proportional SC", "Zpix", "DotGothic16", "PingFang SC", "Microsoft YaHei", monospace; /* 店招/铜牌/菜单板小字：暖衬线，手写菜单板的气质 */ --font-display: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "SimSun", ui-serif, Georgia, "PingFang SC", "Microsoft YaHei", serif; --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; /* ---------- 6) 圆角 / 描边 / 阴影 ---------- */ /* 实物件的圆角比网页部件大一档：杯垫、铜牌、门牌都不是直角 */ --radius-card: 14px; --radius-btn: 11px; --radius-sm: 9px; --radius-pill: 999px; --stroke-thin: 1px; --stroke: 2px; --stroke-bold: 3px; /* 黄铜包边：一根亮棱 + 一根暗棱（受光棱改成霓虹洗过的冷白，不再是暖铜白） */ --edge-brass: inset 0 0 0 1px var(--brass-dim), inset 0 1px 0 rgba(216, 200, 255, 0.26), inset 0 -1px 0 rgba(0, 0, 0, 0.6); /* 木质包边 */ --edge-wood: inset 0 0 0 1px var(--wood-dim), inset 0 1px 0 rgba(201, 166, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.5); /* 压凹（刻在木头/铜上的字与槽） */ --edge-carve: inset 0 2px 4px rgba(0, 0, 0, 0.66), inset 0 -1px 0 rgba(201, 166, 255, 0.14); /* 霓虹主 CTA 包边（粉管的一根亮棱 + 内侧热粉口） */ --edge-neon: inset 0 0 0 1px rgba(255, 140, 185, 0.55), inset 0 1px 0 rgba(255, 220, 235, 0.5), inset 0 -10px 18px -12px rgba(0, 0, 0, 0.5); --shadow-panel: 0 18px 44px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.45), var(--edge-brass), inset 0 22px 40px -26px var(--glow-amber-25); --shadow-lift: 0 12px 26px rgba(0, 0, 0, 0.5), 0 3px 0 var(--brass-shade); --shadow-counter: 0 -6px 24px var(--glow-pink-18); /* 吧台霓虹上浮 */ --focus-ring: 0 0 0 3px var(--glow-pink-40); /* ---------- 6b) 灯光文字（原霓虹 glow 预组；现在是被灯烘着的字） ---------- */ /* 心动粉：只在爆灯/揭晓/亮相/logo 用 */ --neon-text-pink: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 8px var(--neon-pink-hot), 0 0 22px var(--glow-pink-40), 0 2px 0 rgba(0, 0, 0, 0.5); /* 汽水青：小招牌 */ --neon-text-cyan: 0 0 1px rgba(255, 255, 255, 0.85), 0 0 8px var(--neon-cyan), 0 0 20px var(--glow-cyan-40); /* 电紫（原 purple 位）：R11 改回真发光的霓虹管 */ --neon-text-purple: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 9px var(--neon-purple), 0 0 24px var(--glow-purple-45), 0 2px 0 rgba(0, 0, 0, 0.55); /* 环境霓虹雾下的字（原 amber 位）：全站正文标题主力 */ --neon-text-amber: 0 0 1px rgba(240, 234, 255, 0.9), 0 0 10px var(--glow-amber-55), 0 0 28px var(--glow-pink-18), 0 2px 0 rgba(0, 0, 0, 0.5); /* 框：霓虹管框（R11 恢复），发光预算只给主 CTA / 激活态 / 招牌 */ --neon-box-pink: inset 0 0 0 1px rgba(255, 140, 185, 0.5), 0 0 16px var(--glow-pink-40), 0 8px 22px rgba(0, 0, 0, 0.5); --neon-box-cyan: inset 0 0 0 1px rgba(120, 226, 255, 0.4), 0 0 14px var(--glow-cyan-40), 0 8px 22px rgba(0, 0, 0, 0.5); --box-brass: var(--edge-brass), 0 0 16px var(--glow-amber-25), 0 8px 22px rgba(0, 0, 0, 0.5); /* 主 CTA 的粉管发光（唯一敢往外糊光的预算大户） */ --box-neon-cta: var(--edge-neon), 0 4px 0 #8f1240, 0 0 26px var(--glow-pink-40), 0 14px 30px rgba(0, 0, 0, 0.55); /* ---------- 6c) 画出来的场景资产（data-uri，不重复、不平铺） ---------- */ /* 后吧台：酒瓶剪影 + 两层木层板 + 黄铜层板沿 + 两盏吊灯的光 */ --scene-backbar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20900%201100%27%20preserveAspectRatio%3D%27xMidYMin%20slice%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27wl%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%230d0a16%27%2F%3E%3Cstop%20offset%3D%27.34%27%20stop-color%3D%27%232a2044%27%2F%3E%3Cstop%20offset%3D%27.72%27%20stop-color%3D%27%23191231%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%230f0b1a%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27bz%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23b09468%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%238f7440%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2333261a%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27pk%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%234a3550%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%231c1428%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27sh%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%234a3a26%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%238f7440%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ffd9a0%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27pl%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffd9a0%27%20stop-opacity%3D%27.2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c98b4a%27%20stop-opacity%3D%270%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27ct%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%235a4059%27%2F%3E%3Cstop%20offset%3D%27.3%27%20stop-color%3D%27%2333223a%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23160f1f%27%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%27nwp%27%20cx%3D%27.5%27%20cy%3D%27.5%27%20r%3D%27.5%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ff2d78%27%20stop-opacity%3D%27.34%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%23ff2d78%27%20stop-opacity%3D%27.11%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ff2d78%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%27nwv%27%20cx%3D%27.5%27%20cy%3D%27.5%27%20r%3D%27.5%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23a24bff%27%20stop-opacity%3D%27.34%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%23a24bff%27%20stop-opacity%3D%27.1%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a24bff%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%27nwc%27%20cx%3D%27.5%27%20cy%3D%27.5%27%20r%3D%27.5%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%232de2ff%27%20stop-opacity%3D%27.26%27%2F%3E%3Cstop%20offset%3D%27.6%27%20stop-color%3D%27%232de2ff%27%20stop-opacity%3D%27.07%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%232de2ff%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%27ltp%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ff2d78%27%20stop-opacity%3D%27.44%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ff2d78%27%20stop-opacity%3D%270%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27ltc%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%232de2ff%27%20stop-opacity%3D%27.38%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%232de2ff%27%20stop-opacity%3D%270%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27ctg%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23a24bff%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ff2d78%27%20stop-opacity%3D%27.34%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%27900%27%20height%3D%271100%27%20fill%3D%27url(%23wl)%27%2F%3E%3Cellipse%20cx%3D%27700%27%20cy%3D%27150%27%20rx%3D%27420%27%20ry%3D%27330%27%20fill%3D%27url(%23nwp)%27%2F%3E%3Cellipse%20cx%3D%27170%27%20cy%3D%27300%27%20rx%3D%27380%27%20ry%3D%27330%27%20fill%3D%27url(%23nwv)%27%2F%3E%3Cellipse%20cx%3D%27450%27%20cy%3D%27800%27%20rx%3D%27520%27%20ry%3D%27300%27%20fill%3D%27url(%23nwc)%27%2F%3E%3Crect%20x%3D%27246%27%20y%3D%270%27%20width%3D%274%27%20height%3D%2796%27%20fill%3D%27%233f3252%27%2F%3E%3Cpath%20d%3D%27M176%20158c0-44%2030-68%2072-68s72%2023%2072%2068z%27%20fill%3D%27url(%23sh)%27%2F%3E%3Cellipse%20cx%3D%27248%27%20cy%3D%27158%27%20rx%3D%2772%27%20ry%3D%2712%27%20fill%3D%27%23ffd9a0%27%2F%3E%3Cpath%20d%3D%27M212%20162%20L284%20162%20L421%20588%20L75%20588Z%27%20fill%3D%27url(%23pl)%27%2F%3E%3Crect%20x%3D%27650%27%20y%3D%270%27%20width%3D%274%27%20height%3D%2774%27%20fill%3D%27%233f3252%27%2F%3E%3Cpath%20d%3D%27M592%20136c0-37%2025-57%2060-57s60%2019%2060%2057z%27%20fill%3D%27url(%23sh)%27%2F%3E%3Cellipse%20cx%3D%27652%27%20cy%3D%27136%27%20rx%3D%2760%27%20ry%3D%2710%27%20fill%3D%27%23ffd9a0%27%2F%3E%3Cpath%20d%3D%27M622%20140%20L682%20140%20L796%20566%20L508%20566Z%27%20fill%3D%27url(%23pl)%27%2F%3E%3Cpath%20d%3D%27M43%20300L61%20300L61%20357Q79%20363%2079%20381L79%20468L25%20468L25%20381Q25%20363%2043%20357Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%2741%27%20y%3D%27291%27%20width%3D%2722%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%2730%27%20y%3D%27389%27%20width%3D%273%27%20height%3D%2754%27%20rx%3D%271.5%27%20fill%3D%27%23ff2d78%27%20opacity%3D%270.4%27%2F%3E%3Cpath%20d%3D%27M114%20340L130%20340L130%20384Q144%20390%20144%20401L144%20468L100%20468L100%20401Q100%20390%20114%20384Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27112%27%20y%3D%27331%27%20width%3D%2719%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27105%27%20y%3D%27409%27%20width%3D%273%27%20height%3D%2741%27%20rx%3D%271.5%27%20fill%3D%27%232de2ff%27%20opacity%3D%270.34%27%2F%3E%3Cpath%20d%3D%27M178%20272L194%20272L194%20339Q210%20345%20210%20366L210%20468L162%20468L162%20366Q162%20345%20178%20339Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27176%27%20y%3D%27263%27%20width%3D%2720%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27167%27%20y%3D%27374%27%20width%3D%273%27%20height%3D%2763%27%20rx%3D%271.5%27%20fill%3D%27%23ffd9a0%27%20opacity%3D%270.14%27%2F%3E%3Cpath%20d%3D%27M240%20320L260%20320L260%20370Q280%20376%20280%20391L280%20468L220%20468L220%20391Q220%20376%20240%20370Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27238%27%20y%3D%27311%27%20width%3D%2724%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27225%27%20y%3D%27399%27%20width%3D%273%27%20height%3D%2748%27%20rx%3D%271.5%27%20fill%3D%27%23a24bff%27%20opacity%3D%270.32%27%2F%3E%3Cpath%20d%3D%27M322%20296L338%20296L338%20354Q353%20360%20353%20379L353%20468L307%20468L307%20379Q307%20360%20322%20354Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27320%27%20y%3D%27287%27%20width%3D%2719%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27312%27%20y%3D%27387%27%20width%3D%273%27%20height%3D%2755%27%20rx%3D%271.5%27%20fill%3D%27%23ff2d78%27%20opacity%3D%270.4%27%2F%3E%3Cpath%20d%3D%27M387%20346L405%20346L405%20387Q422%20393%20422%20405L422%20468L370%20468L370%20405Q370%20393%20387%20387Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27385%27%20y%3D%27337%27%20width%3D%2722%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27375%27%20y%3D%27413%27%20width%3D%273%27%20height%3D%2739%27%20rx%3D%271.5%27%20fill%3D%27%232de2ff%27%20opacity%3D%270.34%27%2F%3E%3Cpath%20d%3D%27M454%20282L470%20282L470%20345Q487%20351%20487%20371L487%20468L437%20468L437%20371Q437%20351%20454%20345Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27452%27%20y%3D%27273%27%20width%3D%2720%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27442%27%20y%3D%27379%27%20width%3D%273%27%20height%3D%2760%27%20rx%3D%271.5%27%20fill%3D%27%23ffd9a0%27%20opacity%3D%270.14%27%2F%3E%3Cpath%20d%3D%27M520%20326L536%20326L536%20374Q550%20380%20550%20394L550%20468L506%20468L506%20394Q506%20380%20520%20374Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27518%27%20y%3D%27317%27%20width%3D%2719%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27511%27%20y%3D%27402%27%20width%3D%273%27%20height%3D%2746%27%20rx%3D%271.5%27%20fill%3D%27%23a24bff%27%20opacity%3D%270.32%27%2F%3E%3Cpath%20d%3D%27M584%20268L604%20268L604%20336Q622%20342%20622%20364L622%20468L566%20468L566%20364Q566%20342%20584%20336Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27582%27%20y%3D%27259%27%20width%3D%2723%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27571%27%20y%3D%27372%27%20width%3D%273%27%20height%3D%2764%27%20rx%3D%271.5%27%20fill%3D%27%23ff2d78%27%20opacity%3D%270.4%27%2F%3E%3Cpath%20d%3D%27M660%20310L676%20310L676%20364Q692%20370%20692%20386L692%20468L644%20468L644%20386Q644%20370%20660%20364Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27658%27%20y%3D%27301%27%20width%3D%2720%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27649%27%20y%3D%27394%27%20width%3D%273%27%20height%3D%2751%27%20rx%3D%271.5%27%20fill%3D%27%232de2ff%27%20opacity%3D%270.34%27%2F%3E%3Cpath%20d%3D%27M729%20338L747%20338L747%20382Q765%20388%20765%20400L765%20468L711%20468L711%20400Q711%20388%20729%20382Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27727%27%20y%3D%27329%27%20width%3D%2722%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27716%27%20y%3D%27408%27%20width%3D%273%27%20height%3D%2742%27%20rx%3D%271.5%27%20fill%3D%27%23ffd9a0%27%20opacity%3D%270.14%27%2F%3E%3Cpath%20d%3D%27M804%20290L820%20290L820%20351Q835%20357%20835%20375L835%20468L789%20468L789%20375Q789%20357%20804%20351Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27802%27%20y%3D%27281%27%20width%3D%2719%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27794%27%20y%3D%27383%27%20width%3D%273%27%20height%3D%2757%27%20rx%3D%271.5%27%20fill%3D%27%23a24bff%27%20opacity%3D%270.32%27%2F%3E%3Cpath%20d%3D%27M859%20324L873%20324L873%20373Q886%20379%20886%20393L886%20468L846%20468L846%20393Q846%20379%20859%20373Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27857%27%20y%3D%27315%27%20width%3D%2718%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.92%27%2F%3E%3Crect%20x%3D%27851%27%20y%3D%27401%27%20width%3D%273%27%20height%3D%2746%27%20rx%3D%271.5%27%20fill%3D%27%23ff2d78%27%20opacity%3D%270.4%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27468%27%20width%3D%27900%27%20height%3D%2718%27%20fill%3D%27url(%23pk)%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27468%27%20width%3D%27900%27%20height%3D%273%27%20fill%3D%27url(%23bz)%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27486%27%20width%3D%27900%27%20height%3D%278%27%20fill%3D%27%23000%27%20opacity%3D%27.42%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27486%27%20width%3D%27900%27%20height%3D%272.6%27%20fill%3D%27%23ff2d78%27%20opacity%3D%27.7%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27489%27%20width%3D%27900%27%20height%3D%2758%27%20fill%3D%27url(%23ltp)%27%2F%3E%3Cpath%20d%3D%27M52%20600L68%20600L68%20643Q84%20649%2084%20660L84%20726L36%20726L36%20660Q36%20649%2052%20643Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%2750%27%20y%3D%27591%27%20width%3D%2720%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%2741%27%20y%3D%27668%27%20width%3D%273%27%20height%3D%2741%27%20rx%3D%271.5%27%20fill%3D%27%232de2ff%27%20opacity%3D%270.34%27%2F%3E%3Cpath%20d%3D%27M125%20574L139%20574L139%20626Q153%20632%20153%20647L153%20726L111%20726L111%20647Q111%20632%20125%20626Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27123%27%20y%3D%27565%27%20width%3D%2718%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27116%27%20y%3D%27655%27%20width%3D%273%27%20height%3D%2749%27%20rx%3D%271.5%27%20fill%3D%27%23ffd9a0%27%20opacity%3D%270.14%27%2F%3E%3Cpath%20d%3D%27M198%20614L214%20614L214%20652Q232%20658%20232%20668L232%20726L180%20726L180%20668Q180%20658%20198%20652Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27196%27%20y%3D%27605%27%20width%3D%2721%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27185%27%20y%3D%27676%27%20width%3D%273%27%20height%3D%2736%27%20rx%3D%271.5%27%20fill%3D%27%23a24bff%27%20opacity%3D%270.32%27%2F%3E%3Cpath%20d%3D%27M264%20588L280%20588L280%20635Q294%20641%20294%20654L294%20726L250%20726L250%20654Q250%20641%20264%20635Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27262%27%20y%3D%27579%27%20width%3D%2719%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27255%27%20y%3D%27662%27%20width%3D%273%27%20height%3D%2744%27%20rx%3D%271.5%27%20fill%3D%27%23ff2d78%27%20opacity%3D%270.4%27%2F%3E%3Cpath%20d%3D%27M632%20594L648%20594L648%20639Q663%20645%20663%20657L663%20726L617%20726L617%20657Q617%20645%20632%20639Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27630%27%20y%3D%27585%27%20width%3D%2719%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27622%27%20y%3D%27665%27%20width%3D%273%27%20height%3D%2743%27%20rx%3D%271.5%27%20fill%3D%27%232de2ff%27%20opacity%3D%270.34%27%2F%3E%3Cpath%20d%3D%27M704%20610L720%20610L720%20649Q738%20655%20738%20666L738%20726L686%20726L686%20666Q686%20655%20704%20649Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27702%27%20y%3D%27601%27%20width%3D%2721%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27691%27%20y%3D%27674%27%20width%3D%273%27%20height%3D%2737%27%20rx%3D%271.5%27%20fill%3D%27%23ffd9a0%27%20opacity%3D%270.14%27%2F%3E%3Cpath%20d%3D%27M774%20570L790%20570L790%20623Q804%20629%20804%20645L804%20726L760%20726L760%20645Q760%20629%20774%20623Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27772%27%20y%3D%27561%27%20width%3D%2719%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27765%27%20y%3D%27653%27%20width%3D%273%27%20height%3D%2750%27%20rx%3D%271.5%27%20fill%3D%27%23a24bff%27%20opacity%3D%270.32%27%2F%3E%3Cpath%20d%3D%27M844%20602L860%20602L860%20644Q876%20650%20876%20662L876%20726L828%20726L828%20662Q828%20650%20844%20644Z%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27842%27%20y%3D%27593%27%20width%3D%2720%27%20height%3D%2710%27%20rx%3D%273%27%20fill%3D%27%2307050f%27%20opacity%3D%270.8%27%2F%3E%3Crect%20x%3D%27833%27%20y%3D%27670%27%20width%3D%273%27%20height%3D%2740%27%20rx%3D%271.5%27%20fill%3D%27%23ff2d78%27%20opacity%3D%270.4%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27726%27%20width%3D%27900%27%20height%3D%2715%27%20fill%3D%27url(%23pk)%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27726%27%20width%3D%27900%27%20height%3D%273%27%20fill%3D%27url(%23bz)%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27741%27%20width%3D%27900%27%20height%3D%278%27%20fill%3D%27%23000%27%20opacity%3D%27.42%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27741%27%20width%3D%27900%27%20height%3D%272.6%27%20fill%3D%27%232de2ff%27%20opacity%3D%27.6%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27744%27%20width%3D%27900%27%20height%3D%2752%27%20fill%3D%27url(%23ltc)%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27860%27%20width%3D%27900%27%20height%3D%2784%27%20fill%3D%27url(%23ctg)%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27940%27%20width%3D%27900%27%20height%3D%27160%27%20fill%3D%27url(%23ct)%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27940%27%20width%3D%27900%27%20height%3D%273%27%20fill%3D%27%23ff2d78%27%20opacity%3D%27.5%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27940%27%20width%3D%27900%27%20height%3D%279%27%20fill%3D%27url(%23bz)%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27954%27%20width%3D%27900%27%20height%3D%272%27%20fill%3D%27%23000%27%20opacity%3D%27.4%27%2F%3E%3C%2Fsvg%3E"); /* 吧台木沿：一条画出来的木条 + 黄铜压边（贴在页面顶端/组件顶端做「台面」） */ --scene-counter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235a4059'/%3E%3Cstop offset='.35' stop-color='%2333223a'/%3E%3Cstop offset='1' stop-color='%23181021'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9bd8a'/%3E%3Cstop offset='.5' stop-color='%238f7440'/%3E%3Cstop offset='1' stop-color='%233d2d1a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='4' width='400' height='18' fill='url(%23w)'/%3E%3Crect y='0' width='400' height='4.5' rx='2' fill='url(%23b)'/%3E%3Crect y='9' width='400' height='1' fill='%23000' opacity='.35'/%3E%3Crect y='15' width='400' height='1' fill='%23cbb0e8' opacity='.1'/%3E%3C/svg%3E"); } /* ========================================================================== 7) 光照混入类（原霓虹 glow 类；名字保持，气质改成「灯」） 用法：

…

========================================================================== */ .px-title { font-family: var(--font-pixel); letter-spacing: 0.06em; -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed; } .neon-pink { color: var(--neon-pink-hot); text-shadow: var(--neon-text-pink); } .neon-cyan { color: var(--neon-cyan-soft); text-shadow: var(--neon-text-cyan); } .neon-purple { color: var(--neon-purple-soft); text-shadow: var(--neon-text-purple); } .neon-amber { color: var(--amber-hi); text-shadow: var(--neon-text-amber); } /* 霓虹管框（R11 恢复）：招牌 / 激活态才配拥有 */ .neon-frame-pink { border: var(--stroke) solid var(--neon-pink); box-shadow: var(--neon-box-pink); } .neon-frame-cyan { border: var(--stroke) solid var(--neon-cyan); box-shadow: var(--neon-box-cyan); } /* 老灯管通电的偶发抽搐（只留给真正的招牌，别到处挂） */ @keyframes neon-flicker { 0%, 91%, 94%, 100% { opacity: 1; } 92%, 95.5% { opacity: 0.62; } 93% { opacity: 0.9; } } .neon-flicker { animation: neon-flicker 6s linear infinite; } /* ========================================================================== 8) 质感层：灯池 / 暗角 / 细噪 R10：删除 CRT 扫描线（重复纹理=廉价感来源 §一.1）。 .fx-scanlines 类名保留（cocktail/lobby 页在用），改为「灯罩下的光池」。 ========================================================================== */ .fx-scanlines { position: relative; } .fx-scanlines::after { content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(ellipse 78% 42% at 26% -6%, var(--glow-purple-45), transparent 64%), radial-gradient(ellipse 62% 34% at 84% 2%, var(--glow-pink-18), transparent 62%), radial-gradient(ellipse 58% 30% at 62% 104%, var(--glow-cyan-16), transparent 66%); mix-blend-mode: screen; } .fx-vignette { position: relative; } .fx-vignette::before { content: ""; position: absolute; inset: 0; z-index: 59; pointer-events: none; background: radial-gradient( ellipse 122% 92% at 50% 38%, transparent 52%, rgba(6, 4, 14, 0.66) 100% ); } /* 细噪：材质颗粒（胶片/纸/绒面），不是图案 */ .fx-noise { position: relative; } .fx-noise::after { content: ""; position: absolute; inset: 0; z-index: 61; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== 9) 吊灯（原 .disco-ball 位；结构不变，画的东西换成黄铜灯罩 + 光池） 结构：
========================================================================== */ @keyframes lamp-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } /* R11：吊灯 = 吧台小台灯，是全站仅剩的「真琥珀」光源（点缀，不是主角） */ @keyframes lamp-breathe { 0%, 100% { filter: drop-shadow(0 10px 26px var(--glow-lamp-20)); } 50% { filter: drop-shadow(0 14px 40px var(--glow-lamp-50)); } } .disco-ball { position: relative; width: 74px; height: 42px; border-radius: 46% 46% 12% 12% / 92% 92% 16% 16%; background: linear-gradient(180deg, var(--brass-dim) 0 22%, var(--brass) 22% 66%, var(--brass-hi) 66% 100%); box-shadow: inset 0 -3px 0 var(--amber-hi), inset 0 2px 6px rgba(0, 0, 0, 0.45); transform-origin: 50% -34px; animation: lamp-sway 5.6s ease-in-out infinite, lamp-breathe 4.4s ease-in-out infinite; } /* 灯下的光池（画出来的锥形光，不是发光滤镜） */ .disco-ball::after { content: ""; position: absolute; left: 50%; top: 100%; width: 260px; height: 220px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 50% 100% at 50% 0%, var(--glow-lamp-50), var(--glow-lamp-20) 46%, transparent 74%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); } .disco-ball .disco-chain { position: absolute; left: 50%; bottom: 100%; width: 3px; height: 40px; transform: translateX(-50%); background: linear-gradient(90deg, var(--brass-shade), var(--brass) 45%, var(--brass-hi) 55%, var(--brass-shade)); } /* ========================================================================== 10) 摇酒壶签筒（shaker）组件类 —— 修「签穿模」的标准结构（结构不变） -------------------------------------------------------------------------- V1 bug 根因：签是筒的兄弟节点、无 overflow 裁剪，摇晃位移一大签就飞出筒壁。 V2 结构（z-index / overflow 关系）： .shaker-stage（摇晃 transform）> .shaker-slot（overflow 裁剪窗） > .shaker-sticks > .shaker-stick ×N；.shaker-body 壶身盖在签之上。 ========================================================================== */ .shaker-stage { position: relative; width: 160px; height: 230px; margin: 0 auto; transform-origin: 50% 88%; } .shaker-stage.shaking { animation: shaker-shake 0.5s ease-in-out infinite; } @keyframes shaker-shake { 0%, 100% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(-9deg) translateY(-3px); } 50% { transform: rotate(7deg) translateY(2px); } 80% { transform: rotate(-5deg) translateY(-2px); } } .shaker-slot { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 96px; height: 88px; /* 签只允许在壶口上方这块区域活动 */ overflow: hidden; /* ← 防穿模第二道保险 */ z-index: 1; } .shaker-sticks { position: absolute; inset: auto 0 -6px 0; /* 贴住 slot 底部，签根埋进壶口 */ display: flex; justify-content: center; gap: 7px; align-items: flex-end; } /* 签 = 琥珀签头 + 暗签身（R12 去木纹，与 style.css 的签筒里那三根签同一套画法） */ .shaker-stick { width: 9px; height: 72px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--neon-amber) 0 13px, var(--ink-mid) 13px 100%); border: 1px solid var(--line-counter); box-shadow: 0 0 6px var(--glow-amber-25); } .shaker-stage.shaking .shaker-stick { animation: stick-bounce 0.5s ease-in-out infinite; } .shaker-stage.shaking .shaker-stick:nth-child(2n) { animation-delay: 0.12s; } .shaker-stage.shaking .shaker-stick:nth-child(3n) { animation-delay: 0.22s; } @keyframes stick-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } /* 小于 slot 余量，永不出界 */ } .shaker-body { position: absolute; left: 50%; top: 56px; /* 壶口盖住签根 */ transform: translateX(-50%); width: 150px; z-index: 2; pointer-events: none; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5)); } /* ========================================================================== 11) 画出来的场景层 —— 可挂到任何容器上，制造「长在店里」的深度 .mat-wood 木面（吧台立面 / 菜单板背板） .mat-brass 黄铜面（铜牌 / 门牌） .mat-velvet 绒布面（包厢卡座 / 档案卡） .mat-glass 玻璃面（杯子 / 灯罩） .rail-brass 顶部黄铜压条（贴在组件上沿） .lamp-pool 顶部灯池（组件被灯烘着） ========================================================================== */ .mat-wood { background-color: var(--wood); background-image: var(--tex-wood); box-shadow: var(--edge-wood); } .mat-brass { background-image: linear-gradient( 172deg, var(--brass-hi) 0%, var(--brass) 16%, var(--brass-dim) 42%, var(--brass) 62%, var(--brass-hi) 78%, var(--brass-dim) 100%); color: var(--wood-dim); box-shadow: var(--edge-brass), 0 6px 16px rgba(0, 0, 0, 0.5); } .mat-velvet { background-color: var(--velvet); background-image: var(--tex-velvet); } .mat-glass { background-image: linear-gradient(100deg, transparent 0 12%, var(--glass-edge) 12% 15%, transparent 15% 100%), linear-gradient(180deg, var(--glass-tint), rgba(0, 0, 0, 0.22)); box-shadow: inset -8px -10px 18px rgba(0, 0, 0, 0.4), inset 6px 4px 12px var(--glass-tint); } .rail-brass { position: relative; } .rail-brass::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background-image: var(--scene-counter); background-size: 100% 100%; border-radius: var(--radius-card) var(--radius-card) 0 0; pointer-events: none; } .lamp-pool { position: relative; } .lamp-pool::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 46% at 50% -8%, var(--glow-amber-25), transparent 66%); }