:root{--felt:#0b6b43;--felt2:#063d26;--gold:#e8c35a;--cw:56px;--ch:80px}
html,body{height:100%}
body{margin:0;background:#0d1b14;overflow:hidden;overscroll-behavior:none}
#topbar{height:52px;background:#111}
.view{height:calc(100vh - 52px);height:calc(100dvh - 52px);overflow:auto}
#view-login:not(.d-none){display:flex;align-items:center;justify-content:center}
#view-table{position:relative;overflow:hidden}

#felt{position:absolute;left:2%;right:2%;top:12px;bottom:190px;background:radial-gradient(var(--felt),var(--felt2));border-radius:160px;border:8px solid #5a3a1a}
#seats{position:absolute;inset:0}
.seat{position:absolute;transform:translate(-50%,-50%);text-align:center;width:120px;z-index:2}
.seat img{width:46px;height:46px;border-radius:50%;border:3px solid #333;background:#333;object-fit:cover}
.seat.turn img{border-color:var(--gold);box-shadow:0 0 14px var(--gold)}
.seat.out{opacity:.45}
.seat .nm{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .tag{font-size:11px;color:var(--gold)}
.seat .card{transform:scale(.7);margin-top:-8px}
#center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:22px;align-items:center;text-align:center;color:#fff}
.lbl{font-size:11px;opacity:.85;margin-top:6px}

.card{width:var(--cw);height:var(--ch);border-radius:6px;background:#fff;color:#111;display:inline-flex;flex-direction:column;justify-content:space-between;padding:3px 5px;font-weight:700;font-size:15px;line-height:1.1;box-shadow:0 2px 5px #0009;user-select:none;-webkit-user-select:none;flex-shrink:0;text-align:left}
.card.red{color:#c0161d}
.card .big{font-size:24px;text-align:center;line-height:1}
.card .br{text-align:right}
.card.back{background:repeating-linear-gradient(45deg,#8b1a1a 0 6px,#a52a2a 6px 12px);border:3px solid #fff}
.card.joker{background:#fff4c8}
.card.wild{outline:3px solid var(--gold);outline-offset:-3px}
.card.empty{background:transparent;border:2px dashed #fff6;box-shadow:none}
.card.sm{--cw:38px;--ch:54px;font-size:11px;padding:2px 3px}
.card.sm .big{font-size:15px}
.card.drop{outline:3px dashed var(--gold);outline-offset:3px}
.clickable{cursor:pointer}
.clickable:hover{filter:brightness(1.15)}

#bar{position:absolute;left:0;right:0;bottom:122px;height:56px;display:flex;justify-content:center;align-items:center;gap:8px;padding:0 8px;color:#fff}
#msg{font-size:13px;max-width:40%;text-align:center}
#hand{position:absolute;left:0;right:0;bottom:12px;height:104px;display:flex;justify-content:center;align-items:flex-end}
#hand .card{margin-left:-18px;cursor:grab;transition:transform .15s;touch-action:none}
#hand .card:first-child{margin-left:0}
#hand .card.placeholder{opacity:.25}
#hand .card.sel{transform:translateY(-20px)}
#hand .card.new{box-shadow:0 0 10px 3px var(--gold)}

.stack{position:fixed;width:56px;height:80px;z-index:60}
.stack .card{position:absolute;left:0}
@keyframes rl{50%{transform:translateX(-46px) rotate(-10deg)}}
@keyframes rr{50%{transform:translateX(46px) rotate(10deg)}}

.res-group{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0 10px 6px 0;padding:3px;border-radius:6px;background:#ffffff14}
.res-dead{background:#ff000022}

@media(max-width:600px){
  :root{--cw:42px;--ch:62px}
  .card{font-size:12px}.card .big{font-size:18px}
  #hand .card{margin-left:-17px}
  #felt{border-radius:80px}
  #bar .btn{padding:4px 8px}
}