/* ════════════════════════════════════════════════════════════════════
 * BUILD 173 · 牌桌类全部重画(老板:「能不能把在游戏里面能看到的东西全升级画一遍」)
 *   只换画面:玩法 / 赔率 / 注单一个字没改。素材是 GPT 画的原创图(虚构人物,不照抄任何品牌)。
 * ════════════════════════════════════════════════════════════════════ */

/* ── ① 21 点荷官:半写实插画头像(dealer-v2.webp),金圈;发牌时圈亮一点 ── */
#app .dealerimg{display:block;border:2px solid #d6b26a;box-shadow:0 0 0 1px #070912,0 0 0 3px rgba(214,178,106,.28),0 6px 16px rgba(0,0,0,.6)}
#app .dealerimg.live{border-color:#f3dd8e;box-shadow:0 0 0 1px #070912,0 0 0 3px rgba(243,221,142,.45),0 0 18px rgba(243,221,142,.45)}
#app .dealerzone .davatar{filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}

/* ── ② 21 点操作键:深色玻璃 + 彩色描边 + 图标(要牌 = 加一张 · 停牌 = 手掌 · 加倍 = ×2 · 分牌 = 两张牌分开)──
 *   颜色还是「颜色即动作」那一套(要牌绿、停牌红、加倍金、分牌蓝),手指不用看字也按得对 */
