*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d1117;color:#e6edf3;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hidden{display:none!important}
.muted{color:#8b949e}.small{font-size:12px}
#topbar{display:flex;align-items:center;gap:16px;padding:8px 16px;background:#161b22;border-bottom:1px solid #30363d;min-height:56px}
.brand{font-weight:800;font-size:18px;white-space:nowrap;color:inherit;text-decoration:none}.brand .sub{font-weight:400;color:#8b949e;font-size:13px;margin-left:6px}
.clock{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.ck{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:3px 10px;text-align:center;min-width:76px}
.ck label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#8b949e}
.ck b{font-size:15px;font-variant-numeric:tabular-nums}
.ck.warn b{color:#f0b429}
.conn{font-size:12px;color:#8b949e;white-space:nowrap}.conn.ok{color:#3fb950}.conn.bad{color:#f85149}
/* App shell: header / main / footer stacked in a column that exactly fills the viewport. */
body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
#topbar{flex:none;flex-wrap:wrap}
main{flex:1 1 auto;min-height:0;overflow:auto}
.view{min-height:100%}
#game.view{height:100%;min-height:0;overflow:hidden}
.lobby-card{max-width:760px;margin:24px auto;background:#161b22;border:1px solid #30363d;border-radius:14px;padding:22px 28px}
.lobby-card h1{margin-top:0}
form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
form label{display:flex;flex-direction:column;font-size:12px;color:#8b949e;gap:4px}
input{background:#0d1117;border:1px solid #30363d;color:#e6edf3;border-radius:8px;padding:8px 10px;font-size:14px}
.btn{background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;font-weight:600}
.btn:hover:not(:disabled){background:#30363d}.btn:disabled{opacity:.4;cursor:default}
.btn.primary{background:#238636;border-color:#2ea043}.btn.primary:hover{background:#2ea043}
.btn.danger{background:#8e1519;border-color:#da3633}
.btn.gold{background:#9e6a03;border-color:#d29922}
.btn.tiny{padding:3px 7px;font-size:11px}.btn.small{padding:5px 10px;font-size:12px}
.plist{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.plist li{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:6px 10px;display:flex;justify-content:space-between;align-items:center}
.plist .h{color:#58a6ff;font-size:12px}
.admin{margin-top:18px;border-top:1px dashed #30363d;padding-top:10px}.admin .btn{margin:3px}.admin input{width:60px}
#game{display:flex}
.game-main{flex:1;display:flex;flex-direction:column;min-width:0}
.tabs{display:flex;gap:6px;padding:8px 14px 0;flex:none}
.tabs button{background:#161b22;border:1px solid #30363d;color:#8b949e;border-radius:8px 8px 0 0;padding:4px 12px;cursor:pointer}
.tabs button.on{color:#e6edf3;background:#21262d}
.table-wrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:62px 90px 90px;min-height:0;container-type:size;--ar:2.05}
/* the oval scales to fit BOTH the width and the height left over by the action bar */
.table{position:relative;flex:none;--tw:min(100cqw, 100cqh * var(--ar), 980px);width:var(--tw);aspect-ratio:var(--ar);
  /* card sizes scale with the table (which already fits the viewport): big faces for board + your hand,
     moderately larger opponent cards. ~1.5x the old 52px/40px at laptop sizes. */
  --cw:clamp(30px, calc(var(--tw) * var(--cf, .1)), 84px);
  --sw:clamp(26px, calc(var(--tw) * var(--sf, .061)), 56px);border-radius:50%/50%;
  background:radial-gradient(ellipse at center,#1f8a4c 0%,#16703c 45%,#0e5129 80%,#0a3d1f 100%);
  border:16px solid #5b3a1e;box-shadow:0 0 0 4px #2d1d0e,0 0 0 6px #8a5a2b inset,0 20px 60px rgba(0,0,0,.6),inset 0 0 60px rgba(0,0,0,.45)}
.felt-logo{position:absolute;left:50%;top:22%;transform:translateX(-50%);color:rgba(255,255,255,.07);font-weight:900;letter-spacing:.3em;font-size:22px;white-space:nowrap}
.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.pot{background:rgba(0,0,0,.35);padding:3px 14px;border-radius:14px;font-weight:700;font-size:15px;min-height:24px}
.pot:empty{visibility:hidden}
.board{display:flex;gap:calc(var(--cw) * .1);min-height:calc(var(--cw) * 1.42)}
.banner{min-height:22px;font-weight:700;color:#ffd866;text-shadow:0 1px 3px #000;text-align:center;max-width:460px;font-size:14px}
.card{--w:var(--cw, 52px);width:var(--w);height:calc(var(--w) * 1.42);border-radius:calc(var(--w) * .13);background:linear-gradient(#fff,#eef0f2);color:#111;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.5);font-weight:900;user-select:none;flex:none;font-family:"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif}
.card .rk{position:absolute;left:calc(var(--w) * .08);top:calc(var(--w) * .05);font-size:calc(var(--w) * .44);line-height:1;letter-spacing:-.04em}
.card .st{position:absolute;left:calc(var(--w) * .09);top:calc(var(--w) * .5);font-size:calc(var(--w) * .34);line-height:1}
.card .big{position:absolute;right:calc(var(--w) * .07);bottom:calc(var(--w) * .04);font-size:calc(var(--w) * .66);line-height:1}
.card.red{color:#d0191f}
.card.back{background:repeating-linear-gradient(45deg,#1b4d9c 0 5px,#2160bf 5px 10px);border:calc(var(--w) * .07) solid #fff}
.card.slot{background:rgba(0,0,0,.18);box-shadow:none;border:2px dashed rgba(255,255,255,.12)}
.card.sm{--w:var(--sw, 40px)}
.card.dim{filter:brightness(.55)}
.seat{position:absolute;transform:translate(-50%,-50%);width:150px;display:flex;flex-direction:column;align-items:center;z-index:2}
.seat .cards{display:flex;gap:3px;height:calc(var(--sw) * 1.42);margin-bottom:calc(var(--sw) * -.32);z-index:1}
.table{--mw:clamp(30px, calc(var(--tw) * var(--mf, var(--cf, .1))), 84px)}
.seat.me .cards{height:calc(var(--mw) * 1.42);margin-bottom:calc(var(--mw) * -.22);gap:calc(var(--mw) * .06)}
.seat.me .card:not(.sm){--w:var(--mw)}
.seat.me{transform:translate(-50%,-60%)}
.seat .plate{position:relative;z-index:2;background:linear-gradient(#2a313b,#1b2027);border:2px solid #444c56;border-radius:12px;padding:4px 10px 5px;width:150px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.seat .nm{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .hd{font-size:11px;color:#58a6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;display:block}
.seat .ch{font-size:14px;font-weight:800;color:#ffd866;font-variant-numeric:tabular-nums}
.seat .la{position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:#0d1117;border:1px solid #444c56;border-radius:10px;font-size:11px;padding:1px 8px;white-space:nowrap;color:#e6edf3}
.seat .la:empty{display:none}
.seat.current .plate{border-color:#f0b429;box-shadow:0 0 0 3px rgba(240,180,41,.35),0 4px 12px rgba(0,0,0,.5)}
.seat.folded .plate{opacity:.55}
.seat.winner .plate{border-color:#3fb950;box-shadow:0 0 18px rgba(63,185,80,.8)}
.seat .won{color:#3fb950;font-size:12px;font-weight:800}
.seat .hn{font-size:11px;color:#c9d1d9}
.seat .flag{font-size:10px;color:#f0b429}
.timer{height:4px;background:#30363d;border-radius:2px;overflow:hidden;margin-top:3px}
.timer i{display:block;height:100%;background:#f0b429;transition:width .25s linear}
.badge{position:absolute;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.6);z-index:3}
.badge.d{background:#fff;color:#111}.badge.sb{background:#2f81f7;color:#fff;font-size:9px}.badge.bb{background:#f0b429;color:#111;font-size:9px}
.betchip{position:absolute;transform:translate(-50%,-50%);background:rgba(0,0,0,.45);border-radius:12px;padding:2px 9px 2px 4px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:5px;z-index:1}
.betchip::before{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(#fff 0 30%,#d0191f 31% 60%,#fff 61% 70%,#d0191f 71%);display:inline-block}
.empty-seat{position:absolute;transform:translate(-50%,-50%);width:70px;height:34px;border:2px dashed rgba(255,255,255,.12);border-radius:10px}
.actions{flex:none;background:#161b22;border-top:1px solid #30363d;padding:8px 16px;position:relative;z-index:5}
.act-info{font-size:13px;color:#8b949e;min-height:18px}
.act-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
.btn.act{min-width:110px;padding:11px 14px;font-size:15px}
.btn.fold{background:#6e1b1b;border-color:#a33}.btn.call{background:#1f4f8a;border-color:#2f6fbf}.btn.raise{background:#7a5a00;border-color:#c59400}
.raise-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#r-slider{width:200px}#r-input{width:90px}
.presets{display:flex;gap:3px}
.act-row2{display:flex;gap:8px;align-items:center}
.side{width:280px;flex:none;background:#161b22;border-left:1px solid #30363d;padding:8px 12px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.side h3{margin:6px 0;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#8b949e}
.standings{margin:0;padding-left:26px;font-size:12px;max-height:40%;overflow:auto}
.standings li{padding:2px 0;display:flex;justify-content:space-between;gap:6px}
.standings li.out{color:#6e7681}.standings li.me{color:#ffd866;font-weight:700}
.log{flex:1;overflow:auto;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;color:#c9d1d9;background:#0d1117;border-radius:8px;padding:6px}
.log div{padding:1px 0;border-bottom:1px solid #161b22}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-card{background:#161b22;border:1px solid #30363d;border-radius:14px;padding:22px 30px;text-align:center;min-width:300px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#da3633;color:#fff;padding:8px 16px;border-radius:8px;z-index:60}
.podium{display:flex;gap:14px;justify-content:center;align-items:flex-end;margin:18px 0 22px;flex-wrap:wrap}
.pcard{display:flex;flex-direction:column;align-items:center;gap:4px;width:170px;padding:16px 12px 14px;background:linear-gradient(#1c232c,#161b22);border:1px solid #30363d;border-radius:14px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.pcard.p1{border-color:#d29922;padding-top:24px;padding-bottom:22px;box-shadow:0 0 0 1px rgba(210,153,34,.35),0 8px 24px rgba(0,0,0,.45)}
.pcard .medal{font-size:34px;line-height:1}.pcard.p1 .medal{font-size:42px}
.pcard .pname{font-weight:700;font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .phandle{color:#58a6ff;font-size:12px;text-decoration:none}
.pcard .pprize{margin-top:4px;color:#ffd866;font-weight:800;font-size:16px}.pcard .pprize.none{color:#6e7681;font-weight:400;font-size:12px}
.restable{width:100%;border-collapse:collapse;font-size:14px}.restable td,.restable th{padding:5px 8px;border-bottom:1px solid #30363d;text-align:left}
.restable a,.plist a{color:#58a6ff;text-decoration:none}
@media (max-width:1100px){.side{display:none}.table-wrap{padding:60px 70px 88px}}

.acct{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.acct-name{font-size:13px;color:#c9d1d9}
.wallet{background:#0d1117;border:1px solid #d29922;color:#ffd866;border-radius:16px;padding:4px 12px;cursor:pointer;font-size:14px}
.authbox{background:#0d1117;border:1px solid #30363d;border-radius:10px;padding:12px 14px;margin:10px 0}
.tabs2{display:flex;gap:4px;margin-bottom:10px}.tabs2 button{background:none;border:none;color:#8b949e;font-weight:700;padding:4px 10px;cursor:pointer;border-bottom:2px solid transparent}
.tabs2 button.on{color:#e6edf3;border-color:#2f81f7}
.prize{margin:12px 0;font-size:14px}.prize table{border-collapse:collapse}.prize td{padding:2px 12px 2px 0}
.warn{color:#f0b429}
.modal-card.wide{min-width:420px;max-width:640px}
.bundles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.bundle{background:#0d1117;border:1px solid #30363d;border-radius:10px;padding:12px;text-align:center}
.bundle b{display:block;font-size:20px;color:#ffd866}.bundle .price{color:#8b949e;margin:4px 0 8px}
.terms{font-size:11px;color:#8b949e;line-height:1.4;text-align:left}
.terms-footer{flex:none;font-size:10px;line-height:1.35;color:#6e7681;text-align:center;padding:3px 8px;background:#0d1117;border-top:1px solid #161b22}
.terms-footer .tf-short{display:none;cursor:help}.terms-footer .info{color:#8b949e}
body[data-view=game] .terms-footer .tf-full,body[data-view=results] .terms-footer .tf-full{display:none}
body[data-view=game] .terms-footer .tf-short,body[data-view=results] .terms-footer .tf-short{display:inline}
.histwrap{max-height:320px;overflow:auto;text-align:left}
.restable.small{font-size:12px}
.admrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.admout{font-size:12px;max-height:260px;overflow:auto;margin-top:8px;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:pre}
.pos{color:#3fb950}.neg{color:#f85149}

/* avatars & Sign in with X */
.av{width:22px;height:22px;border-radius:50%;object-fit:cover;vertical-align:middle;background:#30363d;flex:none}
.av.sm{width:16px;height:16px}.av.lg{width:40px;height:40px}
.acct .av{margin-right:6px}
.seat .plate .av{position:absolute;left:-12px;top:-12px;width:30px;height:30px;border:2px solid #444c56}
.plist li .who{display:flex;align-items:center;gap:8px}
.standings li .who{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.standings li .who small{color:#58a6ff}
.xbox{text-align:center;padding:18px 14px}
.xbtn{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border:1px solid #536471;font-size:16px;padding:10px 22px;border-radius:999px;text-decoration:none;font-weight:700}
.xbtn:hover{background:#16181c}
.auth-error{max-width:520px;margin:60px auto;text-align:center}
/* single-product chip shop */
.product{background:#0d1117;border:1px solid #30363d;border-radius:10px;padding:14px 16px;margin:12px 0;display:grid;gap:10px}
.prod-head b{font-size:20px;color:#ffd866}.prod-head .price{color:#8b949e;margin-left:6px}
.promo{background:rgba(63,185,80,.12);border:1px solid #2ea043;color:#56d364;border-radius:8px;padding:6px 10px;font-weight:600}
.promo.on{background:rgba(63,185,80,.25)}
.qty{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qty select{background:#161b22;color:#e6edf3;border:1px solid #30363d;border-radius:6px;padding:4px 8px;font-size:15px;margin-left:4px}
.gold-txt{color:#ffd866}
.total{font-size:18px}.total s{margin-right:4px}
.save{background:#238636;color:#fff;border-radius:999px;padding:2px 8px;font-size:12px;margin-left:6px;vertical-align:middle}

/* short laptop screens: tighter table chrome so the action bar always fits */
@media (max-height:820px){
  .table-wrap{padding:58px 90px 86px}
  .actions{padding:6px 14px}.act-row{margin:2px 0}.btn.act{padding:9px 14px}
  .tabs{padding-top:6px}
}
@media (max-height:700px){
  .table-wrap{padding:50px 84px 72px}
}
/* phones / narrow screens: portrait oval, compact seats, wrapping header */
@media (max-width:700px){
  #topbar{gap:6px 10px;padding:6px 10px;min-height:0}
  .brand{font-size:15px}.brand .sub{display:none}
  .clock{order:3;flex-basis:100%;gap:4px}
  .ck{min-width:0;padding:2px 6px}.ck label{font-size:9px}.ck b{font-size:12px}
  .acct{gap:4px}.acct-name{display:none}
  .lobby-card{margin:10px;padding:16px}
  .table-wrap{padding:42px 40px 64px}
  .ck:has(#ck-next),.ck:has(#ck-avg){display:none}
  .seat{width:72px}.seat .plate{width:72px;padding:3px 3px 4px;border-radius:9px}
  .seat .nm{font-size:11px}.seat .hd{font-size:9px}.seat .ch{font-size:12px}
  .table{--cf:.125;--sf:.105}
  .center{top:44.5%;gap:3px}.pot{font-size:13px;padding:2px 10px;min-height:20px}.banner{font-size:12px;min-height:16px;max-width:240px}
  .seat .plate .av{width:20px;height:20px;left:-8px;top:-8px}
  .badge{width:18px;height:18px;font-size:9px}
  .felt-logo{font-size:12px}
  .actions{padding:6px 8px}
  .btn.act{min-width:0;flex:1;padding:10px 6px;font-size:14px}
  .raise-box{flex-basis:100%}#r-slider{flex:1;width:auto;min-width:120px}#r-input{width:70px}
  .pcard{width:31%;min-width:100px;padding:10px 6px}
  .modal-card,.modal-card.wide{min-width:0;width:calc(100% - 20px);padding:16px}
}
/* portrait phones: the oval stays HORIZONTAL (wider than tall) and fills the width; seats sit on/just
   outside the rim with tighter radii so all 9 fit without overlapping each other or the board. */
@media (max-width:700px) and (orientation:portrait){
  .table-wrap{--ar:1.32;padding:92px 4px 108px}
  .table{border-width:10px;--rx:41;--ry:63;--hbx:19;--hby:21;--brx:26;--bry:28;--cf:.092;--mf:.13;--sf:.088}
  .center{top:50%}
}
/* shorter / narrower portrait phones (iPhone SE, 360px Androids): compact seats so the full-width oval still fits */
@media (max-width:700px) and (orientation:portrait) and (max-height:800px){
  .table-wrap{padding:70px 2px 86px}
  .table{--ry:58;--sf:.07;--cf:.088;--mf:.115}
  .seat .hd{display:none}.seat .plate{padding:2px 3px 3px}.seat .la{top:-10px;font-size:10px;padding:0 6px}
  .clock .ck{min-width:0;padding:2px 6px}.ck b{font-size:13px}
}
@media (max-width:380px){ .ck label{font-size:9px;letter-spacing:0}.clock .ck{min-width:0;padding:2px 5px} }

/* daily free chips */
.daily-btn{font-variant-numeric:tabular-nums}
.daily-btn.ready{background:#d29922;border-color:#f0b429;color:#111;box-shadow:0 0 0 3px rgba(240,180,41,.25);animation:pulse 2.2s ease-in-out infinite}
.daily-btn:disabled{opacity:.75;background:#21262d;border-color:#30363d;color:#c9d1d9}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(240,180,41,.2)}50%{box-shadow:0 0 0 6px rgba(240,180,41,.08)}}
.practicebox{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(90deg,rgba(56,139,253,.2),rgba(56,139,253,.05));border:1px solid #1f6feb;border-radius:12px;padding:12px 16px;margin:12px 0}
.practicebox .pb-text{display:flex;flex-direction:column;gap:2px;flex:1 1 260px;min-width:0}.practicebox .pb-text b{color:#79c0ff;font-size:16px}
.btn.practice-btn{background:#1f6feb;border-color:#388bfd;color:#fff;font-weight:700;font-size:16px;padding:10px 18px}.btn.practice-btn:hover{background:#388bfd}.btn.practice-btn:disabled{opacity:.6}
.practice-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(56,139,253,.18);border:1px solid #1f6feb;color:#cae8ff;border-radius:999px;padding:3px 6px 3px 12px;font-size:13px;font-weight:600}
.practice-tag .btn{padding:2px 10px}
.main-alert{background:#9e6a03;color:#fff;border-radius:8px;padding:6px 10px;margin:4px 0;font-size:14px;text-align:center}
.practice-res{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
@media (max-width:700px){.practicebox{padding:10px 12px}.btn.practice-btn{width:100%}}
.dailybox{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(90deg,rgba(210,153,34,.18),rgba(210,153,34,.05));border:1px solid #9e6a03;border-radius:12px;padding:12px 16px;margin:12px 0}
.dailybox .daily-text{display:flex;flex-direction:column;gap:2px}.dailybox .daily-text b{color:#ffd866;font-size:16px}
.btn.daily-big{font-size:16px;padding:10px 18px;background:#d29922;border-color:#f0b429;color:#111;font-variant-numeric:tabular-nums}
.btn.daily-big:disabled{background:#21262d;border-color:#30363d;color:#c9d1d9;opacity:.8}
@media (prefers-reduced-motion:reduce){.daily-btn.ready{animation:none}}
.authbox a{color:#58a6ff}.emailbox form{margin-top:8px}

/* sound toggle, right end of the table tabs row */
.tabs-row{display:flex;align-items:flex-end;flex:none;min-width:0}
.tabs-row .tabs{flex:1 1 auto;min-width:0;flex-wrap:wrap}
.sound-btn{flex:none;margin:6px 14px 0 6px;font-size:14px;padding:3px 9px;line-height:1.2}
.sound-btn[aria-pressed=false]{opacity:.65}
@media (max-width:700px){.sound-btn{margin:4px 8px 0 4px}}

/* private games */
.privatebox{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(90deg,rgba(163,113,247,.2),rgba(163,113,247,.05));border:1px solid #8957e5;border-radius:12px;padding:12px 16px;margin:12px 0}
.privatebox .pv-text{display:flex;flex-direction:column;gap:2px;flex:1 1 260px;min-width:0}.privatebox .pv-text b{color:#d2a8ff;font-size:16px}
.pv-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn.private-btn{background:#8957e5;border-color:#a371f7;color:#fff;font-weight:700;font-size:16px;padding:10px 18px}.btn.private-btn:hover{background:#a371f7}
.pjoin{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}.pjoin input{width:120px;text-transform:uppercase;letter-spacing:.08em}
.pv-room{background:#0d1117;border:1px solid #8957e5;border-radius:12px;padding:12px 16px;margin:12px 0;display:flex;flex-direction:column;gap:10px}
.pv-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pv-badge{background:#8957e5;color:#fff;border-radius:999px;padding:2px 10px;font-weight:700;font-size:13px}
.invite{display:flex;flex-direction:column;gap:6px}
.inv-label{font-weight:700;font-size:14px}
.inv-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.inv-row input{flex:1 1 240px;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.inv-code{font-size:14px}.inv-code b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;letter-spacing:.18em;color:#d2a8ff;margin:0 6px}
.btn.xshare{background:#000;border-color:#536471;color:#fff;text-decoration:none;display:inline-flex;align-items:center}
.pv-host{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pv-host p{flex-basis:100%;margin:0}
.plist .hostbadge{font-size:10px;background:#8957e5;color:#fff;border-radius:6px;padding:0 5px;margin-left:4px;vertical-align:middle}
.private-tag{background:rgba(163,113,247,.18);border-color:#8957e5;color:#e2c5ff}
.pcreate{text-align:left;max-width:560px}.pcreate h2{margin-top:0}.pc-list{padding-left:18px;line-height:1.5;font-size:14px}.pcreate .btn{margin-right:6px}
@media (max-width:700px){.privatebox{padding:10px 12px}.btn.private-btn{flex:1 1 100%}.pv-actions{flex:1 1 100%}.pjoin{flex:1 1 100%}.pjoin input{flex:1}.pv-room{padding:10px 12px}}

/* header: keep the top bar to ONE row on desktop even with a long name + free-chips countdown */
@media (min-width:701px){
  #topbar{flex-wrap:nowrap;gap:10px}
  .clock{flex-wrap:nowrap;gap:4px;min-width:0}
  .ck{min-width:0;padding:2px 7px}.ck label{font-size:9px;letter-spacing:.03em;white-space:nowrap}.ck b{font-size:14px}
  .acct{min-width:0;flex-shrink:1;gap:6px}
  .acct-name{min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .daily-btn{white-space:nowrap}
}
@media (min-width:701px) and (max-width:1400px){
  .brand .sub{display:none}
  .ck:has(#ck-avg){display:none}
  .acct-name{max-width:150px}
}
@media (min-width:701px) and (max-width:1180px){
  .ck:has(#ck-next){display:none}
  .acct-name{display:none}
  #daily-label{font-size:12px}
}

/* =====================================================================================
   Restyle: immersive lounge table (original art: public/assets/lounge-*.webp, painted by
   sim/gen-lounge.js). Glossy green felt, padded leather rail, dealer chip tray, round
   avatars with gold rings + timer ring, gold bet pills, circular edge buttons (HUD).
   ===================================================================================== */
body[data-view=game]{background:#0b0612 url(/assets/lounge-wide.webp) center 35%/cover no-repeat}
@media (orientation:portrait){body[data-view=game]{background-image:url(/assets/lounge-tall.webp);background-position:center top}}
body[data-view=game] #topbar{display:none}
body[data-view=game] main{background:radial-gradient(ellipse at 50% 58%,rgba(8,4,14,0) 35%,rgba(8,4,14,.6) 100%)}
body[data-view=game] .terms-footer{background:rgba(5,3,8,.85);border-top-color:rgba(216,178,94,.15)}
#game{position:relative}
.game-main{position:relative}
/* HUD: circular glossy edge buttons + clock pills */
.hud{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 2px;position:relative;z-index:6}
.hud-l,.hud-r{display:flex;gap:10px;align-items:center;flex:none}
.hud-c{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.hud .clock{flex:0 1 auto;flex-wrap:nowrap;gap:5px}
.hud .ck{background:rgba(12,6,22,.66);border:1px solid rgba(216,178,94,.45);border-radius:999px;padding:2px 12px;min-width:0}
.hud .ck label{color:#cdb98f}
.rbtn{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;padding:0;position:relative;flex:none;font-size:18px;line-height:1;
  background:radial-gradient(circle at 35% 28%,#8a63c4 0%,#46247a 50%,#1f0e38 100%);border:2px solid #d8b25e;
  box-shadow:0 3px 10px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.45)}
.rbtn:hover{filter:brightness(1.15)}.rbtn:active{transform:translateY(1px)}
.rbtn svg{width:22px;height:22px}
.rbtn.small{width:34px;height:34px;font-size:14px}
.rbtn.sound-btn{margin:0;font-size:18px}.rbtn.sound-btn[aria-pressed=false]{opacity:1;filter:grayscale(.6) brightness(.8)}
.rbtn.coin{background:radial-gradient(circle at 35% 30%,#fff1b8 0%,#f0bf45 45%,#9a650d 100%);border-color:#fff3c4;color:#5a3a00}
.rbtn.coin .coin-face{font-weight:900;font-size:21px;font-family:Georgia,serif;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.rbtn.coin.ready{animation:pulse 2.2s ease-in-out infinite}
.rb-badge{position:absolute;top:-5px;right:-5px;background:#e5484d;color:#fff;border-radius:999px;font-size:11px;font-weight:800;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:2px solid #1a0d2a}
.hud-bal{background:rgba(0,0,0,.6);border:1px solid #c9993f;color:#ffd866;border-radius:999px;padding:6px 14px;font-weight:700;font-size:15px;white-space:nowrap}
.tabs-row{padding:0 16px}
.tabs{padding-top:4px}
.tabs button{background:rgba(12,6,22,.7);border-color:rgba(216,178,94,.35);color:#cdb98f;border-radius:999px;padding:3px 12px}
.tabs button.on{color:#fff;background:rgba(70,36,122,.85)}
.tabs .muted{color:#cdb98f}
/* drawer (menu): standings + log + account, on every screen size */
.side{position:absolute;top:0;right:0;bottom:0;width:300px;max-width:88vw;z-index:30;transform:translateX(105%);transition:transform .2s ease;display:flex!important;
  background:rgba(14,8,24,.95);border-left:1px solid rgba(216,178,94,.4);box-shadow:-10px 0 30px rgba(0,0,0,.6)}
.side.open{transform:none}
.dr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:4px 0 6px;border-bottom:1px solid rgba(216,178,94,.25);margin-bottom:4px}
.dr-acct{font-size:14px;line-height:1.5}
/* table: leather rail (::before) + glossy felt (::after) — seat positions keep using the felt box */
.table{background:none;border:0;box-shadow:none;isolation:isolate;--tw:min(100cqw, 100cqh * var(--ar), 940px);--rail:clamp(12px, calc(var(--tw) * .042), 34px)}
.table::before{content:"";position:absolute;inset:calc(-1 * var(--rail)) calc(-1 * var(--rail)) calc(-1.55 * var(--rail));border-radius:50%;z-index:-2;
  background:radial-gradient(ellipse at 50% 22%,#5a3d2b 0%,#33211a 40%,#170d08 72%,#080403 100%);
  box-shadow:0 34px 60px rgba(0,0,0,.75),0 0 0 2px #0a0503,inset 0 3px 3px rgba(255,220,170,.28),inset 0 -12px 22px rgba(0,0,0,.75),0 0 60px rgba(255,170,80,.14)}
.table::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse at 50% 34%,#45c873 0%,#22a053 28%,#147c3d 56%,#0c5c2c 80%,#08431f 100%);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.45),inset 0 0 0 5px rgba(240,200,110,.55),inset 0 0 46px rgba(0,0,0,.55),inset 0 16px 30px rgba(255,255,255,.08)}
.felt-line{position:absolute;inset:10% 8%;border-radius:50%;border:2px solid rgba(255,236,170,.2);pointer-events:none}
.felt-logo{color:rgba(255,255,255,.08);top:21%}
.dealer-tray{position:absolute;left:50%;top:calc(-.9 * var(--rail));transform:translateX(-50%);width:14%;height:calc(var(--rail) * 1.1);border-radius:8px 8px 16px 16px;
  background:linear-gradient(#20150d,#0b0604);border:2px solid #9a7640;box-shadow:inset 0 3px 5px rgba(0,0,0,.85),0 3px 8px rgba(0,0,0,.6);display:flex;gap:4%;padding:3px 6% 4px;align-items:flex-end;z-index:1}
.dealer-tray i{flex:1;height:78%;border-radius:3px;background:repeating-linear-gradient(0deg,var(--c,#c0262d) 0 3px,rgba(255,255,255,.75) 3px 4px);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.dealer-tray i:nth-child(2){--c:#2f6fd8}.dealer-tray i:nth-child(3){--c:#1f9e49}.dealer-tray i:nth-child(4){--c:#222}.dealer-tray i:nth-child(5){--c:#7b3fe4}.dealer-tray i:nth-child(6){--c:#e0a82e}.dealer-tray i:nth-child(7){--c:#c93a7c}
.pot{background:rgba(0,0,0,.55);border:1px solid rgba(255,216,102,.6);color:#ffe9a8;border-radius:999px;padding:3px 18px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.banner{color:#ffe08a}
.card.slot{background:rgba(0,0,0,.16);border-color:rgba(255,236,170,.14)}
/* seats: round avatar with gold ring, compact name, gold chip label */
.seat{width:118px;--av:54px}
.seat .cards{position:relative;z-index:3;margin-bottom:calc(var(--sw) * -.62);gap:0}
.seat:not(.me) .cards .card:first-child{transform:rotate(-9deg) translate(5px,2px)}
.seat:not(.me) .cards .card:last-child:not(:first-child){transform:rotate(9deg) translate(-5px,2px)}
.avring{position:relative;z-index:2;width:calc(var(--av) + 8px);height:calc(var(--av) + 8px);border-radius:50%;padding:4px;flex:none;
  background:conic-gradient(from 210deg,#7a5418,#f6dc8e,#b8892f,#fff1c0,#9c7228,#f6dc8e,#7a5418);box-shadow:0 4px 12px rgba(0,0,0,.65)}
.avring.ticking{--p:100;background:conic-gradient(var(--tc,#4be37f) calc(var(--p) * 1%),rgba(25,16,8,.92) 0)}
.avring.low{--tc:#ff5a4a}
.seat.current .avring{box-shadow:0 0 0 3px rgba(255,216,102,.35),0 0 22px rgba(255,216,102,.65)}
.seat.winner .avring{box-shadow:0 0 0 3px #3fb950,0 0 24px rgba(63,185,80,.95)}
.seat.folded .avring{opacity:.5;filter:grayscale(.6)}
.avatar{width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#2a1d3d;border:2px solid #1a1007;box-shadow:inset 0 0 10px rgba(0,0,0,.55)}
.avatar .av{width:100%;height:100%;position:static;border:0;border-radius:0}
.avatar .ini{font-weight:900;font-size:calc(var(--av) * .36);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);letter-spacing:.02em}
.avatar.bot .ini{font-size:calc(var(--av) * .5)}
.seat .la{top:-9px;z-index:4;background:rgba(10,5,18,.9);border-color:#d8b25e;color:#ffe9a8;font-weight:700}
.seat .plate{width:auto;min-width:84px;max-width:118px;margin-top:-10px;padding:3px 10px 3px;border-radius:10px;background:linear-gradient(#2c1d10,#120b05);border:1px solid #c9993f;box-shadow:0 3px 8px rgba(0,0,0,.6)}
.seat .nm{display:block;font-size:12px;color:#f2e6cf;text-decoration:none;font-weight:700}
.seat a.nm:hover{color:#fff}
.seat .ch{font-size:13px;color:#ffd866;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.seat.current .plate{border-color:#ffd866;box-shadow:0 0 0 2px rgba(255,216,102,.3),0 3px 8px rgba(0,0,0,.6)}
.seat.me{--av:66px}
.seat.me .cards{margin-bottom:calc(var(--mw) * -.28)}
.seat.me .plate{min-width:110px}
.empty-seat{width:54px;height:54px;border-radius:50%;border-color:rgba(255,236,170,.18)}
/* bets: gold pills with a chip icon */
.betchip{background:linear-gradient(#ffe7a6,#d9a43a);color:#3a2500;border:1px solid #fff0b8;box-shadow:0 2px 6px rgba(0,0,0,.55);padding:2px 10px 2px 3px;font-weight:800;border-radius:999px}
.betchip::before{display:none}
.chipico{width:16px;height:16px;border-radius:50%;flex:none;background:radial-gradient(#fff 0 27%,#c0262d 29% 57%,#fff 59% 67%,#c0262d 69%);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.badge{border:2px solid rgba(0,0,0,.35)}
/* action bar */
.actions{background:linear-gradient(rgba(14,8,24,.55),rgba(10,5,18,.94));border-top:1px solid rgba(216,178,94,.35)}
.act-info{color:#cdb98f}
.btn.act{border-radius:999px;box-shadow:inset 0 2px 2px rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.5);font-weight:800}
.btn.fold{background:linear-gradient(#b8323a,#6e1419);border-color:#e0646b}
.btn.call{background:linear-gradient(#3a7fd8,#1b437f);border-color:#6fa8f0}
.btn.raise{background:linear-gradient(#f0c254,#a06d0f);border-color:#ffe39a;color:#2a1a00}
.actions .btn.tiny,.actions .btn.small{border-radius:999px;background:rgba(40,24,60,.9);border-color:rgba(216,178,94,.4)}
.main-alert{margin:4px 16px}
/* phones */
@media (max-width:700px){
  .hud{flex-wrap:wrap;padding:6px 8px 0;gap:6px}
  .hud-c{order:3;flex-basis:100%}
  .hud .clock{gap:3px;width:100%;justify-content:center}
  .hud .ck{padding:1px 7px}
  .hud-bal{display:none}
  .rbtn{width:38px;height:38px;font-size:15px}.rbtn svg{width:18px;height:18px}.rbtn.coin .coin-face{font-size:17px}
  .tabs-row{padding:0 8px}
  .seat{width:74px;--av:34px}
  .seat.me{--av:42px}
  .seat .plate{min-width:62px;max-width:76px;padding:2px 4px;margin-top:-8px;border-radius:8px}
  .seat .nm{font-size:10px}.seat .ch{font-size:11px}
  .seat .la{font-size:9px;padding:0 5px;top:-8px}
  .seat.me .plate{min-width:76px}
  .avring{padding:3px;width:calc(var(--av) + 6px);height:calc(var(--av) + 6px)}
  .betchip{font-size:11px;padding:1px 7px 1px 2px}.chipico{width:12px;height:12px}
  .dealer-tray{width:12%}
  .empty-seat{width:36px;height:36px}
}
/* restyle pass 2: opponents' cards tucked small beside the avatar; hero ring sits over its big cards */
.table{--sf:.042}
.seat:not(.me) .cards{position:absolute;left:calc(50% + var(--av) * .22);top:calc(var(--av) * -.05);margin:0;height:auto;z-index:3}
.seat:not(.me) .cards .card:first-child{transform:rotate(-6deg)}
.seat:not(.me) .cards .card:last-child:not(:first-child){transform:rotate(10deg) translate(-40%,1px)}
.seat.me .cards{z-index:1;margin-bottom:calc(var(--mw) * -.3)}
.seat.me .avring{z-index:3}
.seat.me{--av:58px}
.table-wrap{padding:84px 90px 104px}
@media (max-height:820px){.table-wrap{padding:80px 90px 100px}}
@media (max-width:700px) and (orientation:portrait){.table{--sf:.075}.table-wrap{padding:70px 4px 92px}}
@media (max-width:700px) and (orientation:portrait) and (max-height:800px){.table-wrap{padding:60px 2px 80px}}
@media (max-height:820px){.table-wrap{padding:76px 90px 108px}}
.dealer-tray{width:16%;height:calc(var(--rail) * 1.35);top:calc(-1.05 * var(--rail))}
@media (max-width:700px){.dealer-tray{width:13%}}
.seat.side-l .cards{left:auto;right:calc(50% + var(--av) * .22)}
.seat.side-l .cards .card:first-child{transform:rotate(-10deg) translate(40%,1px)}
.seat.side-l .cards .card:last-child:not(:first-child){transform:rotate(6deg)}
@media (max-width:700px){.seat.me{--av:40px}}
/* phones: opponents' hole cards become a small fan tucked at the avatar's lower edge so names/avatars stay visible */
@media (max-width:700px){
  .seat:not(.me){--sw:19px}
  .seat:not(.me) .cards,.seat.side-l .cards{left:calc(50% + var(--av) * .18);right:auto;top:calc(var(--av) * .28)}
  .seat.side-l .cards{left:auto;right:calc(50% + var(--av) * .18)}
}