:root{
  --bg:#0a1512; --felt:#0f2018; --gold:#e3cb8e; --ink:#eef4ef; --muted:#8fa198;
  --card-w:52px; --card-h:74px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none!important;}
html,body{height:100%;margin:0;}
body{
  background:radial-gradient(circle at 50% 20%,#123b30,#061511 70%);
  color:var(--ink); font-family:-apple-system,"Songti SC",system-ui,sans-serif;
  min-height:100svh;
}
.btn{
  min-height:44px;padding:0 20px;border-radius:10px;border:1px solid #e2bc6955;
  background:linear-gradient(135deg,#edc974,#ad6f20);color:#241608;font-weight:800;
  font-size:14px;cursor:pointer;
}
.btn.secondary{background:#17372f;color:#b7c7bf;border-color:#3a5147;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

.lobby{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100svh;gap:14px;padding:20px;text-align:center;
}
.lobby h1{margin:0;font:800 30px "Songti SC",serif;color:var(--gold);}
.lobby .tip{margin:0;color:var(--muted);font-size:13px;}
.lobby .note{margin-top:20px;color:#6d8177;font-size:11px;max-width:320px;}
#nameInput{
  min-height:42px;padding:0 14px;border-radius:10px;border:1px solid #3a5147;
  background:#0c2a23;color:var(--ink);font-size:14px;width:220px;
}

.game{display:flex;flex-direction:column;height:100svh;}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid #1c3a30;font-size:12px;color:var(--muted);
}
.topbar b{color:var(--gold);}

.table{
  position:relative;flex:1;min-height:0;background:var(--felt);margin:8px;border-radius:16px;
  border:2px solid #6c4b2c;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr auto;
}
.seat{padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.seat-top{grid-column:2;grid-row:1;}
.seat-left{grid-column:1;grid-row:2;align-self:center;}
.seat-right{grid-column:3;grid-row:2;align-self:center;}
.seat-info{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);}
.seat-name{color:var(--ink);font-weight:700;}
.seat.active .seat-name{color:var(--gold);}

.center{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.last-play{
  min-height:60px;display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:8px;border-radius:10px;background:#06171399;border:1px solid #e9ce8730;min-width:180px;
}
.turn-hint{font-size:11px;color:var(--muted);}

.hand-area{padding:8px 8px calc(8px + env(safe-area-inset-bottom));}
.hand{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;min-height:calc(var(--card-h) + 12px);margin-bottom:8px;}
.actions{display:flex;justify-content:center;gap:10px;}

.card{
  position:relative;width:var(--card-w);height:var(--card-h);border-radius:6px;
  background:linear-gradient(115deg,#fffef2,#e8e2c9 70%,#c4bca0);
  border:1px solid #aaa38d;box-shadow:0 3px 0 #827c69,0 5px 7px #0005;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .12s;user-select:none;
}
.card.selected{transform:translateY(-12px);box-shadow:0 0 0 2px var(--gold),0 8px 14px #0007;}
.card b{font:900 18px Georgia,serif;line-height:1;}
.card small{font-size:10px;margin-top:2px;}
.card.red b,.card.red small{color:#c0392b;}
.card.black b,.card.black small{color:#1c2b28;}
.card.small{width:32px;height:46px;}
.card.small b{font-size:12px;}
.card.small small{font-size:7px;}

.log-panel{
  max-height:90px;overflow-y:auto;padding:6px 12px;font-size:11px;color:var(--muted);
  border-top:1px solid #1c3a30;
}
.log-panel div{padding:1px 0;}

.overlay{position:fixed;inset:0;display:grid;place-items:center;background:#020b09d9;z-index:50;}
.overlay-card{
  padding:26px 24px;border-radius:16px;background:linear-gradient(150deg,#0d3028,#071814);
  border:1px solid #e0bd6e55;text-align:center;max-width:320px;
}
.overlay-card h2{margin:0 0 10px;color:var(--gold);font:800 22px Georgia,serif;}
.overlay-card p{color:var(--muted);font-size:13px;margin-bottom:16px;white-space:pre-line;}

@media (max-width:480px){
  :root{--card-w:40px;--card-h:58px;}
  .card b{font-size:14px;}
  .topbar{font-size:10px;padding:8px;}
}