:root{
  --bg:#0b1323; --panel:#111a33; --border:#3b4a7a;
  --text:#f4f7ff; --muted:#9fb0d8;
  --chip:#1a2444; --chip-ghost:#131c33;
  --accent:#ffce45; --accent-2:#ffd96a;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;color:var(--text);font-family:-apple-system,Segoe UI,Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(1000px 600px at 70% 10%,#16324a 0%,var(--bg) 55%,#0a1120 100%);}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem;background:var(--panel);border-bottom:1px solid var(--border);}
.topbar .left,.topbar .right{display:flex;align-items:center;gap:.5rem}
button{appearance:none;border:0;cursor:pointer;background:var(--accent);color:#3a2a00;font-weight:600;padding:.45rem .8rem;border-radius:.45rem;}
button:hover{background:var(--accent-2)}
.table{position:relative;height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.enemy{position:absolute;top:60px;display:flex;flex-direction:column;align-items:center;gap:.4rem;width:80px;}
.enemy-left{left:1rem}.enemy-right{right:1rem}
.enemy .hand.folded{display:flex;flex-direction:column;align-items:center;}
.enemy .hand.folded .card{width:32px;height:22px;background:#223;border:1px solid #445;margin-top:-6px;border-radius:.2rem;transform:rotate(90deg);}
.my-row{position:absolute;bottom:.5rem;width:100%;display:flex;justify-content:center;align-items:center;gap:.6rem;background:linear-gradient(180deg,transparent,#0b1323 30%);}
.avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;background:#223;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.role{font-size:.9rem;color:var(--muted);}
.hand{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;max-width:90vw;}
.hand .card{padding:.28rem .4rem;border:1px solid var(--border);border-radius:.35rem;background:var(--chip);cursor:pointer;user-select:none;}
.hand .card.selected{outline:2px solid #8fb3ff;transform:translateY(-4px);}
.table-cards{display:flex;flex-wrap:wrap;gap:.35rem;min-height:50px;}
.table-cards .card{padding:.25rem .35rem;border:1px solid #5b6b9a;border-radius:.35rem;background:var(--chip-ghost);min-width:22px;text-align:center;}
.card.joker-small{color:#ff5656;background:linear-gradient(45deg,#550000,#ffaaaa);}
.card.joker-big{color:#ffdf00;background:linear-gradient(45deg,#776000,#ffee88);}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;}
.modal.hidden{display:none}
.modal-body{background:var(--panel);padding:1rem;border-radius:.6rem;border:1px solid var(--border);}
@media(max-width:600px){.enemy{width:60px;top:48px;}.avatar{width:48px;height:48px;}}