*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#0a0a14;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Microsoft JhengHei",sans-serif;color:#fff;overflow:hidden;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0a0a14}
#stage{position:relative;height:100vh;height:100dvh;aspect-ratio:1408/2882;flex:0 0 auto;background:#1a1230 center/cover no-repeat;overflow:hidden;container-type:size}

/* faded center logo watermark */
.watermark{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:42%;aspect-ratio:488/551;background:center/contain no-repeat;opacity:.08;pointer-events:none}

/* top bar */
.topbar{position:absolute;top:1.4%;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:0 3.5%;z-index:20}
.tb-left{display:flex;gap:2cqw}
.icon-btn{width:11cqw;height:11cqw;border:none;border-radius:3cqw;background:#e23b3b;color:#fff;font-size:6cqw;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 .8cqw 0 #a82626;cursor:pointer}
.icon-btn:active{transform:translateY(.6cqw);box-shadow:0 .2cqw 0 #a82626}
.logo{width:24cqw;height:auto;filter:drop-shadow(0 .5cqw 1cqw rgba(0,0,0,.5))}

/* host / dealer */
.host{position:absolute;transform:translate(-50%,-50%);width:34cqw;height:auto;z-index:6;filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5));transition:opacity .2s ease}

/* pill + pot */
.pill{display:inline-flex;align-items:center;gap:1.5cqw;background:linear-gradient(#fdeeb6,#f1c75f);color:#6a3d00;font-weight:800;border-radius:999px;padding:1cqw 4cqw;border:.5cqw solid rgba(255,255,255,.6);box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.45);font-size:4.4cqw;white-space:nowrap}
.pill .coin{display:inline-flex;align-items:center;justify-content:center;width:5cqw;height:5cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd24d,#e09100);color:#fff;font-size:3.2cqw;font-weight:900;box-shadow:inset 0 0 0 .4cqw #ffe89a}
.pot{position:absolute;transform:translate(-50%,-50%);z-index:5}

/* center status text */
.center-status{position:absolute;transform:translate(-50%,-50%);text-align:center;font-size:6cqw;font-weight:700;color:#fff;text-shadow:0 .4cqw 1cqw rgba(0,0,0,.6);line-height:1.25;width:60%}

/* seats */
#seats{position:absolute;inset:0;z-index:8}
.seat{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:22cqw}
.avatar-ring{width:16cqw;height:16cqw;border-radius:50%;padding:.7cqw;background:linear-gradient(145deg,#e2b04a,#7a5418);box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.5)}
.avatar-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#23314a}
.avatar-ring.add{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#6d5bb0,#3c3170)}
.avatar-ring.add span{font-size:9cqw;color:#fff;opacity:.85;font-weight:300;line-height:1}
.nameplate{margin-top:1.2cqw;background:rgba(8,20,16,.72);border:.3cqw solid rgba(255,255,255,.12);border-radius:2cqw;font-size:3.4cqw;font-weight:600;padding:.6cqw 3cqw;min-width:14cqw;min-height:6cqw;text-align:center}
.packed{position:absolute;top:0;left:50%;transform:translate(-50%,1.5cqw);background:rgba(0,0,0,.62);color:#ffd24d;font-size:3.4cqw;font-weight:700;padding:.5cqw 3cqw;border-radius:2cqw;display:none;z-index:3}
.seat.packed-on .packed{display:block}
.seat.packed-on .avatar-ring,.seat.packed-on .hand{filter:grayscale(1) brightness(.6)}

/* hands */
.hand{display:flex;justify-content:center;align-items:center;height:18cqw;margin-bottom:-1cqw}
.seat .hand .card{width:11cqw;margin:0 -2.5cqw}
.seat.you .hand{height:26cqw;margin-bottom:1cqw}
.seat.you .hand .card{width:17cqw;margin:0 -2cqw}
.hand .card{transform-origin:bottom center}
.hand .card:nth-child(1){transform:rotate(-9deg) translateY(1cqw)}
.hand .card:nth-child(3){transform:rotate(9deg) translateY(1cqw)}

/* card compositing (from verified demo) */
.card{position:relative;aspect-ratio:136/178;background-size:cover;border-radius:1.6cqw;box-shadow:0 .6cqw 1.2cqw rgba(0,0,0,.4)}
.card .corner{position:absolute;display:flex;flex-direction:column;align-items:center;width:22%}
.card .corner.tl{top:5%;left:7%}
.card .corner.br{bottom:5%;right:7%;transform:rotate(180deg)}
.card .corner .rk{width:80%;display:block}
.card .corner .cs{width:55%;display:block;margin-top:4%}
.card .cc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.card .cc .pip{width:46%}
.card .cc .court{height:66%}

/* action bar */
.actionbar{position:absolute;bottom:2%;left:0;right:0;display:flex;gap:2.5cqw;justify-content:center;z-index:15;padding:0 4%}
.btn{flex:1;max-width:26cqw;border:none;border-radius:3cqw;padding:2.6cqw 0;font-size:4cqw;font-weight:800;color:#fff;cursor:pointer;box-shadow:0 .8cqw 0 rgba(0,0,0,.35)}
.btn:active{transform:translateY(.6cqw);box-shadow:0 .2cqw 0 rgba(0,0,0,.35)}
.btn.pack{background:linear-gradient(#9aa3ad,#6b7480)}
.btn.show{background:linear-gradient(#ff9a3d,#e8741a)}
.btn.chaal{background:linear-gradient(#43c777,#2a9c56)}
.btn.raise{background:linear-gradient(#f0c14b,#d89a1f);color:#5a3d00}

/* win overlay */
.win-overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;pointer-events:none}
.win-overlay video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen}

/* dynamic game state */
.center-status{transition:opacity .3s ease}
.center-status.hide{opacity:0;pointer-events:none}
.nameplate{display:flex;flex-direction:column;align-items:center;line-height:1.12;gap:.2cqw}
.nameplate .pname{font-size:3.3cqw;font-weight:600}
.nameplate .pchips{font-size:3cqw;font-weight:800;color:#ffd24d}
.seat.turn .avatar-ring{box-shadow:0 0 0 .7cqw #ffe273,0 0 4cqw 1cqw rgba(255,206,58,.75)}
.betlabel{position:absolute;top:-2cqw;left:50%;transform:translate(-50%,0);background:rgba(0,0,0,.72);color:#ffd24d;font-size:3.2cqw;font-weight:800;padding:.4cqw 2.4cqw;border-radius:2cqw;opacity:0;transition:opacity .2s,transform .4s;pointer-events:none;white-space:nowrap;z-index:4}
.betlabel.show{opacity:1;transform:translate(-50%,-2.5cqw)}
.btn small{display:block;font-size:2.7cqw;font-weight:700;opacity:.92;margin-top:.2cqw}
.btn.see{background:linear-gradient(#5b8def,#2f63d8)}
.winner-banner{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
.winner-banner .ribbon{width:64cqw;height:auto;filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5))}
.winner-banner .wname{margin-top:1cqw;font-size:4cqw;font-weight:700;color:#fff;text-shadow:0 .4cqw 1cqw #000}
.winner-banner .wamount{font-size:7cqw;font-weight:900;color:#ffd84d;text-shadow:0 .5cqw 1.5cqw rgba(0,0,0,.6)}
.winner-banner .wcoins{position:absolute;top:-14cqw;width:72cqw;height:auto;opacity:.95;pointer-events:none;animation:coinpop .5s ease}
@keyframes coinpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:.95}}

/* result / win screen */
.win-overlay[hidden]{display:none}
.win-overlay{background:rgba(6,8,16,.62)}
.result{position:relative;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:2cqw;width:90%}
.result .r-coins{position:absolute;top:-7cqw;width:84cqw;height:auto;opacity:.95;pointer-events:none;z-index:1;animation:coinpop .5s ease}
.result .r-fx{position:relative;z-index:2;width:74cqw;height:auto;filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.55));animation:rpop .45s ease}
.result .r-amount{position:relative;z-index:3;font-size:9cqw;font-weight:900;color:#ffe14d;text-shadow:0 .5cqw 1.2cqw #000,0 0 2.4cqw rgba(0,0,0,.85);margin-top:-1cqw}
.result .r-head{position:relative;z-index:3;font-size:6cqw;font-weight:800;color:#fff;text-shadow:0 .5cqw 1cqw #000;text-align:center}
.result .r-board{position:relative;z-index:3;display:flex;flex-direction:column;gap:2.2cqw;width:86cqw;margin-top:1.5cqw}
.lb-row{position:relative;width:100%;height:13cqw;border-radius:2.6cqw;display:flex;align-items:center;padding:0 4.5cqw 0 14cqw;box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.4)}
.lb-row.gold{background:linear-gradient(#ffe488,#f0b32e);border:.5cqw solid #fff4cf}
.lb-row.teal{background:linear-gradient(#2ec6a3,#138f7c);border:.5cqw solid #86ecd6}
.lb-badge{position:absolute;left:1.8cqw;top:50%;transform:translateY(-50%);width:9.4cqw;height:9.4cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:5cqw;font-weight:900;color:#fff;text-shadow:0 .2cqw .4cqw rgba(0,0,0,.5)}
.lb-row.gold .lb-badge{background:radial-gradient(circle at 38% 32%,#ffe27a,#e08e00);box-shadow:inset 0 0 0 .5cqw #fff6d2,0 .3cqw .7cqw rgba(0,0,0,.45)}
.lb-row.teal .lb-badge{background:radial-gradient(circle at 38% 32%,#9adcff,#2f8fd6);box-shadow:inset 0 0 0 .5cqw #dcf3ff,0 .3cqw .7cqw rgba(0,0,0,.45)}
.lb-name{flex:1;font-size:4.1cqw;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-chips{font-size:3.9cqw;font-weight:800;margin-left:2cqw;white-space:nowrap}
.lb-row.gold .lb-name,.lb-row.gold .lb-chips{color:#6a3d00}
.lb-row.teal .lb-name,.lb-row.teal .lb-chips{color:#fff;text-shadow:0 .2cqw .5cqw rgba(0,0,0,.35)}
.r-btns{display:flex;gap:3cqw;margin-top:2.5cqw;width:84cqw}
.r-btn{flex:1;border:none;border-radius:3cqw;padding:3.4cqw 0;font-size:4.2cqw;font-weight:800;color:#fff;cursor:pointer;box-shadow:0 .9cqw 0 rgba(0,0,0,.35);line-height:1.15}
.r-btn:active{transform:translateY(.7cqw);box-shadow:0 .2cqw 0 rgba(0,0,0,.35)}
.r-btn.continue{background:linear-gradient(#5b8def,#2f63d8)}
.r-btn.real{background:linear-gradient(#ffd23a,#e8930f);color:#5a3d00}
@keyframes rpop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* jackpot */
.r-jackpot{position:relative;z-index:3;font-size:8.5cqw;font-weight:900;color:#ffd24d;letter-spacing:.3cqw;text-shadow:0 0 3cqw #ff8a00,0 .4cqw .8cqw #000;margin-top:-1cqw;animation:jpPulse .55s ease-in-out infinite alternate}
.r-hand{position:relative;z-index:3;font-size:4.6cqw;font-weight:800;color:#fff;text-shadow:0 .3cqw .8cqw #000;margin-top:-1cqw}
.result.jackpot .r-fx{animation:rpop .45s ease, jpGlow 1s ease-in-out infinite alternate}
@keyframes jpPulse{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes jpGlow{from{filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.55))}to{filter:drop-shadow(0 0 4cqw #ffb000)}}

/* lobby + wheel screens */
.screen{position:absolute;inset:0;z-index:50;background:rgba(6,8,16,.93);display:flex;align-items:center;justify-content:center}
.screen[hidden]{display:none}
.lobby{display:flex;flex-direction:column;align-items:center;gap:3cqw;width:88%}
.lobby-logo{width:34cqw;height:auto;filter:drop-shadow(0 .5cqw 1.5cqw rgba(0,0,0,.5))}
.lobby-balance{display:inline-flex;align-items:center;gap:1.5cqw;background:linear-gradient(#fdeeb6,#f1c75f);color:#6a3d00;font-weight:900;font-size:6cqw;padding:1.4cqw 6cqw;border-radius:999px;border:.5cqw solid rgba(255,255,255,.6);box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.45)}
.lobby-balance .coin{display:inline-flex;align-items:center;justify-content:center;width:7cqw;height:7cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd24d,#e09100);color:#fff;font-size:4.4cqw;font-weight:900}
.lobby-daily{border:none;border-radius:3cqw;padding:2.8cqw 8cqw;font-size:4.4cqw;font-weight:800;color:#5a3d00;background:linear-gradient(#ffd23a,#e8930f);box-shadow:0 .9cqw 0 rgba(0,0,0,.3);cursor:pointer;animation:dailyGlow 1.2s ease-in-out infinite alternate}
.lobby-daily.done{background:linear-gradient(#9aa3ad,#6b7480);color:#fff;animation:none}
@keyframes dailyGlow{from{box-shadow:0 .9cqw 0 rgba(0,0,0,.3)}to{box-shadow:0 .9cqw 0 rgba(0,0,0,.3),0 0 4cqw rgba(255,200,60,.85)}}
.lobby-tables{display:flex;flex-direction:column;gap:2.5cqw;width:80cqw;margin-top:1.5cqw}
.table-card{display:flex;flex-direction:column;align-items:center;gap:.4cqw;border:none;border-radius:3.5cqw;padding:3.4cqw;font-weight:800;color:#fff;cursor:pointer;box-shadow:0 1cqw 0 rgba(0,0,0,.3)}
.table-card b{font-size:5.4cqw}
.table-card span{font-size:3.6cqw;opacity:.95}
.table-card.low{background:linear-gradient(#43c777,#2a9c56)}
.table-card.mid{background:linear-gradient(#5b8def,#2f63d8)}
.table-card.high{background:linear-gradient(#e0457b,#a01e4f)}
.table-card:active{transform:translateY(.7cqw);box-shadow:0 .3cqw 0 rgba(0,0,0,.3)}
.wheel-screen{position:relative;display:flex;flex-direction:column;align-items:center;gap:3.5cqw;width:90%}
.wheel-title{font-size:6cqw;font-weight:900;color:#ffd24d;text-shadow:0 .4cqw 1cqw #000}
.wheel-wrap{position:relative;width:74cqw;height:74cqw}
.wheel-disc{position:absolute;inset:0;border-radius:50%;border:1.4cqw solid #ffd24d;box-shadow:0 0 4cqw rgba(0,0,0,.6);transform:rotate(0deg)}
.wheel-label{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;justify-content:center;pointer-events:none}
.wheel-label span{margin-top:4cqw;font-size:3.1cqw;font-weight:800;color:#fff;text-shadow:0 .2cqw .4cqw #000;white-space:nowrap}
.wheel-pointer{position:absolute;top:-2cqw;left:50%;transform:translateX(-50%);width:0;height:0;border-left:3cqw solid transparent;border-right:3cqw solid transparent;border-top:5.5cqw solid #fff;filter:drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.5));z-index:2}
.wheel-spin{border:none;border-radius:3cqw;padding:2.8cqw 10cqw;font-size:5cqw;font-weight:900;color:#5a3d00;background:linear-gradient(#ffd23a,#e8930f);box-shadow:0 1cqw 0 rgba(0,0,0,.3);cursor:pointer}
.wheel-spin:disabled{background:linear-gradient(#9aa3ad,#6b7480);color:#fff;box-shadow:0 1cqw 0 rgba(0,0,0,.2)}
.wheel-close{position:absolute;top:-2cqw;right:0;width:9cqw;height:9cqw;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:4.5cqw;cursor:pointer}