#app .btn.act-hit,#app .btn.act-stand,#app .btn.act-double,#app .btn.act-split,#app .btn.act-surrender,
#app .btn.primary.act-hit,#app .btn.primary.act-stand,#app .btn.primary.act-double,#app .btn.primary.act-split{
  --ac:#35d49a;--acg:rgba(53,212,154,.38);--acd:#0f5a3e;--acs:rgba(53,212,154,.22);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  color:#fff;border:1.5px solid var(--ac);border-radius:14px;text-shadow:0 1px 2px rgba(0,0,0,.6);letter-spacing:.1em;
  background:
    radial-gradient(120% 90% at 50% -10%,var(--acg),transparent 70%),
    linear-gradient(180deg,#1a2233,#0b0f1a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 0 var(--acd),0 6px 16px rgba(0,0,0,.5),0 0 18px var(--acs)}
#app .btn.act-hit,#app .btn.primary.act-hit{--ac:#35d49a;--acg:rgba(53,212,154,.38);--acd:#0f5a3e;--acs:rgba(53,212,154,.22)}
#app .btn.act-stand,#app .btn.primary.act-stand{--ac:#ff5c7a;--acg:rgba(255,92,122,.36);--acd:#6e1427;--acs:rgba(255,92,122,.22)}
#app .btn.act-double,#app .btn.primary.act-double{--ac:#f3c75a;--acg:rgba(243,199,90,.36);--acd:#6b4d10;--acs:rgba(243,199,90,.22)}
#app .btn.act-split,#app .btn.primary.act-split{--ac:#5ab8ff;--acg:rgba(90,184,255,.36);--acd:#14456e;--acs:rgba(90,184,255,.22)}
#app .btn.act-surrender{--ac:#a6afcc;--acg:rgba(166,175,204,.3);--acd:#3a4052;--acs:rgba(166,175,204,.16)}
#app .btn.act-hit::before,#app .btn.act-stand::before,#app .btn.act-double::before,#app .btn.act-split::before,#app .btn.act-surrender::before{
  content:"";display:block;position:static;width:18px;height:18px;flex:0 0 auto;background:var(--ac);border:0;box-shadow:none;opacity:1;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
#app .btn.act-hit::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='11' height='15' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M18 13v8M14 17h8' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
#app .btn.act-stand::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12V6.5a1.5 1.5 0 0 1 3 0V11m0-6.5a1.5 1.5 0 0 1 3 0V11m0-5a1.5 1.5 0 0 1 3 0V12m0-3.5a1.5 1.5 0 0 1 3 0V15c0 3.9-2.7 7-6.5 7-2.9 0-4.6-1.6-6-3.8L4.3 14a1.6 1.6 0 0 1 2.6-1.8L8 13.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#app .btn.act-double::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7.5 9.2l4 5.6M11.5 9.2l-4 5.6' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M13.6 10.2c.3-1 1.1-1.5 2-1.5 1.2 0 2 .8 2 1.9 0 1.7-2.4 2.4-4 4.2h4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#app .btn.act-split::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='6' width='8' height='12' rx='1.6' transform='rotate(-10 6.5 12)' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='13.5' y='6' width='8' height='12' rx='1.6' transform='rotate(10 17.5 12)' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
#app .btn.act-surrender::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 21V4m0 0h10l-2 4 2 4H6' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
#app .btn.act-hit:active,#app .btn.act-stand:active,#app .btn.act-double:active,#app .btn.act-split:active,#app .btn.act-surrender:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 var(--acd),0 3px 8px rgba(0,0,0,.5)}

/* ── ③ 骰宝摇盅 / 开盅:金漆骰盅(sb-shaker.webp,GPT 画的)+ 红漆金边托盘;演出层是一块深绿台呢 ── */
#app .sbwrap .sbover{background:radial-gradient(60% 70% at 50% 50%,rgba(4,20,14,.82),rgba(2,6,10,.9) 75%)}
#app .sbwrap .sbover .sbstage{width:min(76%,480px);padding:18px 18px 16px;overflow:visible;border:0;
  background:
    radial-gradient(80% 70% at 50% 30%,rgba(255,244,214,.1),transparent 64%),
    radial-gradient(120% 110% at 50% 45%,transparent 50%,rgba(0,0,0,.5) 100%),
    url(felt-green.webp?v=5654f689) 0 0/256px 256px,#0b5a31;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 5px #241812,inset 0 0 0 6px rgba(214,178,106,.6),inset 0 0 40px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.65)}
#app .sbwrap .sbover .sbplate{height:150px}
/* 托盘:红漆 + 金边的椭圆(骰子落在上面) */
#app .sbwrap .sbover .sbplate::before{content:"";position:absolute;left:50%;top:56%;width:270px;height:96px;margin:-48px 0 0 -135px;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(255,255,255,.07),transparent 70%),
    radial-gradient(closest-side,#6e0d10 0 72%,#3d0507 84%,#f0cf7a 85.5%,#9c7428 90%,#e6c46a 94%,#5c3f0d 99%,transparent 100%);
  box-shadow:0 14px 22px rgba(0,0,0,.45)}
#app .sbwrap .sbover .sbdice{position:relative;z-index:1;margin-top:26px}
#app .sbwrap .sbover .sbdie{filter:drop-shadow(0 6px 5px rgba(0,0,0,.5))}
/* 骰盅:图片,不再是 CSS 画的半圆 */
#app .sbcup{border:0;border-radius:0;box-shadow:none;background:url(sb-shaker.webp?v=b2d8ae72) center bottom/contain no-repeat;filter:drop-shadow(0 12px 14px rgba(0,0,0,.55))}
#app .sbcup i{display:none}
#app .sbwrap .sbover .sbcup{width:200px;height:188px;margin:-132px 0 0 -100px;z-index:2}
#app .sbwrap .sbover .sbstage.result .sbcup{transform:translateY(-210px) rotate(-10deg)}
@media(max-height:420px){
  #app .sbwrap .sbover .sbplate{height:118px}
  #app .sbwrap .sbover .sbplate::before{width:220px;height:78px;margin:-39px 0 0 -110px}
  #app .sbwrap .sbover .sbcup{width:160px;height:150px;margin:-104px 0 0 -80px}
  #app .sbwrap .sbover .sbdice{margin-top:18px}
}

/* ── ④ 21 点输赢横幅:整条压在牌桌上的深色缎带 + 上下金线(输了是红线)—— 以前是一块圆角玻璃 ── */
#app .bigmsg{border:0;border-radius:0;box-shadow:none;padding:9px 0 10px;
  background:linear-gradient(90deg,transparent,rgba(6,8,16,.86) 14%,rgba(6,8,16,.92) 50%,rgba(6,8,16,.86) 86%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#app .bigmsg::before,#app .bigmsg::after{display:block;content:"";position:absolute;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(243,221,142,.85),transparent)}
#app .bigmsg::before{top:0}#app .bigmsg::after{bottom:0}
#app .bigmsg.lose::before,#app .bigmsg.lose::after{background:linear-gradient(90deg,transparent,rgba(255,120,140,.75),transparent)}
#app .bigmsg.push::before,#app .bigmsg.push::after{background:linear-gradient(90deg,transparent,rgba(220,225,240,.6),transparent)}
#app .bigmsg.win{box-shadow:none;text-shadow:none}

/* ── ⑤ 百家乐:开牌以后台面正上方亮出「庄 赢 / 闲 赢 / 和 局」(真人荷官台那种金色大字),所有人都看得到 ── */
#app .bcwinner{position:absolute;left:50%;top:9%;z-index:6;transform:translateX(-50%) scale(.9);opacity:0;pointer-events:none;
  padding:6px 30px 7px;white-space:nowrap;transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1.3);
  font:900 26px/1.15 var(--toon,var(--display));letter-spacing:.24em;text-indent:.24em;color:#fff4d6;
  background:linear-gradient(90deg,transparent,rgba(6,10,22,.82) 18%,rgba(6,10,22,.88) 50%,rgba(6,10,22,.82) 82%,transparent);
  text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 18px var(--bcw,rgba(243,221,142,.6))}
