/* ══════════════════════════════════════════════════════════════════════
   牌桌画质升级(BUILD 87)—— 绒布织纹 + 打光 + 金圈注区 + 拉丝金属按钮 + 结算横幅 / 金币 / 扫光
   在 skin.css 之后加载,只动牌桌视图;所有规则都带 #app 前缀
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 桌布:斜纹绒布 + 顶灯光池 + 中央压花「21」 ── */
#app .tablefelt{
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(243,221,142,.16),transparent 60%),      /* 顶灯 */
    radial-gradient(60% 40% at 50% 46%,rgba(212,175,55,.06),transparent 70%),           /* 中央微光 */
    repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),  /* 绒布织纹 ↗ */
    repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),        /* 绒布织纹 ↖ */
    radial-gradient(95% 95% at 50% 38%,#26212b 0%,#181419 52%,#0b0a0e 100%);
  background-blend-mode:normal,normal,normal,normal,normal;
  box-shadow:inset 0 -36px 70px rgba(0,0,0,.66),inset 0 14px 34px rgba(255,255,255,.035),
    inset 28px 0 56px rgba(0,0,0,.4),inset -28px 0 56px rgba(0,0,0,.4),
    0 0 0 4px #0b0a0e,0 0 0 5.5px rgba(212,175,55,.6),0 0 0 10px #151218,0 0 0 11px rgba(212,175,55,.28),
    0 26px 50px rgba(0,0,0,.8)}
/* 双金线内圈:细线 + 一圈哑光暗线,像镶进绒布里 */
#app .tablefelt::before{inset:11px 13px 15px;border:1px solid rgba(243,221,142,.5);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.22),inset 0 0 0 4px rgba(212,175,55,.2),inset 0 0 30px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.5)}
/* 压花水印:更清楚一点,带一层浮雕明暗 */
#app .feltmark span{color:rgba(212,175,55,.13);font-size:34px;text-shadow:0 1px 0 rgba(255,255,255,.045),0 -1px 0 rgba(0,0,0,.55)}
#app .feltmark i{color:rgba(212,175,55,.16)}
/* 空座:实线金环 + 暗盘 */
#app .podsit{border:1.5px solid rgba(212,175,55,.5);background:radial-gradient(circle at 50% 35%,#211c25,#0d0b10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.6)}
/* 牌:更厚一点的边、更实的落影 */
#app .cardrow.lg svg,#app .cardrow.md svg{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 0 0 .6px rgba(120,95,30,.45),0 8px 16px rgba(0,0,0,.65),0 2px 3px rgba(0,0,0,.5)}
#app .pod .mini svg{box-shadow:0 0 0 .4px rgba(120,95,30,.5),0 2px 5px rgba(0,0,0,.6)}

/* ── 2. 注区:压印在绒布上的金圈 + 金属铭牌 ── */
#app .bp2 .bspot,#app .bp2 .rbbox,#app .bp2 .oebox,#app .bp2 .suitbox{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.22)),#15121a;
  border:1px solid rgba(212,175,55,.5);border-radius:12px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.55),inset 0 0 0 3px rgba(212,175,55,.18),inset 0 2px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04),0 3px 8px rgba(0,0,0,.4)}
#app .bp2 .bspot .bn2{display:inline-block;padding:2px 9px;border-radius:6px;font-size:9.5px;letter-spacing:.14em;color:#f0e2b6;
  background:linear-gradient(180deg,#2c2732,#15121a);border:1px solid rgba(212,175,55,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.6)}
#app .bp2 .bspot.has{background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    radial-gradient(70% 70% at 50% 40%,rgba(212,175,55,.16),transparent 75%),#1a1610}
#app .bp2 .bspot.has .bn2{background:var(--goldgrad);color:#2a1d05;border-color:#2a1d05}
#app .bp2 .rbhead,#app .bp2 .betspots.sq3n .rbbox .rbhead{color:#f0e2b6}
#app .bp2 .rbar,#app .bp2 .betspots.sq3n .rbbox .rbar{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 4px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.4)}

/* ── 3. 按钮:拉丝金属 + 金边斜面 + 实体厚度 ── */
#app .btn.act-hit,#app .btn.act-stand,#app .btn.act-double,#app .btn.act-split,#app .btn.primary{
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 5px rgba(0,0,0,.35),
    0 0 0 1.5px #1a1207,0 0 0 2.5px rgba(212,175,55,.55),0 5px 0 #0a090c,0 12px 20px rgba(0,0,0,.6);
  text-shadow:0 1px 0 rgba(0,0,0,.35)}
#app .btn.act-hit::after,#app .btn.act-stand::after,#app .btn.act-double::after,#app .btn.act-split::after,#app .btn.primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),                     /* 拉丝 */
    linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 45%,transparent 50%,rgba(0,0,0,.18) 100%)}  /* 斜面高光 */
