/* بوكر — own look: deep green casino felt, wooden rail, gold chips (play money only) */
*{box-sizing:border-box}
html,body{margin:0;height:100%;color:#fff;font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{background:radial-gradient(circle at 50% 10%,#1d5c3d 0,#0b2e1d 55%,#061a10 100%)}
.page{position:relative;max-width:560px;margin:0 auto;padding:10px 10px calc(10px + env(safe-area-inset-bottom));height:100dvh;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px}
.topline .brand-line{margin:0;min-width:0}
.icon{flex:none;width:40px;height:40px;border:2px solid #ffffff40;border-radius:12px;background:#0005;color:#fff;font-size:17px;cursor:pointer}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.screen[hidden]{display:none}
#table{overflow:hidden;gap:6px}
.hero-cards{display:flex;gap:4px;justify-content:center;margin-top:4px}
.rules{width:min(330px,100%);text-align:right;background:#0004;border-radius:12px;padding:8px 12px;color:#d8f3e4;font-size:14px}
.rules summary{cursor:pointer;font-weight:800}
/* felt */
.felt{position:relative;flex:1;min-height:0;margin:2px 6px}
.felt-in{position:absolute;inset:7% 3%;border-radius:46%;background:radial-gradient(ellipse at 50% 40%,#18a065 0,var(--felt) 45%,var(--felt2) 100%);border:12px solid var(--rail);box-shadow:inset 0 0 0 3px #ffffff22,inset 0 10px 30px #0006,0 12px 30px #000a}
.center{position:absolute;left:50%;top:48%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:6px;width:86%}
.pot{background:#0007;border:2px solid var(--gold);color:var(--gold);border-radius:999px;padding:1px 14px;font-weight:800;font-size:16px;white-space:nowrap}
.pot::before{content:"🪙 "}
.board{display:flex;gap:4px;justify-content:center;min-height:calc(var(--bw,46px) * 1.4);--cw:var(--bw,46px);direction:ltr}
.slot-card{width:var(--bw,46px);aspect-ratio:5/7;border-radius:6px;border:2px dashed #ffffff30}
.street{font-size:12px;color:#c9f0da;font-weight:800;min-height:16px}
/* seats */
.seat{position:absolute;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:1px;width:84px;transition:opacity .3s}
.seat .av{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:linear-gradient(145deg,#3b4a5e,#1c2533);border:3px solid #ffffff55;box-shadow:0 4px 10px #0007}
.seat.turn .av{border-color:var(--gold);box-shadow:0 0 0 3px #f2c14e66,0 0 18px var(--gold)}
.seat .ring{position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p,1)*360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 26px,#000 27px);mask:radial-gradient(circle,transparent 26px,#000 27px)}
.seat .nm{font-size:11.5px;font-weight:800;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#000a;border-radius:8px;padding:0 6px;margin-top:-6px;position:relative;z-index:1}
.seat .ch{font-size:12px;color:var(--gold);font-weight:800;direction:ltr}
.seat.folded{opacity:.45}
.seat.out{opacity:.25}
.seat .mini{position:absolute;top:2px;display:flex;--cw:24px;left:50%;translate:-50% -55%}
.seat .mini .ck-card+.ck-card{margin-left:-12px}
.seat .mini .ck-card:first-child{rotate:-8deg}.seat .mini .ck-card:last-child{rotate:8deg}
.seat .show{position:absolute;top:-6px;left:50%;translate:-50% -60%;display:flex;gap:2px;--cw:34px;z-index:3;direction:ltr}
.seat .say{position:absolute;bottom:-20px;background:#fff;color:#123;border-radius:10px;padding:0 7px;font-size:11.5px;font-weight:800;white-space:nowrap;animation:ckSay .3s ease;z-index:2}
.seat .say.f{background:#555;color:#ddd}.seat .say.a{background:#e53935;color:#fff}.seat .say.w{background:var(--gold);color:#3a2300}
@keyframes ckSay{from{scale:.5;opacity:0}}
.seat .bet{position:absolute;font-size:11.5px;font-weight:800;color:#fff;background:#0009;border-radius:999px;padding:0 7px 0 4px;white-space:nowrap;direction:ltr}
.seat .bet::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:3px;vertical-align:-1px;background:radial-gradient(circle,#fff 0 28%,#e53935 30% 60%,#fff 62% 70%,#e53935 72%)}
.seat .dlr{position:absolute;right:-4px;top:-2px;width:20px;height:20px;border-radius:50%;background:#fff;color:#111;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 4px #0008}
/* me */
.mine{display:flex;align-items:center;justify-content:center;gap:12px;min-height:96px}
.my-cards{display:flex;gap:6px;--cw:64px;direction:ltr}
.my-info{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:110px}
.my-info b{color:var(--gold);font-size:16px;min-height:22px}
.my-info span{font-size:14px;color:#d8f3e4;direction:ltr}
.actions{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;min-height:54px}
.act{border:0;border-radius:14px;font:inherit;font-size:18px;font-weight:800;cursor:pointer;color:#fff;box-shadow:0 4px 0 #0008}
.act:active{transform:translateY(3px);box-shadow:0 1px 0 #0008}
.act:disabled{opacity:.35}
.act.fold{background:linear-gradient(180deg,#6b6f76,#43474d)}
.act.call{background:linear-gradient(180deg,#2fbf71,#1a8a4f)}
.act.raise{background:linear-gradient(180deg,#ffb23f,#e07b00)}
.actions.off .act{opacity:.3;pointer-events:none}
.raise-box{position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;background:#0b2e1df5;border:2px solid var(--gold);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 -10px 30px #000a}
.raise-box[hidden]{display:none}
.rb-top{display:flex;justify-content:space-between;align-items:center;font-weight:800}
.rb-top b{font-size:26px;color:var(--gold);direction:ltr}
#raiseRange{width:100%;accent-color:var(--gold);direction:ltr}
.rb-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rb-quick button{border:2px solid #ffffff40;border-radius:12px;background:#0005;color:#fff;font:inherit;font-weight:800;padding:7px;cursor:pointer}
.rb-go{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.rb-go .ck-btn{width:auto}
.waitbar{text-align:center;font-size:13px;color:#c9f0da;min-height:18px;font-weight:800}
.panel{position:absolute;inset:56px 0 0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;background:#061a10ee;backdrop-filter:blur(3px);border-radius:22px}
.panel[hidden]{display:none}
.panel h2{margin:0;font-size:30px;color:var(--gold)}
.over-emo{font-size:62px;line-height:1}
.lead{margin:0;color:#d8f3e4;font-size:15px}
.result-banner{position:absolute;left:50%;top:30%;translate:-50% -50%;z-index:5;background:#000c;border:2px solid var(--gold);border-radius:14px;padding:6px 14px;text-align:center;font-weight:800;animation:ckSay .4s ease;max-width:92%}
.result-banner b{color:var(--gold)}
@media (max-height:700px){.my-cards{--cw:52px}.mine{min-height:80px}.seat .av{width:40px;height:40px;font-size:19px}}