/* 21点 Blackjack · 赌场绿毡主题（牌面样式复用 bridge 站 .pcard 方案） */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-user-select:none;user-select:none}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#1d6a44 0%,#14532d 55%,#0c3520 100%);
  color:#f5f0e1;min-height:100vh;display:flex;flex-direction:column;align-items:center;
}
body.light{background:radial-gradient(ellipse at 50% 30%,#f7f3e8 0%,#efe7d3 60%,#e2d5b8 100%);color:#3a3226}

/* 顶栏 */
#topbar{width:100%;max-width:860px;display:flex;align-items:center;gap:10px;padding:10px 14px}
#topbar h1{font-size:18px;margin:0;letter-spacing:1px;flex:1}
#topbar h1 .en{font-size:12px;opacity:.7;font-weight:400;margin-left:6px}
.pill{border:1px solid rgba(212,175,55,.6);border-radius:999px;padding:3px 12px;font-size:13px;color:#f3d27a;background:rgba(0,0,0,.25);white-space:nowrap}
body.light .pill{color:#8a6d1f;background:rgba(255,255,255,.5)}
.iconbtn{background:rgba(0,0,0,.3);border:1px solid rgba(212,175,55,.5);color:#f3d27a;border-radius:8px;font-size:16px;padding:4px 10px;cursor:pointer}
body.light .iconbtn{background:rgba(255,255,255,.6);color:#8a6d1f}
#langlink{color:#f3d27a;font-size:13px;text-decoration:none;border:1px solid rgba(212,175,55,.5);border-radius:8px;padding:5px 10px;background:rgba(0,0,0,.3)}
body.light #langlink{color:#8a6d1f;background:rgba(255,255,255,.6)}

/* 桌面 */
#table{width:100%;max-width:860px;flex:1;display:flex;flex-direction:column;align-items:center;padding:6px 12px 0}
.zone{width:100%;text-align:center;margin:8px 0}
.zlabel{font-size:13px;letter-spacing:2px;opacity:.85;margin-bottom:6px}
.zlabel .pts{display:inline-block;min-width:34px;margin-left:8px;padding:1px 10px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(212,175,55,.55);color:#ffe9a8;font-weight:700}
body.light .zlabel .pts{background:rgba(255,255,255,.65);color:#7a5f16}
.hand{display:flex;justify-content:center;align-items:flex-end;min-height:96px;padding:4px 0}
.hand .pcard{margin-left:-30px}
.hand .pcard:first-child{margin-left:0}

/* 牌靴（发牌动画起点） */
#table{position:relative}
#shoe{position:absolute;top:0;right:10px;display:flex;align-items:center;gap:7px;z-index:5}
.deckstack{width:32px;height:46px;border-radius:5px;flex:0 0 auto;
  background:repeating-linear-gradient(45deg,#173a6e 0 6px,#1f4c8f 6px 12px);
  border:2px solid #fdfdf8;box-shadow:2px 2px 0 rgba(0,0,0,.35),4px 4px 0 rgba(0,0,0,.18)}
#shoeinfo{font-size:12px;opacity:.75;white-space:nowrap}

/* 牌面（复用 bridge 站 DOM 牌面方案） */
.pcard{width:62px;height:88px;background:#fdfdf8;border-radius:7px;position:relative;flex:0 0 auto;
  box-shadow:0 3px 8px rgba(0,0,0,.45);color:#1c1c1c}
.pcard.red{color:#c0392b}
.pcard .corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1.05;font-weight:700}
.pcard .corner.tl{top:4px;left:5px}
.pcard .corner.br{bottom:4px;right:5px;transform:rotate(180deg)}
.pcard .r{font-size:14px}
.pcard .s{font-size:12px}
.pcard .ace{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px}
.pcard .face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pcard .face .fl{font-size:30px;font-weight:800}
.pcard .face .fs{font-size:20px}
.pcard .numcenter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;opacity:.9}
.pcard.back{background:repeating-linear-gradient(45deg,#173a6e 0 8px,#1f4c8f 8px 16px);border:4px solid #fdfdf8}
.pcard.hole{animation:none}

/* 中央横幅 */
#banner{min-height:44px;display:flex;align-items:center;justify-content:center;margin:4px 0}
#banner .msg{font-size:17px;font-weight:700;color:#ffe9a8;text-shadow:0 2px 6px rgba(0,0,0,.5);text-align:center;padding:0 12px}
body.light #banner .msg{color:#7a5f16;text-shadow:none}
#banner .msg.win{color:#7CFC9a}
#banner .msg.lose{color:#ff9d8a}

/* 下注区 */
#betpanel{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 2px}
#chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip{width:56px;height:56px;border-radius:50%;border:3px dashed rgba(255,255,255,.85);font-weight:800;font-size:14px;
  cursor:pointer;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.chip.c10{background:#2b6cb0}.chip.c25{background:#2f855a}.chip.c50{background:#b7791f}
.chip.c100{background:#9b2c2c}.chip.c500{background:#553c9a}
.chip.sel{outline:3px solid #ffe9a8;transform:scale(1.1)}
.chip:disabled{opacity:.4;cursor:default}
#betline{font-size:15px}
#betline b{color:#ffe9a8;font-size:19px}
body.light #betline b{color:#7a5f16}

/* 操作按钮 */
#actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0 4px;min-height:48px}
.abtn{font-size:16px;font-weight:700;padding:10px 22px;border-radius:12px;border:1px solid rgba(212,175,55,.7);
  background:linear-gradient(180deg,#3a2f12,#241d08);color:#ffe9a8;cursor:pointer;letter-spacing:1px}
.abtn:active{transform:scale(.96)}
.abtn.primary{background:linear-gradient(180deg,#b8860b,#8a6508);color:#fff}
.abtn.danger{background:linear-gradient(180deg,#7a2e1d,#521e10);color:#ffd9cd}
.abtn:disabled{opacity:.35;cursor:default}
.abtn.hit{background:linear-gradient(180deg,#2f9e5f,#1d7a44);color:#fff;border-color:rgba(124,252,154,.55)}
.abtn.dbl{background:linear-gradient(180deg,#c0392b,#8f2a1e);color:#fff;border-color:rgba(255,157,138,.55)}
.abtn .bi{margin-right:7px;font-weight:800}
body.light .abtn.hit{background:linear-gradient(180deg,#3aad6a,#248a4e);color:#fff}
body.light .abtn.dbl{background:linear-gradient(180deg,#d44a38,#a93226);color:#fff}
body.light .abtn{background:linear-gradient(180deg,#fff,#efe7d3);color:#7a5f16}
body.light .abtn.primary{background:linear-gradient(180deg,#d4a017,#a87b0a);color:#fff}

/* 底部 */
#foot{width:100%;max-width:860px;display:flex;justify-content:space-between;align-items:center;padding:8px 14px 14px;font-size:12px;opacity:.8}
#foot a{color:#f3d27a}
#rules{width:100%;max-width:860px;padding:0 16px 26px;font-size:13px;line-height:1.8;opacity:.85}
#rules summary{cursor:pointer;font-weight:700}
@media (max-width:480px){
  #topbar{flex-wrap:wrap;row-gap:6px}
  #topbar h1{font-size:16px;flex:1 1 100%}
  #topbar h1 .en{font-size:11px}
  .pcard{width:52px;height:76px}
  .pcard .r{font-size:12px}.pcard .ace{font-size:34px}
  .hand .pcard{margin-left:-26px}
  .chip{width:50px;height:50px;font-size:12px}
  .abtn{padding:9px 16px;font-size:15px}
}