#app .btn.primary,#app .btn.act-double{background:linear-gradient(180deg,#fff0b8 0%,#e0bd4e 45%,#b8912f 70%,#f3dd8e 100%);color:#2a1d05;text-shadow:0 1px 0 rgba(255,255,255,.45)}
/* 决策键的动作色要压过 .primary(要牌键同时带两个类) */
#app .btn.act-hit,#app .btn.primary.act-hit{background:linear-gradient(180deg,#6b95ea 0%,#2f5db8 55%,#183777 100%);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
#app .btn.act-stand,#app .btn.primary.act-stand{background:linear-gradient(180deg,#ec6c80 0%,#b21e30 55%,#66101b 100%);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
#app .btn.act-split,#app .btn.primary.act-split{background:linear-gradient(180deg,#6fd9a0 0%,#1f8a4f 55%,#0f4a2a 100%);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
#app .btn.act-hit:active,#app .btn.act-stand:active,#app .btn.act-double:active,#app .btn.act-split:active,#app .btn.primary:active{
  transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.35),0 0 0 1.5px #1a1207,0 0 0 2.5px rgba(212,175,55,.55),0 2px 0 #0a090c,0 6px 10px rgba(0,0,0,.5)}
#app .btn.primary.glow{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 5px rgba(0,0,0,.35),0 0 0 1.5px #1a1207,0 0 0 2.5px rgba(243,221,142,.9),0 5px 0 #0a090c,0 0 26px rgba(212,175,55,.6)}

/* ── 4. 结算横幅:横跨桌面的黑金缎带,不再压在牌上 ── */
#app .bigmsg{top:41%;left:-12px;right:-12px;width:auto;transform:none;padding:7px 0 8px;line-height:1.05;
  background:linear-gradient(90deg,transparent 0%,rgba(6,5,9,.86) 12%,rgba(6,5,9,.94) 50%,rgba(6,5,9,.86) 88%,transparent 100%);
  border-top:1px solid;border-bottom:1px solid;border-left:0;border-right:0;
  border-image:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.7) 14%,rgba(243,221,142,.9) 50%,rgba(212,175,55,.7) 86%,transparent 100%) 1;
  box-shadow:0 10px 30px rgba(0,0,0,.6);font-size:22px;letter-spacing:.14em}
#app .bigmsg::before,#app .bigmsg::after{content:"";position:absolute;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(243,221,142,.5),transparent)}
#app .bigmsg::before{top:2px}#app .bigmsg::after{bottom:2px}
#app .bigmsg.show{animation:bannerin .5s cubic-bezier(.2,1.1,.3,1) both}
@keyframes bannerin{0%{opacity:0;transform:scaleX(.2) scaleY(.6)}55%{opacity:1;transform:scaleX(1.04) scaleY(1.06)}100%{transform:none}}
#app .bigmsg .sub{font-size:16px;margin-top:3px}
#app .bigmsg.win{box-shadow:0 0 34px rgba(212,175,55,.35),0 10px 30px rgba(0,0,0,.6)}
#app .bigmsg.lose{border-image:linear-gradient(90deg,transparent 0%,rgba(216,58,75,.7) 14%,rgba(241,169,174,.9) 50%,rgba(216,58,75,.7) 86%,transparent 100%) 1}
#app .bigmsg.push{border-image:linear-gradient(90deg,transparent 0%,rgba(205,189,140,.5) 14%,rgba(205,189,140,.8) 50%,rgba(205,189,140,.5) 86%,transparent 100%) 1}
/* 赢:金币从横幅飞进钱包 */
.wincoin{position:fixed;z-index:97;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff3c4,#d4af37 52%,#8c6d1f);box-shadow:0 0 0 1.5px #3a2a05,0 2px 5px rgba(0,0,0,.6);
  transition:transform .75s cubic-bezier(.3,.6,.2,1),opacity .2s .6s;will-change:transform}
/* 输:一层暗红从左到右扫过桌面 */
#app .tablefelt.losesweep::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:8;background:none;
  background-image:linear-gradient(100deg,transparent 30%,rgba(178,30,48,.28) 50%,transparent 70%);background-size:220% 100%;
  animation:losesweep .9s ease-out both}
@keyframes losesweep{from{background-position:120% 0;opacity:1}to{background-position:-40% 0;opacity:0}}
/* 大赢:桌面金光呼吸一次 */
#app .tablefelt.winglow{animation:winglow 1.1s ease-out both}
@keyframes winglow{0%{box-shadow:inset 0 0 0 0 rgba(243,221,142,0),0 0 0 4px #0b0a0e,0 0 0 5.5px rgba(212,175,55,.6),0 0 0 10px #151218,0 0 0 11px rgba(212,175,55,.28),0 26px 50px rgba(0,0,0,.8)}
  30%{box-shadow:inset 0 0 60px 10px rgba(243,221,142,.28),0 0 0 4px #0b0a0e,0 0 0 5.5px #f3dd8e,0 0 0 10px #151218,0 0 0 11px rgba(243,221,142,.6),0 0 40px rgba(212,175,55,.5),0 26px 50px rgba(0,0,0,.8)}
  100%{box-shadow:inset 0 -36px 70px rgba(0,0,0,.66),0 0 0 4px #0b0a0e,0 0 0 5.5px rgba(212,175,55,.6),0 0 0 10px #151218,0 0 0 11px rgba(212,175,55,.28),0 26px 50px rgba(0,0,0,.8)}}
@media(prefers-reduced-motion:reduce){#app .tablefelt.losesweep::after,#app .tablefelt.winglow,#app .bigmsg.show{animation:none}.wincoin{display:none}}