/* ========================================================================== 13 · THEME PERSONA — per-environment UI character (LAST file: wins cascade) -------------------------------------------------------------------------- 拆分五个主题的界面性格：扑克牌面/牌背、按钮、胜利动画配色、牌桌描边、 遮罩染色、字体气质与细节 UI。 铁律： · 不改任何布局框架/元素位置/盒尺寸（radius、tracking、shadow、texture only） · 信息对比度不降级——牌面永远浅色底深字，按钮文字对比度保持 AA 以上 · 午夜 = 低调高级（默认性格，仅微调）；皇家 = 奢华；酒馆 = 温暖质朴； 港湾 = 日式简约；碳纤维 = 专业竞技 ========================================================================== */ /* ============ 1 · MIDNIGHT — 地下室 · 低调高级 ============================ 已是默认性格：象牙牌面 + 橄榄金点缀。这里只补胜利配色与细腻度。 */ body[data-theme="midnight"]{ --vfx-1:#d9e2b0;--vfx-2:#f6d986;--vfx-3:#ffffff; } body[data-theme="midnight"] .card{ background:linear-gradient(165deg,#fdfdf8 12%,#ecefe4 90%); } body[data-theme="midnight"] .card.back{ background: radial-gradient(circle at 50% 50%,transparent 26%,rgba(255,255,255,.07) 27%,transparent 30%), radial-gradient(circle at 25% 25%,rgba(247,238,199,.10) 1px,transparent 1.6px), radial-gradient(circle at 75% 75%,rgba(247,238,199,.10) 1px,transparent 1.6px), repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 7px), linear-gradient(150deg,#5a6840,#2c3518); background-size:auto,14px 14px,14px 14px,auto,auto; } /* ============ 2 · ROYAL — 皇家沙龙 · 奢华 ================================= 暖金牌面镶细金线、酒红鎏金牌背、加宽字距、双层金桌缘。 */ body[data-theme="royal"]{ --vfx-1:#f3c96b;--vfx-2:#e2a19a;--vfx-3:#fff4de; } body[data-theme="royal"] .card{ background:linear-gradient(165deg,#fff9ec 12%,#f3e5c9 90%); border-color:rgba(122,74,28,.42);color:#2a1416; box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 #fff,inset 0 0 0 2px rgba(201,161,92,.28); } body[data-theme="royal"] .card.red{color:#b02434} body[data-theme="royal"] .card.back{ border-color:rgba(233,196,120,.5); background: radial-gradient(circle at 50% 50%,transparent 24%,rgba(240,205,120,.22) 25%,transparent 31%), repeating-linear-gradient(45deg,rgba(240,205,120,.16) 0 1px,transparent 1px 8px), repeating-linear-gradient(-45deg,rgba(240,205,120,.16) 0 1px,transparent 1px 8px), linear-gradient(150deg,#7c2f35,#3d1418); box-shadow:0 3px 8px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,226,160,.3); } body[data-theme="royal"] .btn{border-radius:10px;letter-spacing:.05em} body[data-theme="royal"] .btn.primary{ border-color:rgba(255,222,150,.55); box-shadow:0 8px 22px var(--accent-glow),inset 0 1px 0 rgba(255,236,190,.5); } body[data-theme="royal"] .poker-table{ box-shadow: 0 0 0 4px color-mix(in srgb,#c9a15c 78%,#2a1a08), 0 0 0 7px color-mix(in srgb,#8a6a34 72%,#160f08), 0 0 0 9px rgba(0,0,0,.58), inset 0 0 84px rgba(0,0,0,.46), inset 0 2px 18px rgba(255,226,160,.12), 0 30px 70px rgba(0,0,0,.5); } body[data-theme="royal"] .modal-layer{background:rgba(var(--overlay-rgb),.78)} body[data-theme="royal"] .role-badge.d{box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 0 0 1px rgba(201,161,92,.5)} body[data-theme="royal"] .pot-box{border-color:rgba(233,196,120,.42)} body[data-theme="royal"] .environment-decor span{opacity:.44} /* ============ 3 · TAVERN — 乡村酒馆 · 温暖质朴 ============================ 羊皮纸牌面、皮革纹牌背、饱满圆角按钮、木纹厚桌缘。 */ body[data-theme="tavern"]{ --vfx-1:#f0b46a;--vfx-2:#e2703a;--vfx-3:#fff2d8; } body[data-theme="tavern"] .card{ background:linear-gradient(165deg,#fbf3df 12%,#efe0bf 90%); border-color:rgba(90,50,18,.4);color:#2b1a0c; box-shadow:0 3px 8px rgba(30,12,0,.42),inset 0 1px 0 #fff8e8; } body[data-theme="tavern"] .card.red{color:#c2452d} body[data-theme="tavern"] .card.back{ border-color:rgba(255,214,160,.28); background: repeating-linear-gradient(45deg,rgba(255,220,170,.10) 0 2px,transparent 2px 6px), repeating-linear-gradient(-45deg,rgba(60,26,8,.22) 0 2px,transparent 2px 6px), linear-gradient(150deg,#a4542a,#56260f); box-shadow:0 3px 8px rgba(30,12,0,.45),inset 0 1px 0 rgba(255,220,170,.25); } body[data-theme="tavern"] .btn{border-radius:14px} body[data-theme="tavern"] .btn.primary{ background:linear-gradient(180deg,#eda75e,#c76f2c); border-color:rgba(255,214,150,.5);color:#2a1205; } body[data-theme="tavern"] .poker-table{ box-shadow: 0 0 0 6px color-mix(in srgb,#6e4220 82%,#1c0e04), 0 0 0 9px rgba(0,0,0,.55), inset 0 0 84px rgba(28,10,0,.5), inset 0 2px 18px rgba(255,220,170,.1), 0 30px 70px rgba(20,8,0,.55); } body[data-theme="tavern"] .modal-layer{background:rgba(var(--overlay-rgb),.76)} body[data-theme="tavern"] .pot-box{background:linear-gradient(180deg,rgba(66,32,12,.9),rgba(40,18,6,.92));border-color:rgba(240,180,106,.4)} body[data-theme="tavern"] .environment-decor span{opacity:.42} /* ============ 4 · HARBOR — 港湾酒廊 · 日式简约 ============================ 留白与克制：纯白牌面细描边、无奖章的平波牌背、细边框扁按钮、单薄桌缘。 */ body[data-theme="harbor"]{ --vfx-1:#9fe6ea;--vfx-2:#5cc6d4;--vfx-3:#ffffff; } body[data-theme="harbor"] .card{ background:linear-gradient(165deg,#ffffff 12%,#f2f6f6 90%); border-color:rgba(23,58,66,.3);color:#10212a; box-shadow:0 2px 6px rgba(4,24,30,.3); } body[data-theme="harbor"] .card.red{color:#d0453e} body[data-theme="harbor"] .card.back{ border-color:rgba(210,240,244,.22); background: repeating-linear-gradient(0deg,rgba(224,246,248,.14) 0 1px,transparent 1px 9px), linear-gradient(150deg,#127083,#0a4754); box-shadow:0 2px 6px rgba(4,24,30,.34); } body[data-theme="harbor"] .btn{border-radius:9px;letter-spacing:.06em;font-weight:600} body[data-theme="harbor"] .btn.primary{ background:linear-gradient(180deg,#63c9d6,#3ba3b6); border-color:rgba(200,242,246,.4);color:#052126; box-shadow:0 6px 18px rgba(92,198,212,.18); } body[data-theme="harbor"] .poker-table{ box-shadow: 0 0 0 3px color-mix(in srgb,#7d5a34 68%,#132022), 0 0 0 5px rgba(0,0,0,.4), inset 0 0 60px rgba(3,20,26,.42), 0 20px 50px rgba(2,16,22,.45); } body[data-theme="harbor"] .modal-layer{background:rgba(var(--overlay-rgb),.68)} body[data-theme="harbor"] .pot-box{border-color:rgba(159,230,234,.32)} body[data-theme="harbor"] .street-badge{letter-spacing:.22em} body[data-theme="harbor"] .environment-decor span{opacity:.3} /* ============ 5 · CARBON — 职业巡回 · 冷峻竞技 ============================ 冷白锐角牌面、碳纤织纹牌背、方正金属按钮、薄钢桌缘。 */ body[data-theme="carbon"]{ --vfx-1:#bcd2ff;--vfx-2:#aebcf0;--vfx-3:#ffffff; } body[data-theme="carbon"] .card{ --cr:5px; background:linear-gradient(165deg,#fbfcff 12%,#e8edf5 90%); border-color:rgba(40,52,76,.45);color:#10141c; box-shadow:0 3px 8px rgba(0,0,0,.44); } body[data-theme="carbon"] .card.red{color:#e01f3d} body[data-theme="carbon"] .card.back{ border-color:rgba(190,205,240,.24); background: repeating-linear-gradient(45deg,rgba(200,214,248,.12) 0 1px,transparent 1px 4px), repeating-linear-gradient(-45deg,rgba(10,14,24,.32) 0 1px,transparent 1px 4px), linear-gradient(150deg,#3d4350,#1c2029); box-shadow:0 3px 8px rgba(0,0,0,.46),inset 0 1px 0 rgba(200,214,248,.18); } body[data-theme="carbon"] .btn{border-radius:8px;letter-spacing:.07em} body[data-theme="carbon"] .btn.primary{ background:linear-gradient(180deg,#b4c2f2,#8b9cd6); border-color:rgba(214,226,255,.5);color:#0b1020; box-shadow:0 8px 20px rgba(174,188,240,.16),inset 0 1px 0 rgba(255,255,255,.4); } body[data-theme="carbon"] .poker-table{ box-shadow: 0 0 0 3px color-mix(in srgb,#84858f 74%,#14161c), 0 0 0 5px rgba(0,0,0,.55), inset 0 0 70px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.52); } body[data-theme="carbon"] .modal-layer{background:rgba(var(--overlay-rgb),.74)} body[data-theme="carbon"] .pot-box{border-color:rgba(174,188,240,.38);border-radius:9px} body[data-theme="carbon"] .street-badge{border-radius:8px;letter-spacing:.18em} body[data-theme="carbon"] .role-badge{border-radius:5px} body[data-theme="carbon"] .environment-decor span{opacity:.34} /* ========================================================================== ENRICHMENT — per-theme ambient motion, seat aura, button sheen, modal entry 视觉层增强：仅颜色/渐变/阴影/动画，不改任何布局尺寸与盒模型。 所有动画由全局 prefers-reduced-motion 规则自动归零。 ========================================================================== */ /* ---------- A · felt ambient — 每个场馆的台面会“呼吸” ---------------------- 覆盖在台呢之上、装饰符号（z1）与铭牌（z2）之下；HUD/座位是兄弟层，不受影响。 */ .poker-table::after{ content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:0;opacity:0; } body[data-theme="midnight"] .poker-table::after{ /* 地下室：顶灯缓慢呼吸 */ background:radial-gradient(60% 46% at 50% 42%,rgba(247,238,199,.10),transparent 70%); animation:feltBreathe 9s ease-in-out infinite; } @keyframes feltBreathe{0%,100%{opacity:.3}50%{opacity:.85}} body[data-theme="royal"] .poker-table::after{ /* 皇家沙龙：金色流光周期性扫过绒面 */ background:linear-gradient(115deg,transparent 30%,rgba(240,205,120,.12) 46%,rgba(255,236,190,.19) 50%,rgba(240,205,120,.12) 54%,transparent 70%); background-size:260% 100%;background-position:120% 0; animation:feltShimmer 7.5s ease-in-out infinite; } @keyframes feltShimmer{0%{background-position:120% 0;opacity:0}14%{opacity:1}60%{opacity:1}85%,100%{background-position:-20% 0;opacity:0}} body[data-theme="tavern"] .poker-table::after{ /* 乡村酒馆：烛火从桌缘向上摇曳 */ background:radial-gradient(72% 58% at 50% 118%,rgba(255,176,92,.16),transparent 72%); animation:feltFlicker 5.2s ease-in-out infinite; } @keyframes feltFlicker{0%,100%{opacity:.55}18%{opacity:.85}31%{opacity:.5}47%{opacity:.95}66%{opacity:.62}82%{opacity:.8}} body[data-theme="harbor"] .poker-table::after{ /* 港湾酒廊：细碎波光的横向漂移 */ background:repeating-linear-gradient(100deg,transparent 0 46px,rgba(190,240,246,.07) 46px 52px,transparent 52px 110px); animation:feltWave 9s linear infinite; } @keyframes feltWave{from{background-position:0 0}to{background-position:110px 0}} body[data-theme="carbon"] .poker-table::after{ /* 职业巡回：冷色扫描带快速掠场 */ background:linear-gradient(180deg,transparent,rgba(190,205,240,.11) 50%,transparent); background-size:100% 38%;background-repeat:no-repeat; animation:feltScan 4.6s cubic-bezier(.4,.1,.4,.9) infinite; } @keyframes feltScan{0%{background-position:0 0%;opacity:0}12%{opacity:.7}88%{opacity:.7}100%{background-position:0 100%;opacity:0}} /* ---------- B · seat aura — 行动/思考光圈按场馆着色（默认 midnight 保持金） -- */ body[data-theme="royal"] .seat.active .player-box{border-color:#f3c96b;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px #f3c96b,0 0 34px rgba(243,201,107,.32)} body[data-theme="royal"] .seat.thinking::before{background:conic-gradient(from var(--seat-flow),transparent 0deg 292deg,rgba(243,201,107,.42) 316deg,#f3c96b 336deg,#fff8e2 345deg,#f3c96b 354deg,transparent 360deg)} body[data-theme="royal"] .seat.thinking .player-box{border-color:rgba(243,201,107,.55)} body[data-theme="royal"] .role-badge.turn{background:#f3c96b;border-color:#f3c96b;box-shadow:0 0 16px rgba(243,201,107,.5);animation-name:turnPulseRoyal} @keyframes turnPulseRoyal{50%{box-shadow:0 0 26px rgba(243,201,107,.78)}} body[data-theme="tavern"] .seat.active .player-box{border-color:#f0a45a;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px #f0a45a,0 0 34px rgba(240,164,90,.34)} body[data-theme="tavern"] .seat.thinking::before{background:conic-gradient(from var(--seat-flow),transparent 0deg 292deg,rgba(240,164,90,.42) 316deg,#f0a45a 336deg,#ffefd6 345deg,#f0a45a 354deg,transparent 360deg)} body[data-theme="tavern"] .seat.thinking .player-box{border-color:rgba(240,164,90,.55)} body[data-theme="tavern"] .role-badge.turn{background:#f0a45a;border-color:#f0a45a;color:#2a1205;box-shadow:0 0 16px rgba(240,164,90,.5);animation-name:turnPulseTavern} @keyframes turnPulseTavern{50%{box-shadow:0 0 26px rgba(240,164,90,.78)}} body[data-theme="harbor"] .seat.active .player-box{border-color:#6fd8e4;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px #6fd8e4,0 0 34px rgba(111,216,228,.3)} body[data-theme="harbor"] .seat.thinking::before{background:conic-gradient(from var(--seat-flow),transparent 0deg 292deg,rgba(111,216,228,.42) 316deg,#6fd8e4 336deg,#eafdff 345deg,#6fd8e4 354deg,transparent 360deg)} body[data-theme="harbor"] .seat.thinking .player-box{border-color:rgba(111,216,228,.55)} body[data-theme="harbor"] .role-badge.turn{background:#6fd8e4;border-color:#6fd8e4;color:#052126;box-shadow:0 0 16px rgba(111,216,228,.5);animation-name:turnPulseHarbor} @keyframes turnPulseHarbor{50%{box-shadow:0 0 26px rgba(111,216,228,.78)}} body[data-theme="carbon"] .seat.active .player-box{border-color:#b4c2f2;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px #b4c2f2,0 0 34px rgba(180,194,242,.3)} body[data-theme="carbon"] .seat.thinking::before{background:conic-gradient(from var(--seat-flow),transparent 0deg 292deg,rgba(180,194,242,.42) 316deg,#b4c2f2 336deg,#eef2ff 345deg,#b4c2f2 354deg,transparent 360deg)} body[data-theme="carbon"] .seat.thinking .player-box{border-color:rgba(180,194,242,.55)} body[data-theme="carbon"] .role-badge.turn{background:#b4c2f2;border-color:#b4c2f2;color:#0b1020;box-shadow:0 0 16px rgba(180,194,242,.5);animation-name:turnPulseCarbon} @keyframes turnPulseCarbon{50%{box-shadow:0 0 26px rgba(180,194,242,.78)}} /* ---------- C · primary button sheen — 主按钮扫光；royal 常驻微光 ---------- 覆盖模态主按钮（.btn.primary）与行动台主行动（.action-btn.primary 跟注/过牌）。 */ .btn.primary{position:relative;overflow:hidden} .btn.primary::after,.action-btn.primary::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%); background-size:240% 100%;background-position:120% 0;opacity:0; transition:opacity var(--t-fast); } .action-btn.primary{overflow:hidden} /* position:relative 已在基类 */ .btn.primary:hover:not(:disabled)::after,.action-btn.primary:hover:not(:disabled)::after{opacity:1;animation:btnSheen .9s var(--ease-out)} @keyframes btnSheen{from{background-position:120% 0}to{background-position:-120% 0}} body[data-theme="royal"] .btn.primary::after,body[data-theme="royal"] .action-btn.primary::after{opacity:.5;animation:btnSheenIdle 3.8s ease-in-out infinite} body[data-theme="royal"] .btn.primary:hover:not(:disabled)::after,body[data-theme="royal"] .action-btn.primary:hover:not(:disabled)::after{opacity:1;animation:btnSheen .9s var(--ease-out)} @keyframes btnSheenIdle{0%,55%{background-position:120% 0}90%,100%{background-position:-120% 0}} /* ---------- D · modal entrance — 弹窗气质：royal 庄重 / tavern 弹性 / harbor 侧漂 / carbon 利落（结束态均为 transform:none，无布局偏移） ---------- */ body[data-theme="royal"] .modal{animation:modalInRegal .5s var(--ease-out)} @keyframes modalInRegal{from{opacity:0;transform:translateY(26px) scale(.965)}60%{opacity:1}to{opacity:1;transform:none}} body[data-theme="tavern"] .modal{animation:modalInTavern .42s var(--ease-spring)} @keyframes modalInTavern{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}} body[data-theme="harbor"] .modal{animation:modalInHarbor .4s ease-out} @keyframes modalInHarbor{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}} body[data-theme="carbon"] .modal{animation:modalInCarbon .22s cubic-bezier(.3,.7,.3,1)} @keyframes modalInCarbon{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:none}} /* ---------- victory overlay tint follows the theme's overlay dye ---------- */ body[data-theme="royal"] #victoryFx{background:rgba(var(--overlay-rgb),.24)} body[data-theme="tavern"] #victoryFx{background:rgba(var(--overlay-rgb),.22)} body[data-theme="harbor"] #victoryFx{background:rgba(var(--overlay-rgb),.18)} body[data-theme="carbon"] #victoryFx{background:rgba(var(--overlay-rgb),.2)} /* ========================================================================== MOBILE PORTRAIT HERO READOUT — vertical pills + enlarged best-hand preview Scope is intentionally limited to phone portrait layout. ========================================================================== */ @media (max-width:700px) and (orientation:portrait){ /* 底牌保持独立左列；右侧只承载信息胶囊和最大牌型，不回流到底牌下方。 */ .hero-card-main{ grid-template-columns:auto minmax(0,1fr); align-items:stretch; } .hero-hole-zone{ align-self:center; min-width:max-content; } /* 右侧分为：定长纵向胶囊列 + 最大牌型展示列。 */ .hero-readout{ display:grid; grid-template-columns:max-content minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:stretch; gap:6px; min-width:0; align-self:stretch; } .hero-ledger{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; width:max-content; min-width:0; } .hero-ledger-cell{ flex:0 0 auto; width:clamp(88px,25vw,98px); min-width:0; max-width:98px; justify-content:space-between; gap:4px; padding:3px 7px; } .hero-ledger-cell:first-child{padding-left:7px} .hero-ledger-label{ flex:none; font-size:.36rem; letter-spacing:.07em; } .hero-ledger-value{ flex:none; max-width:none; overflow:visible; text-overflow:clip; font-size:.53rem; gap:3px; } /* 标题在牌型列右上角；五张示例牌放大后填充右下区域。 */ .hero-best-hand{ align-self:stretch; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:stretch; justify-items:stretch; gap:3px; min-width:0; padding:0; } .hero-best-hand-copy{ width:100%; max-width:160px; justify-self:end; display:flex; flex-direction:row; align-items:baseline; justify-content:flex-end; gap:4px; text-align:right; min-width:0; } .hero-best-hand-copy span{ display:inline; flex:none; font-size:.35rem; letter-spacing:.07em; } .hero-best-hand-copy strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:.55rem; } .hero-best-hand-cards{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr)); align-self:end; gap:2px; width:100%; max-width:160px; min-width:0; justify-self:end; } .hero-best-hand-cards .card{ --cw:auto; --ch:auto; --cr:4px; --crank:clamp(.48rem,2.5vw,.72rem); --csuit:clamp(.48rem,2.5vw,.72rem); width:100%; height:auto; min-width:0; aspect-ratio:20/29; flex:0 0 auto; } } /* ========================================================================== 14 · THEME MATRIX — 四馆风格分化（皇家赌场/地下俱乐部/专业赛事/西部酒吧） -------------------------------------------------------------------------- 按用户设计矩阵细分：下注按键材质、表情图标、牌面纹理、牌桌装饰、字体气质、 胜利粒子形状（--vfx-shape 由 JS 读取）、台面花纹动效。 铁律同上：不动布局/盒尺寸；花纹与动效全部 pointer-events:none 且位于 装饰层（z≤2），HUD/座位/操作台均为更高兄弟层，信息永不被遮挡。 ========================================================================== */ /* ============ ROYAL · 皇家赌场 —— 黄铜铭牌 / 古典衬线 / 双线 / 仪式感 ====== */ body[data-theme="royal"]{ --vfx-shape:spark4; --mx-serif:Georgia,'Times New Roman','Songti SC','SimSun',serif; } body[data-theme="royal"] .street-badge, body[data-theme="royal"] .pot-box strong, body[data-theme="royal"] .environment-plaque, body[data-theme="royal"] .action-btn, body[data-theme="royal"] .raise-btn-label{font-family:var(--mx-serif);letter-spacing:.12em} /* 下注按键：金属铭牌——小圆角 + 精细双线（border + inset hairline）+ 柔和层次影 */ body[data-theme="royal"] .action-btn{ border-radius:8px;border-color:rgba(233,196,120,.45); box-shadow:0 6px 18px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,236,190,.22),inset 0 1px 0 rgba(255,255,255,.14); } body[data-theme="royal"] .action-btn.primary{ background:linear-gradient(180deg,#e9c979,#b98e3f); border-color:rgba(255,226,160,.65);color:#2a1a04; box-shadow:0 8px 22px rgba(201,161,92,.32),inset 0 0 0 1px rgba(255,244,214,.4),inset 0 1px 0 rgba(255,255,255,.5); } body[data-theme="royal"] .action-btn.gold{ background:linear-gradient(180deg,#f4d98c,#c9a15c); box-shadow:0 8px 22px rgba(201,161,92,.36),inset 0 0 0 1px rgba(255,244,214,.45),inset 0 1px 0 rgba(255,255,255,.5); } body[data-theme="royal"] .action-btn.danger{ background:linear-gradient(180deg,rgba(122,74,28,.4),rgba(61,20,24,.5)); border-color:rgba(226,161,154,.4);color:#f0c9c4; } body[data-theme="royal"] .raise-box{ border-radius:8px;border-color:rgba(233,196,120,.4); box-shadow:inset 0 0 0 1px rgba(255,236,190,.16),0 6px 18px rgba(0,0,0,.4); } /* 表情图标：徽章圆牌 + 选中时双线金框 */ body[data-theme="royal"] .expression-btn{border-radius:12px;border-color:rgba(233,196,120,.28)} body[data-theme="royal"] .expression-btn.selected{ border-color:rgba(243,201,107,.75); box-shadow:0 0 16px rgba(243,201,107,.3),inset 0 0 0 1px rgba(255,236,190,.4); } /* 牌面：暖白底内嵌金线细框（仅描边，不遮 rank/suit）； rank 用古典衬线 */ body[data-theme="royal"] .card:not(.back):not(.placeholder)::before{ content:"";position:absolute;inset:3px;border-radius:calc(var(--cr) - 2px); border:1px solid rgba(178,132,58,.42);pointer-events:none; } body[data-theme="royal"] .card .rank{font-family:var(--mx-serif);font-weight:700;letter-spacing:0} /* 牌桌装饰：双线 orbit + 描金铭牌 */ body[data-theme="royal"] .table-orbit{border:3px double rgba(233,196,120,.3)} body[data-theme="royal"] .environment-plaque{ font-family:var(--mx-serif);border-color:rgba(233,196,120,.5); box-shadow:inset 0 0 0 1px rgba(255,236,190,.2),0 4px 14px rgba(0,0,0,.4); } /* 台面花纹：四角卷草纹（同心弧）+ 极缓明暗呼吸，仪式感克制动效 */ body[data-theme="royal"] .poker-table::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background: radial-gradient(circle at 0 0,transparent 58px,rgba(233,196,120,.16) 59px,transparent 61px,transparent 70px,rgba(233,196,120,.1) 71px,transparent 73px), radial-gradient(circle at 100% 0,transparent 58px,rgba(233,196,120,.16) 59px,transparent 61px,transparent 70px,rgba(233,196,120,.1) 71px,transparent 73px), radial-gradient(circle at 0 100%,transparent 58px,rgba(233,196,120,.16) 59px,transparent 61px,transparent 70px,rgba(233,196,120,.1) 71px,transparent 73px), radial-gradient(circle at 100% 100%,transparent 58px,rgba(233,196,120,.16) 59px,transparent 61px,transparent 70px,rgba(233,196,120,.1) 71px,transparent 73px); animation:royalFiligree 11s ease-in-out infinite; } @keyframes royalFiligree{0%,100%{opacity:.65}50%{opacity:1}} body[data-theme="royal"] .pot-box{box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 30px rgba(233,196,120,.14),inset 0 0 0 1px rgba(233,196,120,.18)} /* ============ MIDNIGHT · 地下俱乐部 —— 切角钢铁 / 压缩粗体 / 断裂 / 硬阴影 = */ body[data-theme="midnight"]{ --vfx-shape:shard; --mx-cond:'Arial Narrow','Chakra Petch','PingFang SC',sans-serif; } body[data-theme="midnight"] .street-badge, body[data-theme="midnight"] .pot-box strong, body[data-theme="midnight"] .environment-plaque, body[data-theme="midnight"] .action-btn, body[data-theme="midnight"] .raise-btn-label{ font-family:var(--mx-cond);font-weight:900;letter-spacing:.02em;font-stretch:condensed; } body[data-theme="midnight"] .street-badge,body[data-theme="midnight"] .environment-plaque{text-transform:uppercase} /* 下注按键：工业控制器——切角 + 硬阴影（drop-shadow 才能透出 clip-path 外形） */ body[data-theme="midnight"] .action-btn{ border-radius:0;border:none; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); filter:drop-shadow(4px 4px 0 rgba(0,0,0,.55)); transition:transform var(--t-fast) var(--ease-out),filter var(--t-fast),opacity var(--t-fast); } body[data-theme="midnight"] .action-btn.primary{ background:linear-gradient(180deg,#7d8a5a,#4a552f); color:#f2f5e4; } body[data-theme="midnight"] .action-btn.gold{ background:linear-gradient(180deg,#c9b25e,#8a7a34);color:#14160a; } body[data-theme="midnight"] .action-btn.danger{ background: repeating-linear-gradient(-45deg,rgba(20,22,26,.55) 0 6px,transparent 6px 12px), linear-gradient(180deg,#8a2f36,#521a1f); color:#f4d7d5; } body[data-theme="midnight"] .action-btn:hover:not(:disabled){filter:drop-shadow(4px 4px 0 rgba(0,0,0,.55)) brightness(1.12)} body[data-theme="midnight"] .raise-box{ border-radius:0;border:2px solid rgba(190,200,160,.28); clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); } /* 表情图标：切角钢板 */ body[data-theme="midnight"] .expression-btn{ border-radius:0;border:1px solid rgba(190,200,160,.25); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); } body[data-theme="midnight"] .expression-btn.selected{background:rgba(217,226,176,.14);box-shadow:none;border-color:rgba(217,226,176,.6)} /* 牌面：磨损做旧——细划痕 + 边角压暗；rank 压缩粗黑 */ body[data-theme="midnight"] .card:not(.back):not(.placeholder){ background: repeating-linear-gradient(103deg,transparent 0 7px,rgba(60,64,50,.05) 7px 8px), linear-gradient(165deg,#f4f4ea 12%,#dfe2d2 90%); box-shadow:0 3px 8px rgba(0,0,0,.42),inset 0 0 10px rgba(60,64,50,.16); } body[data-theme="midnight"] .card .rank{font-family:var(--mx-cond);font-weight:900;letter-spacing:-.03em} body[data-theme="midnight"] .card.red{color:#a02633} /* 牌桌装饰：断裂虚线加粗 + 霓虹牌名闪烁（粗粝闪烁限定在装饰层） */ body[data-theme="midnight"] .table-orbit{border:2px dashed rgba(217,226,176,.22)} body[data-theme="midnight"] .decor-top::before{ color:#e7f0c0;text-shadow:0 0 8px rgba(217,226,176,.55),0 0 22px rgba(217,226,176,.25); animation:midNeon 4.2s linear infinite; } @keyframes midNeon{0%,100%{opacity:.9}8%{opacity:.35}10%{opacity:.9}38%{opacity:.9}42%{opacity:.5}44%{opacity:.9}77%{opacity:.75}} /* 台面花纹：烟雾缓慢漂移（两层径向雾团反向流动） */ body[data-theme="midnight"] .poker-table::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background: radial-gradient(38% 30% at 24% 30%,rgba(220,228,190,.07),transparent 70%), radial-gradient(42% 34% at 76% 68%,rgba(220,228,190,.055),transparent 70%); background-size:160% 160%; animation:midSmoke 16s ease-in-out infinite alternate; } @keyframes midSmoke{from{background-position:0% 0%,100% 100%}to{background-position:100% 60%,0% 40%}} /* ============ CARBON · 专业赛事 —— 直角铝板 / 中性无衬线 / 单线 / 广播式 ==== */ body[data-theme="carbon"]{ --vfx-shape:ring; --mx-sans:'Manrope','Chakra Petch','PingFang SC','Microsoft YaHei',sans-serif; } body[data-theme="carbon"] .street-badge, body[data-theme="carbon"] .pot-box strong, body[data-theme="carbon"] .environment-plaque, body[data-theme="carbon"] .action-btn, body[data-theme="carbon"] .raise-btn-label{font-family:var(--mx-sans);font-weight:600;letter-spacing:.1em} body[data-theme="carbon"] .street-badge,body[data-theme="carbon"] .environment-plaque{text-transform:uppercase} /* 下注按键：赛事控制面板——直角 + 单线分区 + 极少阴影 */ body[data-theme="carbon"] .action-btn{ border-radius:3px;border:1px solid rgba(190,205,240,.35); box-shadow:0 1px 2px rgba(0,0,0,.35); } body[data-theme="carbon"] .action-btn.primary{ background:linear-gradient(180deg,#c6d2f4,#93a5d8); border-color:rgba(220,230,255,.6);color:#0b1020; box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5); } body[data-theme="carbon"] .action-btn.gold{ background:linear-gradient(180deg,#e8ddba,#b8ad84);color:#141208; box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.45); } body[data-theme="carbon"] .action-btn.danger{ background:linear-gradient(180deg,rgba(224,31,61,.2),rgba(224,31,61,.08)); border-color:rgba(224,31,61,.55);color:#ff8496;box-shadow:none; } body[data-theme="carbon"] .raise-box{border-radius:3px;border:1px solid rgba(190,205,240,.3);box-shadow:0 1px 2px rgba(0,0,0,.35)} /* 表情图标：磨砂方格 */ body[data-theme="carbon"] .expression-btn{border-radius:3px;border:1px solid rgba(190,205,240,.25)} body[data-theme="carbon"] .expression-btn.selected{border-color:rgba(180,194,242,.8);box-shadow:0 0 0 1px rgba(180,194,242,.35)} /* 牌面：直角 + 内嵌单线细框；rank 中性无衬线 */ body[data-theme="carbon"] .card{--cr:3px} body[data-theme="carbon"] .card:not(.back):not(.placeholder)::before{ content:"";position:absolute;inset:2px;border-radius:1px; border:1px solid rgba(40,52,76,.22);pointer-events:none; } body[data-theme="carbon"] .card .rank{font-family:var(--mx-sans);font-weight:600;letter-spacing:-.01em} /* 牌桌装饰：网格单线 + 方形铭牌 */ body[data-theme="carbon"] .table-orbit{border:1px solid rgba(190,205,240,.18);border-radius:8px} body[data-theme="carbon"] .environment-plaque{border-radius:3px;border:1px solid rgba(190,205,240,.35)} body[data-theme="carbon"] .pot-box{border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.4)} /* 台面花纹：广播细网格（纵横发线，缓慢横向漂移） */ body[data-theme="carbon"] .poker-table::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background: repeating-linear-gradient(0deg,rgba(190,205,240,.045) 0 1px,transparent 1px 34px), repeating-linear-gradient(90deg,rgba(190,205,240,.045) 0 1px,transparent 1px 34px); animation:carbonGrid 14s linear infinite; } @keyframes carbonGrid{from{background-position:0 0,0 0}to{background-position:0 0,34px 0}} /* ============ TAVERN · 西部酒吧 —— 木牌铆钉 / 西部展示字 / 厚重实体影 ====== */ body[data-theme="tavern"]{ --vfx-shape:star5; --mx-slab:Georgia,'Times New Roman','Songti SC','SimSun',serif; } body[data-theme="tavern"] .street-badge, body[data-theme="tavern"] .pot-box strong, body[data-theme="tavern"] .environment-plaque, body[data-theme="tavern"] .action-btn, body[data-theme="tavern"] .raise-btn-label{font-family:var(--mx-slab);font-weight:900;letter-spacing:.1em} /* 下注按键：木制赌桌按钮——木纹 + 粗边 + 双铆钉 + 厚重实体影 */ body[data-theme="tavern"] .action-btn{ border-radius:8px;border:2px solid #2e1606; box-shadow:0 5px 0 #1c0d03,0 12px 24px rgba(15,6,0,.55),inset 0 1px 0 rgba(255,220,170,.28); } body[data-theme="tavern"] .action-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 0 #1c0d03,0 14px 26px rgba(15,6,0,.55),inset 0 1px 0 rgba(255,220,170,.28)} body[data-theme="tavern"] .action-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #1c0d03,0 8px 16px rgba(15,6,0,.5)} body[data-theme="tavern"] .action-btn.primary{ background: radial-gradient(circle 2.5px at 9px 9px,rgba(255,230,180,.85) 40%,rgba(90,50,18,.9) 100%), radial-gradient(circle 2.5px at calc(100% - 9px) 9px,rgba(255,230,180,.85) 40%,rgba(90,50,18,.9) 100%), repeating-linear-gradient(93deg,rgba(90,50,18,.14) 0 3px,transparent 3px 9px), linear-gradient(180deg,#b4622a,#7a3c14); border-color:#2e1606;color:#ffe9c8;text-shadow:0 1px 2px rgba(40,16,0,.6); } body[data-theme="tavern"] .action-btn.gold{ background: radial-gradient(circle 2.5px at 9px 9px,rgba(120,80,30,.9) 40%,rgba(255,240,200,.9) 100%), radial-gradient(circle 2.5px at calc(100% - 9px) 9px,rgba(120,80,30,.9) 40%,rgba(255,240,200,.9) 100%), repeating-linear-gradient(93deg,rgba(120,70,20,.12) 0 3px,transparent 3px 9px), linear-gradient(180deg,#e8b565,#b07c2e); color:#2e1606;text-shadow:0 1px 0 rgba(255,230,180,.5); } body[data-theme="tavern"] .action-btn.danger{ background: repeating-linear-gradient(93deg,rgba(20,8,2,.2) 0 3px,transparent 3px 9px), linear-gradient(180deg,#5a2a18,#38160a); color:#e8b89a;border-color:#1c0d03; } body[data-theme="tavern"] .raise-box{ border-radius:8px;border:2px solid #2e1606; background: repeating-linear-gradient(93deg,rgba(90,50,18,.1) 0 3px,transparent 3px 9px), linear-gradient(180deg,rgba(70,36,14,.9),rgba(44,20,6,.94)); box-shadow:0 5px 0 #1c0d03,0 12px 24px rgba(15,6,0,.5); } /* 表情图标：小木牌 + 粗边 */ body[data-theme="tavern"] .expression-btn{border-radius:8px;border:2px solid rgba(46,22,6,.75);background:linear-gradient(180deg,rgba(120,66,26,.22),rgba(70,36,14,.28))} body[data-theme="tavern"] .expression-btn.selected{border-color:#eda75e;box-shadow:0 0 14px rgba(237,167,94,.35),inset 0 0 0 1px rgba(255,220,170,.3)} /* 牌面：羊皮纸烤边 vignette；rank 厚重西部衬线 */ body[data-theme="tavern"] .card:not(.back):not(.placeholder){ box-shadow:0 3px 8px rgba(30,12,0,.42),inset 0 1px 0 #fff8e8,inset 0 0 14px rgba(140,80,30,.22); } body[data-theme="tavern"] .card .rank{font-family:var(--mx-slab);font-weight:900} /* 牌桌装饰：木框 orbit + 木质铭牌 */ body[data-theme="tavern"] .table-orbit{border:2px solid rgba(240,180,106,.28);border-radius:14px} body[data-theme="tavern"] .environment-plaque{ font-family:var(--mx-slab);border:2px solid rgba(46,22,6,.8);border-radius:8px; background:linear-gradient(180deg,rgba(90,48,18,.85),rgba(52,24,6,.9)); box-shadow:0 4px 0 rgba(20,8,0,.6),0 8px 18px rgba(15,6,0,.5); } /* 台面花纹：粗木板拼缝（竖向板条 + 板缝暗线），随烛火微微起伏 */ body[data-theme="tavern"] .poker-table::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background: repeating-linear-gradient(90deg,transparent 0 88px,rgba(40,18,4,.16) 88px 90px), repeating-linear-gradient(93deg,rgba(255,220,170,.03) 0 3px,transparent 3px 11px); animation:tavernPlanks 8s ease-in-out infinite; } @keyframes tavernPlanks{0%,100%{opacity:.7}50%{opacity:1}} body[data-theme="tavern"] .pot-box{border:2px solid rgba(46,22,6,.7);box-shadow:0 5px 0 rgba(20,8,0,.5),0 12px 26px rgba(15,6,0,.5)}