* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --felt:#0b6b3a; --felt2:#094d2a; --gold:#f2c14e; --ink:#1c1c1c;
  --card-w:64px; --card-h:90px;
}
html,body{ height:100%; }
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:radial-gradient(circle at 50% 30%, var(--felt), var(--felt2));
  color:#fff; user-select:none; -webkit-user-select:none;
}
#app{ max-width:980px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; padding:10px 12px 16px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.topbar h1{ font-size:22px; letter-spacing:4px; font-weight:800; }
.topbar .sub{ font-size:12px; letter-spacing:1px; color:#cdebd8; font-weight:400; margin-left:6px; }
.scores{ display:flex; gap:8px; font-size:13px; }
.scores .sc{ background:rgba(0,0,0,.25); border-radius:8px; padding:4px 10px; }
.scores .sc b{ color:var(--gold); }

.opponents{ display:flex; justify-content:space-between; gap:10px; margin-top:10px; }
.opp{ flex:1; background:rgba(0,0,0,.22); border-radius:12px; padding:8px; min-height:120px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.opp.active{ outline:2px solid var(--gold); box-shadow:0 0 16px rgba(242,193,78,.5); }
.opp .name{ font-size:14px; font-weight:700; }
.opp .count{ font-size:12px; color:#cdebd8; }
.opp .backs{ display:flex; flex-wrap:wrap; gap:2px; justify-content:center; }
.opp .shown{ display:flex; flex-wrap:wrap; gap:3px; justify-content:center; min-height:48px; align-items:center; }
.pass-tag{ font-size:18px; color:#ffd; font-weight:700; }

.mid{ display:flex; gap:10px; margin-top:10px; flex:1; align-items:stretch; }
.locked{ width:160px; background:rgba(0,0,0,.2); border-radius:12px; padding:8px; }
.locked h3{ font-size:12px; color:var(--gold); margin-bottom:6px; text-align:center; }
.locked .lcards{ display:flex; flex-wrap:wrap; gap:2px; justify-content:center; }
.table{ flex:1; background:rgba(0,0,0,.18); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; min-height:160px; }
.table .who{ font-size:13px; color:#cdebd8; margin-bottom:8px; }
.table .cards{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.table .empty{ font-size:15px; color:#bfe6cd; }

.bottom{ margin-top:10px; }
.hand{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; min-height:var(--card-h); padding:6px; }
.controls{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:8px; flex-wrap:wrap; }
.btn{ background:#fff; color:var(--ink); border:none; border-radius:10px; padding:9px 18px; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.25); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn.primary{ background:var(--gold); }
.btn.ghost{ background:rgba(255,255,255,.15); color:#fff; }
.turn{ font-size:13px; color:#cdebd8; }

.logwrap{ margin-top:10px; }
.log{ height:90px; overflow-y:auto; background:rgba(0,0,0,.22); border-radius:10px; padding:8px 10px; font-size:12.5px; line-height:1.7; color:#eafff0; }
.log div{ opacity:.92; }

/* card */
.card{ width:var(--card-w); height:var(--card-h); background:#fff; border-radius:8px; position:relative; box-shadow:0 2px 5px rgba(0,0,0,.35); color:var(--ink); flex:0 0 auto; }
.card.red{ color:#d11; }
.card.black{ color:#111; }
.card .corner{ position:absolute; top:4px; left:5px; font-size:14px; font-weight:800; line-height:1; text-align:center; }
.card .corner.br{ top:auto; left:auto; bottom:4px; right:5px; transform:rotate(180deg); }
.card .center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; }
.card.small{ --card-w:46px; --card-h:66px; }
.card.mini{ --card-w:38px; --card-h:54px; }
.card.back{ background:repeating-linear-gradient(45deg,#1b5fb0,#1b5fb0 6px,#2f74c9 6px,#2f74c9 12px); border:2px solid #fff; }
.card.back.mini{ }
.card.sel{ transform:translateY(-16px); box-shadow:0 6px 12px rgba(0,0,0,.4); outline:2px solid var(--gold); }
.hand .card{ cursor:pointer; transition:transform .08s; }
.card.joker .jk{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; writing-mode:vertical-rl; letter-spacing:1px; }
.card.joker.big{ background:linear-gradient(135deg,#fff,#ffe2e2); }
.card.joker.small{ background:linear-gradient(135deg,#fff,#e6e6e6); }
.card.joker .corner{ font-size:13px; }

.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10; }
.overlay.hidden{ display:none; }
.modal{ background:#fff; color:var(--ink); border-radius:16px; padding:24px 28px; width:320px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.modal h2{ font-size:22px; margin-bottom:14px; }
.modal #resultBody{ font-size:15px; line-height:1.9; margin-bottom:18px; }
.modal .rank-row{ display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed #ddd; }
.modal .rk-head{ color:var(--gold); font-weight:800; }
.modal .rk-guan{ color:#d11; font-weight:800; }

@media (max-width:560px){
  :root{ --card-w:48px; --card-h:68px; }
  .locked{ width:120px; }
  .topbar h1{ font-size:18px; }
}