:root{--navy:#0b1220;--panel:#121b2c;--panel2:#0e1626;--line:#22304a;--ink:#eaf0f7;--dim:#93a4bd;--emerald:#1fb57a;--emerald-d:#0e6e5f;--gold:#d9b45b;--red:#e0576b;--felt:#0f5137;--felt2:#0a3a28}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(1200px 600px at 50% -10%,rgba(31,181,122,.10),transparent 60%),var(--navy);color:var(--ink);min-height:100vh}
.hidden{display:none!important}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(11,18,32,.7);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.brand{font-family:ui-serif,Georgia,serif;font-weight:700;font-size:1.1rem}.brand b{color:var(--gold)}
.spacer{flex:1}
.chip{font-size:.85rem;color:var(--dim)}.chip b{color:var(--gold)}
.btn{border:0;cursor:pointer;font:inherit;font-weight:800;padding:.7em 1.15em;border-radius:10px;background:var(--emerald);color:#04231b}
.btn:hover{filter:brightness(1.08)}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}.btn.gold{background:var(--gold);color:#3a2c00}.btn:disabled{opacity:.45;cursor:default}
.btn.sm{padding:.5em .8em;font-size:.85rem;border-radius:8px}
.vbanner{background:rgba(217,180,91,.1);border-bottom:1px solid var(--gold);color:#e7d6a8;padding:9px 18px;font-size:.88rem;display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.btn.sm{padding:.4em .8em;font-size:.8rem;border-radius:8px}
.center{max-width:420px;margin:8vh auto;padding:0 18px}
.card-ui{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:16px;padding:26px}
h1{font-family:ui-serif,Georgia,serif;font-size:1.7rem;margin-bottom:6px}.sub{color:var(--dim);margin-bottom:18px;font-size:.95rem}
label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:12px 0 5px}
input{width:100%;background:#0a0e13;border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:12px;font-size:1rem}
.row{display:flex;gap:10px;margin-top:16px}.row .btn{flex:1}
.msg{min-height:1.2em;margin-top:12px;font-size:.9rem}.msg.err{color:var(--red)}.msg.ok{color:var(--emerald)}
.tabs{display:flex;gap:8px;margin-bottom:14px}.tabs a{cursor:pointer;color:var(--dim);font-weight:700;font-size:.9rem;padding:6px 2px;border-bottom:2px solid transparent}.tabs a.on{color:var(--ink);border-color:var(--emerald)}
/* lobby */
.lobby{padding:24px 0}.lobby h2{font-family:ui-serif,Georgia,serif;margin-bottom:14px}
.lobbytabs{display:flex;gap:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.lobbytabs a{cursor:pointer;color:var(--dim);font-weight:700;padding:8px 2px;border-bottom:2px solid transparent;font-size:.95rem}
.lobbytabs a.on{color:var(--ink);border-color:var(--emerald)}
table.lb{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:6px}
table.lb th{text-align:left;color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--line)}
table.lb td{padding:9px 10px;border-bottom:1px solid rgba(34,48,74,.5);font-variant-numeric:tabular-nums}
table.lb td.pos{color:var(--emerald)}table.lb td.neg{color:var(--red)}
.tcard .meta{margin-bottom:10px}
.tlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.tcard h3{margin-bottom:4px}.tcard .meta{color:var(--dim);font-size:.85rem;margin-bottom:12px}
/* table */
.felt-wrap{padding:16px 0 150px}
.felt{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;background:radial-gradient(circle at 50% 45%,var(--felt),var(--felt2));border:10px solid #17232f;border-radius:48% / 60%;box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.center-area{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center}
.board{display:flex;gap:6px;justify-content:center;min-height:64px}
.pot{margin-top:8px;font-weight:800;color:var(--gold)}
.seat{position:absolute;width:120px;transform:translate(-50%,-50%);text-align:center}
.seat .av{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:8px 6px}
.seat.turn .av{border-color:var(--gold);box-shadow:0 0 16px rgba(217,180,91,.5)}
.seat.folded{opacity:.4}
.seat .nm{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .st{color:var(--gold);font-size:.8rem}
.seat .bet{margin-top:4px;font-size:.75rem;color:var(--dim)}
.seat .dealer{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#3a2c00;font-weight:800;font-size:.7rem;display:grid;place-items:center}
.pcards{display:flex;gap:3px;justify-content:center;margin-top:4px;min-height:40px}
.pk{width:30px;height:42px;border-radius:5px;background:#fff;color:#0b1220;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.78rem;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pk.red{color:var(--red)}.pk.back{background:repeating-linear-gradient(45deg,#22406b,#22406b 4px,#193357 4px,#193357 8px);color:transparent}
.big{width:46px;height:64px;font-size:1.05rem;border-radius:7px}
.actionbar{position:fixed;left:0;right:0;bottom:0;background:rgba(14,22,38,.97);border-top:1px solid var(--line);padding:14px 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.actionbar .info{color:var(--dim);font-size:.85rem;margin-right:auto}
.myhand{flex-basis:100%;order:-1;display:flex;gap:8px;justify-content:center;align-items:center;min-height:0}
.myhand:empty{display:none}
.myhand .mhlabel{color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;margin-right:6px}
.actionbar input[type=range]{width:160px}
.timer{position:absolute;left:50%;top:64%;transform:translateX(-50%);color:var(--dim);font-size:.8rem}
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--gold);color:var(--gold);padding:10px 18px;border-radius:10px;font-weight:700;z-index:60}
.ovl{position:fixed;inset:0;background:rgba(4,8,16,.72);display:flex;align-items:center;justify-content:center;z-index:50;padding:18px}
.pmodal{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:16px;padding:24px;width:100%;max-width:420px}
.pmodal h3{font-family:ui-serif,Georgia,serif;margin-bottom:6px}
.pmodal .prow{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}
.notice{font-size:.78rem;color:var(--dim);text-align:center;padding:10px}
@media(max-width:720px){
  html,body{overflow-x:hidden}
  .topbar{gap:8px;padding:10px 12px}
  .brand{font-size:1rem}
  .chip{font-size:.75rem;order:1;flex-basis:100%} /* balance/name on its own line */
  .topbar .spacer{display:none} /* let buttons sit right under the name, wrapping as needed */
  .btn.sm{padding:.45em .7em;font-size:.78rem}
  .felt{aspect-ratio:3/4;border-radius:44%/40%}
  .seat{width:82px} .seat .nm{font-size:.72rem} .pk{width:22px;height:31px;font-size:.62rem} .big{width:34px;height:48px}
  .felt-wrap{padding:12px 0 190px}
  /* action bar: info on its own row, buttons fill the width, slider full-width */
  .actionbar{gap:7px;padding:10px 10px}
  .actionbar .info{flex-basis:100%;text-align:center;margin:0 0 2px}
  .actionbar .btn{flex:1 1 auto;min-width:66px}
  .actionbar input[type=range]{flex-basis:100%;width:100%;order:6}
  #ab_amt{order:6}
  /* lobby tabs: never let them run off — shrink and scroll sideways if needed */
  .lobbytabs{gap:12px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .lobbytabs a{font-size:.9rem;flex:0 0 auto;white-space:nowrap}
  /* table cards: one per row, action buttons wrap and fill */
  .tlist{grid-template-columns:1fr;gap:12px}
  .tcard{padding:16px}
  .tcard .meta{font-size:.82rem}
  .tcard .btn{width:100%;margin-top:4px}
  #tlistT .tcard [id^="ta"]{display:flex;flex-wrap:wrap;gap:8px}
  #tlistT .tcard [id^="ta"] .btn{flex:1 1 auto;width:auto;min-width:120px}
  /* modals: fit small screens */
  .pmodal{max-width:100%;padding:20px}
}