#app .bcwinner::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--bcl,#f3dd8e),transparent)}
#app .bcfelt.pwin .bcwinner::before{content:attr(data-p)}
#app .bcfelt.bwin .bcwinner::before{content:attr(data-b)}
#app .bcfelt.twin .bcwinner::before{content:attr(data-t)}
#app .bcfelt.pwin .bcwinner{--bcw:rgba(95,178,255,.8);--bcl:#7fc2ff;color:#dcefff}
#app .bcfelt.bwin .bcwinner{--bcw:rgba(255,100,114,.8);--bcl:#ff8a95;color:#ffe3e6}
#app .bcfelt.twin .bcwinner{--bcw:rgba(63,211,154,.8);--bcl:#6ff0be;color:#dcfff0}
#app .bcfelt.pwin .bcwinner,#app .bcfelt.bwin .bcwinner,#app .bcfelt.twin .bcwinner{opacity:1;transform:translateX(-50%) scale(1)}
@media(max-height:420px){#app .bcwinner{top:5%;font-size:18px;padding:4px 22px 5px}}
@media(prefers-reduced-motion:reduce){#app .bcwinner{transition:none}}

/* ── ⑥ 鱼虾蟹:骰盅换成 GPT 画的青花鱼纹瓷碗(倒扣)+ 红漆金边托盘(fs-bowl / fs-plate.webp);骰子落在托盘上 ── */
#app .fsstage.fs2 .fs2img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
#app .fsstage.fs2 .fs2plate{bottom:3%;width:min(56%,250px)}
#app .fsstage.fs2 .fs2plate .fs2img{filter:drop-shadow(0 8px 10px rgba(60,20,10,.4))}
#app .fsstage.fs2 .fs2dice{bottom:17%}
#app .fsstage.fs2 .fs2bowl{bottom:8%;width:min(40%,180px)}
#app .fsstage.fs2 .fs2bowl .fs2img{filter:drop-shadow(0 10px 12px rgba(40,20,10,.45))}

/* ── ⑦ 鱼虾蟹的木框:真红木纹(wood-rose.webp,GPT 画的无缝砖)+ 上沿一道亮边 —— 以前是 CSS 条纹 ── */
#app .fbx,#app .fswrap .fbx.v3{background:
    linear-gradient(180deg,rgba(255,220,180,.16),transparent 16%,transparent 84%,rgba(0,0,0,.35)),
    url(wood-rose.webp?v=6de49a9e) 0 0/320px 320px,#5a2a12;
  box-shadow:inset 0 1px 0 rgba(255,220,180,.4),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.35),inset 0 0 26px rgba(0,0,0,.35),0 0 0 1px #1e0c04,0 12px 28px rgba(0,0,0,.6)}
/* 鱼虾蟹整页的底:深色木桌面(同一张红木纹,压暗) */
#app .fswrap{background:linear-gradient(180deg,rgba(10,5,2,.72),rgba(10,5,2,.86)),url(wood-rose.webp?v=6de49a9e) 0 0/420px 420px,#140c06}

/* ── ⑧ 牌桌下沿那一条(筹码 + 重复 / 撤回 / 清除 / 确认):照真台的皮革扶手 —— 深棕软包 + 一道金色缝线;按键换成深色 ── */
#app .lsrail{border:0;border-radius:14px;
  background:
    linear-gradient(90deg,transparent 12px,rgba(214,178,106,.55) 12px,rgba(214,178,106,.55) calc(100% - 12px),transparent calc(100% - 12px)) 0 3px/100% 1px no-repeat,
    radial-gradient(120% 140% at 50% -30%,rgba(255,220,180,.12),transparent 60%),
    linear-gradient(180deg,#3a2419 0%,#23150e 48%,#140b07 100%);
  box-shadow:inset 0 1px 0 rgba(255,220,180,.18),inset 0 -2px 4px rgba(0,0,0,.5),0 0 0 1px #0b0604,0 8px 18px rgba(0,0,0,.5)}
#app .rlbar{background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.24));border:1px solid rgba(214,178,106,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
#app .rlact{background:linear-gradient(180deg,#3b3f4c,#23262f);color:#eef0f6;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.45)}
#app .rlact svg{opacity:.9}
#app .rlact.ok{border:0;background:linear-gradient(180deg,#ffe07a,#f0b53c 55%,#d6962a);color:#2a1d05}
#app .rlrmid .lspool,#app .rlrmid .dkhint{color:rgba(240,220,190,.6)}
#app .rlwrap .rlhc{background:rgba(0,0,0,.35);border-color:rgba(214,178,106,.25)}

/* ── ⑨ 百家乐路单:照真人荷官台的电子路单 —— 白底细格(红蓝圈在白底上一眼看清),外面一圈金边暗框 ── */
#app .bcboard{background:linear-gradient(180deg,#141821,#0a0c12);border:1px solid rgba(214,178,106,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.5)}
#app .rdgrid{background:#fbfaf6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#app .rdgrid > i{box-shadow:inset -1px -1px 0 rgba(20,30,50,.1)}
#app .rd.tie{border-color:#14a06b}
#app .rd.banker{box-shadow:none}#app .rd.player{box-shadow:none}
#app .rdgrid .now{animation:bcnow2 1.6s ease-out 2}
@keyframes bcnow2{0%,100%{filter:none}50%{filter:drop-shadow(0 0 4px rgba(0,0,0,.35)) brightness(1.15)}}

/* 收起来的抽屉(藏在屏幕下面)不要投影 —— 以前它的影子会从屏幕底边透出来,压在百家乐白色路单的右下角 */
#app .drawer:not(.on){box-shadow:none}

/* ── ⑩ 百家乐:赢的那一边只在牌下面起一团柔光,不再画一个大方框 ── */
#app .bcfelt.pwin .bcside.p{background:radial-gradient(55% 42% at 50% 55%,rgba(95,178,255,.24),transparent 72%);box-shadow:none}
#app .bcfelt.bwin .bcside.b{background:radial-gradient(55% 42% at 50% 55%,rgba(255,100,114,.24),transparent 72%);box-shadow:none}
#app .bcfelt.twin .bcside{background:radial-gradient(55% 42% at 50% 55%,rgba(63,211,154,.2),transparent 72%);box-shadow:none}