/* Texas Hold'em: the table, the cards, the chips. Sizes in rem: game.js sets one root size per screen. */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------------- home */
.home{align-items:center;justify-content:center;gap:1em;padding:1em;text-align:center}
.home-left,.home-right{display:flex;flex-direction:column;align-items:center;gap:.45em}
.home-right{gap:.6em;min-width:14em}
.home-right .pill{width:100%}
.title{margin:.1em 0 0;font:900 3.1rem/1 var(--round);color:var(--paper);letter-spacing:.01em;text-shadow:0 3px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.35)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.15rem}
.free{margin:0;color:var(--paper);font-weight:700;font-size:1.02rem;background:rgba(0,0,0,.22);border-radius:.9rem;padding:.35em .9em;text-wrap:balance;max-width:22rem}
.best{margin:0;color:var(--gold-hi);font-weight:700;min-height:1.3em}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .2em}
.home.wide{flex-direction:row;gap:2.2em}
.home.wide .title{font-size:2.6rem}
.home.wide .home-art{display:none}
.home-art{position:relative;width:7.5rem;height:5.4rem;margin-bottom:.3em}
.home-art .cd{position:absolute;left:50%;top:0;--cw:3.5rem;animation:bob 3.6s ease-in-out infinite}
.home-art .cd:nth-child(1){transform:translateX(-95%) rotate(-14deg);animation-delay:-1.2s}
.home-art .cd:nth-child(2){transform:translateX(-5%) rotate(10deg) translateY(.2rem)}
@keyframes bob{50%{margin-top:-.3rem}}

