/* ===== 桥牌 · 双主题 ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--cw:64px}
html[data-theme="casino"]{
  --bg1:#0d3b23; --bg2:#071f13;
  --felt:radial-gradient(ellipse at 50% 40%, #1a6b3c 0%, #0f4a28 55%, #082a16 100%);
  --edge:#5a3a1e; --edge2:#3a2412;
  --acc:#e8b923; --acc-dim:rgba(232,185,35,.35);
  --txt:#f5f0e0; --dim:#b8c4a8;
  --panel:rgba(8,30,16,.88); --line:rgba(232,185,35,.25);
  --card-shadow:0 6px 16px rgba(0,0,0,.5);
}
html[data-theme="modern"]{
  --bg1:#0f172a; --bg2:#020617;
  --felt:radial-gradient(ellipse at 50% 35%, #1e293b 0%, #0f172a 60%, #020617 100%);
  --edge:#1e293b; --edge2:#0b1120;
  --acc:#22d3ee; --acc-dim:rgba(34,211,238,.3);
  --txt:#f1f5f9; --dim:#94a3b8;
  --panel:rgba(15,23,42,.92); --line:rgba(34,211,238,.22);
  --card-shadow:0 6px 18px rgba(0,0,0,.6);
}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--txt); overflow:hidden; user-select:none;
  display:flex; flex-direction:column;
}
/* ===== 顶栏 ===== */
#topbar{display:flex;flex-wrap:wrap;align-items:center;padding:8px 14px;z-index:50;gap:8px}
#topbar .brand{flex:1 1 auto}
#topbar .top-actions{flex:0 0 auto}
#scorebar{order:3;flex:1 1 100%;justify-content:center;display:flex;align-items:center;gap:14px;padding:4px 12px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;font-size:13px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{font-size:34px}
.brand h1{font-size:20px;letter-spacing:2px}
.brand p{font-size:11px;color:var(--dim)}
.top-actions{display:flex;gap:8px}
.tbtn{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--txt);font-size:16px;font-weight:700;cursor:pointer}
.tbtn.on{border-color:var(--acc);box-shadow:0 0 10px var(--acc-dim)}
/* ===== 计分条 ===== */
#scorebar .score-side{display:flex;align-items:center;gap:4px}
#scorebar .score-side b{font-size:15px}
#contractInfo{color:var(--acc);font-weight:700;min-width:40px;text-align:center}
.score-side{display:flex;align-items:center;gap:8px;font-size:14px}
.score-side b{font-size:20px;color:var(--acc)}
#contractInfo{font-size:14px;color:var(--dim)}
#contractText b{color:var(--acc);font-size:16px}
/* ===== 牌桌 ===== */
#table{flex:1;position:relative;margin:10px;border-radius:24px;background:var(--felt);
  border:10px solid var(--edge);outline:2px solid var(--edge2);box-shadow:inset 0 0 80px rgba(0,0,0,.5),var(--card-shadow);
  overflow:hidden;min-height:0}
