:root{
  --bg:#0d1117; --panel:#161b22; --line:#2a313c; --text:#e6edf3; --dim:#8b949e;
  --felt1:#1f6b4a; --felt2:#0f3d2b; --gold:#f5c542; --red:#e5484d; --green:#3fb950; --blue:#3b82f6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 -apple-system,"PingFang SC","Segoe UI",sans-serif}
#app{display:flex;flex-direction:column;height:100vh}
header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-weight:700;font-size:16px}.brand small{color:var(--dim);font-weight:400;margin-left:8px}
.hdr-right{display:flex;gap:10px;align-items:center}
.chk{color:var(--dim);font-size:13px;cursor:pointer}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#21262d;color:var(--text);border-radius:8px;padding:8px 14px}
button:hover:not(:disabled){filter:brightness(1.2)}button:disabled{opacity:.4;cursor:default}
button.ghost{background:transparent}
button.primary{background:var(--green);border-color:var(--green);color:#04210d;font-weight:700}
main{flex:1;display:flex;min-height:0}
#table{flex:1;position:relative;margin:16px 24px;min-height:0}
.felt{position:absolute;inset:8% 6%;border-radius:50%/50%;background:radial-gradient(ellipse at center,var(--felt1),var(--felt2));border:10px solid #3a2a1a;box-shadow:inset 0 0 40px #0008,0 10px 40px #000a}
#potBox{position:absolute;top:22%;left:50%;transform:translateX(-50%);background:#0007;padding:3px 14px;border-radius:20px;white-space:nowrap}
#potBox .lbl{color:var(--dim)}#potBox b{color:var(--gold)}
#board{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:6px}
#banner{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);text-align:center;font-weight:700;color:var(--gold);text-shadow:0 1px 4px #000;white-space:nowrap}
.card{}
.pc{width:44px;height:62px;border-radius:6px;background:#fff;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:20px;line-height:1;box-shadow:0 2px 6px #0008;position:relative}
.pc i{font-style:normal;font-size:18px}
.pc.s{color:#111}.pc.h{color:#d11}.pc.d{color:#1565d8}.pc.c{color:#0a8a2a}
.pc.back{background:repeating-linear-gradient(45deg,#8b1e2d,#8b1e2d 4px,#a82a3b 4px,#a82a3b 8px);border:2px solid #fff}
.pc.dim{opacity:.35}.pc.hl{box-shadow:0 0 0 3px var(--gold),0 2px 8px #000}
.pc.new{animation:deal .35s ease-out}
@keyframes deal{from{transform:translateY(-30px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.pc.sm{width:34px;height:48px;font-size:16px}.pc.sm i{font-size:14px}
#seats{position:absolute;inset:0;pointer-events:none}
.seat{position:absolute;transform:translate(-50%,-50%);width:132px;text-align:center;pointer-events:auto}
.seat .cards{display:flex;justify-content:center;gap:3px;margin-bottom:-14px;position:relative;z-index:1}
.seat .plate{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:16px 6px 5px;position:relative}
.seat.active .plate{border-color:var(--gold);box-shadow:0 0 14px #f5c54288}
.seat.folded{opacity:.45}.seat.empty{opacity:.25}
.seat.winner .plate{border-color:var(--green);box-shadow:0 0 16px #3fb950aa}
.seat .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .stack{color:var(--gold)}
.seat .tag{font-size:11px;color:var(--dim);min-height:15px}
.seat .tag.act{color:#9fd}
.seat .hname{font-size:11px;color:var(--green)}
.dbtn{position:absolute;right:-8px;top:2px;width:22px;height:22px;border-radius:50%;background:#fff;color:#111;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:2}
.pos{position:absolute;left:-6px;top:2px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;border-radius:8px;padding:0 5px;z-index:2}
.bet{position:absolute;transform:translate(-50%,-50%);background:#000a;color:var(--gold);border-radius:14px;padding:1px 10px;font-weight:700;white-space:nowrap;pointer-events:none}
.win{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);background:var(--green);color:#04210d;border-radius:10px;padding:0 8px;font-weight:800;z-index:3;white-space:nowrap}
footer{border-top:1px solid var(--line);background:var(--panel);padding:10px 16px;min-height:96px}
#turnInfo{margin-bottom:8px;color:var(--dim)}#turnInfo b{color:var(--text)}
#controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#controls .fold{background:#5b1d20;border-color:#8a2c30}
#controls .call{background:#1d4d2b;border-color:#2b7a40}
#controls .raise{background:#1f3b6b;border-color:#2f5aa8}
.sizer{display:flex;align-items:center;gap:8px;flex:1;min-width:280px}
.sizer input[type=range]{flex:1}.sizer input[type=number]{width:90px;background:#0d1117;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px}
.presets{display:flex;gap:6px}.presets button{padding:6px 8px;font-size:12px}
#logPanel{width:280px;border-left:1px solid var(--line);background:var(--panel);padding:10px;overflow:auto}
#logPanel h3{margin:0 0 8px}#log div{padding:2px 0;color:var(--dim);font-size:12px}#log .hd{color:var(--gold);margin-top:6px}#log .w{color:var(--green)}
.hidden{display:none!important}
.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:10}
.modal .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 28px;display:flex;flex-direction:column;gap:12px;min-width:300px}
.modal h2{margin:0}.sub{margin:0;color:var(--dim)}
.modal label{display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal input{width:110px;background:#0d1117;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px}
@media(max-width:700px){#logPanel{position:fixed;right:0;top:0;bottom:0;z-index:5}.seat{width:100px}.pc{width:34px;height:48px;font-size:16px}}

#seatCfg{display:flex;flex-direction:column;gap:6px}
#seatCfg label select{width:130px;background:#0d1117;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:5px}
#jevChip{color:var(--gold)}#jevChip.on{color:var(--green)}
.seat .persona{font-size:10px;color:#ffb86b}
.seat .think{color:var(--gold)}
.seat.folded.sd{opacity:.8}