/* ---------------- the game screen */
#game{padding:max(.35rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) max(.4rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left))}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.5em;flex:none;height:2.9rem}
.bar .jewel{width:2.6rem;height:2.6rem}
.tname{display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.15}
.tname b{font:800 1.05rem/1.15 var(--round);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tname small{font-size:.85rem;color:var(--ink-soft);white-space:nowrap}
.bank{display:flex;align-items:center;gap:.35em;background:rgba(0,0,0,.25);border-radius:999px;padding:.3em .8em .3em .4em;white-space:nowrap}
.bank b{font:900 1.35rem/1 var(--round);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.chipdot{width:1.3rem;height:1.3rem;border-radius:50%;background:repeating-conic-gradient(#f4f1e8 0 22.5deg,var(--red) 0 45deg);box-shadow:inset 0 0 0 .22rem var(--red),inset 0 0 0 .28rem #fff}
.bank.up b{animation:pop .45s}
@keyframes pop{40%{transform:scale(1.25)}}

.main{flex:1;min-height:0;display:flex;flex-direction:column;gap:.35rem;margin-top:.25rem}
#game.wide .main{flex-direction:row}
.felt{flex:1;min-height:0;min-width:0;position:relative}
.oval{position:absolute;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#2a8a5d,#1a6a45 55%,#11553a);
  box-shadow:0 0 0 .55rem #6b3f22,0 0 0 .7rem #8a5532,0 .8rem 1.6rem rgba(0,0,0,.45),inset 0 0 2.4rem rgba(0,0,0,.35)}
.oval::after{content:"";position:absolute;inset:7%;border-radius:50%;border:2px solid rgba(255,236,190,.12)}
.layer{position:absolute;inset:0}
.say{margin:0;min-height:1.35em;text-align:center;font:800 1.08rem/1.25 var(--round);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.say.good{color:var(--gold-hi)}
.say.you{color:#d7f5ff}
.say.dim{color:var(--ink-soft);font-weight:700}
#game.wide .say{white-space:normal;min-height:2.5em;display:flex;align-items:center;justify-content:center;font-size:1rem}

/* ---------------- playing cards: cream face, our own lattice back */
.cd{position:absolute;left:0;top:0;width:var(--cw,3rem);height:calc(var(--cw,3rem)*1.4);will-change:transform}
.cd .in{position:absolute;inset:0;border-radius:calc(var(--cw,3rem)*.09)}
.cd .face,.cd .back{position:absolute;inset:0;border-radius:inherit;box-shadow:0 .1rem .25rem rgba(0,0,0,.35),0 .3rem .8rem rgba(0,0,0,.22)}
.cd .face{background:linear-gradient(170deg,#fff,#fbf6ea);color:#1d2433;overflow:hidden;transition:box-shadow .3s,filter .3s}
.cd.red .face{color:var(--red)}
.cd .r{position:absolute;left:7%;top:3%;font:800 calc(var(--cw,3rem)*.36)/1 var(--round);letter-spacing:-.05em}
.cd .s1{position:absolute;left:8%;top:calc(var(--cw,3rem)*.42);width:calc(var(--cw,3rem)*.26);height:calc(var(--cw,3rem)*.26)}
.cd .big{position:absolute;right:7%;bottom:6%;width:54%;height:auto;aspect-ratio:1}
.cd svg{fill:currentColor;display:block}
.cd .back{background:repeating-linear-gradient(45deg,transparent 0 calc(var(--cw,3rem)*.06),rgba(255,255,255,.15) 0 calc(var(--cw,3rem)*.09)),
  repeating-linear-gradient(-45deg,transparent 0 calc(var(--cw,3rem)*.06),rgba(255,255,255,.15) 0 calc(var(--cw,3rem)*.09)),linear-gradient(160deg,#2f5fa3,#1b3a6b);
  border:calc(var(--cw,3rem)*.055) solid #f6f1e6;display:none}
.cd.down .back{display:block}
.cd.down .face{display:none}
.cd.flip .in{animation:flip var(--flip,.3s) ease-in-out}
@keyframes flip{50%{transform:scaleX(0)}}
.cd.folded{opacity:.28!important;filter:grayscale(.6)}
.cd.won .face{box-shadow:0 0 0 .2rem var(--gold-hi),0 .2rem 1rem rgba(242,179,61,.75)}
.cd.won{z-index:30!important}
.cd.dimmed .face{filter:brightness(.62) saturate(.7)}

/* ---------------- seats */
.plate{position:absolute;left:0;top:0;height:2.75rem;display:flex;align-items:center;gap:.35rem;padding:0 .45rem 0 .3rem;border-radius:.9rem;z-index:40;
  background:rgba(8,26,18,.88);box-shadow:0 .2rem .5rem rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,236,190,.18);transition:box-shadow .25s,opacity .3s}
.plate .av{flex:none;width:2.05rem;height:2.05rem;border-radius:50%;display:grid;place-items:center;font:900 1.05rem/1 var(--round);color:#fff;background:var(--av);
  box-shadow:inset 0 -.15rem 0 rgba(0,0,0,.2);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.plate .who{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.plate .nm{font:800 .95rem/1.1 var(--round);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate .st{font:900 1.02rem/1.1 var(--round);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.plate.turn{box-shadow:0 0 0 .2rem var(--gold-hi),0 0 1.1rem rgba(255,217,134,.65);animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 .2rem var(--gold-hi),0 0 1.8rem rgba(255,217,134,.9)}}
.plate.folded{opacity:.6}
.plate.out{opacity:.4}
.plate.winner{box-shadow:0 0 0 .22rem var(--gold),0 0 1.6rem rgba(242,179,61,.85)}
.plate .said{position:absolute;left:50%;top:100%;translate:-50% -30%;white-space:nowrap;font:800 .8rem/1 var(--round);padding:.28em .6em;border-radius:999px;
  background:#f4efe3;color:#22301f;box-shadow:0 .1rem .3rem rgba(0,0,0,.35);max-width:12rem;overflow:hidden;text-overflow:ellipsis}
.plate .said.hot{background:var(--red);color:#fff}
.plate .said.good{background:var(--gold);color:#3a2504}
.plate.you .said{display:none}
.dbtn{position:absolute;left:0;top:0;width:1.45rem;height:1.45rem;border-radius:50%;background:#fff;color:#1d2433;font:900 .8rem/1.45rem var(--round);text-align:center;
  box-shadow:0 .1rem .3rem rgba(0,0,0,.45),inset 0 0 0 .12rem #d8d2c4;z-index:45}
.bet{position:absolute;left:0;top:0;translate:-50% -50%;display:flex;align-items:center;gap:.25rem;padding:.12rem .5rem .12rem .15rem;border-radius:999px;background:rgba(0,0,0,.42);z-index:35;
  font:900 .95rem/1 var(--round);color:var(--paper);white-space:nowrap}
.bet i,.pot i{display:block;width:1.15rem;height:1.15rem;border-radius:50%;background:repeating-conic-gradient(#f4f1e8 0 22.5deg,var(--red) 0 45deg);box-shadow:inset 0 0 0 .2rem var(--red),inset 0 0 0 .26rem #fff,0 .1rem .2rem rgba(0,0,0,.4)}
.bet.pop{animation:betpop .3s}
@keyframes betpop{0%{scale:.4}60%{scale:1.15}}
.pot{position:absolute;left:0;top:0;translate:-50% -50%;display:flex;align-items:center;gap:.3rem;padding:.2rem .7rem .2rem .25rem;border-radius:999px;background:rgba(0,0,0,.35);
  font:700 .95rem/1 var(--round);color:var(--ink-soft);z-index:34;white-space:nowrap}
.pot b{font:900 1.15rem/1 var(--round);color:var(--gold-hi)}
.handname{position:absolute;left:0;top:0;font:800 .95rem/1.15 var(--round);color:#2a1a04;background:var(--gold-hi);border-radius:.6rem;padding:.25em .55em;z-index:36;
  box-shadow:0 .15rem .4rem rgba(0,0,0,.35)}
.flychip{position:absolute;left:0;top:0;width:1.6rem;height:1.6rem;translate:-50% -50%;border-radius:50%;z-index:70;pointer-events:none;
  background:repeating-conic-gradient(#fff6dc 0 30deg,var(--gold) 0 60deg);box-shadow:0 0 0 .2rem rgba(255,217,134,.5),0 .2rem .5rem rgba(0,0,0,.45)}
.float{position:absolute;font:900 1.5rem/1 var(--round);color:var(--gold-hi);text-shadow:0 2px 6px rgba(0,0,0,.6);pointer-events:none;z-index:70;animation:rise 1.3s ease-out forwards;translate:-50% 0}
.float.me{font-size:1.9rem}
@keyframes rise{0%{opacity:0;margin-top:.6rem}15%{opacity:1}100%{opacity:0;margin-top:-2.6rem}}

/* ---------------- the dock: raise size, then the three moves */
.dock{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}
#game.wide .dock{width:13rem}
.actdock{display:flex;flex-direction:column;gap:.4rem;width:100%;max-width:34rem}
.sizer{display:flex;gap:.35rem}
.sz{flex:1;min-width:0;min-height:44px;height:2.6rem;border:0;border-radius:.7rem;background:rgba(0,0,0,.28);color:var(--paper);font:800 1rem/1 var(--round);box-shadow:inset 0 0 0 2px var(--hair);padding:0 .2em}
#less,#more{flex:.6;font-size:1.5rem}
.sz:active{transform:translateY(1px)}
.sz:disabled{opacity:.35;cursor:default}
.acts{display:flex;gap:.45rem}
.act{flex:1;min-width:0;min-height:3.3rem;border:0;border-radius:.9rem;font:800 1.15rem/1.05 var(--round);color:#3a2504;padding:0 .25em;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-lo));box-shadow:0 1px 0 #fff8 inset,0 3px 0 #7a4d06,0 6px 12px rgba(0,0,0,.3)}
.act.fold{background:linear-gradient(180deg,#f2ece0,#d9d0bf);color:#3b3227;box-shadow:0 1px 0 #fff8 inset,0 3px 0 #85796a,0 6px 12px rgba(0,0,0,.3);flex:.8}
.act.raise{flex:1.3}
.act:active{transform:translateY(2px);box-shadow:0 1px 0 #fff8 inset,0 1px 0 #7a4d06}
.act:disabled{opacity:.38;cursor:default;filter:grayscale(.6)}
.sz:focus-visible,.act:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.nextdock{display:flex;align-items:center;justify-content:center;min-height:6.1rem;width:100%}
.nextdock .pill{min-width:12rem;min-height:3.3rem}
#game.wide .actdock{gap:.45rem}
#game.wide .sizer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.35rem}
#game.wide .sizer .sz{height:2.4rem}
#game.wide #potsz{grid-column:1/3}
#game.wide #allin{grid-column:3}
#game.wide #less{grid-row:1;grid-column:1}
#game.wide #half{grid-row:1;grid-column:2}
#game.wide #more{grid-row:1;grid-column:3}
#game.wide .acts{flex-direction:column;gap:.4rem}
#game.wide .act{min-height:2.8rem;flex:none}
#game.wide .nextdock .pill{min-width:0;width:100%;padding:.6em .5em}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------------- popups */
.card.result{text-align:center}
.card.result .bigchips{font:900 2.6rem/1 var(--round);color:var(--felt);margin:.1em 0 .2em}
.card.result.lost .bigchips{color:var(--paper-soft);font-size:1.8rem}
.card.result .actions{flex-direction:row;flex-wrap:wrap;justify-content:center}
.card .tables .goal{font:800 .95em/1 var(--round);white-space:nowrap;color:var(--felt)}
.card .how p{font-size:.97em}
.card .keys{color:var(--paper-soft);font-size:.85em;text-align:center}