.seat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:10}
.seat.north{top:8px;left:50%;transform:translateX(-50%)}
.seat.south{bottom:8px;left:50%;transform:translateX(-50%)}
.seat.west{left:2px;top:50%;transform:translateY(-50%)}
.seat.east{right:2px;top:50%;transform:translateY(-50%)}
.seat-name{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);background:var(--panel);padding:3px 10px;border-radius:999px;border:1px solid var(--line)}
.seat-name .pos{font-weight:800;color:var(--acc)}
.seat-name .cnt{color:var(--acc);font-weight:700}
.seat.active .seat-name{border-color:var(--acc);box-shadow:0 0 12px var(--acc-dim)}
.hand{display:flex;justify-content:center;align-items:flex-end;min-height:calc(var(--cw)*1.1)}
.seat.south .hand{gap:0}
.seat.north.dummy .hand{gap:2px}
/* ===== 真实牌面 ===== */
.pcard{position:relative;width:var(--cw);height:calc(var(--cw)*1.42);border-radius:calc(var(--cw)*.09);
  background:linear-gradient(145deg,#ffffff 0%,#f4f1ea 100%);
  box-shadow:var(--card-shadow);flex:none;color:#1a1a1a;cursor:default}
.pcard.red{color:#c0272d}
.pcard .corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;font-weight:700}
.pcard .corner.tl{top:4%;left:7%}
.pcard .corner.br{bottom:4%;right:7%;transform:rotate(180deg)}
.pcard .corner .r{font-size:calc(var(--cw)*.24)}
.pcard .corner .s{font-size:calc(var(--cw)*.26)}
.pcard .pips{position:absolute;inset:18% 12%;pointer-events:none}
.pcard .pip{position:absolute;transform:translate(-50%,-50%);font-size:calc(var(--cw)*.3);line-height:1}
.pcard .pip.inv{transform:translate(-50%,-50%) rotate(180deg)}
.pcard .face{position:absolute;inset:20% 14%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1px solid currentColor;border-radius:8px;opacity:.9}
.pcard .face .fl{font-size:calc(var(--cw)*.52);font-weight:800;line-height:1}
.pcard .face .fs{font-size:calc(var(--cw)*.3)}
.pcard .ace{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw)*.72)}
.pcard .numcenter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw)*.62);opacity:.9}
.pcard.back{background:repeating-linear-gradient(45deg,#1e3a8a 0 6px,#1d4ed8 6px 12px);border:3px solid #f5f0e0}
.pcard.back::after{content:"🃏";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw)*.4)}
.pcard.playable{cursor:pointer;transition:transform .12s}
.pcard.playable:hover{transform:translateY(-10px)}
.seat.south .pcard{margin-left:calc(var(--cw)*-.42)}
.seat.south .pcard:first-child{margin-left:0}
.pcard.dim{opacity:.55}
.pcard.just-played{animation:deal .25s ease}
@keyframes deal{from{transform:scale(.6);opacity:0}}
/* AI 手牌（牌背叠） */
.minis{display:flex}
.minis .pcard{--cw:56px;margin-left:-40px}
.minis .pcard:first-child{margin-left:0}
/* 东西家竖排 */
.seat.west .minis,.seat.east .minis{flex-direction:column}
.seat.west .minis .pcard,.seat.east .minis .pcard{margin-left:0;margin-top:-62px}
.seat.west .minis .pcard:first-child,.seat.east .minis .pcard:first-child{margin-top:0}
/* ===== 中央 ===== */
#center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;z-index:5}
#trickInfo{display:flex;gap:14px;font-size:13px;color:var(--dim);background:var(--panel);padding:4px 14px;border-radius:999px;border:1px solid var(--line)}
#trickArea{position:relative;width:280px;height:210px;pointer-events:none}
.tslot{position:absolute;width:var(--cw);height:calc(var(--cw)*1.42)}
.tslot.n{top:0;left:50%;transform:translateX(-50%)}
.tslot.s{bottom:0;left:50%;transform:translateX(-50%)}
.tslot.w{left:0;top:50%;transform:translateY(-50%)}
.tslot.e{right:0;top:50%;transform:translateY(-50%)}
.tslot .pcard{--cw:56px}
#tableMsg{font-size:15px;color:var(--acc);background:var(--panel);padding:6px 18px;border-radius:12px;border:1px solid var(--line);min-height:20px}
/* ===== 叫牌 ===== */
#bidPanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:100;pointer-events:auto;background:var(--panel);border:1.5px solid var(--acc);border-radius:16px;padding:12px 16px;width:min(480px,92vw);max-height:70vh;overflow-y:auto;box-shadow:var(--card-shadow)}
/* 叫牌提示消息不被面板盖住 */
#tableMsg{position:relative;z-index:101}
#bidHistory{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;justify-content:center;min-height:26px}
.bidtag{font-size:13px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line)}
.bidtag .red{color:#ff6b6b}.bidtag .blk{color:var(--txt)}
#bidBox{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bidbtn{padding:12px 4px;border-radius:10px;border:1.5px solid var(--line);background:rgba(255,255,255,.06);color:var(--txt);font-size:18px;font-weight:700;cursor:pointer}
.bidbtn:disabled{opacity:.25;cursor:default}
.bidbtn:not(:disabled):hover{border-color:var(--acc);background:var(--acc-dim)}
.bidbtn.pass{grid-column:span 3;background:rgba(255,255,255,.12);font-size:15px}
.bidbtn.strain{font-size:22px;padding:14px 4px}
.bidbtn .red{color:#ff6b6b}
/* ===== toast / 弹窗 ===== */
#toast{position:fixed;bottom:120px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--panel);border:1.5px solid var(--acc);color:var(--txt);
  padding:10px 22px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;z-index:200;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(3px)}
.modal.hidden{display:none}
.modal .card{background:var(--panel);border:1.5px solid var(--acc);border-radius:18px;padding:24px;max-width:92%;width:380px;text-align:center;box-shadow:var(--card-shadow)}
.modal .card.wide{width:520px;text-align:left}
.modal h2{margin-bottom:12px;font-size:20px}
.modal .row{display:flex;gap:10px;justify-content:center;margin-top:16px}
#helpBody ul{padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.6}
#resDetail{font-size:15px;line-height:2}
#resDetail b{color:var(--acc)}
.btn{padding:10px 22px;border-radius:12px;border:1.5px solid var(--line);background:rgba(255,255,255,.07);color:var(--txt);font-size:15px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--acc);color:#1a1a1a;border-color:var(--acc)}
.hidden{display:none!important}
/* ===== 移动端 ===== */
@media (max-width:700px){
  :root{--cw:44px}
  #trickArea{width:200px;height:160px}
  .tslot .pcard{--cw:40px}
  #bidBox{grid-template-columns:repeat(3,1fr)}
  .bidbtn.pass{grid-column:span 3}
  .brand p{display:none}
  .minis .pcard{--cw:40px;margin-left:-30px}
  .seat.west .minis .pcard,.seat.east .minis .pcard{margin-left:0;margin-top:-44px}
  .seat.west .minis .pcard:first-child,.seat.east .minis .pcard:first-child{margin-top:0}
}

#recordBox{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
#recordText{font-variant-numeric:tabular-nums}
#btnResetRecord{font-size:12px;padding:2px 6px;opacity:.7}
#btnResetRecord:hover{opacity:1}