/* ============================================ Balatro Theme — single fixed dark palette 提取自设计原型「金宝游戏.html」。移除 light/dark 双主题， 全站固定 Balatro 红蓝漩涡深色风格。所有画面复用的共享 class 都通过这些 --token 取色，改这里即可全站统一换肤。 ============================================ */ :root, [data-theme="dark"] { /* ============================================================ UI 缩放系统（全站统一） --user-scale：用户档位（紧凑 0.9 / 标准 1.1 / 大 1.3），由 ui-scale.js 写入 --fit-scale ：JS 按视口算的贴合系数（桌面大窗=1；小窗/手机横屏自动缩小），ui-scale.js 写入 --ui-scale ：两者相乘，所有尺寸令牌乘它 → 改档位/转屏整页真 reflow（非 transform，不糊字） 默认值即兜底：JS 未加载/失败时 = 当前桌面观感（standard×fit=1.1）。 ============================================================ */ --user-scale: 1.1; /* --fit-scale 钉死为 1：视口贴合已交给 Fit Stage（stage.js 的 transform:scale）， ui-scale.js 不再按视口改它。--ui-scale 退化为纯「密度档位」(compact/standard/large)， 页面 CSS 据此 reflow 出固定逻辑尺寸，再由 stage 整体缩放铺满视口。 */ --fit-scale: 1; --ui-scale: calc(var(--fit-scale) * var(--user-scale)); /* ---- Fit Stage 逻辑设计高 + 缩放系数（stage.js 写实际值；此处为兜底） ---- */ --logical-h: 760px; /* 各 .screen / .blt-game / .screen-overlay 的 min-height 基准 */ --scale: 1; /* #app(.stage-content) 的 transform:scale 系数，stage.js 实时写入 */ /* ---- 语义尺寸令牌（基准 = 原桌面 px，乘 --ui-scale 后整体缩放） ---- */ /* 卡牌宽高比贴原版 CARD_W/H = 2.087/2.756 ≈ 0.757（lua_src/globals.lua:274-275）：84/112 = 0.75 */ --card-w: calc(var(--ui-scale) * 84px); --card-h: calc(var(--ui-scale) * 112px); /* 小丑牌与普通牌同尺寸（用户要求一致），共用 card 令牌 */ --joker-w: var(--card-w); --joker-h: var(--card-h); --sidebar-w: calc(var(--ui-scale) * 234px); /* 商店卡牌统一尺寸（货架小丑/消耗品/补充包/攻击牌单元同宽，解决「有大有小形状不一」） */ --shop-card-w: 96px; /* ============================================================ 原版 Balatro G.C 配色真值（lua_src/globals.lua:353-469） —— 单一来源。下方语义令牌尽量引用这些，保证全站贴近原版观感。 仅功能性色值常量，便于追溯与统一换肤。 ============================================================ */ --blt-mult: #fe5f55; /* MULT 倍率红 */ --blt-chips: #009dff; /* CHIPS 筹码蓝 */ --blt-money: #f3b958; /* MONEY 金钱黄 */ --blt-gold: #eac058; /* GOLD */ --blt-red: #fe5f55; /* RED */ --blt-green: #4bc292; /* GREEN */ --blt-blue: #009dff; /* BLUE */ --blt-orange: #fda200; /* ORANGE */ --blt-purple: #8867a5; /* PURPLE */ --blt-black: #374244; /* BLACK */ --blt-lblack: #4f6367; /* L_BLACK */ /* 扑克花色（白底牌面点数/花色色） */ --blt-suit-red: #fe5f55; /* Hearts / Diamonds */ --blt-suit-spade: #374649; /* Spades */ --blt-suit-club: #424e54; /* Clubs */ /* 稀有度 hue（边框/像素描边参考；底色仍走淡底深字渐变） */ --blt-rar-common: #009dff; --blt-rar-uncommon: #4bc292; --blt-rar-rare: #fe5f55; --blt-rar-legend: #b26cbb; /* seal 蜡封 */ --blt-seal-gold: #eac058; --blt-seal-red: #fe5f55; --blt-seal-blue: #009dff; --blt-seal-purple: #8867a5; /* ============================================================ 卡片视觉语言令牌（与 client/js/card-codes.js 的 class 一一对应） —— 底色 = 稀有度（静态）；描边 = edition（动态）。两通道正交，互不撞色。 ============================================================ */ /* 稀有度底色 4 档：普通灰 / 罕见银 / 稀有金 / 传说彩虹（克制虹彩，区别于多彩饱和动态彩虹） */ /* 稀有度底色：柔和淡色（低饱和、不刺眼），文字用各档专属深色（见 cards.css），淡底深字高对比不晃眼。 仍靠「色相」区分等级：中性淡灰 / 淡银蓝 / 淡金 / 淡彩虹。 */ --rar-common-grad: linear-gradient(158deg, #d7dce2 0%, #bcc3cc 52%, #a4acb6 100%); --rar-common-frame: rgba(110, 122, 136, 0.5); --rar-uncommon-grad: linear-gradient(158deg, #d9e7f3 0%, #bdd1e3 52%, #a0b8ce 100%); --rar-uncommon-frame: rgba(96, 132, 168, 0.55); --rar-rare-grad: linear-gradient(158deg, #f2e4be 0%, #e2cb8f 52%, #cfb16a 100%); --rar-rare-frame: rgba(170, 128, 48, 0.6); --rar-legend-grad: linear-gradient(150deg, #ddcaf2 0%, #f2d7e6 26%, #cbddf2 52%, #f2e4c8 78%, #ddcaf2 100%); --rar-legend-frame: rgba(160, 118, 196, 0.62); /* edition 描边色 —— 每种「色相 + 运动」都不同，肉眼一眼可分； 彩虹只给「多彩」（且做成故障硬边），与传说的静态柔彩底色彻底错开 */ --ed-foil-c: linear-gradient(160deg, #38bdf8 0%, #7dd3fc 26%, #e8f7ff 50%, #38bdf8 74%, #0ea5e9 100%); /* 闪箔=冰蓝镜面铬 */ --ed-holo-c: linear-gradient(120deg, #ff4fd8 0%, #22d3ee 28%, #a855f7 50%, #22d3ee 72%, #ff4fd8 100%); /* 全息=品红·青·紫（无暖色） */ /* 多彩=全光谱「硬边棱镜分块」(conic 硬停=彩绘玻璃碎晶面，区别于全息的平滑液态流动) */ --ed-poly-c: conic-gradient(from 0deg, #ff2d55 0deg 51deg, #ff9500 51deg 103deg, #ffe000 103deg 154deg, #34c759 154deg 206deg, #00c7ff 206deg 257deg, #5e5ce6 257deg 309deg, #ff2d55 309deg 360deg); --ed-neg-c: #0b0b0f; /* 攻击牌威胁度色阶（轻 amber → 中 orange → 重 crimson） */ --threat-1: #e7b94d; --threat-2: #ef8a3c; --threat-3: #e2425f; /* 消耗品类别色（塔罗紫 / 星球蓝 / 幻灵青·最强加描边） */ --cat-tarot: #b07bff; --cat-planet: #5aa0ff; --cat-spectral: #38e0d4; /* ---- 刘海/灵动岛/home条安全区（全屏 fixed 容器无视 body padding，故抽成令牌按需在内容边缘避让）---- */ /* env() 自带 0px fallback；旧浏览器(无 env 支持)整条声明降级，使用处再 var(..., 0px) 双兜底 */ --sa-top: env(safe-area-inset-top, 0px); --sa-right: env(safe-area-inset-right, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px); /* 字号阶梯（供需要统一管理处引用；一次性 px 仍可就地 calc(var(--ui-scale)*Npx)） */ --fs-xs: calc(var(--ui-scale) * 10px); --fs-sm: calc(var(--ui-scale) * 12px); --fs-md: calc(var(--ui-scale) * 14px); --fs-lg: calc(var(--ui-scale) * 18px); --fs-xl: calc(var(--ui-scale) * 24px); /* ---- 页面 / 背景（漩涡由 index.html 的 .swirl-bg / pixi 油彩接管，此处为兜底深色） ---- 兜底色 = 原版暗绿（贴牌桌绿呢家族 #0e3522/#0a1f16）。对局屏超宽/超高比例时 stage 缩放 留出的信箱带读作「桌面深绿阴影」而非突兀暗红（原投诉「绿色下面还有红」根因：旧兜底是暗红）。 */ --bg-page: #0a1f16; --bg-page-grad: radial-gradient(ellipse 120% 90% at 55% 38%, #143324 0%, #0e2619 42%, #0a1f16 78%, #07160f 100%); /* ---- 面板（漩涡之上的深色玻璃，带一点 Balatro 绿调） ---- */ --bg-panel: rgba(11, 34, 24, 0.74); --bg-panel-solid: #112a1e; --bg-panel-deep: rgba(4, 20, 13, 0.82); --bg-overlay: rgba(4, 10, 8, 0.8); --bg-input: rgba(8, 28, 20, 0.86); --border-panel: rgba(255, 255, 255, 0.08); --border-accent: rgba(120, 200, 162, 0.22); --border-focus: rgba(255, 210, 60, 0.6); --text-primary: #eef3ee; --text-secondary: #8fc6ac; --text-muted: #5f8c79; --text-placeholder: rgba(120, 170, 150, 0.45); /* ---- 金色（标题 / 关键数值） ---- */ --accent-gold: #ffd23f; --accent-gold-bg: rgba(255, 200, 40, 0.12); --accent-gold-border: rgba(255, 200, 40, 0.4); --accent-gold-glow: rgba(255, 200, 40, 0.32); /* ---- 绿色（侧边栏 / 出牌 / 胜）= G.C.GREEN ---- */ --accent-green: var(--blt-green); --accent-green-bg: rgba(75, 194, 146, 0.12); --accent-green-border: rgba(75, 194, 146, 0.4); /* ---- 红（倍率 / 弃牌 / 负）= G.C.RED/MULT ---- */ --accent-red: var(--blt-red); --accent-red-bg: rgba(254, 95, 85, 0.14); --accent-red-border: rgba(254, 95, 85, 0.42); /* ---- 蓝（筹码）= G.C.BLUE/CHIPS ---- */ --accent-blue: var(--blt-blue); --accent-blue-bg: rgba(0, 157, 255, 0.16); /* ---- 扑克牌（白底 Balatro 牌面） ---- */ --card-bg: linear-gradient(175deg, #ffffff 0%, #faf8f4 30%, #f1ece2 100%); --card-border: rgba(150, 138, 118, 0.7); --card-border-hover: rgba(255, 210, 60, 0.65); --card-shadow: rgba(0, 0, 0, 0.45); --card-shadow-hover: rgba(0, 0, 0, 0.55); --card-red: var(--blt-suit-red); --card-black: var(--blt-suit-spade); --card-shine-a: rgba(255, 255, 255, 0); --card-shine-b: rgba(255, 255, 255, 0.28); --card-selected-border: #ffd23f; --card-selected-glow: rgba(255, 210, 60, 0.45); --card-inset: rgba(255, 255, 255, 0.85); /* ---- 牌面点数筹码徽章（蓝） ---- */ --chip-bg: linear-gradient(135deg, #1aa6ff, #0072cc); --chip-glow: rgba(0, 157, 255, 0.55); /* ---- 小丑牌（默认紫，稀有度配色见 cards.css） ---- */ --joker-bg: linear-gradient(155deg, #5b3a8c 0%, #432768 55%, #2e1a4a 100%); --joker-border: rgba(255, 255, 255, 0.3); --joker-border-glow: rgba(180, 140, 255, 0.3); --joker-name-color: #ffffff; --joker-desc-color: rgba(255, 255, 255, 0.82); --joker-glow-top: rgba(255, 255, 255, 0.14); --joker-picked-filter: saturate(0.4) brightness(0.55); /* ---- Tooltip ---- */ --tooltip-bg: rgba(8, 18, 13, 0.95); --tooltip-border: rgba(255, 210, 60, 0.38); --tooltip-shadow: rgba(0, 0, 0, 0.55); --tooltip-name: #ffd23f; --tooltip-desc: #dfeae2; /* ---- 次级按钮 / 排序按钮 ---- */ --btn-sort-bg: rgba(120, 200, 162, 0.1); --btn-sort-color: #9fdcc0; --btn-sort-border: rgba(120, 200, 162, 0.24); --btn-secondary-bg: rgba(120, 200, 162, 0.1); --btn-secondary-color: #9fdcc0; --btn-secondary-border: rgba(120, 200, 162, 0.24); /* ---- 车道 / 回合胜负配色 ---- */ --lane-won-border: rgba(46, 194, 126, 0.55); --lane-won-bg: rgba(46, 194, 126, 0.08); --lane-lost-border: rgba(255, 82, 119, 0.55); --lane-lost-bg: rgba(255, 82, 119, 0.08); --lane-tied-border: rgba(255, 200, 40, 0.55); --lane-tied-bg: rgba(255, 200, 40, 0.08); /* ---- 翻牌小卡 ---- */ --reveal-mini-bg: linear-gradient(175deg, #ffffff, #f1ece2); --reveal-mini-border: rgba(150, 138, 118, 0.6); --reveal-mini-black: #1a1a2e; /* ---- 计分展示 ---- */ --score-hand-bg: linear-gradient(135deg, #1aa6ff, #0072cc); --score-chips-color: var(--blt-chips); --score-chips-bg: rgba(0, 157, 255, 0.14); --score-chips-border: rgba(0, 157, 255, 0.4); --score-mult-color: var(--blt-mult); --score-mult-bg: rgba(254, 95, 85, 0.12); --score-mult-border: rgba(254, 95, 85, 0.4); --glass-blur: blur(14px); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* ---- 卡牌强化特效 ---- */ --foil-border: rgba(100, 216, 203, 0.6); --foil-glow: rgba(100, 216, 203, 0.3); --holo-glow: rgba(168, 85, 247, 0.35); --poly-border: rgba(244, 114, 182, 0.55); --poly-glow: rgba(244, 114, 182, 0.3); --opponent-name: var(--accent-red); --waiting-color: #ffd23f; --confirmed-color: var(--accent-green); /* ============================================================ 设计稿 kit 短名令牌桥接（components.css / 后续 Phase 2 设计 CSS 可近乎直贴） —— 全部别名 → 现有全名令牌，未被引用时零开销、零渲染影响。 ============================================================ */ --panel: var(--bg-panel); --panel-solid: var(--bg-panel-solid); --panel-deep: var(--bg-panel-deep); --panel-hi: var(--glass-inset); --line: var(--border-panel); --gold: var(--accent-gold); --gold-d: #e0a200; --blue: var(--accent-blue); --green: var(--accent-green); --red: var(--accent-red); --t1: var(--text-primary); --t2: var(--text-secondary); --t3: var(--text-muted); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --sh-1: 0 4px 16px rgba(0, 0, 0, 0.4); --sh-2: 0 14px 48px rgba(0, 0, 0, 0.55); --sh-card: 0 4px 12px rgba(0, 0, 0, 0.45); /* —— 设计稿 components.css / screens.css 直接引用、theme 此前缺失的令牌 —— */ --line-2: rgba(255, 255, 255, 0.16); /* 比 --line 更亮一档的描边（按钮/徽标/输入框） */ --panel-2: var(--bg-panel-deep); /* .glass-deep / .modal 的更深面板 */ --panel-hi: rgba(255, 255, 255, 0.06); /* 玻璃内高光（= --glass-inset 的色值） */ --blue-d: #235f9e; /* 蓝按钮/筹码深色端 */ --red-d: #c0285a; /* 红按钮深色端 */ --green-d: #1f8a59; /* 绿按钮深色端 */ --orange: #ef8a3c; --violet: #b07bff; --teal: #38e0d4; --t-dim: rgba(150, 190, 170, 0.45); /* 输入框 placeholder */ --border-focus: rgba(255, 210, 60, 0.6); /* 输入框聚焦描边（= 既有 --border-focus 同值，显式补全 fallback） */ /* Balatro 绿桌呢三档（对战页 sidebar/play 底色用，Phase 1 后续步骤接入） */ --green-1: #1e4a34; --green-2: #163c2b; --green-3: #0d2218; /* ============================================================ 设计稿 card-kit.css / screens.css 直接引用的卡片/底图令牌（照搬 foundation.css 值） —— 这些是「无后缀」设计名，与上方 --rar-*-grad/--rar-*-frame 并存： -grad/-frame 现由 .jd-rar（详情面板稀有度框，layout.css）读；设计卡系统(.jcard)读这些无后缀名。 ============================================================ */ --bg-deep: #190310; --rar-common: linear-gradient(158deg, #d7dce2, #b9c0c9 55%, #a4acb6); --rar-uncommon: linear-gradient(158deg, #d9e7f3, #bcd1e3 55%, #9fb8ce); --rar-rare: linear-gradient(158deg, #f4e6c0, #e3cc8e 55%, #cfb16a); --rar-legend: linear-gradient(150deg, #e0cdf2, #f2d7e6 26%, #cbddf2 52%, #f2e4c8 78%, #e0cdf2); --rar-common-ink: #3a4350; --rar-uncommon-ink: #234a6b; --rar-rare-ink: #6b4a13; --rar-legend-ink: #5a3a6b; --card-face: linear-gradient(177deg, #ffffff, #faf7f1 32%, #f0ebe0); --card-red: var(--blt-suit-red); --card-black: var(--blt-suit-spade); /* 卡尺寸贴原版「屏占比」（globals.lua: CARD_H/TILE_H = 2.751/11.5 = 23.9% 屏高， CARD_W/CARD_H = 35/47 = 0.745）。绑 --logical-h(760) → 卡高=182、宽=136， 任意视口经 stage 等比缩放后，卡相对整屏的视觉占比恒等原版（不再是 13% 的小卡）。 */ --card-w: calc(var(--logical-h, 760px) * 0.1785); --card-h: calc(var(--logical-h, 760px) * 0.2395); --gap: 8px; color-scheme: dark; } /* 主题切换按钮已移除，保留隐藏规则以防遗留 DOM */ .theme-toggle { display: none !important; }