:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#eef3f7;background:#050a0e;color-scheme:dark;--panel:#0d1821ee;--line:#253845;--muted:#91a4b3;--gold:#d6a84d;--green:#15704d;--blue:#257db1} *{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 12%,#17384a 0,#09141d 38%,#04090d 78%);overflow-x:hidden}button,input,select{font:inherit}.shell{max-width:1320px;margin:auto;padding:20px}.brandrow{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.brand{display:flex;align-items:center;gap:12px}.chiplogo{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#a92f2f;border:5px dashed #fff;font-weight:900}.brand h1{font-size:25px;margin:0}.accountbar{display:flex;align-items:center;gap:10px}.muted{color:var(--muted)}.mini{font-size:11px}.smalltext{font-size:11px;word-break:break-all}.panel,.hostpanel,.fairbox{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 15px 50px #0007}.hero{min-height:420px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(150deg,#102636ee,#0b1720ee)}.hero h2{font-size:42px;line-height:1.05;margin:10px 0;max-width:760px}.hero p{font-size:17px;color:#b9c7d0;max-width:620px}.eyebrow{font-size:12px;letter-spacing:.2em;color:#d9b765;font-weight:900}.featurechips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.featurechips span,.badge{background:#132733;border:1px solid #2a414f;border-radius:999px;padding:7px 11px;font-size:12px}.authgrid,.grid2{display:grid;grid-template-columns:1.35fr .85fr;gap:18px}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field.full,.wide{grid-column:1/-1}label{font-size:13px;color:#b8c6d0}input,select{border:1px solid #314957;background:#07131b;color:#fff;border-radius:10px;padding:11px 12px;outline:none}input:focus,select:focus{border-color:#75b9df}.btn{border:0;border-radius:11px;padding:11px 15px;background:var(--blue);color:#fff;font-weight:800;cursor:pointer;transition:transform .12s ease,filter .12s ease}.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}.btn.secondary{background:#243846}.btn.danger{background:#973b3b}.btn.good{background:#287f5a}.btn.gold{background:#a97824}.btn.small{padding:8px 11px;font-size:12px}.iconbtn{border:0;background:#1b2c37;color:#fff;border-radius:9px;padding:8px;cursor:pointer}.tabs{display:flex;gap:8px;margin-bottom:14px}.tabs button{flex:1}.or{height:38px;display:flex;align-items:center;justify-content:center;color:#748896}.code{font:900 31px ui-monospace,monospace;letter-spacing:6px}.lobby-list,.gamecards{display:grid;gap:8px;margin:14px 0}.person,.gamecard{display:flex;justify-content:space-between;align-items:center;background:#07131b;border:1px solid #142733;border-radius:10px;padding:10px 12px;color:#fff}.gamecard{flex-direction:column;align-items:flex-start;cursor:pointer;text-align:left}.gamecard span{font-size:12px;color:var(--muted);margin-top:3px}.recentTitle{margin-top:28px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.topbar{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:15px}.hostvote{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:#101f29;border-radius:14px;padding:14px;margin:16px 0}.votecontrols{display:flex;gap:8px;flex-wrap:wrap}.connected{color:#65d69a;font-size:12px}.disconnected{color:#df9a64;font-size:12px}.onlineDot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#53646e;margin-right:6px}.onlineDot.on{background:#58d190;box-shadow:0 0 8px #58d190}.tablewrap{position:relative;min-height:930px;overflow:visible;padding-bottom:170px}.poker-table{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(920px,84vw);height:455px;border-radius:50%;background:radial-gradient(circle,#14734e,#0b5238 56%,#063c29);border:20px solid #3a2518;box-shadow:inset 0 0 0 5px #98673e,inset 0 0 70px #001b12aa,0 22px 55px #000b}.feltlogo{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);text-align:center;letter-spacing:.25em;color:#ffffff20;font-size:23px;font-weight:900}.feltlogo small{font-size:11px}.felt-center{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:15px;pointer-events:none}.board{display:flex;gap:7px;min-height:76px}.card{width:54px;height:76px;border-radius:7px;background:#fff;color:#15191d;display:flex;flex-direction:column;justify-content:space-between;padding:5px;font-weight:900;font-size:19px;box-shadow:0 2px 6px #0007;transform-origin:center}.card.red{color:#c73737}.cardsuit{align-self:flex-end}.card.back{background:repeating-linear-gradient(45deg,#173f72,#173f72 5px,#0b2543 5px,#0b2543 10px);border:3px solid #e6edf3;color:#ffffff99;align-items:center;justify-content:center}.dealanim{animation:deal .34s cubic-bezier(.18,.75,.3,1) both}.pot{background:#07131bd9;padding:7px 12px;border-radius:999px;font-weight:800}.street{font-size:12px;letter-spacing:.15em}.seat{position:absolute;width:148px;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.seat.povseat{width:168px}.poker-table.dense .seat{width:132px}.poker-table.dense .seat.povseat{width:154px}.seatbox{background:#0a151def;border:2px solid #355064;border-radius:18px;padding:7px 9px 9px;box-shadow:0 4px 14px #0008;transition:transform .16s ease,box-shadow .16s ease;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:148px}.seat.povseat .seatbox{padding:9px 11px 10px;min-height:178px}.poker-table.dense .seatbox{min-height:136px;padding:6px 7px 8px}.poker-table.dense .seat.povseat .seatbox{min-height:164px}.seat.me .seatbox{border-color:#e9b34b;box-shadow:0 0 0 3px rgba(233,179,75,.2),0 8px 18px #0009}.seat.turn .seatbox{box-shadow:0 0 0 3px #f5d26a,0 4px 16px #0008;transform:scale(1.035)}.seat.folded{opacity:.45}.seat.away{opacity:.55}.seat.open{opacity:.4}.name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.stack{font-size:13px;color:#c3d1da}.bet{font-size:12px;color:#f0cd75}.allin{display:inline-block;font-size:10px;background:#912f2f;border-radius:999px;padding:2px 7px;margin-top:3px}.hole{display:flex;justify-content:center;gap:4px;margin-top:5px;position:relative;z-index:2}.hole .card{width:36px;height:50px;font-size:13px}.myhole{margin-top:9px;z-index:55}.myhole .card{width:48px;height:68px;font-size:17px}.dealer{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#eee;color:#111;font-size:11px;font-weight:900;margin-left:4px}.hostcrown{color:#eac05b;margin-left:4px}.actionbar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:100;width:min(980px,96vw);background:#0b1821f7;border:1px solid #3b5260;border-radius:14px;padding:12px;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;box-shadow:0 10px 30px #0009;pointer-events:auto}.raisegroup{display:flex;gap:7px;align-items:center}.raisegroup input[type=range]{width:180px;padding:0}.raisegroup input[type=number]{width:105px}.statusline{text-align:center;color:#c9d4dc;min-height:24px}.toast{position:fixed;right:18px;top:18px;background:#802f2f;border:1px solid #b95c5c;color:white;padding:12px 14px;border-radius:10px;z-index:50;box-shadow:0 10px 30px #0008}.tourney{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}.result{background:#1b2b22;border:1px solid #315541;border-radius:10px;padding:9px 12px;margin:8px 0;color:#d9f1df}.belowgrid{display:grid;grid-template-columns:.75fr 1.25fr;gap:14px}.belowgrid.withhost{align-items:start}.fairbox{font-size:12px}.fairbox>*{margin-right:8px}.verifyresult{font-weight:800}.goodtext{color:#6ed79f}.badtext{color:#ef7b7b}.hostpanel{padding:14px}.hostpanel.minimized{padding:12px}.compacthost{margin-bottom:10px}.hosttitle{display:flex;justify-content:space-between;gap:12px;margin-bottom:11px}.hosttitle span,.hostnote{font-size:11px;color:var(--muted)}.hostgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}.historylist{display:grid;gap:9px}.historyitem{background:#08141c;border:1px solid #203541;border-radius:11px;padding:10px 12px}.historyitem summary{cursor:pointer}.historybody{font-size:13px;color:#c2ced6;padding-top:10px}.ledger{display:grid;gap:6px;font-size:12px;color:#b9c7cf}.nomargin{margin:0}.footer{font-size:12px;color:#738592;margin-top:18px;text-align:center}@keyframes deal{0%{opacity:0;transform:translateY(-34px) scale(.72) rotate(-8deg)}65%{opacity:1;transform:translateY(3px) scale(1.04) rotate(1deg)}100%{opacity:1;transform:none}} @media(max-width:960px){.authgrid,.grid2,.belowgrid{grid-template-columns:1fr}.hostgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{min-height:280px}.hero h2{font-size:32px}.poker-table{width:84vw;height:390px}.tablewrap{min-height:690px;padding-bottom:110px}.seat{width:118px}.seat.povseat{width:144px}.seatbox{padding:6px 8px 8px;min-height:140px}.seat.povseat .seatbox{min-height:164px}.name{font-size:12px}.stack{font-size:11px}.card{width:42px;height:60px;font-size:15px}.board{min-height:60px}.hostvote{grid-template-columns:1fr}.seatavatar{width:58px;height:58px}.seat.povseat .seatavatar{width:70px;height:70px}.myhole .card{width:40px;height:56px;font-size:14px}} @media(max-width:620px){.shell{padding:12px}.brandrow,.topbar{flex-direction:column}.accountbar{width:100%;justify-content:flex-end}.formgrid,.hostgrid{grid-template-columns:1fr}.field.full,.wide{grid-column:auto}.poker-table{width:88vw;height:325px;border-width:13px;top:41%}.tablewrap{min-height:600px;padding-bottom:105px}.seat{width:88px}.seat.povseat{width:118px}.seatbox{padding:5px;min-height:108px;border-radius:14px}.seat.povseat .seatbox{min-height:132px}.hole .card{width:24px;height:34px;font-size:9px}.myhole .card{width:34px;height:48px;font-size:12px}.board .card{width:36px;height:52px}.actionbar{bottom:10px}.raisegroup{width:100%;justify-content:center}.hero h2{font-size:27px}.seatavatar{width:42px;height:42px;padding:2px}.seat.povseat .seatavatar{width:56px;height:56px}.feltlogo{font-size:17px}} .settlement{border-top:1px solid rgba(255,255,255,.09);padding-top:14px;margin-top:4px}.settlement h3{margin:0 0 4px}.settlementlist{display:grid;gap:8px;margin-top:10px}.settlementrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.045)}.settlementrow span:first-child{display:flex;flex-direction:column;gap:2px}.settlementrow small{color:var(--muted)}.paidbadge{font-size:12px;font-weight:800;letter-spacing:.08em;color:#8ce99a}.payoutBtn{white-space:nowrap} .playeravatar{display:inline-grid;place-items:center;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 30% 30%,#1e3542,#102029 68%);border:3px solid #5b7484;box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),0 5px 15px rgba(0,0,0,.35);flex:0 0 auto}.playeravatar svg,.playeravatar img{display:block;width:100%;height:100%;object-fit:contain}.accountavatar{width:44px;height:44px}.avatarbutton{border:0;background:transparent;padding:0;border-radius:50%;cursor:pointer}.avatarbutton:hover .playeravatar{border-color:#e4b75c;box-shadow:0 0 0 2px #e4b75c33,0 5px 15px rgba(0,0,0,.35)}.avatarwrap{display:flex;justify-content:center;width:100%}.seatavatar{width:96px;height:96px;margin:0 auto 6px;border-width:4px;padding:5px}.seat.povseat .seatavatar{width:120px;height:120px}.poker-table.dense .seatavatar{width:78px;height:78px}.poker-table.dense .seat.povseat .seatavatar{width:104px;height:104px}.miniavatar{width:34px;height:34px}.pregame{margin:0 0 14px;background:#0d1821ee;border:1px solid #253845;border-radius:18px;padding:16px;box-shadow:0 15px 50px #0005}.pregamehead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.pregamehead h3{margin:4px 0}.codebox{display:flex;flex-direction:column;align-items:flex-end;background:#07131b;border:1px solid #253845;border-radius:12px;padding:10px 14px;min-width:150px}.codebox small{font-size:10px;color:var(--muted);letter-spacing:.12em}.codebox strong{font:900 24px ui-monospace,monospace;letter-spacing:4px}.pregameplayers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:12px 0}.pregameplayer{display:flex;align-items:center;gap:9px;background:#07131b;border:1px solid #182c38;border-radius:11px;padding:8px 10px}.pregameplayer>span:last-child{display:flex;flex-direction:column;min-width:0}.pregameplayer strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pregameplayer small{color:var(--muted);font-size:11px}.pregameactions{margin-top:10px} @media(max-width:620px){.pregamehead{flex-direction:column}.codebox{align-items:flex-start}.accountbar>span:not(.playeravatar){max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}} /* v2.2 live-table flow */ .startbudget{margin-top:14px;padding:14px;border-radius:14px;background:#07131b;border:1px solid #27404e}.startbudget h3{margin:0 0 4px}.budgetgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.budgetrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0d1c25;border:1px solid #1e3441;border-radius:11px;padding:8px 10px}.budgetrow>span{display:flex;align-items:center;gap:8px;min-width:0}.budgetrow strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.budgetrow input{width:110px;text-align:right}.startgame{width:100%;font-size:15px}.blindmarker{display:inline-grid;place-items:center;min-width:23px;height:20px;border-radius:999px;background:#263c4a;color:#d7e3ea;font-size:9px;font-weight:900;margin-left:3px;padding:0 4px}.pendingchips{font-size:10px;color:#f0cd75;margin-top:2px}.turnprompt{font-size:11px;font-weight:1000;letter-spacing:.14em;color:#f7d778;margin-right:3px}.showdownbar{gap:14px}.potfly{position:absolute;left:50%;top:50%;z-index:20;pointer-events:none;animation:potfly 1.15s cubic-bezier(.2,.7,.2,1) forwards}.potfly span{display:block;transform:translate(-50%,-50%);background:#f0c85d;color:#17202a;border:2px solid #fff4b5;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:1000;box-shadow:0 5px 15px #0008}@keyframes potfly{0%{left:50%;top:50%;opacity:1;transform:scale(.85)}45%{opacity:1;transform:scale(1.08)}100%{left:var(--target-left);top:var(--target-top);opacity:0;transform:scale(.65)}} @media(max-width:620px){.budgetgrid{grid-template-columns:1fr}.budgetrow input{width:100px}.turnprompt{width:100%;text-align:center}} .modalbackdrop{position:fixed;inset:0;background:rgba(2,8,12,.72);display:grid;place-items:center;z-index:70;padding:18px}.modal{width:min(960px,96vw);max-height:min(88vh,900px);overflow:auto;background:#0c1820;border:1px solid #2a3c48;border-radius:18px;padding:18px;box-shadow:0 20px 60px #0009}.modalhead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px}.modalhead h3{margin:0 0 4px}.avatarpickergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0 16px}.presetcard{appearance:none;background:#09141b;border:1px solid #213640;border-radius:16px;color:#fff;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;text-align:center}.presetcard:hover{transform:translateY(-1px);border-color:#d8ab4f}.presetcard.selected{border-color:#f0c85d;box-shadow:0 0 0 2px rgba(240,200,93,.2)}.presetavatar{width:78px;height:78px;border-width:2px}.presetcard strong{font-size:13px;line-height:1.2} @media(max-width:960px){ .seatavatar{width:58px;height:58px;padding:3px} .seat.povseat .seatavatar{width:70px;height:70px} } @media(max-width:620px){ .seatavatar{width:42px;height:42px;padding:2px} .seat.povseat .seatavatar{width:56px;height:56px} } .poker-table.dense .name{font-size:12px}.poker-table.dense .stack{font-size:12px}.poker-table.dense .hole .card{width:32px;height:45px;font-size:11px}.poker-table.dense .myhole .card{width:42px;height:59px;font-size:14px} @media(max-width:960px){ .actionbar{z-index:120} .poker-table.dense .seat{width:104px} .poker-table.dense .seat.povseat{width:130px} .poker-table.dense .seatavatar{width:50px;height:50px} .poker-table.dense .seat.povseat .seatavatar{width:66px;height:66px} .poker-table.dense .seatbox{min-height:110px} .poker-table.dense .seat.povseat .seatbox{min-height:150px} } @media(max-width:620px){ .actionbar{z-index:140;bottom:4px;padding:9px 8px} .poker-table.dense .seat{width:66px} .poker-table.dense .seat.povseat{width:92px} .poker-table.dense .seatavatar{width:34px;height:34px} .poker-table.dense .seat.povseat .seatavatar{width:48px;height:48px} .poker-table.dense .seatbox{min-height:84px;padding:2px} .poker-table.dense .seat.povseat .seatbox{min-height:112px} .poker-table.dense .name{font-size:9px} .poker-table.dense .stack{font-size:9px} .poker-table.dense .hole .card{width:20px;height:29px;font-size:8px} .poker-table.dense .myhole .card{width:30px;height:43px;font-size:10px} } @media(max-width:620px){ .poker-table.dense .seat{width:50px} .poker-table.dense .seat.povseat{width:74px} .poker-table.dense .seatbox{min-height:58px;padding:1px;border-radius:0;gap:0} .poker-table.dense .seat.povseat .seatbox{min-height:92px;padding:2px} .poker-table.dense .seatavatar{width:25px;height:25px;padding:1px;border-width:1px;margin-bottom:1px} .poker-table.dense .seat.povseat .seatavatar{width:38px;height:38px} .poker-table.dense .name,.poker-table.dense .stack,.poker-table.dense .bet,.poker-table.dense .pendingchips{font-size:7px} .poker-table.dense .dealer,.poker-table.dense .blindmarker{transform:scale(.7);margin-left:0} .poker-table.dense .hole{gap:1px;margin-top:1px} .poker-table.dense .hole .card{width:14px;height:21px;font-size:6px;padding:1px;border-radius:3px} .poker-table.dense .myhole .card{width:22px;height:32px;font-size:8px} } /* v2.4.3 poker-chip table presentation */ .poker-table{overflow:visible} .seat.povseat{width:168px} .seat.povseat .seatbox{min-height:176px} .player-chip-rack{height:34px;display:flex;align-items:flex-end;justify-content:center;margin:2px 0 4px;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))} .chip-pile{display:inline-flex;align-items:flex-end;justify-content:center;gap:3px;position:relative;vertical-align:middle;min-width:18px;height:34px} .chip-pile.stack{height:32px} .chip-pile.bet{height:32px} .chip-pile.pot{height:42px;transform:scale(1.18);transform-origin:center bottom} .chipcolumn{display:inline-block;position:relative;width:20px;height:34px} .pokerchip{position:absolute;left:1px;bottom:calc(var(--chip-i) * 4px);width:18px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.92);box-shadow:0 2px 0 rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.22);background:var(--chip-main,#888)} .pokerchip::before,.pokerchip::after{content:'';position:absolute;top:1px;bottom:1px;width:3px;border-radius:2px;background:rgba(255,255,255,.88)} .pokerchip::before{left:3px}.pokerchip::after{right:3px} .pokerchip.red{--chip-main:linear-gradient(180deg,#d75757,#a91f1f)} .pokerchip.green{--chip-main:linear-gradient(180deg,#3ecf77,#0d8b4d)} .pokerchip.blue{--chip-main:linear-gradient(180deg,#59a6ff,#255fbf)} .pokerchip.yellow{--chip-main:linear-gradient(180deg,#ffe36e,#d2a800)} .pokerchip.orange{--chip-main:linear-gradient(180deg,#ffb067,#dd6e11)} .pokerchip.black{--chip-main:linear-gradient(180deg,#666b73,#1f242c)} .betspot{position:absolute;transform:translate(-50%,-50%);z-index:34;display:flex;align-items:center;gap:7px;background:transparent;border:none;border-radius:999px;padding:0;min-width:58px;justify-content:center;pointer-events:none} .betspot strong{font-size:12px;color:#fff7d0;text-shadow:0 2px 6px #000;background:rgba(6,17,25,.82);padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12)} .betchips{display:flex;align-items:flex-end;height:24px} .betspot.betmove{animation:chipsToBet .48s cubic-bezier(.18,.78,.28,1) both} @keyframes chipsToBet{0%{left:var(--from-left);top:var(--from-top);opacity:.1;transform:translate(-50%,-50%) scale(.7)}75%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{left:var(--to-left);top:var(--to-top);opacity:1;transform:translate(-50%,-50%) scale(1)}} .chip-sweep{position:absolute;left:var(--from-left);top:var(--from-top);z-index:36;transform:translate(-50%,-50%);pointer-events:none;animation:sweepToPot .72s cubic-bezier(.2,.72,.24,1) both} @keyframes sweepToPot{0%{left:var(--from-left);top:var(--from-top);opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{left:50%;top:55%;opacity:0;transform:translate(-50%,-50%) scale(.75)}} .pot-zone{display:grid;place-items:center;gap:4px;min-height:62px;position:relative} .centerchips{min-height:44px;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))} .totalpot{font-size:14px;padding:8px 14px;background:#061119ee;border:1px solid #314955;box-shadow:0 4px 12px #0006} .potbreakdown{font-size:10px;color:#afc0cb;background:#07131bb8;border-radius:999px;padding:3px 7px} .pot-zone.collecting .centerchips{animation:potCollectPulse .75s ease-out} @keyframes potCollectPulse{0%,100%{transform:scale(1)}65%{transform:scale(1.16)}} /* Keep the POV player style separate from the landing-page .hero class. */ .seat.povseat{min-height:0;display:block;background:transparent} .actionbar{z-index:180} @media(max-width:960px){ .tablewrap{min-height:820px;padding-bottom:155px} .poker-table{top:48%} .seat.povseat{width:144px} .betspot{padding:2px 6px;gap:4px;min-width:48px} .betspot strong{font-size:10px} .player-chip-rack{height:20px} .chip-pile.stack{height:32px} } @media(max-width:620px){ .tablewrap{min-height:710px;padding-bottom:145px} .poker-table{top:45%} .seat.povseat{width:104px} .betspot{padding:1px 4px;min-width:38px;gap:2px} .betspot strong{font-size:8px} .betchips{transform:scale(.72);transform-origin:center} .player-chip-rack{height:16px} .chip-pile.stack{height:32px} .potbreakdown{display:none} .raisegroup{gap:4px} #potBet{padding:7px 8px;font-size:10px} } /* v2.4.4 visual polish: no player boxes, larger avatars, denomination chip colors */ .seat{width:138px} .seat.povseat{width:176px} .seatbox, .seat.me .seatbox, .seat.turn .seatbox, .poker-table.dense .seatbox, .poker-table.dense .seat.povseat .seatbox{ background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; } .seatbox{min-height:132px;gap:3px} .seat.povseat .seatbox{min-height:176px} .poker-table.dense .seatbox{min-height:110px} .poker-table.dense .seat.povseat .seatbox{min-height:150px} .name{font-size:17px;text-shadow:0 2px 8px rgba(0,0,0,.78)} .stack{font-size:14px;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.78)} .bet{font-size:12px;text-shadow:0 2px 8px rgba(0,0,0,.78)} .avatarwrap{margin-bottom:2px} .seatavatar{width:100px;height:100px;border-width:4px;padding:5px;background:radial-gradient(circle at 30% 30%,#274556,#11232c 70%)} .seat.povseat .seatavatar{width:128px;height:128px} .poker-table.dense .seatavatar{width:78px;height:78px} .poker-table.dense .seat.povseat .seatavatar{width:104px;height:104px} .player-chip-rack{height:36px;margin:3px 0 6px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.32))} .chip-pile{gap:4px;min-width:20px;height:36px} .chip-pile.stack{height:34px} .chip-pile.bet{height:34px} .chip-pile.pot{height:44px;transform:scale(1.2);transform-origin:center bottom} .chipcolumn{width:20px;height:36px} .pokerchip{left:1px;bottom:calc(var(--chip-i) * 4px);width:18px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.92);box-shadow:0 2px 0 rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.22);background:var(--chip-main,#888)} .pokerchip::before,.pokerchip::after{content:'';position:absolute;top:1px;bottom:1px;width:3px;border-radius:2px;background:rgba(255,255,255,.88)} .pokerchip::before{left:3px}.pokerchip::after{right:3px} .pokerchip.red{--chip-main:linear-gradient(180deg,#dd6767,#ab1f1f)} .pokerchip.green{--chip-main:linear-gradient(180deg,#41d47c,#0e8b4d)} .pokerchip.blue{--chip-main:linear-gradient(180deg,#69b4ff,#265fc1)} .pokerchip.yellow{--chip-main:linear-gradient(180deg,#ffe97b,#d8ab00)} .pokerchip.orange{--chip-main:linear-gradient(180deg,#ffb16b,#e27513)} .pokerchip.black{--chip-main:linear-gradient(180deg,#727780,#1d232b)} .betspot{background:transparent;border:none;box-shadow:none;gap:8px;padding:0} .betspot strong{font-size:12px;color:#fff7d0;text-shadow:0 2px 6px #000;background:rgba(6,17,25,.82);padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12)} .centerchips{min-height:46px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))} .totalpot{padding:8px 14px} @media(max-width:960px){ .seatavatar{width:74px;height:74px;padding:4px} .seat.povseat .seatavatar{width:96px;height:96px} .name{font-size:13px} } @media(max-width:620px){ .seatavatar{width:58px;height:58px;padding:3px} .seat.povseat .seatavatar{width:80px;height:80px} .name{font-size:11px} .stack,.bet{font-size:10px} .player-chip-rack{height:20px;margin:2px 0 4px} .chip-pile,.chip-pile.stack,.chip-pile.bet{height:22px} .chipcolumn{width:14px;height:22px} .pokerchip{width:12px;height:7px;bottom:calc(var(--chip-i) * 3px)} .pokerchip::before,.pokerchip::after{width:2px} .pokerchip::before{left:2px}.pokerchip::after{right:2px} } /* v2.4.5 seating, action bar, exact chip stacks, and card-face refinements */ .tablewrap{min-height:1020px !important;padding-bottom:235px !important} .poker-table{top:42% !important} .actionbar{bottom:-64px !important;width:min(1040px,96vw) !important} /* Move player presentation fully off the rail */ .seat{width:144px !important} .seat.povseat{width:188px !important} .seatbox, .seat.me .seatbox, .seat.turn .seatbox, .poker-table.dense .seatbox, .poker-table.dense .seat.povseat .seatbox{background:transparent !important;border:none !important;box-shadow:none !important} .seatbox{min-height:146px !important} .seat.povseat .seatbox{min-height:198px !important} .poker-table.dense .seatbox{min-height:122px !important} .poker-table.dense .seat.povseat .seatbox{min-height:160px !important} .avatarwrap{margin-bottom:4px !important} .seatavatar{width:108px !important;height:108px !important} .seat.povseat .seatavatar{width:136px !important;height:136px !important} .poker-table.dense .seatavatar{width:84px !important;height:84px !important} .poker-table.dense .seat.povseat .seatavatar{width:112px !important;height:112px !important} .name{font-size:18px !important} .stack{font-size:15px !important} .player-chip-rack{height:40px !important;overflow:visible} /* Better exact chip stacks */ .chip-pile{display:inline-flex;align-items:flex-end;justify-content:center;gap:4px;flex-wrap:nowrap;max-width:140px} .chip-pile.bet{max-width:none} .chip-pile.pot{max-width:180px} .chipcolumn{width:20px !important;height:40px !important} .pokerchip{bottom:calc(var(--chip-i) * 4px) !important;width:18px !important;height:10px !important} .centerchips{min-height:54px !important} .pot-zone{gap:6px !important} .betspot{gap:8px !important} .betchips{min-width:24px} /* Modern card styling with suit TL/BR and rank TR */ .card.moderncard{position:relative;overflow:hidden;padding:0;background:linear-gradient(180deg,#fffefc,#f2f2ee);border:1px solid rgba(0,0,0,.22)} .card.moderncard .corner{position:absolute;line-height:1;font-weight:900;z-index:3} .card.moderncard .corner.tl{left:5px;top:5px;font-size:17px} .card.moderncard .corner.tr{right:5px;top:4px;font-size:15px;letter-spacing:.02em} .card.moderncard .corner.br{right:5px;bottom:5px;font-size:17px} .card.moderncard .cardpip{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;opacity:.92} .card.moderncard .cardface{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:72%;height:72%;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(235,236,240,.88));border:1px solid rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)} .card.moderncard .faceicon{font-size:21px;line-height:1} .card.moderncard .facename{font-size:8px;font-weight:1000;letter-spacing:.08em} .card.moderncard.red .cardface{background:linear-gradient(180deg,#fff8f8,#f6e8e8)} .card.moderncard.red .faceicon,.card.moderncard.red .facename{color:#b12c2c} .card.moderncard:not(.red) .faceicon,.card.moderncard:not(.red) .facename{color:#1c2430} .cardsuit{display:none !important} .hole .card.moderncard{width:42px;height:58px} .myhole .card.moderncard{width:52px;height:74px} .board .card.moderncard{width:58px;height:82px} .board .card.moderncard .corner.tl,.board .card.moderncard .corner.br{font-size:20px} .board .card.moderncard .corner.tr{font-size:17px} .board .card.moderncard .cardpip{font-size:34px} .board .card.moderncard .faceicon{font-size:27px} .board .card.moderncard .facename{font-size:9px} @media(max-width:960px){ .tablewrap{min-height:860px !important;padding-bottom:190px !important} .poker-table{top:40% !important} .actionbar{bottom:-52px !important} .seatavatar{width:82px !important;height:82px !important} .seat.povseat .seatavatar{width:108px !important;height:108px !important} .chip-pile{max-width:110px} } @media(max-width:620px){ .tablewrap{min-height:700px !important;padding-bottom:140px !important} .poker-table{top:37% !important} .actionbar{bottom:-38px !important;padding:10px !important} .seat{width:96px !important}.seat.povseat{width:126px !important} .seatavatar{width:62px !important;height:62px !important} .seat.povseat .seatavatar{width:84px !important;height:84px !important} .name{font-size:12px !important}.stack{font-size:11px !important} .chip-pile{max-width:72px;gap:2px}.chipcolumn{width:13px !important;height:24px !important}.pokerchip{width:11px !important;height:6px !important;bottom:calc(var(--chip-i) * 2px) !important} .hole .card.moderncard{width:30px;height:42px}.myhole .card.moderncard{width:40px;height:57px}.board .card.moderncard{width:38px;height:55px} .card.moderncard .corner.tl,.card.moderncard .corner.br{font-size:12px}.card.moderncard .corner.tr{font-size:11px}.card.moderncard .cardpip{font-size:19px}.card.moderncard .faceicon{font-size:15px}.card.moderncard .facename{font-size:6px} } /* v2.4.6 chat rail and showdown summaries */ .roomlayout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start} .tablecol{min-width:0} .chatpanel{background:rgba(8,18,30,.88);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.26);position:sticky;top:14px;min-height:760px;display:flex;flex-direction:column} .chatheader{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px} .chatmessages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px;min-height:320px;max-height:760px} .chatmsg{border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)} .chatmsg.playerchat{background:rgba(12,34,53,.78)} .chatmsg.systemchat{background:rgba(29,21,8,.5)} .chatmsg.winnerchat{border-color:rgba(234,194,82,.46);box-shadow:0 0 0 1px rgba(234,194,82,.16) inset} .chatmeta{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;margin-bottom:6px;color:#f3f7fd} .systemmeta{color:#f3d889} .systemdot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:999px;background:rgba(234,194,82,.18);font-size:10px} .chatavatar{width:28px !important;height:28px !important;flex:0 0 28px;border-width:2px !important} .chattext{font-size:13px;line-height:1.45;color:#eaf1fa;word-wrap:break-word} .chatline+.chatline{margin-top:4px} .chatline.highlight:last-child{color:#ffe59a;font-weight:800} .chatcomposer{padding-top:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px} .chatcomposer textarea{width:100%;resize:none;min-height:76px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.22);color:#fff;padding:10px 12px;font:inherit} .chatactions{display:flex;align-items:center;justify-content:space-between;gap:8px} @media(max-width:1200px){ .roomlayout{grid-template-columns:1fr} .chatpanel{position:static;min-height:0} .chatmessages{max-height:360px} } /* v2.4.7 lobby-first navigation, host drawer, safer table layout, face cards */ .brandlogo{width:58px;height:58px;border-radius:50%;object-fit:contain;border:3px solid #d6ad50;background:#10202a;box-shadow:0 5px 18px rgba(0,0,0,.35)} .lobbylanding{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:18px;align-items:start} .lobbyrooms,.createlobby{min-height:440px}.lobbyheading h2{margin:5px 0 4px}.roomtop{display:flex;justify-content:space-between;gap:12px;width:100%;align-items:center}.roomtop em{font-style:normal;font-size:10px;letter-spacing:.12em;border-radius:999px;padding:5px 8px;background:#1d6c4c;color:#eafff1}.gamecard.memberroom{border-color:#9c7b37}.gamecard.memberroom .roomtop em{background:#8b6823;color:#fff6d9}.joinbycode{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.emptylobby{display:flex;flex-direction:column;gap:4px;padding:24px;border:1px dashed #2d4553;border-radius:14px;text-align:center} .roomlayout{grid-template-columns:minmax(0,1fr) 320px !important;gap:16px !important}.tablecol{min-width:0;overflow:visible}.poker-table{width:min(900px,92%) !important}.tablewrap{min-height:930px !important;padding-bottom:170px !important}.actionbar{bottom:0 !important;width:min(940px,96%) !important;max-width:100%;z-index:220 !important}.pregame+.belowgrid{margin-top:14px} /* cards are on the felt in front of each avatar, not hanging below it */ .holefelt{position:absolute;transform:translate(-50%,-50%);display:flex;gap:5px;pointer-events:none;filter:drop-shadow(0 5px 8px rgba(0,0,0,.32))}.holefelt .card.moderncard{width:40px;height:57px}.holefelt.myholefelt{gap:6px}.holefelt.myholefelt .card.moderncard{width:54px;height:76px}.seatbox .hole,.seatbox .myhole{display:none !important} /* face cards: letter in the corner + a human portrait, no spelled-out name */ .card.moderncard .facename{display:none !important}.card.moderncard .faceicon{font-size:24px !important;filter:saturate(.92)}.board .card.moderncard .faceicon{font-size:31px !important}.holefelt.myholefelt .card.moderncard .faceicon{font-size:28px !important} /* host controls stay out of the game until the host explicitly opens them */ .hostdrawerbackdrop{position:fixed;inset:0;z-index:500;background:rgba(2,8,12,.52);display:flex;justify-content:flex-end;align-items:stretch;padding:18px}.hostdrawer{width:min(560px,96vw);height:calc(100vh - 36px);overflow:auto;background:#0a1720;border:1px solid #334c5a;border-radius:18px;padding:16px;box-shadow:0 24px 70px rgba(0,0,0,.55)}.hostdrawerhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:sticky;top:-16px;background:#0a1720;padding:16px 0 10px;z-index:2}.hostdrawerhead h3{margin:2px 0 0}.hostdrawer .hostpanel{background:transparent;border:0;box-shadow:none;padding:0}.hostdrawer .hosttitle{display:none}.hostdrawer .hostgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.hostdrawer .settlement{grid-column:1/-1} @media(max-width:1200px){.roomlayout{grid-template-columns:1fr !important}.poker-table{width:min(900px,88vw) !important}.chatpanel{position:static}.lobbylanding{grid-template-columns:1fr}} @media(max-width:760px){.joinbycode{grid-template-columns:1fr}.tablewrap{min-height:760px !important;padding-bottom:145px !important}.poker-table{width:90% !important}.actionbar{width:96% !important}.holefelt .card.moderncard{width:29px;height:42px}.holefelt.myholefelt .card.moderncard{width:40px;height:57px}.hostdrawerbackdrop{padding:8px}.hostdrawer{width:100%;height:calc(100vh - 16px)}.hostdrawer .hostgrid{grid-template-columns:1fr}.brandlogo{width:48px;height:48px}} /* v2.4.9 lobby table preview + premium Nutman card deck */ .lobbylanding{grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr) !important} .lobbysidebar{display:grid;gap:18px;align-items:start;min-width:0} .gamecard{width:100%;transition:border-color .15s ease,background .15s ease,transform .15s ease} .gamecard.selectedroom{border-color:#d5aa4d !important;background:linear-gradient(180deg,#11252e,#0b1b24);box-shadow:0 0 0 2px rgba(213,170,77,.14) inset} .roompreview{min-height:300px} .emptypreview{display:flex;flex-direction:column;justify-content:center;text-align:center} .previewhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.previewhead h3{font-size:24px;margin:5px 0 4px}.roomstatus{font-size:10px;font-weight:900;letter-spacing:.12em;border:1px solid #3d5360;border-radius:999px;padding:6px 9px;color:#b8c7d1;background:#13242e}.roomstatus.live{color:#c7f7da;border-color:#287f5a;background:#163b2d}.previewmeta{display:flex;justify-content:space-between;gap:12px;margin:16px 0 10px;color:#9fb0bb;font-size:12px}.previewplayers{display:grid;gap:7px;max-height:390px;overflow:auto}.previewplayer{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#07131b;border:1px solid #1c303b;border-radius:12px;padding:9px 10px}.previewidentity{display:flex;align-items:center;gap:9px;min-width:0}.previewidentity>span:last-child{display:flex;flex-direction:column;min-width:0}.previewidentity strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.previewidentity small{font-size:10px;color:#78909d;margin-top:2px}.previewavatar{width:38px !important;height:38px !important;border-width:2px !important}.previewstack{color:#f2d27b;white-space:nowrap;font-size:13px}.emptypreviewplayers{padding:20px;text-align:center;color:#7f929e;border:1px dashed #2b404c;border-radius:12px}.previewjoin{width:100%;margin-top:14px}.previewjoin:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}.createlobby{min-height:0 !important} /* Premium cartoon card system based on the approved Nutman deck design. */ .card.premiumcard{position:relative;overflow:hidden;padding:0;background:linear-gradient(145deg,#fffefa 0%,#f7f1e6 100%);color:#161a1d;border:1px solid #d4b36a;border-radius:8px;box-shadow:0 3px 8px rgba(0,0,0,.42),inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 0 3px rgba(176,136,55,.22)} .card.premiumcard.red{color:#c52932}.card.premiumcard::after{content:'';position:absolute;inset:3px;border:1px solid rgba(176,136,55,.38);border-radius:5px;pointer-events:none;z-index:5}.card.premiumcard .corner{position:absolute;z-index:8;line-height:1;font-family:Georgia,'Times New Roman',serif;font-weight:900;text-shadow:0 1px 0 #fff}.card.premiumcard .corner.tl{left:6px;top:6px;font-size:17px}.card.premiumcard .corner.tr{right:6px;top:5px;font-size:15px}.card.premiumcard .corner.br{right:6px;bottom:6px;font-size:17px}.card.premiumcard .acepip{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;text-shadow:0 1px 0 #fff,0 0 0 transparent}.card.premiumcard .acepip::before{content:'';position:absolute;width:42%;aspect-ratio:1;border:1px solid rgba(177,137,56,.5);border-radius:50%;box-shadow:inset 0 0 0 3px rgba(177,137,56,.08)} .pipfield{position:absolute;inset:12px 7px 10px}.pip{position:absolute;transform:translate(-50%,-50%);font-size:15px;font-weight:900;line-height:1}.pip.flip{transform:translate(-50%,-50%) rotate(180deg)} .courtframe{position:absolute;left:12%;right:12%;top:15%;bottom:12%;overflow:hidden;border:1px solid rgba(165,127,48,.55);border-radius:4px;background:#f9f4ea;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}.courtframe img{width:100%;height:100%;display:block;object-fit:cover;object-position:center} .card.premiumback{padding:0 !important;background-image:url('/assets/cards/card-back.png') !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;border:2px solid #e9d59b !important;box-shadow:0 3px 8px rgba(0,0,0,.46),inset 0 0 0 2px #102d27 !important;color:transparent !important}.premiumback .backmark{display:none} .board .card.premiumcard{width:58px;height:82px}.board .card.premiumcard .corner.tl,.board .card.premiumcard .corner.br{font-size:20px}.board .card.premiumcard .corner.tr{font-size:18px}.board .card.premiumcard .acepip{font-size:39px}.board .card.premiumcard .pip{font-size:17px} .holefelt .card.premiumcard{width:40px;height:57px}.holefelt.myholefelt .card.premiumcard{width:54px;height:76px}.holefelt .card.premiumcard .corner.tl,.holefelt .card.premiumcard .corner.br{font-size:12px}.holefelt .card.premiumcard .corner.tr{font-size:11px}.holefelt.myholefelt .card.premiumcard .corner.tl,.holefelt.myholefelt .card.premiumcard .corner.br{font-size:17px}.holefelt.myholefelt .card.premiumcard .corner.tr{font-size:15px}.holefelt .card.premiumcard .pip{font-size:10px}.holefelt.myholefelt .card.premiumcard .pip{font-size:14px}.holefelt .courtframe{left:10%;right:10%;top:18%;bottom:12%} @media(max-width:1200px){.lobbylanding{grid-template-columns:1fr !important}.lobbysidebar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.roompreview,.createlobby{min-height:100%}} @media(max-width:760px){.lobbysidebar{grid-template-columns:1fr}.previewmeta{flex-direction:column;gap:3px}.board .card.premiumcard{width:38px;height:55px}.holefelt .card.premiumcard{width:29px;height:42px}.holefelt.myholefelt .card.premiumcard{width:40px;height:57px}.card.premiumcard .corner.tl,.card.premiumcard .corner.br{font-size:11px}.card.premiumcard .corner.tr{font-size:10px}.card.premiumcard .pip{font-size:9px}.courtframe{left:8%;right:8%;top:17%;bottom:10%}} /* v2.4.10 table presentation refinements inspired by premium poker clients */ /* Seat presentation */ .seat{width:156px !important} .seat.povseat{width:196px !important} .seatbox{display:flex;flex-direction:column;align-items:center;gap:4px} .avatarwrap{margin-bottom:2px !important} .seatavatar{width:112px !important;height:112px !important;box-shadow:0 12px 28px rgba(0,0,0,.38) !important} .seat.povseat .seatavatar{width:140px !important;height:140px !important} .poker-table.dense .seatavatar{width:88px !important;height:88px !important} .poker-table.dense .seat.povseat .seatavatar{width:116px !important;height:116px !important} .nameplate{min-width:118px;max-width:170px;background:linear-gradient(180deg,#090b0f 0%,#16181d 100%);border:2px solid #45474f;border-radius:16px;padding:10px 10px 9px;box-shadow:0 10px 20px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);position:relative} .nameplate::after{content:'';position:absolute;left:10px;right:10px;bottom:6px;height:10px;border-radius:0 0 12px 12px;background:repeating-linear-gradient(90deg,#6f737b 0 3px,#3f434a 3px 6px);opacity:.45} .seat.povseat .nameplate{min-width:136px;max-width:190px} .name{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-size:14px !important;font-weight:1000;line-height:1.1;text-shadow:none !important;color:#fff} .stack{display:block;font-size:15px !important;font-weight:900;line-height:1.1;text-align:center;color:#f6e6a5 !important;text-shadow:none !important;margin-top:5px;padding-bottom:9px} .poker-table.dense .name{font-size:12px !important}.poker-table.dense .stack{font-size:13px !important} .dealer,.blindmarker,.hostcrown{position:static !important;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:900;margin:0 !important;box-shadow:none !important;vertical-align:middle} .dealer{background:#e6e6e6;color:#111}.blindmarker{background:#24323d;color:#cfd8e3}.hostcrown{background:#5b4720;color:#f0d38b} .onlineDot{margin-right:0 !important;width:8px;height:8px;flex:0 0 8px} .player-chip-rack{height:42px !important;margin:2px 0 0 !important} .pendingchips,.allin,.seat .mini{margin-top:2px} /* Hole cards pop open in front of the avatar, partially exposed like a poker client */ .holefelt{position:absolute;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.38)) !important} .holefan{position:relative;display:flex;align-items:flex-end;justify-content:center;height:82px;min-width:72px} .holdcard{position:relative} .holdcard .card{display:block} .holdcard-1{transform:rotate(-6deg) translateX(10px);z-index:1} .holdcard-2{margin-left:-28px;transform:rotate(6deg) translateX(-10px);z-index:2} .holefelt .card.premiumcard,.holefelt .card.premiumback{width:44px !important;height:62px !important;border-radius:10px} .holefelt.myholefelt .holefan{height:106px;min-width:96px} .holefelt.myholefelt .holdcard-1{transform:rotate(-7deg) translateX(12px)} .holefelt.myholefelt .holdcard-2{margin-left:-36px;transform:rotate(7deg) translateX(-12px)} .holefelt.myholefelt .card.premiumcard,.holefelt.myholefelt .card.premiumback{width:62px !important;height:88px !important} .holefelt .card.premiumcard .corner.tl,.holefelt .card.premiumcard .corner.br{font-size:13px !important} .holefelt .card.premiumcard .corner.tr{font-size:12px !important} .holefelt.myholefelt .card.premiumcard .corner.tl,.holefelt.myholefelt .card.premiumcard .corner.br{font-size:18px !important} .holefelt.myholefelt .card.premiumcard .corner.tr{font-size:16px !important} .holefelt .courtframe{left:8%;right:8%;top:16%;bottom:10%} .holefelt .card.premiumcard .pip{font-size:11px !important} .holefelt.myholefelt .card.premiumcard .pip{font-size:15px !important} .holefelt .card.premiumcard .acepip{font-size:30px} .holefelt.myholefelt .card.premiumcard .acepip{font-size:40px} /* Better bet presentation: chips pop out with values on the chips and total underneath */ .betspot{transform:translate(-50%,-50%) !important;pointer-events:none;z-index:70 !important} .betbubble{display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent} .betchips{display:flex;align-items:flex-end;justify-content:center;min-width:48px;min-height:36px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.30))} .betspot strong{font-size:13px !important;color:#fff8cf !important;background:rgba(4,16,26,.92) !important;padding:4px 10px !important;border-radius:999px !important;border:1px solid rgba(255,255,255,.14) !important;box-shadow:0 6px 12px rgba(0,0,0,.28)} .chip-pile.bet,.chip-pile.pot{gap:5px !important;max-width:none !important} .chipcolumn.labeled{position:relative;width:22px !important;padding-top:14px;height:46px !important} .chiplabel{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:9px;line-height:1;padding:1px 4px;border-radius:999px;background:#f7e2aa;color:#222;font-weight:1000;box-shadow:0 2px 6px rgba(0,0,0,.22);white-space:nowrap} .pokerchip{width:18px !important;height:10px !important;bottom:calc(var(--chip-i) * 4px) !important} .chip-pile.stack .chipcolumn{width:20px !important;height:40px !important;padding-top:0} .chip-pile.pot .chipcolumn{padding-top:14px;height:50px !important} .centerchips{min-height:54px !important} /* Make court cards more cartoon-premium and less over-detailed */ .courtframe{background:linear-gradient(180deg,#fff8ec 0%,#f5ebdd 100%) !important} .card.premiumcard{box-shadow:0 6px 16px rgba(0,0,0,.34),inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 0 3px rgba(176,136,55,.22) !important} @media(max-width:1200px){ .seatavatar{width:92px !important;height:92px !important} .seat.povseat .seatavatar{width:118px !important;height:118px !important} } @media(max-width:760px){ .seat{width:110px !important}.seat.povseat{width:138px !important} .nameplate{min-width:88px;max-width:122px;padding:7px 8px 8px} .name{font-size:11px !important}.stack{font-size:12px !important;padding-bottom:7px} .dealer,.blindmarker,.hostcrown{min-width:16px;height:16px;font-size:9px;padding:0 4px} .seatavatar{width:70px !important;height:70px !important}.seat.povseat .seatavatar{width:92px !important;height:92px !important} .holefan{height:58px;min-width:54px}.holefelt .card.premiumcard,.holefelt .card.premiumback{width:30px !important;height:43px !important}.holdcard-2{margin-left:-19px} .holefelt.myholefelt .holefan{height:78px;min-width:76px}.holefelt.myholefelt .card.premiumcard,.holefelt.myholefelt .card.premiumback{width:42px !important;height:60px !important}.holefelt.myholefelt .holdcard-2{margin-left:-26px} .chiplabel{font-size:7px;padding:1px 3px}.chipcolumn.labeled{width:16px !important;height:32px !important;padding-top:11px}.pokerchip{width:13px !important;height:7px !important;bottom:calc(var(--chip-i) * 3px) !important} } /* v2.4.12: persistent stacks are text-only; physical chips only represent committed bets/pot. */ .player-chip-rack{display:none !important} .seatbox{gap:3px !important} .nameplate{margin-bottom:0 !important} .betbubble{display:flex;flex-direction:column;align-items:center;gap:5px} .betamount{font-size:13px;font-weight:1000;line-height:1;color:#fff8cf;background:rgba(4,16,26,.94);padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);box-shadow:0 6px 14px rgba(0,0,0,.32);white-space:nowrap;text-shadow:0 1px 2px #000} .betspot strong{display:none !important} .betchips{min-height:44px !important;align-items:flex-end !important;overflow:visible} .chip-pile.bet{height:44px !important;overflow:visible} .chip-pile.bet .chipcolumn{overflow:visible} .centerchips{min-height:56px !important;overflow:visible} .pot-zone .totalpot{margin-top:5px} @media(max-width:760px){.betamount{font-size:10px;padding:4px 8px}.betchips{min-height:30px !important}.chip-pile.bet{height:30px !important}} /* v2.4.13 room naming */ .homenamefield input{font-size:17px;font-weight:800;letter-spacing:.01em} .homenamefield small{display:block;margin-top:6px} .requiredmark{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:#5b4720;color:#f5db92;font-size:9px;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle} /* v2.4.14 lobby readability + sorting */ .lobbyrooms{min-height:460px} .lobbyheading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px} .roomlisthead{display:grid;grid-template-columns:minmax(190px,1.5fr) minmax(105px,.75fr) minmax(120px,.8fr) minmax(190px,1.25fr) minmax(135px,.8fr);gap:16px;align-items:center;padding:10px 16px 8px;color:#8397a4;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid #223844} .roomsort{appearance:none;border:0;background:transparent;color:#9db0bb;font:inherit;text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:0;cursor:pointer;font-weight:900} .roomsort:hover,.roomsort.active{color:#f0cc73} .blindsort{text-align:right} .gamecards.roomlist{gap:9px;margin-top:8px} .gamecard.roomrow{display:grid !important;grid-template-columns:minmax(190px,1.5fr) minmax(105px,.75fr) minmax(120px,.8fr) minmax(190px,1.25fr) minmax(135px,.8fr);gap:16px;align-items:center;flex-direction:unset !important;text-align:left;padding:15px 16px !important;border-radius:12px;min-height:58px} .gamecard.roomrow span{margin:0 !important;color:#b6c5ce;font-size:14px !important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .roomrowname{font-size:18px;line-height:1.15;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .roomrowtype{font-weight:800;color:#d5e0e6 !important} .roomrowhost{color:#aebec8 !important} .roomrowplayers{font-size:13px !important;color:#93a8b4 !important} .roomrowblinds{text-align:right;font-size:17px;color:#f0cc73;white-space:nowrap} .gamecard.roomrow.selectedroom .roomrowname{color:#fff2c2} @media(max-width:1050px){ .roomlisthead{display:none} .gamecard.roomrow{grid-template-columns:minmax(150px,1.4fr) minmax(90px,.75fr) minmax(110px,.8fr) minmax(125px,1fr);gap:10px} .roomrowplayers{display:none} } @media(max-width:760px){ .gamecard.roomrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name blinds' 'type type' 'host host';gap:6px 12px;padding:13px 14px !important} .roomrowname{grid-area:name;font-size:17px}.roomrowblinds{grid-area:blinds;font-size:16px}.roomrowtype{grid-area:type}.roomrowhost{grid-area:host}.roomrowplayers{display:none} } /* v2.4.15 premium chip labels and slower dramatic dealing */ /* Slower general dealing */ .dealanim{animation-duration:.62s !important} @keyframes deal{0%{opacity:0;transform:translateY(-42px) scale(.68) rotate(-10deg)}58%{opacity:1;transform:translateY(6px) scale(1.04) rotate(2deg)}100%{opacity:1;transform:none}} /* Chips with denomination printed on the stack */ .chipcolumn.labeled{position:relative;padding-top:0 !important;width:24px !important;height:50px !important} .chip-pile.bet .chipcolumn.labeled,.chip-pile.pot .chipcolumn.labeled{display:flex;align-items:flex-end;justify-content:center} .chiplabel{top:auto !important;left:50%;bottom:8px;transform:translateX(-50%);min-width:14px;height:14px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:#fff9e8;color:#222 !important;font-size:8px;font-weight:1000;border:1px solid rgba(0,0,0,.18);box-shadow:0 1px 4px rgba(0,0,0,.22);z-index:3} .pokerchip{overflow:visible} .pokerchip::before,.pokerchip::after{opacity:.92} .chip-pile.bet .chipcolumn.labeled .pokerchip:last-of-type,.chip-pile.pot .chipcolumn.labeled .pokerchip:last-of-type{box-shadow:0 2px 0 rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.1)} .centerchips .chiplabel{bottom:9px} /* Board reveal drama */ .board{display:flex;gap:9px;min-height:86px;align-items:center} .boardentry{position:relative;display:block;transform-origin:center center} .boardslide{opacity:0;animation:boardslideReveal .86s cubic-bezier(.18,.8,.28,1) forwards} @keyframes boardslideReveal{0%{opacity:0;transform:translateX(-28px) translateY(-10px) scale(.82) rotate(-7deg)}45%{opacity:1;transform:translateX(6px) translateY(0) scale(1.03) rotate(1.5deg)}100%{opacity:1;transform:none}} .boardflip{opacity:0;animation:boardflipAppear .1s linear forwards} .boardflip .flipstack{position:relative;width:58px;height:82px;transform-style:preserve-3d;animation:turnRiverFlip .98s cubic-bezier(.18,.78,.22,1) forwards;animation-delay:inherit} .boardflip .flipface{position:absolute;inset:0;backface-visibility:hidden} .boardflip .flipfront{transform:rotateY(180deg)} .boardflip .flipback .card,.boardflip .flipfront .card{width:58px !important;height:82px !important} @keyframes boardflipAppear{to{opacity:1}} @keyframes turnRiverFlip{0%{transform:translateY(-14px) scale(.84) rotate(-7deg) rotateY(0deg)}34%{transform:translateY(4px) scale(1.02) rotate(1deg) rotateY(0deg)}58%{transform:translateY(0) scale(1) rotate(0deg) rotateY(92deg)}100%{transform:none rotateY(180deg)}} /* Keep flop/turn/river drama readable on smaller screens */ @media(max-width:760px){ .board{min-height:58px;gap:6px} .boardflip .flipstack{width:38px;height:55px} .boardflip .flipback .card,.boardflip .flipfront .card{width:38px !important;height:55px !important} .chipcolumn.labeled{width:17px !important;height:36px !important} .chiplabel{min-width:11px;height:11px;font-size:6px;padding:0 2px;bottom:5px} } /* v2.4.16 action clock, centered controls, cleaner card backs, and seat-card placement */ /* Clean felt branding: site name only, large and deliberately faint. */ .feltlogo{ left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important; width:72%;text-align:center;font-size:58px !important;line-height:.88;letter-spacing:.12em !important; color:rgba(255,255,255,.045) !important;text-shadow:none !important;pointer-events:none;z-index:0; } .feltlogo small{font-size:23px !important;letter-spacing:.36em !important;color:rgba(255,255,255,.04) !important} .felt-center,.betspot,.seat{z-index:2} /* Softer red card back with a subdued Nutman silhouette. */ .card.premiumback{ background:#962935 url('/assets/cards/card-back-soft-red.svg') center/cover no-repeat !important; border:2px solid rgba(255,235,235,.9) !important; box-shadow:0 4px 10px rgba(0,0,0,.34),inset 0 0 0 1px rgba(84,12,23,.45) !important; } .card.premiumback::after{display:none !important} /* Hole cards now live with the player presentation: avatar -> cards -> name plate. */ .seatbox{overflow:visible !important} .avatarwrap{position:relative;z-index:1;margin-bottom:0 !important} .seatcards{position:relative;z-index:5;display:flex;align-items:flex-end;justify-content:center;height:48px;margin-top:-25px;margin-bottom:-3px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))} .seatcard{position:relative;display:block;transform-origin:center bottom} .seatcard-1{z-index:1;transform:rotate(-5deg) translateX(7px)} .seatcard-2{z-index:2;margin-left:-22px;transform:rotate(5deg) translateX(-7px)} .seatcards .card.premiumcard,.seatcards .card.premiumback{width:39px !important;height:56px !important;border-radius:7px !important} .myseatcards{height:62px;margin-top:-31px;margin-bottom:-4px} .myseatcards .seatcard-1{transform:rotate(-6deg) translateX(9px)} .myseatcards .seatcard-2{margin-left:-29px;transform:rotate(6deg) translateX(-9px)} .myseatcards .card.premiumcard,.myseatcards .card.premiumback{width:51px !important;height:73px !important} .seatcards .card.premiumcard .corner.tl,.seatcards .card.premiumcard .corner.br{font-size:11px !important} .seatcards .card.premiumcard .corner.tr{font-size:10px !important} .myseatcards .card.premiumcard .corner.tl,.myseatcards .card.premiumcard .corner.br{font-size:15px !important} .myseatcards .card.premiumcard .corner.tr{font-size:14px !important} .seatcards .courtframe{left:7% !important;right:7% !important;top:17% !important;bottom:8% !important} .nameplate{position:relative;z-index:6 !important} /* The old felt-hole-card layer is retired. */ .holefelt{display:none !important} /* Give the center controls dedicated space below the player's cards. */ .tablewrap{min-height:1040px !important;padding-bottom:280px !important} .actionbar.actionconsole{ position:absolute !important;left:50% !important;bottom:-8px !important;transform:translateX(-50%) !important; width:min(760px,94%) !important;display:flex !important;flex-direction:column !important;align-items:stretch !important; gap:10px !important;padding:13px 15px 15px !important;border-radius:18px !important; background:linear-gradient(180deg,rgba(13,22,30,.985),rgba(6,13,19,.99)) !important; border:1px solid #455b68 !important;box-shadow:0 18px 44px rgba(0,0,0,.55) !important;z-index:260 !important; } .actionbar.waitingbar{bottom:4px !important;width:min(680px,92%) !important;min-height:54px} .consoletimer{position:absolute;right:16px;top:13px;display:flex;align-items:baseline;gap:5px;color:#9eafba;font-size:10px;letter-spacing:.03em} .consoletimer .timerlabel{margin-right:3px}.consoletimer strong{font-size:17px;color:#f3f6f8} .betcontrol{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding-right:120px} .betcontrolhead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:900;color:#e4edf2} .betcontrolhead input{width:118px;padding:7px 10px;text-align:right;font-weight:900} .betslider{width:100%;height:28px;padding:0 !important;accent-color:#d69b2d} .betquick{display:flex;gap:7px;flex-wrap:wrap} .betquick .btn{padding:7px 10px !important} .actionbuttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .actionbig{min-height:64px;border:1px solid rgba(255,255,255,.15);border-radius:13px;color:#fff;font-size:19px;font-weight:1000;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 15px rgba(0,0,0,.28);transition:filter .12s ease,transform .12s ease} .actionbig:hover{filter:brightness(1.08);transform:translateY(-1px)} .foldbig{background:linear-gradient(180deg,#c64848,#9e2828)} .callbig{background:linear-gradient(180deg,#2789c6,#145e96)} .raisebig{background:linear-gradient(180deg,#3cae54,#20823a)} .raisebig span{display:block;font-size:13px;font-weight:800;margin-top:2px;color:#e7ffe9} /* Final 10-second warning and one per-hand time extension. */ .timewarning,.extensiontimer{display:none;align-items:center;gap:10px;border-radius:11px;padding:8px 10px;margin-right:120px} .timewarning.active{display:flex;background:rgba(130,29,29,.42);border:1px solid rgba(238,85,85,.55);color:#fff} .timewarning>strong{font-size:24px;color:#ff6f6f;min-width:46px;text-align:center} .timewarning>span{font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase} .timewarning em{font-size:10px;color:#d4b4b4;margin-left:auto} .timebank{margin-left:auto !important;background:linear-gradient(180deg,#2d78ad,#1c5077) !important;white-space:nowrap} .extensiontimer.active{display:flex;background:rgba(30,72,105,.36);border:1px solid rgba(72,142,190,.5);color:#dbeeff} .extensiontimer strong{font-size:12px;text-transform:uppercase;letter-spacing:.07em}.extensiontimer span{margin-left:auto;font-size:12px}.extensiontimer b{font-size:20px;color:#fff} @media(max-width:900px){ .tablewrap{min-height:900px !important;padding-bottom:250px !important} .actionbar.actionconsole{width:96% !important} .betcontrol{padding-right:0;padding-top:28px} .consoletimer{top:10px;right:14px} .timewarning,.extensiontimer{margin-right:0} } @media(max-width:620px){ .feltlogo{font-size:34px !important}.feltlogo small{font-size:13px !important} .tablewrap{min-height:760px !important;padding-bottom:260px !important} .seatcards{height:36px;margin-top:-19px}.seatcards .card.premiumcard,.seatcards .card.premiumback{width:29px !important;height:42px !important}.seatcard-2{margin-left:-16px} .myseatcards{height:48px;margin-top:-24px}.myseatcards .card.premiumcard,.myseatcards .card.premiumback{width:39px !important;height:56px !important}.myseatcards .seatcard-2{margin-left:-22px} .actionbar.actionconsole{bottom:-4px !important;padding:10px !important;gap:8px !important} .actionbuttons{gap:7px}.actionbig{min-height:56px;font-size:16px}.betcontrolhead input{width:100px} .timewarning{flex-wrap:wrap}.timebank{width:100%;margin-left:0 !important}.consoletimer{font-size:9px}.consoletimer strong{font-size:15px} } /* v2.4.17 cleanup: fit table on screen, side-by-side cards, compact lobby, chip-face values */ /* Keep the lobby room list inside its own column instead of colliding with preview/create panels. */ .lobbylanding{grid-template-columns:minmax(0,1fr) 380px !important;gap:16px !important} .lobbyrooms,.lobbysidebar,.roomlist,.roomlisthead{min-width:0 !important;max-width:100%;overflow:hidden} .roomlisthead,.gamecard.roomrow{ grid-template-columns:minmax(130px,1.35fr) minmax(70px,.55fr) minmax(88px,.7fr) minmax(110px,.9fr) minmax(92px,.7fr) !important; gap:8px !important; } .gamecard.roomrow{padding:14px 12px !important} .gamecard.roomrow span{font-size:13px !important;min-width:0} .roomrowname{font-size:17px !important;min-width:0} .roomrowblinds{font-size:16px !important;text-align:right;min-width:0} @media(max-width:1120px){ .lobbylanding{grid-template-columns:1fr !important} .lobbysidebar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:visible} } @media(max-width:760px){.lobbysidebar{grid-template-columns:1fr}} /* Hole cards are always clearly side-by-side: never cover one another. */ .seatcards,.myseatcards{ display:flex !important;align-items:flex-end !important;justify-content:center !important;gap:5px !important; height:58px !important;margin-top:-18px !important;margin-bottom:1px !important; } .seatcard,.seatcard-1,.seatcard-2,.myseatcards .seatcard-1,.myseatcards .seatcard-2{ position:relative !important;display:block !important;transform:none !important;margin-left:0 !important; } .seatcards .card.premiumcard,.seatcards .card.premiumback{width:39px !important;height:56px !important} .myseatcards{height:72px !important;margin-top:-22px !important;gap:6px !important} .myseatcards .card.premiumcard,.myseatcards .card.premiumback{width:50px !important;height:71px !important} /* Fit the entire live table + the player's hand + action console into a normal desktop viewport. */ .tablecol{min-width:0;overflow:visible} .tablecol .tablewrap{ height:clamp(560px,calc(100vh - 190px),760px) !important; min-height:0 !important;max-height:760px !important;padding-bottom:0 !important;margin-bottom:0 !important; } .tablecol .poker-table{ top:38% !important;width:min(790px,86%) !important;height:370px !important;border-width:17px !important; } .actionbar.actionconsole{bottom:6px !important;width:min(720px,94%) !important;padding:10px 13px 12px !important;gap:7px !important} .actionbig{min-height:54px !important;font-size:18px !important} .betcontrol{gap:5px !important}.betslider{height:23px !important}.betquick .btn{padding:6px 9px !important} .seatavatar{width:92px !important;height:92px !important}.seat.povseat .seatavatar{width:108px !important;height:108px !important} .nameplate{padding:7px 9px 8px !important}.name{font-size:13px !important}.stack{font-size:14px !important;padding-bottom:7px !important} @media(max-height:760px) and (min-width:761px){ .tablecol .tablewrap{height:clamp(510px,calc(100vh - 160px),610px) !important} .tablecol .poker-table{top:36% !important;width:min(730px,82%) !important;height:330px !important} .seatavatar{width:78px !important;height:78px !important}.seat.povseat .seatavatar{width:92px !important;height:92px !important} .seatcards{height:49px !important}.seatcards .card.premiumcard,.seatcards .card.premiumback{width:34px !important;height:49px !important} .myseatcards{height:59px !important}.myseatcards .card.premiumcard,.myseatcards .card.premiumback{width:42px !important;height:59px !important} .actionbar.actionconsole{width:min(680px,92%) !important;padding:8px 11px 9px !important}.actionbig{min-height:48px !important;font-size:16px !important} } /* Bet/pot chip face: denomination is printed directly on a round top chip. */ .chipcolumn.labeled{position:relative !important;width:26px !important;height:52px !important;padding-top:0 !important;overflow:visible} .chipcolumn.labeled .chiplabel{ position:absolute !important;left:50% !important;bottom:7px !important;transform:translateX(-50%) !important; width:23px !important;height:23px !important;min-width:23px !important;padding:0 !important;border-radius:50% !important; display:grid !important;place-items:center !important;font-size:7px !important;font-weight:1000 !important;line-height:1 !important; color:#fff !important;border:3px dashed rgba(255,255,255,.86) !important;box-shadow:0 2px 5px rgba(0,0,0,.35) !important;z-index:20 !important; } .chipcolumn.red .chiplabel{background:#bc2929 !important}.chipcolumn.green .chiplabel{background:#148a4e !important} .chipcolumn.blue .chiplabel{background:#286bc3 !important}.chipcolumn.orange .chiplabel{background:#df7416 !important} .chipcolumn.black .chiplabel{background:#252b32 !important}.chipcolumn.yellow .chiplabel{background:#e1b812 !important;color:#1b1b1b !important;border-color:rgba(255,255,255,.92) !important} .betamount{margin-top:3px !important} /* v2.4.18 layout cleanup: full-width create button, funding notice, chat left, actions right */ .createGameSubmit{ grid-column:1 / -1 !important; width:100% !important; min-height:48px; white-space:nowrap !important; text-align:center; font-size:15px; } .fundingnotice{ display:flex;flex-direction:column;gap:4px; margin:12px 0;padding:13px 15px;border-radius:12px; background:rgba(169,120,36,.16);border:1px solid rgba(224,177,82,.48); text-align:center; } .fundingnotice strong{font-size:16px;color:#f6d881} .fundingnotice span{font-size:12px;color:#bac8d1} /* Live desktop table is three clean zones: chat | table | controls. */ .roomlayout.livegamegrid{ display:grid !important; grid-template-columns:220px minmax(0,1fr) 300px !important; gap:14px !important; align-items:start !important; overflow:visible !important; } .chatcol,.tablecol,.actionrail{min-width:0} .chatcol{grid-column:1} .tablecol{grid-column:2} .actionrail{grid-column:3;align-self:start;position:relative;z-index:300} .livegamegrid .chatpanel{ position:sticky !important;top:10px !important; min-height:0 !important;height:clamp(420px,calc(100vh - 190px),650px) !important; padding:11px !important;border-radius:14px !important; } .livegamegrid .chatmessages{min-height:0 !important;max-height:none !important;flex:1} .livegamegrid .chatcomposer textarea{min-height:58px !important} /* Controls live in the right rail, never over player cards or name plates. */ .actionrail .actionbar, .actionrail .actionbar.actionconsole, .actionrail .actionbar.waitingbar{ position:sticky !important; top:10px !important; left:auto !important;right:auto !important;bottom:auto !important; transform:none !important; width:100% !important;max-width:100% !important; margin:0 !important; z-index:1 !important; } .actionrail .actionbar.actionconsole{ padding:12px !important;gap:9px !important;border-radius:15px !important; } .actionrail .consoletimer{ position:static !important;display:flex !important;justify-content:center !important; padding:5px 8px;border-radius:9px;background:rgba(255,255,255,.035); } .actionrail .betcontrol{padding:0 !important;gap:7px !important} .actionrail .betcontrolhead{display:grid !important;grid-template-columns:1fr 92px !important;align-items:center} .actionrail .betcontrolhead input{width:92px !important;min-width:0} .actionrail .betslider{width:100% !important;height:28px !important} .actionrail .betquick{display:grid !important;grid-template-columns:1fr 1fr !important;gap:6px !important} .actionrail .betquick .btn{white-space:nowrap;font-size:11px !important;padding:7px 6px !important} .actionrail .actionbuttons{display:grid !important;grid-template-columns:1fr !important;gap:8px !important} .actionrail .actionbig{width:100% !important;min-height:58px !important;font-size:18px !important} .actionrail .timewarning,.actionrail .extensiontimer{margin-right:0 !important;flex-wrap:wrap} .actionrail .timebank{width:100%;margin-left:0 !important} .actionrail .waitingbar{min-height:90px !important;text-align:center;display:grid !important;place-items:center !important} .actionrail:empty{display:none} /* More breathing room between hole cards and the player name plate. */ .seatcards,.myseatcards{ margin-bottom:8px !important; overflow:visible !important; z-index:8 !important; } .seatcards{margin-top:-14px !important;height:58px !important} .myseatcards{margin-top:-18px !important;height:72px !important;margin-bottom:9px !important} .nameplate{z-index:4 !important;margin-top:0 !important} .seatcards .card,.myseatcards .card{z-index:8 !important} /* Rebalance table space now that the controls are no longer underneath it. */ .livegamegrid .tablewrap{ height:clamp(540px,calc(100vh - 180px),720px) !important; min-height:0 !important;max-height:720px !important; padding:0 !important;margin:0 !important; overflow:visible !important; } .livegamegrid .poker-table{ top:48% !important; width:min(710px,92%) !important; height:360px !important; } @media(max-width:1240px){ .roomlayout.livegamegrid{grid-template-columns:200px minmax(0,1fr) 275px !important;gap:10px !important} .livegamegrid .poker-table{width:min(650px,90%) !important;height:340px !important} .actionrail .actionbig{min-height:52px !important;font-size:16px !important} } @media(max-width:1020px){ .roomlayout.livegamegrid{grid-template-columns:1fr !important} .chatcol,.tablecol,.actionrail{grid-column:1 !important} .tablecol{order:1}.actionrail{order:2}.chatcol{order:3} .actionrail .actionbar,.actionrail .actionbar.actionconsole,.actionrail .actionbar.waitingbar{position:static !important;width:min(720px,96%) !important;margin:10px auto 0 !important} .actionrail .actionbuttons{grid-template-columns:repeat(3,1fr) !important} .livegamegrid .chatpanel{position:static !important;height:auto !important;max-height:360px !important;margin-top:12px} .livegamegrid .tablewrap{height:620px !important} } @media(max-width:620px){ .createGameSubmit{white-space:normal !important} .actionrail .actionbuttons{grid-template-columns:1fr !important} .livegamegrid .tablewrap{height:560px !important} } /* v2.4.19 outer-seat geometry, funding overlay, and 8-second showdown presentation */ /* Lobby funding message lives on the felt instead of below the table. */ .tablefundingoverlay{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:85; width:min(430px,72%);display:flex;flex-direction:column;align-items:center;gap:5px; padding:16px 20px;border-radius:15px;text-align:center; background:rgba(5,16,23,.92);border:1px solid rgba(233,190,88,.55); box-shadow:0 14px 34px rgba(0,0,0,.38);pointer-events:none; } .tablefundingoverlay strong{font-size:18px;color:#f6d881} .tablefundingoverlay span{font-size:12px;color:#c1ced6} /* Retire the old below-table funding banner entirely. */ .fundingnotice{display:none !important} /* Player presentation is an outside-the-rail ring. Cards/name plates must never sit on the felt. */ .livegamegrid .poker-table{overflow:visible !important} .seat{overflow:visible !important} .seatbox{position:relative !important;overflow:visible !important;background:transparent !important;border:0 !important;box-shadow:none !important;min-height:0 !important;padding:0 !important} .seat.me .seatbox,.seat.turn .seatbox{border:0 !important;box-shadow:none !important} .seat.turn .seatbox{transform:none !important} .avatarwrap{filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))} .nameplate{box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.04) !important} /* Normal hole cards stay side-by-side between avatar and name plate. */ .seatcards,.myseatcards{ position:relative !important;left:auto !important;top:auto !important;transform:none !important; display:flex !important;gap:6px !important;justify-content:center !important;align-items:flex-end !important; margin:-12px 0 8px !important;height:58px !important;overflow:visible !important; } .myseatcards{height:70px !important;margin:-15px 0 9px !important;gap:7px !important} .seatcard,.seatcard-1,.seatcard-2,.myseatcards .seatcard-1,.myseatcards .seatcard-2{ position:relative !important;display:block !important;transform:none !important;margin:0 !important; } .seatcards .card.premiumcard,.seatcards .card.premiumback{width:39px !important;height:56px !important} .myseatcards .card.premiumcard,.myseatcards .card.premiumback{width:50px !important;height:70px !important} /* At showdown, exposed cards move upward and cover the lower part of each avatar, like a poker client showdown. */ .showdownseat .seatbox{position:relative !important} .showdownseat .seatcards,.showdownseat .myseatcards{ position:absolute !important;left:50% !important;top:50px !important;transform:translateX(-50%) !important; margin:0 !important;height:auto !important;z-index:30 !important;gap:7px !important; filter:drop-shadow(0 7px 10px rgba(0,0,0,.48)) !important; } .showdownseat .seatcards .card.premiumcard{width:44px !important;height:63px !important} .showdownseat .myseatcards .card.premiumcard{width:52px !important;height:74px !important} .showdownseat .seatcards .card.premiumback{width:44px !important;height:63px !important} .showdownseat .myseatcards .card.premiumback{width:52px !important;height:74px !important} .showdownseat .nameplate{margin-top:8px !important} .winnerhandname{ position:relative;z-index:36;margin:-2px auto 5px;padding:4px 9px;width:max-content;max-width:150px; border-radius:999px;background:#8a651e;color:#fff3bd;border:1px solid #e4bd5b; font-size:10px;font-weight:1000;letter-spacing:.06em;text-transform:uppercase; box-shadow:0 4px 10px rgba(0,0,0,.32); } .winnerseat .seatavatar{border-color:#f2c75b !important;box-shadow:0 0 0 3px rgba(242,199,91,.24),0 10px 22px rgba(0,0,0,.4) !important} .winnerseat .nameplate{border-color:#e9c35e !important;box-shadow:0 0 0 2px rgba(233,195,94,.18),0 10px 22px rgba(0,0,0,.46) !important} .winningused .card.premiumcard, .boardused .card.premiumcard{ border:3px solid #f4cd5e !important; box-shadow:0 0 0 2px rgba(255,246,184,.85),0 0 18px rgba(244,205,94,.9),0 8px 18px rgba(0,0,0,.42) !important; transform:scale(1.08);z-index:42 !important; } .winnerunused .card.premiumcard{opacity:.5;filter:saturate(.55) brightness(.8)} .boardentry:not(.boardused){transition:opacity .18s ease,filter .18s ease} .poker-table:has(.winnerseat) .boardentry:not(.boardused){opacity:.55;filter:saturate(.55)} .poker-table:has(.winnerseat) .boardused{opacity:1 !important;filter:none !important} /* Make sure the center board/pot remain visually clear even with two-player heads-up games. */ .felt-center{z-index:20 !important} .betspot{z-index:28 !important} .seat{z-index:40} /* Keep outside seats visible without forcing a taller page. */ .livegamegrid .tablewrap{overflow:visible !important} @media(max-width:1240px){ .seatavatar{width:82px !important;height:82px !important}.seat.povseat .seatavatar{width:96px !important;height:96px !important} .seatcards .card.premiumcard,.seatcards .card.premiumback{width:34px !important;height:49px !important} .myseatcards .card.premiumcard,.myseatcards .card.premiumback{width:42px !important;height:59px !important} .showdownseat .seatcards{top:44px !important} } @media(max-width:760px){ .tablefundingoverlay{width:min(360px,82%);padding:12px 14px}.tablefundingoverlay strong{font-size:15px} .winnerhandname{font-size:8px;padding:3px 6px} } /* v2.4.19 rail spacing: reserve enough horizontal room for outside side seats. */ @media(min-width:1021px){ .roomlayout.livegamegrid{grid-template-columns:180px minmax(0,1fr) 240px !important;gap:12px !important} .livegamegrid .poker-table{width:min(620px,76%) !important;height:350px !important} .livegamegrid .chatpanel{padding:9px !important} .actionrail .actionbar.actionconsole{padding:10px !important} .actionrail .actionbig{min-height:52px !important;font-size:16px !important} } /* v2.4.20 seat placard geometry, clearer cards, and cleaner bet chips */ /* Distinct seat-region anchoring so avatars/cards/name plates live outside the felt more like a premium client. */ .seat{overflow:visible !important} .seat-north,.seat-northeast,.seat-northwest{transform:translate(-50%,-66%) !important} .seat-south,.seat-southeast,.seat-southwest{transform:translate(-50%,-36%) !important} .seat-east{transform:translate(-42%,-50%) !important} .seat-west{transform:translate(-58%,-50%) !important} .seatbox{align-items:center !important;gap:0 !important} .nameplate{position:relative !important;min-width:122px !important;max-width:172px !important;margin-top:2px !important} .seat-east .nameplate,.seat-northeast .nameplate,.seat-southeast .nameplate{left:28px !important} .seat-west .nameplate,.seat-northwest .nameplate,.seat-southwest .nameplate{left:-28px !important} .seat-north .nameplate,.seat-south .nameplate{left:0 !important} .povseat .nameplate{min-width:132px !important;max-width:184px !important} /* Bigger, cleaner seat cards. Keep cards above the name plate and never over the board. */ .seatcards{height:70px !important;margin:-8px 0 10px !important;gap:8px !important} .myseatcards{height:84px !important;margin:-10px 0 11px !important;gap:10px !important} .seatcards .card.premiumcard,.seatcards .card.premiumback{width:48px !important;height:68px !important;border-radius:9px !important} .myseatcards .card.premiumcard,.myseatcards .card.premiumback{width:58px !important;height:82px !important;border-radius:10px !important} .seatcards .card.premiumcard .corner.tl,.seatcards .card.premiumcard .corner.br{font-size:14px !important} .seatcards .card.premiumcard .corner.tr{font-size:12px !important} .myseatcards .card.premiumcard .corner.tl,.myseatcards .card.premiumcard .corner.br{font-size:18px !important} .myseatcards .card.premiumcard .corner.tr{font-size:16px !important} .seatcards .card.premiumcard .pip{font-size:12px !important} .myseatcards .card.premiumcard .pip{font-size:16px !important} .seatcards .card.premiumcard .acepip{font-size:34px !important} .myseatcards .card.premiumcard .acepip{font-size:42px !important} .courtframe{left:14% !important;right:14% !important;top:19% !important;bottom:14% !important;display:flex;align-items:center;justify-content:center !important} .courtframe img{object-fit:contain !important;object-position:center !important;padding:4px !important;transform:none !important} /* Obvious turn indicator: bright yellow avatar ring. */ .seat.turn .seatavatar{border-color:#f1d15d !important;box-shadow:0 0 0 4px rgba(241,209,93,.28),0 0 20px rgba(241,209,93,.55),0 10px 22px rgba(0,0,0,.42) !important;animation:turnPulse 1s ease-in-out infinite} .seat.turn .nameplate{border-color:#dfbd55 !important;box-shadow:0 0 0 2px rgba(223,189,85,.18),0 8px 18px rgba(0,0,0,.45) !important} @keyframes turnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}} /* Bet chip cleanup: show one labeled chip per denomination instead of a second chip tucked beneath it. */ .chip-pile.bet .chipcolumn.labeled .pokerchip:not(:last-of-type), .chip-pile.pot .chipcolumn.labeled .pokerchip:not(:last-of-type){display:none !important} .chip-pile.bet,.chip-pile.pot{gap:8px !important} .chipcolumn.labeled{width:28px !important;height:32px !important} .chipcolumn.labeled .chiplabel{bottom:0 !important;width:24px !important;height:24px !important;font-size:7px !important} .betamount{font-weight:900 !important;color:#f8e8a7 !important;text-shadow:0 1px 2px rgba(0,0,0,.5)} /* Keep showdown cards above name plate but not covering the avatar too aggressively. */ .showdownseat .seatcards,.showdownseat .myseatcards{top:46px !important} .showdownseat .seatcards .card.premiumcard,.showdownseat .seatcards .card.premiumback{width:50px !important;height:71px !important} .showdownseat .myseatcards .card.premiumcard,.showdownseat .myseatcards .card.premiumback{width:60px !important;height:86px !important} /* Adjust felt size so larger outside-the-felt seat components still fit on screen. */ @media(min-width:1021px){ .livegamegrid .poker-table{width:min(590px,72%) !important;height:335px !important} .livegamegrid .tablewrap{height:clamp(520px,calc(100vh - 190px),680px) !important} } @media(max-width:1240px){ .seat-east .nameplate,.seat-northeast .nameplate,.seat-southeast .nameplate{left:18px !important} .seat-west .nameplate,.seat-northwest .nameplate,.seat-southwest .nameplate{left:-18px !important} .seatcards .card.premiumcard,.seatcards .card.premiumback{width:42px !important;height:60px !important} .myseatcards .card.premiumcard,.myseatcards .card.premiumback{width:50px !important;height:71px !important} } @media(max-width:760px){ .seat-north,.seat-northeast,.seat-northwest{transform:translate(-50%,-59%) !important} .seat-south,.seat-southeast,.seat-southwest{transform:translate(-50%,-41%) !important} .seat-east{transform:translate(-45%,-50%) !important}.seat-west{transform:translate(-55%,-50%) !important} .nameplate{min-width:96px !important;max-width:128px !important} .seatcards{height:56px !important}.myseatcards{height:67px !important} .seatcards .card.premiumcard,.seatcards .card.premiumback{width:36px !important;height:52px !important} .myseatcards .card.premiumcard,.myseatcards .card.premiumback{width:44px !important;height:63px !important} } /* v2.4.21 synchronized community-card reveal timing */ .boardghost{width:58px;height:82px;opacity:0;pointer-events:none} .boardshown{opacity:1} @media(max-width:760px){.boardghost{width:38px;height:55px}} /* v2.4.22 true side placards + live-update resilience */ /* Side and corner seats use the reference-client composition: avatar near rail, placard to the side, cards immediately above the placard. */ .seat-east,.seat-west,.seat-northeast,.seat-northwest,.seat-southeast,.seat-southwest{width:220px !important;height:150px !important} .seat-east .seatbox,.seat-west .seatbox,.seat-northeast .seatbox,.seat-northwest .seatbox,.seat-southeast .seatbox,.seat-southwest .seatbox{width:100%;height:100%;position:relative !important} /* Right-hand seats: placard to the right of avatar. */ .seat-east .avatarwrap,.seat-northeast .avatarwrap,.seat-southeast .avatarwrap{position:absolute !important;left:38px;top:36px;margin:0 !important;z-index:10} .seat-east .nameplate,.seat-northeast .nameplate,.seat-southeast .nameplate{position:absolute !important;left:102px !important;top:61px !important;margin:0 !important;z-index:12} .seat-east .seatcards,.seat-northeast .seatcards,.seat-southeast .seatcards, .seat-east .myseatcards,.seat-northeast .myseatcards,.seat-southeast .myseatcards{position:absolute !important;left:101px !important;top:4px !important;width:134px !important;height:58px !important;margin:0 !important;justify-content:center !important;z-index:14} /* Left-hand seats: placard to the left of avatar. */ .seat-west .avatarwrap,.seat-northwest .avatarwrap,.seat-southwest .avatarwrap{position:absolute !important;right:38px;top:36px;margin:0 !important;z-index:10} .seat-west .nameplate,.seat-northwest .nameplate,.seat-southwest .nameplate{position:absolute !important;right:102px !important;left:auto !important;top:61px !important;margin:0 !important;z-index:12} .seat-west .seatcards,.seat-northwest .seatcards,.seat-southwest .seatcards, .seat-west .myseatcards,.seat-northwest .myseatcards,.seat-southwest .myseatcards{position:absolute !important;right:101px !important;left:auto !important;top:4px !important;width:134px !important;height:58px !important;margin:0 !important;justify-content:center !important;z-index:14} /* Center top/bottom seats retain the vertical stack because there is no useful side lane there. */ .seat-north,.seat-south{width:176px !important} .seat-north .seatbox,.seat-south .seatbox{display:flex !important;flex-direction:column !important;align-items:center !important} .seat-north .nameplate,.seat-south .nameplate{position:relative !important;left:auto !important;right:auto !important;top:auto !important;margin-top:2px !important} .seat-north .seatcards,.seat-south .seatcards,.seat-north .myseatcards,.seat-south .myseatcards{position:relative !important;left:auto !important;right:auto !important;top:auto !important;width:auto !important;margin:-8px 0 9px !important} /* Cards remain readable at every seat. */ .seat-east .seatcards .card,.seat-west .seatcards .card,.seat-northeast .seatcards .card,.seat-northwest .seatcards .card,.seat-southeast .seatcards .card,.seat-southwest .seatcards .card{width:44px !important;height:63px !important} .seat-east .myseatcards .card,.seat-west .myseatcards .card,.seat-northeast .myseatcards .card,.seat-northwest .myseatcards .card,.seat-southeast .myseatcards .card,.seat-southwest .myseatcards .card{width:48px !important;height:68px !important} /* Side-seat status badges/pending labels stay with the placard rather than falling onto the felt. */ .seat-east .pendingchips,.seat-east .allin,.seat-east .mini,.seat-northeast .pendingchips,.seat-northeast .allin,.seat-northeast .mini,.seat-southeast .pendingchips,.seat-southeast .allin,.seat-southeast .mini{position:absolute;left:110px;top:116px;z-index:15} .seat-west .pendingchips,.seat-west .allin,.seat-west .mini,.seat-northwest .pendingchips,.seat-northwest .allin,.seat-northwest .mini,.seat-southwest .pendingchips,.seat-southwest .allin,.seat-southwest .mini{position:absolute;right:110px;top:116px;z-index:15} /* Showdown still brings cards over the avatar, overriding side-seat placement. */ .showdownseat.seat-east .seatcards,.showdownseat.seat-west .seatcards,.showdownseat.seat-northeast .seatcards,.showdownseat.seat-northwest .seatcards,.showdownseat.seat-southeast .seatcards,.showdownseat.seat-southwest .seatcards, .showdownseat.seat-east .myseatcards,.showdownseat.seat-west .myseatcards,.showdownseat.seat-northeast .myseatcards,.showdownseat.seat-northwest .myseatcards,.showdownseat.seat-southeast .myseatcards,.showdownseat.seat-southwest .myseatcards{left:50% !important;right:auto !important;top:45px !important;width:auto !important;transform:translateX(-50%) !important} @media(max-width:1240px){ .seat-east,.seat-west,.seat-northeast,.seat-northwest,.seat-southeast,.seat-southwest{width:190px !important;height:135px !important} .seat-east .avatarwrap,.seat-northeast .avatarwrap,.seat-southeast .avatarwrap{left:34px;top:34px} .seat-west .avatarwrap,.seat-northwest .avatarwrap,.seat-southwest .avatarwrap{right:34px;top:34px} .seat-east .nameplate,.seat-northeast .nameplate,.seat-southeast .nameplate{left:88px !important;top:56px !important} .seat-west .nameplate,.seat-northwest .nameplate,.seat-southwest .nameplate{right:88px !important;top:56px !important} .seat-east .seatcards,.seat-northeast .seatcards,.seat-southeast .seatcards,.seat-east .myseatcards,.seat-northeast .myseatcards,.seat-southeast .myseatcards{left:86px !important;top:3px !important;width:120px !important} .seat-west .seatcards,.seat-northwest .seatcards,.seat-southwest .seatcards,.seat-west .myseatcards,.seat-northwest .myseatcards,.seat-southwest .myseatcards{right:86px !important;top:3px !important;width:120px !important} } @media(max-width:760px){ /* On small screens prioritize readability and fall back to compact vertical seats. */ .seat-east,.seat-west,.seat-northeast,.seat-northwest,.seat-southeast,.seat-southwest{width:118px !important;height:auto !important} .seat-east .seatbox,.seat-west .seatbox,.seat-northeast .seatbox,.seat-northwest .seatbox,.seat-southeast .seatbox,.seat-southwest .seatbox{height:auto !important;display:flex !important;flex-direction:column !important;align-items:center !important} .seat-east .avatarwrap,.seat-west .avatarwrap,.seat-northeast .avatarwrap,.seat-northwest .avatarwrap,.seat-southeast .avatarwrap,.seat-southwest .avatarwrap, .seat-east .nameplate,.seat-west .nameplate,.seat-northeast .nameplate,.seat-northwest .nameplate,.seat-southeast .nameplate,.seat-southwest .nameplate, .seat-east .seatcards,.seat-west .seatcards,.seat-northeast .seatcards,.seat-northwest .seatcards,.seat-southeast .seatcards,.seat-southwest .seatcards, .seat-east .myseatcards,.seat-west .myseatcards,.seat-northeast .myseatcards,.seat-northwest .myseatcards,.seat-southeast .myseatcards,.seat-southwest .myseatcards{position:relative !important;left:auto !important;right:auto !important;top:auto !important;width:auto !important;margin:0 !important;transform:none !important} .seat-east .seatcards,.seat-west .seatcards,.seat-northeast .seatcards,.seat-northwest .seatcards,.seat-southeast .seatcards,.seat-southwest .seatcards{margin:-6px 0 6px !important} } /* Heads-up / top-center opponent: do not leave the placard underneath. Put it to the right, as in the reference client. */ .seat-north:not(.povseat){width:220px !important;height:150px !important} .seat-north:not(.povseat) .seatbox{width:100%;height:100%;position:relative !important;display:block !important} .seat-north:not(.povseat) .avatarwrap{position:absolute !important;left:38px;top:36px;margin:0 !important;z-index:10} .seat-north:not(.povseat) .nameplate{position:absolute !important;left:102px !important;right:auto !important;top:61px !important;margin:0 !important;z-index:12} .seat-north:not(.povseat) .seatcards,.seat-north:not(.povseat) .myseatcards{position:absolute !important;left:101px !important;right:auto !important;top:4px !important;width:134px !important;height:58px !important;margin:0 !important;justify-content:center !important;z-index:14} .seat-north:not(.povseat) .pendingchips,.seat-north:not(.povseat) .allin,.seat-north:not(.povseat) .mini{position:absolute;left:110px;top:116px;z-index:15} .showdownseat.seat-north:not(.povseat) .seatcards,.showdownseat.seat-north:not(.povseat) .myseatcards{left:50% !important;right:auto !important;top:45px !important;width:auto !important;transform:translateX(-50%) !important} @media(max-width:1240px){ .seat-north:not(.povseat){width:190px !important;height:135px !important} .seat-north:not(.povseat) .avatarwrap{left:34px;top:34px} .seat-north:not(.povseat) .nameplate{left:88px !important;top:56px !important} .seat-north:not(.povseat) .seatcards,.seat-north:not(.povseat) .myseatcards{left:86px !important;top:3px !important;width:120px !important} } /* v2.4.25 exact reference-style placards: opponents use left/right side plaques, POV remains below. */ .seat.placard-left:not(.povseat),.seat.placard-right:not(.povseat){width:230px !important;height:154px !important;overflow:visible !important} .seat.placard-left:not(.povseat) .seatbox,.seat.placard-right:not(.povseat) .seatbox{width:100% !important;height:100% !important;position:relative !important;display:block !important;overflow:visible !important} .seat.placard-right:not(.povseat) .avatarwrap{position:absolute !important;left:28px !important;right:auto !important;top:38px !important;margin:0 !important;z-index:10 !important} .seat.placard-right:not(.povseat) .nameplate{position:absolute !important;left:98px !important;right:auto !important;top:67px !important;margin:0 !important;z-index:12 !important;min-width:128px !important;max-width:148px !important} .seat.placard-right:not(.povseat) .seatcards,.seat.placard-right:not(.povseat) .myseatcards{position:absolute !important;left:99px !important;right:auto !important;top:5px !important;width:132px !important;height:61px !important;margin:0 !important;display:flex !important;justify-content:center !important;gap:7px !important;z-index:14 !important} .seat.placard-left:not(.povseat) .avatarwrap{position:absolute !important;right:28px !important;left:auto !important;top:38px !important;margin:0 !important;z-index:10 !important} .seat.placard-left:not(.povseat) .nameplate{position:absolute !important;right:98px !important;left:auto !important;top:67px !important;margin:0 !important;z-index:12 !important;min-width:128px !important;max-width:148px !important} .seat.placard-left:not(.povseat) .seatcards,.seat.placard-left:not(.povseat) .myseatcards{position:absolute !important;right:99px !important;left:auto !important;top:5px !important;width:132px !important;height:61px !important;margin:0 !important;display:flex !important;justify-content:center !important;gap:7px !important;z-index:14 !important} .seat.placard-left:not(.povseat) .seatcard,.seat.placard-right:not(.povseat) .seatcard{position:relative !important;transform:none !important;margin:0 !important} .seat.placard-left:not(.povseat) .seatcards .card,.seat.placard-right:not(.povseat) .seatcards .card{width:43px !important;height:61px !important} .seat.placard-bottom.povseat{width:176px !important} .seat.placard-bottom.povseat .seatbox{display:flex !important;flex-direction:column !important;align-items:center !important} .seat.placard-bottom.povseat .avatarwrap,.seat.placard-bottom.povseat .nameplate,.seat.placard-bottom.povseat .seatcards,.seat.placard-bottom.povseat .myseatcards{position:relative !important;left:auto !important;right:auto !important;top:auto !important;transform:none !important} .seat.placard-bottom.povseat .nameplate{margin-top:2px !important} .seat.placard-bottom.povseat .seatcards,.seat.placard-bottom.povseat .myseatcards{margin:-10px 0 9px !important;width:auto !important;height:auto !important} /* Keep status text with the side plaque. */ .seat.placard-right:not(.povseat) .pendingchips,.seat.placard-right:not(.povseat) .allin,.seat.placard-right:not(.povseat) .mini{position:absolute !important;left:106px !important;top:123px !important;z-index:15 !important} .seat.placard-left:not(.povseat) .pendingchips,.seat.placard-left:not(.povseat) .allin,.seat.placard-left:not(.povseat) .mini{position:absolute !important;right:106px !important;left:auto !important;top:123px !important;z-index:15 !important} /* Showdown can temporarily center the exposed cards over the avatar, then return to the side layout next hand. */ .showdownseat.placard-left:not(.povseat) .seatcards,.showdownseat.placard-right:not(.povseat) .seatcards,.showdownseat.placard-left:not(.povseat) .myseatcards,.showdownseat.placard-right:not(.povseat) .myseatcards{left:50% !important;right:auto !important;top:44px !important;width:auto !important;transform:translateX(-50%) !important} @media(max-width:1240px){ .seat.placard-left:not(.povseat),.seat.placard-right:not(.povseat){width:204px !important;height:144px !important} .seat.placard-right:not(.povseat) .avatarwrap{left:27px !important;top:35px !important}.seat.placard-left:not(.povseat) .avatarwrap{right:27px !important;top:35px !important} .seat.placard-right:not(.povseat) .nameplate{left:88px !important;top:62px !important}.seat.placard-left:not(.povseat) .nameplate{right:88px !important;top:62px !important} .seat.placard-right:not(.povseat) .seatcards,.seat.placard-right:not(.povseat) .myseatcards{left:89px !important;top:4px !important;width:118px !important}.seat.placard-left:not(.povseat) .seatcards,.seat.placard-left:not(.povseat) .myseatcards{right:89px !important;top:4px !important;width:118px !important} } /* v2.4.26 authoritative side placard layout: no placard may overlap an avatar. */ @media(min-width:761px){ .seat.placard-left:not(.povseat),.seat.placard-right:not(.povseat){width:286px !important;height:156px !important;overflow:visible !important} .seat.placard-left:not(.povseat) .seatbox,.seat.placard-right:not(.povseat) .seatbox{position:relative !important;width:286px !important;height:156px !important;display:block !important;overflow:visible !important} /* Placard to the RIGHT: avatar is fully on the left; cards and plaque form a separate right column. */ .seat.placard-right:not(.povseat) .avatarwrap{position:absolute !important;left:18px !important;right:auto !important;top:31px !important;margin:0 !important;z-index:10 !important} .seat.placard-right:not(.povseat) .seatcards,.seat.placard-right:not(.povseat) .myseatcards{position:absolute !important;left:134px !important;right:auto !important;top:2px !important;width:138px !important;height:66px !important;margin:0 !important;display:flex !important;align-items:flex-end !important;justify-content:center !important;gap:8px !important;transform:none !important;z-index:14 !important} .seat.placard-right:not(.povseat) .nameplate{position:absolute !important;left:128px !important;right:auto !important;top:72px !important;min-width:142px !important;max-width:154px !important;margin:0 !important;z-index:12 !important} /* Placard to the LEFT: exact mirror image. */ .seat.placard-left:not(.povseat) .avatarwrap{position:absolute !important;right:18px !important;left:auto !important;top:31px !important;margin:0 !important;z-index:10 !important} .seat.placard-left:not(.povseat) .seatcards,.seat.placard-left:not(.povseat) .myseatcards{position:absolute !important;right:134px !important;left:auto !important;top:2px !important;width:138px !important;height:66px !important;margin:0 !important;display:flex !important;align-items:flex-end !important;justify-content:center !important;gap:8px !important;transform:none !important;z-index:14 !important} .seat.placard-left:not(.povseat) .nameplate{position:absolute !important;right:128px !important;left:auto !important;top:72px !important;min-width:142px !important;max-width:154px !important;margin:0 !important;z-index:12 !important} .seat.placard-left:not(.povseat) .seatcard,.seat.placard-right:not(.povseat) .seatcard{position:relative !important;margin:0 !important;transform:none !important} .seat.placard-left:not(.povseat) .seatcards .card,.seat.placard-right:not(.povseat) .seatcards .card{width:46px !important;height:65px !important} .seat.placard-right:not(.povseat) .pendingchips,.seat.placard-right:not(.povseat) .allin,.seat.placard-right:not(.povseat) .mini{position:absolute !important;left:136px !important;top:132px !important} .seat.placard-left:not(.povseat) .pendingchips,.seat.placard-left:not(.povseat) .allin,.seat.placard-left:not(.povseat) .mini{position:absolute !important;right:136px !important;left:auto !important;top:132px !important} } /* v2.4.27 hard-override side placard layout */ .seat:not(.povseat){width:260px !important} .seatrow{background:transparent !important;border:none !important;box-shadow:none !important;min-height:unset !important;padding:0 !important;width:100% !important;display:flex !important;align-items:flex-start !important;justify-content:center !important;gap:12px !important;overflow:visible !important} .seatcluster{display:flex !important;flex-direction:column !important;align-items:center !important;gap:3px !important;min-width:138px !important;pointer-events:none} .sideavatar{flex:0 0 auto !important;margin-top:0 !important} .seat.placard-left:not(.povseat) .seatrow{flex-direction:row !important} .seat.placard-right:not(.povseat) .seatrow{flex-direction:row !important} .seat.placard-left:not(.povseat) .seatcluster,.seat.placard-right:not(.povseat) .seatcluster{position:relative !important;left:auto !important;right:auto !important;top:auto !important;transform:none !important} .seat.placard-left:not(.povseat) .nameplate,.seat.placard-right:not(.povseat) .nameplate, .seat.placard-left:not(.povseat) .seatcards,.seat.placard-right:not(.povseat) .seatcards, .seat.placard-left:not(.povseat) .myseatcards,.seat.placard-right:not(.povseat) .myseatcards{position:relative !important;left:auto !important;right:auto !important;top:auto !important;transform:none !important;margin:0 !important} .seat.placard-left:not(.povseat) .seatcards,.seat.placard-right:not(.povseat) .seatcards, .seat.placard-left:not(.povseat) .myseatcards,.seat.placard-right:not(.povseat) .myseatcards{display:flex !important;justify-content:center !important;align-items:flex-end !important;gap:7px !important;height:auto !important;margin-bottom:4px !important} .seat.placard-left:not(.povseat) .nameplate,.seat.placard-right:not(.povseat) .nameplate{min-width:138px !important;max-width:150px !important} .seat.placard-left:not(.povseat) .pendingchips,.seat.placard-right:not(.povseat) .pendingchips, .seat.placard-left:not(.povseat) .allin,.seat.placard-right:not(.povseat) .allin{align-self:center !important} .seat.placard-left:not(.povseat) .seatcards .card,.seat.placard-right:not(.povseat) .seatcards .card{width:43px !important;height:62px !important} .seat.placard-left:not(.povseat) .myseatcards .card,.seat.placard-right:not(.povseat) .myseatcards .card{width:48px !important;height:69px !important} /* Preserve POV seat vertical stack */ .seat.povseat{width:168px !important} .seat.povseat .seatbox{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;min-height:unset !important} .seat.placard-bottom.povseat .nameplate,.seat.placard-bottom.povseat .seatcards,.seat.placard-bottom.povseat .myseatcards{position:relative !important;left:auto !important;right:auto !important;top:auto !important;transform:none !important} @media(max-width:1180px){ .seat:not(.povseat){width:232px !important} .seatcluster{min-width:126px !important} .seat.placard-left:not(.povseat) .nameplate,.seat.placard-right:not(.povseat) .nameplate{min-width:126px !important;max-width:138px !important} .seat.placard-left:not(.povseat) .seatcards .card,.seat.placard-right:not(.povseat) .seatcards .card{width:39px !important;height:56px !important} } @media(max-width:760px){ .seat:not(.povseat){width:108px !important} .seatrow,.seatcluster{display:flex !important;flex-direction:column !important;align-items:center !important;gap:2px !important} .seat.placard-left:not(.povseat) .nameplate,.seat.placard-right:not(.povseat) .nameplate{min-width:96px !important;max-width:116px !important} } /* v2.4.28 synchronized turn/river flip and 8-second winner review */ .boardflip.syncedflip{opacity:1 !important;animation:none !important} .boardflip.syncedflip .flipstack{ animation-name:turnRiverFlipSynced !important; animation-duration:250ms !important; animation-timing-function:linear !important; animation-fill-mode:both !important; animation-delay:var(--sync-flip-delay,0ms) !important; } @keyframes turnRiverFlipSynced{ 0%{transform:rotateY(0deg)} 50%{transform:rotateY(90deg)} 100%{transform:rotateY(180deg)} } /* The pot travels to the winner once, then remains there through the review window. */ .pottransfer,.potawardhold{ position:absolute;z-index:92;pointer-events:none;transform:translate(-50%,-50%); } .pottransfer{ left:50%;top:50%; animation:potTransferToWinner 650ms cubic-bezier(.18,.78,.24,1) both; } @keyframes potTransferToWinner{ 0%{left:50%;top:50%;opacity:1;transform:translate(-50%,-50%) scale(.82)} 70%{opacity:1;transform:translate(-50%,-50%) scale(1.04)} 100%{left:var(--target-left);top:var(--target-top);opacity:1;transform:translate(-50%,-50%) scale(1)} } .potawardhold{opacity:1} .winnerpotpile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;filter:drop-shadow(0 7px 10px rgba(0,0,0,.36))} .winnerpotpile strong{padding:4px 9px;border-radius:999px;background:rgba(5,16,23,.92);border:1px solid rgba(242,207,101,.55);color:#fff2b1;font-size:12px;white-space:nowrap} .settledpot{min-height:64px !important} /* Do not show a generic hand-settlement notification rail. Only show Show/Muck when needed. */ .actionrail:has(.revealchoice){align-self:start} .revealchoice{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;min-height:0 !important} /* v2.4.29 definitive opponent side-seat layout + showdown muck controls */ /* Reset every legacy absolute-position rule on the new opponent seat-row markup. */ .poker-table .seat:not(.povseat) .seatbox.seatrow{ position:relative !important;width:276px !important;height:118px !important;min-height:118px !important; display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important; gap:14px !important;padding:0 !important;margin:0 !important;background:transparent !important;border:0 !important; box-shadow:none !important;overflow:visible !important; } .poker-table .seat:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{ position:relative !important;inset:auto !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important; transform:none !important;margin:0 !important;z-index:10 !important;flex:0 0 auto !important; } .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster{ position:relative !important;inset:auto !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important; transform:none !important;margin:0 !important;width:148px !important;min-width:148px !important;height:auto !important; display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:4px !important; z-index:12 !important;flex:0 0 148px !important; } .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .seatcards, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .myseatcards, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .nameplate, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .pendingchips, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .mini, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .allin, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .winnerhandname{ position:relative !important;inset:auto !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important; transform:none !important;margin-left:0 !important;margin-right:0 !important; } .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .seatcards, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .myseatcards{ width:auto !important;height:auto !important;display:flex !important;justify-content:center !important;align-items:flex-end !important; gap:7px !important;margin:0 0 4px !important;z-index:14 !important; } .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .nameplate{ width:144px !important;min-width:144px !important;max-width:144px !important;margin:0 !important;z-index:12 !important; } /* Left-side table positions show [cards+placard][avatar]; right-side positions show [avatar][cards+placard]. */ .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow{flex-direction:row !important} .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow{flex-direction:row !important} /* Explicitly neutralize older top-seat rules that were causing the placard to cover the avatar. */ .poker-table .seat-north:not(.povseat) .sideavatar, .poker-table .seat-northeast:not(.povseat) .sideavatar, .poker-table .seat-northwest:not(.povseat) .sideavatar{ position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important; } .poker-table .seat-north:not(.povseat) .seatcluster, .poker-table .seat-northeast:not(.povseat) .seatcluster, .poker-table .seat-northwest:not(.povseat) .seatcluster{ position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important; } .showdownchoicecopy{display:flex;flex-direction:column;gap:2px;text-align:center;margin-bottom:6px} .showdownchoicecopy span{font-size:12px;color:#b8c6d0} .choicecomplete{min-height:54px !important;display:grid !important;place-items:center !important;text-align:center} @media(max-width:1180px){ .poker-table .seat:not(.povseat) .seatbox.seatrow{width:242px !important;gap:10px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster{width:132px !important;min-width:132px !important;flex-basis:132px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .nameplate{width:128px !important;min-width:128px !important;max-width:128px !important} } @media(max-width:760px){ .poker-table .seat:not(.povseat) .seatbox.seatrow{width:118px !important;height:auto !important;min-height:0 !important;flex-direction:column !important;gap:2px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster{width:110px !important;min-width:110px !important;flex-basis:auto !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .nameplate{width:104px !important;min-width:104px !important;max-width:104px !important} } /* v2.4.30 wider chat, visually centered table, larger readable chips */ @media(min-width:1181px){ .roomlayout.livegamegrid{grid-template-columns:270px minmax(0,1fr) 270px !important;gap:14px !important} .chatcol{width:270px !important} .actionrail{width:270px !important} .livegamegrid .poker-table{left:50% !important} } @media(min-width:1021px) and (max-width:1180px){ .roomlayout.livegamegrid{grid-template-columns:240px minmax(0,1fr) 240px !important;gap:12px !important} .chatcol{width:240px !important}.actionrail{width:240px !important} .livegamegrid .poker-table{left:50% !important} } /* About 50% larger than the previous 24px labeled chip face. */ .chip-pile.bet,.chip-pile.pot{gap:10px !important} .chipcolumn.labeled{width:42px !important;height:46px !important;overflow:visible !important} .chipcolumn.labeled .chiplabel{width:36px !important;height:36px !important;min-width:36px !important;font-size:10px !important;border-width:4px !important;bottom:0 !important} .chip-pile.bet .chipcolumn.labeled .pokerchip:last-of-type, .chip-pile.pot .chipcolumn.labeled .pokerchip:last-of-type{width:27px !important;height:15px !important;left:7px !important;bottom:3px !important} .betchips{min-height:58px !important;min-width:64px !important;overflow:visible !important} .centerchips{min-height:76px !important;overflow:visible !important} .betamount{font-size:14px !important;padding:5px 11px !important} .runoutbar{display:flex !important;flex-direction:column !important;gap:3px !important} .runoutbar strong{color:#f2d27b;font-size:16px} @media(max-width:760px){ .chipcolumn.labeled{width:31px !important;height:36px !important} .chipcolumn.labeled .chiplabel{width:27px !important;height:27px !important;min-width:27px !important;font-size:8px !important;border-width:3px !important} .chip-pile.bet .chipcolumn.labeled .pokerchip:last-of-type, .chip-pile.pot .chipcolumn.labeled .pokerchip:last-of-type{width:20px !important;height:11px !important;left:5px !important;bottom:2px !important} .betchips{min-height:45px !important}.centerchips{min-height:58px !important} } /* v2.4.31 larger cards + physical dealer button on the felt */ /* Community cards: approximately 50% larger for long-session readability. */ .board{min-height:130px !important;gap:10px !important;align-items:center !important} .board .card.premiumcard,.board .card.premiumback{width:87px !important;height:123px !important;border-radius:11px !important} .board .card.premiumcard .corner.tl,.board .card.premiumcard .corner.br{font-size:28px !important} .board .card.premiumcard .corner.tr{font-size:25px !important} .board .card.premiumcard .pip{font-size:23px !important} .board .card.premiumcard .acepip{font-size:56px !important} .board .courtframe{left:14% !important;right:14% !important;top:18% !important;bottom:12% !important} .board .courtframe img{object-fit:contain !important;padding:5px !important} .boardghost{width:87px !important;height:123px !important} .boardflip .flipstack{width:87px !important;height:123px !important} .boardflip .flipback .card,.boardflip .flipfront .card{width:87px !important;height:123px !important} /* Opponent hole cards and the local player's hole cards are also enlarged about 50%. */ .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .seatcards .card, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .myseatcards .card{width:65px !important;height:93px !important;border-radius:10px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .seatcards, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .myseatcards{gap:8px !important;margin-bottom:6px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster{width:150px !important;min-width:150px !important;flex-basis:150px !important} .seat.povseat .seatcards .card,.seat.povseat .myseatcards .card{width:75px !important;height:107px !important;border-radius:11px !important} .seat.povseat .seatcards,.seat.povseat .myseatcards{gap:10px !important;margin-bottom:8px !important} .seat.povseat{width:182px !important} /* Scale card markings/art with the larger hole cards. */ .poker-table .seat .card.premiumcard .corner.tl,.poker-table .seat .card.premiumcard .corner.br{font-size:19px !important} .poker-table .seat .card.premiumcard .corner.tr{font-size:17px !important} .poker-table .seat .card.premiumcard .pip{font-size:16px !important} .poker-table .seat .card.premiumcard .acepip{font-size:42px !important} .poker-table .seat.povseat .card.premiumcard .corner.tl,.poker-table .seat.povseat .card.premiumcard .corner.br{font-size:22px !important} .poker-table .seat.povseat .card.premiumcard .corner.tr{font-size:20px !important} .poker-table .seat.povseat .card.premiumcard .pip{font-size:19px !important} .poker-table .seat.povseat .card.premiumcard .acepip{font-size:48px !important} .poker-table .seat .courtframe{left:15% !important;right:15% !important;top:20% !important;bottom:13% !important} .poker-table .seat .courtframe img{object-fit:contain !important;padding:4px !important} /* The dealer button is a physical marker on the felt, never inside a player's name plate. */ .dealerbuttonfelt{ position:absolute;z-index:34;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%; display:grid;place-items:center;background:linear-gradient(180deg,#fff,#d9d9d9);color:#101418; border:3px solid #f5f5f5;box-shadow:0 3px 0 #8a8a8a,0 6px 12px rgba(0,0,0,.4),inset 0 0 0 1px #a8a8a8; font-size:15px;font-weight:1000;pointer-events:none; } /* Legacy in-name dealer badge is retired. */ .nameplate .dealer{display:none !important} /* More room for the larger board while preserving the centered desktop table. */ @media(min-width:1021px){ .livegamegrid .poker-table{width:min(680px,80%) !important;height:390px !important} .livegamegrid .tablewrap{height:clamp(570px,calc(100vh - 180px),740px) !important} .felt-center{gap:10px !important} } @media(max-width:1180px) and (min-width:761px){ .board .card.premiumcard,.board .card.premiumback{width:78px !important;height:110px !important} .boardghost{width:78px !important;height:110px !important} .boardflip .flipstack,.boardflip .flipback .card,.boardflip .flipfront .card{width:78px !important;height:110px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .seatcards .card{width:58px !important;height:83px !important} .seat.povseat .seatcards .card,.seat.povseat .myseatcards .card{width:68px !important;height:97px !important} } @media(max-width:760px){ .board{min-height:86px !important;gap:6px !important} .board .card.premiumcard,.board .card.premiumback{width:55px !important;height:78px !important} .boardghost{width:55px !important;height:78px !important} .boardflip .flipstack,.boardflip .flipback .card,.boardflip .flipfront .card{width:55px !important;height:78px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .seatcards .card{width:42px !important;height:60px !important} .seat.povseat .seatcards .card,.seat.povseat .myseatcards .card{width:50px !important;height:72px !important} .dealerbuttonfelt{width:28px;height:28px;font-size:12px;border-width:2px} } /* v2.4.32 tighter side placard layout and remove overlapping waiting status */ .statusline{display:none !important} /* Make opponent placard sit just behind / touching the avatar instead of floating far away */ .poker-table .seat:not(.povseat) .seatbox.seatrow{gap:0 !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{position:relative !important;z-index:3 !important} .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-right:-18px !important} .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-left:-18px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster{position:relative !important;z-index:1 !important} .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .seatcluster{align-items:flex-start !important;padding-left:10px !important} .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .seatcluster{align-items:flex-end !important;padding-right:10px !important} .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .seatcluster > .nameplate{margin-top:0 !important} .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .seatcluster > .nameplate{margin-top:0 !important} /* In lobby/waiting state, no cards are shown, so tighten even more */ .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster:has(> .nameplate:first-child), .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster:not(:has(> .seatcards)):not(:has(> .myseatcards)){ padding-top:14px !important; } @media(max-width:1180px){ .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-right:-14px !important} .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-left:-14px !important} } @media(max-width:760px){ .poker-table .seat:not(.povseat) .seatbox.seatrow{gap:2px !important} .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar, .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-left:0 !important;margin-right:0 !important} .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .seatcluster, .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .seatcluster{padding-left:0 !important;padding-right:0 !important;align-items:center !important} } /* v2.4.33 top-seat proximity and smaller shared board cards */ /* Bring top-side opponents down closer to the rail so avatars almost touch the table and do not crowd the top toolbar. */ .poker-table .seat-north:not(.povseat), .poker-table .seat-northeast:not(.povseat), .poker-table .seat-northwest:not(.povseat){ transform:translate(-50%,-26%) !important; } /* Keep the avatar and placard as a compact touching unit for top/upper seats. */ .poker-table .seat-north:not(.povseat) .seatbox.seatrow, .poker-table .seat-northeast:not(.povseat) .seatbox.seatrow, .poker-table .seat-northwest:not(.povseat) .seatbox.seatrow{ align-items:flex-end !important; } .poker-table .seat-north:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar, .poker-table .seat-northeast:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar, .poker-table .seat-northwest:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{ margin-bottom:2px !important; } /* Shared community cards should stay fully inside the center of the table and away from the dealer button and pot chips. */ .board{min-height:98px !important;gap:8px !important;align-items:center !important} .board .card.premiumcard,.board .card.premiumback{width:66px !important;height:93px !important;border-radius:10px !important} .board .card.premiumcard .corner.tl,.board .card.premiumcard .corner.br{font-size:22px !important} .board .card.premiumcard .corner.tr{font-size:20px !important} .board .card.premiumcard .pip{font-size:18px !important} .board .card.premiumcard .acepip{font-size:44px !important} .board .courtframe{left:16% !important;right:16% !important;top:19% !important;bottom:13% !important} .boardghost{width:66px !important;height:93px !important} .boardflip .flipstack,.boardflip .flipback .card,.boardflip .flipfront .card{width:66px !important;height:93px !important} .felt-center{gap:11px !important} @media(max-width:1180px){ .board{min-height:88px !important;gap:7px !important} .board .card.premiumcard,.board .card.premiumback{width:60px !important;height:85px !important} .boardghost{width:60px !important;height:85px !important} .boardflip .flipstack,.boardflip .flipback .card,.boardflip .flipfront .card{width:60px !important;height:85px !important} } @media(max-width:760px){ .poker-table .seat-north:not(.povseat), .poker-table .seat-northeast:not(.povseat), .poker-table .seat-northwest:not(.povseat){ transform:translate(-50%,-36%) !important; } .board{min-height:76px !important;gap:5px !important} .board .card.premiumcard,.board .card.premiumback{width:52px !important;height:74px !important} .boardghost{width:52px !important;height:74px !important} .boardflip .flipstack,.boardflip .flipback .card,.boardflip .flipfront .card{width:52px !important;height:74px !important} } /* v2.4.34 center clarity cleanup */ .potbreakdown{display:none !important} /* Keep chip stacks from covering amount pills. */ .betbubble{gap:7px !important} .betamount{position:relative !important;z-index:8 !important;margin-top:7px !important} .centerchips{position:relative !important;z-index:4 !important} .pot-zone{gap:8px !important} .pot-zone .totalpot{position:relative !important;z-index:9 !important} /* Dealer button should sit beside the center pot text, never on top of it. */ .dealerbuttonfelt{z-index:12 !important} @media(max-width:760px){ .betbubble{gap:5px !important} .betamount{margin-top:5px !important} } /* v2.4.36 seat-touch and center-board alignment fixes */ /* Make opponent placard touch / tuck behind the avatar with almost no visible gap. */ .poker-table .seat:not(.povseat) .seatbox.seatrow{gap:0 !important;align-items:center !important} .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-right:-30px !important} .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-left:-30px !important} .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .seatcluster{padding-left:0 !important;margin-left:-2px !important;align-items:flex-start !important} .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .seatcluster{padding-right:0 !important;margin-right:-2px !important;align-items:flex-end !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .nameplate{margin-top:0 !important} /* Waiting state with no cards: placard should still sit snugly against avatar. */ .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster:not(:has(> .seatcards)):not(:has(> .myseatcards)){ padding-top:0 !important; justify-content:center !important; } /* Move the center-table info stack down so the shared board sits in the true middle of the felt. */ .poker-table .felt-center{top:54% !important;transform:translateY(-50%) !important;align-content:center !important;gap:9px !important} .poker-table .board{margin-top:0 !important;margin-bottom:2px !important;min-height:92px !important} .poker-table .pot-zone{margin-top:0 !important} .poker-table .street{margin-top:0 !important} @media(max-width:1180px){ .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-right:-24px !important} .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-left:-24px !important} .poker-table .felt-center{top:53% !important} } @media(max-width:760px){ .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar, .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-left:0 !important;margin-right:0 !important} .poker-table .felt-center{top:52% !important;gap:7px !important} .poker-table .board{min-height:74px !important} } /* v2.4.37 compact opponent-seat layout: eliminate wasted horizontal gap */ /* Use a tighter seat footprint so 9-handed tables have room. */ .poker-table .seat:not(.povseat){width:220px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow{ width:max-content !important; min-width:0 !important; height:auto !important; min-height:0 !important; justify-content:flex-start !important; gap:0 !important; } .poker-table .seat:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{ z-index:4 !important; } /* Pull the placard/cards cluster directly into the avatar so they touch / tuck behind it. */ .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-right:-38px !important} .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-left:-38px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster{ width:134px !important; min-width:134px !important; flex:0 0 134px !important; gap:2px !important; } .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .seatcluster{ margin-left:-8px !important; padding-left:0 !important; align-items:flex-start !important; } .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .seatcluster{ margin-right:-8px !important; padding-right:0 !important; align-items:flex-end !important; } .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .nameplate{ width:132px !important; min-width:132px !important; max-width:132px !important; } .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .seatcards, .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .myseatcards{ gap:5px !important; margin-bottom:2px !important; } /* If no cards are showing, keep the placard vertically centered and snug against the avatar. */ .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster:not(:has(> .seatcards)):not(:has(> .myseatcards)){ padding-top:0 !important; margin-top:0 !important; } @media(max-width:1180px){ .poker-table .seat:not(.povseat){width:198px !important} .poker-table .seat.placard-right:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-right:-30px !important} .poker-table .seat.placard-left:not(.povseat) .seatbox.seatrow > .avatarwrap.sideavatar{margin-left:-30px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster{width:122px !important;min-width:122px !important;flex-basis:122px !important} .poker-table .seat:not(.povseat) .seatbox.seatrow > .seatcluster > .nameplate{width:120px !important;min-width:120px !important;max-width:120px !important} } @media(max-width:760px){ .poker-table .seat:not(.povseat){width:118px !important} } /* v2.4.38 pre-game host controls live in the right rail */ .actionrail > .pregame{ width:100% !important; margin:0 !important; padding:14px !important; max-height:calc(100vh - 150px) !important; overflow:auto !important; position:static !important; } .actionrail > .pregame .pregamehead{display:block !important} .actionrail > .pregame .pregamehead h3{font-size:16px !important;line-height:1.25 !important} .actionrail > .pregame .pregamehead .muted{font-size:11px !important;line-height:1.35 !important} .actionrail > .pregame .result{font-size:11px !important;line-height:1.35 !important;padding:9px 10px !important} .actionrail > .pregame .pregameplayers{grid-template-columns:1fr !important;gap:6px !important;margin:10px 0 !important} .actionrail > .pregame .pregameplayer{padding:7px 8px !important;gap:7px !important} .actionrail > .pregame .miniavatar{width:30px !important;height:30px !important} .actionrail > .pregame .startbudget{padding:10px !important;margin-top:10px !important} .actionrail > .pregame .startbudget h3{font-size:15px !important} .actionrail > .pregame .startbudget p{font-size:10px !important;line-height:1.35 !important;margin:4px 0 8px !important} .actionrail > .pregame .budgetgrid{grid-template-columns:1fr !important;gap:6px !important;margin:8px 0 !important} .actionrail > .pregame .budgetrow{padding:7px 8px !important;gap:6px !important} .actionrail > .pregame .budgetrow input{width:86px !important;padding:8px 7px !important} .actionrail > .pregame .startgame{font-size:13px !important;padding:10px 8px !important} .actionrail > .pregame .pregameactions{display:grid !important;grid-template-columns:1fr !important;gap:7px !important} @media(max-width:1020px){ .actionrail > .pregame{width:min(720px,96%) !important;max-height:none !important;margin:10px auto 0 !important} } /* v2.4.39 desktop layout: bottom-left chat and bottom-right action rail */ .roomlayout.livegamegrid{ align-items:stretch !important; grid-template-columns:220px minmax(0,1fr) 255px !important; gap:12px !important; } .chatcol,.actionrail{display:flex !important;flex-direction:column !important} .chatcol{justify-content:flex-end !important} .actionrail{justify-content:flex-end !important;align-self:stretch !important;position:relative;z-index:300} .livegamegrid .tablewrap{height:clamp(540px,calc(100vh - 180px),720px) !important} .livegamegrid .chatpanel{ position:sticky !important; top:auto !important; bottom:10px !important; min-height:0 !important; height:clamp(280px,42vh,390px) !important; max-height:390px !important; padding:11px !important; border-radius:14px !important; } .livegamegrid .chatmessages{min-height:0 !important;max-height:none !important;flex:1 !important} .livegamegrid .chatcomposer textarea{min-height:52px !important} .chatpanel.minimized{height:auto !important;max-height:none !important;min-height:0 !important;padding:11px !important} .chatpanel.minimized .chatheader{margin-bottom:0 !important;padding-bottom:0 !important;border-bottom:none !important} .chattoggle{white-space:nowrap !important;padding:8px 12px !important;font-size:12px !important} .actionrail .actionbar, .actionrail .actionbar.actionconsole, .actionrail .actionbar.waitingbar{ position:sticky !important; top:auto !important; bottom:10px !important; align-self:flex-end !important; width:100% !important; max-width:255px !important; margin:0 !important; } .actionrail .actionbar.actionconsole{box-shadow:0 18px 42px rgba(0,0,0,.34) !important} /* keep table visually centered even with asymmetrical side rails */ .tablecol{display:flex !important;align-items:center !important;justify-content:center !important} .livegamegrid .poker-table{left:50% !important;top:48% !important} @media(min-width:1181px){ .roomlayout.livegamegrid{grid-template-columns:220px minmax(0,1fr) 255px !important;gap:12px !important} .chatcol{width:220px !important}.actionrail{width:255px !important} } @media(min-width:1021px) and (max-width:1180px){ .roomlayout.livegamegrid{grid-template-columns:190px minmax(0,1fr) 230px !important;gap:10px !important} .chatcol{width:190px !important}.actionrail{width:230px !important} .livegamegrid .chatpanel{height:clamp(250px,38vh,340px) !important;max-height:340px !important} .actionrail .actionbar,.actionrail .actionbar.actionconsole,.actionrail .actionbar.waitingbar{max-width:230px !important} } @media(max-width:1020px){ .chatcol,.actionrail{display:block !important} .livegamegrid .chatpanel, .actionrail .actionbar, .actionrail .actionbar.actionconsole, .actionrail .actionbar.waitingbar{position:static !important;bottom:auto !important;max-width:none !important} } /* v2.4.40 repair broken pre-game table layout */ /* Keep the center column from collapsing when side rails are flex containers. */ .tablecol{min-width:0 !important;width:100% !important;display:flex !important;align-items:center !important;justify-content:center !important} .livegamegrid .tablewrap{ width:100% !important; min-width:0 !important; position:relative !important; overflow:visible !important; } /* The poker table must size against the full table column, not a collapsed fit-content box. */ .livegamegrid .poker-table{ width:min(700px,92%) !important; min-width:560px !important; max-width:700px !important; height:390px !important; left:50% !important; top:48% !important; } /* Pregame rail stays on the right without squeezing the table below usability. */ .roomlayout.livegamegrid{grid-template-columns:200px minmax(560px,1fr) 255px !important;gap:12px !important} .actionrail > .pregame{ position:sticky !important; top:10px !important; bottom:auto !important; align-self:flex-start !important; } /* Chat remains a smaller lower-left panel and can still be minimized. */ .chatcol{justify-content:flex-end !important;min-width:0 !important} .livegamegrid .chatpanel{width:100% !important} @media(min-width:1021px) and (max-width:1180px){ .roomlayout.livegamegrid{grid-template-columns:180px minmax(500px,1fr) 230px !important;gap:10px !important} .livegamegrid .poker-table{width:min(620px,92%) !important;min-width:500px !important;height:360px !important} } @media(max-width:1020px){ .tablecol{display:block !important} .livegamegrid .tablewrap{width:100% !important} .livegamegrid .poker-table{min-width:0 !important;max-width:none !important;width:min(720px,96%) !important;height:380px !important} } /* v2.4.41 lower side panels beside the POV seat */ @media(min-width:1021px){ .roomlayout.livegamegrid{ grid-template-columns:280px minmax(560px,1fr) 320px !important; gap:16px !important; align-items:end !important; } .chatcol{width:280px !important;justify-content:flex-end !important;align-self:end !important} .actionrail{width:320px !important;justify-content:flex-end !important;align-self:end !important} .livegamegrid .tablewrap{ height:clamp(470px,calc(100vh - 270px),560px) !important; min-height:470px !important; } .livegamegrid .poker-table{ width:min(700px,94%) !important; max-width:700px !important; min-width:560px !important; height:390px !important; top:42.5% !important; } /* Chat should live only in the lower-left region and stay below the upper side seats. */ .livegamegrid .chatpanel{ position:sticky !important; bottom:8px !important; top:auto !important; width:100% !important; height:190px !important; max-height:190px !important; min-height:190px !important; padding:10px !important; } .livegamegrid .chatheader{padding-bottom:8px !important;margin-bottom:8px !important} .livegamegrid .chatheader .muted{font-size:11px !important;line-height:1.25 !important} .livegamegrid .chatmessages{min-height:0 !important;max-height:72px !important;overflow:auto !important;flex:1 1 auto !important} .livegamegrid .chatcomposer{display:grid !important;gap:6px !important} .livegamegrid .chatcomposer textarea{min-height:44px !important;height:44px !important;padding:10px !important} .livegamegrid .chatactions{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important} .livegamegrid .chatactions .smalltext{font-size:10px !important;line-height:1.2 !important;max-width:180px !important} .livegamegrid .chatpanel.minimized{ height:auto !important;min-height:0 !important;max-height:none !important; } /* Action box should sit low/right of the POV player and be wider but shorter. */ .actionrail .actionbar, .actionrail .actionbar.actionconsole, .actionrail .actionbar.waitingbar{ max-width:320px !important; width:100% !important; bottom:8px !important; } .actionrail .actionbar.actionconsole{ padding:10px 12px !important; border-radius:16px !important; } .actionrail .consoletimer{ position:static !important; justify-content:center !important; margin-bottom:6px !important; font-size:11px !important; } .actionrail .consoletimer strong{font-size:24px !important} .actionrail .timewarning, .actionrail .extensiontimer{margin:0 0 6px 0 !important} .actionrail .betcontrol{gap:5px !important} .actionrail .betcontrolhead{grid-template-columns:1fr 86px !important;gap:8px !important} .actionrail .betcontrolhead input{width:86px !important;padding:8px 10px !important} .actionrail .betslider{height:22px !important} .actionrail .betquick{grid-template-columns:1fr 1fr !important;gap:6px !important} .actionrail .betquick .btn{font-size:11px !important;padding:6px 5px !important} .actionrail .actionbuttons{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:7px !important} .actionrail .actionbig{ min-height:48px !important; font-size:17px !important; line-height:1.1 !important; padding:8px 6px !important; } } @media(min-width:1021px) and (max-width:1280px){ .roomlayout.livegamegrid{grid-template-columns:250px minmax(500px,1fr) 290px !important;gap:12px !important} .chatcol{width:250px !important}.actionrail{width:290px !important} .actionrail .actionbar,.actionrail .actionbar.actionconsole,.actionrail .actionbar.waitingbar{max-width:290px !important} .livegamegrid .chatpanel{height:180px !important;max-height:180px !important;min-height:180px !important} .livegamegrid .chatmessages{max-height:64px !important} .livegamegrid .poker-table{width:min(640px,96%) !important;min-width:500px !important;height:360px !important;top:41.5% !important} .livegamegrid .tablewrap{height:clamp(450px,calc(100vh - 280px),520px) !important;min-height:450px !important} } /* v2.4.44 wider/lower chat with usable scrollable hand history */ @media(min-width:1021px){ /* Give the chat roughly one extra inch of width without changing the table itself. */ .roomlayout.livegamegrid{ grid-template-columns:376px minmax(560px,1fr) 320px !important; gap:16px !important; } .chatcol{ width:376px !important; align-self:end !important; justify-content:flex-end !important; position:relative !important; z-index:120 !important; } /* Move the whole chat panel down roughly 1.5 inches (about 144 CSS px). */ .livegamegrid .chatpanel{ position:relative !important; top:144px !important; bottom:auto !important; width:376px !important; height:300px !important; min-height:300px !important; max-height:300px !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; } .livegamegrid .chatheader{ flex:0 0 auto !important; padding-bottom:8px !important; margin-bottom:8px !important; } /* Restore a genuinely useful scroll area for player messages and hand summaries. */ .livegamegrid .chatmessages{ flex:1 1 auto !important; min-height:135px !important; max-height:none !important; overflow-y:auto !important; overflow-x:hidden !important; padding-right:7px !important; overscroll-behavior:contain !important; scrollbar-gutter:stable !important; } .livegamegrid .chatcomposer{ flex:0 0 auto !important; padding-top:8px !important; gap:6px !important; } .livegamegrid .chatcomposer textarea{ height:50px !important; min-height:50px !important; max-height:50px !important; } .livegamegrid .chatactions .smalltext{ max-width:245px !important; } .livegamegrid .chatpanel.minimized{ top:144px !important; height:auto !important; min-height:0 !important; max-height:none !important; } } @media(min-width:1021px) and (max-width:1350px){ .roomlayout.livegamegrid{ grid-template-columns:330px minmax(500px,1fr) 290px !important; gap:12px !important; } .chatcol{width:330px !important} .livegamegrid .chatpanel{width:330px !important;top:120px !important} .livegamegrid .chatpanel.minimized{top:120px !important} .livegamegrid .chatactions .smalltext{max-width:205px !important} } @media(max-width:1020px){ .livegamegrid .chatmessages{ min-height:180px !important; max-height:320px !important; overflow-y:auto !important; } } /* v2.4.45 keep the pot readable when the POV player bets */ /* Put the total-pot stack above the board, and keep its labels layered above chips. */ .poker-table .felt-center{ gap:10px !important; } .poker-table .felt-center > .pot-zone{ order:1 !important; margin-bottom:4px !important; } .poker-table .felt-center > .board{ order:2 !important; } .poker-table .felt-center > .street{ order:3 !important; } .poker-table .pot-zone{ position:relative !important; z-index:20 !important; } .poker-table .pot-zone .totalpot, .poker-table .pot-zone .pot{ position:relative !important; z-index:22 !important; } .poker-table .centerchips{ position:relative !important; z-index:21 !important; } .poker-table .betspot.mebetspot{transform:translateX(20px) !important} @media(max-width:760px){.poker-table .betspot.mebetspot{transform:translateX(14px) !important}} /* v2.4.46 lower and shorten desktop chat/action panels */ @media(min-width:1201px){ .livegamegrid .chatpanel{ height:160px !important; max-height:160px !important; min-height:160px !important; bottom:8px !important; } .livegamegrid .chatmessages{ min-height:0 !important; flex:1 1 auto !important; max-height:none !important; overflow:auto !important; } .livegamegrid .chatinputwrap, .livegamegrid .chatcomposer{ margin-top:8px !important; } .actionrail .actionbar, .actionrail .actionbar.actionconsole, .actionrail .actionbar.waitingbar{ height:160px !important; max-height:160px !important; min-height:160px !important; bottom:8px !important; padding:9px 12px !important; } .actionrail .actionbar.actionconsole{ display:grid !important; grid-template-rows:auto auto 1fr !important; gap:6px !important; } .actionrail .consoletimer{ margin-bottom:0 !important; min-height:0 !important; } .actionrail .betcontrol{ gap:4px !important; } .actionrail .actionbuttons{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; align-self:end !important; } .actionrail .actionbig{ min-height:42px !important; max-height:42px !important; font-size:15px !important; padding:8px 6px !important; } } /* v2.4.47 professional lower-panel alignment */ @media(min-width:1021px){ /* JS aligns these exact top edges to the top of the POV avatar. Neutralize older offsets. */ .livegamegrid .chatpanel, .actionrail .actionbar, .actionrail .actionbar.actionconsole, .actionrail .actionbar.waitingbar{ position:relative !important; top:0 !important; bottom:auto !important; margin:0 !important; } /* Matched panel heights so the two lower rails read as one clean visual system. */ .livegamegrid .chatpanel{ height:185px !important; min-height:185px !important; max-height:185px !important; overflow:hidden !important; } .chatpanel.minimized{ height:auto !important; min-height:0 !important; max-height:none !important; } .livegamegrid .chatmessages{ min-height:0 !important; max-height:none !important; flex:1 1 auto !important; overflow-y:auto !important; overflow-x:hidden !important; } .livegamegrid .chatcomposer{ margin-top:4px !important; padding-top:5px !important; gap:4px !important; } .livegamegrid .chatcomposer textarea{ height:42px !important; min-height:42px !important; max-height:42px !important; } .livegamegrid .chatactions{min-height:32px !important} .actionrail .actionbar, .actionrail .actionbar.actionconsole, .actionrail .actionbar.waitingbar{ height:185px !important; min-height:185px !important; max-height:185px !important; overflow:hidden !important; } .actionrail .actionbar.actionconsole{ position:relative !important; display:grid !important; grid-template-rows:24px auto 46px !important; align-content:start !important; gap:5px !important; padding:8px 10px !important; } .actionrail .consoletimer{ position:static !important; height:24px !important; min-height:24px !important; margin:0 !important; padding:2px 6px !important; justify-content:center !important; } .actionrail .consoletimer strong{font-size:20px !important} .actionrail .betcontrol{ min-height:0 !important; gap:3px !important; padding:0 !important; } .actionrail .betcontrolhead{ grid-template-columns:1fr 80px !important; gap:6px !important; min-height:30px !important; } .actionrail .betcontrolhead input{ width:80px !important; height:30px !important; padding:5px 8px !important; } .actionrail .betslider{ width:100% !important; height:18px !important; margin:0 !important; } .actionrail .betquick{ grid-template-columns:1fr 1fr !important; gap:5px !important; } .actionrail .betquick .btn{ min-height:26px !important; padding:4px 5px !important; font-size:10px !important; } .actionrail .actionbuttons{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; min-height:46px !important; align-self:end !important; } .actionrail .actionbig{ width:100% !important; height:46px !important; min-height:46px !important; max-height:46px !important; padding:6px 4px !important; font-size:15px !important; line-height:1.05 !important; overflow:hidden !important; } .actionrail .raisebig span{ font-size:11px !important; margin-top:1px !important; } /* Warning/time-bank state overlays the timer row rather than making the panel taller. */ .actionrail .timewarning.active, .actionrail .extensiontimer.active{ position:absolute !important; left:10px !important; right:10px !important; top:8px !important; height:32px !important; min-height:32px !important; margin:0 !important; padding:4px 7px !important; z-index:10 !important; overflow:hidden !important; } .actionrail .timewarning.active > strong{font-size:18px !important;min-width:36px !important} .actionrail .timewarning.active > span, .actionrail .extensiontimer.active{font-size:10px !important} .actionrail .timebank{padding:4px 7px !important;font-size:10px !important} } /* v2.4.48 extend only the bottom of the open chat panel */ @media(min-width:1021px){ .livegamegrid .chatpanel:not(.minimized){ overflow:hidden !important; display:flex !important; flex-direction:column !important; } .livegamegrid .chatpanel:not(.minimized) .chatheader, .livegamegrid .chatpanel:not(.minimized) .chatcomposer{ flex:0 0 auto !important; } .livegamegrid .chatpanel:not(.minimized) .chatmessages{ flex:1 1 auto !important; min-height:90px !important; max-height:none !important; overflow-y:auto !important; overflow-x:hidden !important; scrollbar-gutter:stable !important; } } /* v2.4.49 responsive laptop/monitor live-table fit */ @media(min-width:1021px){ .roomlayout.livegamegrid{ align-items:start !important; min-height:0 !important; } .tablecol,.chatcol,.actionrail{min-height:0 !important} .livegamegrid .tablewrap{ min-height:0 !important; max-height:none !important; padding:0 !important; margin:0 !important; overflow:visible !important; } .livegamegrid .poker-table{ transform-origin:center center !important; will-change:transform !important; } /* JS supplies padding-top from the actual POV avatar location. These rails must not pull content upward. */ .chatcol,.actionrail{ justify-content:flex-start !important; align-self:start !important; } .livegamegrid .chatpanel, .actionrail .actionbar, .actionrail .actionbar.actionconsole, .actionrail .actionbar.waitingbar{ top:0 !important; bottom:auto !important; } .livegamegrid .chatpanel:not(.minimized) .chatmessages{ min-height:72px !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain !important; scrollbar-gutter:stable !important; } } /* Compact the page chrome on laptop-height screens to leave more room for the actual game. */ @media(min-width:1021px) and (max-height:950px){ .shell{padding-top:10px !important;padding-bottom:6px !important} .brandrow{margin-bottom:8px !important} .brandlogo{width:44px !important;height:44px !important} .brand h1{font-size:22px !important} .brand .muted{font-size:13px !important} .topbar{margin-bottom:6px !important;align-items:center !important} .topbar h2{font-size:21px !important} .topbar .muted{font-size:12px !important} .toolbar{gap:6px !important} .toolbar .btn{padding:8px 11px !important;font-size:13px !important} .accountbar{gap:7px !important} .accountavatar{width:38px !important;height:38px !important} .roomlayout.livegamegrid{gap:10px !important} } @media(min-width:1021px) and (max-height:820px){ .shell{padding-top:6px !important} .brandrow{margin-bottom:5px !important} .brandlogo{width:38px !important;height:38px !important} .brand h1{font-size:19px !important} .brand .muted{font-size:11px !important} .topbar h2{font-size:18px !important} .toolbar .btn{padding:7px 9px !important;font-size:12px !important} .topbar{margin-bottom:3px !important} } /* Width-responsive rails: preserve the centered table instead of clipping it on common laptops. */ @media(min-width:1361px){ .roomlayout.livegamegrid{grid-template-columns:330px minmax(0,1fr) 300px !important;gap:14px !important} .chatcol{width:330px !important}.actionrail{width:300px !important} } @media(min-width:1181px) and (max-width:1360px){ .roomlayout.livegamegrid{grid-template-columns:275px minmax(0,1fr) 270px !important;gap:10px !important} .chatcol{width:275px !important}.actionrail{width:270px !important} .livegamegrid .chatpanel{width:275px !important} } @media(min-width:1021px) and (max-width:1180px){ .roomlayout.livegamegrid{grid-template-columns:235px minmax(0,1fr) 240px !important;gap:8px !important} .chatcol{width:235px !important}.actionrail{width:240px !important} .livegamegrid .chatpanel{width:235px !important} } /* v2.4.50 responsive cleanup: lobby scales, chat composer visible, larger table/avatars */ @media(min-width:1021px){ /* Lobby landing should remain readable on laptop widths and keep the right-side panels scrollable. */ .lobbylanding{ grid-template-columns:minmax(0,1fr) 560px !important; gap:18px !important; align-items:start !important; } .lobbysidebar{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:18px !important; min-width:0 !important; } .roompreview,.createlobby{ min-height:0 !important; max-height:calc(100vh - 170px) !important; overflow:auto !important; } } @media(min-width:1021px) and (max-width:1380px){ .lobbylanding{grid-template-columns:minmax(0,1fr) 500px !important} .lobbysidebar{gap:14px !important} } @media(min-width:1021px){ /* Make the table use more of the center space now that the responsive scaling is stable. */ .livegamegrid.playingstate{grid-template-columns:360px minmax(620px,1fr) 340px !important;gap:18px !important} .livegamegrid.lobbystate{grid-template-columns:360px minmax(620px,1fr) 340px !important;gap:18px !important} .livegamegrid .poker-table{ width:min(780px,98%) !important; max-width:780px !important; min-width:600px !important; height:420px !important; } .livegamegrid.lobbystate .tablewrap{height:clamp(440px,calc(100vh - 210px),620px) !important;min-height:440px !important} .livegamegrid.playingstate .tablewrap{height:clamp(470px,calc(100vh - 210px),640px) !important;min-height:470px !important} .poker-table .seatavatar{width:100px !important;height:100px !important} .poker-table .seat.povseat .seatavatar{width:122px !important;height:122px !important} /* Chat panel: keep the composer fully visible and scroll the history instead of clipping the bottom. */ .livegamegrid .chatpanel{ width:100% !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; } .livegamegrid .chatheader{flex:0 0 auto !important} .livegamegrid .chatmessages{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding-right:6px !important; } .livegamegrid .chatcomposer{ flex:0 0 auto !important; display:grid !important; gap:8px !important; padding-top:8px !important; margin-top:auto !important; } .livegamegrid .chatcomposer textarea{ display:block !important; width:100% !important; min-height:58px !important; height:58px !important; max-height:58px !important; resize:none !important; } .livegamegrid .chatactions{flex:0 0 auto !important;align-items:center !important} /* During pre-game, the host setup should own the full right rail because it disappears once play begins. */ .livegamegrid.lobbystate .actionrail{align-self:stretch !important;justify-content:flex-start !important} .livegamegrid.lobbystate .actionrail > .pregame{ width:100% !important; height:auto !important; min-height:440px !important; max-height:calc(100vh - 170px) !important; overflow:auto !important; } .livegamegrid.lobbystate .chatcol{align-self:end !important;justify-content:flex-end !important} .livegamegrid.lobbystate .chatpanel{ min-height:300px !important; height:300px !important; max-height:420px !important; } /* In live play, keep the chat and action boxes no higher than the top of the POV avatar. */ .livegamegrid.playingstate .chatcol, .livegamegrid.playingstate .actionrail{align-self:stretch !important} } @media(min-width:1021px) and (max-width:1280px){ .livegamegrid.playingstate, .livegamegrid.lobbystate{grid-template-columns:320px minmax(520px,1fr) 300px !important;gap:14px !important} .livegamegrid .poker-table{width:min(720px,98%) !important;min-width:520px !important;height:392px !important} .poker-table .seatavatar{width:92px !important;height:92px !important} .poker-table .seat.povseat .seatavatar{width:112px !important;height:112px !important} } /* v2.4.51 lobby scaling + wider live chat + laptop bottom-safe panels */ /* Use the available browser width instead of constraining these pages to the old 1320px shell. */ .shell:has(.lobbylanding), .shell:has(.livegamegrid){ width:100% !important; max-width:1760px !important; } /* Lobby: one usable right sidebar, no tiny side-by-side preview/create panels or internal horizontal scrollbars. */ @media(min-width:1021px){ .lobbylanding{ grid-template-columns:minmax(0,1fr) minmax(390px,460px) !important; gap:18px !important; align-items:start !important; } .lobbysidebar{ display:grid !important; grid-template-columns:1fr !important; gap:16px !important; min-width:0 !important; overflow:visible !important; } .lobbysidebar .roompreview, .lobbysidebar .createlobby{ width:100% !important; min-width:0 !important; max-width:none !important; min-height:0 !important; max-height:none !important; overflow:visible !important; } .createlobby .tabs{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; } .createlobby .tabs .btn{ width:100% !important; min-width:0 !important; white-space:normal !important; } /* Both mode selectors deliberately share the same neutral color. Selection is an outline, not a different fill. */ .createlobby .tabs .btn.secondary{background:#243846 !important} .createlobby .tabs .btn.selectedtab{ background:#243846 !important; box-shadow:inset 0 0 0 2px rgba(218,177,77,.72) !important; } /* Both create buttons share the gold action color. */ .createlobby .createGameSubmit{background:#a97824 !important} } @media(min-width:1021px) and (max-width:1380px){ .lobbylanding{grid-template-columns:minmax(0,1fr) minmax(360px,420px) !important;gap:14px !important} .lobbyrooms{padding:16px !important} .lobbysidebar .panel{padding:16px !important} } @media(min-width:1021px) and (max-height:820px){ .lobbylanding{gap:12px !important} .lobbyrooms,.lobbysidebar .panel{padding:14px !important} .lobbyheading p{margin-bottom:8px !important} .roompreview .previewplayers{max-height:220px !important} } /* Live table: consume the left-side dead space by widening chat toward the POV avatar. */ @media(min-width:1361px){ .livegamegrid.playingstate{grid-template-columns:430px minmax(0,1fr) 340px !important;gap:16px !important} .livegamegrid.playingstate .chatcol{width:430px !important} .livegamegrid.playingstate .actionrail{width:340px !important} } @media(min-width:1181px) and (max-width:1360px){ .livegamegrid.playingstate{grid-template-columns:360px minmax(0,1fr) 310px !important;gap:12px !important} .livegamegrid.playingstate .chatcol{width:360px !important} .livegamegrid.playingstate .actionrail{width:310px !important} } @media(min-width:1021px) and (max-width:1180px){ .livegamegrid.playingstate{grid-template-columns:300px minmax(0,1fr) 280px !important;gap:10px !important} .livegamegrid.playingstate .chatcol{width:300px !important} .livegamegrid.playingstate .actionrail{width:280px !important} } /* Keep composer/actions visible within the dynamically height-capped laptop panels. */ @media(min-width:1021px){ .livegamegrid.playingstate .chatpanel:not(.minimized){padding:10px !important} .livegamegrid.playingstate .chatheader{padding-bottom:6px !important;margin-bottom:6px !important} .livegamegrid.playingstate .chatcomposer{padding-top:6px !important;gap:5px !important} .livegamegrid.playingstate .chatcomposer textarea{ min-height:42px !important; height:42px !important; max-height:42px !important; } .livegamegrid.playingstate .chatactions{min-height:30px !important} .livegamegrid.playingstate .chatmessages{ min-height:40px !important; overflow-y:auto !important; scrollbar-gutter:stable !important; } .livegamegrid.playingstate .actionrail .actionbar.actionconsole{ padding:7px 9px !important; gap:4px !important; } .livegamegrid.playingstate .actionrail .actionbig{ height:42px !important; min-height:42px !important; max-height:42px !important; } } /* Content-sized live controls: every timer, wager and action occupies its own row. */ .actionrail .actionbar.actionconsole{ display:flex !important;flex-direction:column !important;align-items:stretch !important; height:auto !important;min-height:0 !important;max-height:none !important; grid-template-rows:none !important;gap:8px !important;overflow:visible !important; } .actionrail .actionconsole > *{flex-shrink:0 !important;min-width:0} .actionrail .actionconsole .consoletimer{height:auto !important;min-height:28px !important} .actionrail .actionconsole:has(.timewarning.active) .consoletimer, .actionrail .actionconsole:has(.extensiontimer.active) .consoletimer{display:none !important} .actionrail .actionconsole .timewarning.active, .actionrail .actionconsole .extensiontimer.active{ position:static !important;height:auto !important;min-height:32px !important; margin:0 !important;overflow:visible !important;gap:6px !important;flex-wrap:wrap !important; } .actionrail .actionconsole .timebank{width:auto !important;margin-left:auto !important} .actionrail .actionconsole .betcontrol{display:grid !important;gap:6px !important} .actionrail .actionconsole .betquick .btn{white-space:normal !important} .actionrail .actionconsole .actionbuttons{ grid-template-columns:repeat(3,minmax(0,1fr)) !important;align-self:stretch !important; height:auto !important;min-height:48px !important; } .actionrail .actionconsole .actionbig{ height:auto !important;min-height:48px !important;max-height:none !important; overflow:visible !important;white-space:normal !important;overflow-wrap:anywhere; } .actionrail .actionconsole button:disabled{opacity:.5;cursor:default} @media(min-width:1021px){ .livegamegrid.playingstate .chatpanel{max-width:none !important} .livegamegrid.playingstate .chatpanel:not(.minimized) .chatmessages{ flex:1 1 0 !important;min-height:0 !important;max-height:none !important; } .livegamegrid.playingstate .chatheader, .livegamegrid.playingstate .chatcomposer{flex-shrink:0 !important} .livegamegrid.playingstate .chatactions .btn{padding:7px 12px !important} .livegamegrid.playingstate .actionrail .actionbar.waitingbar{ height:auto !important;min-height:150px !important;max-height:none !important; } } /* Stack the pot amount, chips and board in normal flow so none cover the cards. */ .poker-table .felt-center{ display:flex !important;flex-direction:column !important;align-items:center !important; bottom:auto !important;height:auto !important;gap:10px !important; } .poker-table .felt-center > *{flex-shrink:0 !important} .poker-table .felt-center > .pot-zone{ display:flex !important;flex-direction:column !important;align-items:center !important; gap:8px !important;min-height:0 !important;margin:0 !important; } .poker-table .pot-zone .totalpot{margin:0 !important} .poker-table .pot-zone .centerchips{min-height:64px !important} /* A full table owns a separate play area above the chat and action controls. */ @media(min-width:1021px){ .roomlayout.livegamegrid.fulltable.playingstate{ grid-template-columns:minmax(0,1fr) minmax(290px,.7fr) !important; grid-template-rows:auto auto !important;gap:12px 20px !important; } .livegamegrid.fulltable.playingstate .tablecol{grid-column:1/-1 !important;grid-row:1 !important} .livegamegrid.fulltable.playingstate .chatcol{grid-column:1 !important;grid-row:2 !important} .livegamegrid.fulltable.playingstate .actionrail{grid-column:2 !important;grid-row:2 !important} .livegamegrid.fulltable.playingstate .chatcol, .livegamegrid.fulltable.playingstate .actionrail{width:auto !important;padding-top:0 !important;align-self:start !important} .livegamegrid.fulltable.playingstate .chatpanel, .livegamegrid.fulltable.playingstate .actionbar{position:relative !important;top:0 !important;bottom:auto !important;transform:none !important;margin:0 !important;max-width:none !important;width:100% !important} .livegamegrid.fulltable.playingstate .actionbar{left:auto !important} } .joinbar{gap:10px !important;padding:14px !important} .joinbar .muted{font-size:13px;line-height:1.4} .joinbar button:disabled{opacity:.5;cursor:default} @media(min-width:1021px){ .livegamegrid.fulltable.playingstate .poker-table{width:min(920px,78%) !important;max-width:920px !important;min-width:0 !important;height:280px !important} } .poker-table.dense .seat.compactseat{width:174px !important;transform:translate(-50%,-50%) !important} .poker-table.dense .compactplayer{display:grid;grid-template-columns:58px 108px;gap:4px 6px;align-items:center;justify-items:center} .poker-table.dense .compactplayer .seatavatar{width:58px !important;height:58px !important;grid-column:1;grid-row:1} .poker-table.dense .compactcards{grid-column:2;grid-row:1;display:flex;gap:4px;min-height:58px;align-items:center;justify-content:center} .poker-table.dense .compactcards .card{width:40px !important;height:56px !important;border-radius:5px !important} .poker-table.dense .compactcards .card .corner.tl,.poker-table.dense .compactcards .card .corner.br{font-size:13px !important} .poker-table.dense .compactcards .card .corner.tr{font-size:12px !important} .poker-table.dense .compactcards .card .pip{font-size:11px !important} .poker-table.dense .compactplayer .nameplate{grid-column:1/-1;grid-row:2;position:relative !important;inset:auto !important;transform:none !important;margin:0 !important;width:174px !important;min-width:0 !important;max-width:none !important;min-height:38px !important;padding:4px 6px 7px !important;border-radius:10px !important} .poker-table.dense .compactplayer .name{font-size:14px !important;line-height:16px !important;max-width:160px !important} .poker-table.dense .compactplayer .stack{font-size:14px !important;line-height:16px !important} .poker-table.dense .compactplayer .nameplate::after{height:4px !important;bottom:3px !important} .poker-table.dense .compactplayer .winnerhandname,.poker-table.dense .compactplayer .mini,.poker-table.dense .compactplayer .allin,.poker-table.dense .compactplayer .pendingchips{grid-column:1/-1;position:static !important;font-size:12px !important;margin:0 !important} .poker-table.dense .povseat .nameplate{border-color:#e9b34b !important} .poker-table.dense .seat.compactseat .compactplayer .seatavatar{width:58px !important;height:58px !important;min-width:58px !important;min-height:58px !important} /* Highlight the acting player without changing the measured seat geometry. */ .poker-table .seat.turn .seatbox{transform:none !important} .poker-table .seat.turn .seatavatar{animation:none !important} .poker-table .emptycards{visibility:hidden !important} /* The table artwork ignores clicks; the player's profile control remains interactive. */ .seat.povseat .seatavatar[role=button]{pointer-events:auto;cursor:pointer;} .seat.povseat .seatavatar[role=button]:focus-visible{outline:3px solid #e4b749;outline-offset:4px;}